diff --git a/client/components/Menubar/Menubar.jsx b/client/components/Menubar/Menubar.jsx
index b806246515..014eece78b 100644
--- a/client/components/Menubar/Menubar.jsx
+++ b/client/components/Menubar/Menubar.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import useModalClose from '../../common/useModalClose';
 import { MenuOpenContext, MenubarContext } from './contexts';
 
@@ -62,9 +63,14 @@ function Menubar({ children, className }) {
     [setMenuOpen, toggleMenuOpen, clearHideTimeout, handleBlur]
   );
 
+  // change menu direction to rtl for rtl languages like [urdo, persian, arabic, ...]
+  let newClassName = className;
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') newClassName = 'rtl-nav';
+
   return (
     <MenubarContext.Provider value={contextValue}>
-      <div className={className} ref={nodeRef}>
+      <div className={newClassName} ref={nodeRef}>
         <MenuOpenContext.Provider value={menuOpen}>
           {children}
         </MenuOpenContext.Provider>
diff --git a/client/components/Menubar/MenubarItem.jsx b/client/components/Menubar/MenubarItem.jsx
index 8d595bb5cd..2a92551555 100644
--- a/client/components/Menubar/MenubarItem.jsx
+++ b/client/components/Menubar/MenubarItem.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import ButtonOrLink from '../../common/ButtonOrLink';
 import { MenubarContext, ParentMenuContext } from './contexts';
 
@@ -26,8 +27,13 @@ function MenubarItem({
   const role = customRole || 'menuitem';
   const ariaSelected = role === 'option' ? { 'aria-selected': selected } : {};
 
+  // change sub menu direction
+  let newClassName = 'nav__dropdown-item';
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') newClassName = 'rtl-nav__dropdown-item';
+
   return (
-    <li className={className}>
+    <li className={newClassName}>
       <ButtonOrLink {...rest} {...handlers} {...ariaSelected} role={role} />
     </li>
   );
diff --git a/client/components/Menubar/MenubarSubmenu.jsx b/client/components/Menubar/MenubarSubmenu.jsx
index 13b0e33177..ca8c387a29 100644
--- a/client/components/Menubar/MenubarSubmenu.jsx
+++ b/client/components/Menubar/MenubarSubmenu.jsx
@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, MenubarContext, ParentMenuContext } from './contexts';
 
@@ -28,6 +29,19 @@ export function useMenuProps(id) {
 function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
   const { isOpen, handlers } = useMenuProps(id);
 
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+  let selectedClassNames = {
+    nav__item_header: 'nav__item-header',
+    nav__item_header_triangle: 'nav__item-header-triangle'
+  };
+  if (direction === 'rtl') {
+    selectedClassNames = {
+      nav__item_header: 'rtl-nav__item-header',
+      nav__item_header_triangle: 'rtl-nav__item-header-triangle'
+    };
+  }
+
   return (
     <button
       {...handlers}
@@ -36,9 +50,9 @@ function MenubarTrigger({ id, title, role, hasPopup, ...props }) {
       aria-haspopup={hasPopup}
       aria-expanded={isOpen}
     >
-      <span className="nav__item-header">{title}</span>
+      <span className={selectedClassNames.nav__item_header}>{title}</span>
       <TriangleIcon
-        className="nav__item-header-triangle"
+        className={selectedClassNames.nav__item_header_triangle}
         focusable="false"
         aria-hidden="true"
       />
@@ -63,8 +77,13 @@ MenubarTrigger.defaultProps = {
  * -----------------------------------------------------------------------------------------------*/
 
 function MenubarList({ id, children, role, ...props }) {
+  // change sub menu direction
+  let newClassName = 'nav__dropdown';
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') newClassName = 'rtl-nav__dropdown';
+
   return (
-    <ul className="nav__dropdown" role={role} {...props}>
+    <ul className={newClassName} role={role} {...props}>
       <ParentMenuContext.Provider value={id}>
         {children}
       </ParentMenuContext.Provider>
@@ -102,8 +121,14 @@ function MenubarSubmenu({
 
   const hasPopup = listRole === 'listbox' ? 'listbox' : 'menu';
 
+  // change sub menu direction
+  let newClassName = classNames('nav__item', isOpen && 'nav__item--open');
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl')
+    newClassName = classNames('rtl-nav__item', isOpen && 'rtl-nav__item--open');
+
   return (
-    <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
+    <li className={newClassName}>
       <MenubarTrigger
         id={id}
         title={title}
diff --git a/client/constants.js b/client/constants.js
index fa6010aed1..0aee65edb8 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -90,6 +90,7 @@ export const HIDE_TOAST = 'HIDE_TOAST';
 export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
 export const SET_THEME = 'SET_THEME';
 export const SET_LANGUAGE = 'SET_LANGUAGE';
+export const SET_DIRECTION = 'SET_DIRECTION';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';
diff --git a/client/i18n.js b/client/i18n.js
index 722e3856a5..611516f466 100644
--- a/client/i18n.js
+++ b/client/i18n.js
@@ -23,6 +23,18 @@ import {
 
 const fallbackLng = ['en-US'];
 
+export const rtlLanguageList = [
+  'ar', // Arabic (Standard)
+  'fa', // Persian (Farsi)
+  'ur', // Urdu
+  'he', // Hebrew
+  'ckb', // Kurdish (Sorani)
+  'ps', // Pashto
+  'sd', // Sindhi
+  'ug', // Uyghur
+  'dv' // Divehi (Dhivehi)
+];
+
 export const availableLanguages = [
   'be',
   'de',
diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 2dedc82656..33d3d2acf2 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -20,6 +20,9 @@ const Overlay = ({
 
   const previousPath = useSelector((state) => state.ide.previousPath);
 
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+
   const ref = useRef(null);
 
   const browserHistory = useHistory();
@@ -41,23 +44,49 @@ const Overlay = ({
 
   useModalClose(close, ref);
 
+  // for better ui in rtl
+  let classNames = {
+    overlay__is_fixed_height: 'overlay--is-fixed-height',
+    overlay__content: 'overlay__content',
+    overlay__body: 'overlay__body',
+    overlay__header: 'overlay__header',
+    overlay__title: 'overlay__title',
+    overlay__actions: 'overlay__actions',
+    overlay__close_button: 'overlay__close-button',
+    overlay__actions_mobile: 'overlay__actions-mobile'
+  };
+  if (direction === 'rtl') {
+    classNames = {
+      overlay__is_fixed_height: 'rtl-overlay--is-fixed-height',
+      overlay__content: 'rtl-overlay__content',
+      overlay__body: 'rtl-overlay__body',
+      overlay__header: 'rtl-overlay__header',
+      overlay__title: 'rtl-overlay__title',
+      overlay__actions: 'rtl-overlay__actions',
+      overlay__close_button: 'rtl-overlay__close-button',
+      overlay__actions_mobile: 'rtl-overlay__actions-mobile'
+    };
+  }
+
   return (
     <div
-      className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}
+      className={`overlay ${
+        isFixedHeight ? classNames.overlay__is_fixed_height : ''
+      }`}
     >
-      <div className="overlay__content">
+      <div className={classNames.overlay__content}>
         <section
           role="main"
-          aria-label={ariaLabel}
+          aria-label={classNames.ariaLabel}
           ref={ref}
-          className="overlay__body"
+          className={classNames.overlay__body}
         >
-          <header className="overlay__header">
-            <h2 className="overlay__title">{title}</h2>
-            <div className="overlay__actions">
+          <header className={classNames.overlay__header}>
+            <h2 className={classNames.overlay__title}>{title}</h2>
+            <div className={classNames.overlay__actions}>
               <MediaQuery minWidth={770}>{actions}</MediaQuery>
               <button
-                className="overlay__close-button"
+                className={classNames.overlay__close_button}
                 onClick={close}
                 aria-label={t('Overlay.AriaLabel', { title })}
               >
@@ -67,7 +96,9 @@ const Overlay = ({
           </header>
           <MediaQuery maxWidth={769}>
             {actions && (
-              <div className="overlay__actions-mobile">{actions}</div>
+              <div className={classNames.overlay__actions_mobile}>
+                {actions}
+              </div>
             )}
           </MediaQuery>
           {children}
diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
index e0473bd995..d096e3c7f9 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.js
@@ -1,6 +1,7 @@
 import i18next from 'i18next';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
+import { rtlLanguageList } from '../../../i18n';
 
 function updatePreferences(formParams, dispatch) {
   apiClient
@@ -235,6 +236,14 @@ export function setLanguage(value, { persistPreference = true } = {}) {
       type: ActionTypes.SET_LANGUAGE,
       language: value
     });
+    // change direction base on language
+    dispatch({
+      type: ActionTypes.SET_DIRECTION,
+      direction:
+        Array.isArray(rtlLanguageList) && rtlLanguageList.includes(value)
+          ? 'rtl'
+          : 'ltr'
+    });
     const state = getState();
     if (persistPreference && state.user.authenticated) {
       const formParams = {
diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx
index 8393116308..a3f786e8fe 100644
--- a/client/modules/IDE/components/Editor/index.jsx
+++ b/client/modules/IDE/components/Editor/index.jsx
@@ -532,37 +532,75 @@ class Editor extends React.Component {
 
     const { currentLine } = this.state;
 
+    // for better ui in rtl
+    const { direction } = this.props; // Access direction from props
+    let editorHeader = 'editor__header';
+    let editorHeaderContent = (
+      <>
+        <button
+          aria-label={this.props.t('Editor.OpenSketchARIA')}
+          className="sidebar__contract"
+          onClick={() => {
+            this.props.collapseSidebar();
+            this.props.closeProjectOptions();
+          }}
+        >
+          <LeftArrowIcon focusable="false" aria-hidden="true" />
+        </button>
+        <button
+          aria-label={this.props.t('Editor.CloseSketchARIA')}
+          className="sidebar__expand"
+          onClick={this.props.expandSidebar}
+        >
+          <RightArrowIcon focusable="false" aria-hidden="true" />
+        </button>
+        <div className="editor__file-name">
+          <span>
+            {this.props.file.name}
+            <UnsavedChangesIndicator />
+          </span>
+          <Timer />
+        </div>
+      </>
+    );
+    if (direction === 'rtl') {
+      editorHeader = 'editor__header-rtl';
+      editorHeaderContent = (
+        <>
+          <div className="editor__file-name-rtl">
+            <span>
+              {this.props.file.name}
+              <UnsavedChangesIndicator />
+            </span>
+            <Timer />
+          </div>
+          <button
+            aria-label={this.props.t('Editor.CloseSketchARIA')}
+            className="sidebar__expand"
+            onClick={this.props.expandSidebar}
+          >
+            <LeftArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+          <button
+            aria-label={this.props.t('Editor.OpenSketchARIA')}
+            className="sidebar__contract"
+            onClick={() => {
+              this.props.collapseSidebar();
+              this.props.closeProjectOptions();
+            }}
+          >
+            <RightArrowIcon focusable="false" aria-hidden="true" />
+          </button>
+        </>
+      );
+    }
+
     return (
       <MediaQuery minWidth={770}>
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <div className="editor__header">
-                <button
-                  aria-label={this.props.t('Editor.OpenSketchARIA')}
-                  className="sidebar__contract"
-                  onClick={() => {
-                    this.props.collapseSidebar();
-                    this.props.closeProjectOptions();
-                  }}
-                >
-                  <LeftArrowIcon focusable="false" aria-hidden="true" />
-                </button>
-                <button
-                  aria-label={this.props.t('Editor.CloseSketchARIA')}
-                  className="sidebar__expand"
-                  onClick={this.props.expandSidebar}
-                >
-                  <RightArrowIcon focusable="false" aria-hidden="true" />
-                </button>
-                <div className="editor__file-name">
-                  <span>
-                    {this.props.file.name}
-                    <UnsavedChangesIndicator />
-                  </span>
-                  <Timer />
-                </div>
-              </div>
+              <div className={editorHeader}>{editorHeaderContent}</div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -672,7 +710,8 @@ Editor.propTypes = {
   provideController: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   setSelectedFile: PropTypes.func.isRequired,
-  expandConsole: PropTypes.func.isRequired
+  expandConsole: PropTypes.func.isRequired,
+  direction: PropTypes.string.isRequired // Add direction to propTypes
 };
 
 function mapStateToProps(state) {
@@ -686,7 +725,7 @@ function mapStateToProps(state) {
     user: state.user,
     project: state.project,
     consoleEvents: state.console,
-
+    direction: state.preferences.direction, // Map direction to props
     ...state.preferences,
     ...state.ide,
     ...state.project,
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index e589fb3cff..99c1f95915 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
 import * as IDEActions from '../actions/ide';
@@ -216,7 +216,8 @@ const FileNode = ({
     'sidebar__file-item--selected': isSelectedFile,
     'sidebar__file-item--open': isOptionsOpen,
     'sidebar__file-item--editing': isEditingName,
-    'sidebar__file-item--closed': isFolderClosed
+    'sidebar__file-item--closed': isFolderClosed,
+    ltr: true // for better ui in rtl
   });
 
   const isFile = fileType === 'file';
@@ -225,6 +226,13 @@ const FileNode = ({
 
   const { extension } = parseFileName(name);
 
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+  let sidebarFileItemOptionsClass = 'sidebar__file-item-options';
+  if (direction === 'rtl') {
+    sidebarFileItemOptionsClass = 'sidebar__file-item-options-rtl';
+  }
+
   return (
     <div className={itemClass}>
       {!isRoot && (
@@ -295,7 +303,7 @@ const FileNode = ({
           >
             <DownArrowIcon focusable="false" aria-hidden="true" />
           </button>
-          <div className="sidebar__file-item-options">
+          <div className={sidebarFileItemOptionsClass}>
             <ul title="file options">
               {isFolder && (
                 <>
diff --git a/client/modules/IDE/components/FileNode.unit.test.jsx b/client/modules/IDE/components/FileNode.unit.test.jsx
index 8676a817d8..d77086622a 100644
--- a/client/modules/IDE/components/FileNode.unit.test.jsx
+++ b/client/modules/IDE/components/FileNode.unit.test.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import { store } from '../../../store';
 
 import {
   fireEvent,
@@ -45,7 +47,11 @@ describe('<FileNode />', () => {
       setProjectName: jest.fn()
     };
 
-    render(<FileNode {...props} />);
+    render(
+      <Provider store={store}>
+        <FileNode {...props} />
+      </Provider>
+    );
 
     return props;
   };
@@ -95,7 +101,7 @@ describe('<FileNode />', () => {
       await waitFor(() =>
         expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
       );
-      await expectFileNameToBe(props.name);
+      await expectFileNameToBe(newName);
     });
 
     it('cannot be just an extension', async () => {
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index f40e9137bf..170cc6db30 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -4,6 +4,7 @@ import { sortBy } from 'lodash';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
 import MenubarItem from '../../../../components/Menubar/MenubarItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
@@ -12,6 +13,7 @@ import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
 import Menubar from '../../../../components/Menubar/Menubar';
 import CaretLeftIcon from '../../../../images/left-arrow.svg';
+import CaretRightIcon from '../../../../images/right-arrow.svg';
 import LogoIcon from '../../../../images/p5js-logo-small.svg';
 import { selectRootFile } from '../../selectors/files';
 import { selectSketchPath } from '../../selectors/project';
@@ -90,6 +92,28 @@ const UserMenu = () => {
 const DashboardMenu = () => {
   const { t } = useTranslation();
   const editorLink = useSelector(selectSketchPath);
+
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+  let rtlNavItemNoIconClass = classNames('nav__item', 'nav__item--no-icon');
+  let caretIcon = (
+    <CaretLeftIcon
+      className="nav__back-icon"
+      focusable="false"
+      aria-hidden="true"
+    />
+  );
+  if (direction === 'rtl') {
+    rtlNavItemNoIconClass = classNames('nav__item', 'rtl-nav__item--no-icon');
+    caretIcon = (
+      <CaretRightIcon
+        className="rtl-nav__back-icon"
+        focusable="false"
+        aria-hidden="true"
+      />
+    );
+  }
+
   return (
     <ul className="nav__items-left">
       <li className="nav__item-logo">
@@ -100,13 +124,9 @@ const DashboardMenu = () => {
           className="svg__logo"
         />
       </li>
-      <li className="nav__item nav__item--no-icon">
+      <li className={rtlNavItemNoIconClass}>
         <Link to={editorLink} className="nav__back-link">
-          <CaretLeftIcon
-            className="nav__back-icon"
-            focusable="false"
-            aria-hidden="true"
-          />
+          {caretIcon}
           <span className="nav__item-header">{t('Nav.BackEditor')}</span>
         </Link>
       </li>
@@ -290,8 +310,17 @@ const LanguageMenu = () => {
 
 const UnauthenticatedUserMenu = () => {
   const { t } = useTranslation();
+
+  // for better padding in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+
   return (
-    <ul className="nav__items-right" title="user-menu">
+    <ul
+      className={
+        direction === 'rtl' ? 'rtl-nav__items-left' : 'nav__items-right'
+      }
+      title="user-menu"
+    >
       <li className="nav__item">
         <Link to="/login" className="nav__auth-button">
           <span className="nav__item-header" title="Login">
@@ -319,8 +348,16 @@ const AuthenticatedUserMenu = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
+  // for better padding in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+
   return (
-    <ul className="nav__items-right" title="user-menu">
+    <ul
+      className={
+        direction === 'rtl' ? 'rtl-nav__items-right' : 'nav__items-right'
+      }
+      title="user-menu"
+    >
       <MenubarSubmenu
         id="account"
         title={
diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index 5ebdbdafea..c60081a897 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -31,23 +31,51 @@ const Toolbar = (props) => {
 
   const { t } = useTranslation();
 
-  const playButtonClass = classNames({
-    'toolbar__play-button': true,
-    'toolbar__play-button--selected': isPlaying
-  });
-  const stopButtonClass = classNames({
-    'toolbar__stop-button': true,
-    'toolbar__stop-button--selected': !isPlaying
-  });
-  const preferencesButtonClass = classNames({
-    'toolbar__preferences-button': true,
-    'toolbar__preferences-button--selected': preferencesIsVisible
-  });
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+
+  const playButtonClass = classNames(
+    direction === 'rtl'
+      ? {
+          'rtl-toolbar__play-button': true,
+          'rtl-toolbar__play-button--selected': isPlaying
+        }
+      : {
+          'toolbar__play-button': true,
+          'toolbar__play-button--selected': isPlaying
+        }
+  );
+  const stopButtonClass = classNames(
+    direction === 'rtl'
+      ? {
+          'rtl-toolbar__stop-button': true,
+          'rtl-toolbar__stop-button--selected': !isPlaying
+        }
+      : {
+          'toolbar__stop-button': true,
+          'toolbar__stop-button--selected': !isPlaying
+        }
+  );
+  const preferencesButtonClass = classNames(
+    direction === 'rtl'
+      ? {
+          'rtl-toolbar__preferences-button': true,
+          'rtl-toolbar__preferences-button--selected': preferencesIsVisible
+        }
+      : {
+          'toolbar__preferences-button': true,
+          'toolbar__preferences-button--selected': preferencesIsVisible
+        }
+  );
 
   return (
-    <div className="toolbar">
+    <div className={direction === 'rtl' ? 'rtl-toolbar' : 'toolbar'}>
       <button
-        className="toolbar__play-sketch-button"
+        className={
+          direction === 'rtl'
+            ? 'rtl-toolbar__play-sketch-button'
+            : 'toolbar__play-sketch-button'
+        }
         onClick={() => {
           props.syncFileContent();
           dispatch(startAccessibleSketch());
@@ -80,10 +108,20 @@ const Toolbar = (props) => {
       >
         <StopIcon focusable="false" aria-hidden="true" />
       </button>
-      <div className="toolbar__autorefresh">
+      <div
+        className={
+          direction === 'rtl'
+            ? 'rtl-toolbar__autorefresh'
+            : 'toolbar__autorefresh'
+        }
+      >
         <input
           id="autorefresh"
-          className="checkbox__autorefresh"
+          className={
+            direction === 'rtl'
+              ? 'rtl-checkbox__autorefresh'
+              : 'checkbox__autorefresh'
+          }
           type="checkbox"
           checked={autorefresh}
           onChange={(event) => {
@@ -93,16 +131,35 @@ const Toolbar = (props) => {
             }
           }}
         />
-        <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
+        <label
+          htmlFor="autorefresh"
+          className={
+            direction === 'rtl'
+              ? 'rtl-toolbar__autorefresh-label'
+              : 'toolbar__autorefresh-label'
+          }
+        >
           {t('Toolbar.Auto-refresh')}
         </label>
       </div>
-      <div className="toolbar__project-name-container">
+      <div
+        className={
+          direction === 'rtl'
+            ? 'rtl-toolbar__project-name-container'
+            : 'toolbar__project-name-container'
+        }
+      >
         <ProjectName />
         {(() => {
           if (project.owner) {
             return (
-              <p className="toolbar__project-project.owner">
+              <p
+                className={
+                  direction === 'rtl'
+                    ? 'rtl-toolbar__project-project.owner'
+                    : 'toolbar__project-project.owner'
+                }
+              >
                 {t('Toolbar.By')}{' '}
                 <Link to={`/${project.owner.username}/sketches`}>
                   {project.owner.username}
diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx
index fa5859400e..19bbfdb743 100644
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@@ -37,6 +37,9 @@ export default function Preferences() {
     autocompleteHinter
   } = useSelector((state) => state.preferences);
 
+  // for better rtl ui
+  const direction = useSelector((state) => state.preferences.direction);
+
   const [state, setState] = useState({ fontSize });
 
   function onFontInputChange(event) {
@@ -80,8 +83,44 @@ export default function Preferences() {
 
   const fontSizeInputRef = useRef(null);
 
+  // for better ui in rtl
+  let classNames = {
+    preferences: 'preferences',
+    preference: 'preference',
+    preference__title: 'preference__title',
+    preference__options: 'preference__options',
+    preference__radio_button: 'preference__radio-button',
+    preference__minus_button: 'preference__minus-button',
+    preference__plus_button: 'preference__plus-button',
+    preference__value: 'preference__value',
+    preference__label: 'preference__label',
+    preference__hidden: 'preference--hidden',
+    preference__preview_button: 'preference__preview-button',
+    preference__subtitle: 'preference__subtitle',
+    preference__canvas: 'preference__canvas',
+    preference__option: 'preference__option'
+  };
+  if (direction === 'rtl') {
+    classNames = {
+      preferences: 'rtl-preferences',
+      preference: 'rtl-preference',
+      preference__title: 'rtl-preference__title',
+      preference__options: 'rtl-preference__options',
+      preference__radio_button: 'rtl-preference__radio-button',
+      preference__minus_button: 'rtl-preference__minus-button',
+      preference__plus_button: 'rtl-preference__plus-button',
+      preference__value: 'rtl-preference__value',
+      preference__label: 'rtl-preference__label',
+      preference__hidden: 'rtl-preference--hidden',
+      preference__preview_button: 'rtl-preference__preview-button',
+      preference__subtitle: 'rtl-preference__subtitle',
+      preference__canvas: 'rtl-preference__canvas',
+      preference__option: 'rtl-preference__option'
+    };
+  }
+
   return (
-    <section className="preferences">
+    <section className={classNames.preferences}>
       <Helmet>
         <title>p5.js Web Editor | Preferences</title>
       </Helmet>
@@ -99,20 +138,25 @@ export default function Preferences() {
           </div>
         </TabList>
         <TabPanel>
-          <div className="preference">
-            <h4 className="preference__title">{t('Preferences.Theme')}</h4>
-            <div className="preference__options">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
+              {t('Preferences.Theme')}
+            </h4>
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setTheme('light'))}
                 aria-label={t('Preferences.LightThemeARIA')}
                 name="light theme"
                 id="light-theme-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="light"
                 checked={theme === 'light'}
               />
-              <label htmlFor="light-theme-on" className="preference__option">
+              <label
+                htmlFor="light-theme-on"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.LightTheme')}
               </label>
               <input
@@ -121,11 +165,14 @@ export default function Preferences() {
                 aria-label={t('Preferences.DarkThemeARIA')}
                 name="dark theme"
                 id="dark-theme-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="dark"
                 checked={theme === 'dark'}
               />
-              <label htmlFor="dark-theme-on" className="preference__option">
+              <label
+                htmlFor="dark-theme-on"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.DarkTheme')}
               </label>
               <input
@@ -134,20 +181,22 @@ export default function Preferences() {
                 aria-label={t('Preferences.HighContrastThemeARIA')}
                 name="high contrast theme"
                 id="high-contrast-theme-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="contrast"
                 checked={theme === 'contrast'}
               />
               <label
                 htmlFor="high-contrast-theme-on"
-                className="preference__option"
+                className={classNames.preference__option}
               >
                 {t('Preferences.HighContrastTheme')}
               </label>
             </div>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">{t('Preferences.TextSize')}</h4>
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
+              {t('Preferences.TextSize')}
+            </h4>
             <button
               className="preference__minus-button"
               onClick={decreaseFontSize}
@@ -156,7 +205,7 @@ export default function Preferences() {
               disabled={fontSize <= 8}
             >
               <MinusIcon focusable="false" aria-hidden="true" />
-              <h6 className="preference__label">
+              <h6 className={classNames.preference__label}>
                 {t('Preferences.DecreaseFont')}
               </h6>
             </button>
@@ -164,11 +213,14 @@ export default function Preferences() {
               onSubmit={onFontInputSubmit}
               aria-label={t('Preferences.SetFontSize')}
             >
-              <label htmlFor="font-size-value" className="preference--hidden">
+              <label
+                htmlFor="font-size-value"
+                className={classNames.preference__hidden}
+              >
                 {t('Preferences.FontSize')}
               </label>
               <input
-                className="preference__value"
+                className={classNames.preference__value}
                 aria-live="polite"
                 aria-atomic="true"
                 value={state.fontSize}
@@ -182,32 +234,37 @@ export default function Preferences() {
               />
             </form>
             <button
-              className="preference__plus-button"
+              className={classNames.preference__plus_button}
               onClick={increaseFontSize}
               aria-label={t('Preferences.IncreaseFontARIA')}
               title={t('Preferences.IncreaseFontARIA')}
               disabled={fontSize >= 36}
             >
               <PlusIcon focusable="false" aria-hidden="true" />
-              <h6 className="preference__label">
+              <h6 className={classNames.preference__label}>
                 {t('Preferences.IncreaseFont')}
               </h6>
             </button>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">{t('Preferences.Autosave')}</h4>
-            <div className="preference__options">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
+              {t('Preferences.Autosave')}
+            </h4>
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setAutosave(true))}
                 aria-label={t('Preferences.AutosaveOnARIA')}
                 name="autosave"
                 id="autosave-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="On"
                 checked={autosave}
               />
-              <label htmlFor="autosave-on" className="preference__option">
+              <label
+                htmlFor="autosave-on"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.On')}
               </label>
               <input
@@ -216,33 +273,36 @@ export default function Preferences() {
                 aria-label={t('Preferences.AutosaveOffARIA')}
                 name="autosave"
                 id="autosave-off"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="Off"
                 checked={!autosave}
               />
-              <label htmlFor="autosave-off" className="preference__option">
+              <label
+                htmlFor="autosave-off"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.Off')}
               </label>
             </div>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
               {t('Preferences.AutocloseBracketsQuotes')}
             </h4>
-            <div className="preference__options">
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setAutocloseBracketsQuotes(true))}
                 aria-label={t('Preferences.AutocloseBracketsQuotesOnARIA')}
                 name="autoclosebracketsquotes"
                 id="autoclosebracketsquotes-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="On"
                 checked={autocloseBracketsQuotes}
               />
               <label
                 htmlFor="autoclosebracketsquotes-on"
-                className="preference__option"
+                className={classNames.preference__option}
               >
                 {t('Preferences.On')}
               </label>
@@ -252,36 +312,36 @@ export default function Preferences() {
                 aria-label={t('Preferences.AutocloseBracketsQuotesOffARIA')}
                 name="autoclosebracketsquotes"
                 id="autoclosebracketsquotes-off"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="Off"
                 checked={!autocloseBracketsQuotes}
               />
               <label
                 htmlFor="autoclosebracketsquotes-off"
-                className="preference__option"
+                className={classNames.preference__option}
               >
                 {t('Preferences.Off')}
               </label>
             </div>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
               {t('Preferences.AutocompleteHinter')}
             </h4>
-            <div className="preference__options">
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setAutocompleteHinter(true))}
                 aria-label={t('Preferences.AutocompleteHinterOnARIA')}
                 name="autocompletehinter"
                 id="autocompletehinter-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="On"
                 checked={autocompleteHinter}
               />
               <label
                 htmlFor="autocompletehinter-on"
-                className="preference__option"
+                className={classNames.preference__option}
               >
                 {t('Preferences.On')}
               </label>
@@ -291,32 +351,37 @@ export default function Preferences() {
                 aria-label={t('Preferences.AutocompleteHinterOffARIA')}
                 name="autocompletehinter"
                 id="autocompletehinter-off"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="Off"
                 checked={!autocompleteHinter}
               />
               <label
                 htmlFor="autocompletehinter-off"
-                className="preference__option"
+                className={classNames.preference__option}
               >
                 {t('Preferences.Off')}
               </label>
             </div>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">{t('Preferences.WordWrap')}</h4>
-            <div className="preference__options">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
+              {t('Preferences.WordWrap')}
+            </h4>
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setLinewrap(true))}
                 aria-label={t('Preferences.LineWrapOnARIA')}
                 name="linewrap"
                 id="linewrap-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="On"
                 checked={linewrap}
               />
-              <label htmlFor="linewrap-on" className="preference__option">
+              <label
+                htmlFor="linewrap-on"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.On')}
               </label>
               <input
@@ -325,33 +390,39 @@ export default function Preferences() {
                 aria-label={t('Preferences.LineWrapOffARIA')}
                 name="linewrap"
                 id="linewrap-off"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="Off"
                 checked={!linewrap}
               />
-              <label htmlFor="linewrap-off" className="preference__option">
+              <label
+                htmlFor="linewrap-off"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.Off')}
               </label>
             </div>
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="preference">
-            <h4 className="preference__title">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
               {t('Preferences.LineNumbers')}
             </h4>
-            <div className="preference__options">
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setLineNumbers(true))}
                 aria-label={t('Preferences.LineNumbersOnARIA')}
                 name="line numbers"
                 id="line-numbers-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="On"
                 checked={lineNumbers}
               />
-              <label htmlFor="line-numbers-on" className="preference__option">
+              <label
+                htmlFor="line-numbers-on"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.On')}
               </label>
               <input
@@ -360,31 +431,37 @@ export default function Preferences() {
                 aria-label={t('Preferences.LineNumbersOffARIA')}
                 name="line numbers"
                 id="line-numbers-off"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="Off"
                 checked={!lineNumbers}
               />
-              <label htmlFor="line-numbers-off" className="preference__option">
+              <label
+                htmlFor="line-numbers-off"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.Off')}
               </label>
             </div>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
               {t('Preferences.LintWarningSound')}
             </h4>
-            <div className="preference__options">
+            <div className={classNames.preference__options}>
               <input
                 type="radio"
                 onChange={() => dispatch(setLintWarning(true))}
                 aria-label={t('Preferences.LintWarningOnARIA')}
                 name="lint warning"
                 id="lint-warning-on"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="On"
                 checked={lintWarning}
               />
-              <label htmlFor="lint-warning-on" className="preference__option">
+              <label
+                htmlFor="lint-warning-on"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.On')}
               </label>
               <input
@@ -393,15 +470,18 @@ export default function Preferences() {
                 aria-label={t('Preferences.LintWarningOffARIA')}
                 name="lint warning"
                 id="lint-warning-off"
-                className="preference__radio-button"
+                className={classNames.preference__radio_button}
                 value="Off"
                 checked={!lintWarning}
               />
-              <label htmlFor="lint-warning-off" className="preference__option">
+              <label
+                htmlFor="lint-warning-off"
+                className={classNames.preference__option}
+              >
                 {t('Preferences.Off')}
               </label>
               <button
-                className="preference__preview-button"
+                className={classNames.preference__preview_button}
                 onClick={() => new Audio(beepUrl).play()}
                 aria-label={t('Preferences.PreviewSoundARIA')}
               >
@@ -409,15 +489,15 @@ export default function Preferences() {
               </button>
             </div>
           </div>
-          <div className="preference">
-            <h4 className="preference__title">
+          <div className={classNames.preference}>
+            <h4 className={classNames.preference__title}>
               {t('Preferences.AccessibleTextBasedCanvas')}
             </h4>
-            <h6 className="preference__subtitle">
+            <h6 className={classNames.preference__subtitle}>
               {t('Preferences.UsedScreenReader')}
             </h6>
 
-            <div className="preference__options">
+            <div className={classNames.preference__options}>
               <input
                 type="checkbox"
                 onChange={(event) => {
@@ -431,7 +511,7 @@ export default function Preferences() {
               />
               <label
                 htmlFor="text-output-on"
-                className="preference__option preference__canvas"
+                className={`${classNames.preference__option} ${classNames.preference__canvas}`}
               >
                 {t('Preferences.PlainText')}
               </label>
@@ -448,7 +528,7 @@ export default function Preferences() {
               />
               <label
                 htmlFor="table-output-on"
-                className="preference__option preference__canvas"
+                className={`${classNames.preference__option} ${classNames.preference__canvas}`}
               >
                 {t('Preferences.TableText')}
               </label>
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 79ffed3b86..023fd789f8 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -56,6 +56,13 @@ export default function SideBar() {
     'sidebar--cant-edit': !canEditProject
   });
 
+  // for better ui in rtl
+  const direction = useSelector((state) => state.preferences.direction);
+  let sidebarProjectOptionsClass = 'sidebar__project-options';
+  if (direction === 'rtl') {
+    sidebarProjectOptionsClass = 'sidebar__project-options-rtl';
+  }
+
   return (
     <FileDrawer>
       {ide.sidebarIsExpanded && (
@@ -88,7 +95,7 @@ export default function SideBar() {
             >
               <PlusIcon focusable="false" aria-hidden="true" />
             </button>
-            <ul className="sidebar__project-options">
+            <ul className={sidebarProjectOptionsClass}>
               <li>
                 <button
                   aria-label={t('Sidebar.AddFolderARIA')}
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 4084facb77..e24793ad16 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import SplitPane from 'react-split-pane';
+import classNames from 'classnames';
 import IDEKeyHandlers from '../components/IDEKeyHandlers';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
@@ -165,6 +166,18 @@ const IDEView = () => {
     ? consoleSize
     : consoleCollapsedSize;
 
+  // for better ui in rtl
+  let editorPreviewContainerClass = 'editor-preview-container';
+  let previewFrameTitle = 'preview-frame__title';
+  const direction = useSelector((state) => state.preferences.direction);
+  if (direction === 'rtl') {
+    editorPreviewContainerClass = classNames(
+      editorPreviewContainerClass,
+      'rtl'
+    ); // add rtl
+    previewFrameTitle = 'preview-frame__title-rtl';
+  }
+
   return (
     <RootPage>
       <Helmet>
@@ -218,7 +231,7 @@ const IDEView = () => {
           </EditorSidebarWrapper>
         </>
       ) : (
-        <main className="editor-preview-container">
+        <main className={editorPreviewContainerClass}>
           <SplitPane
             split="vertical"
             size={ide.sidebarIsExpanded ? sidebarSize : 20}
@@ -266,9 +279,7 @@ const IDEView = () => {
               </SplitPane>
               <section className="preview-frame-holder">
                 <header className="preview-frame__header">
-                  <h2 className="preview-frame__title">
-                    {t('Toolbar.Preview')}
-                  </h2>
+                  <h2 className={previewFrameTitle}>{t('Toolbar.Preview')}</h2>
                 </header>
                 <div className="preview-frame__content">
                   <PreviewFrame
diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js
index 087d927aed..ce34aa9afb 100644
--- a/client/modules/IDE/reducers/preferences.js
+++ b/client/modules/IDE/reducers/preferences.js
@@ -11,6 +11,7 @@ export const initialState = {
   theme: 'light',
   autorefresh: false,
   language: 'en-US',
+  direction: 'ltr',
   autocloseBracketsQuotes: true,
   autocompleteHinter: false
 };
@@ -39,6 +40,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, { lineNumbers: action.value });
     case ActionTypes.SET_LANGUAGE:
       return Object.assign({}, state, { language: action.language });
+    case ActionTypes.SET_DIRECTION:
+      return Object.assign({}, state, { direction: action.direction });
     case ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES:
       return Object.assign({}, state, {
         autocloseBracketsQuotes: action.value
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index ad17249932..4a895baef9 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -9,24 +9,35 @@ body {
 	font-size: #{$base-font-size}px;
 }
 
+.rtl {
+	direction: rtl;
+}
+
+.ltr {
+	direction: ltr;
+}
 
 /* Styles for non-touch devices */
 @media (hover: hover) and (pointer: fine) {
+
 	/*Scrollbar theming */
 	/* width */
 	::-webkit-scrollbar {
 		width: 10px;
 	}
+
 	/* Track */
 	::-webkit-scrollbar-track {
 		@include themify() {
 			color: getThemifyVariable("modal-border-color");
 		}
 	}
+
 	/* Handle */
 	::-webkit-scrollbar-thumb {
 		background: #888;
 	}
+
 	/* Handle on hover */
 	::-webkit-scrollbar-thumb:hover {
 		background: #555;
@@ -71,6 +82,7 @@ textarea {
 	border: 1px solid;
 	border-radius: 2px;
 	padding: #{math.div(10, $base-font-size)}rem;
+
 	@include themify() {
 		color: getThemifyVariable("input-text-color");
 		background-color: getThemifyVariable("input-background-color");
@@ -102,6 +114,7 @@ button {
 	@include themify() {
 		@extend %link;
 	}
+
 	background: transparent;
 	border: none;
 }
@@ -118,16 +131,20 @@ h3 {
 	font-weight: normal;
 	font-size: #{math.div(16, $base-font-size)}rem;
 }
+
 h4 {
 	font-weight: normal;
 }
+
 h6 {
 	font-weight: normal;
 	font-size: #{math.div(12, $base-font-size)}rem;
 }
+
 thead {
 	text-align: left;
 }
+
 th {
 	text-align: left;
 }
diff --git a/client/styles/components/_editor-rtl.scss b/client/styles/components/_editor-rtl.scss
new file mode 100644
index 0000000000..0603668a43
--- /dev/null
+++ b/client/styles/components/_editor-rtl.scss
@@ -0,0 +1,29 @@
+@use "sass:math";
+
+.editor__header-rtl {
+  height: #{math.div(29, $base-font-size)}rem;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.editor__file-name-rtl {
+  @include themify() {
+    color: getThemifyVariable("primary-text-color");
+  }
+  height: #{math.div(29, $base-font-size)}rem;
+  padding-top: #{math.div(7, $base-font-size)}rem;
+  padding-right: #{math.div(56, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.editor__unsaved-changes-rtl {
+  margin-right: #{math.div(2, $base-font-size)}rem;
+}
+
+.editor__header-rtl button{
+  position: static;
+}
\ No newline at end of file
diff --git a/client/styles/components/_nav-rtl.scss b/client/styles/components/_nav-rtl.scss
new file mode 100644
index 0000000000..e4c1f79b5f
--- /dev/null
+++ b/client/styles/components/_nav-rtl.scss
@@ -0,0 +1,171 @@
+@use "sass:math";
+
+.rtl-nav {
+  height: #{math.div(42, $base-font-size)}rem;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  direction: rtl;
+
+  & button {
+    padding: 0;
+  }
+}
+
+.rtl-nav__header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  @include themify() {
+    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
+  }
+
+  // padding-left: #{math.div(20, $base-font-size)}rem;
+}
+
+.rtl-nav__items-left,
+.rtl-nav__items-right {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+}
+
+.rtl-nav__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  & button {
+    padding: #{math.div(12, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
+  }
+}
+
+.rtl-nav__item--no-icon {
+  padding-right: #{math.div(15, $base-font-size)}rem;
+}
+
+.rtl-nav__item:hover {
+  .nav__item-header {
+    @include themify() {
+      color: getThemifyVariable('nav-hover-color');
+    }
+  }
+
+  & g,
+  & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
+
+  .rtl-nav__item-header-triangle polygon,
+  .rtl-nav__item-header-triangle path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
+}
+
+.rtl-nav__item-header:hover {
+  @include themify() {
+    color: getThemifyVariable('nav-hover-color');
+  }
+
+  & g,
+  & path {
+    @include themify() {
+      fill: getThemifyVariable('nav-hover-color');
+    }
+  }
+}
+
+.rtl-nav__item-header-triangle {
+  margin-right: #{math.div(5, $base-font-size)}rem;
+}
+
+.rtl-nav__dropdown {
+  @include themify() {
+    color: getThemifyVariable('nav-hover-color');
+  }
+}
+
+.rtl-nav__item-header-triangle {
+  margin-right: #{math.div(5, $base-font-size)}rem;
+}
+
+.rtl-nav__dropdown {
+  @extend %dropdown-open-right;
+  display: none;
+  max-height: 60vh;
+  overflow-y: auto;
+
+  .rtl-nav__item--open & {
+    display: flex;
+  }
+}
+
+.rtl-nav__items-right {
+  padding-right: #{math.div(20, $base-font-size)}rem;
+
+  & .rtl-nav__dropdown {
+    width: #{math.div(125, $base-font-size)}rem;
+  }
+}
+
+.rtl-nav__item-spacer {
+  @include themify() {
+    color: map-get($theme-map, 'inactive-text-color');
+    margin-right: #{math.div(8, $base-font-size)}rem;
+  }
+}
+
+.rtl-nav__item-or {
+  @include themify() {
+    color: map-get($theme-map, 'inactive-text-color');
+  }
+}
+
+.rtl-nav__auth-button {
+  padding: #{math.div(10, $base-font-size)}rem;
+}
+
+.rtl-nav__dropdown-item {
+
+  & button,
+  & a {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.rtl-nav__items-left {
+  padding-left: #{math.div(20, $base-font-size)}rem;
+
+  & .rtl-nav__dropdown {
+    width: #{math.div(125, $base-font-size)}rem;
+  }
+}
+
+.rtl-nav__back-icon {
+
+  & g,
+  & path {
+    opacity: 1;
+
+    @include themify() {
+      fill: getThemifyVariable('inactive-text-color');
+    }
+  }
+
+  margin-left: #{math.div(5, $base-font-size)}rem;
+}
\ No newline at end of file
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 58691ff251..52d057f826 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -21,6 +21,7 @@
   @include themify() {
     border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
   }
+
   // padding-left: #{math.div(20, $base-font-size)}rem;
 }
 
@@ -75,8 +76,9 @@
       color: getThemifyVariable('nav-hover-color');
     }
   }
-  
-  & g, & path {
+
+  & g,
+  & path {
     @include themify() {
       fill: getThemifyVariable('nav-hover-color');
     }
@@ -94,7 +96,9 @@
   @include themify() {
     color: getThemifyVariable('nav-hover-color');
   }
-  & g, & path {
+
+  & g,
+  & path {
     @include themify() {
       fill: getThemifyVariable('nav-hover-color');
     }
@@ -102,17 +106,17 @@
 }
 
 .nav__item-header-triangle {
-	margin-left: #{math.div(5, $base-font-size)}rem;
+  margin-left: #{math.div(5, $base-font-size)}rem;
 }
 
 .nav__dropdown {
   @include themify() {
-      color: getThemifyVariable('nav-hover-color');
-    }
+    color: getThemifyVariable('nav-hover-color');
+  }
 }
 
 .nav__item-header-triangle {
-	margin-left: #{math.div(5, $base-font-size)}rem;
+  margin-left: #{math.div(5, $base-font-size)}rem;
 }
 
 .nav__dropdown {
@@ -120,6 +124,7 @@
   display: none;
   max-height: 60vh;
   overflow-y: auto;
+
   .nav__item--open & {
     display: flex;
   }
@@ -155,6 +160,7 @@
 // }
 
 .nav__dropdown-item {
+
   & button,
   & a {
     width: 100%;
@@ -184,8 +190,8 @@
 
 }
 
-.svg__logo g path{
-  
+.svg__logo g path {
+
   @include themify() {
     // Set internal color of the logo;
     fill: getThemifyVariable('logo-background-color');
@@ -210,15 +216,19 @@
 }
 
 .nav__back-icon {
-  & g, & path {
+
+  & g,
+  & path {
     opacity: 1;
+
     @include themify() {
       fill: getThemifyVariable('inactive-text-color');
     }
   }
+
   margin-right: #{math.div(5, $base-font-size)}rem;
 }
 
 .nav__back-link {
   display: flex;
-}
+}
\ No newline at end of file
diff --git a/client/styles/components/_overlay-rtl.scss b/client/styles/components/_overlay-rtl.scss
new file mode 100644
index 0000000000..fcd5a7c5bb
--- /dev/null
+++ b/client/styles/components/_overlay-rtl.scss
@@ -0,0 +1,75 @@
+@use "sass:math";
+
+.rtl-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow-y: hidden;
+}
+
+.rtl-overlay__content {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  direction: rtl;
+}
+
+.rtl-overlay__body {
+  @extend %modal;
+  display: flex;
+  flex-wrap: wrap;
+  flex-flow: column;
+  max-height: 80%;
+  max-width: 80%;
+  position: relative;
+  padding-bottom: #{math.div(12, $base-font-size)}rem;
+
+  @media (max-width: 650px) {
+    max-width: 100%;
+    max-height: 100%;
+    height: 100vh;
+    width: 100vw;
+  }
+}
+
+.rtl-overlay__body:has(.collection-create) {
+  max-height: none;
+}
+
+.rtl-overlay__header {
+  display: flex;
+  justify-content: space-between;
+  padding: #{math.div(20, $base-font-size)}rem;
+}
+
+.rtl-overlay__actions {
+  display: flex;
+}
+
+.rtl-overlay__actions-mobile {
+  padding-right: #{math.div(24, $base-font-size)}rem;
+}
+
+.rtl-overlay__title {
+  font-size: #{math.div(21, $base-font-size)}rem;
+}
+
+.rtl-overlay__close-button {
+  @include icon();
+  padding: #{math.div(3, $base-font-size)}rem 0 #{math.div(3, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
+}
+
+/* Fixed height overlay */
+.rtl-overlay--is-fixed-height .rtl-overlay__body {
+  height: 100vh;
+}
+
+.rtl-overlay--is-fixed-height .rtl-overlay__header {
+  flex: 0;
+}
\ No newline at end of file
diff --git a/client/styles/components/_preferences-rtl.scss b/client/styles/components/_preferences-rtl.scss
new file mode 100644
index 0000000000..93c7ddc28e
--- /dev/null
+++ b/client/styles/components/_preferences-rtl.scss
@@ -0,0 +1,192 @@
+@use "sass:math";
+
+.rtl-preferences {
+  width: 100%;
+  width: #{math.div(640, $base-font-size)}rem;
+  max-width: 100%;
+  max-height: 100%;
+  z-index: 9999;
+  padding: 0 #{math.div(20, $base-font-size)}rem #{math.div(2, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  height: calc(80vh - #{math.div(65, $base-font-size)}rem);
+  direction: rtl;
+
+  & .react-tabs {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .react-tabs__tab-panel {
+    overflow-y: auto;
+  }
+
+  @media (min-width: 770px) {
+    max-height: #{math.div(460, $base-font-size)}rem;
+  }
+
+  direction: rtl;
+}
+
+.rtl-preference__minus-button,
+.rtl-preference__plus-button {
+  @include themify() {
+    @extend %preferences-button;
+    width: #{math.div(32, $base-font-size)}rem;
+    height: #{math.div(32, $base-font-size)}rem;
+    margin-right: #{math.div(6, $base-font-size)}rem;
+    margin-left: #{math.div(10, $base-font-size)}rem;
+    line-height: #{math.div(40, $base-font-size)}rem;
+
+    & svg {
+      width: #{math.div(10, $base-font-size)}rem;
+    }
+  }
+}
+
+.rtl-preference {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: #{math.div(12, $base-font-size)}rem;
+
+  &+& {
+    @include themify() {
+      border-top: 1px dashed getThemifyVariable("button-border-color");
+    }
+  }
+}
+
+.rtl-preference__title {
+  width: 100%;
+  font-size: #{math.div(16, $base-font-size)}rem;
+  margin-top: #{math.div(13, $base-font-size)}rem;
+  margin-bottom: #{math.div(7, $base-font-size)}rem;
+}
+
+.rtl-preference__subtitle {
+  @include themify() {
+    color: getThemifyVariable("inactive-text-color");
+  }
+
+  width: 100%;
+  margin-bottom: #{math.div(10, $base-font-size)}rem;
+  margin-top: 0;
+}
+
+.rtl-preference__value {
+  @include themify() {
+    border: #{math.div(1, $base-font-size)}rem solid getThemifyVariable("button-border-color");
+    // background-color: getThemifyVariable("button-background-color");
+    color: getThemifyVariable("input-text-color");
+    background-color: getThemifyVariable('input-background-color');
+  }
+
+  text-align: center;
+  border-radius: 0%;
+  outline: none;
+  width: #{math.div(44, $base-font-size)}rem;
+  height: #{math.div(40, $base-font-size)}rem;
+  margin: 0 #{math.div(20, $base-font-size)}rem;
+  padding: 0;
+  font-size: #{math.div(16, $base-font-size)}rem;
+  font-family: Inconsolata;
+}
+
+.rtl-preference__label {
+  @include themify() {
+    color: getThemifyVariable("secondary-text-color");
+
+    &:hover {
+      color: getThemifyVariable("heavy-text-color");
+    }
+  }
+
+  margin: #{math.div(-15, $base-font-size)}rem #{math.div(-5, $base-font-size)}rem 0 0;
+  font-size: #{math.div(9, $base-font-size)}rem;
+  width: #{math.div(44, $base-font-size)}rem;
+}
+
+.rtl-react-tabs__tab--selected {
+  @include themify() {
+    border-bottom: #{math.div(4, $base-font-size)}rem solid getThemifyVariable("button-background-hover-color");
+  }
+}
+
+.rtl-react-tabs__tab--selected .preference__subheading {
+  @include themify() {
+    color: getThemifyVariable("primary-text-color");
+  }
+}
+
+.rtl-react-tabs__tab {
+  text-align: center;
+  color: black;
+  display: flex;
+  align-items: center;
+  border-bottom: #{math.div(4, $base-font-size)}rem solid transparent;
+
+  &+& {
+    margin-right: #{math.div(45, $base-font-size)}rem;
+  }
+
+  &:hover {
+    @include themify() {
+      border-bottom: #{math.div(4, $base-font-size)}rem solid getThemifyVariable("button-background-hover-color");
+    }
+  }
+}
+
+.rtl-preference__radio-button {
+  @extend %hidden-element;
+}
+
+
+.rtl-preference__option {
+  @include themify() {
+    @extend %preference-option;
+    margin-left: #{math.div(25, $base-font-size)}rem;
+  }
+
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.rtl-preference__option:last-child {
+  margin-left: 0;
+}
+
+.rtl-preference__preview-button {
+  @include themify() {
+    @extend %preference-option;
+
+    &:hover {
+      color: getThemifyVariable("button-background-hover-color");
+    }
+  }
+
+  margin-right: #{math.div(30, $base-font-size)}rem;
+}
+
+.rtl-preference__options {
+  display: flex;
+  justify-content: center;
+}
+
+.rtl-preference__radio-button:checked+.rtl-preference__option {
+  @include themify() {
+    //for some reason this won't work for getThemifyVariable
+    color: map-get($theme-map, "heavy-text-color");
+    font-weight: bold;
+  }
+}
+
+.rtl-preference--hidden {
+  @extend %hidden-element;
+}
+
+.rtl-preference__option.preference__canvas:not(:last-child) {
+  padding-left: #{math.div(14, $base-font-size)}rem;
+}
\ No newline at end of file
diff --git a/client/styles/components/_preview-frame-rtl.scss b/client/styles/components/_preview-frame-rtl.scss
new file mode 100644
index 0000000000..988381353a
--- /dev/null
+++ b/client/styles/components/_preview-frame-rtl.scss
@@ -0,0 +1,12 @@
+@use "sass:math";
+
+.preview-frame__title-rtl {
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
+  }
+  height: #{math.div(29, $base-font-size)}rem;
+  padding-top: #{math.div(7, $base-font-size)}rem;
+  padding-right: #{math.div(5, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  font-weight: normal;
+}
diff --git a/client/styles/components/_sidebar-rtl.scss b/client/styles/components/_sidebar-rtl.scss
new file mode 100644
index 0000000000..9bb303f5d2
--- /dev/null
+++ b/client/styles/components/_sidebar-rtl.scss
@@ -0,0 +1,25 @@
+@use "sass:math";
+
+.sidebar__project-options-rtl {
+  @extend %dropdown-open-right;
+  display: none;
+  width: 100%;
+  max-width: #{math.div(180, $base-font-size)}rem;
+  .sidebar--project-options & {
+    display: flex;
+  }
+}
+
+.sidebar__file-item-options-rtl {
+  @extend %dropdown-open-right;
+  display: none;
+  width: 100%;
+  max-width: #{math.div(180, $base-font-size)}rem;
+  .sidebar__file-item--open > .file-item__content & {
+    display: flex;
+  }
+}
+
+.sidebar__project-options-rtl button, .sidebar__file-item-options-rtl button {
+  text-align: right !important;
+}
diff --git a/client/styles/components/_toolbar-rtl.scss b/client/styles/components/_toolbar-rtl.scss
new file mode 100644
index 0000000000..505b3b251b
--- /dev/null
+++ b/client/styles/components/_toolbar-rtl.scss
@@ -0,0 +1,176 @@
+@use "sass:math";
+
+.rtl-toolbar__play-button {
+	@include themify() {
+		@extend %toolbar-button;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 0 0 #{math.div(3, $base-font-size)}rem;
+
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
+
+		&:disabled {
+			cursor: auto;
+
+			& g,
+			& path {
+				fill: getThemifyVariable('button-border-color');
+			}
+
+			&:hover {
+				background-color: getThemifyVariable('toolbar-button-background-color');
+
+				& g,
+				& path {
+					fill: getThemifyVariable('button-border-color');
+				}
+			}
+		}
+	}
+
+	margin-left: #{math.div(15, $base-font-size)}rem;
+
+	span {
+		padding-right: #{math.div(4, $base-font-size)}rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: #{math.div(20, $base-font-size)}rem;
+		height: #{math.div(20, $base-font-size)}rem;
+	}
+}
+
+.rtl-toolbar__play-sketch-button {
+	@extend %hidden-element;
+}
+
+.rtl-toolbar__stop-button {
+	@include themify() {
+		@extend %toolbar-button;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: #{math.div(15, $base-font-size)}rem;
+		padding: 0;
+
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
+	}
+
+	span {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: #{math.div(20, $base-font-size)}rem;
+		height: #{math.div(20, $base-font-size)}rem;
+	}
+}
+
+.rtl-toolbar__preferences-button {
+	@include themify() {
+		@extend %toolbar-button;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
+	}
+
+	margin-right: auto;
+
+	& span {
+		padding-right: #{math.div(1, $base-font-size)}rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: #{math.div(20, $base-font-size)}rem;
+		height: #{math.div(20, $base-font-size)}rem;
+	}
+}
+
+.rtl-toolbar__logo {
+	margin-left: #{math.div(30, $base-font-size)}rem;
+
+	@include themify() {
+
+		& g,
+		& path {
+			fill: getThemifyVariable('logo-color');
+		}
+	}
+}
+
+.rtl-toolbar {
+	padding: #{math.div(10, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
+	display: flex;
+	align-items: center;
+	direction: rtl;
+
+	@include themify() {
+		border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
+	}
+}
+
+.rtl-toolbar__project-name-container {
+	margin-right: #{math.div(10, $base-font-size)}rem;
+	padding-right: #{math.div(10, $base-font-size)}rem;
+	display: flex;
+	align-items: center;
+}
+
+.rtl-toolbar .editable-input__label {
+	@include themify() {
+		color: getThemifyVariable('secondary-text-color');
+
+		& path {
+			fill: getThemifyVariable('secondary-text-color');
+		}
+	}
+}
+
+.rtl-toolbar .editable-input__input {
+	border: 0;
+}
+
+.rtl-toolbar__project-owner {
+	margin-right: #{math.div(5, $base-font-size)}rem;
+
+	@include themify() {
+		color: getThemifyVariable('secondary-text-color');
+	}
+}
+
+.rtl-toolbar__autorefresh-label {
+	cursor: pointer;
+
+	@include themify() {
+		color: getThemifyVariable('secondary-text-color');
+
+		&:hover {
+			color: getThemifyVariable('logo-color');
+		}
+	}
+
+	margin-right: #{math.div(5, $base-font-size)}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
+}
+
+.rtl-toolbar__autorefresh {
+	display: flex;
+	align-items: center;
+}
+
+.rtl-checkbox__autorefresh {
+	cursor: pointer;
+
+	@include themify() {
+		accent-color: getThemifyVariable('logo-color');
+	}
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index c82a2c3e8f..3b17eb2c67 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -18,26 +18,33 @@
 @import 'components/account';
 @import 'components/api-key';
 @import 'components/editor';
+@import 'components/editor-rtl';
 @import 'components/hints';
 @import 'components/nav';
+@import 'components/nav-rtl';
 @import 'components/preview-nav';
 @import 'components/toolbar';
+@import 'components/toolbar-rtl';
 @import 'components/preferences';
+@import 'components/preferences-rtl';
 @import 'components/reset-password';
 @import 'components/new-password';
 @import 'components/searchbar';
 @import 'components/sketch-list';
 @import 'components/sidebar';
+@import 'components/sidebar-rtl';
 @import 'components/modal';
 @import 'components/console';
 @import 'components/resizer';
 @import 'components/overlay';
+@import 'components/overlay-rtl';
 @import 'components/forms';
 @import 'components/toast';
 @import 'components/timer';
 @import 'components/form-container';
 @import 'components/error-modal';
 @import 'components/preview-frame';
+@import 'components/preview-frame-rtl';
 @import 'components/share';
 @import 'components/asset-list';
 @import 'components/asset-size';
@@ -55,4 +62,4 @@
 @import 'components/skip-link';
 
 @import 'layout/dashboard';
-@import 'layout/ide';
+@import 'layout/ide';
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5365456e6c..7648bc9bb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,6 @@
         "cookie-parser": "^1.4.5",
         "copy-webpack-plugin": "^10.2.4",
         "cors": "^2.8.5",
-        "cross-env": "^5.2.1",
         "csslint": "^1.0.5",
         "date-fns": "^2.22.1",
         "decomment": "^0.9.5",
@@ -155,6 +154,7 @@
         "babel-core": "^7.0.0-bridge.0",
         "babel-loader": "^8.2.5",
         "babel-plugin-transform-react-remove-prop-types": "^0.2.12",
+        "cross-env": "^7.0.3",
         "css-loader": "^5.2.7",
         "css-minimizer-webpack-plugin": "^3.4.1",
         "eslint": "^7.31.0",
@@ -12502,20 +12502,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@storybook/cli/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@storybook/cli/node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -12595,15 +12581,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@storybook/cli/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/cli/node_modules/prettier": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
@@ -12631,27 +12608,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@storybook/cli/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@storybook/cli/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/cli/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12664,21 +12620,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@storybook/cli/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@storybook/client-logger": {
       "version": "7.6.20",
       "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.20.tgz",
@@ -12727,29 +12668,6 @@
         "type-fest": "^2.19.0"
       }
     },
-    "node_modules/@storybook/codemod/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@storybook/codemod/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/codemod/node_modules/prettier": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
@@ -12765,27 +12683,6 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/@storybook/codemod/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@storybook/codemod/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/codemod/node_modules/type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
@@ -12798,21 +12695,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@storybook/codemod/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@storybook/components": {
       "version": "7.6.20",
       "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.20.tgz",
@@ -19315,18 +19197,21 @@
       }
     },
     "node_modules/cross-env": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
-      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
       "dependencies": {
-        "cross-spawn": "^6.0.5"
+        "cross-spawn": "^7.0.1"
       },
       "bin": {
-        "cross-env": "dist/bin/cross-env.js",
-        "cross-env-shell": "dist/bin/cross-env-shell.js"
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
       },
       "engines": {
-        "node": ">=4.0"
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
       }
     },
     "node_modules/cross-fetch": {
@@ -19371,18 +19256,16 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dependencies": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
       "engines": {
-        "node": ">=4.8"
+        "node": ">= 8"
       }
     },
     "node_modules/crypto-js": {
@@ -22665,19 +22548,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/eslint/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/eslint/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -22796,14 +22666,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/eslint/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -22826,25 +22688,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/eslint/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -22867,20 +22710,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/eslint/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -23031,20 +22860,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/execa/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/execa/node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -23054,51 +22869,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/execa/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/execa/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/execa/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/execa/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/exenv": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
@@ -24005,50 +23775,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/foreground-child/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/foreground-child/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/foreground-child/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/foreground-child/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/foreground-child/node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -24061,21 +23787,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/foreground-child/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -32212,20 +31923,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/lint-staged/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/lint-staged/node_modules/execa": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
@@ -32282,36 +31979,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/lint-staged/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/lint-staged/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/lint-staged/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/lint-staged/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -32324,21 +31991,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/lint-staged/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/listr2": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.10.0.tgz",
@@ -35233,11 +34885,6 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
-    "node_modules/nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
-    },
     "node_modules/nise": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/nise/-/nise-1.5.3.tgz",
@@ -35496,23 +35143,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/node-gyp/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/node-gyp/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -35627,22 +35257,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/node-sass/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/node-sass/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -35654,42 +35268,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/node-sass/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/node-sass/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/node-sass/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/node-sass/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -35704,23 +35282,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/node-sass/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/nodemailer": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.3.tgz",
@@ -35870,15 +35431,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/npm-run-path/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/npmlog": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
@@ -35943,20 +35495,6 @@
         "node": "^14.16.0 || >=16.10.0"
       }
     },
-    "node_modules/nypm/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/nypm/node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -36067,36 +35605,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/nypm/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nypm/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nypm/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/nypm/node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -36121,21 +35629,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/nypm/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/oauth": {
       "version": "0.9.15",
       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@@ -36913,11 +36406,11 @@
       }
     },
     "node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/path-parse": {
@@ -40926,22 +40419,22 @@
       "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dependencies": {
-        "shebang-regex": "^1.0.0"
+        "shebang-regex": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/shortid": {
@@ -43584,14 +43077,17 @@
       }
     },
     "node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dependencies": {
         "isexe": "^2.0.0"
       },
       "bin": {
-        "which": "bin/which"
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
     "node_modules/which-boxed-primitive": {
@@ -53348,17 +52844,6 @@
           "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
           "dev": true
         },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
         "find-up": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -53408,12 +52893,6 @@
           "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
           "dev": true
         },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
         "prettier": {
           "version": "2.8.8",
           "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
@@ -53426,21 +52905,6 @@
           "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
           "dev": true
         },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -53449,15 +52913,6 @@
           "requires": {
             "has-flag": "^4.0.0"
           }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -53501,58 +52956,17 @@
             "type-fest": "^2.19.0"
           }
         },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
         "prettier": {
           "version": "2.8.8",
           "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
           "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
           "dev": true
         },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
         "type-fest": {
           "version": "2.19.0",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
           "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
           "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -58443,11 +57857,12 @@
       }
     },
     "cross-env": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
-      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
       "requires": {
-        "cross-spawn": "^6.0.5"
+        "cross-spawn": "^7.0.1"
       }
     },
     "cross-fetch": {
@@ -58483,15 +57898,13 @@
       }
     },
     "cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "requires": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       }
     },
     "crypto-js": {
@@ -60358,16 +59771,6 @@
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
         "escape-string-regexp": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -60447,11 +59850,6 @@
             "word-wrap": "^1.2.3"
           }
         },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-        },
         "prelude-ls": {
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -60465,19 +59863,6 @@
             "lru-cache": "^6.0.0"
           }
         },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-        },
         "type-check": {
           "version": "0.4.0",
           "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -60491,14 +59876,6 @@
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
           "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
         },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -61156,52 +60533,11 @@
         "strip-final-newline": "^2.0.0"
       },
       "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
         "human-signals": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
           "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
           "dev": true
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -61899,52 +61235,11 @@
         "signal-exit": "^4.0.1"
       },
       "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
         "signal-exit": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
           "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
           "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -68127,17 +67422,6 @@
           "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
           "dev": true
         },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
         "execa": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
@@ -68176,27 +67460,6 @@
           "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
           "dev": true
         },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -68205,15 +67468,6 @@
           "requires": {
             "has-flag": "^4.0.0"
           }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -70418,11 +69672,6 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
-    "nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="
-    },
     "nise": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/nise/-/nise-1.5.3.tgz",
@@ -70632,17 +69881,6 @@
             "lru-cache": "^6.0.0"
           }
         },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -70737,19 +69975,6 @@
           "optional": true,
           "peer": true
         },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -70758,33 +69983,6 @@
           "optional": true,
           "peer": true
         },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true,
-          "optional": true,
-          "peer": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -70795,17 +69993,6 @@
           "requires": {
             "has-flag": "^4.0.0"
           }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -70923,14 +70110,6 @@
       "dev": true,
       "requires": {
         "path-key": "^3.0.0"
-      },
-      "dependencies": {
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        }
       }
     },
     "npmlog": {
@@ -70985,17 +70164,6 @@
         "ufo": "^1.5.3"
       },
       "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
         "execa": {
           "version": "8.0.1",
           "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -71063,27 +70231,6 @@
             "mimic-fn": "^4.0.0"
           }
         },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
         "signal-exit": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -71095,15 +70242,6 @@
           "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
           "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
           "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
         }
       }
     },
@@ -71683,9 +70821,9 @@
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
     "path-parse": {
       "version": "1.0.7",
@@ -74732,17 +73870,17 @@
       "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "requires": {
-        "shebang-regex": "^1.0.0"
+        "shebang-regex": "^3.0.0"
       }
     },
     "shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
     },
     "shortid": {
       "version": "2.2.16",
@@ -76754,9 +75892,9 @@
       }
     },
     "which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "requires": {
         "isexe": "^2.0.0"
       }