@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/testcafe/build/23.js

@@ -1,29 +1,5 @@
 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[23],{
 
-/***/ "../round/index.js":
-/*!*************************!*\
-  !*** ../round/index.js ***!
-  \*************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return round; });\n/* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! big.js */ \"../../node_modules/big.js/big.js\");\n/* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(big_js__WEBPACK_IMPORTED_MODULE_0__);\n/*\n * Copyright (C) 2013 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n // rounds a number to 'n' digits\n\nfunction round(n) {\n  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n\n  try {\n    return parseFloat(big_js__WEBPACK_IMPORTED_MODULE_0___default()(n).round(digits), 10);\n  } catch (error) {\n    return NaN;\n  }\n}\nround.DEFAULT = 2;\n\n//# sourceURL=webpack:///../round/index.js?");
-
-/***/ }),
-
-/***/ "./src/canvasFileBrowser/FlashAlert.js":
-/*!*********************************************!*\
-  !*** ./src/canvasFileBrowser/FlashAlert.js ***!
-  \*********************************************/
-/*! exports provided: default, showFlashAlert, destroyContainer, showFlashError, showFlashSuccess */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return FlashAlert; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"showFlashAlert\", function() { return showFlashAlert; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"destroyContainer\", function() { return destroyContainer; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"showFlashError\", function() { return showFlashError; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"showFlashSuccess\", function() { return showFlashSuccess; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ \"../../node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-alerts */ \"../../node_modules/@instructure/ui-alerts/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-a11y-content */ \"../../node_modules/@instructure/ui-a11y-content/es/index.js\");\n/* harmony import */ var _instructure_ui_motion__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @instructure/ui-motion */ \"../../node_modules/@instructure/ui-motion/es/index.js\");\n/*\n * Copyright (C) 2017 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n/**\n * Flash alerts, especially for ajax error messages\n * Typical usage:\n * import {showFlashError} from './FlashAlert'\n * ...\n * axios.put(url, data).then((response) => {\n *     // do something with response\n *   }).catch(showFlashError(your_error_message))\n *\n * showFlashError() with no argument shows a generic message\n *\n * On error, will display an inst-ui Alert at the top of the page\n * with an error message and \"Details\" button. When the user clicks\n * the button, it shows error details extracted from the axios Error\n *\n * You could also import the lower level showFlashAlert function or\n * the FlashAlert component if you need more control\n *\n * showFlashAlert({ err, message, type }, onCloseCallback)\n *  err: error object\n *  message: user-facing message\n *  type: one of ['info', 'success', 'warning', 'error']\n *        default is 'info' unless an error object is passed in, else is 'error'\n */\n\n\n\n\n\n\n\n\n\nconst messageHolderId = 'flashalert_message_holder'; // specs fail if I reuse jquery's elements\n\nconst screenreaderMessageHolderId = 'flash_screenreader_holder';\nconst timeout = 10000; // An Alert with a message and \"Details\" button which surfaces\n// more info about the error when pressed.\n// Is displayed at the top of the document, and will close itself after a while\n\nclass FlashAlert extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {\n  constructor(props) {\n    super(props);\n\n    this.showDetails = () => {\n      this.setState({\n        showDetails: true\n      });\n      clearTimeout(this.timerId);\n      this.timerId = setTimeout(() => this.closeAlert(), this.props.timeout);\n    };\n\n    this.closeAlert = () => {\n      this.setState({\n        isOpen: false\n      }, () => {\n        setTimeout(() => {\n          clearTimeout(this.timerId);\n          this.props.onClose();\n        }, 500);\n      });\n    };\n\n    this.state = {\n      showDetails: false,\n      isOpen: true\n    };\n    this.timerId = 0;\n  }\n\n  getLiveRegion() {\n    // return element where flash screenreader messages go.\n    // create if necessary\n    let liveRegion = document.getElementById(screenreaderMessageHolderId);\n\n    if (!liveRegion) {\n      liveRegion = document.createElement('div');\n      liveRegion.id = screenreaderMessageHolderId;\n      liveRegion.setAttribute('role', 'alert');\n      document.body.appendChild(liveRegion);\n    }\n\n    return liveRegion;\n  }\n\n  findDetailMessage() {\n    const err = this.props.error;\n    let a = err.message;\n    let b;\n\n    if (err.response) {\n      if (err.response.data) {\n        try {\n          if (Array.isArray(err.response.data.errors)) {\n            // probably a canvas api\n            a = err.response.data.errors[0].message;\n            b = err.message;\n          } else if (err.response.data.message) {\n            // probably a canvas api too\n            a = err.response.data.message;\n            b = err.message;\n          }\n        } catch (ignore) {\n          a = err.message;\n        }\n      }\n    }\n\n    return {\n      a,\n      b\n    };\n  }\n\n  renderDetailMessage() {\n    const {\n      a,\n      b\n    } = this.findDetailMessage();\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_6__[\"Text\"], {\n      as: \"p\",\n      fontStyle: \"italic\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_6__[\"Text\"], null, a), b ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"br\", null) : null, b ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_6__[\"Text\"], null, b) : null);\n  }\n\n  render() {\n    let details = null;\n\n    if (this.props.error) {\n      if (this.state.showDetails) {\n        details = this.renderDetailMessage();\n      } else {\n        details = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__[\"PresentationContent\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_5__[\"Button\"], {\n          variant: \"link\",\n          onClick: this.showDetails\n        }, Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Details'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__[\"ScreenReaderContent\"], null, this.renderDetailMessage()));\n      }\n    }\n\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_motion__WEBPACK_IMPORTED_MODULE_8__[\"Transition\"], {\n      transitionOnMount: true,\n      in: this.state.isOpen,\n      type: \"fade\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_4__[\"Alert\"], {\n      variant: this.props.variant,\n      renderCloseButtonLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Close'),\n      onDismiss: this.closeAlert,\n      margin: \"small auto\",\n      timeout: this.props.timeout,\n      liveRegion: this.getLiveRegion,\n      transition: \"fade\",\n      screenReaderOnly: this.props.screenReaderOnly\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"p\", {\n      style: {\n        margin: '0 -5px'\n      }\n    }, this.props.message), details)));\n  }\n\n}\nFlashAlert.propTypes = {\n  onClose: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired,\n  message: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,\n  error: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.instanceOf(Error),\n  variant: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOf(['info', 'success', 'warning', 'error']),\n  timeout: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n  screenReaderOnly: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool\n};\nFlashAlert.defaultProps = {\n  error: null,\n  variant: 'info',\n  timeout,\n  screenReaderOnly: false\n};\nfunction showFlashAlert(_ref) {\n  let {\n    message,\n    err,\n    type = err ? 'error' : 'info',\n    srOnly = false\n  } = _ref;\n\n  function closeAlert(atNode) {\n    react_dom__WEBPACK_IMPORTED_MODULE_2___default.a.unmountComponentAtNode(atNode);\n    atNode.remove();\n  }\n\n  function getAlertContainer() {\n    let alertContainer = document.getElementById(messageHolderId);\n\n    if (!alertContainer) {\n      alertContainer = document.createElement('div');\n      alertContainer.classList.add('clickthrough-container');\n      alertContainer.id = messageHolderId;\n      alertContainer.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 100%; z-index: 100000;');\n      document.body.appendChild(alertContainer);\n    }\n\n    return alertContainer;\n  }\n\n  function renderAlert(parent) {\n    react_dom__WEBPACK_IMPORTED_MODULE_2___default.a.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(FlashAlert, {\n      message: message,\n      timeout: Number.isNaN(parseInt(undefined.flashAlertTimeout, 10)) ? timeout : undefined.flashAlertTimeout,\n      error: err,\n      variant: type,\n      onClose: closeAlert.bind(null, parent) // eslint-disable-line react/jsx-no-bind\n      ,\n      screenReaderOnly: srOnly\n    }), parent);\n  }\n\n  const div = document.createElement('div'); // div.setAttribute('class', styles.flashMessage)\n\n  div.setAttribute('style', 'max-width:50em;margin:1rem auto;');\n  div.setAttribute('class', 'flashalert-message');\n  getAlertContainer().appendChild(div);\n  renderAlert(div);\n}\nfunction destroyContainer() {\n  const container = document.getElementById(messageHolderId);\n  const liveRegion = document.getElementById(screenreaderMessageHolderId);\n  if (container) container.remove();\n  if (liveRegion) liveRegion.remove();\n}\nfunction showFlashError() {\n  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('An error occurred making a network request');\n  return err => showFlashAlert({\n    message,\n    err,\n    type: 'error'\n  });\n}\nfunction showFlashSuccess(message) {\n  return () => showFlashAlert({\n    message,\n    type: 'success'\n  });\n}\n\n//# sourceURL=webpack:///./src/canvasFileBrowser/FlashAlert.js?");
-
-/***/ }),
-
 /***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ColorSection.js":
 /*!***********************************************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ColorSection.js ***!
@@ -80,7 +56,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Header\", function() { return Header; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-text-input */ \"../../node_modules/@instructure/ui-text-input/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _instructure_ui_text_area__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-text-area */ \"../../node_modules/@instructure/ui-text-area/es/index.js\");\n/* harmony import */ var _instructure_ui_tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-tooltip */ \"../../node_modules/@instructure/ui-tooltip/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_checkbox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @instructure/ui-checkbox */ \"../../node_modules/@instructure/ui-checkbox/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../svg/utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../utils/useDebouncedValue */ \"./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\nconst Header = _ref => {\n  let {\n    settings,\n    onChange,\n    allowNameChange,\n    nameRef\n  } = _ref;\n  const originalName = settings.originalName;\n  const [name, setName, setImmediateName] = Object(_utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_11__[\"default\"])(settings.name, n => onChange({\n    name: n\n  }));\n  const [alt, setAlt] = Object(_utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_11__[\"default\"])(settings.alt, a => onChange({\n    alt: a\n  }));\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!allowNameChange) onChange({\n      name: originalName\n    });\n  }, [allowNameChange, onChange, originalName]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    // The \"immediate\" bit of name state may have been initialized to an\n    // empty value if the app has not yet fetched the file's name from the\n    // API (on icon edit).\n    //\n    // If that's the case, we need to update the \"immediate\" piece of name\n    // state to present the file name.\n    if (!name && !!settings.name) {\n      setImmediateName(settings.name);\n    }\n  }, [name, setImmediateName, settings.name]);\n  const tooltipText = Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Used by screen readers to describe the content of an image');\n  const textAreaLabel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    alignItems: \"center\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, null, Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Alt Text')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    margin: \"0 0 0 xx-small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_tooltip__WEBPACK_IMPORTED_MODULE_5__[\"Tooltip\"], {\n    on: ['hover', 'focus'],\n    placement: \"top\",\n    tip: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__[\"View\"], {\n      display: \"block\",\n      id: \"alt-text-label-tooltip\",\n      maxWidth: \"14rem\"\n    }, tooltipText)\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_7__[\"Button\"], {\n    icon: _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_9__[\"IconQuestionLine\"],\n    size: \"small\",\n    variant: \"icon\"\n  }))));\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    direction: \"column\",\n    padding: \"small small 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__[\"TextInput\"], {\n    id: \"icon-name\",\n    \"data-testid\": \"icon-name\",\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Name'),\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('untitled'),\n    interaction: allowNameChange ? 'enabled' : 'disabled',\n    onChange: setName,\n    value: name ? Object(_svg_utils__WEBPACK_IMPORTED_MODULE_10__[\"decode\"])(name) : '',\n    inputRef: ref => {\n      if (nameRef) nameRef.current = ref;\n    }\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_area__WEBPACK_IMPORTED_MODULE_4__[\"TextArea\"], {\n    id: \"icon-alt-text\",\n    height: \"4rem\",\n    disabled: settings.isDecorative,\n    label: textAreaLabel,\n    onChange: setAlt,\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('(Describe the icon)'),\n    resize: \"vertical\",\n    value: alt\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_checkbox__WEBPACK_IMPORTED_MODULE_8__[\"Checkbox\"], {\n    checked: settings.isDecorative,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Decorative Icon'),\n    onChange: () => onChange({\n      isDecorative: !settings.isDecorative\n    })\n  })));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Header.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Header\", function() { return Header; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-text-input */ \"../../node_modules/@instructure/ui-text-input/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _instructure_ui_text_area__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-text-area */ \"../../node_modules/@instructure/ui-text-area/es/index.js\");\n/* harmony import */ var _instructure_ui_tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-tooltip */ \"../../node_modules/@instructure/ui-tooltip/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_checkbox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @instructure/ui-checkbox */ \"../../node_modules/@instructure/ui-checkbox/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../svg/utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../utils/useDebouncedValue */ \"./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\nconst Header = _ref => {\n  let {\n    settings,\n    onChange,\n    allowNameChange,\n    nameRef\n  } = _ref;\n  const originalName = settings.originalName;\n  const [name, setName, setImmediateName] = Object(_utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_11__[\"default\"])(settings.name, n => onChange({\n    name: n\n  }));\n  const [alt, setAlt] = Object(_utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_11__[\"default\"])(settings.alt, a => onChange({\n    alt: a\n  }));\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!allowNameChange) onChange({\n      name: originalName\n    });\n  }, [allowNameChange, onChange, originalName]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    // The \"immediate\" bit of name state may have been initialized to an\n    // empty value if the app has not yet fetched the file's name from the\n    // API (on icon edit).\n    //\n    // If that's the case, we need to update the \"immediate\" piece of name\n    // state to present the file name.\n    if (!name && !!settings.name) {\n      setImmediateName(settings.name);\n    }\n  }, [name, setImmediateName, settings.name]);\n  const tooltipText = Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Used by screen readers to describe the content of an image');\n  const textAreaLabel = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    alignItems: \"center\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, null, Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Alt Text')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    margin: \"0 0 0 xx-small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_tooltip__WEBPACK_IMPORTED_MODULE_5__[\"Tooltip\"], {\n    on: ['hover', 'focus'],\n    placement: \"top\",\n    renderTip: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__[\"View\"], {\n      display: \"block\",\n      id: \"alt-text-label-tooltip\",\n      maxWidth: \"14rem\"\n    }, tooltipText)\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_7__[\"IconButton\"], {\n    renderIcon: _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_9__[\"IconQuestionLine\"],\n    withBackground: false,\n    withBorder: false,\n    size: \"small\",\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Toggle tooltip')\n  }))));\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    direction: \"column\",\n    padding: \"small small 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__[\"TextInput\"], {\n    id: \"icon-name\",\n    \"data-testid\": \"icon-name\",\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Name'),\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('untitled'),\n    interaction: allowNameChange ? 'enabled' : 'disabled',\n    onChange: setName,\n    value: name ? Object(_svg_utils__WEBPACK_IMPORTED_MODULE_10__[\"decode\"])(name) : '',\n    inputRef: ref => {\n      if (nameRef) nameRef.current = ref;\n    }\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_area__WEBPACK_IMPORTED_MODULE_4__[\"TextArea\"], {\n    id: \"icon-alt-text\",\n    height: \"4rem\",\n    disabled: settings.isDecorative,\n    label: textAreaLabel,\n    onChange: setAlt,\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('(Describe the icon)'),\n    resize: \"vertical\",\n    value: alt\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_checkbox__WEBPACK_IMPORTED_MODULE_8__[\"Checkbox\"], {\n    checked: settings.isDecorative,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Decorative Icon'),\n    onChange: () => onChange({\n      isDecorative: !settings.isDecorative\n    })\n  })));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Header.js?");
 
 /***/ }),
 
@@ -92,7 +68,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ImageCropperModal\", function() { return ImageCropperModal; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-modal */ \"../../node_modules/@instructure/ui-modal/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_heading__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-heading */ \"../../node_modules/@instructure/ui-heading/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n/* harmony import */ var _Preview__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Preview */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js\");\n/* harmony import */ var _controls__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./controls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../svg/utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _imageCropUtils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./imageCropUtils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js\");\n/* harmony import */ var _propTypes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./propTypes */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/propTypes.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst handleSubmit = (onSubmit, settings) => Object(_imageCropUtils__WEBPACK_IMPORTED_MODULE_11__[\"createCroppedImageSvg\"])(settings).then(generatedSvg => Object(_svg_utils__WEBPACK_IMPORTED_MODULE_10__[\"convertFileToBase64\"])(new Blob([generatedSvg.outerHTML], {\n  type: 'image/svg+xml'\n}))).then(base64Image => onSubmit(settings, base64Image));\n\nconst ImageCropperModal = _ref => {\n  let {\n    open,\n    onClose,\n    onSubmit,\n    image,\n    cropSettings\n  } = _ref;\n  const [settings, dispatch] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useReducer\"])(_reducers_imageCropper__WEBPACK_IMPORTED_MODULE_7__[\"cropperSettingsReducer\"], _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_7__[\"defaultState\"]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_7__[\"actions\"].SET_IMAGE,\n      payload: image\n    });\n  }, [image]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    cropSettings && dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_7__[\"actions\"].UPDATE_SETTINGS,\n      payload: cropSettings\n    });\n  }, [cropSettings]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"], {\n    size: \"large\",\n    open: open,\n    onDismiss: onClose,\n    shouldCloseOnDocumentClick: false\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"].Header, {\n    id: \"imageCropperHeader\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"CloseButton\"], {\n    placement: \"end\",\n    offset: \"small\",\n    onClick: onClose,\n    screenReaderLabel: \"Close\"\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_heading__WEBPACK_IMPORTED_MODULE_5__[\"Heading\"], null, Object(_format_message__WEBPACK_IMPORTED_MODULE_6__[\"default\"])('Crop Image'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"].Body, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    direction: \"column\",\n    margin: \"none\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    margin: \"0 0 small 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_controls__WEBPACK_IMPORTED_MODULE_9__[\"Controls\"], {\n    settings: settings,\n    dispatch: dispatch\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Preview__WEBPACK_IMPORTED_MODULE_8__[\"Preview\"], {\n    settings: settings,\n    dispatch: dispatch\n  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"].Footer, {\n    id: \"imageCropperFooter\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"Button\"], {\n    onClick: onClose,\n    margin: \"0 x-small 0 0\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_6__[\"default\"])('Cancel')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"Button\"], {\n    color: \"primary\",\n    type: \"submit\",\n    onClick: e => {\n      e.preventDefault();\n      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);\n    }\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_6__[\"default\"])('Save'))));\n};\nImageCropperModal.propTypes = {\n  image: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,\n  cropSettings: _propTypes__WEBPACK_IMPORTED_MODULE_12__[\"ImageCropperSettingsPropTypes\"],\n  open: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n  onClose: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onSubmit: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nImageCropperModal.defaultProps = {\n  open: false,\n  cropSettings: null,\n  onClose: () => {},\n  onSubmit: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Modal.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ImageCropperModal\", function() { return ImageCropperModal; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-modal */ \"../../node_modules/@instructure/ui-modal/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_heading__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-heading */ \"../../node_modules/@instructure/ui-heading/es/index.js\");\n/* harmony import */ var _instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-alerts */ \"../../node_modules/@instructure/ui-alerts/es/index.js\");\n/* harmony import */ var _instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-spinner */ \"../../node_modules/@instructure/ui-spinner/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n/* harmony import */ var _Preview__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Preview */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js\");\n/* harmony import */ var _controls__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./controls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../svg/utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _imageCropUtils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./imageCropUtils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js\");\n/* harmony import */ var _propTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./propTypes */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/propTypes.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst handleSubmit = (onSubmit, settings) => Object(_imageCropUtils__WEBPACK_IMPORTED_MODULE_13__[\"createCroppedImageSvg\"])(settings).then(generatedSvg => Object(_svg_utils__WEBPACK_IMPORTED_MODULE_12__[\"convertFileToBase64\"])(new Blob([generatedSvg.outerHTML], {\n  type: 'image/svg+xml'\n}))).then(base64Image => onSubmit(settings, base64Image));\n\nconst renderBody = (settings, dispatch, message, loading) => {\n  if (loading) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n      justifyItems: \"center\",\n      margin: \"\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__[\"Spinner\"], {\n      margin: \"small\",\n      renderTitle: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Loading...'),\n      size: \"large\"\n    })));\n  }\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    direction: \"column\",\n    margin: \"none\"\n  }, message && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    \"data-testid\": \"alert-message\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_6__[\"Alert\"], {\n    variant: \"info\",\n    renderCloseButtonLabel: \"Close\",\n    margin: \"small\",\n    timeout: 10000\n  }, message)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    margin: \"0 0 small 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_controls__WEBPACK_IMPORTED_MODULE_11__[\"Controls\"], {\n    settings: settings,\n    dispatch: dispatch\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Preview__WEBPACK_IMPORTED_MODULE_10__[\"Preview\"], {\n    settings: settings,\n    dispatch: dispatch\n  })));\n};\n\nconst renderFooter = (settings, onClose) => {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"Button\"], {\n    onClick: onClose,\n    margin: \"0 x-small 0 0\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Cancel')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"Button\"], {\n    color: \"primary\",\n    type: \"submit\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Save')));\n};\n\nconst ImageCropperModal = _ref => {\n  let {\n    open,\n    onClose,\n    onSubmit,\n    image,\n    message,\n    cropSettings,\n    loading\n  } = _ref;\n  const [settings, dispatch] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useReducer\"])(_reducers_imageCropper__WEBPACK_IMPORTED_MODULE_9__[\"cropperSettingsReducer\"], _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_9__[\"defaultState\"]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_9__[\"actions\"].SET_IMAGE,\n      payload: image\n    });\n  }, [image]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    cropSettings && dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_9__[\"actions\"].UPDATE_SETTINGS,\n      payload: cropSettings\n    });\n  }, [cropSettings]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"], {\n    \"data-mce-component\": true,\n    as: \"form\",\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Crop Image'),\n    size: \"large\",\n    open: open,\n    onDismiss: onClose,\n    onSubmit: e => {\n      e.preventDefault();\n      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);\n    },\n    shouldCloseOnDocumentClick: false\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"].Header, {\n    id: \"imageCropperHeader\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"CloseButton\"], {\n    placement: \"end\",\n    offset: \"small\",\n    onClick: onClose,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Close')\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_heading__WEBPACK_IMPORTED_MODULE_5__[\"Heading\"], null, Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Crop Image'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"].Body, null, renderBody(settings, dispatch, message, loading)), !loading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_modal__WEBPACK_IMPORTED_MODULE_2__[\"Modal\"].Footer, {\n    id: \"imageCropperFooter\"\n  }, renderFooter(settings, onClose)));\n};\nImageCropperModal.propTypes = {\n  image: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,\n  cropSettings: _propTypes__WEBPACK_IMPORTED_MODULE_14__[\"ImageCropperSettingsPropTypes\"],\n  message: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n  open: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n  onClose: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onSubmit: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  loading: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool\n};\nImageCropperModal.defaultProps = {\n  open: false,\n  cropSettings: null,\n  message: null,\n  loading: false,\n  onClose: () => {},\n  onSubmit: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Modal.js?");
 
 /***/ }),
 
@@ -104,7 +80,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Preview\", function() { return Preview; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _propTypes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./propTypes */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/propTypes.js\");\n/* harmony import */ var _svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./svg */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _useMouseWheel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./useMouseWheel */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useMouseWheel.js\");\n/* harmony import */ var _useArrowKeys__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./useArrowKeys */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useArrowKeys.js\");\n/* harmony import */ var _shared_CheckerboardStyling__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../shared/CheckerboardStyling */ \"./src/rce/plugins/shared/CheckerboardStyling.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n/**\n * Remove the node contents and append the svg element.\n */\n\nfunction replaceSvg(svg, node) {\n  if (!node) return;\n\n  while (node.firstChild) {\n    node.removeChild(node.lastChild);\n  }\n\n  node.appendChild(svg);\n}\n\nfunction getTransformValue(_ref) {\n  let {\n    translateX,\n    translateY,\n    rotation,\n    scaleRatio\n  } = _ref;\n  const values = [];\n  if (translateX !== 0) values.push(`translateX(${translateX}px)`);\n  if (translateY !== 0) values.push(`translateY(${translateY}px)`);\n  if (rotation && rotation % 360 !== 0) values.push(`rotate(${rotation}deg)`);\n  if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);\n  return values.join(' ');\n}\n\nconst Preview = _ref2 => {\n  let {\n    settings,\n    dispatch\n  } = _ref2;\n  const shapeRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n  const {\n    image,\n    shape,\n    rotation,\n    scaleRatio,\n    translateX,\n    translateY\n  } = settings;\n  const [tempScaleRatio, onWheelCallback] = Object(_useMouseWheel__WEBPACK_IMPORTED_MODULE_6__[\"useMouseWheel\"])(scaleRatio, dispatch);\n  const [tempTranslateX, tempTranslateY] = Object(_useArrowKeys__WEBPACK_IMPORTED_MODULE_7__[\"useArrowKeys\"])(translateX, translateY, dispatch);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const svg = Object(_svg__WEBPACK_IMPORTED_MODULE_4__[\"buildSvg\"])(shape);\n    replaceSvg(svg, shapeRef.current);\n  });\n  const transformValue = getTransformValue({\n    translateX: tempTranslateX,\n    translateY: tempTranslateY,\n    rotation,\n    scaleRatio: tempScaleRatio\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"cropper-preview\",\n    style: {\n      position: 'relative',\n      width: `${_constants__WEBPACK_IMPORTED_MODULE_5__[\"PREVIEW_WIDTH\"]}px`,\n      height: `${_constants__WEBPACK_IMPORTED_MODULE_5__[\"PREVIEW_HEIGHT\"]}px`,\n      top: 0,\n      left: 0,\n      overflow: 'hidden',\n      ...Object(_shared_CheckerboardStyling__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(_constants__WEBPACK_IMPORTED_MODULE_5__[\"BACKGROUND_SQUARE_SIZE\"])\n    },\n    onWheel: onWheelCallback\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n    src: image,\n    alt: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Image to crop'),\n    style: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      height: '100%',\n      width: '100%',\n      objectFit: 'contain',\n      textAlign: 'center',\n      transform: transformValue\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"cropShapeContainer\",\n    style: {\n      position: 'absolute',\n      top: 0,\n      left: 0\n    },\n    ref: shapeRef\n  }));\n};\nPreview.propTypes = {\n  settings: _propTypes__WEBPACK_IMPORTED_MODULE_3__[\"ImageCropperSettingsPropTypes\"].isRequired,\n  dispatch: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Preview\", function() { return Preview; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _propTypes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./propTypes */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/propTypes.js\");\n/* harmony import */ var _svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./svg */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _useMouseWheel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./useMouseWheel */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useMouseWheel.js\");\n/* harmony import */ var _useKeyMouseEvents__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./useKeyMouseEvents */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js\");\n/* harmony import */ var _shared_CheckerboardStyling__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../shared/CheckerboardStyling */ \"./src/rce/plugins/shared/CheckerboardStyling.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n/**\n * Remove the node contents and append the svg element.\n */\n\nfunction replaceSvg(svg, node) {\n  if (!node) return;\n\n  while (node.firstChild) {\n    node.removeChild(node.lastChild);\n  }\n\n  node.appendChild(svg);\n}\n\nfunction getTransformValue(_ref) {\n  let {\n    translateX,\n    translateY,\n    rotation,\n    scaleRatio\n  } = _ref;\n  const values = [];\n  if (translateX !== 0) values.push(`translateX(${translateX}px)`);\n  if (translateY !== 0) values.push(`translateY(${translateY}px)`);\n  if (rotation && rotation % 360 !== 0) values.push(`rotate(${rotation}deg)`);\n  if (scaleRatio > 1) values.push(`scale(${scaleRatio})`);\n  return values.join(' ');\n}\n\nconst Preview = _ref2 => {\n  let {\n    settings,\n    dispatch\n  } = _ref2;\n  const previewRef = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__[\"createRef\"])();\n  const shapeRef = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__[\"createRef\"])();\n  const imgRef = /*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_0__[\"createRef\"])();\n  const {\n    image,\n    shape,\n    rotation,\n    scaleRatio,\n    translateX,\n    translateY\n  } = settings;\n  const [tempScaleRatio, onWheelCallback] = Object(_useMouseWheel__WEBPACK_IMPORTED_MODULE_6__[\"useMouseWheel\"])(scaleRatio, dispatch);\n  const [tempTranslateX, tempTranslateY, onMouseDownCallback] = Object(_useKeyMouseEvents__WEBPACK_IMPORTED_MODULE_7__[\"useKeyMouseEvents\"])(translateX, translateY, dispatch, imgRef);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, []);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const svg = Object(_svg__WEBPACK_IMPORTED_MODULE_4__[\"buildSvg\"])(shape);\n    replaceSvg(svg, shapeRef.current);\n  });\n  const transformValue = getTransformValue({\n    translateX: tempTranslateX,\n    translateY: tempTranslateY,\n    rotation,\n    scaleRatio: tempScaleRatio\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"cropper-preview\",\n    ref: previewRef,\n    style: {\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      position: 'relative',\n      width: `${_constants__WEBPACK_IMPORTED_MODULE_5__[\"PREVIEW_WIDTH\"]}px`,\n      height: `${_constants__WEBPACK_IMPORTED_MODULE_5__[\"PREVIEW_HEIGHT\"]}px`,\n      top: 0,\n      left: 0,\n      overflow: 'hidden',\n      ...Object(_shared_CheckerboardStyling__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(_constants__WEBPACK_IMPORTED_MODULE_5__[\"BACKGROUND_SQUARE_SIZE\"])\n    },\n    onWheel: onWheelCallback\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n    src: image,\n    ref: imgRef,\n    alt: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Image to crop'),\n    style: {\n      height: '100%',\n      objectFit: 'contain',\n      textAlign: 'center',\n      transform: transformValue\n    },\n    onMouseDown: e => onMouseDownCallback(e, previewRef.current)\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"cropShapeContainer\",\n    ref: shapeRef,\n    style: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      pointerEvents: 'none'\n    }\n  }));\n};\nPreview.propTypes = {\n  settings: _propTypes__WEBPACK_IMPORTED_MODULE_3__[\"ImageCropperSettingsPropTypes\"].isRequired,\n  dispatch: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func.isRequired\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js?");
 
 /***/ }),
 
@@ -132,6 +108,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 
 /***/ }),
 
+/***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js":
+/*!**********************************************************************************************************************!*\
+  !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js ***!
+  \**********************************************************************************************************************/
+/*! exports provided: ResetControls */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ResetControls\", function() { return ResetControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\nconst ResetControls = _ref => {\n  let {\n    onReset\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_3__[\"Button\"], {\n    renderIcon: _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_4__[\"IconResetLine\"],\n    onClick: onReset\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Reset')));\n};\nResetControls.propTypes = {\n  onReset: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nResetControls.defaultProps = {\n  onReset: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js?");
+
+/***/ }),
+
 /***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js":
 /*!*************************************************************************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js ***!
@@ -140,7 +128,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"RotationControls\", function() { return RotationControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _CustomNumberInput__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./CustomNumberInput */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/CustomNumberInput.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\nconst parseRotationText = value => {\n  // Matches a positive/negative integer/decimal followed by \"º\" symbol\n  const matches = value.match(/([-|+]?\\d+(?:\\.\\d+)?)º?/);\n\n  if (!matches) {\n    return null;\n  }\n\n  const result = parseInt(matches[1], 10);\n\n  if (Number.isNaN(result)) {\n    return null;\n  }\n\n  return result;\n};\n\nconst formatRotationText = value => `${value}º`;\n\nconst RotationControls = _ref => {\n  let {\n    rotation,\n    onChange\n  } = _ref;\n\n  const rotateLeftCallback = () => onChange(Object(_utils__WEBPACK_IMPORTED_MODULE_6__[\"calculateRotation\"])(Object(_utils__WEBPACK_IMPORTED_MODULE_6__[\"getNearestRectAngle\"])(rotation, true) - _constants__WEBPACK_IMPORTED_MODULE_7__[\"BUTTON_ROTATION_DEGREES\"]));\n\n  const rotateRightCallback = () => onChange(Object(_utils__WEBPACK_IMPORTED_MODULE_6__[\"calculateRotation\"])(Object(_utils__WEBPACK_IMPORTED_MODULE_6__[\"getNearestRectAngle\"])(rotation, false) + _constants__WEBPACK_IMPORTED_MODULE_7__[\"BUTTON_ROTATION_DEGREES\"]));\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    margin: \"0 small 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CustomNumberInput__WEBPACK_IMPORTED_MODULE_5__[\"CustomNumberInput\"], {\n    value: rotation,\n    parseValueCallback: parseRotationText,\n    formatValueCallback: formatRotationText,\n    processValueCallback: _utils__WEBPACK_IMPORTED_MODULE_6__[\"calculateRotation\"],\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Rotation'),\n    onChange: value => onChange(value)\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    margin: \"0 small 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__[\"IconButton\"], {\n    onClick: rotateLeftCallback,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Rotate image -90 degrees')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_3__[\"IconRotateLeftLine\"], null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    margin: \"0 medium 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__[\"IconButton\"], {\n    onClick: rotateRightCallback,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Rotate image 90 degrees')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_3__[\"IconRotateRightLine\"], null))));\n};\nRotationControls.propTypes = {\n  rotation: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nRotationControls.defaultProps = {\n  rotation: 0,\n  onChange: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"RotationControls\", function() { return RotationControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _CustomNumberInput__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./CustomNumberInput */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/CustomNumberInput.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\nconst parseRotationText = value => {\n  // Matches a positive/negative integer/decimal followed by \"º\" symbol\n  const matches = value.match(/([-|+]?\\d+(?:\\.\\d+)?)º?/);\n\n  if (!matches) {\n    return null;\n  }\n\n  const result = parseInt(matches[1], 10);\n\n  if (Number.isNaN(result)) {\n    return null;\n  }\n\n  return result;\n};\n\nconst formatRotationText = value => `${value}º`;\n\nconst RotationControls = _ref => {\n  let {\n    rotation,\n    onChange\n  } = _ref;\n\n  const rotateLeftCallback = () => onChange(Object(_utils__WEBPACK_IMPORTED_MODULE_7__[\"calculateRotation\"])(Object(_utils__WEBPACK_IMPORTED_MODULE_7__[\"getNearestRectAngle\"])(rotation, true) - _constants__WEBPACK_IMPORTED_MODULE_8__[\"BUTTON_ROTATION_DEGREES\"]));\n\n  const rotateRightCallback = () => onChange(Object(_utils__WEBPACK_IMPORTED_MODULE_7__[\"calculateRotation\"])(Object(_utils__WEBPACK_IMPORTED_MODULE_7__[\"getNearestRectAngle\"])(rotation, false) + _constants__WEBPACK_IMPORTED_MODULE_8__[\"BUTTON_ROTATION_DEGREES\"]));\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    margin: \"0 medium 0 0\",\n    title: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Rotation'),\n    role: \"toolbar\",\n    tabindex: \"-1\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__[\"View\"], {\n    display: \"inline-block\",\n    margin: \"0 small 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CustomNumberInput__WEBPACK_IMPORTED_MODULE_6__[\"CustomNumberInput\"], {\n    value: rotation,\n    parseValueCallback: parseRotationText,\n    formatValueCallback: formatRotationText,\n    processValueCallback: _utils__WEBPACK_IMPORTED_MODULE_7__[\"calculateRotation\"],\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Rotation'),\n    onChange: value => onChange(value)\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__[\"IconButton\"], {\n    margin: \"0 small 0 0\",\n    onClick: rotateLeftCallback,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Rotate image -90 degrees')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_3__[\"IconRotateLeftLine\"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__[\"IconButton\"], {\n    onClick: rotateRightCallback,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Rotate image 90 degrees')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_3__[\"IconRotateRightLine\"], null)));\n};\nRotationControls.propTypes = {\n  rotation: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nRotationControls.defaultProps = {\n  rotation: 0,\n  onChange: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js?");
 
 /***/ }),
 
@@ -152,7 +140,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ShapeControls\", function() { return ShapeControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-simple-select */ \"../../node_modules/@instructure/ui-simple-select/es/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _ZoomControls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ZoomControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js\");\n/* harmony import */ var _svg_shape__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../svg/shape */ \"./src/rce/plugins/instructure_icon_maker/svg/shape.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\nconst SHAPE_OPTIONS = [{\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Square,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Square')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Circle,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Circle')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Triangle,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Triangle')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Diamond,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Diamond')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Pentagon,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Pentagon')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Hexagon,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Hexagon')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Octagon,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Octagon')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Star,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Star')\n}];\nconst ShapeControls = _ref => {\n  let {\n    shape,\n    onChange\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    margin: \"0 medium 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"], {\n    isInline: true,\n    assistiveText: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Select crop shape'),\n    value: shape,\n    onChange: (event, _ref2) => {\n      let {\n        id\n      } = _ref2;\n      return onChange(id);\n    },\n    renderLabel: null\n  }, SHAPE_OPTIONS.map(option => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"].Option, {\n    key: option.id,\n    id: option.id,\n    value: option.id\n  }, option.label))));\n};\nShapeControls.propTypes = {\n  shape: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.string,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_4___default.a.func\n};\n_ZoomControls__WEBPACK_IMPORTED_MODULE_5__[\"ZoomControls\"].defaultProps = {\n  shape: 'square',\n  onChange: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ShapeControls\", function() { return ShapeControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-simple-select */ \"../../node_modules/@instructure/ui-simple-select/es/index.js\");\n/* harmony import */ var _ZoomControls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ZoomControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js\");\n/* harmony import */ var _svg_shape__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../svg/shape */ \"./src/rce/plugins/instructure_icon_maker/svg/shape.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\nconst SHAPE_OPTIONS = [{\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Square,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Square')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Circle,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Circle')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Triangle,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Triangle')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Diamond,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Diamond')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Pentagon,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Pentagon')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Hexagon,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Hexagon')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Octagon,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Octagon')\n}, {\n  id: _svg_shape__WEBPACK_IMPORTED_MODULE_6__[\"Shape\"].Star,\n  label: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Star')\n}];\nconst ShapeControls = _ref => {\n  let {\n    shape,\n    onChange\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"].Item, {\n    margin: \"0 medium 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_4__[\"SimpleSelect\"], {\n    isInline: true,\n    assistiveText: Object(_format_message__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('Select crop shape'),\n    value: shape,\n    onChange: (event, _ref2) => {\n      let {\n        id\n      } = _ref2;\n      return onChange(id);\n    },\n    renderLabel: null\n  }, SHAPE_OPTIONS.map(option => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_4__[\"SimpleSelect\"].Option, {\n    key: option.id,\n    id: option.id,\n    value: option.id\n  }, option.label))));\n};\nShapeControls.propTypes = {\n  shape: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\n_ZoomControls__WEBPACK_IMPORTED_MODULE_5__[\"ZoomControls\"].defaultProps = {\n  shape: 'square',\n  onChange: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js?");
 
 /***/ }),
 
@@ -164,7 +152,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ZoomControls\", function() { return ZoomControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _CustomNumberInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./CustomNumberInput */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/CustomNumberInput.js\");\n/* harmony import */ var _canvasFileBrowser_FlashAlert__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../../../canvasFileBrowser/FlashAlert */ \"./src/canvasFileBrowser/FlashAlert.js\");\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @instructure/debounce */ \"./node_modules/@instructure/debounce/es/index.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\nconst parseZoomText = value => {\n  // Matches a positive/negative integer/decimal followed by %\" symbol\n  const matches = value.match(/([-|+]?\\d+(?:\\.\\d+)?)%?/);\n\n  if (!matches) {\n    return null;\n  }\n\n  const result = parseInt(matches[1], 10);\n\n  if (Number.isNaN(result)) {\n    return null;\n  }\n\n  return result;\n};\n\nconst formatZoomText = value => `${value}%`;\n\nconst debouncedAlert = Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_10__[\"debounce\"])(_canvasFileBrowser_FlashAlert__WEBPACK_IMPORTED_MODULE_9__[\"showFlashAlert\"], 1000);\nconst ZoomControls = _ref => {\n  let {\n    scaleRatio,\n    onChange\n  } = _ref;\n\n  const onZoomChange = value => {\n    const message = {\n      message: `${Object(_utils__WEBPACK_IMPORTED_MODULE_4__[\"round\"])(value * 100)}% Zoom`,\n      type: 'info',\n      srOnly: true\n    };\n    debouncedAlert(message);\n    onChange(value);\n  };\n\n  const zoomOutCallback = () => {\n    const newScaleRatio = Object(_utils__WEBPACK_IMPORTED_MODULE_4__[\"calculateScaleRatio\"])(scaleRatio - _constants__WEBPACK_IMPORTED_MODULE_5__[\"BUTTON_SCALE_STEP\"]);\n    onZoomChange(newScaleRatio);\n  };\n\n  const zoomInCallback = () => {\n    const newScaleRatio = Object(_utils__WEBPACK_IMPORTED_MODULE_4__[\"calculateScaleRatio\"])(scaleRatio + _constants__WEBPACK_IMPORTED_MODULE_5__[\"BUTTON_SCALE_STEP\"]);\n    onZoomChange(newScaleRatio);\n  };\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    margin: \"0 small 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CustomNumberInput__WEBPACK_IMPORTED_MODULE_8__[\"CustomNumberInput\"], {\n    value: Object(_utils__WEBPACK_IMPORTED_MODULE_4__[\"round\"])(scaleRatio * 100),\n    parseValueCallback: parseZoomText,\n    formatValueCallback: formatZoomText,\n    processValueCallback: _utils__WEBPACK_IMPORTED_MODULE_4__[\"calculateScalePercentage\"],\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_6__[\"default\"])('Zoom'),\n    onChange: value => onZoomChange(Object(_utils__WEBPACK_IMPORTED_MODULE_4__[\"round\"])(value / 100))\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    margin: \"0 small 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_1__[\"IconButton\"], {\n    onClick: zoomOutCallback,\n    interaction: scaleRatio > _constants__WEBPACK_IMPORTED_MODULE_5__[\"MIN_SCALE_RATIO\"] ? 'enabled' : 'disabled',\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_6__[\"default\"])('Zoom out image')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_2__[\"IconZoomOutLine\"], null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_1__[\"IconButton\"], {\n    onClick: zoomInCallback,\n    interaction: scaleRatio < _constants__WEBPACK_IMPORTED_MODULE_5__[\"MAX_SCALE_RATIO\"] ? 'enabled' : 'disabled',\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_6__[\"default\"])('Zoom in image')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_2__[\"IconZoomInLine\"], null))));\n};\nZoomControls.propTypes = {\n  scaleRatio: prop_types__WEBPACK_IMPORTED_MODULE_7___default.a.number,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_7___default.a.func\n};\nZoomControls.defaultProps = {\n  scaleRatio: _constants__WEBPACK_IMPORTED_MODULE_5__[\"MIN_SCALE_RATIO\"],\n  onChange: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ZoomControls\", function() { return ZoomControls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _utils_round__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../utils/round */ \"./src/rce/plugins/instructure_icon_maker/utils/round.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var _CustomNumberInput__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./CustomNumberInput */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/CustomNumberInput.js\");\n/* harmony import */ var _canvasFileBrowser_FlashAlert__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../../../canvasFileBrowser/FlashAlert */ \"./src/canvasFileBrowser/FlashAlert.js\");\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @instructure/debounce */ \"../../node_modules/@instructure/debounce/es/index.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst parseZoomText = value => {\n  // Matches a positive/negative integer/decimal followed by %\" symbol\n  const matches = value.match(/([-|+]?\\d+(?:\\.\\d+)?)%?/);\n\n  if (!matches) {\n    return null;\n  }\n\n  const result = parseInt(matches[1], 10);\n\n  if (Number.isNaN(result)) {\n    return null;\n  }\n\n  return result;\n};\n\nconst formatZoomText = value => `${value}%`;\n\nconst debouncedAlert = Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_12__[\"debounce\"])(_canvasFileBrowser_FlashAlert__WEBPACK_IMPORTED_MODULE_11__[\"showFlashAlert\"], 1000);\nconst ZoomControls = _ref => {\n  let {\n    scaleRatio,\n    onChange\n  } = _ref;\n\n  const onZoomChange = value => {\n    const message = {\n      message: `${Object(_utils_round__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(value * 100)}% Zoom`,\n      type: 'info',\n      srOnly: true\n    };\n    debouncedAlert(message);\n    onChange(value);\n  };\n\n  const zoomOutCallback = () => {\n    const newScaleRatio = Object(_utils__WEBPACK_IMPORTED_MODULE_5__[\"calculateScaleRatio\"])(scaleRatio - _constants__WEBPACK_IMPORTED_MODULE_7__[\"BUTTON_SCALE_STEP\"]);\n    onZoomChange(newScaleRatio);\n  };\n\n  const zoomInCallback = () => {\n    const newScaleRatio = Object(_utils__WEBPACK_IMPORTED_MODULE_5__[\"calculateScaleRatio\"])(scaleRatio + _constants__WEBPACK_IMPORTED_MODULE_7__[\"BUTTON_SCALE_STEP\"]);\n    onZoomChange(newScaleRatio);\n  };\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    title: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Zoom'),\n    role: \"toolbar\",\n    tabindex: \"-1\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__[\"View\"], {\n    display: \"inline-block\",\n    margin: \"0 small 0 0\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CustomNumberInput__WEBPACK_IMPORTED_MODULE_10__[\"CustomNumberInput\"], {\n    value: Object(_utils_round__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(scaleRatio * 100),\n    parseValueCallback: parseZoomText,\n    formatValueCallback: formatZoomText,\n    processValueCallback: _utils__WEBPACK_IMPORTED_MODULE_5__[\"calculateScalePercentage\"],\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Zoom'),\n    onChange: value => onZoomChange(Object(_utils_round__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(value / 100))\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_1__[\"IconButton\"], {\n    margin: \"0 small 0 0\",\n    onClick: zoomOutCallback,\n    interaction: scaleRatio > _constants__WEBPACK_IMPORTED_MODULE_7__[\"MIN_SCALE_RATIO\"] ? 'enabled' : 'disabled',\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Zoom out image')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_2__[\"IconZoomOutLine\"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_1__[\"IconButton\"], {\n    \"data-testid\": \"zoom-in-button\",\n    onClick: zoomInCallback,\n    interaction: scaleRatio < _constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_SCALE_RATIO\"] ? 'enabled' : 'disabled',\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Zoom in image')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_2__[\"IconZoomInLine\"], null)));\n};\nZoomControls.propTypes = {\n  scaleRatio: prop_types__WEBPACK_IMPORTED_MODULE_9___default.a.number,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_9___default.a.func\n};\nZoomControls.defaultProps = {\n  scaleRatio: _constants__WEBPACK_IMPORTED_MODULE_7__[\"MIN_SCALE_RATIO\"],\n  onChange: () => {}\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js?");
 
 /***/ }),
 
@@ -176,7 +164,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Controls\", function() { return Controls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n/* harmony import */ var _ZoomControls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ZoomControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js\");\n/* harmony import */ var _RotationControls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./RotationControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js\");\n/* harmony import */ var _ShapeControls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ShapeControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\nconst Controls = _ref => {\n  let {\n    settings,\n    dispatch\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    id: \"imageCropperControls\",\n    direction: \"row\",\n    margin: \"x-small\",\n    alignItems: \"start\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ShapeControls__WEBPACK_IMPORTED_MODULE_5__[\"ShapeControls\"], {\n    shape: settings.shape,\n    onChange: shape => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].SET_SHAPE,\n      payload: shape\n    })\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_RotationControls__WEBPACK_IMPORTED_MODULE_4__[\"RotationControls\"], {\n    rotation: settings.rotation,\n    onChange: rotation => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].SET_ROTATION,\n      payload: rotation\n    })\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ZoomControls__WEBPACK_IMPORTED_MODULE_3__[\"ZoomControls\"], {\n    scaleRatio: settings.scaleRatio,\n    onChange: scaleRatio => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].SET_SCALE_RATIO,\n      payload: scaleRatio\n    })\n  }));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Controls\", function() { return Controls; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n/* harmony import */ var _ZoomControls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ZoomControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js\");\n/* harmony import */ var _RotationControls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./RotationControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js\");\n/* harmony import */ var _ShapeControls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ShapeControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js\");\n/* harmony import */ var _ResetControls__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ResetControls */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\nconst Controls = _ref => {\n  let {\n    settings,\n    dispatch\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    id: \"imageCropperControls\",\n    direction: \"row\",\n    margin: \"x-small\",\n    alignItems: \"start\",\n    role: \"group\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ShapeControls__WEBPACK_IMPORTED_MODULE_5__[\"ShapeControls\"], {\n    shape: settings.shape,\n    onChange: shape => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].SET_SHAPE,\n      payload: shape\n    })\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_RotationControls__WEBPACK_IMPORTED_MODULE_4__[\"RotationControls\"], {\n    rotation: settings.rotation,\n    onChange: rotation => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].SET_ROTATION,\n      payload: rotation\n    })\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ZoomControls__WEBPACK_IMPORTED_MODULE_3__[\"ZoomControls\"], {\n    scaleRatio: settings.scaleRatio,\n    onChange: scaleRatio => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].SET_SCALE_RATIO,\n      payload: scaleRatio\n    })\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    shouldGrow: true\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ResetControls__WEBPACK_IMPORTED_MODULE_6__[\"ResetControls\"], {\n    onReset: () => dispatch({\n      type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_2__[\"actions\"].RESET_SETTINGS\n    })\n  }));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js?");
 
 /***/ }),
 
@@ -188,7 +176,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useDebouncedNumericValue\", function() { return useDebouncedNumericValue; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/debounce */ \"./node_modules/@instructure/debounce/es/index.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\nconst CHANGE_EVENT_DELAY = 1000;\n\nconst digestValue = _ref => {\n  let {\n    parseValueCallback,\n    processValueCallback,\n    formatValueCallback,\n    value\n  } = _ref;\n  const parsedNewValue = parseValueCallback(value);\n\n  if (parsedNewValue === null) {\n    return [null, null];\n  }\n\n  const processedNewValue = processValueCallback(parsedNewValue);\n  const formattedNewTempValue = formatValueCallback(processedNewValue);\n  return [formattedNewTempValue, processedNewValue];\n};\n\nfunction useDebouncedNumericValue(_ref2) {\n  let {\n    value,\n    parseValueCallback,\n    processValueCallback,\n    formatValueCallback,\n    onChange\n  } = _ref2;\n  const [inputValue, setInputValue] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(formatValueCallback(value));\n  const [hasError, setHasError] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n\n  const updateStateAfterDigest = newValue => {\n    const [formattedValue, processedValue] = digestValue({\n      parseValueCallback,\n      processValueCallback,\n      formatValueCallback,\n      value: newValue\n    });\n\n    if (formattedValue === null || processedValue === null) {\n      setHasError(true);\n      return;\n    }\n\n    setHasError(false);\n\n    if (newValue !== formattedValue) {\n      setInputValue(formattedValue);\n    }\n\n    if (processedValue !== value) {\n      onChange(processedValue);\n    }\n  };\n\n  const debouncedUpdateStateAfterDigest = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_1__[\"debounce\"])(updateStateAfterDigest, CHANGE_EVENT_DELAY));\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const newTempValue = formatValueCallback(value);\n\n    if (newTempValue !== inputValue) {\n      setInputValue(newTempValue);\n      setHasError(false);\n    }\n  }, [value]);\n\n  const digestCurrentValue = () => updateStateAfterDigest(inputValue);\n\n  const digestNewValue = rawValue => {\n    setInputValue(rawValue);\n    debouncedUpdateStateAfterDigest.current(rawValue);\n  };\n\n  return [inputValue, digestCurrentValue, digestNewValue, hasError];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/useDebouncedNumericValue.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useDebouncedNumericValue\", function() { return useDebouncedNumericValue; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/debounce */ \"../../node_modules/@instructure/debounce/es/index.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\nconst CHANGE_EVENT_DELAY = 1000;\n\nconst digestValue = _ref => {\n  let {\n    parseValueCallback,\n    processValueCallback,\n    formatValueCallback,\n    value\n  } = _ref;\n  const parsedNewValue = parseValueCallback(value);\n\n  if (parsedNewValue === null) {\n    return [null, null];\n  }\n\n  const processedNewValue = processValueCallback(parsedNewValue);\n  const formattedNewTempValue = formatValueCallback(processedNewValue);\n  return [formattedNewTempValue, processedNewValue];\n};\n\nfunction useDebouncedNumericValue(_ref2) {\n  let {\n    value,\n    parseValueCallback,\n    processValueCallback,\n    formatValueCallback,\n    onChange\n  } = _ref2;\n  const [inputValue, setInputValue] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(formatValueCallback(value));\n  const [hasError, setHasError] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n\n  const updateStateAfterDigest = newValue => {\n    const [formattedValue, processedValue] = digestValue({\n      parseValueCallback,\n      processValueCallback,\n      formatValueCallback,\n      value: newValue\n    });\n\n    if (formattedValue === null || processedValue === null) {\n      setHasError(true);\n      return;\n    }\n\n    setHasError(false);\n\n    if (newValue !== formattedValue) {\n      setInputValue(formattedValue);\n    }\n\n    if (processedValue !== value) {\n      onChange(processedValue);\n    }\n  };\n\n  const debouncedUpdateStateAfterDigest = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_1__[\"debounce\"])(updateStateAfterDigest, CHANGE_EVENT_DELAY));\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const newTempValue = formatValueCallback(value);\n\n    if (newTempValue !== inputValue) {\n      setInputValue(newTempValue);\n      setHasError(false);\n    }\n  }, [value]);\n\n  const digestCurrentValue = () => updateStateAfterDigest(inputValue);\n\n  const digestNewValue = rawValue => {\n    setInputValue(rawValue);\n    debouncedUpdateStateAfterDigest.current(rawValue);\n  };\n\n  return [inputValue, digestCurrentValue, digestNewValue, hasError];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/useDebouncedNumericValue.js?");
 
 /***/ }),
 
@@ -196,11 +184,11 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /*!**************************************************************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js ***!
   \**************************************************************************************************************/
-/*! exports provided: round, calculateScaleRatio, calculateScalePercentage, calculateRotation, getNearestRectAngle */
+/*! exports provided: calculateScaleRatio, calculateScalePercentage, calculateRotation, getNearestRectAngle */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"round\", function() { return round; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"calculateScaleRatio\", function() { return calculateScaleRatio; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"calculateScalePercentage\", function() { return calculateScalePercentage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"calculateRotation\", function() { return calculateRotation; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getNearestRectAngle\", function() { return getNearestRectAngle; });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst round = function (number) {\n  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n  return parseFloat(number.toFixed(digits));\n};\nconst calculateScaleRatio = scaleRatio => {\n  let result = round(scaleRatio);\n  result = result > _constants__WEBPACK_IMPORTED_MODULE_0__[\"MAX_SCALE_RATIO\"] ? _constants__WEBPACK_IMPORTED_MODULE_0__[\"MAX_SCALE_RATIO\"] : result;\n  result = result < _constants__WEBPACK_IMPORTED_MODULE_0__[\"MIN_SCALE_RATIO\"] ? _constants__WEBPACK_IMPORTED_MODULE_0__[\"MIN_SCALE_RATIO\"] : result;\n  return result;\n};\nconst calculateScalePercentage = scalePercentage => {\n  const result = calculateScaleRatio(scalePercentage / 100);\n  return round(result * 100, 0);\n};\nconst calculateRotation = rotationAngle => {\n  const simplifiedRotationAngle = round(rotationAngle % 360);\n\n  if (Math.abs(rotationAngle) >= 360) {\n    return simplifiedRotationAngle;\n  }\n\n  return rotationAngle;\n};\nconst getNearestRectAngle = (rotationAngle, shouldRotateToLeft) => {\n  return shouldRotateToLeft ? Math.ceil(rotationAngle / _constants__WEBPACK_IMPORTED_MODULE_0__[\"BUTTON_ROTATION_DEGREES\"]) * 90 : Math.floor(rotationAngle / _constants__WEBPACK_IMPORTED_MODULE_0__[\"BUTTON_ROTATION_DEGREES\"]) * 90;\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"calculateScaleRatio\", function() { return calculateScaleRatio; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"calculateScalePercentage\", function() { return calculateScalePercentage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"calculateRotation\", function() { return calculateRotation; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getNearestRectAngle\", function() { return getNearestRectAngle; });\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _utils_round__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../utils/round */ \"./src/rce/plugins/instructure_icon_maker/utils/round.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\nconst calculateScaleRatio = scaleRatio => {\n  let result = Object(_utils_round__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(scaleRatio);\n  result = result > _constants__WEBPACK_IMPORTED_MODULE_0__[\"MAX_SCALE_RATIO\"] ? _constants__WEBPACK_IMPORTED_MODULE_0__[\"MAX_SCALE_RATIO\"] : result;\n  result = result < _constants__WEBPACK_IMPORTED_MODULE_0__[\"MIN_SCALE_RATIO\"] ? _constants__WEBPACK_IMPORTED_MODULE_0__[\"MIN_SCALE_RATIO\"] : result;\n  return result;\n};\nconst calculateScalePercentage = scalePercentage => {\n  const result = calculateScaleRatio(scalePercentage / 100);\n  return Object(_utils_round__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(result * 100, 0);\n};\nconst calculateRotation = rotationAngle => {\n  const simplifiedRotationAngle = Object(_utils_round__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(rotationAngle % 360);\n\n  if (Math.abs(rotationAngle) >= 360) {\n    return simplifiedRotationAngle;\n  }\n\n  return rotationAngle;\n};\nconst getNearestRectAngle = (rotationAngle, shouldRotateToLeft) => {\n  return shouldRotateToLeft ? Math.ceil(rotationAngle / _constants__WEBPACK_IMPORTED_MODULE_0__[\"BUTTON_ROTATION_DEGREES\"]) * 90 : Math.floor(rotationAngle / _constants__WEBPACK_IMPORTED_MODULE_0__[\"BUTTON_ROTATION_DEGREES\"]) * 90;\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js?");
 
 /***/ }),
 
@@ -212,7 +200,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createCroppedImageSvg\", function() { return createCroppedImageSvg; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"setTransformAttribute\", function() { return setTransformAttribute; });\n/* harmony import */ var round__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! round */ \"../round/index.js\");\n/* harmony import */ var _svg_shape__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./svg/shape */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./svg/utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\nconst CLIP_PATH_ID = 'clip-path-for-cropped-image';\nasync function createCroppedImageSvg(settings) {\n  const {\n    image,\n    shape\n  } = settings;\n  const {\n    imageWidth,\n    imageHeight\n  } = await fetchImageMetadata(image);\n  const squareDimension = imageHeight;\n  const rootElement = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('svg', {\n    xmlns: 'http://www.w3.org/2000/svg',\n    width: squareDimension,\n    height: squareDimension\n  });\n  const defs = createDefsElement({\n    shape,\n    squareDimension\n  });\n  const mainGroup = createMainSvgGroup({\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  });\n  rootElement.appendChild(defs);\n  rootElement.appendChild(mainGroup);\n  return rootElement;\n}\n\nconst fetchImageMetadata = src => {\n  return new Promise(resolve => {\n    const img = new Image();\n\n    img.onload = function () {\n      resolve({\n        imageWidth: this.naturalWidth,\n        imageHeight: this.naturalHeight\n      });\n    };\n\n    img.src = src;\n  });\n};\n\nconst createDefsElement = _ref => {\n  let {\n    shape,\n    squareDimension\n  } = _ref;\n  const defs = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('defs');\n  const shapeMask = Object(_svg_shape__WEBPACK_IMPORTED_MODULE_1__[\"buildShapeMask\"])({\n    shape,\n    size: squareDimension\n  });\n  const clipPath = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('clipPath', {\n    id: CLIP_PATH_ID\n  });\n  clipPath.appendChild(shapeMask);\n  defs.appendChild(clipPath);\n  return defs;\n};\n\nconst convertTranslationUnits = (translationPixels, imageHeight) => {\n  return imageHeight * translationPixels / _constants__WEBPACK_IMPORTED_MODULE_3__[\"PREVIEW_HEIGHT\"];\n};\n\nconst createMainSvgGroup = _ref2 => {\n  let {\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  } = _ref2;\n  const mainGroup = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('g', {\n    'clip-path': `url(#${CLIP_PATH_ID})`\n  });\n  const imageElement = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('image', {\n    width: imageWidth,\n    height: imageHeight,\n    href: settings.image\n  });\n  setTransformAttribute({\n    imageElement,\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  });\n  mainGroup.appendChild(imageElement);\n  return mainGroup;\n};\n\nconst setTransformAttribute = _ref3 => {\n  let {\n    imageElement,\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  } = _ref3;\n  const {\n    rotation = 0,\n    scaleRatio = 1.0,\n    translateX = 0,\n    translateY = 0\n  } = settings;\n  const horizontalCenter = scaleRatio * imageWidth / 2;\n  const verticalCenter = scaleRatio * imageHeight / 2;\n  const convertedTranslateX = convertTranslationUnits(translateX, imageHeight);\n  const convertedTranslateY = convertTranslationUnits(translateY, imageHeight);\n  const x = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(-horizontalCenter + convertedTranslateX + squareDimension / 2, 2);\n  const y = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(-verticalCenter + convertedTranslateY + squareDimension / 2, 2);\n  let value = `translate(${x}, ${y})`;\n\n  if (rotation !== 0) {\n    // Rotates image using its center as pivot\n    value += ` rotate(${rotation}, ${horizontalCenter}, ${verticalCenter})`;\n  }\n\n  if (scaleRatio !== 1.0) {\n    value += ` scale(${scaleRatio})`;\n  }\n\n  imageElement.setAttribute('transform', value);\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createCroppedImageSvg\", function() { return createCroppedImageSvg; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"setTransformAttribute\", function() { return setTransformAttribute; });\n/* harmony import */ var _utils_round__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../utils/round */ \"./src/rce/plugins/instructure_icon_maker/utils/round.js\");\n/* harmony import */ var _svg_shape__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./svg/shape */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./svg/utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\nconst CLIP_PATH_ID = 'clip-path-for-cropped-image';\nasync function createCroppedImageSvg(settings) {\n  const {\n    image,\n    shape\n  } = settings;\n  const {\n    imageWidth,\n    imageHeight\n  } = await fetchImageMetadata(image);\n  const squareDimension = imageHeight;\n  const rootElement = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('svg', {\n    xmlns: 'http://www.w3.org/2000/svg',\n    width: squareDimension,\n    height: squareDimension\n  });\n  const defs = createDefsElement({\n    shape,\n    squareDimension\n  });\n  const mainGroup = createMainSvgGroup({\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  });\n  rootElement.appendChild(defs);\n  rootElement.appendChild(mainGroup);\n  return rootElement;\n}\n\nconst fetchImageMetadata = src => {\n  return new Promise(resolve => {\n    const img = new Image();\n\n    img.onload = function () {\n      resolve({\n        imageWidth: this.naturalWidth,\n        imageHeight: this.naturalHeight\n      });\n    };\n\n    img.src = src;\n  });\n};\n\nconst createDefsElement = _ref => {\n  let {\n    shape,\n    squareDimension\n  } = _ref;\n  const defs = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('defs');\n  const shapeMask = Object(_svg_shape__WEBPACK_IMPORTED_MODULE_1__[\"buildShapeMask\"])({\n    shape,\n    size: squareDimension\n  });\n  const clipPath = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('clipPath', {\n    id: CLIP_PATH_ID\n  });\n  clipPath.appendChild(shapeMask);\n  defs.appendChild(clipPath);\n  return defs;\n};\n\nconst convertTranslationUnits = (translationPixels, imageHeight) => {\n  return imageHeight * translationPixels / _constants__WEBPACK_IMPORTED_MODULE_3__[\"PREVIEW_HEIGHT\"];\n};\n\nconst createMainSvgGroup = _ref2 => {\n  let {\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  } = _ref2;\n  const mainGroup = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('g', {\n    'clip-path': `url(#${CLIP_PATH_ID})`\n  });\n  const imageElement = Object(_svg_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('image', {\n    width: imageWidth,\n    height: imageHeight,\n    href: settings.image\n  });\n  setTransformAttribute({\n    imageElement,\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  });\n  mainGroup.appendChild(imageElement);\n  return mainGroup;\n};\n\nconst setTransformAttribute = _ref3 => {\n  let {\n    imageElement,\n    imageWidth,\n    imageHeight,\n    squareDimension,\n    settings\n  } = _ref3;\n  const {\n    rotation = 0,\n    scaleRatio = 1.0,\n    translateX = 0,\n    translateY = 0\n  } = settings;\n  const horizontalCenter = scaleRatio * imageWidth / 2;\n  const verticalCenter = scaleRatio * imageHeight / 2;\n  const convertedTranslateX = convertTranslationUnits(translateX, imageHeight);\n  const convertedTranslateY = convertTranslationUnits(translateY, imageHeight);\n  const x = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(-horizontalCenter + convertedTranslateX + squareDimension / 2, 2);\n  const y = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(-verticalCenter + convertedTranslateY + squareDimension / 2, 2);\n  let value = `translate(${x}, ${y})`;\n\n  if (rotation !== 0) {\n    // Rotates image using its center as pivot\n    value += ` rotate(${rotation}, ${horizontalCenter}, ${verticalCenter})`;\n  }\n\n  if (scaleRatio !== 1.0) {\n    value += ` scale(${scaleRatio})`;\n  }\n\n  imageElement.setAttribute('transform', value);\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js?");
 
 /***/ }),
 
@@ -260,7 +248,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildShapeMask\", function() { return buildShapeMask; });\n/* harmony import */ var round__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! round */ \"../round/index.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/utils.js\");\n/* harmony import */ var _svg_shape__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../svg/shape */ \"./src/rce/plugins/instructure_icon_maker/svg/shape.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\nfunction buildShapeMask(_ref) {\n  let {\n    shape,\n    size\n  } = _ref;\n  const dimensionSize = size || _constants__WEBPACK_IMPORTED_MODULE_1__[\"SHAPE_CONTAINER_LENGTH\"];\n\n  switch (shape) {\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Square:\n      return buildSquare(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Circle:\n      return buildCircle(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Triangle:\n      return buildTriangle(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Diamond:\n      return buildDiamond(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Pentagon:\n      return buildPentagon(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Hexagon:\n      return buildHexagon(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Octagon:\n      return buildOctagon(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Star:\n      return buildStar(dimensionSize);\n\n    default:\n      throw new Error(`Invalid shape: ${shape}`);\n  }\n}\n\nfunction buildSquare(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('rect', {\n    x: 0,\n    y: 0,\n    width: dimensionSize,\n    height: dimensionSize,\n    fill: 'black'\n  });\n}\n\nfunction buildCircle(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('circle', {\n    cx: dimensionSize / 2,\n    cy: dimensionSize / 2,\n    r: dimensionSize / 2,\n    fill: 'black'\n  });\n}\n\nfunction buildTriangle(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize}H0L${dimensionSize / 2} 0Z`\n  });\n}\n\nfunction buildDiamond(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize / 2} ${dimensionSize}L0 ${dimensionSize / 2}L${dimensionSize / 2} 0Z`\n  });\n}\n\nfunction buildPentagon(dimensionSize) {\n  const half = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(dimensionSize / 2, 2);\n  const alpha = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3906 * dimensionSize, 2);\n  const beta = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3433 * dimensionSize, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${half} 0L${dimensionSize} ${alpha}L${half + beta} ${dimensionSize}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`\n  });\n}\n\nfunction buildHexagon(dimensionSize) {\n  const leg = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.2895 * dimensionSize, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${dimensionSize - leg} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize - leg} ${dimensionSize}H${leg}L0 ${dimensionSize / 2}L${leg} 0H${dimensionSize - leg}Z`\n  });\n}\n\nfunction buildOctagon(dimensionSize) {\n  const leg = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.2895 * dimensionSize, 2);\n  const side = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(dimensionSize - 2 * leg, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M0 ${leg}L${leg} 0H${leg + side}L${dimensionSize} ${leg}V${leg + side}L${leg + side} ${dimensionSize}H${leg}L0 ${leg + side}V${leg}Z`\n  });\n}\n\nfunction buildStar(dimensionSize) {\n  const half = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(dimensionSize / 2, 2);\n  const alpha = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.1143 * dimensionSize, 2);\n  const beta = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3906 * dimensionSize, 2);\n  const gamma = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.1779 * dimensionSize, 2);\n  const delta = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.6042 * dimensionSize, 2);\n  const zeta = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3433 * dimensionSize, 2);\n  const eta = Object(round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.7344 * dimensionSize, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${half} 0L${half + alpha} ${beta}H${dimensionSize}L${half + gamma} ${delta}L${half + zeta} ${dimensionSize}L${half} ${eta}L${half - zeta} ${dimensionSize}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0Z`\n  });\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildShapeMask\", function() { return buildShapeMask; });\n/* harmony import */ var _utils_round__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../utils/round */ \"./src/rce/plugins/instructure_icon_maker/utils/round.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/utils.js\");\n/* harmony import */ var _svg_shape__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../svg/shape */ \"./src/rce/plugins/instructure_icon_maker/svg/shape.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\nfunction buildShapeMask(_ref) {\n  let {\n    shape,\n    size\n  } = _ref;\n  const dimensionSize = size || _constants__WEBPACK_IMPORTED_MODULE_1__[\"SHAPE_CONTAINER_LENGTH\"];\n\n  switch (shape) {\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Square:\n      return buildSquare(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Circle:\n      return buildCircle(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Triangle:\n      return buildTriangle(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Diamond:\n      return buildDiamond(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Pentagon:\n      return buildPentagon(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Hexagon:\n      return buildHexagon(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Octagon:\n      return buildOctagon(dimensionSize);\n\n    case _svg_shape__WEBPACK_IMPORTED_MODULE_3__[\"Shape\"].Star:\n      return buildStar(dimensionSize);\n\n    default:\n      throw new Error(`Invalid shape: ${shape}`);\n  }\n}\n\nfunction buildSquare(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('rect', {\n    x: 0,\n    y: 0,\n    width: dimensionSize,\n    height: dimensionSize,\n    fill: 'black'\n  });\n}\n\nfunction buildCircle(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('circle', {\n    cx: dimensionSize / 2,\n    cy: dimensionSize / 2,\n    r: dimensionSize / 2,\n    fill: 'black'\n  });\n}\n\nfunction buildTriangle(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize}H0L${dimensionSize / 2} 0Z`\n  });\n}\n\nfunction buildDiamond(dimensionSize) {\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${dimensionSize / 2} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize / 2} ${dimensionSize}L0 ${dimensionSize / 2}L${dimensionSize / 2} 0Z`\n  });\n}\n\nfunction buildPentagon(dimensionSize) {\n  const half = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(dimensionSize / 2, 2);\n  const alpha = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3906 * dimensionSize, 2);\n  const beta = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3433 * dimensionSize, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${half} 0L${dimensionSize} ${alpha}L${half + beta} ${dimensionSize}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`\n  });\n}\n\nfunction buildHexagon(dimensionSize) {\n  const leg = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.2895 * dimensionSize, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${dimensionSize - leg} 0L${dimensionSize} ${dimensionSize / 2}L${dimensionSize - leg} ${dimensionSize}H${leg}L0 ${dimensionSize / 2}L${leg} 0H${dimensionSize - leg}Z`\n  });\n}\n\nfunction buildOctagon(dimensionSize) {\n  const leg = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.2895 * dimensionSize, 2);\n  const side = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(dimensionSize - 2 * leg, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M0 ${leg}L${leg} 0H${leg + side}L${dimensionSize} ${leg}V${leg + side}L${leg + side} ${dimensionSize}H${leg}L0 ${leg + side}V${leg}Z`\n  });\n}\n\nfunction buildStar(dimensionSize) {\n  const half = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(dimensionSize / 2, 2);\n  const alpha = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.1143 * dimensionSize, 2);\n  const beta = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3906 * dimensionSize, 2);\n  const gamma = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.1779 * dimensionSize, 2);\n  const delta = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.6042 * dimensionSize, 2);\n  const zeta = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.3433 * dimensionSize, 2);\n  const eta = Object(_utils_round__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(0.7344 * dimensionSize, 2);\n  return Object(_utils__WEBPACK_IMPORTED_MODULE_2__[\"createSvgElement\"])('path', {\n    d: `M${half} 0L${half + alpha} ${beta}H${dimensionSize}L${half + gamma} ${delta}L${half + zeta} ${dimensionSize}L${half} ${eta}L${half - zeta} ${dimensionSize}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0Z`\n  });\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js?");
 
 /***/ }),
 
@@ -276,15 +264,15 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 
 /***/ }),
 
-/***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useArrowKeys.js":
-/*!************************************************************************************************************!*\
-  !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useArrowKeys.js ***!
-  \************************************************************************************************************/
-/*! exports provided: useArrowKeys */
+/***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js":
+/*!*****************************************************************************************************************!*\
+  !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js ***!
+  \*****************************************************************************************************************/
+/*! exports provided: useKeyMouseEvents */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useArrowKeys\", function() { return useArrowKeys; });\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/core-js-stable/instance/includes */ \"../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/includes.js\");\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/debounce */ \"./node_modules/@instructure/debounce/es/index.js\");\n/* harmony import */ var _controls_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./controls/utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n\n\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\nconst EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];\nfunction useArrowKeys(translateX, translateY, dispatch) {\n  const [tempTranslateX, _setTempTranslateX] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(translateX);\n  const [tempTranslateY, _setTempTranslateY] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(translateY);\n  const [isMoving, setIsMoving] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(false); // These are used to get the current values when the callback is called from outside.\n\n  const tempTranslateXRef = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(tempTranslateX);\n  const tempTranslateYRef = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(tempTranslateY); // Refs that manage the keydown acceleration\n\n  const direction = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(0);\n  const elapsedTime = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(0);\n\n  const setTempTranslateX = data => {\n    setIsMoving(true);\n    tempTranslateXRef.current = data;\n\n    _setTempTranslateX(data);\n  };\n\n  const setTempTranslateY = data => {\n    setIsMoving(true);\n    tempTranslateYRef.current = data;\n\n    _setTempTranslateY(data);\n  };\n\n  const onKeyDownCallback = event => {\n    var _context, _context2, _context3;\n\n    // 37 = Left, 38 = Up, 39 = Right, 40 = Down\n    const {\n      keyCode\n    } = event;\n\n    if (!_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = [37, 38, 39, 40]).call(_context, keyCode)) {\n      return;\n    }\n\n    elapsedTime.current += 1;\n    let increment = 1;\n\n    if (keyCode === direction.current) {\n      increment = Math.floor(elapsedTime.current / _constants__WEBPACK_IMPORTED_MODULE_4__[\"KEY_EVENT_STEP\"]) + 1;\n    } else {\n      direction.current = keyCode;\n      elapsedTime.current = 0;\n    }\n\n    event.preventDefault();\n\n    if (_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context2 = [37, 39]).call(_context2, keyCode)) {\n      const signedIncrement = keyCode === 37 ? -increment : increment;\n      const newTranslateX = Object(_controls_utils__WEBPACK_IMPORTED_MODULE_3__[\"round\"])(tempTranslateXRef.current + signedIncrement);\n      setTempTranslateX(newTranslateX);\n    }\n\n    if (_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context3 = [38, 40]).call(_context3, keyCode)) {\n      const signedIncrement = keyCode === 38 ? -increment : increment;\n      const newTranslateY = Object(_controls_utils__WEBPACK_IMPORTED_MODULE_3__[\"round\"])(tempTranslateYRef.current + signedIncrement);\n      setTempTranslateY(newTranslateY);\n    }\n  };\n\n  const stopMovementCallback = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useCallback\"])(Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_2__[\"debounce\"])(() => {\n    direction.current = elapsedTime.current = 0;\n    setIsMoving(false);\n  }, _constants__WEBPACK_IMPORTED_MODULE_4__[\"KEY_EVENT_DELAY\"]), []);\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    const onKeyDownCallbackWrapper = event => {\n      // If the active element is in the modal header, footer or controls.\n      if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => {\n        var _document$getElementB;\n\n        return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(document.activeElement);\n      })) {\n        return;\n      }\n\n      onKeyDownCallback(event);\n    }; // Adds the event listener when component did mount\n\n\n    document.addEventListener('keydown', onKeyDownCallbackWrapper);\n    return () => {\n      // Removes the event listener when component will unmount\n      document.removeEventListener('keydown', onKeyDownCallbackWrapper);\n    }; // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    if (isMoving) {\n      stopMovementCallback();\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [tempTranslateX, tempTranslateY]); // Updates the reducer state when user stops moving.\n\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    if (isMoving) {\n      return;\n    }\n\n    if (tempTranslateX !== translateX) {\n      dispatch({\n        type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_5__[\"actions\"].SET_TRANSLATE_X,\n        payload: tempTranslateX\n      });\n    }\n\n    if (tempTranslateY !== translateY) {\n      dispatch({\n        type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_5__[\"actions\"].SET_TRANSLATE_Y,\n        payload: tempTranslateY\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [isMoving]); // Updates the component state when props changed.\n\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    if (isMoving) {\n      return;\n    }\n\n    if (translateX !== tempTranslateX) {\n      setTempTranslateX(translateX);\n    }\n\n    if (translateY !== tempTranslateY) {\n      setTempTranslateY(translateY);\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [translateX, translateY]);\n  return [tempTranslateX, tempTranslateY, onKeyDownCallback];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useArrowKeys.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useKeyMouseEvents\", function() { return useKeyMouseEvents; });\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/core-js-stable/instance/includes */ \"../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/includes.js\");\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/debounce */ \"../../node_modules/@instructure/debounce/es/index.js\");\n/* harmony import */ var _utils_round__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/round */ \"./src/rce/plugins/instructure_icon_maker/utils/round.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n\n\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\nconst EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];\n\nfunction useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving) {\n  // Refs that manage the keydown acceleration\n  const direction = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(0);\n  const elapsedTime = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(0);\n\n  const onKeyDownCallback = event => {\n    var _context, _context2, _context3;\n\n    // 37 = Left, 38 = Up, 39 = Right, 40 = Down\n    const {\n      keyCode\n    } = event;\n\n    if (!_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = [37, 38, 39, 40]).call(_context, keyCode)) {\n      return;\n    }\n\n    elapsedTime.current += 1;\n    let increment = 1;\n\n    if (keyCode === direction.current) {\n      increment = Math.floor(elapsedTime.current / _constants__WEBPACK_IMPORTED_MODULE_4__[\"KEY_EVENT_STEP\"]) + 1;\n    } else {\n      direction.current = keyCode;\n      elapsedTime.current = 0;\n    }\n\n    event.preventDefault();\n\n    if (_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context2 = [37, 39]).call(_context2, keyCode)) {\n      const signedIncrement = keyCode === 37 ? -increment : increment;\n      const newTranslateX = Object(_utils_round__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(tempTranslateXRef.current + signedIncrement);\n      setTempTranslateX(newTranslateX);\n    }\n\n    if (_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context3 = [38, 40]).call(_context3, keyCode)) {\n      const signedIncrement = keyCode === 38 ? -increment : increment;\n      const newTranslateY = Object(_utils_round__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(tempTranslateYRef.current + signedIncrement);\n      setTempTranslateY(newTranslateY);\n    }\n  };\n\n  const stopMovementCallback = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useCallback\"])(Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_2__[\"debounce\"])(() => {\n    direction.current = elapsedTime.current = 0;\n    setIsMoving(false);\n  }, _constants__WEBPACK_IMPORTED_MODULE_4__[\"KEY_EVENT_DELAY\"]), []);\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    const onKeyDownCallbackWrapper = event => {\n      // If the active element is in the modal header, footer or controls.\n      if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => {\n        var _document$getElementB;\n\n        return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(document.activeElement);\n      })) {\n        return;\n      }\n\n      onKeyDownCallback(event);\n    }; // Adds the event listener when component did mount\n\n\n    document.addEventListener('keydown', onKeyDownCallbackWrapper);\n    return () => {\n      // Removes the event listener when component will unmount\n      document.removeEventListener('keydown', onKeyDownCallbackWrapper);\n    }; // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    if (isMoving && direction.current !== 0) {\n      stopMovementCallback();\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [tempTranslateX, tempTranslateY]);\n}\n\nfunction useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {\n  const initialPageX = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(0);\n  const initialPageY = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(0);\n  const mouseDown = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(false);\n  const imgElement = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(null);\n  const containerElement = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(null);\n\n  const stoppedMovingCallback = () => {\n    mouseDown.current = false;\n    initialPageX.current = 0;\n    initialPageY.current = 0;\n    imgElement.current.onmousemove = null;\n    imgElement.current.onmouseup = null;\n    imgElement.current = null;\n    containerElement.current.onmouseout = null;\n    containerElement.current = null;\n    setIsMoving(false);\n  };\n\n  const startedMovingCallback = (target, clientX, clientY, container) => {\n    mouseDown.current = true;\n    initialPageX.current = clientX;\n    initialPageY.current = clientY;\n    target.onmousemove = onMouseMoveCallback;\n    target.onmouseup = stoppedMovingCallback;\n    imgElement.current = target; // Should stop the movement when mouse leaves the preview\n\n    container.onmouseout = stoppedMovingCallback;\n    containerElement.current = container;\n    setIsMoving(true);\n  };\n\n  const onMouseMoveCallback = e => {\n    if (!mouseDown.current) {\n      return stoppedMovingCallback();\n    }\n\n    setTempTranslateX(tempTranslateX + e.clientX - initialPageX.current);\n    setTempTranslateY(tempTranslateY + e.clientY - initialPageY.current);\n  };\n\n  return (e, container) => startedMovingCallback(e.target, e.clientX, e.clientY, container);\n}\n\nfunction useKeyMouseEvents(translateX, translateY, dispatch, imgRef) {\n  const [tempTranslateX, _setTempTranslateX] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(translateX);\n  const [tempTranslateY, _setTempTranslateY] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(translateY);\n  const [isMoving, setIsMoving] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(false); // These are used to get the current values when the callback is called from outside.\n\n  const tempTranslateXRef = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(tempTranslateX);\n  const tempTranslateYRef = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useRef\"])(tempTranslateY);\n\n  const setTempTranslateX = data => {\n    setIsMoving(true);\n    tempTranslateXRef.current = data;\n\n    _setTempTranslateX(data);\n  };\n\n  const setTempTranslateY = data => {\n    setIsMoving(true);\n    tempTranslateYRef.current = data;\n\n    _setTempTranslateY(data);\n  };\n\n  useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving);\n  const onMouseDownCallback = useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.\n\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    if (isMoving) {\n      return;\n    }\n\n    if (tempTranslateX !== translateX) {\n      dispatch({\n        type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_5__[\"actions\"].SET_TRANSLATE_X,\n        payload: tempTranslateX\n      });\n    }\n\n    if (tempTranslateY !== translateY) {\n      dispatch({\n        type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_5__[\"actions\"].SET_TRANSLATE_Y,\n        payload: tempTranslateY\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [isMoving]); // Updates the component state when props changed.\n\n  Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useEffect\"])(() => {\n    if (isMoving) {\n      return;\n    }\n\n    if (translateX !== tempTranslateX) {\n      tempTranslateXRef.current = translateX;\n\n      _setTempTranslateX(translateX);\n    }\n\n    if (translateY !== tempTranslateY) {\n      tempTranslateYRef.current = translateY;\n\n      _setTempTranslateY(translateY);\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [translateX, translateY]);\n  return [tempTranslateX, tempTranslateY, onMouseDownCallback];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js?");
 
 /***/ }),
 
@@ -296,7 +284,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useMouseWheel\", function() { return useMouseWheel; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/debounce */ \"./node_modules/@instructure/debounce/es/index.js\");\n/* harmony import */ var _controls_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\nfunction useMouseWheel(scaleRatio, dispatch) {\n  const [tempScaleRatio, setTempScaleRatio] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(scaleRatio);\n  const [isScaling, setIsScaling] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n\n  const onWheelCallback = event => {\n    event.preventDefault();\n    const newScaleRatio = Object(_controls_utils__WEBPACK_IMPORTED_MODULE_2__[\"calculateScaleRatio\"])(tempScaleRatio - event.deltaY * _constants__WEBPACK_IMPORTED_MODULE_3__[\"WHEEL_SCALE_STEP\"]);\n\n    if (newScaleRatio !== tempScaleRatio) {\n      setIsScaling(true);\n      setTempScaleRatio(newScaleRatio);\n    }\n  };\n\n  const setScalingRatio = () => {\n    setIsScaling(false);\n  };\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!isScaling) {\n      setTempScaleRatio(scaleRatio);\n    }\n  }, [scaleRatio]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (isScaling) {\n      Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_1__[\"debounce\"])(setScalingRatio, _constants__WEBPACK_IMPORTED_MODULE_3__[\"WHEEL_EVENT_DELAY\"])();\n    }\n  }, [tempScaleRatio]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!isScaling) {\n      dispatch({\n        type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_SCALE_RATIO,\n        payload: tempScaleRatio\n      });\n    }\n  }, [isScaling]);\n  return [tempScaleRatio, onWheelCallback];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useMouseWheel.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useMouseWheel\", function() { return useMouseWheel; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/debounce */ \"../../node_modules/@instructure/debounce/es/index.js\");\n/* harmony import */ var _controls_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/* harmony import */ var _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../reducers/imageCropper */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\nfunction useMouseWheel(scaleRatio, dispatch) {\n  const [tempScaleRatio, setTempScaleRatio] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(scaleRatio);\n  const [isScaling, setIsScaling] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n\n  const onWheelCallback = event => {\n    event.preventDefault();\n    const newScaleRatio = Object(_controls_utils__WEBPACK_IMPORTED_MODULE_2__[\"calculateScaleRatio\"])(tempScaleRatio - event.deltaY * _constants__WEBPACK_IMPORTED_MODULE_3__[\"WHEEL_SCALE_STEP\"]);\n\n    if (newScaleRatio !== tempScaleRatio) {\n      setIsScaling(true);\n      setTempScaleRatio(newScaleRatio);\n    }\n  };\n\n  const setScalingRatio = () => {\n    setIsScaling(false);\n  };\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!isScaling) {\n      setTempScaleRatio(scaleRatio);\n    }\n  }, [scaleRatio]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (isScaling) {\n      Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_1__[\"debounce\"])(setScalingRatio, _constants__WEBPACK_IMPORTED_MODULE_3__[\"WHEEL_EVENT_DELAY\"])();\n    }\n  }, [tempScaleRatio]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!isScaling) {\n      dispatch({\n        type: _reducers_imageCropper__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_SCALE_RATIO,\n        payload: tempScaleRatio\n      });\n    }\n  }, [isScaling]);\n  return [tempScaleRatio, onWheelCallback];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useMouseWheel.js?");
 
 /***/ }),
 
@@ -308,7 +296,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_image_Images__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../instructure_image/Images */ \"./src/rce/plugins/instructure_image/Images/index.js\");\n/* harmony import */ var _shared_StoreContext__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../shared/StoreContext */ \"./src/rce/plugins/shared/StoreContext.js\");\n/* harmony import */ var _shared_useDataUrl__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../shared/useDataUrl */ \"./src/rce/plugins/shared/useDataUrl.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\nconst Course = _ref => {\n  let {\n    dispatch,\n    onLoading,\n    onLoaded\n  } = _ref;\n  const storeProps = Object(_shared_StoreContext__WEBPACK_IMPORTED_MODULE_4__[\"useStoreProps\"])();\n  const {\n    files,\n    bookmark,\n    isLoading,\n    hasMore\n  } = storeProps.images[storeProps.contextType];\n  const {\n    setUrl,\n    dataUrl,\n    dataLoading\n  } = Object(_shared_useDataUrl__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const category = 'uncategorized'; // Handle image selection\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    // Don't clear the current image on re-render\n    if (!dataUrl) return;\n    dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE,\n      payload: dataUrl\n    });\n    dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_CROPPER_OPEN,\n      payload: true\n    }); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dataUrl]); // Handle loading states\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    dispatch(dataLoading ? _reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].START_LOADING : _reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].STOP_LOADING);\n\n    if (dataUrl) {\n      dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE_COLLECTION_OPEN,\n        payload: false\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [dataLoading]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded(); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoading]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_2__[\"View\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_image_Images__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    fetchInitialImages: () => storeProps.fetchInitialImages({\n      category\n    }),\n    fetchNextImages: () => storeProps.fetchNextImages({\n      category\n    }),\n    contextType: storeProps.contextType,\n    images: {\n      [storeProps.contextType]: {\n        files,\n        bookmark,\n        hasMore,\n        isLoading\n      }\n    },\n    sortBy: {\n      sort: 'date_added',\n      order: 'desc'\n    },\n    onImageEmbed: file => {\n      setUrl(file.download_url);\n      dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE_NAME,\n        payload: file.filename\n      });\n    }\n  }));\n};\n\nCourse.propTypes = {\n  dispatch: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onLoading: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onLoaded: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nCourse.defaultProps = {\n  dispatch: () => {},\n  onLoading: () => {},\n  onLoaded: () => {}\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Course);\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_image_Images__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../instructure_image/Images */ \"./src/rce/plugins/instructure_image/Images/index.js\");\n/* harmony import */ var _shared_StoreContext__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../shared/StoreContext */ \"./src/rce/plugins/shared/StoreContext.js\");\n/* harmony import */ var _shared_useDataUrl__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../shared/useDataUrl */ \"./src/rce/plugins/shared/useDataUrl.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _compressionUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./compressionUtils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js\");\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\nconst dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {\n  let image = dataUrl;\n\n  if (Object(_utils__WEBPACK_IMPORTED_MODULE_8__[\"isAnUnsupportedGifPngImage\"])(dataBlob)) {\n    dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].CLEAR_IMAGE\n    });\n    return onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_9__[\"actions\"].SET_ERROR,\n      payload: Object(_format_message__WEBPACK_IMPORTED_MODULE_10__[\"default\"])('GIF/PNG format images larger than {size} KB are not currently supported.', {\n        size: _utils__WEBPACK_IMPORTED_MODULE_8__[\"MAX_GIF_PNG_SIZE_BYTES\"] / 1024\n      })\n    });\n  }\n\n  dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE,\n    payload: ''\n  });\n  dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_CROPPER_OPEN,\n    payload: true\n  });\n\n  if (Object(_compressionUtils__WEBPACK_IMPORTED_MODULE_7__[\"canCompressImage\"])() && Object(_compressionUtils__WEBPACK_IMPORTED_MODULE_7__[\"shouldCompressImage\"])(dataBlob)) {\n    try {\n      // If compression fails, use the original one\n      // TODO: We can show the user that compression failed in some way\n      image = await Object(_compressionUtils__WEBPACK_IMPORTED_MODULE_7__[\"compressImage\"])(dataUrl);\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.error(e);\n    }\n\n    dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_COMPRESSION_STATUS,\n      payload: true\n    });\n  }\n\n  dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE,\n    payload: image\n  });\n};\n\nconst Course = _ref => {\n  let {\n    dispatch,\n    onChange,\n    onLoading,\n    onLoaded\n  } = _ref;\n  const storeProps = Object(_shared_StoreContext__WEBPACK_IMPORTED_MODULE_4__[\"useStoreProps\"])();\n  const {\n    files,\n    bookmark,\n    isLoading,\n    hasMore\n  } = storeProps.images[storeProps.contextType];\n  const {\n    setUrl,\n    dataUrl,\n    dataLoading,\n    dataBlob\n  } = Object(_shared_useDataUrl__WEBPACK_IMPORTED_MODULE_5__[\"default\"])();\n  const category = 'uncategorized'; // Handle image selection\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    // Don't clear the current image on re-render\n    if (!dataUrl || !dataBlob) return;\n    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dataUrl, dataBlob]); // Handle loading states\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    dispatch(dataLoading ? _reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].START_LOADING : _reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].STOP_LOADING);\n\n    if (dataUrl) {\n      dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE_COLLECTION_OPEN,\n        payload: false\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [dataLoading]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (isLoading) onLoading && onLoading();else onLoaded && onLoaded(); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isLoading]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_2__[\"View\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_image_Images__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    fetchInitialImages: () => storeProps.fetchInitialImages({\n      category\n    }),\n    fetchNextImages: () => storeProps.fetchNextImages({\n      category\n    }),\n    contextType: storeProps.contextType,\n    images: {\n      [storeProps.contextType]: {\n        files,\n        bookmark,\n        hasMore,\n        isLoading\n      }\n    },\n    sortBy: {\n      sort: 'date_added',\n      order: 'desc'\n    },\n    onImageEmbed: file => {\n      setUrl(file.download_url);\n      dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_6__[\"actions\"].SET_IMAGE_NAME,\n        payload: file.filename\n      });\n    }\n  }));\n};\n\nCourse.propTypes = {\n  dispatch: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onChange: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onLoading: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  onLoaded: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func\n};\nCourse.defaultProps = {\n  dispatch: () => {},\n  onChange: () => {},\n  onLoading: () => {},\n  onLoaded: () => {}\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (Course);\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js?");
 
 /***/ }),
 
@@ -320,7 +308,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ImageOptions\", function() { return ImageOptions; });\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/core-js-stable/instance/includes */ \"../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/includes.js\");\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _shared_PreviewIcon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../shared/PreviewIcon */ \"./src/rce/plugins/shared/PreviewIcon.js\");\n/* harmony import */ var _instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @instructure/ui-truncate-text */ \"../../node_modules/@instructure/ui-truncate-text/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _ImageCropper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../ImageCropper */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/index.js\");\n/* harmony import */ var _ModeSelect__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./ModeSelect */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ModeSelect.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_13__);\n/* harmony import */ var _ImageCropper_propTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../ImageCropper/propTypes */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/propTypes.js\");\n\n\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nfunction renderImagePreview(_ref) {\n  let {\n    image,\n    loading\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_shared_PreviewIcon__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    variant: \"large\",\n    testId: \"selected-image-preview\",\n    image: image,\n    loading: loading,\n    checkered: true\n  });\n}\n\nfunction renderImageName(_ref2) {\n  let {\n    imageName\n  } = _ref2;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__[\"View\"], {\n    maxWidth: \"200px\",\n    as: \"div\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_9__[\"TruncateText\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_10__[\"Text\"], null, imageName || Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('None Selected'))));\n}\n\nfunction renderImageActionButtons(_ref3, dispatch, setFocus, ref) {\n  var _context;\n\n  let {\n    mode,\n    collectionOpen\n  } = _ref3;\n  const showCropButton = _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].uploadImages.type, _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].courseImages.type]).call(_context, mode) && !collectionOpen;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_1___default.a.Fragment, null, showCropButton && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_4__[\"IconButton\"], {\n    margin: \"0 small 0 0\",\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Crop image'),\n    onClick: () => dispatch({\n      type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_CROPPER_OPEN.type,\n      payload: true\n    })\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconCropLine\"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_4__[\"IconButton\"], {\n    ref: ref,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Clear image'),\n    onClick: () => dispatch(_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].RESET_ALL),\n    onFocus: () => setFocus(true),\n    onBlur: () => setFocus(false),\n    \"data-testid\": \"clear-image\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconTrashLine\"], null)));\n}\n\nconst ImageOptions = _ref4 => {\n  let {\n    state,\n    dispatch,\n    rcsConfig\n  } = _ref4;\n  const [isImageActionFocused, setIsImageActionFocused] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(false);\n  const imageActionRef = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useCallback\"])(el => {\n    if (el && isImageActionFocused) el.focus();\n  }, [isImageActionFocused]);\n  const {\n    image\n  } = state;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"], {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"].Item, {\n    margin: \"0 small 0 0\"\n  }, renderImagePreview(state)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"].Item, null, renderImageName(state)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"].Item, {\n    margin: \"0 0 0 auto\"\n  }, image ? renderImageActionButtons(state, dispatch, setIsImageActionFocused, imageActionRef) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_ModeSelect__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    dispatch: dispatch,\n    ref: imageActionRef,\n    onFocus: () => setIsImageActionFocused(true),\n    onBlur: () => setIsImageActionFocused(false),\n    rcsConfig: rcsConfig\n  }), state.cropperOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_ImageCropper__WEBPACK_IMPORTED_MODULE_11__[\"ImageCropperModal\"], {\n    open: state.cropperOpen,\n    onClose: () => dispatch({\n      type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_CROPPER_OPEN.type,\n      payload: false\n    }),\n    onSubmit: (settings, generatedImage) => {\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE.type,\n        payload: generatedImage\n      });\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_CROPPER_SETTINGS.type,\n        payload: settings\n      });\n    },\n    image: image,\n    cropSettings: state.cropperSettings\n  })));\n};\nImageOptions.propTypes = {\n  state: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.shape({\n    image: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.string.isRequired,\n    imageName: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.string.isRequired,\n    mode: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.string.isRequired,\n    loading: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.bool.isRequired,\n    cropperOpen: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.bool.isRequired,\n    cropperSettings: _ImageCropper_propTypes__WEBPACK_IMPORTED_MODULE_14__[\"ImageCropperSettingsPropTypes\"]\n  }).isRequired,\n  dispatch: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.func.isRequired,\n  rcsConfig: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.object.isRequired\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ImageOptions\", function() { return ImageOptions; });\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/core-js-stable/instance/includes */ \"../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/includes.js\");\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _shared_PreviewIcon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../shared/PreviewIcon */ \"./src/rce/plugins/shared/PreviewIcon.js\");\n/* harmony import */ var _instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @instructure/ui-truncate-text */ \"../../node_modules/@instructure/ui-truncate-text/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _ImageCropper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../ImageCropper */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/index.js\");\n/* harmony import */ var _ModeSelect__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./ModeSelect */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ModeSelect.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_13__);\n/* harmony import */ var _ImageCropper_propTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../ImageCropper/propTypes */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/propTypes.js\");\n/* harmony import */ var _compressionUtils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./compressionUtils */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js\");\n\n\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst getCompressionMessage = () => Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Your image has been compressed for Icon Maker. Images less than {size} KB will not be compressed.', {\n  size: _compressionUtils__WEBPACK_IMPORTED_MODULE_15__[\"MAX_IMAGE_SIZE_BYTES\"] / 1024\n});\n\nfunction renderImagePreview(_ref) {\n  let {\n    image,\n    loading\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_shared_PreviewIcon__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    variant: \"large\",\n    testId: \"selected-image-preview\",\n    image: image,\n    loading: loading,\n    checkered: true\n  });\n}\n\nfunction renderImageName(_ref2) {\n  let {\n    imageName\n  } = _ref2;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__[\"View\"], {\n    maxWidth: \"200px\",\n    as: \"div\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_9__[\"TruncateText\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_10__[\"Text\"], null, imageName || Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('None Selected'))));\n}\n\nfunction renderImageActionButtons(_ref3, dispatch, setFocus, ref) {\n  var _context;\n\n  let {\n    mode,\n    collectionOpen\n  } = _ref3;\n  const showCropButton = _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].uploadImages.type, _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].courseImages.type]).call(_context, mode) && !collectionOpen;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_1___default.a.Fragment, null, showCropButton && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_4__[\"IconButton\"], {\n    margin: \"0 small 0 0\",\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Crop image'),\n    onClick: () => dispatch({\n      type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_CROPPER_OPEN.type,\n      payload: true\n    })\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconCropLine\"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_4__[\"IconButton\"], {\n    ref: ref,\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Clear image'),\n    onClick: () => dispatch(_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].RESET_ALL),\n    onFocus: () => setFocus(true),\n    onBlur: () => setFocus(false),\n    \"data-testid\": \"clear-image\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconTrashLine\"], null)));\n}\n\nconst ImageOptions = _ref4 => {\n  let {\n    state,\n    dispatch,\n    rcsConfig\n  } = _ref4;\n  const [isImageActionFocused, setIsImageActionFocused] = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useState\"])(false);\n  const imageActionRef = Object(react__WEBPACK_IMPORTED_MODULE_1__[\"useCallback\"])(el => {\n    if (el && isImageActionFocused) el.focus();\n  }, [isImageActionFocused]);\n  const {\n    image\n  } = state;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"], {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"].Item, {\n    margin: \"0 small 0 0\"\n  }, renderImagePreview(state)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"].Item, null, renderImageName(state)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_7__[\"Flex\"].Item, {\n    margin: \"0 0 0 auto\"\n  }, image ? renderImageActionButtons(state, dispatch, setIsImageActionFocused, imageActionRef) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_ModeSelect__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    dispatch: dispatch,\n    ref: imageActionRef,\n    onFocus: () => setIsImageActionFocused(true),\n    onBlur: () => setIsImageActionFocused(false),\n    rcsConfig: rcsConfig\n  }), state.cropperOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_ImageCropper__WEBPACK_IMPORTED_MODULE_11__[\"ImageCropperModal\"], {\n    open: state.cropperOpen,\n    onClose: () => dispatch({\n      type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_CROPPER_OPEN.type,\n      payload: false\n    }),\n    onSubmit: (settings, generatedImage) => {\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE.type,\n        payload: generatedImage\n      });\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_CROPPER_SETTINGS.type,\n        payload: settings\n      });\n    },\n    image: image,\n    cropSettings: state.cropperSettings,\n    message: state.compressed ? getCompressionMessage() : null,\n    loading: !image\n  })));\n};\nImageOptions.propTypes = {\n  state: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.shape({\n    image: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.string.isRequired,\n    imageName: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.string.isRequired,\n    mode: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.string.isRequired,\n    loading: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.bool.isRequired,\n    cropperOpen: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.bool.isRequired,\n    cropperSettings: _ImageCropper_propTypes__WEBPACK_IMPORTED_MODULE_14__[\"ImageCropperSettingsPropTypes\"],\n    compressed: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.bool.isRequired\n  }).isRequired,\n  dispatch: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.func.isRequired,\n  rcsConfig: prop_types__WEBPACK_IMPORTED_MODULE_13___default.a.object.isRequired\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js?");
 
 /***/ }),
 
@@ -332,7 +320,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ImageSection\", function() { return ImageSection; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ \"../../node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _Group__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Group */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Group.js\");\n/* harmony import */ var _instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-spinner */ \"../../node_modules/@instructure/ui-spinner/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _Course__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Course */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js\");\n/* harmony import */ var _ImageOptions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ImageOptions */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js\");\n/* harmony import */ var _shared_ColorInput__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../shared/ColorInput */ \"./src/rce/plugins/shared/ColorInput.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../svg/utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _svg_image__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../svg/image */ \"./src/rce/plugins/instructure_icon_maker/svg/image.js\");\n/* harmony import */ var _SingleColor_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./SingleColor/svg */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/svg.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst IMAGE_SECTION_ID = 'icon-maker-tray-image-section';\n\nconst getImageSection = () => document.querySelector(`#${IMAGE_SECTION_ID}`);\n\nconst scrollToBottom = () => {\n  const section = getImageSection();\n\n  if (section !== null && section !== void 0 && section.scrollIntoView) {\n    section.scrollIntoView({\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst filterSectionStateMetadata = state => {\n  const {\n    mode,\n    image,\n    imageName,\n    icon,\n    iconFillColor,\n    cropperSettings\n  } = state;\n  return {\n    mode,\n    image,\n    imageName,\n    icon,\n    iconFillColor,\n    cropperSettings\n  };\n};\n\nconst ImageSection = _ref => {\n  let {\n    settings,\n    onChange,\n    editing,\n    editor,\n    rcsConfig\n  } = _ref;\n  const [state, dispatch] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useReducer\"])(_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"initialState\"]);\n  const Upload = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(() => Promise.all(/*! import() */[__webpack_require__.e(6), __webpack_require__.e(72)]).then(__webpack_require__.bind(null, /*! ./Upload */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Upload.js\")));\n  const SingleColor = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(() => Promise.all(/*! import() */[__webpack_require__.e(12), __webpack_require__.e(71)]).then(__webpack_require__.bind(null, /*! ./SingleColor */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/index.js\")));\n  const MultiColor = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(() => Promise.all(/*! import() */[__webpack_require__.e(12), __webpack_require__.e(70)]).then(__webpack_require__.bind(null, /*! ./MultiColor */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/MultiColor/index.js\"))); // This object maps image selection modes to the\n  // component that handles that selection.\n  //\n  // The selected component is dynamically rendered\n  // in this component's returned JSX\n\n  const allowedModes = {\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].courseImages.type]: _Course__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].uploadImages.type]: Upload,\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].singleColorImages.type]: SingleColor,\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].multiColorImages.type]: MultiColor\n  };\n  const metadata = filterSectionStateMetadata(state);\n  const isMetadataLoaded = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(false);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const transform = Object(_svg_image__WEBPACK_IMPORTED_MODULE_13__[\"transformForShape\"])(settings.shape, settings.size); // Set Q1 crop defaults\n    // TODO: Set these properties based on cropper\n\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_X,\n      payload: transform.x\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_Y,\n      payload: transform.y\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_WIDTH,\n      payload: transform.width\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_HEIGHT,\n      payload: transform.height\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_TRANSLATE_X,\n      payload: transform.translateX\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_TRANSLATE_Y,\n      payload: transform.translateY\n    });\n  }, [onChange, settings.shape, settings.size]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (editing && !!settings.encodedImage) {\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE.type,\n        payload: settings.encodedImage\n      });\n    }\n  }, [editing, settings.encodedImage]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (editing && !!settings.encodedImageName) {\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE_NAME.type,\n        payload: settings.encodedImageName\n      });\n    }\n  }, [editing, settings.encodedImageName]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_ENCODED_IMAGE,\n      payload: state.image\n    });\n  }, [onChange, state.image]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_ENCODED_IMAGE_TYPE,\n      payload: state.mode\n    });\n  }, [onChange, state.mode]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_ENCODED_IMAGE_NAME,\n      payload: state.imageName\n    });\n  }, [onChange, state.imageName]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (state.icon && state.icon in _SingleColor_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"]) {\n      dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].START_LOADING\n      }); // eslint-disable-next-line promise/catch-or-return\n\n      Object(_svg_utils__WEBPACK_IMPORTED_MODULE_12__[\"convertFileToBase64\"])(new Blob([_SingleColor_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"][state.icon].source(state.iconFillColor)], {\n        type: 'image/svg+xml'\n      })).then(base64Image => {\n        dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE,\n          payload: base64Image\n        });\n        dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].STOP_LOADING\n        });\n      });\n    }\n  }, [state.icon, state.iconFillColor]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (settings.imageSettings && !isMetadataLoaded.current && !lodash__WEBPACK_IMPORTED_MODULE_1___default.a.isEqual(settings.imageSettings, metadata)) {\n      isMetadataLoaded.current = true;\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].UPDATE_SETTINGS.type,\n        payload: settings.imageSettings\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [settings.imageSettings]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!lodash__WEBPACK_IMPORTED_MODULE_1___default.a.isEqual(metadata, settings.imageSettings)) {\n      onChange({\n        type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_IMAGE_SETTINGS,\n        payload: metadata\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, Object.values(metadata));\n  const modeIsAllowed = !!allowedModes[state.mode];\n  const ImageSelector = allowedModes[state.mode];\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Group__WEBPACK_IMPORTED_MODULE_6__[\"Group\"], {\n    as: \"section\",\n    defaultExpanded: true,\n    summary: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Image')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"], {\n    as: \"section\",\n    justifyItems: \"space-between\",\n    direction: \"column\",\n    id: IMAGE_SECTION_ID\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"], {\n    direction: \"column\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, {\n    padding: \"small 0 0 small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_8__[\"Text\"], {\n    weight: \"bold\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Current Image'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ImageOptions__WEBPACK_IMPORTED_MODULE_10__[\"ImageOptions\"], {\n    state: state,\n    dispatch: dispatch,\n    rcsConfig: rcsConfig\n  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0__[\"Suspense\"], {\n    fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"], {\n      justifyItems: \"center\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__[\"Spinner\"], {\n      renderTitle: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Loading')\n    })))\n  }, modeIsAllowed && state.collectionOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ImageSelector, {\n    dispatch: dispatch,\n    editor: editor,\n    data: state,\n    onLoading: scrollToBottom,\n    onLoaded: scrollToBottom\n  }))), state.icon && state.mode === _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].singleColorImages.type && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_ColorInput__WEBPACK_IMPORTED_MODULE_11__[\"ColorInput\"], {\n    color: state.iconFillColor,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Single Color Image Color'),\n    name: \"single-color-image-fill\",\n    onChange: color => dispatch({\n      type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_ICON_FILL_COLOR.type,\n      payload: color\n    }),\n    popoverMountNode: getImageSection,\n    requireColor: true\n  }))));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ImageSection\", function() { return ImageSection; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ \"../../node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _Group__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Group */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Group.js\");\n/* harmony import */ var _instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-spinner */ \"../../node_modules/@instructure/ui-spinner/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _Course__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Course */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js\");\n/* harmony import */ var _ImageOptions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ImageOptions */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js\");\n/* harmony import */ var _shared_ColorInput__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../shared/ColorInput */ \"./src/rce/plugins/shared/ColorInput.js\");\n/* harmony import */ var _svg_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../svg/utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _svg_image__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../svg/image */ \"./src/rce/plugins/instructure_icon_maker/svg/image.js\");\n/* harmony import */ var _SingleColor_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./SingleColor/svg */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/svg.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst IMAGE_SECTION_ID = 'icon-maker-tray-image-section';\n\nconst getImageSection = () => document.querySelector(`#${IMAGE_SECTION_ID}`);\n\nconst scrollToBottom = () => {\n  const section = getImageSection();\n\n  if (section !== null && section !== void 0 && section.scrollIntoView) {\n    section.scrollIntoView({\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst filterSectionStateMetadata = state => {\n  const {\n    mode,\n    image,\n    imageName,\n    icon,\n    iconFillColor,\n    cropperSettings\n  } = state;\n  return {\n    mode,\n    image,\n    imageName,\n    icon,\n    iconFillColor,\n    cropperSettings\n  };\n};\n\nconst ImageSection = _ref => {\n  let {\n    settings,\n    onChange,\n    editing,\n    editor,\n    rcsConfig\n  } = _ref;\n  const [state, dispatch] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useReducer\"])(_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"default\"], _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"initialState\"]);\n  const Upload = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(() => Promise.all(/*! import() */[__webpack_require__.e(6), __webpack_require__.e(72)]).then(__webpack_require__.bind(null, /*! ./Upload */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Upload.js\")));\n  const SingleColor = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(() => Promise.all(/*! import() */[__webpack_require__.e(12), __webpack_require__.e(71)]).then(__webpack_require__.bind(null, /*! ./SingleColor */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SingleColor/index.js\")));\n  const MultiColor = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.lazy(() => Promise.all(/*! import() */[__webpack_require__.e(12), __webpack_require__.e(70)]).then(__webpack_require__.bind(null, /*! ./MultiColor */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/MultiColor/index.js\"))); // This object maps image selection modes to the\n  // component that handles that selection.\n  //\n  // The selected component is dynamically rendered\n  // in this component's returned JSX\n\n  const allowedModes = {\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].courseImages.type]: _Course__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].uploadImages.type]: Upload,\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].singleColorImages.type]: SingleColor,\n    [_reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].multiColorImages.type]: MultiColor\n  };\n  const metadata = filterSectionStateMetadata(state);\n  const isMetadataLoaded = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(false);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const transform = Object(_svg_image__WEBPACK_IMPORTED_MODULE_13__[\"transformForShape\"])(settings.shape, settings.size); // Set Q1 crop defaults\n    // TODO: Set these properties based on cropper\n\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_X,\n      payload: transform.x\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_Y,\n      payload: transform.y\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_WIDTH,\n      payload: transform.width\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_HEIGHT,\n      payload: transform.height\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_TRANSLATE_X,\n      payload: transform.translateX\n    });\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_TRANSLATE_Y,\n      payload: transform.translateY\n    });\n  }, [onChange, settings.shape, settings.size]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (editing && !!settings.encodedImage) {\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE.type,\n        payload: settings.encodedImage\n      });\n    }\n  }, [editing, settings.encodedImage]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (editing && !!settings.encodedImageName) {\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE_NAME.type,\n        payload: settings.encodedImageName\n      });\n    }\n  }, [editing, settings.encodedImageName]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_ENCODED_IMAGE,\n      payload: state.image\n    });\n  }, [onChange, state.image]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_ENCODED_IMAGE_TYPE,\n      payload: state.mode\n    });\n  }, [onChange, state.mode]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    onChange({\n      type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_ENCODED_IMAGE_NAME,\n      payload: state.imageName\n    });\n  }, [onChange, state.imageName]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (state.icon && state.icon in _SingleColor_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"]) {\n      dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].START_LOADING\n      }); // eslint-disable-next-line promise/catch-or-return\n\n      Object(_svg_utils__WEBPACK_IMPORTED_MODULE_12__[\"convertFileToBase64\"])(new Blob([_SingleColor_svg__WEBPACK_IMPORTED_MODULE_14__[\"default\"][state.icon].source(state.iconFillColor)], {\n        type: 'image/svg+xml'\n      })).then(base64Image => {\n        dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_IMAGE,\n          payload: base64Image\n        });\n        dispatch({ ..._reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].STOP_LOADING\n        });\n      });\n    }\n  }, [state.icon, state.iconFillColor]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (settings.imageSettings && !isMetadataLoaded.current && !lodash__WEBPACK_IMPORTED_MODULE_1___default.a.isEqual(settings.imageSettings, metadata)) {\n      isMetadataLoaded.current = true;\n      dispatch({\n        type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].UPDATE_SETTINGS.type,\n        payload: settings.imageSettings\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [settings.imageSettings]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (!lodash__WEBPACK_IMPORTED_MODULE_1___default.a.isEqual(metadata, settings.imageSettings)) {\n      onChange({\n        type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_4__[\"actions\"].SET_IMAGE_SETTINGS,\n        payload: metadata\n      });\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, Object.values(metadata));\n  const modeIsAllowed = !!allowedModes[state.mode];\n  const ImageSelector = allowedModes[state.mode];\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Group__WEBPACK_IMPORTED_MODULE_6__[\"Group\"], {\n    as: \"section\",\n    defaultExpanded: true,\n    summary: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Image')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"], {\n    as: \"section\",\n    justifyItems: \"space-between\",\n    direction: \"column\",\n    id: IMAGE_SECTION_ID\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"], {\n    direction: \"column\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, {\n    padding: \"small 0 0 small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_8__[\"Text\"], {\n    weight: \"bold\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Current Image'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ImageOptions__WEBPACK_IMPORTED_MODULE_10__[\"ImageOptions\"], {\n    state: state,\n    dispatch: dispatch,\n    rcsConfig: rcsConfig\n  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0__[\"Suspense\"], {\n    fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"], {\n      justifyItems: \"center\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__[\"Spinner\"], {\n      renderTitle: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Loading')\n    })))\n  }, modeIsAllowed && state.collectionOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ImageSelector, {\n    dispatch: dispatch,\n    editor: editor,\n    data: state,\n    onChange: onChange,\n    onLoading: scrollToBottom,\n    onLoaded: scrollToBottom\n  }))), state.icon && state.mode === _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].singleColorImages.type && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_5__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_ColorInput__WEBPACK_IMPORTED_MODULE_11__[\"ColorInput\"], {\n    color: state.iconFillColor,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('Single Color Image Color'),\n    name: \"single-color-image-fill\",\n    onChange: color => dispatch({\n      type: _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"actions\"].SET_ICON_FILL_COLOR.type,\n      payload: color\n    }),\n    popoverMountNode: getImageSection,\n    requireColor: true\n  }))));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.js?");
 
 /***/ }),
 
@@ -360,6 +348,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _for
 
 /***/ }),
 
+/***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js":
+/*!****************************************************************************************************************!*\
+  !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js ***!
+  \****************************************************************************************************************/
+/*! exports provided: MAX_IMAGE_SIZE_BYTES, canCompressImage, shouldCompressImage, compressImage */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MAX_IMAGE_SIZE_BYTES\", function() { return MAX_IMAGE_SIZE_BYTES; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"canCompressImage\", function() { return canCompressImage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"shouldCompressImage\", function() { return shouldCompressImage; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"compressImage\", function() { return compressImage; });\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/core-js-stable/instance/includes */ \"../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/includes.js\");\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _ImageCropper_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../ImageCropper/constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n\n\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst DEFAULT_TARGET_QUALITY = 0.75;\nconst MAX_IMAGE_SIZE_BYTES = 500 * 1024;\n\nfunction blobToBase64(blob) {\n  return new Promise(resolve => {\n    const reader = new FileReader();\n\n    reader.onloadend = () => resolve(reader.result);\n\n    reader.readAsDataURL(blob);\n  });\n}\n\nfunction drawImageOnCanvasElement(image, quality, resolve, reject) {\n  const {\n    width,\n    height\n  } = image;\n  let compressedImageWidth, compressedImageHeight;\n\n  if (width > _ImageCropper_constants__WEBPACK_IMPORTED_MODULE_1__[\"PREVIEW_WIDTH\"] || height > _ImageCropper_constants__WEBPACK_IMPORTED_MODULE_1__[\"PREVIEW_HEIGHT\"]) {\n    if (width > height) {\n      compressedImageWidth = _ImageCropper_constants__WEBPACK_IMPORTED_MODULE_1__[\"PREVIEW_WIDTH\"];\n      compressedImageHeight = compressedImageWidth * (height / width);\n    } else if (height > width) {\n      compressedImageHeight = _ImageCropper_constants__WEBPACK_IMPORTED_MODULE_1__[\"PREVIEW_HEIGHT\"];\n      compressedImageWidth = compressedImageHeight * (width / height);\n    } else {\n      compressedImageWidth = compressedImageHeight = _ImageCropper_constants__WEBPACK_IMPORTED_MODULE_1__[\"PREVIEW_HEIGHT\"];\n    }\n  }\n\n  const canvas = document.createElement('canvas');\n  canvas.width = compressedImageWidth;\n  canvas.height = compressedImageHeight;\n  const ctx = canvas.getContext('2d');\n  ctx.drawImage(image, 0, 0, compressedImageWidth, compressedImageHeight);\n  canvas.toBlob(blob => blob ? resolve(blob) : reject(blob), 'image/jpeg', quality);\n}\n\nfunction canCompressImage() {\n  // Some old browsers don't support toBlob\n  return Boolean(document.createElement('canvas').toBlob);\n}\nfunction shouldCompressImage(_ref) {\n  var _context;\n\n  let {\n    type,\n    size\n  } = _ref;\n  return _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = ['image/jpeg', 'image/webp', 'image/bmp', 'image/tiff']).call(_context, type) && size > MAX_IMAGE_SIZE_BYTES;\n}\nfunction compressImage(encodedImage) {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.src = encodedImage;\n\n    image.onload = function () {\n      drawImageOnCanvasElement(image, DEFAULT_TARGET_QUALITY, resolve, reject);\n    };\n  }).then(blob => blobToBase64(blob));\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js?");
+
+/***/ }),
+
 /***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/index.js":
 /*!*****************************************************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/index.js ***!
@@ -372,6 +372,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima
 
 /***/ }),
 
+/***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js":
+/*!*****************************************************************************************************!*\
+  !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js ***!
+  \*****************************************************************************************************/
+/*! exports provided: MAX_GIF_PNG_SIZE_BYTES, isAnUnsupportedGifPngImage */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MAX_GIF_PNG_SIZE_BYTES\", function() { return MAX_GIF_PNG_SIZE_BYTES; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isAnUnsupportedGifPngImage\", function() { return isAnUnsupportedGifPngImage; });\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/core-js-stable/instance/includes */ \"../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/includes.js\");\n/* harmony import */ var _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nconst MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;\nconst isAnUnsupportedGifPngImage = _ref => {\n  var _context;\n\n  let {\n    type,\n    size\n  } = _ref;\n  return _babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = ['image/gif', 'image/png']).call(_context, type) && size > MAX_GIF_PNG_SIZE_BYTES;\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/utils.js?");
+
+/***/ }),
+
 /***/ "./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Preview.js":
 /*!******************************************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Preview.js ***!
@@ -404,7 +416,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TextSection\", function() { return TextSection; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-text-input */ \"../../node_modules/@instructure/ui-text-input/es/index.js\");\n/* harmony import */ var _instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-simple-select */ \"../../node_modules/@instructure/ui-simple-select/es/index.js\");\n/* harmony import */ var _shared_ColorInput__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../shared/ColorInput */ \"./src/rce/plugins/shared/ColorInput.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _Group__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Group */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Group.js\");\n/* harmony import */ var _svg_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../svg/constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/useDebouncedValue */ \"./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\nconst TEXT_SIZES = ['small', 'medium', 'large', 'x-large'];\nconst TEXT_POSITIONS = ['middle', 'bottom-third', 'below'];\n\nconst getTextSection = () => document.querySelector('#icons-tray-text-section');\n\nconst TextSection = _ref => {\n  let {\n    settings,\n    onChange\n  } = _ref;\n  const [text, setText] = Object(_utils_useDebouncedValue__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(settings.text, t => {\n    if (t.length <= _svg_constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_TOTAL_TEXT_CHARS\"]) onChange({\n      text: t\n    });\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Group__WEBPACK_IMPORTED_MODULE_6__[\"Group\"], {\n    as: \"section\",\n    defaultExpanded: true,\n    summary: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    as: \"section\",\n    justifyItems: \"space-between\",\n    direction: \"column\",\n    id: \"icons-tray-text-section\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__[\"TextInput\"], {\n    id: \"icon-text\",\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text'),\n    onChange: setText,\n    value: text,\n    messages: [{\n      text: `${text.length}/${_svg_constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_TOTAL_TEXT_CHARS\"]}`,\n      type: 'hint'\n    }]\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"], {\n    assistiveText: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Use arrow keys to select a text size.'),\n    id: \"icon-text-size\",\n    onChange: (e, option) => onChange({\n      textSize: option.value\n    }),\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Size'),\n    value: settings.textSize\n  }, TEXT_SIZES.map(size => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"].Option, {\n    id: `text-size-${size}`,\n    key: `text-size-${size}`,\n    value: size\n  }, TEXT_SIZE_DESCRIPTION[size] || '')))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_ColorInput__WEBPACK_IMPORTED_MODULE_4__[\"ColorInput\"], {\n    color: settings.textColor,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Color'),\n    name: \"icon-text-color\",\n    onChange: textColor => onChange({\n      textColor\n    }),\n    popoverMountNode: getTextSection,\n    requireColor: true\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_ColorInput__WEBPACK_IMPORTED_MODULE_4__[\"ColorInput\"], {\n    color: settings.textBackgroundColor,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Background Color'),\n    name: \"icon-text-background-color\",\n    onChange: textBackgroundColor => onChange({\n      textBackgroundColor\n    }),\n    popoverMountNode: getTextSection\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"], {\n    assistiveText: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Use arrow keys to select a text position.'),\n    id: \"icon-text-position\",\n    onChange: (e, option) => onChange({\n      textPosition: option.value\n    }),\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Position'),\n    value: settings.textPosition\n  }, TEXT_POSITIONS.map(position => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"].Option, {\n    id: `text-position-${position}`,\n    key: `text-position-${position}`,\n    value: position\n  }, TEXT_POSITION_DESCRIPTION[position] || ''))))));\n};\nconst TEXT_SIZE_DESCRIPTION = {\n  small: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Small'),\n  medium: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Medium'),\n  large: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Large'),\n  'x-large': Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Extra Large')\n};\nconst TEXT_POSITION_DESCRIPTION = {\n  middle: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Middle'),\n  'bottom-third': Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Bottom Third'),\n  below: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Below')\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/TextSection.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"TextSection\", function() { return TextSection; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-text-input */ \"../../node_modules/@instructure/ui-text-input/es/index.js\");\n/* harmony import */ var _instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-simple-select */ \"../../node_modules/@instructure/ui-simple-select/es/index.js\");\n/* harmony import */ var _shared_ColorInput__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../shared/ColorInput */ \"./src/rce/plugins/shared/ColorInput.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _Group__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Group */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Group.js\");\n/* harmony import */ var _svg_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../svg/constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\nconst TEXT_SIZES = ['small', 'medium', 'large', 'x-large'];\nconst TEXT_POSITIONS = ['middle', 'bottom-third', 'below'];\n\nconst getTextSection = () => document.querySelector('#icons-tray-text-section');\n\nconst processText = (oldValue, newValue) => {\n  let result = newValue;\n\n  if (newValue.length > _svg_constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_TOTAL_TEXT_CHARS\"]) {\n    if (oldValue.length >= _svg_constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_TOTAL_TEXT_CHARS\"]) {\n      // When typing chars\n      result = oldValue;\n    } else {\n      // When pasting text\n      result = result.substring(0, _svg_constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_TOTAL_TEXT_CHARS\"]);\n    }\n  }\n\n  return result;\n};\n\nconst TextSection = _ref => {\n  let {\n    settings,\n    onChange\n  } = _ref;\n  const [text, setText] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(settings.text);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (settings.text !== text) {\n      setText(processText(settings.text));\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [settings.text]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Group__WEBPACK_IMPORTED_MODULE_6__[\"Group\"], {\n    as: \"section\",\n    defaultExpanded: true,\n    summary: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text')\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"], {\n    as: \"section\",\n    justifyItems: \"space-between\",\n    direction: \"column\",\n    id: \"icons-tray-text-section\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_2__[\"TextInput\"], {\n    id: \"icon-text\",\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text'),\n    onChange: (e, value) => {\n      const processedText = processText(text, value);\n\n      if (processedText !== text) {\n        setText(processedText);\n        onChange({\n          text: processedText\n        });\n      }\n    },\n    value: text,\n    messages: [{\n      text: `${text.length}/${_svg_constants__WEBPACK_IMPORTED_MODULE_7__[\"MAX_TOTAL_TEXT_CHARS\"]}`,\n      type: 'hint'\n    }]\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"], {\n    assistiveText: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Use arrow keys to select a text size.'),\n    id: \"icon-text-size\",\n    onChange: (e, option) => onChange({\n      textSize: option.value\n    }),\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Size'),\n    value: settings.textSize\n  }, TEXT_SIZES.map(size => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"].Option, {\n    id: `text-size-${size}`,\n    key: `text-size-${size}`,\n    value: size\n  }, TEXT_SIZE_DESCRIPTION[size] || '')))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_ColorInput__WEBPACK_IMPORTED_MODULE_4__[\"ColorInput\"], {\n    color: settings.textColor,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Color'),\n    name: \"icon-text-color\",\n    onChange: textColor => onChange({\n      textColor\n    }),\n    popoverMountNode: getTextSection,\n    requireColor: true\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_ColorInput__WEBPACK_IMPORTED_MODULE_4__[\"ColorInput\"], {\n    color: settings.textBackgroundColor,\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Background Color'),\n    name: \"icon-text-background-color\",\n    onChange: textBackgroundColor => onChange({\n      textBackgroundColor\n    }),\n    popoverMountNode: getTextSection\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_1__[\"Flex\"].Item, {\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"], {\n    assistiveText: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Use arrow keys to select a text position.'),\n    id: \"icon-text-position\",\n    onChange: (e, option) => onChange({\n      textPosition: option.value\n    }),\n    renderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Text Position'),\n    value: settings.textPosition\n  }, TEXT_POSITIONS.map(position => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_simple_select__WEBPACK_IMPORTED_MODULE_3__[\"SimpleSelect\"].Option, {\n    id: `text-position-${position}`,\n    key: `text-position-${position}`,\n    value: position\n  }, TEXT_POSITION_DESCRIPTION[position] || ''))))));\n};\nconst TEXT_SIZE_DESCRIPTION = {\n  small: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Small'),\n  medium: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Medium'),\n  large: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Large'),\n  'x-large': Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Extra Large')\n};\nconst TEXT_POSITION_DESCRIPTION = {\n  middle: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Middle'),\n  'bottom-third': Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Bottom Third'),\n  below: Object(_format_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('Below')\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/TextSection.js?");
 
 /***/ }),
 
@@ -428,7 +440,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Cre
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IconMakerTray\", function() { return IconMakerTray; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_heading__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-heading */ \"../../node_modules/@instructure/ui-heading/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-alerts */ \"../../node_modules/@instructure/ui-alerts/es/index.js\");\n/* harmony import */ var _instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-spinner */ \"../../node_modules/@instructure/ui-spinner/es/index.js\");\n/* harmony import */ var _CreateIconMakerForm_Preview__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./CreateIconMakerForm/Preview */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Preview.js\");\n/* harmony import */ var _CreateIconMakerForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./CreateIconMakerForm */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/index.js\");\n/* harmony import */ var _CreateIconMakerForm_Footer__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./CreateIconMakerForm/Footer */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Footer.js\");\n/* harmony import */ var _svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../svg */ \"./src/rce/plugins/instructure_icon_maker/svg/index.js\");\n/* harmony import */ var _svg_settings__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../svg/settings */ \"./src/rce/plugins/instructure_icon_maker/svg/settings.js\");\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _svg_constants__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../svg/constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _shared_FixedContentTray__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../shared/FixedContentTray */ \"./src/rce/plugins/shared/FixedContentTray.js\");\n/* harmony import */ var _shared_StoreContext__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../shared/StoreContext */ \"./src/rce/plugins/shared/StoreContext.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _shared_buildDownloadUrl__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../shared/buildDownloadUrl */ \"./src/rce/plugins/shared/buildDownloadUrl.js\");\n/* harmony import */ var _utils_iconValidation__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../utils/iconValidation */ \"./src/rce/plugins/instructure_icon_maker/utils/iconValidation.js\");\n/* harmony import */ var _utils_iconMakerFormHasChanges__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../utils/iconMakerFormHasChanges */ \"./src/rce/plugins/instructure_icon_maker/utils/iconMakerFormHasChanges.js\");\n/* harmony import */ var _bridge__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../../../bridge */ \"./src/bridge/index.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst INVALID_MESSAGE = Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image');\nconst UNSAVED_CHANGES_MESSAGE = Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?');\n\nfunction renderHeader(title, settings, onKeyDown, isInvalid, onAlertDismissal, onClose) {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__[\"View\"], {\n    as: \"div\",\n    background: \"primary\"\n  }, isInvalid && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_6__[\"Alert\"], {\n    variant: \"error\",\n    margin: \"small\",\n    timeout: 10000,\n    onDismiss: onAlertDismissal,\n    renderCloseButtonLabel: \"Close\"\n  }, INVALID_MESSAGE), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    direction: \"column\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    padding: \"medium medium small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    direction: \"row\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    grow: true,\n    shrink: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_heading__WEBPACK_IMPORTED_MODULE_3__[\"Heading\"], {\n    as: \"h2\"\n  }, title)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__[\"CloseButton\"], {\n    placement: \"static\",\n    variant: \"icon\",\n    onClick: onClose,\n    onKeyDown: onKeyDown,\n    \"data-testid\": \"icon-maker-close-button\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Close'))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    as: \"div\",\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CreateIconMakerForm_Preview__WEBPACK_IMPORTED_MODULE_8__[\"Preview\"], {\n    settings: settings\n  }))));\n}\n\nfunction renderBody(settings, dispatch, editor, editing, allowNameChange, nameRef, rcsConfig, isLoading) {\n  return isLoading() ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    justifyItems: \"center\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__[\"Spinner\"], {\n    renderTitle: Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Loading...'),\n    size: \"large\"\n  })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CreateIconMakerForm__WEBPACK_IMPORTED_MODULE_9__[\"CreateIconMakerForm\"], {\n    settings: settings,\n    dispatch: dispatch,\n    editor: editor,\n    editing: editing,\n    allowNameChange: allowNameChange,\n    nameRef: nameRef,\n    rcsConfig: rcsConfig\n  });\n}\n\nfunction renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef) {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__[\"View\"], {\n    as: \"div\",\n    background: \"primary\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CreateIconMakerForm_Footer__WEBPACK_IMPORTED_MODULE_10__[\"Footer\"], {\n    disabled: status === _svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].LOADING,\n    onCancel: onClose,\n    onSubmit: () => handleSubmit({\n      replaceFile: replaceAll\n    }),\n    replaceAll: replaceAll,\n    onReplaceAllChanged: setReplaceAll,\n    editing: editing,\n    applyRef: applyRef\n  }));\n}\n\nconst checkIfAnyUnsavedChanges = (initialSettings, currentSettings) => {\n  let shouldCloseTray = true;\n\n  if (Object(_utils_iconMakerFormHasChanges__WEBPACK_IMPORTED_MODULE_20__[\"hasChanges\"])(initialSettings, currentSettings)) {\n    // RCE already uses browser's confirm dialog for unsaved changes\n    // Its use here in the Icon Maker tray keeps that consistency\n    // eslint-disable-next-line no-restricted-globals, no-alert\n    shouldCloseTray = confirm(UNSAVED_CHANGES_MESSAGE);\n  }\n\n  return shouldCloseTray;\n};\n\nfunction IconMakerTray(_ref) {\n  let {\n    editor,\n    onUnmount,\n    editing,\n    rcsConfig\n  } = _ref;\n  const nameRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])();\n  const applyRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])();\n  const [isInvalid, setIsInvalid] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const [isOpen, setIsOpen] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(true);\n  const [replaceAll, setReplaceAll] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const title = editing ? Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Edit Icon') : Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Create Icon');\n  const [settings, settingsStatus, dispatch] = Object(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"useSvgSettings\"])(editor, editing, rcsConfig);\n  const [status, setStatus] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].IDLE);\n  const [initialSettings, setInitialSettings] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({ ..._reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"]\n  }); // These useRef objects are needed because when the tray is closed using the escape key\n  // objects created by useState are not available, causing the comparison between\n  // initialSettings and settings to behave unexpectedly\n\n  const initialSettingsRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(initialSettings);\n  const settingsRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(settings);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    settingsRef.current = settings;\n  }, [settings]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    initialSettingsRef.current = initialSettings;\n  }, [initialSettings]);\n  const storeProps = Object(_shared_StoreContext__WEBPACK_IMPORTED_MODULE_16__[\"useStoreProps\"])();\n\n  const onClose = () => {\n    const shouldCloseTray = checkIfAnyUnsavedChanges(initialSettingsRef.current, settingsRef.current);\n\n    if (shouldCloseTray) {\n      setIsOpen(false);\n    }\n  };\n\n  const isLoading = () => status === _svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].LOADING;\n\n  const onKeyDown = event => {\n    var _applyRef$current, _nameRef$current;\n\n    if (event.keyCode !== 9) return;\n    event.preventDefault();\n    event.shiftKey ? (_applyRef$current = applyRef.current) === null || _applyRef$current === void 0 ? void 0 : _applyRef$current.focus() : (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();\n  };\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    setReplaceAll(false);\n  }, [settings.name]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (Object(_utils_iconValidation__WEBPACK_IMPORTED_MODULE_19__[\"validIcon\"])(settings)) {\n      setIsInvalid(false);\n      setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].IDLE);\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [settings.color, settings.textColor, settings.text, settings.encodedImage, settings.outlineColor, settings.outlineSize]);\n\n  const handleSubmit = _ref2 => {\n    let {\n      replaceFile = false\n    } = _ref2;\n    setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].LOADING);\n\n    if (!Object(_utils_iconValidation__WEBPACK_IMPORTED_MODULE_19__[\"validIcon\"])(settings)) {\n      setIsInvalid(true);\n      setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].ERROR);\n      return;\n    }\n\n    const svg = Object(_svg__WEBPACK_IMPORTED_MODULE_11__[\"buildSvg\"])(settings, {\n      isPreview: false\n    });\n    svg.appendChild(Object(_svg__WEBPACK_IMPORTED_MODULE_11__[\"buildStylesheet\"])());\n    return storeProps.startIconMakerUpload({\n      name: `${settings.name || Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('untitled')}.svg`,\n      domElement: svg\n    }, {\n      onDuplicate: replaceFile && 'overwrite'\n    }).then(writeIconToRCE).then(() => setIsOpen(false)).catch(() => setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].ERROR));\n  };\n\n  const writeIconToRCE = _ref3 => {\n    let {\n      url,\n      display_name\n    } = _ref3;\n    const {\n      alt,\n      isDecorative,\n      externalStyle,\n      externalWidth,\n      externalHeight\n    } = settings;\n    const imageAttributes = {\n      alt_text: alt,\n      display_name,\n      height: externalHeight,\n      isDecorativeImage: isDecorative,\n      src: url,\n      // React wants this to be an object but we are just\n      // passing along a string here. Using the style attribute\n      // with all caps makes React ignore this fact\n      STYLE: externalStyle,\n      width: externalWidth\n    }; // Mark the image as an icon maker icon.\n\n    imageAttributes[_svg_constants__WEBPACK_IMPORTED_MODULE_14__[\"ICON_MAKER_ATTRIBUTE\"]] = true; // URL to fetch the SVG from when loading the Edit tray.\n    // We can't use the 'src' because Canvas will re-write the\n    // source attribute to a URL that is not cross-origin friendly.\n\n    imageAttributes[_svg_constants__WEBPACK_IMPORTED_MODULE_14__[\"ICON_MAKER_DOWNLOAD_URL_ATTR\"]] = Object(_shared_buildDownloadUrl__WEBPACK_IMPORTED_MODULE_18__[\"default\"])(url);\n    _bridge__WEBPACK_IMPORTED_MODULE_21__[\"default\"].embedImage(imageAttributes);\n  };\n\n  const defaultImageSettings = () => {\n    return {\n      mode: '',\n      image: '',\n      imageName: '',\n      icon: '',\n      iconFillColor: '#000000',\n      cropperSettings: null\n    };\n  };\n\n  const replaceInitialSettings = () => {\n    const name = editing ? settings.name : '';\n    const textPosition = editing ? settings.textPosition : _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"].textPosition;\n    const imageSettings = settings.imageSettings && !!settings.imageSettings.mode ? settings.imageSettings : defaultImageSettings();\n    setInitialSettings({\n      name,\n      alt: editing ? settings.alt : _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"].alt,\n      shape: editing ? settings.shape : _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"].shape,\n      size: settings.size,\n      color: settings.color,\n      outlineSize: settings.outlineSize,\n      outlineColor: settings.outlineColor,\n      text: settings.text,\n      textSize: settings.textSize,\n      textColor: settings.textColor,\n      textBackgroundColor: settings.textBackgroundColor,\n      textPosition,\n      imageSettings\n    });\n  };\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    setStatus(settingsStatus);\n    replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [settingsStatus]);\n\n  const handleAlertDismissal = () => setIsInvalid(false);\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_FixedContentTray__WEBPACK_IMPORTED_MODULE_15__[\"FixedContentTray\"], {\n    title: title,\n    isOpen: isOpen,\n    onDismiss: onClose,\n    onUnmount: onUnmount,\n    renderHeader: () => renderHeader(title, settings, onKeyDown, isInvalid, handleAlertDismissal, onClose),\n    renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, rcsConfig, isLoading),\n    renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef),\n    bodyAs: \"form\",\n    shouldJoinBodyAndFooter: true\n  });\n}\nIconMakerTray.propTypes = {\n  editor: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object.isRequired,\n  onUnmount: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  editing: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n  rcsConfig: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object.isRequired\n};\nIconMakerTray.defaultProps = {\n  onUnmount: () => {},\n  editing: false\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/IconMakerTray.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IconMakerTray\", function() { return IconMakerTray; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_heading__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-heading */ \"../../node_modules/@instructure/ui-heading/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-alerts */ \"../../node_modules/@instructure/ui-alerts/es/index.js\");\n/* harmony import */ var _instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-spinner */ \"../../node_modules/@instructure/ui-spinner/es/index.js\");\n/* harmony import */ var _CreateIconMakerForm_Preview__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./CreateIconMakerForm/Preview */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Preview.js\");\n/* harmony import */ var _CreateIconMakerForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./CreateIconMakerForm */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/index.js\");\n/* harmony import */ var _CreateIconMakerForm_Footer__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./CreateIconMakerForm/Footer */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Footer.js\");\n/* harmony import */ var _svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../svg */ \"./src/rce/plugins/instructure_icon_maker/svg/index.js\");\n/* harmony import */ var _svg_settings__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../svg/settings */ \"./src/rce/plugins/instructure_icon_maker/svg/settings.js\");\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _svg_constants__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../svg/constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _shared_FixedContentTray__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../shared/FixedContentTray */ \"./src/rce/plugins/shared/FixedContentTray.js\");\n/* harmony import */ var _shared_StoreContext__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../shared/StoreContext */ \"./src/rce/plugins/shared/StoreContext.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _shared_buildDownloadUrl__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../shared/buildDownloadUrl */ \"./src/rce/plugins/shared/buildDownloadUrl.js\");\n/* harmony import */ var _utils_iconValidation__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../utils/iconValidation */ \"./src/rce/plugins/instructure_icon_maker/utils/iconValidation.js\");\n/* harmony import */ var _utils_IconMakerFormHasChanges__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../utils/IconMakerFormHasChanges */ \"./src/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.ts\");\n/* harmony import */ var _bridge__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../../../bridge */ \"./src/bridge/index.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst INVALID_MESSAGE = Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image');\nconst UNSAVED_CHANGES_MESSAGE = Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?');\n\nfunction renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__[\"View\"], {\n    as: \"div\",\n    background: \"primary\"\n  }, settings.error && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_alerts__WEBPACK_IMPORTED_MODULE_6__[\"Alert\"], {\n    variant: \"error\",\n    margin: \"small\",\n    timeout: 10000,\n    onDismiss: onAlertDismissal,\n    renderCloseButtonLabel: \"Close\"\n  }, settings.error), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    direction: \"column\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    padding: \"medium medium small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    direction: \"row\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    shouldGrow: true,\n    shouldShrink: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_heading__WEBPACK_IMPORTED_MODULE_3__[\"Heading\"], {\n    as: \"h2\"\n  }, title)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_2__[\"CloseButton\"], {\n    placement: \"static\",\n    color: \"primary\",\n    onClick: onClose,\n    onKeyDown: onKeyDown,\n    \"data-testid\": \"icon-maker-close-button\",\n    screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Close')\n  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"].Item, {\n    as: \"div\",\n    padding: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CreateIconMakerForm_Preview__WEBPACK_IMPORTED_MODULE_8__[\"Preview\"], {\n    settings: settings\n  }))));\n}\n\nfunction renderBody(settings, dispatch, editor, editing, allowNameChange, nameRef, rcsConfig, isLoading) {\n  return isLoading() ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_4__[\"Flex\"], {\n    justifyItems: \"center\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_spinner__WEBPACK_IMPORTED_MODULE_7__[\"Spinner\"], {\n    renderTitle: Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Loading...'),\n    size: \"large\"\n  })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CreateIconMakerForm__WEBPACK_IMPORTED_MODULE_9__[\"CreateIconMakerForm\"], {\n    settings: settings,\n    dispatch: dispatch,\n    editor: editor,\n    editing: editing,\n    allowNameChange: allowNameChange,\n    nameRef: nameRef,\n    rcsConfig: rcsConfig\n  });\n}\n\nfunction renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef) {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_5__[\"View\"], {\n    as: \"div\",\n    background: \"primary\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CreateIconMakerForm_Footer__WEBPACK_IMPORTED_MODULE_10__[\"Footer\"], {\n    disabled: status === _svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].LOADING,\n    onCancel: onClose,\n    onSubmit: () => handleSubmit({\n      replaceFile: replaceAll\n    }),\n    replaceAll: replaceAll,\n    onReplaceAllChanged: setReplaceAll,\n    editing: editing,\n    applyRef: applyRef\n  }));\n}\n\nconst checkIfAnyUnsavedChanges = (initialSettings, currentSettings) => {\n  let shouldCloseTray = true;\n  const imFormHasChanges = new _utils_IconMakerFormHasChanges__WEBPACK_IMPORTED_MODULE_20__[\"IconMakerFormHasChanges\"](initialSettings, currentSettings);\n\n  if (imFormHasChanges.hasChanges()) {\n    // RCE already uses browser's confirm dialog for unsaved changes\n    // Its use here in the Icon Maker tray keeps that consistency\n    // eslint-disable-next-line no-restricted-globals, no-alert\n    shouldCloseTray = confirm(UNSAVED_CHANGES_MESSAGE);\n  }\n\n  return shouldCloseTray;\n};\n\nfunction IconMakerTray(_ref) {\n  let {\n    editor,\n    onUnmount,\n    editing,\n    rcsConfig\n  } = _ref;\n  const nameRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])();\n  const applyRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])();\n  const [isOpen, setIsOpen] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(true);\n  const [replaceAll, setReplaceAll] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const title = editing ? Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Edit Icon') : Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('Create Icon');\n  const [settings, settingsStatus, dispatch] = Object(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"useSvgSettings\"])(editor, editing, rcsConfig);\n  const [status, setStatus] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].IDLE);\n  const [initialSettings, setInitialSettings] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({ ..._reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"]\n  }); // These useRef objects are needed because when the tray is closed using the escape key\n  // objects created by useState are not available, causing the comparison between\n  // initialSettings and settings to behave unexpectedly\n\n  const initialSettingsRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(initialSettings);\n  const settingsRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(settings);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    settingsRef.current = settings;\n  }, [settings]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    initialSettingsRef.current = initialSettings;\n  }, [initialSettings]);\n  const storeProps = Object(_shared_StoreContext__WEBPACK_IMPORTED_MODULE_16__[\"useStoreProps\"])();\n\n  const onClose = () => {\n    const shouldCloseTray = checkIfAnyUnsavedChanges(initialSettingsRef.current, settingsRef.current);\n\n    if (shouldCloseTray) {\n      setIsOpen(false);\n    }\n  };\n\n  const isLoading = () => status === _svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].LOADING;\n\n  const onKeyDown = event => {\n    var _applyRef$current, _nameRef$current;\n\n    if (event.keyCode !== 9) return;\n    event.preventDefault();\n    event.shiftKey ? (_applyRef$current = applyRef.current) === null || _applyRef$current === void 0 ? void 0 : _applyRef$current.focus() : (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();\n  };\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    setReplaceAll(false);\n  }, [settings.name]);\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    if (Object(_utils_iconValidation__WEBPACK_IMPORTED_MODULE_19__[\"validIcon\"])(settings)) {\n      dispatch({\n        type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"actions\"].SET_ERROR,\n        payload: null\n      });\n      setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].IDLE);\n    } // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  }, [settings.color, settings.textColor, settings.text, settings.encodedImage, settings.outlineColor, settings.outlineSize]);\n\n  const handleSubmit = _ref2 => {\n    let {\n      replaceFile = false\n    } = _ref2;\n    setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].LOADING);\n\n    if (!Object(_utils_iconValidation__WEBPACK_IMPORTED_MODULE_19__[\"validIcon\"])(settings)) {\n      dispatch({\n        type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"actions\"].SET_ERROR,\n        payload: INVALID_MESSAGE\n      });\n      setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].ERROR);\n      return;\n    }\n\n    const svg = Object(_svg__WEBPACK_IMPORTED_MODULE_11__[\"buildSvg\"])(settings, {\n      isPreview: false\n    });\n    svg.appendChild(Object(_svg__WEBPACK_IMPORTED_MODULE_11__[\"buildStylesheet\"])());\n    return storeProps.startIconMakerUpload({\n      name: `${settings.name || Object(_format_message__WEBPACK_IMPORTED_MODULE_17__[\"default\"])('untitled')}.svg`,\n      domElement: svg\n    }, {\n      onDuplicate: replaceFile && 'overwrite'\n    }).then(writeIconToRCE).then(() => setIsOpen(false)).catch(() => setStatus(_svg_settings__WEBPACK_IMPORTED_MODULE_12__[\"statuses\"].ERROR));\n  };\n\n  const writeIconToRCE = _ref3 => {\n    let {\n      url,\n      display_name\n    } = _ref3;\n    const {\n      alt,\n      isDecorative,\n      externalStyle,\n      externalWidth,\n      externalHeight\n    } = settings;\n    const imageAttributes = {\n      alt_text: alt,\n      display_name,\n      height: externalHeight,\n      isDecorativeImage: isDecorative,\n      src: url,\n      // React wants this to be an object but we are just\n      // passing along a string here. Using the style attribute\n      // with all caps makes React ignore this fact\n      STYLE: externalStyle,\n      width: externalWidth\n    }; // Mark the image as an icon maker icon.\n\n    imageAttributes[_svg_constants__WEBPACK_IMPORTED_MODULE_14__[\"ICON_MAKER_ATTRIBUTE\"]] = true; // URL to fetch the SVG from when loading the Edit tray.\n    // We can't use the 'src' because Canvas will re-write the\n    // source attribute to a URL that is not cross-origin friendly.\n\n    imageAttributes[_svg_constants__WEBPACK_IMPORTED_MODULE_14__[\"ICON_MAKER_DOWNLOAD_URL_ATTR\"]] = Object(_shared_buildDownloadUrl__WEBPACK_IMPORTED_MODULE_18__[\"default\"])(url);\n    _bridge__WEBPACK_IMPORTED_MODULE_21__[\"default\"].embedImage(imageAttributes);\n  };\n\n  const defaultImageSettings = () => {\n    return {\n      mode: '',\n      image: '',\n      imageName: '',\n      icon: '',\n      iconFillColor: '#000000',\n      cropperSettings: null\n    };\n  };\n\n  const replaceInitialSettings = () => {\n    const name = editing ? settings.name : '';\n    const textPosition = editing ? settings.textPosition : _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"].textPosition;\n    const imageSettings = settings.imageSettings && !!settings.imageSettings.mode ? settings.imageSettings : defaultImageSettings();\n    setInitialSettings({\n      name,\n      alt: editing ? settings.alt : _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"].alt,\n      shape: editing ? settings.shape : _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"defaultState\"].shape,\n      size: settings.size,\n      color: settings.color,\n      outlineSize: settings.outlineSize,\n      outlineColor: settings.outlineColor,\n      text: settings.text,\n      textSize: settings.textSize,\n      textColor: settings.textColor,\n      textBackgroundColor: settings.textBackgroundColor,\n      textPosition,\n      imageSettings\n    });\n  };\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    setStatus(settingsStatus);\n    replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [settingsStatus]);\n\n  const handleAlertDismissal = () => dispatch({\n    type: _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_13__[\"actions\"].SET_ERROR,\n    payload: null\n  });\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_shared_FixedContentTray__WEBPACK_IMPORTED_MODULE_15__[\"FixedContentTray\"], {\n    title: title,\n    isOpen: isOpen,\n    onDismiss: onClose,\n    onUnmount: onUnmount,\n    renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),\n    renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, rcsConfig, isLoading),\n    renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef),\n    bodyAs: \"form\",\n    shouldJoinBodyAndFooter: true\n  });\n}\nIconMakerTray.propTypes = {\n  editor: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object.isRequired,\n  onUnmount: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,\n  editing: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,\n  rcsConfig: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object.isRequired\n};\nIconMakerTray.defaultProps = {\n  onUnmount: () => {},\n  editing: false\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/components/IconMakerTray.js?");
 
 /***/ }),
 
@@ -440,7 +452,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultState\", function() { return defaultState; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"actions\", function() { return actions; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"cropperSettingsReducer\", function() { return cropperSettingsReducer; });\n/* harmony import */ var _components_CreateIconMakerForm_ImageCropper_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/CreateIconMakerForm/ImageCropper/constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst defaultState = _components_CreateIconMakerForm_ImageCropper_constants__WEBPACK_IMPORTED_MODULE_0__[\"DEFAULT_CROPPER_SETTINGS\"];\nconst actions = {\n  SET_IMAGE: 'SetImage',\n  SET_SHAPE: 'SetShape',\n  SET_ROTATION: 'SetRotation',\n  SET_SCALE_RATIO: 'SetScaleRatio',\n  SET_TRANSLATE_X: 'SetTranslateX',\n  SET_TRANSLATE_Y: 'SetTranslateY',\n  UPDATE_SETTINGS: 'UpdateSettings'\n};\nconst cropperSettingsReducer = (state, action) => {\n  switch (action.type) {\n    case actions.SET_IMAGE:\n      return { ...state,\n        image: action.payload\n      };\n\n    case actions.SET_SHAPE:\n      return { ...state,\n        shape: action.payload\n      };\n\n    case actions.SET_ROTATION:\n      return { ...state,\n        rotation: action.payload\n      };\n\n    case actions.SET_SCALE_RATIO:\n      return { ...state,\n        scaleRatio: action.payload\n      };\n\n    case actions.SET_TRANSLATE_X:\n      return { ...state,\n        translateX: action.payload\n      };\n\n    case actions.SET_TRANSLATE_Y:\n      return { ...state,\n        translateY: action.payload\n      };\n\n    case actions.UPDATE_SETTINGS:\n      return { ...state,\n        ...action.payload\n      };\n\n    default:\n      throw Error('Unknown action for image cropper reducer');\n  }\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultState\", function() { return defaultState; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"actions\", function() { return actions; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"cropperSettingsReducer\", function() { return cropperSettingsReducer; });\n/* harmony import */ var _components_CreateIconMakerForm_ImageCropper_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/CreateIconMakerForm/ImageCropper/constants */ \"./src/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/constants.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst defaultState = _components_CreateIconMakerForm_ImageCropper_constants__WEBPACK_IMPORTED_MODULE_0__[\"DEFAULT_CROPPER_SETTINGS\"];\nconst actions = {\n  SET_IMAGE: 'SetImage',\n  SET_SHAPE: 'SetShape',\n  SET_ROTATION: 'SetRotation',\n  SET_SCALE_RATIO: 'SetScaleRatio',\n  SET_TRANSLATE_X: 'SetTranslateX',\n  SET_TRANSLATE_Y: 'SetTranslateY',\n  UPDATE_SETTINGS: 'UpdateSettings',\n  RESET_SETTINGS: 'ResetSettings'\n};\nconst cropperSettingsReducer = (state, action) => {\n  switch (action.type) {\n    case actions.SET_IMAGE:\n      return { ...state,\n        image: action.payload\n      };\n\n    case actions.SET_SHAPE:\n      return { ...state,\n        shape: action.payload\n      };\n\n    case actions.SET_ROTATION:\n      return { ...state,\n        rotation: action.payload\n      };\n\n    case actions.SET_SCALE_RATIO:\n      return { ...state,\n        scaleRatio: action.payload\n      };\n\n    case actions.SET_TRANSLATE_X:\n      return { ...state,\n        translateX: action.payload\n      };\n\n    case actions.SET_TRANSLATE_Y:\n      return { ...state,\n        translateY: action.payload\n      };\n\n    case actions.UPDATE_SETTINGS:\n      return { ...state,\n        ...action.payload\n      };\n\n    case actions.RESET_SETTINGS:\n      return { ...state,\n        rotation: defaultState.rotation,\n        scaleRatio: defaultState.scaleRatio,\n        translateX: defaultState.translateX,\n        translateY: defaultState.translateY\n      };\n\n    default:\n      throw Error('Unknown action for image cropper reducer');\n  }\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/reducers/imageCropper.js?");
 
 /***/ }),
 
@@ -452,7 +464,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"initialState\", function() { return initialState; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"actions\", function() { return actions; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"modes\", function() { return modes; });\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst initialState = {\n  mode: '',\n  image: '',\n  imageName: '',\n  icon: '',\n  iconFillColor: '#000000',\n  collectionOpen: false,\n  loading: false,\n  error: undefined,\n  cropperOpen: false,\n  cropperSettings: null\n};\nconst actions = {\n  RESET_ALL: {\n    type: 'ResetAll'\n  },\n  SET_IMAGE: {\n    type: 'SetImage'\n  },\n  SET_IMAGE_NAME: {\n    type: 'SetImageName'\n  },\n  CLEAR_IMAGE: {\n    type: 'ClearImage'\n  },\n  SET_ICON: {\n    type: 'SetIcon'\n  },\n  SET_ICON_FILL_COLOR: {\n    type: 'SetIconFillColor'\n  },\n  SET_IMAGE_COLLECTION_OPEN: {\n    type: 'SetImageCollectionOpen'\n  },\n  START_LOADING: {\n    type: 'StartLoading'\n  },\n  STOP_LOADING: {\n    type: 'StopLoading'\n  },\n  CLEAR_MODE: {\n    type: 'ClearMode'\n  },\n  UPDATE_SETTINGS: {\n    type: 'UpdateSettings'\n  },\n  SET_CROPPER_OPEN: {\n    type: 'SetCropperOpen'\n  },\n  SET_CROPPER_SETTINGS: {\n    type: 'SetCropperSettings'\n  }\n};\nconst modes = {\n  courseImages: {\n    type: 'Course',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Course Images')\n  },\n  uploadImages: {\n    type: 'Upload',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Upload Image')\n  },\n  singleColorImages: {\n    type: 'SingleColor',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Single Color Image')\n  },\n  multiColorImages: {\n    type: 'MultiColor',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Multi Color Image')\n  }\n};\n\nconst imageSection = (state, action) => {\n  switch (action.type) {\n    case actions.START_LOADING.type:\n      return { ...state,\n        loading: true\n      };\n\n    case actions.STOP_LOADING.type:\n      return { ...state,\n        loading: false\n      };\n\n    case actions.SET_IMAGE.type:\n      return { ...state,\n        image: action.payload\n      };\n\n    case actions.SET_IMAGE_NAME.type:\n      return { ...state,\n        imageName: action.payload\n      };\n\n    case actions.CLEAR_IMAGE.type:\n      return { ...state,\n        image: '',\n        imageName: ''\n      };\n\n    case actions.SET_ICON.type:\n      return { ...state,\n        icon: action.payload\n      };\n\n    case actions.SET_ICON_FILL_COLOR.type:\n      return { ...state,\n        iconFillColor: action.payload\n      };\n\n    case actions.CLEAR_MODE.type:\n      return { ...state,\n        mode: ''\n      };\n\n    case actions.SET_IMAGE_COLLECTION_OPEN.type:\n      return { ...state,\n        collectionOpen: action.payload\n      };\n\n    case actions.RESET_ALL.type:\n      return { ...state,\n        ...initialState\n      };\n\n    case modes.uploadImages.type:\n      return { ...state,\n        mode: modes.uploadImages.type\n      };\n\n    case modes.singleColorImages.type:\n      return { ...state,\n        mode: modes.singleColorImages.type\n      };\n\n    case modes.multiColorImages.type:\n      return { ...state,\n        mode: modes.multiColorImages.type\n      };\n\n    case modes.courseImages.type:\n      return { ...state,\n        mode: modes.courseImages.type\n      };\n\n    case actions.UPDATE_SETTINGS.type:\n      return { ...state,\n        ...action.payload\n      };\n\n    case actions.SET_CROPPER_OPEN.type:\n      return { ...state,\n        cropperOpen: action.payload\n      };\n\n    case actions.SET_CROPPER_SETTINGS.type:\n      return { ...state,\n        cropperSettings: action.payload\n      };\n\n    default:\n      throw Error('Unknown action for image selection reducer');\n  }\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (imageSection);\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"initialState\", function() { return initialState; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"actions\", function() { return actions; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"modes\", function() { return modes; });\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst initialState = {\n  mode: '',\n  image: '',\n  imageName: '',\n  icon: '',\n  iconFillColor: '#000000',\n  collectionOpen: false,\n  loading: false,\n  error: undefined,\n  cropperOpen: false,\n  cropperSettings: null,\n  compressed: false\n};\nconst actions = {\n  RESET_ALL: {\n    type: 'ResetAll'\n  },\n  SET_IMAGE: {\n    type: 'SetImage'\n  },\n  SET_IMAGE_NAME: {\n    type: 'SetImageName'\n  },\n  SET_COMPRESSION_STATUS: {\n    type: 'SetCompressionStatus'\n  },\n  CLEAR_IMAGE: {\n    type: 'ClearImage'\n  },\n  SET_ICON: {\n    type: 'SetIcon'\n  },\n  SET_ICON_FILL_COLOR: {\n    type: 'SetIconFillColor'\n  },\n  SET_IMAGE_COLLECTION_OPEN: {\n    type: 'SetImageCollectionOpen'\n  },\n  START_LOADING: {\n    type: 'StartLoading'\n  },\n  STOP_LOADING: {\n    type: 'StopLoading'\n  },\n  CLEAR_MODE: {\n    type: 'ClearMode'\n  },\n  UPDATE_SETTINGS: {\n    type: 'UpdateSettings'\n  },\n  SET_CROPPER_OPEN: {\n    type: 'SetCropperOpen'\n  },\n  SET_CROPPER_SETTINGS: {\n    type: 'SetCropperSettings'\n  }\n};\nconst modes = {\n  courseImages: {\n    type: 'Course',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Course Images')\n  },\n  uploadImages: {\n    type: 'Upload',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Upload Image')\n  },\n  singleColorImages: {\n    type: 'SingleColor',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Single Color Image')\n  },\n  multiColorImages: {\n    type: 'MultiColor',\n    label: Object(_format_message__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('Multi Color Image')\n  }\n};\n\nconst imageSection = (state, action) => {\n  switch (action.type) {\n    case actions.START_LOADING.type:\n      return { ...state,\n        loading: true\n      };\n\n    case actions.STOP_LOADING.type:\n      return { ...state,\n        loading: false\n      };\n\n    case actions.SET_IMAGE.type:\n      return { ...state,\n        image: action.payload\n      };\n\n    case actions.SET_IMAGE_NAME.type:\n      return { ...state,\n        imageName: action.payload\n      };\n\n    case actions.SET_COMPRESSION_STATUS.type:\n      return { ...state,\n        compressed: action.payload\n      };\n\n    case actions.CLEAR_IMAGE.type:\n      return { ...state,\n        image: '',\n        imageName: '',\n        compressed: false\n      };\n\n    case actions.SET_ICON.type:\n      return { ...state,\n        icon: action.payload\n      };\n\n    case actions.SET_ICON_FILL_COLOR.type:\n      return { ...state,\n        iconFillColor: action.payload\n      };\n\n    case actions.CLEAR_MODE.type:\n      return { ...state,\n        mode: ''\n      };\n\n    case actions.SET_IMAGE_COLLECTION_OPEN.type:\n      return { ...state,\n        collectionOpen: action.payload\n      };\n\n    case actions.RESET_ALL.type:\n      return { ...state,\n        ...initialState\n      };\n\n    case modes.uploadImages.type:\n      return { ...state,\n        mode: modes.uploadImages.type\n      };\n\n    case modes.singleColorImages.type:\n      return { ...state,\n        mode: modes.singleColorImages.type\n      };\n\n    case modes.multiColorImages.type:\n      return { ...state,\n        mode: modes.multiColorImages.type\n      };\n\n    case modes.courseImages.type:\n      return { ...state,\n        mode: modes.courseImages.type\n      };\n\n    case actions.UPDATE_SETTINGS.type:\n      return { ...state,\n        ...action.payload\n      };\n\n    case actions.SET_CROPPER_OPEN.type:\n      return { ...state,\n        cropperOpen: action.payload\n      };\n\n    case actions.SET_CROPPER_SETTINGS.type:\n      return { ...state,\n        cropperSettings: action.payload\n      };\n\n    default:\n      throw Error('Unknown action for image selection reducer');\n  }\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (imageSection);\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js?");
 
 /***/ }),
 
@@ -464,7 +476,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultState\", function() { return defaultState; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"actions\", function() { return actions; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"svgSettings\", function() { return svgSettings; });\n/* harmony import */ var _svg_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../svg/constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst defaultState = _svg_constants__WEBPACK_IMPORTED_MODULE_0__[\"DEFAULT_SETTINGS\"];\nconst actions = {\n  SET_ENCODED_IMAGE: 'SetEncodedImage',\n  SET_ENCODED_IMAGE_TYPE: 'SetEncodedImageType',\n  SET_ENCODED_IMAGE_NAME: 'SetEncodedImageName',\n  SET_IMAGE_SETTINGS: 'SetImageSettings',\n  SET_X: 'SetX',\n  SET_Y: 'SetY',\n  SET_TRANSLATE_X: 'SetTranslateX',\n  SET_TRANSLATE_Y: 'SetTranslateY',\n  SET_WIDTH: 'SetWidth',\n  SET_HEIGHT: 'SetHeight'\n};\n\nconst buildTransformString = state => {\n  // All transforms that may be applied to an image\n  return [`translate(${state.translateX},${state.translateY})`].join(' ');\n};\n\nconst nextStateForTransform = (currentState, transformProp, value) => {\n  // Set the transform property that actually changed\n  let nextState = { ...currentState,\n    [transformProp]: value\n  }; // Regenerate the new \"transform\" string, taking into account the transform\n  // property value that was updated\n\n  nextState = { ...nextState,\n    transform: buildTransformString(nextState)\n  };\n  return nextState;\n};\n\nconst svgSettings = (state, action) => {\n  switch (action.type) {\n    case actions.SET_ENCODED_IMAGE:\n      return { ...state,\n        encodedImage: action.payload\n      };\n\n    case actions.SET_ENCODED_IMAGE_TYPE:\n      return { ...state,\n        encodedImageType: action.payload\n      };\n\n    case actions.SET_ENCODED_IMAGE_NAME:\n      return { ...state,\n        encodedImageName: action.payload\n      };\n\n    case actions.SET_IMAGE_SETTINGS:\n      return { ...state,\n        imageSettings: action.payload\n      };\n\n    case actions.SET_X:\n      return { ...state,\n        x: action.payload\n      };\n\n    case actions.SET_Y:\n      return { ...state,\n        y: action.payload\n      };\n\n    case actions.SET_WIDTH:\n      return { ...state,\n        width: action.payload\n      };\n\n    case actions.SET_HEIGHT:\n      return { ...state,\n        height: action.payload\n      };\n\n    case actions.SET_TRANSLATE_X:\n      return nextStateForTransform(state, 'translateX', action.payload);\n\n    case actions.SET_TRANSLATE_Y:\n      return nextStateForTransform(state, 'translateY', action.payload);\n\n    default:\n      return { ...state,\n        ...action\n      };\n  }\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultState\", function() { return defaultState; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"actions\", function() { return actions; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"svgSettings\", function() { return svgSettings; });\n/* harmony import */ var _svg_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../svg/constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst defaultState = _svg_constants__WEBPACK_IMPORTED_MODULE_0__[\"DEFAULT_SETTINGS\"];\nconst actions = {\n  SET_ENCODED_IMAGE: 'SetEncodedImage',\n  SET_ENCODED_IMAGE_TYPE: 'SetEncodedImageType',\n  SET_ENCODED_IMAGE_NAME: 'SetEncodedImageName',\n  SET_IMAGE_SETTINGS: 'SetImageSettings',\n  SET_X: 'SetX',\n  SET_Y: 'SetY',\n  SET_TRANSLATE_X: 'SetTranslateX',\n  SET_TRANSLATE_Y: 'SetTranslateY',\n  SET_WIDTH: 'SetWidth',\n  SET_HEIGHT: 'SetHeight',\n  SET_ERROR: 'SetError'\n};\n\nconst buildTransformString = state => {\n  // All transforms that may be applied to an image\n  return [`translate(${state.translateX},${state.translateY})`].join(' ');\n};\n\nconst nextStateForTransform = (currentState, transformProp, value) => {\n  // Set the transform property that actually changed\n  let nextState = { ...currentState,\n    [transformProp]: value\n  }; // Regenerate the new \"transform\" string, taking into account the transform\n  // property value that was updated\n\n  nextState = { ...nextState,\n    transform: buildTransformString(nextState)\n  };\n  return nextState;\n};\n\nconst svgSettings = (state, action) => {\n  switch (action.type) {\n    case actions.SET_ENCODED_IMAGE:\n      return { ...state,\n        encodedImage: action.payload\n      };\n\n    case actions.SET_ENCODED_IMAGE_TYPE:\n      return { ...state,\n        encodedImageType: action.payload\n      };\n\n    case actions.SET_ENCODED_IMAGE_NAME:\n      return { ...state,\n        encodedImageName: action.payload\n      };\n\n    case actions.SET_IMAGE_SETTINGS:\n      return { ...state,\n        imageSettings: action.payload\n      };\n\n    case actions.SET_X:\n      return { ...state,\n        x: action.payload\n      };\n\n    case actions.SET_Y:\n      return { ...state,\n        y: action.payload\n      };\n\n    case actions.SET_WIDTH:\n      return { ...state,\n        width: action.payload\n      };\n\n    case actions.SET_HEIGHT:\n      return { ...state,\n        height: action.payload\n      };\n\n    case actions.SET_ERROR:\n      return { ...state,\n        error: action.payload\n      };\n\n    case actions.SET_TRANSLATE_X:\n      return nextStateForTransform(state, 'translateX', action.payload);\n\n    case actions.SET_TRANSLATE_Y:\n      return nextStateForTransform(state, 'translateY', action.payload);\n\n    default:\n      return { ...state,\n        ...action\n      };\n  }\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js?");
 
 /***/ }),
 
@@ -524,7 +536,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildMetadata\", function() { return buildMetadata; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"parseMetadata\", function() { return parseMetadata; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nfunction buildMetadata(settings) {\n  // Pull off any instance specific settings\n  const {\n    name,\n    originalName,\n    alt,\n    isDecorative,\n    externalStyle,\n    externalWidth,\n    externalHeight,\n    ...embedSettings\n  } = settings;\n  const metadata = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('metadata');\n  metadata.textContent = JSON.stringify(embedSettings);\n  return metadata;\n}\nfunction parseMetadata(svg) {\n  const metadata = svg.querySelector('metadata');\n  if (!metadata) return null;\n  return JSON.parse(metadata.textContent);\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/metadata.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildMetadata\", function() { return buildMetadata; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"parseMetadata\", function() { return parseMetadata; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nfunction buildMetadata(settings) {\n  // Pull off any instance specific settings\n  const {\n    name,\n    originalName,\n    alt,\n    isDecorative,\n    externalStyle,\n    externalWidth,\n    externalHeight,\n    error,\n    ...embedSettings\n  } = settings;\n  const metadata = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('metadata');\n  metadata.textContent = JSON.stringify(embedSettings);\n  return metadata;\n}\nfunction parseMetadata(svg) {\n  const metadata = svg.querySelector('metadata');\n  if (!metadata) return null;\n  return JSON.parse(metadata.textContent);\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/metadata.js?");
 
 /***/ }),
 
@@ -532,11 +544,11 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /*!****************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/svg/settings.js ***!
   \****************************************************************/
-/*! exports provided: statuses, useSvgSettings, svgFromUrl */
+/*! exports provided: statuses, useSvgSettings */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"statuses\", function() { return statuses; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useSvgSettings\", function() { return useSvgSettings; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"svgFromUrl\", function() { return svgFromUrl; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _rcs_api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../rcs/api */ \"./src/rcs/api.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _utils_iconsLabels__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/iconsLabels */ \"./src/rce/plugins/instructure_icon_maker/utils/iconsLabels.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\nconst statuses = {\n  ERROR: 'error',\n  LOADING: 'loading',\n  IDLE: 'idle'\n};\n\nconst getImageNode = (editor, editing) => {\n  var _editor$selection;\n\n  // If the user is creating an icon rather then editing, no sense trying\n  // to get an existing SVG URL\n  if (!editing) return;\n  const selectedNode = editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getNode(); // No selection made, return\n\n  if (!selectedNode) return; // The icon maker image is selected. return it\n\n  if (selectedNode.getAttribute(_constants__WEBPACK_IMPORTED_MODULE_2__[\"ICON_MAKER_ATTRIBUTE\"])) return selectedNode; // The icon maker image element is not selected, but it's possible\n  // an element wrapping it is. Look for a icon maker image in the\n  // selection's children\n\n  const iconMaker = selectedNode.querySelector(`img[${_constants__WEBPACK_IMPORTED_MODULE_2__[\"ICON_MAKER_ATTRIBUTE\"]}=\"true\"]`); // Icon maker still not found in the selection's children. Return\n\n  if (!iconMaker) return; // Icon maker found in the selections children. Return it and set the\n  // editor's selection to it as well\n\n  editor.selection.select(iconMaker);\n  return iconMaker;\n};\n\nconst buildFilesUrl = (fileId, rcsConfig) => {\n  // http://canvas.docker/files/2169/download?download_frd=1&amp;icon_maker_icon=1\n  const downloadURL = new URL(`${rcsConfig.canvasUrl}/files/${fileId}/download`); // Adding the Course ID to the request causes Canvas to follow the chain\n  // of files that were uploaded and \"replaced\" previous versions of the file.\n\n  downloadURL.searchParams.append('replacement_chain_context_type', 'course');\n  downloadURL.searchParams.append('replacement_chain_context_id', rcsConfig.contextId); // Prevent the browser from using an old cached SVGs\n\n  downloadURL.searchParams.append('ts', Date.now()); // Yes, we want do download for real dude\n\n  downloadURL.searchParams.append('download_frd', 1);\n  return downloadURL.toString();\n};\n\nfunction useSvgSettings(editor, editing, rcsConfig) {\n  const [settings, dispatch] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useReducer\"])(_reducers_svgSettings__WEBPACK_IMPORTED_MODULE_1__[\"svgSettings\"], _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_1__[\"defaultState\"]);\n  const [status, setStatus] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(statuses.IDLE);\n  const imgNode = getImageNode(editor, editing);\n  const urlFromNode = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute(_constants__WEBPACK_IMPORTED_MODULE_2__[\"ICON_MAKER_DOWNLOAD_URL_ATTR\"]);\n  const altText = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('alt');\n  const customStyle = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('style');\n  const customWidth = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('width');\n  const customHeight = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('height');\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const fetchSvgSettings = async () => {\n      if (!urlFromNode) return;\n\n      try {\n        var _urlFromNode$split$, _svg$querySelector;\n\n        setStatus(statuses.LOADING); // Parse out the file ID from something like\n        // /courses/1/files/3/preview?...\n\n        const fileId = (_urlFromNode$split$ = urlFromNode.split('files/')[1]) === null || _urlFromNode$split$ === void 0 ? void 0 : _urlFromNode$split$.split('/')[0];\n        const downloadUrl = buildFilesUrl(fileId, rcsConfig); // Parse SVG. If no SVG found, return defaults\n\n        const svg = await svgFromUrl(downloadUrl);\n        if (!svg) return; // Parse metadata. If no metadata found, return defaults\n\n        const metadata = (_svg$querySelector = svg.querySelector('metadata')) === null || _svg$querySelector === void 0 ? void 0 : _svg$querySelector.innerHTML;\n        if (!metadata) return;\n        const rcs = new _rcs_api__WEBPACK_IMPORTED_MODULE_3__[\"default\"](rcsConfig);\n        const fileData = await rcs.getFile(fileId, {\n          replacement_chain_context_type: rcsConfig.contextType,\n          replacement_chain_context_id: rcsConfig.contextId\n        });\n        const fileName = fileData.name.replace(/\\.[^\\.]+$/, '');\n        const metadataJson = JSON.parse(metadata);\n        metadataJson.name = fileName;\n        metadataJson.originalName = fileName;\n\n        if (altText === '') {\n          metadataJson.isDecorative = true;\n        } else if (altText) {\n          metadataJson.alt = altText;\n        } // Include external details on metadata\n\n\n        if (customWidth && customHeight) {\n          metadataJson.externalWidth = customWidth;\n          metadataJson.externalHeight = customHeight;\n        }\n\n        if (customStyle) {\n          metadataJson.externalStyle = customStyle;\n        }\n\n        processMetadataForBackwardCompatibility(metadataJson); // settings found, return parsed results\n\n        dispatch(metadataJson);\n        setStatus(statuses.IDLE);\n      } catch (e) {\n        setStatus(statuses.ERROR);\n      }\n    }; // If we are editing rather than creating, fetch existing settings\n\n\n    if (editing) fetchSvgSettings();\n  }, [editor, editing, urlFromNode, rcsConfig, altText, customWidth, customHeight, customStyle]);\n  return [settings, status, dispatch];\n}\nasync function svgFromUrl(url) {\n  const response = await fetch(url);\n  const data = await response.text();\n  return new DOMParser().parseFromString(data, _constants__WEBPACK_IMPORTED_MODULE_2__[\"SVG_XML_TYPE\"]);\n}\n\nfunction processMetadataForBackwardCompatibility(metadataJson) {\n  var _metadataJson$imageSe, _metadataJson$imageSe2;\n\n  const icon = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe = metadataJson.imageSettings) === null || _metadataJson$imageSe === void 0 ? void 0 : _metadataJson$imageSe.icon;\n  const mode = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe2 = metadataJson.imageSettings) === null || _metadataJson$imageSe2 === void 0 ? void 0 : _metadataJson$imageSe2.mode;\n\n  if (mode === _reducers_imageSection__WEBPACK_IMPORTED_MODULE_4__[\"modes\"].singleColorImages.type && typeof icon === 'object') {\n    const foundIconId = _utils_iconsLabels__WEBPACK_IMPORTED_MODULE_5__[\"default\"][icon.label];\n\n    if (foundIconId) {\n      metadataJson.imageSettings.icon = foundIconId;\n    } else {\n      metadataJson.imageSettings = null;\n    }\n  }\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/settings.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"statuses\", function() { return statuses; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"useSvgSettings\", function() { return useSvgSettings; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../reducers/svgSettings */ \"./src/rce/plugins/instructure_icon_maker/reducers/svgSettings.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../reducers/imageSection */ \"./src/rce/plugins/instructure_icon_maker/reducers/imageSection.js\");\n/* harmony import */ var _utils_iconsLabels__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/iconsLabels */ \"./src/rce/plugins/instructure_icon_maker/utils/iconsLabels.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\nconst statuses = {\n  ERROR: 'error',\n  LOADING: 'loading',\n  IDLE: 'idle'\n};\n\nconst getImageNode = (editor, editing) => {\n  var _editor$selection;\n\n  // If the user is creating an icon rather then editing, no sense trying\n  // to get an existing SVG URL\n  if (!editing) return;\n  const selectedNode = editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getNode(); // No selection made, return\n\n  if (!selectedNode) return; // The icon maker image is selected. return it\n\n  if (selectedNode.getAttribute(_constants__WEBPACK_IMPORTED_MODULE_2__[\"ICON_MAKER_ATTRIBUTE\"])) return selectedNode; // The icon maker image element is not selected, but it's possible\n  // an element wrapping it is. Look for a icon maker image in the\n  // selection's children\n\n  const iconMaker = selectedNode.querySelector(`img[${_constants__WEBPACK_IMPORTED_MODULE_2__[\"ICON_MAKER_ATTRIBUTE\"]}=\"true\"]`); // Icon maker still not found in the selection's children. Return\n\n  if (!iconMaker) return; // Icon maker found in the selections children. Return it and set the\n  // editor's selection to it as well\n\n  editor.selection.select(iconMaker);\n  return iconMaker;\n};\n\nconst buildMetadataUrl = (fileId, rcsConfig) => {\n  // http://canvas.docker/api/v1/files/2169/icon_metadata\n  const downloadURL = new URL(`${rcsConfig.canvasUrl}/api/v1/files/${fileId}/icon_metadata`);\n  return downloadURL.toString();\n};\n\nfunction useSvgSettings(editor, editing, rcsConfig) {\n  const [settings, dispatch] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useReducer\"])(_reducers_svgSettings__WEBPACK_IMPORTED_MODULE_1__[\"svgSettings\"], _reducers_svgSettings__WEBPACK_IMPORTED_MODULE_1__[\"defaultState\"]);\n  const [status, setStatus] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(statuses.IDLE);\n  const imgNode = getImageNode(editor, editing);\n  const urlFromNode = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute(_constants__WEBPACK_IMPORTED_MODULE_2__[\"ICON_MAKER_DOWNLOAD_URL_ATTR\"]);\n  const altText = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('alt');\n  const customStyle = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('style');\n  const customWidth = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('width');\n  const customHeight = imgNode === null || imgNode === void 0 ? void 0 : imgNode.getAttribute('height');\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    const fetchSvgSettings = async () => {\n      if (!urlFromNode) return;\n\n      try {\n        var _urlFromNode$split$;\n\n        setStatus(statuses.LOADING); // Parse out the file ID from something like\n        // /courses/1/files/3/preview?...\n\n        const fileId = (_urlFromNode$split$ = urlFromNode.split('files/')[1]) === null || _urlFromNode$split$ === void 0 ? void 0 : _urlFromNode$split$.split('/')[0];\n        const downloadUrl = buildMetadataUrl(fileId, rcsConfig); // Download icon metadata. If no metadata found, return defaults\n\n        const response = await fetch(downloadUrl);\n        const metadata = await response.text();\n        if (!metadata) return;\n        const metadataJson = JSON.parse(metadata);\n        const fileName = metadataJson.name.replace(/\\.[^\\.]+$/, '');\n        metadataJson.name = fileName;\n        metadataJson.originalName = fileName;\n\n        if (altText === '') {\n          metadataJson.isDecorative = true;\n        } else if (altText) {\n          metadataJson.alt = altText;\n        } // Include external details on metadata\n\n\n        if (customWidth && customHeight) {\n          metadataJson.externalWidth = customWidth;\n          metadataJson.externalHeight = customHeight;\n        }\n\n        if (customStyle) {\n          metadataJson.externalStyle = customStyle;\n        }\n\n        processMetadataForBackwardCompatibility(metadataJson); // settings found, return parsed results\n\n        dispatch(metadataJson);\n        setStatus(statuses.IDLE);\n      } catch (e) {\n        setStatus(statuses.ERROR);\n      }\n    }; // If we are editing rather than creating, fetch existing settings\n\n\n    if (editing) fetchSvgSettings();\n  }, [editor, editing, urlFromNode, rcsConfig, altText, customWidth, customHeight, customStyle]);\n  return [settings, status, dispatch];\n}\n\nfunction processMetadataForBackwardCompatibility(metadataJson) {\n  var _metadataJson$imageSe, _metadataJson$imageSe2;\n\n  const icon = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe = metadataJson.imageSettings) === null || _metadataJson$imageSe === void 0 ? void 0 : _metadataJson$imageSe.icon;\n  const mode = metadataJson === null || metadataJson === void 0 ? void 0 : (_metadataJson$imageSe2 = metadataJson.imageSettings) === null || _metadataJson$imageSe2 === void 0 ? void 0 : _metadataJson$imageSe2.mode;\n\n  if (mode === _reducers_imageSection__WEBPACK_IMPORTED_MODULE_3__[\"modes\"].singleColorImages.type && typeof icon === 'object') {\n    const foundIconId = _utils_iconsLabels__WEBPACK_IMPORTED_MODULE_4__[\"default\"][icon.label];\n\n    if (foundIconId) {\n      metadataJson.imageSettings.icon = foundIconId;\n    } else {\n      metadataJson.imageSettings = null;\n    }\n  }\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/settings.js?");
 
 /***/ }),
 
@@ -560,7 +572,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildText\", function() { return buildText; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildTextBackground\", function() { return buildTextBackground; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getContainerWidth\", function() { return getContainerWidth; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getContainerHeight\", function() { return getContainerHeight; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _shape__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shape */ \"./src/rce/plugins/instructure_icon_maker/svg/shape.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\nfunction buildText(_ref) {\n  let {\n    text,\n    textPosition,\n    textSize,\n    textColor,\n    shape,\n    size\n  } = _ref;\n  if (!text.trim()) return null;\n  const textElement = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('text', {\n    x: Math.max(_constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"], Math.floor(getTextXValue(text, textSize, size))),\n    y: getTextYValue(textPosition, textSize, shape, size),\n    fill: textColor || '',\n    'font-family': 'Lato Extended',\n    'font-size': _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize],\n    'font-weight': 'bold'\n  });\n  const lines = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]);\n  const containerWidth = getContainerWidth({\n    text,\n    textSize,\n    size\n  });\n  lines.forEach((line, index) => {\n    const subtextWidth = getTextWidth(line, textSize);\n    const subtext = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('tspan', {\n      x: Math.max(_constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"], Math.floor((containerWidth - subtextWidth) * 0.5)),\n      dy: index === 0 ? 0 : _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize]\n    });\n    subtext.textContent = line;\n    textElement.appendChild(subtext);\n  });\n  return textElement;\n}\nfunction buildTextBackground(_ref2) {\n  let {\n    text,\n    textPosition,\n    textSize,\n    textBackgroundColor,\n    shape,\n    size\n  } = _ref2;\n  if (!text.trim()) return null;\n  const xValue = getTextXValue(text, textSize, size);\n  const yValue = getTextYValue(textPosition, textSize, shape, size);\n  const textWidth = getTextWidth(text, textSize);\n  const textHeight = getTextHeight(text, textSize);\n  const paddingSize = _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] * 2;\n  const pathElement = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('path');\n  const radius = 4;\n  const fontWeight = 2;\n  const initialX = Math.max(0, Math.floor(xValue - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"])) + radius;\n  const initialY = Math.floor(yValue - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize] - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] / 2);\n  const horizontalLineLength = Math.floor(textWidth + paddingSize + fontWeight) - radius * 2;\n  const verticalLineLength = Math.floor(textHeight + paddingSize + fontWeight) - radius * 2;\n  const d = `M${initialX},${initialY} h${horizontalLineLength} a${radius},${radius} 0 0 1 ${radius},${radius} v${verticalLineLength} a${radius},${radius} 0 0 1 ${-radius},${radius} h${-horizontalLineLength} a${radius},${radius} 0 0 1 ${-radius},${-radius} v${-verticalLineLength} a${radius},${radius} 0 0 1 ${radius},${-radius} z`;\n  pathElement.setAttribute('d', d);\n  pathElement.setAttribute('fill', textBackgroundColor || '');\n  return pathElement;\n}\nfunction getContainerWidth(_ref3) {\n  let {\n    text,\n    textSize,\n    size\n  } = _ref3;\n  const fontWeight = 2;\n  const base = _constants__WEBPACK_IMPORTED_MODULE_1__[\"BASE_SIZE\"][size];\n  const textWidth = Math.floor(getTextWidth(text, textSize)) + _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] * 2 + fontWeight;\n  return Math.max(base, textWidth);\n}\nfunction getContainerHeight(_ref4) {\n  let {\n    text,\n    textPosition,\n    textSize,\n    shape,\n    size\n  } = _ref4;\n  const base = _constants__WEBPACK_IMPORTED_MODULE_1__[\"BASE_SIZE\"][size];\n\n  if (!text || text.trim().length === 0) {\n    return base;\n  }\n\n  const textYValue = getTextYValue(textPosition, textSize, shape, size);\n  const extraTextHeight = getTextHeight(text, textSize) - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize];\n  const textBackgroundHeight = textYValue + extraTextHeight + _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] * 2;\n  return Math.max(base, textBackgroundHeight);\n}\n\nfunction getTextWidth(text, textSize) {\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  context.font = `${_constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize]}px \"Lato Extended\"`;\n  const lines = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]);\n  const widths = lines.map(line => context.measureText(line).width);\n  return Math.max(...widths);\n}\n\nfunction getTextHeight(text, textSize) {\n  const linesCount = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]).length;\n  return linesCount * _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize];\n}\n\nfunction getTextXValue(text, textSize, size) {\n  const containerWidth = getContainerWidth({\n    text,\n    textSize,\n    size\n  });\n  const textWidth = getTextWidth(text, textSize);\n  return Math.floor((containerWidth - textWidth) * 0.5);\n}\n\nfunction getTextYValue(textPosition, textSize, shape, size) {\n  switch (textPosition) {\n    case 'middle':\n      return getYMiddleText(textSize, shape, size);\n\n    case 'bottom-third':\n      return getYBottomThirdText(textSize, shape, size);\n\n    case 'below':\n      return getYBelowText(textSize, shape, size);\n\n    default:\n      throw new Error(`Invalid text position: ${textPosition}`);\n  }\n}\n\nfunction getYMiddleText(textSize, shape, size) {\n  switch (textSize) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return getYMiddleTextForShape(getYMiddleSmallTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return getYMiddleTextForShape(getYMiddleMediumTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return getYMiddleTextForShape(getYMiddleLargeTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraLarge:\n      return getYMiddleTextForShape(getYMiddleXLargeTextForShape, shape, size);\n\n    default:\n      throw new Error(`Invalid text size: ${textSize}`);\n  }\n}\n\nfunction getYBottomThirdText(textSize, shape, size) {\n  switch (textSize) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return getYMiddleTextForShape(getYBottomThirdSmallTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return getYMiddleTextForShape(getYBottomThirdMediumTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return getYMiddleTextForShape(getYBottomThirdLargeTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraLarge:\n      return getYMiddleTextForShape(getYBottomThirdXLargeTextForShape, shape, size);\n\n    default:\n      throw new Error(`Invalid text size: ${textSize}`);\n  }\n}\n\nfunction getYBelowText(textSize, shape, size) {\n  switch (textSize) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return getYMiddleTextForShape(getYBelowSmallTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return getYMiddleTextForShape(getYBelowMediumTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return getYMiddleTextForShape(getYBelowLargeTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraLarge:\n      return getYMiddleTextForShape(getYBelowXLargeTextForShape, shape, size);\n\n    default:\n      throw new Error(`Invalid text size: ${textSize}`);\n  }\n}\n\nfunction getYMiddleTextForShape(getYTextSizeCallback, shape, size) {\n  switch (shape) {\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Square:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Circle:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Triangle:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Diamond:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Pentagon:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Hexagon:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Octagon:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Star:\n      return getYTextSizeCallback(size);\n\n    default:\n      throw new Error(`Invalid shape: ${shape}`);\n  }\n}\n\nfunction getYMiddleSmallTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 44;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 68;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 86;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 116;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYMiddleMediumTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 45;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 69;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 87;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 117;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYMiddleLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 48;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 72;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 90;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 120;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYMiddleXLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 51;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 75;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 93;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 123;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdSmallTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 77;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 125;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 161;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 221;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdMediumTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 78;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 126;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 162;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 222;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 81;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 129;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 165;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 225;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdXLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 84;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 132;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 168;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 228;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowSmallTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 96;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 144;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 180;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 240;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowMediumTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 98;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 146;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 182;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 242;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 104;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 152;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 188;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 248;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowXLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 110;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 158;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 194;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 254;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/text.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildText\", function() { return buildText; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"buildTextBackground\", function() { return buildTextBackground; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getContainerWidth\", function() { return getContainerWidth; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getContainerHeight\", function() { return getContainerHeight; });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./src/rce/plugins/instructure_icon_maker/svg/utils.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./src/rce/plugins/instructure_icon_maker/svg/constants.js\");\n/* harmony import */ var _shape__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shape */ \"./src/rce/plugins/instructure_icon_maker/svg/shape.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\nfunction buildText(_ref) {\n  let {\n    text,\n    textPosition,\n    textSize,\n    textColor,\n    shape,\n    size\n  } = _ref;\n  if (!text.trim()) return null;\n  const lines = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]);\n  const textElement = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('text', {\n    x: Math.max(_constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"], Math.floor(getTextXValue(text, textSize, size))),\n    y: getTextYValue(textPosition, textSize, shape, size, lines.length),\n    fill: textColor || '',\n    'font-family': 'Lato Extended',\n    'font-size': _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize],\n    'font-weight': 'bold'\n  });\n  const containerWidth = getContainerWidth({\n    text,\n    textSize,\n    size\n  });\n  lines.forEach((line, index) => {\n    const subtextWidth = getTextWidth(line, textSize);\n    const subtext = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('tspan', {\n      x: Math.max(_constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"], Math.floor((containerWidth - subtextWidth) * 0.5)),\n      dy: index === 0 ? 0 : _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize]\n    });\n    subtext.textContent = line;\n    textElement.appendChild(subtext);\n  });\n  return textElement;\n}\nfunction buildTextBackground(_ref2) {\n  let {\n    text,\n    textPosition,\n    textSize,\n    textBackgroundColor,\n    shape,\n    size\n  } = _ref2;\n  if (!text.trim()) return null;\n  const linesCount = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]).length;\n  const xValue = getTextXValue(text, textSize, size);\n  const yValue = getTextYValue(textPosition, textSize, shape, size, linesCount);\n  const textWidth = getTextWidth(text, textSize); // An extra line is added due svg text baseline behavior the first line is not counted regularly.\n\n  const textHeight = getTextHeight(linesCount + 1, textSize);\n  const paddingSize = _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] * 2;\n  const pathElement = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"createSvgElement\"])('path');\n  const radius = 4;\n  const fontWeight = 2;\n  const initialX = Math.max(0, Math.floor(xValue - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"])) + radius;\n  const initialY = Math.floor(yValue - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize] + _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE_FONT_DIFF\"][textSize] - _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] / 2);\n  const horizontalLineLength = Math.floor(textWidth + paddingSize + fontWeight) - radius * 2;\n  const verticalLineLength = Math.floor(textHeight + paddingSize + fontWeight) - radius * 2;\n  const d = `M${initialX},${initialY} h${horizontalLineLength} a${radius},${radius} 0 0 1 ${radius},${radius} v${verticalLineLength} a${radius},${radius} 0 0 1 ${-radius},${radius} h${-horizontalLineLength} a${radius},${radius} 0 0 1 ${-radius},${-radius} v${-verticalLineLength} a${radius},${radius} 0 0 1 ${radius},${-radius} z`;\n  pathElement.setAttribute('d', d);\n  pathElement.setAttribute('fill', textBackgroundColor || '');\n  return pathElement;\n}\nfunction getContainerWidth(_ref3) {\n  let {\n    text,\n    textSize,\n    size\n  } = _ref3;\n  const fontWeight = 2;\n  const base = _constants__WEBPACK_IMPORTED_MODULE_1__[\"BASE_SIZE\"][size];\n  const textWidth = Math.floor(getTextWidth(text, textSize)) + _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] * 2 + fontWeight;\n  return Math.max(base, textWidth);\n}\nfunction getContainerHeight(_ref4) {\n  let {\n    text,\n    textPosition,\n    textSize,\n    shape,\n    size\n  } = _ref4;\n  const base = _constants__WEBPACK_IMPORTED_MODULE_1__[\"BASE_SIZE\"][size];\n\n  if (!text || text.trim().length === 0) {\n    return base;\n  }\n\n  const linesCount = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]).length;\n  const textYValue = getTextYValue(textPosition, textSize, shape, size, linesCount);\n  const textHeight = getTextHeight(linesCount, textSize);\n  const textBackgroundHeight = textYValue + textHeight + _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_BACKGROUND_PADDING\"] * 2;\n  return Math.max(base, textBackgroundHeight);\n}\n\nfunction getTextWidth(text, textSize) {\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  context.font = `${_constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize]}px \"Lato Extended\"`;\n  const lines = Object(_utils__WEBPACK_IMPORTED_MODULE_0__[\"splitTextIntoLines\"])(text, _constants__WEBPACK_IMPORTED_MODULE_1__[\"MAX_CHAR_COUNT\"][textSize]);\n  const widths = lines.map(line => context.measureText(line).width);\n  return Math.max(...widths);\n}\n\nfunction getTextHeight(linesCount, textSize) {\n  // Since the svg text's initial Y position starts on the bottom of the first line\n  // one line is subtracted to the count\n  return (linesCount - 1) * _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize];\n}\n\nfunction getTextXValue(text, textSize, size) {\n  const containerWidth = getContainerWidth({\n    text,\n    textSize,\n    size\n  });\n  const textWidth = getTextWidth(text, textSize);\n  return Math.floor((containerWidth - textWidth) * 0.5);\n}\n\nfunction getTextYValue(textPosition, textSize, shape, size, linesCount) {\n  switch (textPosition) {\n    case 'middle':\n      {\n        const baseline = getYMiddleText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered\n\n        const multilineDiff = (linesCount - 1) * _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize] / 2;\n        return baseline - multilineDiff;\n      }\n\n    case 'bottom-third':\n      {\n        const baseline = getYBottomThirdText(textSize, shape, size); // Represents the Y difference for multiline text to keep it vertically centered\n\n        const multilineDiff = (linesCount - 1) * _constants__WEBPACK_IMPORTED_MODULE_1__[\"TEXT_SIZE\"][textSize] / 2;\n        return baseline - multilineDiff;\n      }\n\n    case 'below':\n      return getYBelowText(textSize, shape, size);\n\n    default:\n      throw new Error(`Invalid text position: ${textPosition}`);\n  }\n}\n\nfunction getYMiddleText(textSize, shape, size) {\n  switch (textSize) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return getYMiddleTextForShape(getYMiddleSmallTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return getYMiddleTextForShape(getYMiddleMediumTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return getYMiddleTextForShape(getYMiddleLargeTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraLarge:\n      return getYMiddleTextForShape(getYMiddleXLargeTextForShape, shape, size);\n\n    default:\n      throw new Error(`Invalid text size: ${textSize}`);\n  }\n}\n\nfunction getYBottomThirdText(textSize, shape, size) {\n  switch (textSize) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return getYMiddleTextForShape(getYBottomThirdSmallTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return getYMiddleTextForShape(getYBottomThirdMediumTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return getYMiddleTextForShape(getYBottomThirdLargeTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraLarge:\n      return getYMiddleTextForShape(getYBottomThirdXLargeTextForShape, shape, size);\n\n    default:\n      throw new Error(`Invalid text size: ${textSize}`);\n  }\n}\n\nfunction getYBelowText(textSize, shape, size) {\n  switch (textSize) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return getYMiddleTextForShape(getYBelowSmallTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return getYMiddleTextForShape(getYBelowMediumTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return getYMiddleTextForShape(getYBelowLargeTextForShape, shape, size);\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraLarge:\n      return getYMiddleTextForShape(getYBelowXLargeTextForShape, shape, size);\n\n    default:\n      throw new Error(`Invalid text size: ${textSize}`);\n  }\n}\n\nfunction getYMiddleTextForShape(getYTextSizeCallback, shape, size) {\n  switch (shape) {\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Square:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Circle:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Triangle:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Diamond:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Pentagon:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Hexagon:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Octagon:\n    case _shape__WEBPACK_IMPORTED_MODULE_2__[\"Shape\"].Star:\n      return getYTextSizeCallback(size);\n\n    default:\n      throw new Error(`Invalid shape: ${shape}`);\n  }\n}\n\nfunction getYMiddleSmallTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 43;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 67;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 85;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 115;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYMiddleMediumTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 43;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 67;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 85;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 115;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYMiddleLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 45;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 69;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 87;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 117;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYMiddleXLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 47;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 71;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 89;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 119;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdSmallTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 73;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 121;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 157;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 217;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdMediumTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 74;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 122;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 158;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 218;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 75;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 123;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 159;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 219;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBottomThirdXLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 77;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 125;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 161;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 221;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowSmallTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 96;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 144;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 180;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 240;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowMediumTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 98;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 146;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 182;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 242;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 104;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 152;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 188;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 248;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\nfunction getYBelowXLargeTextForShape(size) {\n  switch (size) {\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].ExtraSmall:\n      return 110;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Small:\n      return 158;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Medium:\n      return 194;\n\n    case _constants__WEBPACK_IMPORTED_MODULE_1__[\"Size\"].Large:\n      return 254;\n\n    default:\n      throw new Error(`Invalid size: ${size}`);\n  }\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/text.js?");
 
 /***/ }),
 
@@ -572,19 +584,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createSvgElement\", function() { return createSvgElement; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"splitTextIntoLines\", function() { return splitTextIntoLines; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"convertFileToBase64\", function() { return convertFileToBase64; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"decode\", function() { return decode; });\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nfunction createSvgElement(tag) {\n  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);\n  Object.entries(attributes).forEach(_ref => {\n    let [attr, value] = _ref;\n    element.setAttribute(attr, value);\n  });\n  return element;\n}\nfunction splitTextIntoLines(text, maxChars) {\n  const trimmedText = text.trim();\n\n  if (!text || trimmedText.length === 0 || maxChars <= 0) {\n    return [];\n  }\n\n  const lines = [];\n  const words = trimmedText.split(' ');\n\n  while (words.length) {\n    let newLineNeeded = false;\n    let line = '';\n    let word;\n\n    while (!newLineNeeded && (word = words.shift())) {\n      word = word.trim();\n      const newLength = (line + word).length;\n\n      if (word.length >= maxChars + 1) {\n        // if a single word doesn't fit in a line\n        const start = word.substring(0, maxChars - 1);\n        const end = word.substring(maxChars - 1);\n        line += start + '-';\n        words.unshift(end);\n        newLineNeeded = line.length >= maxChars;\n      } else if (newLength) {\n        // if a new word can be added in current line\n        line += word.trim() + ' ';\n        newLineNeeded = line.length >= maxChars;\n      } else {\n        // if a new word can't be added in current line\n        newLineNeeded = true;\n      }\n    }\n\n    line = line.trim();\n    lines.push(line);\n  }\n\n  return lines;\n}\nconst convertFileToBase64 = blob => new Promise((resolve, reject) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(blob);\n\n  reader.onload = () => resolve(reader.result);\n\n  reader.onerror = error => reject(error);\n});\nconst decode = input => new DOMParser().parseFromString(input, 'text/html').documentElement.textContent;\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createSvgElement\", function() { return createSvgElement; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"splitTextIntoLines\", function() { return splitTextIntoLines; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"convertFileToBase64\", function() { return convertFileToBase64; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"decode\", function() { return decode; });\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nfunction createSvgElement(tag) {\n  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);\n  Object.entries(attributes).forEach(_ref => {\n    let [attr, value] = _ref;\n    element.setAttribute(attr, value);\n  });\n  return element;\n}\nfunction splitTextIntoLines(text, maxChars) {\n  // Removes the beginning or trailing spaces, newlines or tabs.\n  const trimmedText = text.replace(/^\\s+|\\s+$/g, '');\n\n  if (!text || trimmedText.length === 0 || maxChars <= 0) {\n    return [];\n  }\n\n  const lines = [];\n  const words = trimmedText.match(/\\S+/g);\n\n  while (words.length) {\n    let newLineNeeded = false;\n    let line = '';\n    let word;\n\n    while (!newLineNeeded && (word = words.shift())) {\n      word = word.trim();\n      const newLength = (line + word).length;\n\n      if (word.length >= maxChars + 1) {\n        // if a single word doesn't fit in a line\n        const start = word.substring(0, maxChars - 1);\n        const end = word.substring(maxChars - 1);\n        line += start + '-';\n        words.unshift(end);\n        newLineNeeded = line.length >= maxChars;\n      } else if (newLength) {\n        // if a new word can be added in current line\n        line += word.trim() + ' ';\n        newLineNeeded = line.length >= maxChars;\n      } else {\n        // if a new word can't be added in current line\n        newLineNeeded = true;\n      }\n    }\n\n    line = line.trim();\n    lines.push(line);\n  }\n\n  return lines;\n}\nconst convertFileToBase64 = blob => new Promise((resolve, reject) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(blob);\n\n  reader.onload = () => resolve(reader.result);\n\n  reader.onerror = error => reject(error);\n});\nconst decode = input => new DOMParser().parseFromString(input, 'text/html').documentElement.textContent;\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/svg/utils.js?");
 
 /***/ }),
 
-/***/ "./src/rce/plugins/instructure_icon_maker/utils/iconMakerFormHasChanges.js":
+/***/ "./src/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.ts":
 /*!*********************************************************************************!*\
-  !*** ./src/rce/plugins/instructure_icon_maker/utils/iconMakerFormHasChanges.js ***!
+  !*** ./src/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.ts ***!
   \*********************************************************************************/
-/*! exports provided: hasNameChange, hasAltChange, hasShapeNameChange, hasShapeSizeChange, hasColorNameChange, hasOutlineSizeChange, hasOutlineColorChange, hasTextChange, hasTextSizeChange, hasTextColorChange, hasTextBackgroundColorChange, hasTextPositionChange, hasImageSettingsChange, hasChanges */
+/*! exports provided: IconMakerFormHasChanges */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasNameChange\", function() { return hasNameChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasAltChange\", function() { return hasAltChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasShapeNameChange\", function() { return hasShapeNameChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasShapeSizeChange\", function() { return hasShapeSizeChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasColorNameChange\", function() { return hasColorNameChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasOutlineSizeChange\", function() { return hasOutlineSizeChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasOutlineColorChange\", function() { return hasOutlineColorChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasTextChange\", function() { return hasTextChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasTextSizeChange\", function() { return hasTextSizeChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasTextColorChange\", function() { return hasTextColorChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasTextBackgroundColorChange\", function() { return hasTextBackgroundColorChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasTextPositionChange\", function() { return hasTextPositionChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasImageSettingsChange\", function() { return hasImageSettingsChange; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hasChanges\", function() { return hasChanges; });\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ \"../../node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nconst hasNameChange = (initialSettings, currentSettings) => {\n  return 'name' in currentSettings && initialSettings.name !== currentSettings.name;\n};\nconst hasAltChange = (initialSettings, currentSettings) => {\n  return 'alt' in currentSettings && initialSettings.alt !== currentSettings.alt;\n};\nconst hasShapeNameChange = (initialSettings, currentSettings) => {\n  return 'shape' in currentSettings && initialSettings.shape !== currentSettings.shape;\n};\nconst hasShapeSizeChange = (initialSettings, currentSettings) => {\n  return 'size' in currentSettings && initialSettings.size !== currentSettings.size;\n};\nconst hasColorNameChange = (initialSettings, currentSettings) => {\n  return 'color' in currentSettings && initialSettings.color !== currentSettings.color;\n};\nconst hasOutlineSizeChange = (initialSettings, currentSettings) => {\n  return 'outlineSize' in currentSettings && initialSettings.outlineSize !== currentSettings.outlineSize;\n};\nconst hasOutlineColorChange = (initialSettings, currentSettings) => {\n  return 'outlineColor' in currentSettings && initialSettings.outlineColor !== currentSettings.outlineColor;\n};\nconst hasTextChange = (initialSettings, currentSettings) => {\n  return 'text' in currentSettings && initialSettings.text !== currentSettings.text;\n};\nconst hasTextSizeChange = (initialSettings, currentSettings) => {\n  return 'textSize' in currentSettings && initialSettings.textSize !== currentSettings.textSize;\n};\nconst hasTextColorChange = (initialSettings, currentSettings) => {\n  return 'textColor' in currentSettings && initialSettings.textColor !== currentSettings.textColor;\n};\nconst hasTextBackgroundColorChange = (initialSettings, currentSettings) => {\n  return 'textBackgroundColor' in currentSettings && initialSettings.textBackgroundColor !== currentSettings.textBackgroundColor;\n};\nconst hasTextPositionChange = (initialSettings, currentSettings) => {\n  return 'textPosition' in currentSettings && initialSettings.textPosition !== currentSettings.textPosition;\n};\nconst hasImageSettingsChange = (initialSettings, currentSettings) => {\n  return 'imageSettings' in currentSettings && lodash__WEBPACK_IMPORTED_MODULE_0___default.a.isEqual(initialSettings.imageSettings, currentSettings.imageSettings) === false;\n};\nconst hasChanges = (initialSettings, currentSettings) => {\n  return [hasNameChange, hasAltChange, hasShapeNameChange, hasShapeSizeChange, hasColorNameChange, hasOutlineColorChange, hasOutlineSizeChange, hasTextChange, hasTextSizeChange, hasTextColorChange, hasTextBackgroundColorChange, hasTextPositionChange, hasImageSettingsChange].some(func => func(initialSettings, currentSettings));\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/utils/iconMakerFormHasChanges.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"IconMakerFormHasChanges\", function() { return IconMakerFormHasChanges; });\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ \"../../node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nclass IconMakerFormHasChanges {\n  constructor(initSettings, currSettings) {\n    this.initialSettings = void 0;\n    this.currentSettings = void 0;\n    this.initialSettings = initSettings;\n    this.currentSettings = currSettings;\n  }\n\n  hasNameChange() {\n    return 'name' in this.currentSettings && this.initialSettings.name !== this.currentSettings.name;\n  }\n\n  hasAltChange() {\n    return 'alt' in this.currentSettings && this.initialSettings.alt !== this.currentSettings.alt;\n  }\n\n  hasShapeNameChange() {\n    return 'shape' in this.currentSettings && this.initialSettings.shape !== this.currentSettings.shape;\n  }\n\n  hasShapeSizeChange() {\n    return 'size' in this.currentSettings && this.initialSettings.size !== this.currentSettings.size;\n  }\n\n  hasColorNameChange() {\n    return 'color' in this.currentSettings && this.initialSettings.color !== this.currentSettings.color;\n  }\n\n  hasOutlineSizeChange() {\n    return 'outlineSize' in this.currentSettings && this.initialSettings.outlineSize !== this.currentSettings.outlineSize;\n  }\n\n  hasOutlineColorChange() {\n    return 'outlineColor' in this.currentSettings && this.initialSettings.outlineColor !== this.currentSettings.outlineColor;\n  }\n\n  hasTextChange() {\n    return 'text' in this.currentSettings && this.initialSettings.text !== this.currentSettings.text;\n  }\n\n  hasTextSizeChange() {\n    return 'textSize' in this.currentSettings && this.initialSettings.textSize !== this.currentSettings.textSize;\n  }\n\n  hasTextColorChange() {\n    return 'textColor' in this.currentSettings && this.initialSettings.textColor !== this.currentSettings.textColor;\n  }\n\n  hasTextBackgroundColorChange() {\n    return 'textBackgroundColor' in this.currentSettings && this.initialSettings.textBackgroundColor !== this.currentSettings.textBackgroundColor;\n  }\n\n  hasTextPositionChange() {\n    return 'textPosition' in this.currentSettings && this.initialSettings.textPosition !== this.currentSettings.textPosition;\n  }\n\n  hasImageSettingsChange() {\n    return 'imageSettings' in this.currentSettings && !lodash__WEBPACK_IMPORTED_MODULE_0___default.a.isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);\n  }\n\n  hasChanges() {\n    return this.hasNameChange() || this.hasAltChange() || this.hasShapeNameChange() || this.hasShapeSizeChange() || this.hasColorNameChange() || this.hasOutlineColorChange() || this.hasOutlineSizeChange() || this.hasTextChange() || this.hasTextSizeChange() || this.hasTextColorChange() || this.hasTextBackgroundColorChange() || this.hasTextPositionChange() || this.hasImageSettingsChange();\n  }\n\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.ts?");
 
 /***/ }),
 
@@ -612,6 +624,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/*\n * Copyright (C) 2022 - p
 
 /***/ }),
 
+/***/ "./src/rce/plugins/instructure_icon_maker/utils/round.js":
+/*!***************************************************************!*\
+  !*** ./src/rce/plugins/instructure_icon_maker/utils/round.js ***!
+  \***************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return round; });\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nfunction round(number) {\n  let decimalDigits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n  if (decimalDigits < 0) throw new Error('decimal digits must be >= 0');\n  if (decimalDigits % 1 !== 0) throw new Error('decimal digits must be a whole number');\n  const val = Math.round(number * 10 ** decimalDigits) / 10 ** decimalDigits;\n  if (Number.isNaN(val)) throw new Error('the first arguments must be a number');\n  return val === 0 ? 0 : val; // prevent round(-0) from returning -0\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/utils/round.js?");
+
+/***/ }),
+
 /***/ "./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js":
 /*!***************************************************************************!*\
   !*** ./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js ***!
@@ -620,7 +644,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/*\n * Copyright (C) 2022 - p
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return useDebouncedValue; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/debounce */ \"./node_modules/@instructure/debounce/es/index.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\nfunction useDebouncedValue(currentValue, onChange) {\n  const [immediateValue, setImmediateValue] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(currentValue); // The hook may have initially been called with currentValue\n  // being set to an empty value.\n  //\n  // If so we need to make sure to re-set the immediate value\n  // once a truthy value is given\n\n  if (!immediateValue && !!currentValue) {\n    setImmediateValue(currentValue);\n  }\n\n  const handleValueChange = event => {\n    const {\n      value\n    } = event.target; // Immediately set local state for low-latency feedback\n\n    setImmediateValue(value);\n\n    if (!value) {\n      // The user may have done ctrl+a, backspace.\n      // Clear the value immediately to allow this\n      // action to clear the input\n      onChange(value);\n    } else {\n      // Debounce the call to set state that may cause many\n      // re-renders down the component tree\n      Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_1__[\"debounce\"])(val => {\n        onChange(val);\n      }, 500)(value);\n    }\n  };\n\n  return [immediateValue, handleValueChange, setImmediateValue];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return useDebouncedValue; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/debounce */ \"../../node_modules/@instructure/debounce/es/index.js\");\n/*\n * Copyright (C) 2022 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\nfunction useDebouncedValue(currentValue, onChange) {\n  const [immediateValue, setImmediateValue] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(currentValue); // The hook may have initially been called with currentValue\n  // being set to an empty value.\n  //\n  // If so we need to make sure to re-set the immediate value\n  // once a truthy value is given\n\n  if (!immediateValue && !!currentValue) {\n    setImmediateValue(currentValue);\n  }\n\n  const handleValueChange = event => {\n    const {\n      value\n    } = event.target; // Immediately set local state for low-latency feedback\n\n    setImmediateValue(value);\n\n    if (!value) {\n      // The user may have done ctrl+a, backspace.\n      // Clear the value immediately to allow this\n      // action to clear the input\n      onChange(value);\n    } else {\n      // Debounce the call to set state that may cause many\n      // re-renders down the component tree\n      Object(_instructure_debounce__WEBPACK_IMPORTED_MODULE_1__[\"debounce\"])(val => {\n        onChange(val);\n      }, 500)(value);\n    }\n  };\n\n  return [immediateValue, handleValueChange, setImmediateValue];\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_icon_maker/utils/useDebouncedValue.js?");
 
 /***/ }),
 
@@ -632,7 +656,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Image; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_img__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-img */ \"../../node_modules/@instructure/ui-img/es/index.js\");\n/* harmony import */ var _instructure_ui_link__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-link */ \"../../node_modules/@instructure/ui-link/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-truncate-text */ \"../../node_modules/@instructure/ui-truncate-text/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _sidebar_dragHtml__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sidebar/dragHtml */ \"./src/sidebar/dragHtml.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _contentRendering__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../contentRendering */ \"./src/rce/contentRendering.js\");\n/*\n * Copyright (C) 2019 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\nfunction Image(_ref) {\n  let {\n    focusRef,\n    image,\n    onClick\n  } = _ref;\n  const imgTitle = Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Click to embed {imageName}', {\n    imageName: image.display_name\n  });\n\n  function handleDragStart(event) {\n    Object(_sidebar_dragHtml__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(event, Object(_contentRendering__WEBPACK_IMPORTED_MODULE_9__[\"renderImage\"])(image));\n  }\n\n  function handleDragEnd() {\n    document.body.click();\n  }\n\n  function handleImageClick(event) {\n    event.preventDefault();\n    onClick(image);\n  }\n\n  let elementRef = null;\n\n  if (focusRef) {\n    elementRef = ref => {\n      focusRef.current = ref;\n    };\n  }\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_link__WEBPACK_IMPORTED_MODULE_3__[\"Link\"], {\n    draggable: false,\n    elementRef: elementRef,\n    onClick: handleImageClick,\n    onDragStart: handleDragStart\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__[\"View\"], {\n    as: \"div\",\n    borderRadius: \"medium\",\n    margin: \"none none small none\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_img__WEBPACK_IMPORTED_MODULE_2__[\"Img\"], {\n    alt: image.display_name,\n    constrain: \"cover\",\n    draggable: true,\n    height: \"6rem\",\n    inline: false,\n    onDragStart: handleDragStart,\n    onDragEnd: handleDragEnd,\n    src: image.thumbnail_url,\n    title: imgTitle,\n    width: \"6rem\"\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_5__[\"TruncateText\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_4__[\"Text\"], {\n    size: \"small\"\n  }, image.display_name)));\n}\nImage.propTypes = {\n  focusRef: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    current: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"instanceOf\"])(Element)\n  }),\n  image: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    display_name: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired,\n    filename: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n    href: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired,\n    id: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"number\"],\n    preview_url: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n    thumbnail_url: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired\n  }).isRequired,\n  onClick: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired\n};\nImage.defaultProps = {\n  focusRef: null\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_image/ImageList/Image.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Image; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_img__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-img */ \"../../node_modules/@instructure/ui-img/es/index.js\");\n/* harmony import */ var _instructure_ui_link__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-link */ \"../../node_modules/@instructure/ui-link/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-truncate-text */ \"../../node_modules/@instructure/ui-truncate-text/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _sidebar_dragHtml__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sidebar/dragHtml */ \"./src/sidebar/dragHtml.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/* harmony import */ var _contentRendering__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../contentRendering */ \"./src/rce/contentRendering.js\");\n/*\n * Copyright (C) 2019 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\nfunction Image(_ref) {\n  let {\n    focusRef,\n    image,\n    onClick\n  } = _ref;\n  const imgTitle = Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Click to embed {imageName}', {\n    imageName: image.display_name\n  });\n\n  function handleDragStart(event) {\n    Object(_sidebar_dragHtml__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(event, Object(_contentRendering__WEBPACK_IMPORTED_MODULE_9__[\"renderImage\"])(image));\n  }\n\n  function handleDragEnd() {\n    document.body.click();\n  }\n\n  function handleImageClick(event) {\n    event.preventDefault();\n    onClick(image);\n  }\n\n  let elementRef = null;\n\n  if (focusRef) {\n    elementRef = ref => {\n      focusRef.current = ref;\n    };\n  }\n\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_link__WEBPACK_IMPORTED_MODULE_3__[\"Link\"], {\n    draggable: false,\n    elementRef: elementRef,\n    onClick: handleImageClick,\n    onDragStart: handleDragStart\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_6__[\"View\"], {\n    as: \"div\",\n    borderRadius: \"medium\",\n    margin: \"none none small none\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_img__WEBPACK_IMPORTED_MODULE_2__[\"Img\"], {\n    alt: image.display_name,\n    constrain: \"cover\",\n    draggable: true,\n    height: \"6rem\",\n    display: \"block\",\n    onDragStart: handleDragStart,\n    onDragEnd: handleDragEnd,\n    src: image.thumbnail_url,\n    title: imgTitle,\n    width: \"6rem\"\n  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_truncate_text__WEBPACK_IMPORTED_MODULE_5__[\"TruncateText\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_4__[\"Text\"], {\n    size: \"small\"\n  }, image.display_name)));\n}\nImage.propTypes = {\n  focusRef: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    current: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"instanceOf\"])(Element)\n  }),\n  image: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    display_name: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired,\n    filename: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n    href: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired,\n    id: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"number\"],\n    preview_url: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n    thumbnail_url: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired\n  }).isRequired,\n  onClick: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired\n};\nImage.defaultProps = {\n  focusRef: null\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_image/ImageList/Image.js?");
 
 /***/ }),
 
@@ -644,7 +668,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ImageList; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Image */ \"./src/rce/plugins/instructure_image/ImageList/Image.js\");\n/*\n * Copyright (C) 2019 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\nfunction ImageList(_ref) {\n  let {\n    images,\n    lastItemRef,\n    onImageClick\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"], {\n    justifyItems: \"start\",\n    height: \"100%\",\n    margin: \"xx-small\",\n    padding: \"small\",\n    wrapItems: true\n  }, images.map((image, index) => {\n    let focusRef = null;\n\n    if (index === images.length - 1) {\n      focusRef = lastItemRef;\n    }\n\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"].Item, {\n      as: \"div\",\n      key: 'image-' + image.id,\n      margin: \"xx-small xx-small small xx-small\",\n      size: \"6rem\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Image__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      focusRef: focusRef,\n      image: image,\n      onClick: onImageClick\n    }));\n  }));\n}\nImageList.propTypes = {\n  images: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"arrayOf\"])(_Image__WEBPACK_IMPORTED_MODULE_3__[\"default\"].propTypes.image),\n  lastItemRef: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    current: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"instanceOf\"])(Element)\n  }).isRequired,\n  onImageClick: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired\n};\nImageList.defaultProps = {\n  images: []\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_image/ImageList/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ImageList; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Image */ \"./src/rce/plugins/instructure_image/ImageList/Image.js\");\n/*\n * Copyright (C) 2019 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\nfunction ImageList(_ref) {\n  let {\n    images,\n    lastItemRef,\n    onImageClick\n  } = _ref;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"], {\n    justifyItems: \"start\",\n    height: \"100%\",\n    margin: \"xx-small\",\n    padding: \"small\",\n    wrap: \"wrap\"\n  }, images.map((image, index) => {\n    let focusRef = null;\n\n    if (index === images.length - 1) {\n      focusRef = lastItemRef;\n    }\n\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"].Item, {\n      as: \"div\",\n      key: 'image-' + image.id,\n      margin: \"xx-small xx-small small xx-small\",\n      size: \"6rem\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Image__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      focusRef: focusRef,\n      image: image,\n      onClick: onImageClick\n    }));\n  }));\n}\nImageList.propTypes = {\n  images: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"arrayOf\"])(_Image__WEBPACK_IMPORTED_MODULE_3__[\"default\"].propTypes.image),\n  lastItemRef: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    current: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"instanceOf\"])(Element)\n  }).isRequired,\n  onImageClick: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired\n};\nImageList.defaultProps = {\n  images: []\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_image/ImageList/index.js?");
 
 /***/ }),
 
@@ -656,7 +680,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Images; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _shared_fileShape__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../shared/fileShape */ \"./src/rce/plugins/shared/fileShape.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../common/incremental-loading */ \"./src/common/incremental-loading/index.js\");\n/* harmony import */ var _ImageList__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../ImageList */ \"./src/rce/plugins/instructure_image/ImageList/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2019 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\nfunction Images(props) {\n  const {\n    fetchInitialImages,\n    fetchNextImages,\n    contextType,\n    sortBy,\n    searchString\n  } = props;\n  const images = props.images[contextType];\n  const {\n    hasMore,\n    isLoading,\n    error,\n    files\n  } = images;\n  const lastItemRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n  const loader = Object(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"useIncrementalLoading\"])({\n    hasMore,\n    isLoading,\n    lastItemRef,\n    onLoadInitial: fetchInitialImages,\n    onLoadMore: fetchNextImages,\n    records: files,\n    contextType,\n    sortBy,\n    searchString\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__[\"View\"], {\n    as: \"div\",\n    \"data-testid\": \"instructure_links-ImagesPanel\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"], {\n    alignItems: \"center\",\n    direction: \"column\",\n    justifyItems: \"space-between\",\n    height: \"100%\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    overflowY: \"visible\",\n    width: \"100%\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ImageList__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    images: files,\n    lastItemRef: lastItemRef,\n    onImageClick: props.onImageEmbed\n  })), loader.isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    as: \"div\",\n    grow: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"LoadingIndicator\"], {\n    loader: loader\n  })), !loader.isLoading && loader.hasMore && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    as: \"div\",\n    margin: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"LoadMoreButton\"], {\n    loader: loader\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"LoadingStatus\"], {\n    loader: loader\n  }), error && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__[\"View\"], {\n    as: \"div\",\n    role: \"alert\",\n    margin: \"medium\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_5__[\"Text\"], {\n    color: \"danger\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Loading failed.'))));\n}\nImages.propTypes = {\n  fetchInitialImages: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired,\n  fetchNextImages: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired,\n  contextType: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired,\n  images: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"objectOf\"])(Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    files: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"arrayOf\"])(Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])(_shared_fileShape__WEBPACK_IMPORTED_MODULE_2__[\"fileShape\"])).isRequired,\n    bookmark: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n    hasMore: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"bool\"].isRequired,\n    isLoading: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"bool\"].isRequired,\n    error: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"]\n  })).isRequired,\n  sortBy: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    sort: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"oneOf\"])(['date_added', 'alphabetical']).isRequired,\n    order: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"oneOf\"])(['asc', 'desc']).isRequired\n  }),\n  searchString: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n  onImageEmbed: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_image/Images/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Images; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ \"../../node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _shared_fileShape__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../shared/fileShape */ \"./src/rce/plugins/shared/fileShape.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-text */ \"../../node_modules/@instructure/ui-text/es/index.js\");\n/* harmony import */ var _common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../common/incremental-loading */ \"./src/common/incremental-loading/index.js\");\n/* harmony import */ var _ImageList__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../ImageList */ \"./src/rce/plugins/instructure_image/ImageList/index.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2019 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\nfunction Images(props) {\n  const {\n    fetchInitialImages,\n    fetchNextImages,\n    contextType,\n    sortBy,\n    searchString\n  } = props;\n  const images = props.images[contextType];\n  const {\n    hasMore,\n    isLoading,\n    error,\n    files\n  } = images;\n  const lastItemRef = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n  const loader = Object(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"useIncrementalLoading\"])({\n    hasMore,\n    isLoading,\n    lastItemRef,\n    onLoadInitial: fetchInitialImages,\n    onLoadMore: fetchNextImages,\n    records: files,\n    contextType,\n    sortBy,\n    searchString\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__[\"View\"], {\n    as: \"div\",\n    \"data-testid\": \"instructure_links-ImagesPanel\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"], {\n    alignItems: \"center\",\n    direction: \"column\",\n    justifyItems: \"space-between\",\n    height: \"100%\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    overflowY: \"visible\",\n    width: \"100%\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_ImageList__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    images: files,\n    lastItemRef: lastItemRef,\n    onImageClick: props.onImageEmbed\n  })), loader.isLoading && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    as: \"div\",\n    shouldGrow: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"LoadingIndicator\"], {\n    loader: loader\n  })), !loader.isLoading && loader.hasMore && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_3__[\"Flex\"].Item, {\n    as: \"div\",\n    margin: \"small\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"LoadMoreButton\"], {\n    loader: loader\n  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_common_incremental_loading__WEBPACK_IMPORTED_MODULE_6__[\"LoadingStatus\"], {\n    loader: loader\n  }), error && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_4__[\"View\"], {\n    as: \"div\",\n    role: \"alert\",\n    margin: \"medium\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text__WEBPACK_IMPORTED_MODULE_5__[\"Text\"], {\n    color: \"danger\"\n  }, Object(_format_message__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('Loading failed.'))));\n}\nImages.propTypes = {\n  fetchInitialImages: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired,\n  fetchNextImages: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired,\n  contextType: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"].isRequired,\n  images: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"objectOf\"])(Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    files: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"arrayOf\"])(Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])(_shared_fileShape__WEBPACK_IMPORTED_MODULE_2__[\"fileShape\"])).isRequired,\n    bookmark: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n    hasMore: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"bool\"].isRequired,\n    isLoading: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"bool\"].isRequired,\n    error: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"]\n  })).isRequired,\n  sortBy: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"shape\"])({\n    sort: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"oneOf\"])(['date_added', 'alphabetical']).isRequired,\n    order: Object(prop_types__WEBPACK_IMPORTED_MODULE_1__[\"oneOf\"])(['asc', 'desc']).isRequired\n  }),\n  searchString: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"string\"],\n  onImageEmbed: prop_types__WEBPACK_IMPORTED_MODULE_1__[\"func\"].isRequired\n};\n\n//# sourceURL=webpack:///./src/rce/plugins/instructure_image/Images/index.js?");
 
 /***/ }),
 
@@ -680,7 +704,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/*\n * Copyright (C) 2022 - p
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ColorInput\", function() { return ColorInput; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-text-input */ \"../../node_modules/@instructure/ui-text-input/es/index.js\");\n/* harmony import */ var _instructure_ui_popover__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-popover */ \"../../node_modules/@instructure/ui-popover/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-a11y-content */ \"../../node_modules/@instructure/ui-a11y-content/es/index.js\");\n/* harmony import */ var _PreviewIcon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./PreviewIcon */ \"./src/rce/plugins/shared/PreviewIcon.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\nconst NAMED_COLORS = [{\n  color: '#BD3C14',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Brick')\n}, {\n  color: '#FF2717',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Red')\n}, {\n  color: '#E71F63',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Magenta')\n}, {\n  color: '#8F3E97',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Purple')\n}, {\n  color: '#65499D',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Deep Purple')\n}, {\n  color: '#4554A4',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Indigo')\n}, {\n  color: '#1770AB',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Blue')\n}, {\n  color: '#0B9BE3',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Light Blue')\n}, {\n  color: '#06A3B7',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Cyan')\n}, {\n  color: '#009688',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Teal')\n}, {\n  color: '#009606',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Green')\n}, {\n  color: '#8D9900',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Olive')\n}, {\n  color: '#D97900',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Pumpkin')\n}, {\n  color: '#FD5D10',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Orange')\n}, {\n  color: '#F06291',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Pink')\n}, {\n  color: '#000000',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Black')\n}, {\n  color: '#556572',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Steel Blue')\n}, {\n  color: '#6B7780',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Grey')\n}, {\n  color: '#FFFFFF',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('White')\n}, null];\nconst ColorInput = _ref => {\n  var _NAMED_COLORS$find;\n\n  let {\n    color,\n    label,\n    name,\n    onChange,\n    popoverMountNode,\n    width = '11rem',\n    readonly = false,\n    requireColor = false\n  } = _ref;\n  const [isOpen, setIsOpen] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const [inputValue, setInputValue] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(color);\n  const colorName = (_NAMED_COLORS$find = NAMED_COLORS.find(c => (c === null || c === void 0 ? void 0 : c.color) === color)) === null || _NAMED_COLORS$find === void 0 ? void 0 : _NAMED_COLORS$find.name;\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    setInputValue(color);\n  }, [color]); // fire onChange in case value is valid\n\n  const handleColorChange = hex => {\n    if (isValidHex(hex)) {\n      onChange(hex);\n    }\n\n    if (!hex || !hex.length) {\n      onChange(null);\n    }\n\n    setInputValue(hex);\n  }; // reset the input value on blur if invalid\n\n\n  const handleInputBlur = () => {\n    if (!inputValue || inputValue.length > 0 && !isValidHex(inputValue)) {\n      setInputValue(color);\n    }\n  };\n\n  const colorPreviews = NAMED_COLORS.map(c => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ColorPreview, {\n    key: `${name}-${c === null || c === void 0 ? void 0 : c.color}`,\n    color: c === null || c === void 0 ? void 0 : c.color,\n    name: c === null || c === void 0 ? void 0 : c.name,\n    disabled: !isOpen,\n    onSelect: () => {\n      handleColorChange(c === null || c === void 0 ? void 0 : c.color);\n      setIsOpen(false);\n    }\n  }));\n\n  function renderPopover() {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_popover__WEBPACK_IMPORTED_MODULE_4__[\"Popover\"], {\n      on: \"click\",\n      isShowingContent: isOpen,\n      onShowContent: () => setIsOpen(true),\n      onHideContent: () => setIsOpen(false),\n      shouldContainFocus: true,\n      shouldReturnFocus: true,\n      mountNode: popoverMountNode,\n      renderTrigger: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__[\"IconButton\"], {\n        screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('View predefined colors'),\n        size: \"small\",\n        withBackground: false,\n        withBorder: false,\n        interaction: \"enabled\",\n        \"data-testid\": `${name}-popover-trigger`\n      }, isOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconArrowOpenUpLine\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconArrowOpenDownLine\"], null))\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__[\"CloseButton\"], {\n      placement: \"end\",\n      onClick: () => setIsOpen(false)\n    }, Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Close')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"], {\n      alignItems: \"center\",\n      as: \"div\",\n      justifyItems: requireColor ? 'start' : 'center',\n      padding: \"x-large x-small small\",\n      width: \"175px\",\n      wrapItems: true,\n      \"data-testid\": `${name}-popover`\n    }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));\n  }\n\n  const pickerLabel = colorName ? Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Color Picker ({colorName} selected)', {\n    colorName\n  }) : Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Color Picker');\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_1__[\"View\"], {\n    as: \"div\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_3__[\"TextInput\"], {\n    \"data-testid\": `icon-maker-color-input-${name}`,\n    display: \"inline-block\",\n    name: name,\n    onBlur: handleInputBlur,\n    onChange: (e, value) => handleColorChange(value),\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('None'),\n    renderBeforeInput: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ColorPreview, {\n      color: color,\n      disabled: true,\n      margin: \"0\"\n    }),\n    renderAfterInput: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n      \"aria-label\": pickerLabel\n    }, renderPopover()),\n    renderLabel: label,\n    shouldNotWrap: true,\n    value: inputValue || '',\n    width: width,\n    interaction: readonly ? 'readonly' : undefined\n  }));\n};\n\nfunction ColorPreview(_ref2) {\n  let {\n    color,\n    name,\n    disabled,\n    margin = 'xxx-small',\n    onSelect\n  } = _ref2;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__[\"BaseButton\"], {\n    interaction: disabled ? 'readonly' : undefined,\n    isCondensed: true,\n    margin: margin,\n    onClick: onSelect,\n    size: \"small\",\n    withBackground: false,\n    withBorder: false,\n    \"aria-hidden\": disabled\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__[\"ScreenReaderContent\"], null, color ? Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('{name} ({color})', {\n    name,\n    color\n  }) : Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('None')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_PreviewIcon__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    color: color,\n    testId: `colorPreview-${color || 'none'}`\n  }));\n}\n\nfunction isValidHex(color) {\n  if (!color) return false;\n\n  switch (color.length) {\n    case 4:\n      return /^#[0-9A-F]{3}$/i.test(color);\n\n    case 7:\n      return /^#[0-9A-F]{6}$/i.test(color);\n\n    default:\n      return false;\n  }\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/shared/ColorInput.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ColorInput\", function() { return ColorInput; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _instructure_ui_view__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @instructure/ui-view */ \"../../node_modules/@instructure/ui-view/es/index.js\");\n/* harmony import */ var _instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @instructure/ui-flex */ \"../../node_modules/@instructure/ui-flex/es/index.js\");\n/* harmony import */ var _instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @instructure/ui-text-input */ \"../../node_modules/@instructure/ui-text-input/es/index.js\");\n/* harmony import */ var _instructure_ui_popover__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @instructure/ui-popover */ \"../../node_modules/@instructure/ui-popover/es/index.js\");\n/* harmony import */ var _instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @instructure/ui-icons */ \"../../node_modules/@instructure/ui-icons/es/index.js\");\n/* harmony import */ var _instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @instructure/ui-buttons */ \"../../node_modules/@instructure/ui-buttons/es/index.js\");\n/* harmony import */ var _instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @instructure/ui-a11y-content */ \"../../node_modules/@instructure/ui-a11y-content/es/index.js\");\n/* harmony import */ var _PreviewIcon__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./PreviewIcon */ \"./src/rce/plugins/shared/PreviewIcon.js\");\n/* harmony import */ var _format_message__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../format-message */ \"./src/format-message.js\");\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\n\n\n\n\n\n\n\n\n\nconst NAMED_COLORS = [{\n  color: '#BD3C14',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Brick')\n}, {\n  color: '#FF2717',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Red')\n}, {\n  color: '#E71F63',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Magenta')\n}, {\n  color: '#8F3E97',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Purple')\n}, {\n  color: '#65499D',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Deep Purple')\n}, {\n  color: '#4554A4',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Indigo')\n}, {\n  color: '#1770AB',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Blue')\n}, {\n  color: '#0B9BE3',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Light Blue')\n}, {\n  color: '#06A3B7',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Cyan')\n}, {\n  color: '#009688',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Teal')\n}, {\n  color: '#009606',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Green')\n}, {\n  color: '#8D9900',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Olive')\n}, {\n  color: '#D97900',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Pumpkin')\n}, {\n  color: '#FD5D10',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Orange')\n}, {\n  color: '#F06291',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Pink')\n}, {\n  color: '#000000',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Black')\n}, {\n  color: '#556572',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Steel Blue')\n}, {\n  color: '#6B7780',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Grey')\n}, {\n  color: '#FFFFFF',\n  name: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('White')\n}, null];\nconst ColorInput = _ref => {\n  var _NAMED_COLORS$find;\n\n  let {\n    color,\n    label,\n    name,\n    onChange,\n    popoverMountNode,\n    width = '11rem',\n    readonly = false,\n    requireColor = false\n  } = _ref;\n  const [isOpen, setIsOpen] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const [inputValue, setInputValue] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(color);\n  const colorName = (_NAMED_COLORS$find = NAMED_COLORS.find(c => (c === null || c === void 0 ? void 0 : c.color) === color)) === null || _NAMED_COLORS$find === void 0 ? void 0 : _NAMED_COLORS$find.name;\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    setInputValue(color);\n  }, [color]); // fire onChange in case value is valid\n\n  const handleColorChange = hex => {\n    if (isValidHex(hex)) {\n      onChange(hex);\n    }\n\n    if (!hex || !hex.length) {\n      onChange(null);\n    }\n\n    setInputValue(hex);\n  }; // reset the input value on blur if invalid\n\n\n  const handleInputBlur = () => {\n    if (!inputValue || inputValue.length > 0 && !isValidHex(inputValue)) {\n      setInputValue(color);\n    }\n  };\n\n  const colorPreviews = NAMED_COLORS.map(c => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ColorPreview, {\n    key: `${name}-${c === null || c === void 0 ? void 0 : c.color}`,\n    color: c === null || c === void 0 ? void 0 : c.color,\n    name: c === null || c === void 0 ? void 0 : c.name,\n    disabled: !isOpen,\n    onSelect: () => {\n      handleColorChange(c === null || c === void 0 ? void 0 : c.color);\n      setIsOpen(false);\n    }\n  }));\n\n  function renderPopover() {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_popover__WEBPACK_IMPORTED_MODULE_4__[\"Popover\"], {\n      on: \"click\",\n      isShowingContent: isOpen,\n      onShowContent: () => setIsOpen(true),\n      onHideContent: () => setIsOpen(false),\n      shouldContainFocus: true,\n      shouldReturnFocus: true,\n      mountNode: popoverMountNode,\n      renderTrigger: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__[\"IconButton\"], {\n        screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('View predefined colors'),\n        size: \"small\",\n        withBackground: false,\n        withBorder: false,\n        interaction: \"enabled\",\n        \"data-testid\": `${name}-popover-trigger`\n      }, isOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconArrowOpenUpLine\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_icons__WEBPACK_IMPORTED_MODULE_5__[\"IconArrowOpenDownLine\"], null))\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__[\"CloseButton\"], {\n      placement: \"end\",\n      onClick: () => setIsOpen(false),\n      screenReaderLabel: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Close')\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_flex__WEBPACK_IMPORTED_MODULE_2__[\"Flex\"], {\n      alignItems: \"center\",\n      as: \"div\",\n      justifyItems: requireColor ? 'start' : 'center',\n      padding: \"x-large x-small small\",\n      width: \"175px\",\n      wrap: \"wrap\",\n      \"data-testid\": `${name}-popover`\n    }, requireColor ? colorPreviews.slice(0, -1) : colorPreviews));\n  }\n\n  const pickerLabel = colorName ? Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Color Picker ({colorName} selected)', {\n    colorName\n  }) : Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('Color Picker');\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_view__WEBPACK_IMPORTED_MODULE_1__[\"View\"], {\n    as: \"div\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_text_input__WEBPACK_IMPORTED_MODULE_3__[\"TextInput\"], {\n    \"data-testid\": `icon-maker-color-input-${name}`,\n    display: \"inline-block\",\n    name: name,\n    onBlur: handleInputBlur,\n    onChange: (e, value) => handleColorChange(value),\n    placeholder: Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('None'),\n    renderBeforeInput: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ColorPreview, {\n      color: color,\n      disabled: true,\n      margin: \"0\"\n    }),\n    renderAfterInput: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"span\", {\n      \"aria-label\": pickerLabel\n    }, renderPopover()),\n    renderLabel: label,\n    shouldNotWrap: true,\n    value: inputValue || '',\n    width: width,\n    interaction: readonly ? 'readonly' : undefined\n  }));\n};\n\nfunction ColorPreview(_ref2) {\n  let {\n    color,\n    name,\n    disabled,\n    margin = 'xxx-small',\n    onSelect\n  } = _ref2;\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_buttons__WEBPACK_IMPORTED_MODULE_6__[\"BaseButton\"], {\n    interaction: disabled ? 'readonly' : undefined,\n    isCondensed: true,\n    margin: margin,\n    onClick: onSelect,\n    size: \"small\",\n    withBackground: false,\n    withBorder: false,\n    \"aria-hidden\": disabled\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_instructure_ui_a11y_content__WEBPACK_IMPORTED_MODULE_7__[\"ScreenReaderContent\"], null, color ? Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('{name} ({color})', {\n    name,\n    color\n  }) : Object(_format_message__WEBPACK_IMPORTED_MODULE_9__[\"default\"])('None')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_PreviewIcon__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    color: color,\n    testId: `colorPreview-${color || 'none'}`\n  }));\n}\n\nfunction isValidHex(color) {\n  if (!color) return false;\n\n  switch (color.length) {\n    case 4:\n      return /^#[0-9A-F]{3}$/i.test(color);\n\n    case 7:\n      return /^#[0-9A-F]{6}$/i.test(color);\n\n    default:\n      return false;\n  }\n}\n\n//# sourceURL=webpack:///./src/rce/plugins/shared/ColorInput.js?");
 
 /***/ }),
 
@@ -716,7 +740,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n // Given a URL to some resource (lik an image),\n// fetches that resource and creates a base64\n// data URL representation of the resource\n\nconst useDataUrl = () => {\n  const [url, setUrl] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('');\n  const [dataUrl, setDataUrl] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('');\n  const [loading, setLoading] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const [error, setError] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])();\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    async function fetchDataUrl() {\n      try {\n        setLoading(true); // Fetch the data and parse as blob\n\n        const response = await fetch(url);\n        const blob = await response.blob(); // Return a promise that resolves with\n        // the the result of the blob read as\n        // a data URL.\n\n        return new Promise((resolve, reject) => {\n          const reader = new FileReader();\n\n          reader.onloadend = () => resolve(reader.result);\n\n          reader.onerror = reject;\n          reader.readAsDataURL(blob);\n        });\n      } catch (e) {\n        setError(e);\n      }\n    }\n\n    if (!!url) {\n      fetchDataUrl().then(result => {\n        setDataUrl(result);\n      }).catch(e => {\n        setError(e);\n      }).finally(() => setLoading(false));\n    }\n  }, [url]);\n  return {\n    setUrl,\n    dataUrl,\n    dataLoading: loading,\n    dataError: error\n  };\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (useDataUrl);\n\n//# sourceURL=webpack:///./src/rce/plugins/shared/useDataUrl.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"../../node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/*\n * Copyright (C) 2021 - present Instructure, Inc.\n *\n * This file is part of Canvas.\n *\n * Canvas is free software: you can redistribute it and/or modify it under\n * the terms of the GNU Affero General Public License as published by the Free\n * Software Foundation, version 3 of the License.\n *\n * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY\n * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR\n * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more\n * details.\n *\n * You should have received a copy of the GNU Affero General Public License along\n * with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n // Given a URL to some resource (lik an image),\n// fetches that resource and creates a base64\n// data URL representation of the resource\n\nconst useDataUrl = () => {\n  const [url, setUrl] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('');\n  const [dataUrl, setDataUrl] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])('');\n  const [dataBlob, setDataBlob] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(null);\n  const [loading, setLoading] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(false);\n  const [error, setError] = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])();\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(() => {\n    async function fetchDataUrl() {\n      try {\n        setLoading(true); // Fetch the data and parse as blob\n\n        const response = await fetch(url);\n        const blob = await response.blob(); // Return a promise that resolves with\n        // the the result of the blob read as\n        // a data URL.\n\n        return new Promise((resolve, reject) => {\n          const reader = new FileReader();\n\n          reader.onloadend = () => resolve({\n            result: reader.result,\n            blob\n          });\n\n          reader.onerror = reject;\n          reader.readAsDataURL(blob);\n        });\n      } catch (e) {\n        setError(e);\n      }\n    }\n\n    if (url) {\n      fetchDataUrl().then(_ref => {\n        let {\n          result,\n          blob\n        } = _ref;\n        setDataUrl(result);\n        setDataBlob(blob);\n      }).catch(e => {\n        setError(e);\n      }).finally(() => setLoading(false));\n    }\n  }, [url]);\n  return {\n    setUrl,\n    dataUrl,\n    dataLoading: loading,\n    dataError: error,\n    dataBlob\n  };\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (useDataUrl);\n\n//# sourceURL=webpack:///./src/rce/plugins/shared/useDataUrl.js?");
 
 /***/ })