gwchq-textjam 0.1.11 → 0.1.13

package/dist/index.js

@@ -56865,6 +56865,62 @@ F();
 
 /***/ }),
 
+/***/ 41625:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgAddFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 18,
+    height: 18,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.35 2.25h-5.4A1.35 1.35 0 003.6 3.6v10.8a1.35 1.35 0 001.35 1.35h8.1a1.35 1.35 0 001.35-1.35V6.3m-4.05-4.05L14.4 6.3m-4.05-4.05V6.3h4.05M9 13.05V9m-2.025 2.025h4.05",
+    stroke: "#33625E",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgAddFile);
+
+/***/ }),
+
+/***/ 3503:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgAddFolder(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 18,
+    height: 18,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M9 8.325v4.05M6.975 10.35h4.05m4.725 3.375a1.35 1.35 0 01-1.35 1.35H3.6a1.35 1.35 0 01-1.35-1.35v-9.45a1.35 1.35 0 011.35-1.35h3.375l1.35 2.025H14.4a1.35 1.35 0 011.35 1.35v7.425z",
+    stroke: "#33625E",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgAddFolder);
+
+/***/ }),
+
 /***/ 95489:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -56929,19 +56985,55 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
-var _path;
+var _path, _path2, _mask, _path3, _path4, _path5, _path6, _path7;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 function SvgCssFile(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    "data-testid": "cssIcon",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 20 18",
+    viewBox: "0 0 32 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M2.053 17.638l.967-4.833H0v-2.537h3.624l.604-3.02h-3.14V4.711h3.744L5.798 0h3.383l-.966 4.711h3.382L12.564 0h3.382l-.966 4.711H18v2.537h-3.504l-.724 3.02h3.14v2.537h-3.624l-.966 4.833H8.939l.967-4.833H6.523l-.966 4.833H2.053zm8.336-7.37l.604-3.02H7.611l-.604 3.02h3.382z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25 8.5H7l1.5 17.25L16 28l7.5-2.25L25 8.5z",
+    fill: "#1572B6"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22.522 19.75l.13-1.5.196-2.25.195-2.25.196-2.25.13-1.5H16v16.5l4.554-1.366 1.54-.462.2-2.31.202-2.31.026-.302z",
+    fill: "#33A9DC"
+  })), _mask || (_mask = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("mask", {
+    id: "css_file_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.6 4h-2.7v3.3h2.7v-.9h-1.8V4.9h1.8V4zm3.9 0v.9H16l1.5 1.5v.9h-3v-.9H16l-1.5-1.5V4h3zm3.9 0v.9h-1.5l1.5 1.5v.9h-3v-.9h1.5l-1.5-1.5V4h3z"
+  }))), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.6 4h-2.7v3.3h2.7v-.9h-1.8V4.9h1.8V4zm3.9 0v.9H16l1.5 1.5v.9h-3v-.9H16l-1.5-1.5V4h3zm3.9 0v.9h-1.5l1.5 1.5v.9h-3v-.9h1.5l-1.5-1.5V4h3z",
+    fill: "#000"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M13.6 4h2V2h-2v2zm-2.7 0V2h-2v2h2zm0 3.3h-2v2h2v-2zm2.7 0v2h2v-2h-2zm0-.9h2v-2h-2v2zm-1.8 0h-2v2h2v-2zm0-1.5v-2h-2v2h2zm1.8 0v2h2v-2h-2zm3.9-.9h2V2h-2v2zm0 .9v2h2v-2h-2zm-1.5 0v-2h-4.828l3.414 3.414L16 4.9zm1.5 1.5h2v-.828l-.585-.586L17.5 6.4zm0 .9v2h2v-2h-2zm-3 0h-2v2h2v-2zm0-.9v-2h-2v2h2zm1.5 0v2h4.829l-3.414-3.414L16 6.4zm-1.5-1.5h-2v.828l.586.586L14.5 4.9zm0-.9V2h-2v2h2zm6.9 0h2V2h-2v2zm0 .9v2h2v-2h-2zm-1.5 0v-2h-4.828l3.414 3.414L19.9 4.9zm1.5 1.5h2v-.828l-.585-.586L21.4 6.4zm0 .9v2h2v-2h-2zm-3 0h-2v2h2v-2zm0-.9v-2h-2v2h2zm1.5 0v2h4.829l-3.414-3.414L19.9 6.4zm-1.5-1.5h-2v.828l.586.586L18.4 4.9zm0-.9V2h-2v2h2zm-4.8 0V2h-2.7v4h2.7V4zm-2.7 0h-2v3.3h4V4h-2zm0 3.3v2h2.7v-4h-2.7v2zm2.7 0h2v-.9h-4v.9h2zm0-.9v-2h-1.8v4h1.8v-2zm-1.8 0h2V4.9h-4v1.5h2zm0-1.5v2h1.8v-4h-1.8v2zm1.8 0h2V4h-4v.9h2zm3.9-.9h-2v.9h4V4h-2zm0 .9v-2H16v4h1.5v-2zm-1.5 0l-1.414 1.414 1.5 1.5L17.5 6.4l1.415-1.414-1.5-1.5L16 4.9zm1.5 1.5h-2v.9h4v-.9h-2zm0 .9v-2h-3v4h3v-2zm-3 0h2v-.9h-4v.9h2zm0-.9v2H16v-4h-1.5v2zm1.5 0l1.415-1.414-1.5-1.5L14.5 4.9l-1.414 1.414 1.5 1.5L16 6.4zm-1.5-1.5h2V4h-4v.9h2zm0-.9v2h3V2h-3v2zm6.9 0h-2v.9h4V4h-2zm0 .9v-2h-1.5v4h1.5v-2zm-1.5 0l-1.414 1.414 1.5 1.5L21.4 6.4l1.415-1.414-1.5-1.5L19.9 4.9zm1.5 1.5h-2v.9h4v-.9h-2zm0 .9v-2h-3v4h3v-2zm-3 0h2v-.9h-4v.9h2zm0-.9v2h1.5v-4h-1.5v2zm1.5 0l1.415-1.414-1.5-1.5L18.4 4.9l-1.414 1.414 1.5 1.5L19.9 6.4zm-1.5-1.5h2V4h-4v.9h2zm0-.9v2h3V2h-3v2z",
+    fill: "#003046",
+    mask: "url(#css_file_svg__a)"
+  })), _path5 || (_path5 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.48 23.794l-.77-.231-2.464-.74-.201-2.31-.066-.763h2.4l.13 1.503.77.23L16 22v2.25l-1.52-.456zM10.457 13.75H16V11.5h-5.739l.196 2.25z",
+    fill: "#EBEBEB"
+  })), _path6 || (_path6 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 22l2.491-.747.13-1.503.131-1.5H16V16h2.948l.195-2.25H16V11.5h5.739l-.196 2.25-.195 2.25-.196 2.25-.13 1.5-.067.764-.2 2.31-2.465.739-2.29.687V22z",
+    fill: "#fff"
+  })), _path7 || (_path7 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 18.25h-2.003L13.802 16H16v2.25z",
+    fill: "#EBEBEB"
   })));
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgCssFile);
@@ -56956,17 +57048,26 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
-var _path;
+var _path, _path2, _path3, _path4;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 function SvgCsvFile(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    width: 24,
-    height: 24,
+    viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M3 3v17.8h18V3H3zm2.9 3.7H11V8H5.9V6.7zm7 0H18V8h-5.1V6.7zm-7 3H11V11H5.9V9.7zm7 0H18V11h-5.1V9.7zm-7 3H11V14H5.9v-1.3zm7 0H18V14h-5.1v-1.3zm-7 3H11V17H5.9v-1.3zm7 0H18V17h-5.1v-1.3z"
+    d: "M3.375 1.98v13.477c0 .161.134.293.297.293h10.094a.296.296 0 00.296-.293V5.789h-3.265a.296.296 0 01-.297-.293V1.687H3.672a.296.296 0 00-.297.293z",
+    fill: "#009688"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.048 5.203a.436.436 0 00-.06-.146l-2.894-3.194v3.34h2.954z",
+    fill: "#009688"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M4.266 7.693h8.906v7.178H4.266V7.693z",
+    fill: "#fff"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M6.715 12.835v.44H5.453v-.44h1.262zm1.751 0v.44H7.205v-.44h1.261zm1.767 0v.44H8.97v-.44h1.262zm1.751 0v.44h-1.261v-.44h1.261zm-5.27-.864v.44h-1.26v-.44h1.26zm1.752 0v.44H7.205v-.44h1.261zm1.767 0v.44H8.97v-.44h1.262zm1.751 0v.44h-1.261v-.44h1.261zm-5.27-.865v.44h-1.26v-.44h1.26zm1.752 0v.44H7.205v-.44h1.261zm1.767 0v.44H8.97v-.44h1.262zm1.751 0v.44h-1.261v-.44h1.261zm-5.27-.864v.44h-1.26v-.44h1.26zm1.752 0v.44H7.205v-.44h1.261zm1.767 0v.44H8.97v-.44h1.262zm1.751 0v.44h-1.261v-.44h1.261zm-5.27-.864v.44h-1.26v-.44h1.26zm1.752 0v.44H7.205v-.44h1.261zm1.767 0v.44H8.97v-.44h1.262zm1.751 0v.44h-1.261v-.44h1.261z",
+    fill: "#009688"
   })));
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgCsvFile);
@@ -57029,6 +57130,42 @@ function SvgFolder(props) {
 
 /***/ }),
 
+/***/ 32432:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2, _path3, _path4;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgGifFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.75 10.688c0-.622-.504-1.126-1.125-1.126H3.375c-.621 0-1.125.504-1.125 1.126v1.687c0 .621.504 1.125 1.125 1.125h11.25c.621 0 1.125-.504 1.125-1.125v-1.688zm1.125 1.687a2.25 2.25 0 01-2.25 2.25H3.375a2.25 2.25 0 01-2.25-2.25v-1.688a2.25 2.25 0 012.25-2.25h11.25a2.25 2.25 0 012.25 2.25v1.688z",
+    fill: "#33625E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.963 14.4a1.913 1.913 0 01-1.913 1.912h-8.1A1.913 1.913 0 013.037 14.4v-.9h1.126v.9a.788.788 0 00.787.787h8.1a.789.789 0 00.788-.787v-.9h1.125v.9z",
+    fill: "#33625E"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.73 1.69c.13.013.25.07.343.162l4.725 4.726a.563.563 0 01.165.397v2.588h-1.125V7.537H9.675a.563.563 0 01-.562-.563V2.813H4.95a.788.788 0 00-.787.787v5.963H3.037V3.6A1.913 1.913 0 014.95 1.687h4.725l.056.003zm.508 4.723h2.804l-2.804-2.805v2.805z",
+    fill: "#33625E"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.852 12.898c-.213 0-.337-.13-.337-.353V10.55c0-.242.134-.374.38-.374h1.219c.151 0 .261.11.261.265a.25.25 0 01-.261.26h-.94v.649h.838c.158 0 .261.103.261.255 0 .153-.105.256-.26.256h-.838v.685c0 .226-.116.353-.323.353zM9.66 12.898c-.211 0-.333-.129-.333-.353v-2.038c0-.226.118-.352.329-.352.211 0 .33.129.33.352v2.038c0 .226-.117.353-.326.353zM6.584 11.704v-.36c0-.75.45-1.219 1.184-1.219.309 0 .582.083.781.232.18.129.298.299.298.455 0 .157-.11.264-.268.264a.259.259 0 01-.195-.084c-.161-.16-.311-.314-.568-.314-.377 0-.574.24-.574.697v.327c0 .451.201.699.568.699.285 0 .476-.167.476-.414v-.115h-.245c-.173 0-.269-.083-.269-.234 0-.148.094-.23.27-.23h.488c.263 0 .378.113.378.365v.164c0 .597-.452 1-1.124 1-.756 0-1.2-.463-1.2-1.233zM5.625 12.567a.359.359 0 01.718 0 .359.359 0 01-.718 0z",
+    fill: "#33625E"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgGifFile);
+
+/***/ }),
+
 /***/ 59917:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -57037,24 +57174,234 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
-var _path;
+var _path, _mask, _path2, _path3, _path4, _path5, _mask2, _path6, _path7, _path8;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 function SvgHtmlFile(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    "data-testid": "htmlIcon",
-    width: 24,
-    height: 24,
+    viewBox: "0 0 32 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M2 11.125l7.5-7v3.25l-5.625 5 5.625 5v3.25l-7.5-7v-2.5zm20 2.625l-7.5 7v-3.375l5.75-5-5.75-5V4l7.5 7v2.75z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.143 8.5H6.857L8.38 25.75 16 28l7.619-2.25L25.143 8.5z",
+    fill: "#E44D26"
+  })), _mask || (_mask = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("mask", {
+    id: "html_file_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.99 4v3.3h.915V6.1h1.219v1.2h.914V4h-.914v1.2h-1.22V4H8.99zm7.315 0v3.3h.914V5.5l.762 1.2.762-1.2v1.8h.914V4h-.914l-.762 1.05L17.219 4h-.915zm3.961 0v3.3h2.743v-.9h-1.828V4h-.915z"
+  }))), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.99 4v3.3h.915V6.1h1.219v1.2h.914V4h-.914v1.2h-1.22V4H8.99zm7.315 0v3.3h.914V5.5l.762 1.2.762-1.2v1.8h.914V4h-.914l-.762 1.05L17.219 4h-.915zm3.961 0v3.3h2.743v-.9h-1.828V4h-.915z",
+    fill: "#000"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M8.99 4V2h-2v2h2zm0 3.3h-2v2h2v-2zm.915 0v2h2v-2h-2zm0-1.2v-2h-2v2h2zm1.219 0h2v-2h-2v2zm0 1.2h-2v2h2v-2zm.914 0v2h2v-2h-2zm0-3.3h2V2h-2v2zm-.914 0V2h-2v2h2zm0 1.2v2h2v-2h-2zm-1.22 0h-2v2h2v-2zm0-1.2h2V2h-2v2zm6.4 0V2h-2v2h2zm0 3.3h-2v2h2v-2zm.915 0v2h2v-2h-2zm0-1.8l1.688-1.072-3.688-5.81V5.5h2zm.762 1.2l-1.689 1.072 1.689 2.66 1.688-2.66L17.981 6.7zm.762-1.2h2v-6.881l-3.689 5.809L18.743 5.5zm0 1.8h-2v2h2v-2zm.914 0v2h2v-2h-2zm0-3.3h2V2h-2v2zm-.914 0V2h-1.02l-.6.825L18.744 4zm-.762 1.05l-1.619 1.175 1.619 2.23 1.618-2.23-1.618-1.175zM17.219 4l1.618-1.175L18.24 2h-1.02v2zm3.047 0V2h-2v2h2zm0 3.3h-2v2h2v-2zm2.743 0v2h2v-2h-2zm0-.9h2v-2h-2v2zm-1.828 0h-2v2h2v-2zm0-2.4h2V2h-2v2zM8.99 4h-2v3.3h4V4h-2zm0 3.3v2h.914v-4H8.99v2zm.914 0h2V6.1h-4v1.2h2zm0-1.2v2h1.219v-4h-1.22v2zm1.219 0h-2v1.2h4V6.1h-2zm0 1.2v2h.914v-4h-.914v2zm.914 0h2V4h-4v3.3h2zm0-3.3V2h-.914v4h.914V4zm-.914 0h-2v1.2h4V4h-2zm0 1.2v-2h-1.22v4h1.22v-2zm-1.22 0h2V4h-4v1.2h2zm0-1.2V2H8.99v4h.915V4zm6.4 0h-2v3.3h4V4h-2zm0 3.3v2h.915v-4h-.915v2zm.915 0h2V5.5h-4v1.8h2zm0-1.8L15.53 6.572l.762 1.2L17.981 6.7l1.688-1.072-.762-1.2L17.22 5.5zm.762 1.2l1.688 1.072.762-1.2L18.743 5.5l-1.689-1.072-.762 1.2L17.981 6.7zm.762-1.2h-2v1.8h4V5.5h-2zm0 1.8v2h.914v-4h-.914v2zm.914 0h2V4h-4v3.3h2zm0-3.3V2h-.914v4h.914V4zm-.914 0l-1.62-1.175-.761 1.05 1.619 1.175 1.618 1.175.762-1.05L18.743 4zm-.762 1.05l1.618-1.175-.762-1.05L17.22 4 15.6 5.175l.762 1.05 1.619-1.175zM17.219 4V2h-.915v4h.915V4zm3.047 0h-2v3.3h4V4h-2zm0 3.3v2h2.743v-4h-2.743v2zm2.743 0h2v-.9h-4v.9h2zm0-.9v-2h-1.828v4h1.828v-2zm-1.828 0h2V4h-4v2.4h2zm0-2.4V2h-.915v4h.915V4z",
+    fill: "#003046",
+    mask: "url(#html_file_svg__a)"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.674 23.563l-2.504-.74-.204-2.31-.067-.763h2.438l.133 1.503L16 22v2.25l-2.326-.687zM16 13.75h-3.193l.198 2.25H16v2.25h-5.234L10.567 16l-.198-2.25-.2-2.25H16v2.25z",
+    fill: "#EBEBEB"
+  })), _path5 || (_path5 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22.625 19.75l.133-1.5.198-2.25.2-2.25.198-2.25.133-1.5H16v16.5l4.626-1.366 1.565-.462.204-2.31.204-2.31.026-.302z",
+    fill: "#F16529"
+  })), _mask2 || (_mask2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("mask", {
+    id: "html_file_svg__b",
+    fill: "#fff"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.648 4v.9h1.066v2.4h.914V4.9h1.067V4h-3.047z"
+  }))), _path6 || (_path6 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.648 4v.9h1.066v2.4h.914V4.9h1.067V4h-3.047z",
+    fill: "#000"
+  })), _path7 || (_path7 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M12.648 4V2h-2v2h2zm0 .9h-2v2h2v-2zm1.066 0h2v-2h-2v2zm0 2.4h-2v2h2v-2zm.914 0v2h2v-2h-2zm0-2.4v-2h-2v2h2zm1.067 0v2h2v-2h-2zm0-.9h2V2h-2v2zm-3.047 0h-2v.9h4V4h-2zm0 .9v2h1.066v-4h-1.066v2zm1.066 0h-2v2.4h4V4.9h-2zm0 2.4v2h.914v-4h-.914v2zm.914 0h2V4.9h-4v2.4h2zm0-2.4v2h1.067v-4h-1.067v2zm1.067 0h2V4h-4v.9h2zm0-.9V2h-3.047v4h3.047V4z",
+    fill: "#003046",
+    mask: "url(#html_file_svg__b)"
+  })), _path8 || (_path8 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 13.75h5.631l.2-2.25H16v2.25zm2.796 4.5H16V16h5.433l-.199 2.25-.133 1.5-.067.764-.204 2.31-2.503.739L16 24.25V22l2.53-.747.133-1.503.133-1.5z",
+    fill: "#fff"
   })));
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgHtmlFile);
 
 /***/ }),
 
+/***/ 19797:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2, _path3, _path4;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgJpgFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.75 10.688c0-.622-.504-1.126-1.125-1.126H3.375c-.621 0-1.125.504-1.125 1.126v1.687c0 .621.504 1.125 1.125 1.125h11.25c.621 0 1.125-.504 1.125-1.125v-1.688zm1.125 1.687a2.25 2.25 0 01-2.25 2.25H3.375a2.25 2.25 0 01-2.25-2.25v-1.688a2.25 2.25 0 012.25-2.25h11.25a2.25 2.25 0 012.25 2.25v1.688z",
+    fill: "#33625E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.963 14.4a1.913 1.913 0 01-1.913 1.912h-8.1A1.913 1.913 0 013.037 14.4v-.9h1.126v.9a.788.788 0 00.787.787h8.1a.789.789 0 00.788-.787v-.9h1.125v.9z",
+    fill: "#33625E"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.73 1.69c.13.013.25.07.343.162l4.725 4.726a.563.563 0 01.165.397v2.588h-1.125V7.537H9.675a.563.563 0 01-.562-.563V2.813H4.95a.788.788 0 00-.787.787v5.963H3.037V3.6A1.913 1.913 0 014.95 1.687h4.725l.056.003zm.508 4.723h2.804l-2.804-2.805v2.805z",
+    fill: "#33625E"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.517 11.704v-.36c0-.75.47-1.219 1.233-1.219.322 0 .606.083.814.232.187.129.31.299.31.455 0 .157-.115.264-.279.264a.275.275 0 01-.203-.084c-.168-.16-.324-.314-.592-.314-.392 0-.598.24-.598.697v.327c0 .451.21.699.592.699.297 0 .496-.167.496-.414v-.115h-.255c-.181 0-.28-.083-.28-.234 0-.148.097-.23.28-.23h.508c.274 0 .395.113.395.365v.164c0 .597-.472 1-1.171 1-.787 0-1.25-.463-1.25-1.233zM8.417 12.898c-.218 0-.34-.127-.34-.353v-1.923c0-.323.124-.447.448-.447h.728c.62 0 1.013.36 1.013.916 0 .593-.398.924-1.048.924H8.76v.53c0 .224-.124.353-.344.353zm.346-1.37h.312c.355 0 .512-.112.512-.425 0-.269-.155-.423-.435-.423h-.389v.847zM6.841 10.517c0-.233.119-.362.339-.362.222 0 .346.13.346.362v1.428c0 .636-.375.992-1.044.992-.342 0-.616-.09-.776-.255a.475.475 0 01-.15-.339c0-.172.117-.283.285-.283.118 0 .19.05.266.129.095.109.207.192.386.192.23 0 .348-.129.348-.432v-1.432zM4.5 12.567c0-.196.17-.356.374-.356.205 0 .373.16.373.356a.366.366 0 01-.373.357.368.368 0 01-.374-.357z",
+    fill: "#33625E"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgJpgFile);
+
+/***/ }),
+
+/***/ 73895:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgJsFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M28 4H4v24h24V4z",
+    fill: "#F7DF1E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M21.545 15.971a1.92 1.92 0 00-1.357 1.854c0 .6.21 1.113.657 1.52.366.333.863.564 1.332.767h.004l.563.243c.933.4 1.52.749 1.88 1.136.317.34.512.767.512 1.487 0 .726-.271 1.218-.689 1.552-.444.354-1.138.591-2.048.592-1.233 0-2.096-.408-2.667-.99l.127-.074c.17.18.359.35.576.498.533.364 1.167.564 1.912.564.623 0 1.232-.155 1.712-.511.5-.37.819-.938.819-1.602a2.05 2.05 0 00-.225-.958 2.151 2.151 0 00-.592-.698c-.405-.318-.953-.55-1.424-.757l-.006-.003-.565-.242h-.002l-.276-.123c-.616-.285-1.046-.57-1.332-.892-.296-.334-.492-.767-.492-1.463 0-.582.217-1.057.577-1.392a2.176 2.176 0 011.004-.508zm-5.475.049v6.7c0 .97-.279 1.525-.62 1.846-.351.331-.916.55-1.748.55-.919 0-1.544-.3-1.973-.743l.127-.078a2.208 2.208 0 001.75.81c.472.001 1.107-.087 1.596-.585.48-.489.613-1.165.613-1.832V16.02h.255zm6.94-.063c.248.05.46.125.642.225.125.068.247.154.367.26l-.072.046a2.26 2.26 0 00-.938-.53z",
+    fill: "#000",
+    stroke: "#003046",
+    strokeWidth: 2
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgJsFile);
+
+/***/ }),
+
+/***/ 37505:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2, _path3, _path4;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgMdFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M7 3.52v23.96c0 .286.237.52.528.52h17.944c.29 0 .528-.234.528-.52V10.291h-5.806a.526.526 0 01-.527-.521V3H7.527A.526.526 0 007 3.52z",
+    fill: "#E91E63"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M25.974 9.25a.776.776 0 00-.106-.26l-5.146-5.677V9.25h5.252z",
+    fill: "#E91E63"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M8.583 13.677h15.834v12.76H8.583v-12.76z",
+    fill: "#fff"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.563 22.896v-5.677h1.688l1.69 2.083 1.688-2.083h1.69v5.677h-1.69V19.64l-1.689 2.083-1.689-2.083v3.255h-1.688zm10.133 0l-2.534-2.76h1.69v-2.917h1.688v2.916h1.69l-2.534 2.76z",
+    fill: "#E91E63"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgMdFile);
+
+/***/ }),
+
+/***/ 71720:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgMinusCircle(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 18,
+    height: 18,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.523 9A5.523 5.523 0 103.477 9a5.523 5.523 0 0011.046 0zm-3.069-.614a.614.614 0 110 1.228H6.545a.614.614 0 010-1.228h4.91zM15.75 9a6.75 6.75 0 11-13.5 0 6.75 6.75 0 0113.5 0z",
+    fill: "#69746D"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgMinusCircle);
+
+/***/ }),
+
+/***/ 97512:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2, _path3, _path4;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgMp3File(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.75 10.688c0-.622-.504-1.126-1.125-1.126H3.375c-.621 0-1.125.504-1.125 1.126v1.687c0 .621.504 1.125 1.125 1.125h11.25c.621 0 1.125-.504 1.125-1.125v-1.688zm1.125 1.687a2.25 2.25 0 01-2.25 2.25H3.375a2.25 2.25 0 01-2.25-2.25v-1.688a2.25 2.25 0 012.25-2.25h11.25a2.25 2.25 0 012.25 2.25v1.688z",
+    fill: "#33625E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.963 14.4a1.913 1.913 0 01-1.913 1.912h-8.1A1.913 1.913 0 013.037 14.4v-.9h1.126v.9a.788.788 0 00.787.787h8.1a.789.789 0 00.788-.787v-.9h1.125v.9z",
+    fill: "#33625E"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.73 1.69c.13.013.25.07.343.162l4.725 4.726a.563.563 0 01.165.397v2.588h-1.125V7.537H9.675a.563.563 0 01-.562-.563V2.813H4.95a.788.788 0 00-.787.787v5.963H3.037V3.6A1.913 1.913 0 014.95 1.687h4.725l.056.003zm.508 4.723h2.804l-2.804-2.805v2.805z",
+    fill: "#33625E"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M11.425 12.3c0-.15.106-.258.253-.258.096 0 .176.046.267.157a.571.571 0 00.475.245c.265 0 .438-.136.438-.348 0-.21-.175-.353-.436-.353h-.162c-.139 0-.24-.105-.24-.25 0-.138.1-.245.24-.245h.156c.217 0 .378-.135.378-.319s-.157-.31-.382-.31c-.172 0-.309.074-.431.235a.313.313 0 01-.26.135c-.155 0-.266-.103-.266-.25 0-.327.428-.614.97-.614.585 0 .995.3.995.725 0 .291-.219.55-.496.584v.044c.33.024.576.299.576.643 0 .478-.447.816-1.08.816-.557 0-.995-.299-.995-.637zM9.358 12.898c-.21 0-.329-.127-.329-.353v-1.923c0-.323.12-.447.434-.447h.704c.6 0 .98.36.98.916 0 .593-.386.924-1.014.924H9.69v.53c0 .224-.12.353-.333.353zm.335-1.37h.301c.344 0 .496-.112.496-.425 0-.269-.15-.423-.421-.423h-.376v.847zM5.997 12.898c-.19 0-.291-.119-.291-.34v-1.981c0-.264.153-.424.397-.424.213 0 .352.105.458.388l.532 1.35h.022l.53-1.352c.108-.287.238-.386.461-.386.249 0 .391.154.391.424v1.98c0 .216-.11.34-.303.34-.188 0-.289-.118-.289-.34v-1.36h-.018L7.41 12.4c-.079.202-.17.265-.305.265-.137 0-.231-.067-.31-.265l-.479-1.204H6.3v1.36c0 .216-.11.34-.303.34zM4.5 12.567a.361.361 0 01.722 0 .361.361 0 01-.722 0z",
+    fill: "#33625E"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgMp3File);
+
+/***/ }),
+
 /***/ 86936:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -57080,6 +57427,68 @@ function SvgOpenInNewTab(props) {
 
 /***/ }),
 
+/***/ 45494:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgPlusCircle(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    width: 18,
+    height: 18,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.523 9A5.523 5.523 0 103.477 9a5.523 5.523 0 0011.046 0zm-6.137 2.454v-1.84h-1.84a.614.614 0 010-1.228h1.84v-1.84a.614.614 0 011.228 0v1.84h1.84a.614.614 0 110 1.228h-1.84v1.84a.614.614 0 11-1.228 0zM15.75 9a6.75 6.75 0 11-13.5 0 6.75 6.75 0 0113.5 0z",
+    fill: "#828282"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgPlusCircle);
+
+/***/ }),
+
+/***/ 3745:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2, _path3, _path4;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgPngFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.75 10.688c0-.622-.504-1.126-1.125-1.126H3.375c-.621 0-1.125.504-1.125 1.126v1.687c0 .621.504 1.125 1.125 1.125h11.25c.621 0 1.125-.504 1.125-1.125v-1.688zm1.125 1.687a2.25 2.25 0 01-2.25 2.25H3.375a2.25 2.25 0 01-2.25-2.25v-1.688a2.25 2.25 0 012.25-2.25h11.25a2.25 2.25 0 012.25 2.25v1.688z",
+    fill: "#33625E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.963 14.4a1.913 1.913 0 01-1.913 1.912h-8.1A1.913 1.913 0 013.037 14.4v-.9h1.126v.9a.788.788 0 00.787.787h8.1a.789.789 0 00.788-.787v-.9h1.125v.9z",
+    fill: "#33625E"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.73 1.69c.13.013.25.07.343.162l4.725 4.726a.563.563 0 01.165.397v2.588h-1.125V7.537H9.675a.563.563 0 01-.562-.563V2.813H4.95a.788.788 0 00-.787.787v5.963H3.037V3.6A1.913 1.913 0 014.95 1.687h4.725l.056.003zm.508 4.723h2.804l-2.804-2.805v2.805z",
+    fill: "#33625E"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M11.078 11.704v-.36c0-.75.47-1.219 1.234-1.219.322 0 .606.083.814.232.187.129.31.299.31.455 0 .157-.115.264-.279.264a.276.276 0 01-.203-.084c-.168-.16-.324-.314-.592-.314-.393 0-.598.24-.598.697v.327c0 .451.21.699.591.699.297 0 .497-.167.497-.414v-.115h-.255c-.181 0-.28-.083-.28-.234 0-.148.097-.23.28-.23h.508c.274 0 .395.113.395.365v.164c0 .597-.472 1-1.171 1-.788 0-1.25-.463-1.25-1.233zM8.928 12.557c0 .214-.114.34-.315.34-.202 0-.32-.128-.32-.34V10.54c0-.254.114-.384.34-.384.152 0 .24.071.376.261l.956 1.359h.027v-1.28c0-.213.116-.34.315-.34.202 0 .322.127.322.34v2.039c0 .237-.112.364-.322.364-.153 0-.247-.062-.388-.26l-.964-1.376h-.027v1.295zM6.08 12.898c-.217 0-.34-.127-.34-.353v-1.923c0-.323.125-.447.449-.447h.729c.62 0 1.013.36 1.013.916 0 .593-.398.924-1.049.924h-.457v.53c0 .224-.124.353-.344.353zm.348-1.37h.311c.355 0 .513-.112.513-.425 0-.269-.156-.423-.436-.423h-.388v.847zM4.5 12.567c0-.196.17-.356.374-.356.206 0 .374.16.374.356a.367.367 0 01-.374.357.368.368 0 01-.374-.357z",
+    fill: "#33625E"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgPngFile);
+
+/***/ }),
+
 /***/ 90830:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -57093,8 +57502,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 function SvgPythonFile(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    width: 18,
-    height: 18,
+    viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
@@ -57136,6 +57544,70 @@ function SvgPythonFile(props) {
 
 /***/ }),
 
+/***/ 98201:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgUploadFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M3.09 12.364V3.636A1.636 1.636 0 014.728 2h3.818l.054.003a.545.545 0 01.332.157l3.818 3.818c.103.102.16.241.16.386v6a.545.545 0 11-1.09 0V6.909H8.544A.545.545 0 018 6.364V3.09H4.727a.545.545 0 00-.545.545v8.728a.545.545 0 11-1.091 0zm6-6.546h1.957L9.09 3.862v1.956z",
+    fill: "#33625E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M7.454 13.454V9.862l-1.25 1.25a.545.545 0 11-.772-.77L7.614 8.16l.042-.038a.545.545 0 01.73.038l2.181 2.182a.545.545 0 11-.77.77l-1.252-1.25v3.592a.545.545 0 11-1.09 0z",
+    fill: "#33625E"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgUploadFile);
+
+/***/ }),
+
+/***/ 7384:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
+var _path, _path2, _path3, _path4;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function SvgWavFile(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.75 10.688c0-.622-.504-1.126-1.125-1.126H3.375c-.621 0-1.125.504-1.125 1.126v1.687c0 .621.504 1.125 1.125 1.125h11.25c.621 0 1.125-.504 1.125-1.125v-1.688zm1.125 1.687a2.25 2.25 0 01-2.25 2.25H3.375a2.25 2.25 0 01-2.25-2.25v-1.688a2.25 2.25 0 012.25-2.25h11.25a2.25 2.25 0 012.25 2.25v1.688z",
+    fill: "#33625E"
+  })), _path2 || (_path2 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M14.963 14.4a1.913 1.913 0 01-1.913 1.912h-8.1A1.913 1.913 0 013.037 14.4v-.9h1.126v.9a.788.788 0 00.787.787h8.1a.789.789 0 00.788-.787v-.9h1.125v.9z",
+    fill: "#33625E"
+  })), _path3 || (_path3 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.73 1.69c.13.013.25.07.343.162l4.725 4.726a.563.563 0 01.165.397v2.588h-1.125V7.537H9.675a.563.563 0 01-.562-.563V2.813H4.95a.788.788 0 00-.787.787v5.963H3.037V3.6A1.913 1.913 0 014.95 1.687h4.725l.056.003zm.508 4.723h2.804l-2.804-2.805v2.805z",
+    fill: "#33625E"
+  })), _path4 || (_path4 = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M11.83 12.18l.482-1.727c.06-.234.153-.328.32-.328.179 0 .306.118.306.293 0 .067-.021.17-.05.264l-.557 1.761c-.1.33-.252.468-.522.468-.274 0-.431-.14-.53-.468l-.557-1.761a.912.912 0 01-.05-.258c0-.176.13-.299.309-.299.16 0 .264.107.327.328l.493 1.727h.029zM8.718 12.913c-.17 0-.288-.112-.288-.273 0-.066.017-.143.06-.277l.572-1.778c.102-.325.25-.456.522-.456s.416.129.52.456l.569 1.778a.93.93 0 01.05.263c0 .175-.117.287-.296.287-.166 0-.263-.096-.325-.323l-.099-.328h-.867l-.1.328c-.063.233-.152.323-.318.323zm.546-1.13h.613l-.29-1.04h-.03l-.293 1.04zM5.685 12.572l-.504-1.907a1.03 1.03 0 01-.033-.225c0-.186.125-.315.307-.315.166 0 .264.114.317.364l.322 1.518h.03l.348-1.528c.057-.25.151-.354.327-.354.176 0 .274.108.33.354l.347 1.528h.032l.308-1.518c.047-.246.153-.364.321-.364.178 0 .303.129.303.31 0 .056-.01.142-.023.19l-.505 1.947c-.06.23-.173.335-.363.335-.198 0-.325-.104-.385-.353l-.352-1.415h-.024l-.356 1.433c-.055.219-.183.335-.369.335-.187 0-.31-.082-.378-.335zM4.5 12.576c0-.199.155-.362.34-.362.187 0 .34.163.34.362 0 .199-.153.361-.34.361-.185 0-.34-.162-.34-.361z",
+    fill: "#33625E"
+  })));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SvgWavFile);
+
+/***/ }),
+
 /***/ 30416:
 /***/ ((module) => {
 
@@ -59770,7 +60242,9 @@ var PyodideRunner = _ref => {
         extension,
         content
       } of projectCode) {
-        writeFile([name, extension].join("."), content);
+        if (name && extension) {
+          writeFile([name, extension].join("."), content);
+        }
       }
 
       // program is the content of the component with name main and extension py
@@ -59993,263 +60467,6 @@ var PythonRunner = _ref => {
 
 /***/ }),
 
-/***/ 91148:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  FileTreeActions: () => (/* binding */ FileTreeActions)
-});
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(51649);
-;// ./src/assets/icons/plus_circle.svg
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-
-function SvgPlusCircle(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", _extends({
-    width: 18,
-    height: 18,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M14.523 9A5.523 5.523 0 103.477 9a5.523 5.523 0 0011.046 0zm-6.137 2.454v-1.84h-1.84a.614.614 0 010-1.228h1.84v-1.84a.614.614 0 011.228 0v1.84h1.84a.614.614 0 110 1.228h-1.84v1.84a.614.614 0 11-1.228 0zM15.75 9a6.75 6.75 0 11-13.5 0 6.75 6.75 0 0113.5 0z",
-    fill: "#828282"
-  })));
-}
-/* harmony default export */ const plus_circle = (SvgPlusCircle);
-;// ./src/assets/icons/minus_circle.svg
-var minus_circle_path;
-function minus_circle_extends() { return minus_circle_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, minus_circle_extends.apply(null, arguments); }
-
-function SvgMinusCircle(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", minus_circle_extends({
-    width: 18,
-    height: 18,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), minus_circle_path || (minus_circle_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M14.523 9A5.523 5.523 0 103.477 9a5.523 5.523 0 0011.046 0zm-3.069-.614a.614.614 0 110 1.228H6.545a.614.614 0 010-1.228h4.91zM15.75 9a6.75 6.75 0 11-13.5 0 6.75 6.75 0 0113.5 0z",
-    fill: "#69746D"
-  })));
-}
-/* harmony default export */ const minus_circle = (SvgMinusCircle);
-;// ./src/assets/icons/add_folder.svg
-var add_folder_path;
-function add_folder_extends() { return add_folder_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, add_folder_extends.apply(null, arguments); }
-
-function SvgAddFolder(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", add_folder_extends({
-    width: 18,
-    height: 18,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), add_folder_path || (add_folder_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M9 8.325v4.05M6.975 10.35h4.05m4.725 3.375a1.35 1.35 0 01-1.35 1.35H3.6a1.35 1.35 0 01-1.35-1.35v-9.45a1.35 1.35 0 011.35-1.35h3.375l1.35 2.025H14.4a1.35 1.35 0 011.35 1.35v7.425z",
-    stroke: "#33625E",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const add_folder = (SvgAddFolder);
-;// ./src/assets/icons/add_file.svg
-var add_file_path;
-function add_file_extends() { return add_file_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, add_file_extends.apply(null, arguments); }
-
-function SvgAddFile(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", add_file_extends({
-    width: 18,
-    height: 18,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), add_file_path || (add_file_path = /*#__PURE__*/external_react_.createElement("path", {
-    d: "M10.35 2.25h-5.4A1.35 1.35 0 003.6 3.6v10.8a1.35 1.35 0 001.35 1.35h8.1a1.35 1.35 0 001.35-1.35V6.3m-4.05-4.05L14.4 6.3m-4.05-4.05V6.3h4.05M9 13.05V9m-2.025 2.025h4.05",
-    stroke: "#33625E",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-}
-/* harmony default export */ const add_file = (SvgAddFile);
-// EXTERNAL MODULE: ./src/components/Menus/Sidebar/FilePanel/FileTree/styles.module.scss
-var styles_module = __webpack_require__(79473);
-// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
-var jsx_runtime = __webpack_require__(74848);
-;// ./src/components/Menus/Sidebar/FilePanel/FileTree/FileTreeActions.jsx
-
-
-
-
-
-
-var FileTreeActions = _ref => {
-  var {
-    onFileCreate,
-    onDirCreate,
-    onExpandAll,
-    onCollapseAll,
-    hasExpandedNodes
-  } = _ref;
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: styles_module["default"].fileTreeActions,
-    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      children: [hasExpandedNodes ? /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-        type: "button",
-        "aria-label": "Collapse all folders",
-        onClick: onCollapseAll,
-        className: styles_module["default"].iconButton,
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(minus_circle, {
-          "aria-hidden": "true",
-          focusable: "false"
-        })
-      }) : /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-        type: "button",
-        "aria-label": "Expand all folders",
-        onClick: onExpandAll,
-        className: styles_module["default"].iconButton,
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(plus_circle, {
-          "aria-hidden": "true",
-          focusable: "false"
-        })
-      }), "Project files"]
-    }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: styles_module["default"].fileActionButtons,
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-        type: "button",
-        "aria-label": "Add folder",
-        onClick: onDirCreate,
-        className: styles_module["default"].iconButton,
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(add_folder, {
-          "aria-hidden": "true",
-          focusable: "false"
-        })
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-        type: "button",
-        "aria-label": "Add file",
-        onClick: onFileCreate,
-        className: styles_module["default"].iconButton,
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)(add_file, {
-          "aria-hidden": "true",
-          focusable: "false"
-        })
-      })]
-    })]
-  });
-};
-
-/***/ }),
-
-/***/ 92185:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  FileTreeItem: () => (/* binding */ FileTreeItem)
-});
-
-// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js
-var objectSpread2 = __webpack_require__(89379);
-// EXTERNAL MODULE: ./node_modules/classnames/index.js
-var classnames = __webpack_require__(46942);
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
-;// ./src/components/Menus/Sidebar/FilePanel/FileTree/FileTreeItem/styles.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const styles_module = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","treeItem":"styles-module__treeItem--kbyYk","itemFocused":"styles-module__itemFocused--SmUbE","fileTreeActions":"styles-module__fileTreeActions--d42jt","level-0":"styles-module__level-0--5PVOR","level-1":"styles-module__level-1--vTMYv","level-2":"styles-module__level-2--Xx8Ie","level-3":"styles-module__level-3--ySuP4","level-4":"styles-module__level-4--7uciy","level-5":"styles-module__level-5--AEspR","level-6":"styles-module__level-6--c28W9","level-7":"styles-module__level-7--gU++Q","level-8":"styles-module__level-8--dmg5P","level-9":"styles-module__level-9--X73V0","level-10":"styles-module__level-10--VAKPI","level-11":"styles-module__level-11--5rqim","level-12":"styles-module__level-12--8cLBy","level-13":"styles-module__level-13--qlzYN","level-14":"styles-module__level-14--Q7bCT","level-15":"styles-module__level-15---1KaW","level-16":"styles-module__level-16--BCkZb","level-17":"styles-module__level-17--tM3Ht","level-18":"styles-module__level-18--GkyjF","level-19":"styles-module__level-19--kxLhM","level-20":"styles-module__level-20--sIjDn"});
-// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
-var jsx_runtime = __webpack_require__(74848);
-;// ./src/components/Menus/Sidebar/FilePanel/FileTree/FileTreeItem/ItemEdit.jsx
-
-
-var ItemEdit = _ref => {
-  var {
-    item
-  } = _ref;
-  var handleKeyDown = e => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      var tree = item.getTree();
-      tree.completeRenaming();
-    }
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("input", (0,objectSpread2/* default */.A)({
-    onKeyDown: handleKeyDown,
-    "aria-label": "Rename file or folder"
-  }, item.getRenameInputProps()));
-};
-// EXTERNAL MODULE: ./src/components/Menus/Sidebar/FilePanel/FileTree/FileTreeItem/ItemIcon.tsx
-var ItemIcon = __webpack_require__(3427);
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(51649);
-;// ./src/components/Menus/Sidebar/FilePanel/FileTree/FileTreeItem/index.jsx
-
-
-
-
-
-
-
-var FileTreeItem = _ref => {
-  var {
-    item
-  } = _ref;
-  var itemData = item.getItemData();
-  return /*#__PURE__*/(0,external_react_.createElement)("div", (0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, item.getProps()), {}, {
-    key: item.getId(),
-    className: classnames_default()(styles_module["level-".concat(item.getItemMeta().level)])
-  }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(styles_module.treeItem, {
-      [styles_module.itemFocused]: item.isFocused(),
-      [styles_module.itemExpanded]: item.isExpanded(),
-      [styles_module.itemSelected]: item.isSelected(),
-      [styles_module.itemFolder]: item.isFolder()
-    }),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(ItemIcon.ItemIcon, {
-      type: itemData.type,
-      isExpanded: item.isExpanded(),
-      extension: itemData.extension
-    }), item.isRenaming() ? /*#__PURE__*/(0,jsx_runtime.jsx)(ItemEdit, {
-      item: item
-    }) : item.getItemName()]
-  }));
-};
-
-/***/ }),
-
-/***/ 70658:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   parseFileName: () => (/* binding */ parseFileName)
-/* harmony export */ });
-var parseFileName = fileName => {
-  // Find the last dot in the filename, ignoring a leading dot (for hidden files)
-  var lastDotIndex = fileName.lastIndexOf(".");
-  if (lastDotIndex > 0) {
-    // There is an extension (and it's not a hidden file like .gitignore)
-    var name = fileName.slice(0, lastDotIndex);
-    var extension = fileName.slice(lastDotIndex + 1);
-    return {
-      name,
-      extension
-    };
-  } else {
-    // No extension
-    return {
-      name: fileName,
-      extension: ""
-    };
-  }
-};
-
-/***/ }),
-
 /***/ 15590:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -96382,6 +96599,18 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ 68233:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","row":"styles-module__row--XtAJr","treeItem":"styles-module__treeItem--kbyYk","itemContent":"styles-module__itemContent--663gn","itemFocused":"styles-module__itemFocused--SmUbE","level-0":"styles-module__level-0--5PVOR","level-1":"styles-module__level-1--vTMYv","level-2":"styles-module__level-2--Xx8Ie","level-3":"styles-module__level-3--ySuP4","level-4":"styles-module__level-4--7uciy","level-5":"styles-module__level-5--AEspR","level-6":"styles-module__level-6--c28W9","level-7":"styles-module__level-7--gU++Q","level-8":"styles-module__level-8--dmg5P","level-9":"styles-module__level-9--X73V0","level-10":"styles-module__level-10--VAKPI","level-11":"styles-module__level-11--5rqim","level-12":"styles-module__level-12--8cLBy","level-13":"styles-module__level-13--qlzYN","level-14":"styles-module__level-14--Q7bCT","level-15":"styles-module__level-15---1KaW","level-16":"styles-module__level-16--BCkZb","level-17":"styles-module__level-17--tM3Ht","level-18":"styles-module__level-18--GkyjF","level-19":"styles-module__level-19--kxLhM","level-20":"styles-module__level-20--sIjDn","itemContentRenaming":"styles-module__itemContentRenaming--vlZsc"});
+
 /***/ }),
 
 /***/ 79473:
@@ -96392,7 +96621,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tree":"styles-module__tree--KziAJ","fileTreeActions":"styles-module__fileTreeActions--k+Wsd","iconButton":"styles-module__iconButton--6UIVe","fileActionButtons":"styles-module__fileActionButtons--uLkmA","dragline":"styles-module__dragline--RXmTT"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","tree":"styles-module__tree--KziAJ","fileTreeActions":"styles-module__fileTreeActions--k+Wsd","label":"styles-module__label--WY51f","iconButton":"styles-module__iconButton--6UIVe","iconButtonFilled":"styles-module__iconButtonFilled--w2vJC","dragline":"styles-module__dragline--RXmTT"});
+
+/***/ }),
+
+/***/ 50879:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"svgIcon":"styles-module__svgIcon--eiAsQ","svgIcon-12":"styles-module__svgIcon-12--ca5dh","svgIcon-13":"styles-module__svgIcon-13--H5H9q","svgIcon-14":"styles-module__svgIcon-14--02QBx","svgIcon-15":"styles-module__svgIcon-15---h9Pf","svgIcon-16":"styles-module__svgIcon-16--xSxA4","svgIcon-17":"styles-module__svgIcon-17--Puaug","svgIcon-18":"styles-module__svgIcon-18--QewDX","svgIcon-19":"styles-module__svgIcon-19--iC7Jc","svgIcon-20":"styles-module__svgIcon-20--PrJEw","svgIcon-21":"styles-module__svgIcon-21---Hd09","svgIcon-22":"styles-module__svgIcon-22--d8Xg1","svgIcon-23":"styles-module__svgIcon-23--pGQQQ","svgIcon-24":"styles-module__svgIcon-24--IqT3u","svgIcon-25":"styles-module__svgIcon-25--PfjHm","svgIcon-26":"styles-module__svgIcon-26--cFTjX","svgIcon-27":"styles-module__svgIcon-27--MPei3","svgIcon-28":"styles-module__svgIcon-28--W7Xyd","svgIcon-29":"styles-module__svgIcon-29--EUfun","svgIcon-30":"styles-module__svgIcon-30--lQhTn","svgIcon-31":"styles-module__svgIcon-31--Lf753","svgIcon-32":"styles-module__svgIcon-32--+xBfi"});
 
 /***/ }),
 
@@ -320538,8 +320779,8 @@ function HtmlRunner() {
     };
     (0, react_1.useEffect)(() => {
         eventListener();
-        dispatch((0, EditorSlice_1.loadingRunner)(ProjectTypes_1.ProjectTypes.WEB));
-        dispatch((0, EditorSlice_1.setLoadedRunner)(ProjectTypes_1.ProjectTypes.WEB));
+        dispatch((0, EditorSlice_1.loadingRunner)(ProjectTypes_1.ProjectType.WEB));
+        dispatch((0, EditorSlice_1.setLoadedRunner)(ProjectTypes_1.ProjectType.WEB));
     }, []);
     let timeout;
     (0, react_1.useEffect)(() => {
@@ -320722,7 +320963,7 @@ const PythonRunner_1 = __importDefault(__webpack_require__(74929));
 const HtmlRunner_1 = __importDefault(__webpack_require__(86224));
 const ProjectTypes_1 = __webpack_require__(27130);
 const RunnerFactory = ({ projectType, outputPanels = ["text", "visual"], packageApiUrl, }) => {
-    if (projectType === ProjectTypes_1.ProjectTypes.WEB) {
+    if (projectType === ProjectTypes_1.ProjectType.WEB) {
         return (0, jsx_runtime_1.jsx)(HtmlRunner_1.default, {});
     }
     else {
@@ -320732,6 +320973,69 @@ const RunnerFactory = ({ projectType, outputPanels = ["text", "visual"], package
 exports["default"] = RunnerFactory;
 
 
+/***/ }),
+
+/***/ 42884:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.FileTreeActions = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const plus_circle_svg_1 = __importDefault(__webpack_require__(45494));
+const minus_circle_svg_1 = __importDefault(__webpack_require__(71720));
+const add_folder_svg_1 = __importDefault(__webpack_require__(3503));
+const add_file_svg_1 = __importDefault(__webpack_require__(41625));
+const upload_file_svg_1 = __importDefault(__webpack_require__(98201));
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const styles_module_scss_1 = __importDefault(__webpack_require__(79473));
+const SvgIcon_1 = __webpack_require__(82917);
+const react_1 = __webpack_require__(51649);
+const FileTreeContext_1 = __webpack_require__(5323);
+const ProjectTypes_1 = __webpack_require__(27130);
+const FileTreeActions = ({ hasExpandedNodes, }) => {
+    const { expandAll, collapseAll, createComponent } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })), (0, jsx_runtime_1.jsx)("p", { className: styles_module_scss_1.default.label, children: "Project files" }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Upload file", onClick: () => {
+                    console.log("Upload file clicked");
+                }, className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: upload_file_svg_1.default, size: 16, "aria-hidden": "true", focusable: "false" }) })] }));
+};
+exports.FileTreeActions = FileTreeActions;
+
+
+/***/ }),
+
+/***/ 61576:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ItemEdit = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const styles_module_scss_1 = __importDefault(__webpack_require__(68233));
+const FileTreeContext_1 = __webpack_require__(5323);
+const ItemEdit = ({ item }) => {
+    const { cancelRenaming, completeRenaming } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            completeRenaming();
+            return;
+        }
+        if (e.key === "Escape" || e.key === "Esc") {
+            cancelRenaming(item);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("input", { name: "Item name", className: styles_module_scss_1.default.itemRenameInput, onKeyDown: handleKeyDown, onBlurCapture: () => cancelRenaming(item), "aria-label": "Rename file or folder", ...item.getRenameInputProps() }));
+};
+exports.ItemEdit = ItemEdit;
+
+
 /***/ }),
 
 /***/ 3427:
@@ -320744,20 +321048,153 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ItemIcon = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
-const arrow_right_svg_1 = __importDefault(__webpack_require__(17297));
-const arrow_down_svg_1 = __importDefault(__webpack_require__(95489));
-const FileIcon_1 = __importDefault(__webpack_require__(24329));
+const FileIcon_1 = __importDefault(__webpack_require__(94028));
 const folder_svg_1 = __importDefault(__webpack_require__(97091));
 const ProjectTypes_1 = __webpack_require__(27130);
-const ItemIcon = ({ type, isExpanded, extension, }) => {
+const ItemIcon = ({ type, extension }) => {
     if (type === ProjectTypes_1.ProjectComponentType.DIR) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isExpanded ? (0, jsx_runtime_1.jsx)(arrow_down_svg_1.default, {}) : (0, jsx_runtime_1.jsx)(arrow_right_svg_1.default, {}), (0, jsx_runtime_1.jsx)(folder_svg_1.default, {})] }));
+        return (0, jsx_runtime_1.jsx)(folder_svg_1.default, {});
     }
     return (0, jsx_runtime_1.jsx)(FileIcon_1.default, { ext: extension });
 };
 exports.ItemIcon = ItemIcon;
 
 
+/***/ }),
+
+/***/ 8153:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.FileTreeItem = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const arrow_right_svg_1 = __importDefault(__webpack_require__(17297));
+const arrow_down_svg_1 = __importDefault(__webpack_require__(95489));
+const styles_module_scss_1 = __importDefault(__webpack_require__(68233));
+const ItemEdit_1 = __webpack_require__(61576);
+const ItemIcon_1 = __webpack_require__(3427);
+const ProjectTypes_1 = __webpack_require__(27130);
+const treeGuides_1 = __webpack_require__(35258);
+const FileTreeItem = ({ item, guides, activeLevel, }) => {
+    const itemData = item.getItemData();
+    const level = item.getItemMeta().level;
+    const { layers, positions, sizes } = (0, treeGuides_1.getItemGuidesStyles)(guides, activeLevel);
+    return ((0, jsx_runtime_1.jsx)("div", { ...item.getProps(), className: (0, classnames_1.default)(styles_module_scss_1.default.row, styles_module_scss_1.default[`level-${level}`]), style: {
+            ["--guides-bg"]: layers.join(","),
+            ["--guides-pos"]: positions.join(","),
+            ["--guides-size"]: sizes.join(","),
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.treeItem, {
+                [styles_module_scss_1.default.itemFocused]: item.isFocused(),
+                [styles_module_scss_1.default.itemExpanded]: item.isExpanded(),
+                [styles_module_scss_1.default.itemSelected]: item.isSelected(),
+                [styles_module_scss_1.default.itemFolder]: item.isFolder(),
+            }), children: [itemData.type === ProjectTypes_1.ProjectComponentType.DIR ? (item.isExpanded() ? ((0, jsx_runtime_1.jsx)(arrow_down_svg_1.default, {})) : ((0, jsx_runtime_1.jsx)(arrow_right_svg_1.default, {}))) : null, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(item.isRenaming()
+                        ? styles_module_scss_1.default.itemContentRenaming
+                        : styles_module_scss_1.default.itemContent), children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { type: itemData.type, extension: itemData.extension }), item.isRenaming() ? (0, jsx_runtime_1.jsx)(ItemEdit_1.ItemEdit, { item: item }) : item.getItemName()] })] }) }));
+};
+exports.FileTreeItem = FileTreeItem;
+
+
+/***/ }),
+
+/***/ 5323:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.TreeContext = void 0;
+const react_1 = __webpack_require__(51649);
+exports.TreeContext = (0, react_1.createContext)({});
+
+
+/***/ }),
+
+/***/ 89163:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.parseFileName = void 0;
+const parseFileName = (fileName) => {
+    // Find the last dot in the filename, ignoring a leading dot (for hidden files)
+    const lastDotIndex = fileName.lastIndexOf(".");
+    if (lastDotIndex > 0) {
+        // There is an extension (and it's not a hidden file like .gitignore)
+        const name = fileName.slice(0, lastDotIndex);
+        const extension = fileName.slice(lastDotIndex + 1);
+        return { name, extension };
+    }
+    else {
+        // No extension
+        return { name: fileName, extension: "" };
+    }
+};
+exports.parseFileName = parseFileName;
+
+
+/***/ }),
+
+/***/ 35258:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getGuidesByIndex = getGuidesByIndex;
+exports.getActiveLevel = getActiveLevel;
+exports.getItemGuidesStyles = getItemGuidesStyles;
+exports.computeTreeGuides = computeTreeGuides;
+const GUIDES_INDENT = 20;
+const guidesNormalColor = "var(--normal-guide-color)";
+const guidesStrongColor = "var(--strong-guide-color)";
+function getGuidesByIndex(items) {
+    const levels = items.map((it) => it.getItemMeta().level);
+    return computeTreeGuides(levels);
+}
+function getActiveLevel(focusedItem) {
+    return focusedItem?.isExpanded()
+        ? focusedItem.getItemMeta().level + 1
+        : focusedItem?.getItemMeta().level ?? 0;
+}
+function getItemGuidesStyles(guides, activeLevel) {
+    const activeColumn = activeLevel != null ? activeLevel - 1 : null;
+    const layers = guides.reduce((acc, on, d) => {
+        if (!on)
+            return acc;
+        const color = activeColumn === d ? guidesStrongColor : guidesNormalColor;
+        return [...acc, `linear-gradient(${color}, ${color})`];
+    }, []);
+    const positions = guides.reduce((acc, on, d) => on ? [...acc, `${d * GUIDES_INDENT + GUIDES_INDENT / 2}px 0`] : acc, []);
+    const sizes = layers.map(() => "1px 100%");
+    return { layers, positions, sizes };
+}
+function computeTreeGuides(levels) {
+    const cont = []; // cont[d] = draw column d for descendants
+    const out = [];
+    for (let i = 0; i < levels.length; i++) {
+        const level = levels[i];
+        // trim continuation stack when we go up
+        cont.length = level;
+        // this row draws all ancestor columns that are "continuing"
+        out.push(cont.slice(0, level));
+        // decide if THIS node has a next sibling at the same level (look ahead)
+        let j = i + 1;
+        while (j < levels.length && levels[j] > level)
+            j++;
+        const hasNextSibling = j < levels.length && levels[j] === level;
+        // if next item is deeper, this node has visible children (expanded)
+        const hasVisibleChildren = i + 1 < levels.length && levels[i + 1] > level;
+        // descendants should draw a column at this level only if there are more siblings later
+        cont[level] = hasNextSibling || hasVisibleChildren;
+    }
+    return out;
+}
+
+
 /***/ }),
 
 /***/ 75383:
@@ -320789,7 +321226,7 @@ const useFileTree = ({ projectFiles, onRename, updateItemData, onOpenFile, }) =>
                 onClick: (e) => {
                     item.primaryAction();
                     item.setFocused();
-                    if (!item.isFolder()) {
+                    if (!item.isFolder() && !item.isRenaming()) {
                         onOpenFile(item.getItemName());
                         return;
                     }
@@ -320818,7 +321255,7 @@ const useFileTree = ({ projectFiles, onRename, updateItemData, onOpenFile, }) =>
             getItem: (itemId) => {
                 const item = projectFiles.find((item) => item.id === itemId);
                 if (!item) {
-                    throw Error("No item found in project files");
+                    throw Error(`No item found in project files with id: ${itemId}`);
                 }
                 return item;
             },
@@ -320863,7 +321300,7 @@ const react_redux_1 = __webpack_require__(14062);
 const react_1 = __webpack_require__(51649);
 const useFileTree_1 = __webpack_require__(75383);
 const EditorSlice_1 = __webpack_require__(68512);
-const helpers_1 = __webpack_require__(70658);
+const helpers_1 = __webpack_require__(89163);
 const ProjectTypes_1 = __webpack_require__(27130);
 const stores_1 = __webpack_require__(32132);
 /** Custom hook for action handlers on top headless-tree functionality */
@@ -320872,11 +321309,12 @@ const useFileTreeActions = () => {
     const openedFiles = (0, stores_1.useAppSelector)((state) => state.editor.openFiles);
     const dispatch = (0, react_redux_1.useDispatch)();
     const renameItem = (0, react_1.useCallback)((item, value) => {
-        const { type, id } = item.getItemData();
-        const updateKey = projectFiles.findIndex((f) => f.id === id);
+        const { type } = item.getItemData();
         const newComponent = {
             ...item.getItemData(),
+            isCreating: false,
         };
+        // TODO add validation logic
         if (type === ProjectTypes_1.ProjectComponentType.FILE) {
             const { name, extension } = (0, helpers_1.parseFileName)(value);
             newComponent.name = name;
@@ -320886,10 +321324,12 @@ const useFileTreeActions = () => {
             newComponent.name = value;
         }
         dispatch((0, EditorSlice_1.updateComponentName)({
-            key: updateKey,
-            ...newComponent,
+            id: newComponent.id,
+            name: newComponent.name,
+            extension: newComponent.extension,
         }));
-    }, [dispatch, projectFiles]);
+        dispatch((0, EditorSlice_1.updateProjectComponent)(newComponent));
+    }, [dispatch]);
     const openTreeFile = (0, react_1.useCallback)((fileName) => {
         if (openedFiles.flat().includes(fileName)) {
             const panelIndex = openedFiles
@@ -320920,6 +321360,7 @@ const useFileTreeActions = () => {
                 return;
             nearestFolder = parent;
         }
+        nearestFolder.expand();
         const selectedFolderData = nearestFolder.getItemData();
         const newComponent = {
             id: crypto.randomUUID(),
@@ -320927,19 +321368,34 @@ const useFileTreeActions = () => {
             extension: "",
             content: "",
             type,
+            isCreating: true,
         };
         if (type === ProjectTypes_1.ProjectComponentType.DIR) {
             newComponent.children = [];
         }
+        dispatch((0, EditorSlice_1.addProjectComponent)(newComponent));
         dispatch((0, EditorSlice_1.updateProjectComponent)({
             ...selectedFolderData,
             children: [...(selectedFolderData.children ?? []), newComponent.id],
         }));
-        dispatch((0, EditorSlice_1.addProjectComponent)(newComponent));
-    }, [dispatch, projectFiles, tree]);
+        // Start renaming the new node after it is added to the tree
+        setTimeout(() => {
+            tree.getItemInstance(newComponent.id)?.startRenaming();
+        }, 0);
+    }, [dispatch, tree]);
+    const cancelRenaming = (0, react_1.useCallback)((item) => {
+        tree.abortRenaming();
+        const itemData = item.getItemData();
+        if (itemData.isCreating) {
+            dispatch((0, EditorSlice_1.removeProjectComponent)(itemData.id));
+            tree.rebuildTree();
+        }
+    }, [dispatch, tree]);
     return {
         createComponent,
+        cancelRenaming,
         tree,
+        completeRenaming: tree.completeRenaming,
         ...restTreeProps,
     };
 };
@@ -320958,36 +321414,116 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FileTree = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
-const FileTreeItem_1 = __webpack_require__(92185);
+const FileTreeItem_1 = __webpack_require__(8153);
 const react_1 = __webpack_require__(51649);
-const FileTreeActions_1 = __webpack_require__(91148);
+const FileTreeActions_1 = __webpack_require__(42884);
 const styles_module_scss_1 = __importDefault(__webpack_require__(79473));
 const useFileTreeActions_1 = __webpack_require__(98028);
-const ProjectTypes_1 = __webpack_require__(27130);
 const stores_1 = __webpack_require__(32132);
+const FileTreeContext_1 = __webpack_require__(5323);
+const treeGuides_1 = __webpack_require__(35258);
 const FileTree = () => {
     const projectFiles = (0, stores_1.useAppSelector)((state) => state.editor.project.components);
     const focussedFileIndex = (0, stores_1.useAppSelector)((state) => state.editor.focussedFileIndices)[0];
     const openFiles = (0, stores_1.useAppSelector)((state) => state.editor.openFiles)[0];
-    const { createComponent, focusedItem, setFocusedItem, tree } = (0, useFileTreeActions_1.useFileTreeActions)();
+    const { createComponent, cancelRenaming, focusedItem, setFocusedItem, tree, completeRenaming, } = (0, useFileTreeActions_1.useFileTreeActions)();
+    const treeItems = tree
+        .getItems()
+        .filter((item) => projectFiles.some((f) => f.id === item.getId()));
+    const guidesByIndex = (0, treeGuides_1.getGuidesByIndex)(treeItems);
+    const activeLevel = (0, treeGuides_1.getActiveLevel)(treeItems.find((it) => it.getId() === focusedItem) ?? null);
+    // Sync focused file in editor with focused item in tree
     (0, react_1.useEffect)(() => {
-        if (!openFiles || !focussedFileIndex)
+        if (!openFiles || focussedFileIndex === undefined)
             return;
         const focusedFileName = openFiles[focussedFileIndex];
         const projectFile = projectFiles.find((f) => `${f.name}.${f.extension}` === focusedFileName);
         if (projectFile && projectFile.id !== focusedItem) {
             setFocusedItem(projectFile.id);
         }
-    }, [focussedFileIndex, openFiles, projectFiles, focusedItem, setFocusedItem]);
+        // exclude focusedItem to react only to editor changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focussedFileIndex, openFiles, projectFiles, setFocusedItem]);
     (0, react_1.useEffect)(() => {
         // project files changed
         tree.rebuildTree();
     }, [projectFiles, tree]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileTreeActions_1.FileTreeActions, { hasExpandedNodes: Boolean(tree.getState().expandedItems.length), onExpandAll: tree.expandAll, onCollapseAll: tree.collapseAll, onFileCreate: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), onDirCreate: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR) }), (0, jsx_runtime_1.jsxs)("div", { ...tree.getContainerProps(), className: styles_module_scss_1.default.tree, children: [tree.getItems().map((item, i) => ((0, jsx_runtime_1.jsx)(FileTreeItem_1.FileTreeItem, { item: item }, item.getId()))), (0, jsx_runtime_1.jsx)("div", { style: tree.getDragLineStyle(), className: styles_module_scss_1.default.dragline })] })] }));
+    const treeCtx = (0, react_1.useMemo)(() => ({
+        createComponent,
+        cancelRenaming,
+        completeRenaming,
+        collapseAll: tree.collapseAll,
+        expandAll: tree.expandAll,
+    }), [createComponent, cancelRenaming, completeRenaming, tree]);
+    return ((0, jsx_runtime_1.jsxs)(FileTreeContext_1.TreeContext.Provider, { value: treeCtx, children: [(0, jsx_runtime_1.jsx)(FileTreeActions_1.FileTreeActions, { hasExpandedNodes: Boolean(tree.getState().expandedItems.length) }), (0, jsx_runtime_1.jsxs)("div", { ...tree.getContainerProps(), className: styles_module_scss_1.default.tree, children: [treeItems.map((item, i) => ((0, jsx_runtime_1.jsx)(FileTreeItem_1.FileTreeItem, { item: item, guides: guidesByIndex[i], activeLevel: activeLevel }, item.getId()))), (0, jsx_runtime_1.jsx)("div", { style: tree.getDragLineStyle(), className: styles_module_scss_1.default.dragline })] })] }));
 };
 exports.FileTree = FileTree;
 
 
+/***/ }),
+
+/***/ 94028:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+const jsx_runtime_1 = __webpack_require__(74848);
+const file_svg_1 = __importDefault(__webpack_require__(70429));
+const python_file_svg_1 = __importDefault(__webpack_require__(90830));
+const html_file_svg_1 = __importDefault(__webpack_require__(59917));
+const css_file_svg_1 = __importDefault(__webpack_require__(66781));
+const csv_file_svg_1 = __importDefault(__webpack_require__(14222));
+const js_file_svg_1 = __importDefault(__webpack_require__(73895));
+const md_file_svg_1 = __importDefault(__webpack_require__(37505));
+const png_file_svg_1 = __importDefault(__webpack_require__(3745));
+const gif_file_svg_1 = __importDefault(__webpack_require__(32432));
+const jpg_file_svg_1 = __importDefault(__webpack_require__(19797));
+const mp3_file_svg_1 = __importDefault(__webpack_require__(97512));
+const wav_file_svg_1 = __importDefault(__webpack_require__(7384));
+const ProjectTypes_1 = __webpack_require__(27130);
+const SvgIcon_1 = __webpack_require__(82917);
+const extToIconMap = {
+    [ProjectTypes_1.ProjectFileExtension.HTML]: html_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.CSS]: css_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.PY]: python_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.JS]: js_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.CSV]: csv_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.PNG]: png_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.JPG]: jpg_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.GIF]: gif_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.MD]: md_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.MP3]: mp3_file_svg_1.default,
+    [ProjectTypes_1.ProjectFileExtension.WAV]: wav_file_svg_1.default,
+};
+const FileIcon = ({ ext = "" }) => {
+    const Icon = extToIconMap[ext] ?? file_svg_1.default;
+    return (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { size: 18, SvgElement: Icon });
+};
+exports["default"] = FileIcon;
+
+
+/***/ }),
+
+/***/ 82917:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.SvgIcon = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const styles_module_scss_1 = __importDefault(__webpack_require__(50879));
+const SvgIcon = ({ size, SvgElement, ...rest }) => {
+    return (0, jsx_runtime_1.jsx)(SvgElement, { className: styles_module_scss_1.default[`svgIcon-${size}`], ...rest });
+};
+exports.SvgIcon = SvgIcon;
+
+
 /***/ }),
 
 /***/ 54095:
@@ -321036,7 +321572,7 @@ const useProject = ({ code = null, loadCache = true, identifier = null, projectD
             loadCachedProject();
             return;
         }
-        const defaultProject = projectData?.project_type === ProjectTypes_1.ProjectTypes.WEB
+        const defaultProject = projectData?.project_type === ProjectTypes_1.ProjectType.WEB
             ? (0, defaultProjects_1.createDefaultWebProject)()
             : (0, defaultProjects_1.createDefaultPythonProject)();
         if (!identifier) {
@@ -321054,11 +321590,11 @@ const useProject = ({ code = null, loadCache = true, identifier = null, projectD
     }, [code, project?.identifier, cachedProject, i18n.language]);
     (0, react_1.useEffect)(() => {
         if (code && loading === "success") {
-            const isWebProject = project.project_type === ProjectTypes_1.ProjectTypes.WEB;
+            const isWebProject = project.project_type === ProjectTypes_1.ProjectType.WEB;
             const defaultName = isWebProject ? "index" : "main";
             const defaultExtension = isWebProject
-                ? ProjectTypes_1.ProjectFileExtensions.HTML
-                : ProjectTypes_1.ProjectFileExtensions.PY;
+                ? ProjectTypes_1.ProjectFileExtension.HTML
+                : ProjectTypes_1.ProjectFileExtension.PY;
             const mainComponent = project.components?.find((component) => component.name === defaultName &&
                 component.extension === defaultExtension) || {
                 name: defaultName,
@@ -321069,7 +321605,7 @@ const useProject = ({ code = null, loadCache = true, identifier = null, projectD
                 component.extension === defaultExtension)) || [];
             const updatedProject = {
                 ...project,
-                project_type: project.project_type || ProjectTypes_1.ProjectTypes.PYTHON,
+                project_type: project.project_type || ProjectTypes_1.ProjectType.PYTHON,
                 components: [
                     ...otherComponents,
                     {
@@ -321093,7 +321629,7 @@ exports.U = useProject;
 
 var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.setErrorDetails = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeRenameFileModal = exports.showRenameFileModal = exports.closeNewFileModal = exports.showNewFileModal = exports.closeErrorModal = exports.showErrorModal = exports.closeBetaModal = exports.showBetaModal = exports.updateProjectName = exports.updateProjectComponent = exports.updateComponentName = exports.triggerSave = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setReadOnly = exports.setProject = exports.setHasShownSavePrompt = exports.setNameError = exports.setIsSplitView = exports.setError = exports.setCascadeUpdate = exports.setBrowserPreview = exports.setIsOutputOnly = exports.setEmbedded = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
+exports.setErrorDetails = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeNewFileModal = exports.showNewFileModal = exports.closeErrorModal = exports.showErrorModal = exports.closeBetaModal = exports.showBetaModal = exports.updateProjectName = exports.updateProjectComponent = exports.updateComponentName = exports.triggerSave = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setReadOnly = exports.setProject = exports.setHasShownSavePrompt = exports.setNameError = exports.setIsSplitView = exports.setError = exports.setCascadeUpdate = exports.setBrowserPreview = exports.setIsOutputOnly = exports.setEmbedded = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.removeProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
 const toolkit_1 = __webpack_require__(12069);
 const ProjectTypes_1 = __webpack_require__(27130);
 exports.editorInitialState = {
@@ -321131,7 +321667,6 @@ exports.editorInitialState = {
     betaModalShowing: false,
     errorModalShowing: false,
     newFileModalShowing: false,
-    renameFileModalShowing: false,
     sidebarShowing: true,
     modals: {},
     errorDetails: {},
@@ -321180,10 +321715,15 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
                 content: action.payload.content || "",
                 id: action.payload.id,
                 type: action.payload.type,
+                isCreating: action.payload.isCreating || false,
             };
             state.project.components.push(newComponent);
             state.saving = "idle";
         },
+        removeProjectComponent: (state, action) => {
+            state.project.components = state.project.components.filter((component) => component.id !== action.payload);
+            state.saving = "idle";
+        },
         setPage: (state, action) => {
             state.page = action.payload;
         },
@@ -321210,7 +321750,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
             state.loading = "success";
             state.openFiles = [[]];
             const firstPanelIndex = 0;
-            if (state.project.project_type === ProjectTypes_1.ProjectTypes.WEB) {
+            if (state.project.project_type === ProjectTypes_1.ProjectType.WEB) {
                 state.openFiles[firstPanelIndex].push("index.html");
             }
             else {
@@ -321231,7 +321771,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
             state.saveTriggered = true;
         },
         updateProjectComponent: (state, action) => {
-            const { id, extension, name: fileName, content, cascadeUpdate, children, } = action.payload;
+            const { id, extension, name: fileName, content, cascadeUpdate, children, isCreating, } = action.payload;
             const mapped = state.project.components.map((item) => {
                 if ((id && item.id !== id) ||
                     item.extension !== extension ||
@@ -321240,10 +321780,10 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
                 }
                 // Only include children if the item is a directory
                 if (item.type === ProjectTypes_1.ProjectComponentType.DIR) {
-                    return { ...item, content, children };
+                    return { ...item, children, isCreating };
                 }
                 else {
-                    return { ...item, content };
+                    return { ...item, content, isCreating };
                 }
             });
             state.project.components = mapped;
@@ -321254,20 +321794,24 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
             state.saving = "idle";
         },
         updateComponentName: (state, action) => {
-            const key = action.payload.key;
+            const id = action.payload.id;
             const name = action.payload.name;
             const extension = action.payload.extension;
-            const oldComponent = state.project.components[key];
-            const oldName = oldComponent.extension
+            const oldComponent = state.project.components.find((component) => component.id === id);
+            if (!oldComponent) {
+                console.error(`No component found with id: ${id}`);
+                return;
+            }
+            const oldFullName = oldComponent.extension
                 ? `${oldComponent.name}.${oldComponent.extension}`
                 : oldComponent.name;
             oldComponent.name = name;
             oldComponent.extension = extension;
-            if (state.openFiles.flat().includes(oldName)) {
+            if (state.openFiles.flat().includes(oldFullName)) {
                 const panelIndex = state.openFiles
-                    .map((fileNames) => fileNames.includes(oldName))
+                    .map((fileNames) => fileNames.includes(oldFullName))
                     .indexOf(true);
-                const fileIndex = state.openFiles[panelIndex].indexOf(oldName);
+                const fileIndex = state.openFiles[panelIndex].indexOf(oldFullName);
                 if (state.openFiles[panelIndex]) {
                     state.openFiles[panelIndex][fileIndex] = `${name}.${extension}`;
                 }
@@ -321331,14 +321875,6 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
             state.newFileModalShowing = false;
             state.nameError = "";
         },
-        showRenameFileModal: (state, action) => {
-            state.modals.renameFile = action.payload;
-            state.renameFileModalShowing = true;
-        },
-        closeRenameFileModal: (state) => {
-            state.renameFileModalShowing = false;
-            state.nameError = "";
-        },
         showSidebar: (state) => {
             state.sidebarShowing = true;
         },
@@ -321354,7 +321890,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
     },
 });
 // Action creators are generated for each case reducer function
-_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenFiles = _a.setOpenFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setEmbedded = _a.setEmbedded, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setBrowserPreview = _a.setBrowserPreview, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setIsSplitView = _a.setIsSplitView, exports.setNameError = _a.setNameError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.setReadOnly = _a.setReadOnly, exports.stopCodeRun = _a.stopCodeRun, exports.stopDraw = _a.stopDraw, exports.triggerCodeRun = _a.triggerCodeRun, exports.triggerDraw = _a.triggerDraw, exports.triggerSave = _a.triggerSave, exports.updateComponentName = _a.updateComponentName, exports.updateProjectComponent = _a.updateProjectComponent, exports.updateProjectName = _a.updateProjectName, exports.showBetaModal = _a.showBetaModal, exports.closeBetaModal = _a.closeBetaModal, exports.showErrorModal = _a.showErrorModal, exports.closeErrorModal = _a.closeErrorModal, exports.showNewFileModal = _a.showNewFileModal, exports.closeNewFileModal = _a.closeNewFileModal, exports.showRenameFileModal = _a.showRenameFileModal, exports.closeRenameFileModal = _a.closeRenameFileModal, exports.showSidebar = _a.showSidebar, exports.hideSidebar = _a.hideSidebar, exports.disableTheming = _a.disableTheming, exports.setErrorDetails = _a.setErrorDetails;
+_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.removeProjectComponent = _a.removeProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenFiles = _a.setOpenFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setEmbedded = _a.setEmbedded, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setBrowserPreview = _a.setBrowserPreview, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setIsSplitView = _a.setIsSplitView, exports.setNameError = _a.setNameError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.setReadOnly = _a.setReadOnly, exports.stopCodeRun = _a.stopCodeRun, exports.stopDraw = _a.stopDraw, exports.triggerCodeRun = _a.triggerCodeRun, exports.triggerDraw = _a.triggerDraw, exports.triggerSave = _a.triggerSave, exports.updateComponentName = _a.updateComponentName, exports.updateProjectComponent = _a.updateProjectComponent, exports.updateProjectName = _a.updateProjectName, exports.showBetaModal = _a.showBetaModal, exports.closeBetaModal = _a.closeBetaModal, exports.showErrorModal = _a.showErrorModal, exports.closeErrorModal = _a.closeErrorModal, exports.showNewFileModal = _a.showNewFileModal, exports.closeNewFileModal = _a.closeNewFileModal, exports.showSidebar = _a.showSidebar, exports.hideSidebar = _a.hideSidebar, exports.disableTheming = _a.disableTheming, exports.setErrorDetails = _a.setErrorDetails;
 exports["default"] = exports.EditorSlice.reducer;
 
 
@@ -321450,63 +321986,31 @@ exports["default"] = store;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ProjectFileExtensions = exports.ProjectTypes = exports.ProjectComponentType = void 0;
+exports.ProjectFileExtension = exports.ProjectType = exports.ProjectComponentType = void 0;
 var ProjectComponentType;
 (function (ProjectComponentType) {
     ProjectComponentType["FILE"] = "file";
     ProjectComponentType["DIR"] = "dir";
 })(ProjectComponentType || (exports.ProjectComponentType = ProjectComponentType = {}));
-var ProjectTypes;
-(function (ProjectTypes) {
-    ProjectTypes["WEB"] = "web";
-    ProjectTypes["PYTHON"] = "python";
-})(ProjectTypes || (exports.ProjectTypes = ProjectTypes = {}));
-var ProjectFileExtensions;
-(function (ProjectFileExtensions) {
-    ProjectFileExtensions["HTML"] = "html";
-    ProjectFileExtensions["CSS"] = "css";
-    ProjectFileExtensions["PY"] = "py";
-    ProjectFileExtensions["JS"] = "js";
-    ProjectFileExtensions["CSV"] = "csv";
-    ProjectFileExtensions["PNG"] = "png";
-    ProjectFileExtensions["JPG"] = "jpg";
-    ProjectFileExtensions["GIF"] = "gif";
-    ProjectFileExtensions["MD"] = "md";
-})(ProjectFileExtensions || (exports.ProjectFileExtensions = ProjectFileExtensions = {}));
-
-
-/***/ }),
-
-/***/ 24329:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-const jsx_runtime_1 = __webpack_require__(74848);
-const file_svg_1 = __importDefault(__webpack_require__(70429));
-const python_file_svg_1 = __importDefault(__webpack_require__(90830));
-const html_file_svg_1 = __importDefault(__webpack_require__(59917));
-const css_file_svg_1 = __importDefault(__webpack_require__(66781));
-const csv_file_svg_1 = __importDefault(__webpack_require__(14222));
-const ProjectTypes_1 = __webpack_require__(27130);
-const FileIcon = ({ ext }) => {
-    switch (ext) {
-        case ProjectTypes_1.ProjectFileExtensions.PY:
-            return (0, jsx_runtime_1.jsx)(python_file_svg_1.default, { "data-testid": "pythonIcon" });
-        case ProjectTypes_1.ProjectFileExtensions.HTML:
-            return (0, jsx_runtime_1.jsx)(html_file_svg_1.default, { "data-testid": "htmlIcon" });
-        case ProjectTypes_1.ProjectFileExtensions.CSS:
-            return (0, jsx_runtime_1.jsx)(css_file_svg_1.default, { "data-testid": "cssIcon" });
-        case ProjectTypes_1.ProjectFileExtensions.CSV:
-            return (0, jsx_runtime_1.jsx)(csv_file_svg_1.default, { "data-testid": "csvIcon" });
-        default:
-            return (0, jsx_runtime_1.jsx)(file_svg_1.default, { "data-testid": "defaultFileIcon" });
-    }
-};
-exports["default"] = FileIcon;
+var ProjectType;
+(function (ProjectType) {
+    ProjectType["WEB"] = "web";
+    ProjectType["PYTHON"] = "python";
+})(ProjectType || (exports.ProjectType = ProjectType = {}));
+var ProjectFileExtension;
+(function (ProjectFileExtension) {
+    ProjectFileExtension["HTML"] = "html";
+    ProjectFileExtension["CSS"] = "css";
+    ProjectFileExtension["PY"] = "py";
+    ProjectFileExtension["JS"] = "js";
+    ProjectFileExtension["CSV"] = "csv";
+    ProjectFileExtension["PNG"] = "png";
+    ProjectFileExtension["JPG"] = "jpg";
+    ProjectFileExtension["GIF"] = "gif";
+    ProjectFileExtension["MD"] = "md";
+    ProjectFileExtension["MP3"] = "mp3";
+    ProjectFileExtension["WAV"] = "wav";
+})(ProjectFileExtension || (exports.ProjectFileExtension = ProjectFileExtension = {}));
 
 
 /***/ }),
@@ -321521,21 +322025,21 @@ exports.U = void 0;
 const EditorSlice_1 = __webpack_require__(68512);
 const ProjectTypes_1 = __webpack_require__(27130);
 const allowedExtensionsString_1 = __webpack_require__(79608);
-const allowedCommonExtensions = [ProjectTypes_1.ProjectFileExtensions.MD];
+const allowedCommonExtensions = [ProjectTypes_1.ProjectFileExtension.MD];
 const allowedExtensions = {
-    [ProjectTypes_1.ProjectTypes.PYTHON]: [
+    [ProjectTypes_1.ProjectType.PYTHON]: [
         ...allowedCommonExtensions,
-        ProjectTypes_1.ProjectFileExtensions.PY,
-        ProjectTypes_1.ProjectFileExtensions.CSV,
+        ProjectTypes_1.ProjectFileExtension.PY,
+        ProjectTypes_1.ProjectFileExtension.CSV,
     ],
-    [ProjectTypes_1.ProjectTypes.WEB]: [
+    [ProjectTypes_1.ProjectType.WEB]: [
         ...allowedCommonExtensions,
-        ProjectTypes_1.ProjectFileExtensions.HTML,
-        ProjectTypes_1.ProjectFileExtensions.CSS,
-        ProjectTypes_1.ProjectFileExtensions.JS,
-        ProjectTypes_1.ProjectFileExtensions.PNG,
-        ProjectTypes_1.ProjectFileExtensions.JPG,
-        ProjectTypes_1.ProjectFileExtensions.GIF,
+        ProjectTypes_1.ProjectFileExtension.HTML,
+        ProjectTypes_1.ProjectFileExtension.CSS,
+        ProjectTypes_1.ProjectFileExtension.JS,
+        ProjectTypes_1.ProjectFileExtension.PNG,
+        ProjectTypes_1.ProjectFileExtension.JPG,
+        ProjectTypes_1.ProjectFileExtension.GIF,
     ],
 };
 const reservedFileNames = ["INSTRUCTIONS.md"];
@@ -321551,7 +322055,7 @@ const isValidFileName = (fileName, projectType, componentNames) => {
         return false;
     }
 };
-const validateFileName = (fileName, projectType = ProjectTypes_1.ProjectTypes.PYTHON, componentNames, dispatch, t, callback, currentFileName = null) => {
+const validateFileName = (fileName, projectType = ProjectTypes_1.ProjectType.PYTHON, componentNames, dispatch, t, callback, currentFileName = null) => {
     const extension = fileName.split(".").slice(1).join(".");
     if (isValidFileName(fileName, projectType, componentNames) ||
         (currentFileName && fileName === currentFileName)) {
@@ -321590,14 +322094,14 @@ const ProjectTypes_1 = __webpack_require__(27130);
 const createDefaultPythonProject = () => {
     const mainComponent = {
         id: crypto.randomUUID(),
-        extension: ProjectTypes_1.ProjectFileExtensions.PY,
+        extension: ProjectTypes_1.ProjectFileExtension.PY,
         name: "main",
         content: "",
         default: true,
         type: "file",
     };
     return {
-        project_type: ProjectTypes_1.ProjectTypes.PYTHON,
+        project_type: ProjectTypes_1.ProjectType.PYTHON,
         name: "untitled",
         locale: null,
         components: [
@@ -321614,20 +322118,20 @@ exports.createDefaultPythonProject = createDefaultPythonProject;
 const createDefaultWebProject = () => {
     const indexComponent = {
         id: crypto.randomUUID(),
-        extension: ProjectTypes_1.ProjectFileExtensions.HTML,
+        extension: ProjectTypes_1.ProjectFileExtension.HTML,
         name: "index",
         content: "",
         type: "file",
     };
     const styleComponent = {
         id: crypto.randomUUID(),
-        extension: ProjectTypes_1.ProjectFileExtensions.CSS,
+        extension: ProjectTypes_1.ProjectFileExtension.CSS,
         name: "style",
         content: "",
         type: "file",
     };
     return {
-        project_type: ProjectTypes_1.ProjectTypes.WEB,
+        project_type: ProjectTypes_1.ProjectType.WEB,
         name: "untitled",
         components: [
             indexComponent,
@@ -342707,7 +343211,7 @@ var SidebarPanel = props => {
     Footer,
     className,
     buttons = [],
-    defaultWidth = "250px"
+    defaultWidth = "270px"
   } = props;
   var isMobile = (0,react_responsive.useMediaQuery)({
     query: mediaQueryBreakpoints.MOBILE_MEDIA_QUERY
@@ -342755,11 +343259,12 @@ var FileTree = __webpack_require__(88675);
 
 var FilePanel = () => {
   var project = (0,external_react_redux_.useSelector)(state => state.editor.project);
+  var projectComponents = (0,external_react_redux_.useSelector)(state => state.editor.project.components);
   if (!project || !project.components) {
     return null;
   }
   return /*#__PURE__*/(0,jsx_runtime.jsx)(Sidebar_SidebarPanel, {
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)(FileTree.FileTree, {})
+    children: (projectComponents === null || projectComponents === void 0 ? void 0 : projectComponents.length) > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)(FileTree.FileTree, {})
   });
 };
 /* harmony default export */ const FilePanel_FilePanel = (FilePanel);
@@ -385238,68 +385743,6 @@ var ErrorModal = _ref => {
   });
 };
 /* harmony default export */ const Modals_ErrorModal = (ErrorModal);
-;// ./src/components/Modals/RenameFileModal.jsx
-
-
-
-
-
-
-
-
-
-var RenameFileModal = () => {
-  var dispatch = (0,external_react_redux_.useDispatch)();
-  var {
-    t
-  } = (0,es.useTranslation)();
-  var projectType = (0,external_react_redux_.useSelector)(state => state.editor.project.project_type);
-  var projectComponents = (0,external_react_redux_.useSelector)(state => state.editor.project.components);
-  var isModalOpen = (0,external_react_redux_.useSelector)(state => state.editor.renameFileModalShowing);
-  var {
-    name: currentName,
-    ext: currentExtension,
-    fileKey
-  } = (0,external_react_redux_.useSelector)(state => state.editor.modals.renameFile);
-  var componentNames = projectComponents.map(component => "".concat(component.name, ".").concat(component.extension));
-  var closeModal = () => dispatch((0,EditorSlice.closeRenameFileModal)());
-  var [fileName, setFileName] = (0,external_react_.useState)("".concat(currentName, ".").concat(currentExtension));
-  var renameComponent = () => {
-    var name = fileName.split(".")[0];
-    var extension = fileName.split(".").slice(1).join(".");
-    (0,componentNameValidation/* validateFileName */.U)(fileName, projectType, componentNames, dispatch, t, () => {
-      dispatch((0,EditorSlice.updateComponentName)({
-        key: fileKey,
-        extension: extension,
-        name: name
-      }));
-      closeModal();
-    }, "".concat(currentName, ".").concat(currentExtension));
-  };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(Modals_InputModal, {
-    isOpen: isModalOpen,
-    closeModal: closeModal,
-    withCloseButton: true,
-    heading: t("filePanel.renameFileModal.heading"),
-    inputs: [{
-      label: t("filePanel.renameFileModal.inputLabel"),
-      value: fileName,
-      setValue: setFileName,
-      validateName: true
-    }],
-    defaultCallback: renameComponent,
-    buttons: [/*#__PURE__*/(0,jsx_runtime.jsx)(Button/* default */.A, {
-      className: "btn--primary",
-      buttonText: t("filePanel.renameFileModal.save"),
-      onClickHandler: renameComponent
-    }, "rename"), /*#__PURE__*/(0,jsx_runtime.jsx)(Button/* default */.A, {
-      className: "btn--secondary",
-      buttonText: t("filePanel.renameFileModal.cancel"),
-      onClickHandler: closeModal
-    }, "close")]
-  });
-};
-/* harmony default export */ const Modals_RenameFileModal = (RenameFileModal);
 ;// ./src/utils/ToastCloseButton.jsx
 
 
@@ -385350,7 +385793,6 @@ var ToastCloseButton = _ref => {
 
 
 
-
 
 var WebComponentLoader = props => {
   var {
@@ -385382,7 +385824,6 @@ var WebComponentLoader = props => {
   var modals = (0,external_react_redux_.useSelector)(state => state.editor.modals);
   var errorModalShowing = (0,external_react_redux_.useSelector)(state => state.editor.errorModalShowing);
   var newFileModalShowing = (0,external_react_redux_.useSelector)(state => state.editor.newFileModalShowing);
-  var renameFileModalShowing = (0,external_react_redux_.useSelector)(state => state.editor.renameFileModalShowing);
   var {
     i18n
   } = (0,es.useTranslation)();
@@ -385457,7 +385898,7 @@ var WebComponentLoader = props => {
           outputPanels: outputPanels,
           outputSplitView: outputSplitView,
           packageApiUrl: packageApiUrl
-        }), errorModalShowing && /*#__PURE__*/(0,jsx_runtime.jsx)(Modals_ErrorModal, {}), newFileModalShowing && /*#__PURE__*/(0,jsx_runtime.jsx)(Modals_NewFileModal, {}), renameFileModalShowing && modals.renameFile && /*#__PURE__*/(0,jsx_runtime.jsx)(Modals_RenameFileModal, {})]
+        }), errorModalShowing && /*#__PURE__*/(0,jsx_runtime.jsx)(Modals_ErrorModal, {}), newFileModalShowing && /*#__PURE__*/(0,jsx_runtime.jsx)(Modals_NewFileModal, {})]
       })
     })
   });