diff --git a/packages/core/src/_internals.ts b/packages/core/src/_internals.ts
index 45bc630f..47d75e72 100644
--- a/packages/core/src/_internals.ts
+++ b/packages/core/src/_internals.ts
@@ -39,3 +39,7 @@ export {
 } from "./components/ComponentBuilder/ComponentBuilder";
 export { createTestCompilationContext, createFormMock } from "./testUtils";
 export * from "./compiler/builtins/$richText/builders";
+export {
+  EasyblocksCanvasProvider,
+  useEasyblocksCanvasContext,
+} from "./components/EasyblocksCanvasProvider";
diff --git a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
index 168eb913..ec5995c9 100644
--- a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
+++ b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
@@ -2,7 +2,6 @@
 import { deepClone, deepCompare, dotNotationGet } from "@easyblocks/utils";
 import throttle from "lodash/throttle";
 import React, {
-  useCallback,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -26,6 +25,7 @@ import type {
   RenderPlaceholderProps,
 } from "slate-react";
 import { Editable, ReactEditor, Slate, withReact } from "slate-react";
+import { useEasyblocksCanvasContext } from "../../../_internals";
 import { Box } from "../../../components/Box/Box";
 import {
   ComponentBuilder,
@@ -70,16 +70,39 @@ interface RichTextProps extends InternalNoCodeComponentProps {
 }
 
 function RichTextEditor(props: RichTextProps) {
-  const { editorContext } = (window.parent as any).editorWindowAPI;
+  // const { editorContext } = (window.parent as any).editorWindowAPI;
+
+  const canvasContext = useEasyblocksCanvasContext()!;
 
   const {
-    actions,
-    contextParams,
-    form,
-    focussedField,
+    formValues,
     locales,
-    setFocussedField,
-  } = editorContext;
+    locale,
+    focussedField,
+    definitions,
+    components,
+  } = canvasContext;
+
+  // const {
+  //   actions,
+  //   contextParams,
+  //   form,
+  //   focussedField,
+  //   locales,
+  //   setFocussedField,
+  // } = editorContext;
+
+  const setFocussedField = (field: Array<string> | string) => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/focus",
+        payload: {
+          target: field,
+        },
+      },
+      "*"
+    );
+  };
 
   const {
     __easyblocks: {
@@ -90,25 +113,24 @@ function RichTextEditor(props: RichTextProps) {
   } = props;
 
   let richTextConfig: RichTextComponentConfig = dotNotationGet(
-    form.values,
+    formValues,
     path
   );
 
   const [editor] = useState(() => withEasyblocks(withReact(createEditor())));
 
-  const localizedRichTextElements =
-    richTextConfig.elements[contextParams.locale];
+  const localizedRichTextElements = richTextConfig.elements[locale];
 
   const fallbackRichTextElements = getFallbackForLocale(
     richTextConfig.elements,
-    contextParams.locale,
+    locale,
     locales
   );
 
   const richTextElements =
     localizedRichTextElements ?? fallbackRichTextElements;
 
-  const richTextElementsConfigPath = `${path}.elements.${contextParams.locale}`;
+  const richTextElementsConfigPath = `${path}.elements.${locale}`;
 
   const [editorValue, setEditorValue] = useState(() =>
     convertRichTextElementsToEditorValue(richTextElements)
@@ -120,8 +142,9 @@ function RichTextEditor(props: RichTextProps) {
     // We only want to show rich text for default config within this component, we don't want to update raw content
     // To prevent implicit update of raw content we make a deep copy.
     richTextConfig = deepClone(richTextConfig);
-    richTextConfig.elements[contextParams.locale] =
-      convertEditorValueToRichTextElements(editorValue);
+    richTextConfig.elements[locale] = convertEditorValueToRichTextElements(
+      editor.children as Array<BlockElement>
+    );
   }
 
   /**
@@ -141,71 +164,57 @@ function RichTextEditor(props: RichTextProps) {
   );
 
   /**
-   * Whether the content editable is enabled or not. We enable it through double click.
+   * Whether the content editable is enabled or not. We enable it through double click and disable when
+   * the focused field changes to different component than rich text or any of its ancestors.
    */
   const [isEnabled, setIsEnabled] = useState(false);
   const previousRichTextComponentConfig = useRef<RichTextComponentConfig>();
-  const currentSelectionRef = useRef<BaseRange | null>(null);
+  const previousCompiledRichText = useRef<RichTextProps>();
 
-  const isConfigChanged = !isConfigEqual(
-    previousRichTextComponentConfig.current,
-    richTextConfig
-  );
-
-  if (previousRichTextComponentConfig.current && isConfigChanged) {
-    if (lastChangeReason.current !== "paste") {
-      lastChangeReason.current = "external";
-    }
+  const stringifiedRichTextConfig = JSON.stringify(richTextConfig);
+  const isRichTextActive = focussedField.some((f) => f.startsWith(path));
 
+  if (
+    !previousRichTextComponentConfig.current ||
+    (!deepCompare(richTextConfig, previousRichTextComponentConfig.current) &&
+      (lastChangeReason.current === "external" ||
+        lastChangeReason.current === "paste"))
+  ) {
     previousRichTextComponentConfig.current = richTextConfig;
     const nextEditorValue =
       convertRichTextElementsToEditorValue(richTextElements);
-    // React bails out the render if state setter function is invoked during the render phase.
-    // Doing it makes Slate always up-to date with the latest config if it's changed from outside.
-    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
-    setEditorValue(nextEditorValue);
     editor.children = nextEditorValue;
 
     if (isEnabled) {
       const newEditorSelection = getEditorSelectionFromFocusedFields(
         focussedField,
-        form
+        formValues
       );
 
-      if (isDecorationActive) {
-        currentSelectionRef.current = newEditorSelection;
+      if (newEditorSelection !== null) {
+        Transforms.select(editor, newEditorSelection);
       } else {
-        // Slate gives us two methods to update its selection:
-        // - `setSelection` updates current selection, so `editor.selection` must be not null
-        // - `select` sets the selection, so `editor.selection` must be null
-        if (newEditorSelection !== null && editor.selection !== null) {
-          Transforms.setSelection(editor, newEditorSelection);
-        } else if (newEditorSelection !== null && editor.selection === null) {
-          Transforms.select(editor, newEditorSelection);
-        } else {
-          Transforms.deselect(editor);
-        }
+        Transforms.deselect(editor);
       }
     }
+
+    // We set it only to trigger re-render of Slate after we've updated `editor.children`
+    setEditorValue(nextEditorValue);
   }
 
   useLayoutEffect(() => {
     if (
       isDecorationActive &&
-      currentSelectionRef.current !== null &&
-      !Range.isCollapsed(currentSelectionRef.current)
+      editor.selection &&
+      !Range.isCollapsed(editor.selection)
     ) {
-      splitStringNodes(editor, currentSelectionRef.current);
+      splitStringNodes(editor, editor.selection);
 
       return () => {
         unwrapStringNodesContent(editor);
       };
     }
-  }, [editor, isDecorationActive, richTextConfig]);
-
-  const isRichTextActive = focussedField.some((focusedField: any) =>
-    focusedField.startsWith(path)
-  );
+  }, [editor, isDecorationActive, stringifiedRichTextConfig]);
 
   useLayoutEffect(() => {
     // When rich text becomes inactive we want to restore all original [data-slate-string] nodes
@@ -215,20 +224,14 @@ function RichTextEditor(props: RichTextProps) {
     }
   }, [editor, isRichTextActive]);
 
-  useEffect(() => {
-    // We set previous value of rich text only once, then we manually assign it when needed.
-    previousRichTextComponentConfig.current = richTextConfig;
-  }, []);
-
   useEffect(
     // Component is blurred when the user selects other component in editor. This is different from blurring content editable.
     // Content editable can be blurred, but the component can remain active ex. when we select some text within content editable
     // and want to update its color from the sidebar.
     function handleRichTextBlur() {
       if (!isRichTextActive && isEnabled) {
-        // editor.children = deepClone(editorValue);
         setIsEnabled(false);
-        currentSelectionRef.current = null;
+        lastChangeReason.current = "external";
       }
 
       if (!editor.selection) {
@@ -246,11 +249,21 @@ function RichTextEditor(props: RichTextProps) {
         // if the fallback value is present.
         if (isSlateValueEmpty && fallbackRichTextElements !== undefined) {
           const nextRichTextElement = deepClone(richTextConfig);
-          delete nextRichTextElement.elements[contextParams.locale];
+          delete nextRichTextElement.elements[locale];
           editor.children = convertRichTextElementsToEditorValue(
             fallbackRichTextElements
           );
-          form.change(path, nextRichTextElement);
+
+          window.parent.postMessage(
+            {
+              type: "@easyblocks-editor/form-change",
+              payload: {
+                key: path,
+                value: nextRichTextElement,
+              },
+            },
+            "*"
+          );
         }
       }
     },
@@ -266,14 +279,12 @@ function RichTextEditor(props: RichTextProps) {
 
   useEffect(() => {
     function handleRichTextChanged(event: RichTextChangedEvent) {
-      if (!editor.selection) {
-        return;
-      }
-
       if (event.data.type === "@easyblocks-editor/rich-text-changed") {
-        const { payload } = event.data;
-        const { editorContext } = (window.parent as any).editorWindowAPI;
+        if (!editor.selection) {
+          return;
+        }
 
+        const { payload } = event.data;
         // Slate is an uncontrolled component and we don't have an easy access to control it.
         // It keeps its state internally and on each change we convert this state to our format.
         // This works great because changing content of editable element is easy, we append or remove things.
@@ -297,32 +308,30 @@ function RichTextEditor(props: RichTextProps) {
           return;
         }
 
-        currentSelectionRef.current = temporaryEditor.selection;
-
-        actions.runChange(() => {
-          const newRichTextElement: RichTextComponentConfig = {
-            ...richTextConfig,
-            elements: {
-              ...richTextConfig.elements,
-              [editorContext.contextParams.locale]:
-                updateSelectionResult.elements,
-            },
-          };
-
-          form.change(path, newRichTextElement);
+        const newRichTextElement: RichTextComponentConfig = {
+          ...richTextConfig,
+          elements: {
+            ...richTextConfig.elements,
+            [locale]: updateSelectionResult.elements,
+          },
+        };
 
-          const newFocusedFields =
-            updateSelectionResult.focusedRichTextParts.map(
-              (focusedRichTextPart) =>
-                getAbsoluteRichTextPartPath(
-                  focusedRichTextPart,
-                  path,
-                  editorContext.contextParams.locale
-                )
-            );
+        const newFocusedFields = updateSelectionResult.focusedRichTextParts.map(
+          (focusedRichTextPart) =>
+            getAbsoluteRichTextPartPath(focusedRichTextPart, path, locale)
+        );
 
-          return newFocusedFields;
-        });
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/form-change",
+            payload: {
+              key: path,
+              value: newRichTextElement,
+              focussedField: newFocusedFields,
+            },
+          },
+          "*"
+        );
       }
     }
 
@@ -331,7 +340,7 @@ function RichTextEditor(props: RichTextProps) {
     return () => {
       window.removeEventListener("message", handleRichTextChanged);
     };
-  }, [richTextConfig, path]);
+  }, [path, editor, richTextConfig, locale]);
 
   const decorate = createTextSelectionDecorator(editor);
   const Elements = extractElementsFromCompiledComponents(props);
@@ -341,7 +350,7 @@ function RichTextEditor(props: RichTextProps) {
     children,
     element,
   }: RenderElementProps) {
-    const Element = Elements.find(
+    let Element = Elements.find(
       (Element) =>
         Element._id === element.id ||
         NORMALIZED_IDS_TO_IDS.get(element.id) === Element._id
@@ -361,7 +370,21 @@ function RichTextEditor(props: RichTextProps) {
         return <div {...attributes}>{children}</div>;
       }
 
-      throw new Error("Missing element");
+      if (previousCompiledRichText.current) {
+        const PreviousElements = extractElementsFromCompiledComponents(
+          previousCompiledRichText.current
+        );
+
+        Element = PreviousElements.find(
+          (Element) =>
+            Element._id === element.id ||
+            NORMALIZED_IDS_TO_IDS.get(element.id) === Element._id
+        );
+      }
+
+      if (!Element) {
+        throw new Error("Missing element");
+      }
     }
 
     const compiledStyles = (() => {
@@ -422,7 +445,21 @@ function RichTextEditor(props: RichTextProps) {
         return <span {...attributes}>{children}</span>;
       }
 
-      throw new Error("Missing part");
+      if (previousCompiledRichText.current) {
+        const PreviousTextParts = extractTextPartsFromCompiledComponents(
+          previousCompiledRichText.current
+        );
+
+        TextPart = PreviousTextParts.find(
+          (TextPart) =>
+            TextPart._id === leaf.id ||
+            NORMALIZED_IDS_TO_IDS.get(leaf.id) === TextPart._id
+        );
+      }
+
+      if (!TextPart) {
+        throw new Error("Missing part");
+      }
     }
 
     const TextPartComponent = (
@@ -441,7 +478,7 @@ function RichTextEditor(props: RichTextProps) {
             <ComponentBuilder
               compiled={TextPart.components.TextWrapper[0]}
               path={path}
-              components={editorContext.components}
+              components={components}
               passedProps={{
                 __isSelected:
                   leaf.isHighlighted && leaf.highlightType === "textWrapper",
@@ -472,45 +509,49 @@ function RichTextEditor(props: RichTextProps) {
     );
   }
 
-  const scheduleConfigSync = useCallback(
-    throttle((nextValue: Array<BlockElement>) => {
-      setEditorValue(nextValue);
+  const scheduleConfigSync = throttle(
+    (nextValue: Array<BlockElement>, editor: Editor) => {
       const nextElements = convertEditorValueToRichTextElements(nextValue);
 
-      actions.runChange(() => {
-        const newRichTextElement: RichTextComponentConfig = {
-          ...richTextConfig,
-          elements: {
-            ...richTextConfig.elements,
-            [editorContext.contextParams.locale]: nextElements,
-          },
-        };
-
-        form.change(path, newRichTextElement);
-        previousRichTextComponentConfig.current = newRichTextElement;
-
-        if (editor.selection) {
-          const nextFocusedFields = getFocusedFieldsFromSlateSelection(
-            editor,
-            path,
-            contextParams.locale
-          );
+      const newRichTextElement: RichTextComponentConfig = {
+        ...richTextConfig,
+        elements: {
+          ...richTextConfig.elements,
+          [locale]: nextElements,
+        },
+      };
 
-          return nextFocusedFields;
-        }
-      });
-    }, RICH_TEXT_CONFIG_SYNC_THROTTLE_TIMEOUT),
-    [isConfigChanged, editorContext.contextParams.locale]
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/form-change",
+          payload: {
+            key: path,
+            value: newRichTextElement,
+            ...(editor.selection
+              ? {
+                  focussedField: getFocusedFieldsFromSlateSelection(
+                    editor,
+                    path,
+                    locale
+                  ),
+                }
+              : {}),
+          },
+        },
+        "*"
+      );
+    },
+    RICH_TEXT_CONFIG_SYNC_THROTTLE_TIMEOUT
   );
 
-  const scheduleFocusedFieldsChange = useCallback(
-    // Slate internally throttles the invocation of DOMSelectionChange for performance reasons.
-    // We also throttle update of our focused fields state for the same reason.
-    // This gives us a good balance between perf and showing updated fields within the sidebar.
-    throttle((focusedFields: Parameters<typeof setFocussedField>[0]) => {
+  // Slate internally throttles the invocation of DOMSelectionChange for performance reasons.
+  // We also throttle update of our focused fields state for the same reason.
+  // This gives us a good balance between perf and showing updated fields within the sidebar.
+  const scheduleFocusedFieldsChange = throttle(
+    (focusedFields: Parameters<typeof setFocussedField>[0]) => {
       setFocussedField(focusedFields);
-    }, RICH_TEXT_FOCUSED_FIELDS_SYNC_THROTTLE_TIMEOUT),
-    [setFocussedField]
+    },
+    RICH_TEXT_FOCUSED_FIELDS_SYNC_THROTTLE_TIMEOUT
   );
 
   function handleEditableChange(value: Array<Descendant>): void {
@@ -518,17 +559,6 @@ function RichTextEditor(props: RichTextProps) {
       return;
     }
 
-    // Editor's value can be changed from outside ex. sidebar or history undo/redo. If the last reason for change
-    // was "external", we skip this change. In case we would like to start typing immediately after undo/redo we
-    // set last change reason to `text-input`.
-    if (
-      lastChangeReason.current === "external" ||
-      lastChangeReason.current === "paste"
-    ) {
-      lastChangeReason.current = "text-input";
-      return;
-    }
-
     const isValueSame = deepCompare(value, editorValue);
 
     // Slate runs `onChange` callback on any change, even when the text haven't changed.
@@ -537,7 +567,7 @@ function RichTextEditor(props: RichTextProps) {
       const nextFocusedFields = getFocusedFieldsFromSlateSelection(
         editor,
         path,
-        contextParams.locale
+        locale
       );
 
       if (nextFocusedFields) {
@@ -548,7 +578,9 @@ function RichTextEditor(props: RichTextProps) {
     }
 
     lastChangeReason.current = "text-input";
-    scheduleConfigSync(value as Array<BlockElement>);
+
+    scheduleConfigSync.cancel();
+    scheduleConfigSync(value as Array<BlockElement>, editor);
   }
 
   function handleEditableFocus(): void {
@@ -570,7 +602,7 @@ function RichTextEditor(props: RichTextProps) {
           fallbackRichTextElements[0].elements[0].elements[0];
 
         // Keep only one line element with single empty rich text
-        nextRichTextComponentConfig.elements[contextParams.locale] = [
+        nextRichTextComponentConfig.elements[locale] = [
           {
             ...fallbackRichTextElements[0],
             elements: [
@@ -588,7 +620,7 @@ function RichTextEditor(props: RichTextProps) {
         ];
 
         nextSlateValue = convertRichTextElementsToEditorValue(
-          nextRichTextComponentConfig.elements[contextParams.locale]
+          nextRichTextComponentConfig.elements[locale]
         );
 
         editor.children = nextSlateValue;
@@ -598,18 +630,39 @@ function RichTextEditor(props: RichTextProps) {
           focus: Editor.start(editor, []),
         });
 
-        form.change(path, nextRichTextComponentConfig);
+        // form.change(path, nextRichTextComponentConfig);
+
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/form-change",
+            payload: {
+              key: path,
+              value: nextRichTextComponentConfig,
+            },
+          },
+          "*"
+        );
       } else {
         // If current and fallback value is missing we have:
         // - empty Slate value
         // - empty config within component-collection-localised
         // We will build next $richText component config based on current Slate value
         nextRichTextComponentConfig = richTextConfig;
-        nextRichTextComponentConfig.elements[contextParams.locale] =
+        nextRichTextComponentConfig.elements[locale] =
           convertEditorValueToRichTextElements(
             editor.children as Array<BlockElement>
           );
-        form.change(path, nextRichTextComponentConfig);
+        // form.change(path, nextRichTextComponentConfig);
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/form-change",
+            payload: {
+              key: path,
+              value: nextRichTextComponentConfig,
+            },
+          },
+          "*"
+        );
       }
 
       previousRichTextComponentConfig.current = nextRichTextComponentConfig;
@@ -618,11 +671,7 @@ function RichTextEditor(props: RichTextProps) {
         const nextFocusedFields = getFocusedRichTextPartsConfigPaths(
           editor
         ).map((richTextPartPath) =>
-          getAbsoluteRichTextPartPath(
-            richTextPartPath,
-            path,
-            contextParams.locale
-          )
+          getAbsoluteRichTextPartPath(richTextPartPath, path, locale)
         );
 
         setFocussedField(nextFocusedFields);
@@ -639,39 +688,10 @@ function RichTextEditor(props: RichTextProps) {
   }
 
   useEffect(() => {
-    function saveLatestSelection() {
-      const root = ReactEditor.findDocumentOrShadowRoot(editor);
-      const selection = (root as Document).getSelection();
-
-      if (selection && selection.type === "Range") {
-        currentSelectionRef.current = ReactEditor.toSlateRange(
-          editor,
-          selection,
-          { exactMatch: false, suppressThrow: true }
-        );
-      } else {
-        currentSelectionRef.current = null;
-      }
-    }
-
-    const throttledSaveLatestSelection = throttle(saveLatestSelection, 100);
-
-    if (isEnabled) {
-      window.document.addEventListener(
-        "selectionchange",
-        throttledSaveLatestSelection
-      );
-
-      return () => {
-        window.document.removeEventListener(
-          "selectionchange",
-          throttledSaveLatestSelection
-        );
-      };
-    }
-  }, [editor, isEnabled]);
+    previousCompiledRichText.current = props;
+  });
 
-  function handleEditableBlur(): void {
+  function handleEditableBlur() {
     lastChangeReason.current = "external";
     setIsDecorationActive(true);
   }
@@ -682,7 +702,10 @@ function RichTextEditor(props: RichTextProps) {
   function handleEditableCopy(event: React.ClipboardEvent) {
     const selectedRichTextComponentConfig = getRichTextComponentConfigFragment(
       richTextConfig,
-      editorContext
+      focussedField,
+      locale,
+      formValues,
+      definitions
     );
 
     event.clipboardData.setData(
@@ -692,19 +715,21 @@ function RichTextEditor(props: RichTextProps) {
   }
 
   function handleEditablePaste(event: React.ClipboardEvent) {
-    const selectedRichTextComponentConfigClipboardData =
+    const richTextComponentConfigClipboardData =
       event.clipboardData.getData("text/x-shopstory");
 
-    if (selectedRichTextComponentConfigClipboardData) {
+    if (richTextComponentConfigClipboardData) {
+      lastChangeReason.current = "paste";
+
       const selectedRichTextComponentConfig: RichTextComponentConfig =
-        JSON.parse(selectedRichTextComponentConfigClipboardData);
+        JSON.parse(richTextComponentConfigClipboardData);
 
       // Preventing the default action will also prevent Slate from handling this event on his own.
       event.preventDefault();
 
       const nextSlateValue = convertRichTextElementsToEditorValue(
-        duplicateConfig(selectedRichTextComponentConfig, editorContext)
-          .elements[contextParams.locale]
+        duplicateConfig(selectedRichTextComponentConfig, { definitions })
+          .elements[locale]
       );
 
       const temporaryEditor = createTemporaryEditor(editor);
@@ -713,18 +738,25 @@ function RichTextEditor(props: RichTextProps) {
         temporaryEditor.children as Array<BlockElement>
       );
 
-      actions.runChange(() => {
-        form.change(richTextElementsConfigPath, nextElements);
-
-        const nextFocusedFields = getFocusedFieldsFromSlateSelection(
-          temporaryEditor,
-          path,
-          contextParams.locale
-        );
+      const newFocusedFields = getFocusedFieldsFromSlateSelection(
+        temporaryEditor,
+        path,
+        locale
+      );
 
-        return nextFocusedFields;
-      });
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/form-change",
+          payload: {
+            key: richTextElementsConfigPath,
+            value: nextElements,
+            focussedField: newFocusedFields,
+          },
+        },
+        "*"
+      );
 
+      previousCompiledRichText.current = props;
       lastChangeReason.current = "paste";
     } else if (
       // Slate only handles pasting if the clipboardData contains text/plain type.
@@ -740,7 +772,7 @@ function RichTextEditor(props: RichTextProps) {
 
   const contentEditableClassName = useMemo(() => {
     const responsiveAlignmentStyles = mapResponsiveAlignmentToStyles(align, {
-      devices: editorContext.devices,
+      devices,
       resop,
     });
 
@@ -842,6 +874,16 @@ function RichTextEditor(props: RichTextProps) {
                 );
             }
           }}
+          onKeyDown={(event) => {
+            if (
+              (event.metaKey && event.key === "z") ||
+              (event.metaKey && event.shiftKey && event.key === "z") ||
+              (event.ctrlKey && event.key === "z") ||
+              (event.ctrlKey && event.key === "y")
+            ) {
+              lastChangeReason.current = "external";
+            }
+          }}
           readOnly={!isEnabled}
         />
       </div>
@@ -862,10 +904,6 @@ function isEditorValueEmpty(editorValue: Array<BlockElement>) {
   );
 }
 
-function isConfigEqual(newConfig: any, oldConfig: any) {
-  return deepCompare(newConfig, oldConfig);
-}
-
 function mapResponsiveAlignmentToStyles(
   align: ResponsiveValue<Alignment>,
   { devices, resop }: { devices: Devices; resop: any }
diff --git a/packages/core/src/compiler/builtins/$richText/utils/createTemporaryEditor.ts b/packages/core/src/compiler/builtins/$richText/utils/createTemporaryEditor.ts
index 483913fc..abf4faf1 100644
--- a/packages/core/src/compiler/builtins/$richText/utils/createTemporaryEditor.ts
+++ b/packages/core/src/compiler/builtins/$richText/utils/createTemporaryEditor.ts
@@ -1,6 +1,7 @@
 import { createEditor, Editor } from "slate";
 import { withReact } from "slate-react";
 import { withEasyblocks } from "../withEasyblocks";
+import { deepClone } from "@easyblocks/utils";
 
 // Slate's transforms methods mutates given editor instance.
 // By creating temporary editor instance we can apply all transformations without
@@ -9,8 +10,10 @@ function createTemporaryEditor(
   editor: Pick<Editor, "children" | "selection">
 ): Editor {
   const temporaryEditor = withEasyblocks(withReact(createEditor()));
-  temporaryEditor.children = [...editor.children];
-  temporaryEditor.selection = editor.selection ? { ...editor.selection } : null;
+  temporaryEditor.children = deepClone(editor.children);
+  temporaryEditor.selection = editor.selection
+    ? deepClone(editor.selection)
+    : null;
   return temporaryEditor;
 }
 
diff --git a/packages/core/src/compiler/builtins/$richText/utils/getEditorSelectionFromFocusedFields.ts b/packages/core/src/compiler/builtins/$richText/utils/getEditorSelectionFromFocusedFields.ts
index 102f0a0e..8d732cb1 100644
--- a/packages/core/src/compiler/builtins/$richText/utils/getEditorSelectionFromFocusedFields.ts
+++ b/packages/core/src/compiler/builtins/$richText/utils/getEditorSelectionFromFocusedFields.ts
@@ -4,7 +4,7 @@ import { parseFocusedRichTextPartConfigPath } from "./parseRichTextPartConfigPat
 
 function getEditorSelectionFromFocusedFields(
   focusedFields: Array<string>,
-  form: any
+  formValues: any
 ): Selection {
   try {
     const anchorFocusedField = focusedFields[0];
@@ -26,13 +26,11 @@ function getEditorSelectionFromFocusedFields(
       focus: {
         offset: parsedFocusedField.range
           ? parsedFocusedField.range[1]
-          : dotNotationGet(form.values, focusFocusedField).value.length,
+          : dotNotationGet(formValues, focusFocusedField).value.length,
         path: parsedFocusedField.path,
       },
     };
   } catch (error) {
-    console.log(error);
-
     return null;
   }
 }
diff --git a/packages/core/src/compiler/builtins/$richText/utils/getRichTextComponentConfigFragment.ts b/packages/core/src/compiler/builtins/$richText/utils/getRichTextComponentConfigFragment.ts
index 06f9dcd9..fe9f32d5 100644
--- a/packages/core/src/compiler/builtins/$richText/utils/getRichTextComponentConfigFragment.ts
+++ b/packages/core/src/compiler/builtins/$richText/utils/getRichTextComponentConfigFragment.ts
@@ -5,40 +5,41 @@ import {
 import { RichTextComponentConfig } from "../$richText";
 import { RichTextPartComponentConfig } from "../$richTextPart/$richTextPart";
 import { duplicateConfig } from "../../../duplicateConfig";
-import { EditorContextType } from "../../../types";
 import { parseFocusedRichTextPartConfigPath } from "./parseRichTextPartConfigPath";
 import { stripRichTextPartSelection } from "./stripRichTextTextPartSelection";
+import { EasyblocksCanvasState } from "../../../../components/EasyblocksCanvasProvider";
 
 function getRichTextComponentConfigFragment(
   sourceRichTextComponentConfig: RichTextComponentConfig,
-  editorContext: EditorContextType
+  focussedField: EasyblocksCanvasState["focussedField"],
+  locale: EasyblocksCanvasState["locale"],
+  formValues: EasyblocksCanvasState["formValues"],
+  definitions: EasyblocksCanvasState["definitions"]
 ): RichTextComponentConfig & {
   _itemProps?: Record<string, unknown>;
 } {
-  const { focussedField, form, contextParams } = editorContext;
-
   const newRichTextComponentConfig: RichTextComponentConfig = {
     ...sourceRichTextComponentConfig,
     elements: {
-      [contextParams.locale]: [],
+      [locale]: [],
     },
   };
 
   focussedField.forEach((focusedField) => {
     const textPartConfig: RichTextPartComponentConfig = get(
-      form.values,
+      formValues,
       stripRichTextPartSelection(focusedField)
     );
 
     const { path, range } = parseFocusedRichTextPartConfigPath(focusedField);
 
-    const newTextPartConfig = duplicateConfig(textPartConfig, editorContext);
+    const newTextPartConfig = duplicateConfig(textPartConfig, { definitions });
 
     if (range) {
       newTextPartConfig.value = textPartConfig.value.slice(...range);
     }
 
-    let lastParentConfigPath = `elements.${contextParams.locale}`;
+    let lastParentConfigPath = `elements.${locale}`;
 
     path.slice(0, -1).forEach((pathIndex, index) => {
       let currentConfigPath = lastParentConfigPath;
diff --git a/packages/core/src/compiler/builtins/$text/$text.editor.tsx b/packages/core/src/compiler/builtins/$text/$text.editor.tsx
index 7a588a8c..514ed3b8 100644
--- a/packages/core/src/compiler/builtins/$text/$text.editor.tsx
+++ b/packages/core/src/compiler/builtins/$text/$text.editor.tsx
@@ -3,6 +3,7 @@ import { dotNotationGet } from "@easyblocks/utils";
 import React, { ReactElement } from "react";
 import { InternalNoCodeComponentProps } from "../../../components/ComponentBuilder/ComponentBuilder";
 import { InlineTextarea } from "./InlineTextarea";
+import { useEasyblocksCanvasContext } from "../../../_internals";
 
 type TextProps = {
   value: string | undefined;
@@ -16,9 +17,15 @@ function TextEditor(props: TextProps) {
     __easyblocks: { path, runtime },
   } = props;
 
-  const { form } = (window.parent as any).editorWindowAPI.editorContext;
+  const canvasContext = useEasyblocksCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+  const { formValues } = canvasContext;
+
   const valuePath = `${path}.value`;
-  const configValue = dotNotationGet(form.values, valuePath);
+  const configValue = dotNotationGet(formValues, valuePath);
   const isLocalTextReference = configValue.id?.startsWith("local.");
 
   return (
diff --git a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
index 965dde1d..d008cef6 100644
--- a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
+++ b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
@@ -3,6 +3,7 @@ import React, { ElementRef, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import TextareaAutosize from "react-textarea-autosize";
 import { useTextValue } from "../useTextValue";
+import { useEasyblocksCanvasContext } from "../../../_internals";
 
 interface InlineTextProps {
   path: string;
@@ -18,18 +19,30 @@ export function InlineTextarea({
   const [isEnabled, setIsEnabled] = useState(false);
   const textAreaRef = useRef<ElementRef<"textarea">>(null);
 
-  const {
-    form,
-    contextParams: { locale },
-    locales,
-  } = (window.parent as any).editorWindowAPI.editorContext;
+  const canvasContext = useEasyblocksCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const { formValues, locale, locales } = canvasContext;
+
   const valuePath = `${path}.value`;
-  const value = dotNotationGet(form.values, valuePath);
+  const value = dotNotationGet(formValues, valuePath);
 
   const inputProps = useTextValue(
     value,
     (val: string | null) => {
-      form.change(valuePath, val);
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/form-change",
+          payload: {
+            key: valuePath,
+            value: val,
+          },
+        },
+        "*"
+      );
     },
     locale,
     locales,
diff --git a/packages/core/src/compiler/duplicateConfig.ts b/packages/core/src/compiler/duplicateConfig.ts
index f2bc2f6b..d4192b6d 100644
--- a/packages/core/src/compiler/duplicateConfig.ts
+++ b/packages/core/src/compiler/duplicateConfig.ts
@@ -2,11 +2,11 @@ import { deepClone, uniqueId } from "@easyblocks/utils";
 import { NoCodeComponentEntry } from "../types";
 import { configTraverse } from "./configTraverse";
 import { traverseComponents } from "./traverseComponents";
-import { CompilationContextType } from "./types";
+import { AnyContextWithDefinitions } from "../types";
 
 export function duplicateConfig<
   ConfigType extends NoCodeComponentEntry = NoCodeComponentEntry
->(inputConfig: ConfigType, compilationContext: CompilationContextType) {
+>(inputConfig: ConfigType, compilationContext: AnyContextWithDefinitions) {
   // deep copy first
   const config = deepClone(inputConfig);
 
diff --git a/packages/core/src/compiler/findComponentDefinition.ts b/packages/core/src/compiler/findComponentDefinition.ts
index de47b9cf..9498cdae 100644
--- a/packages/core/src/compiler/findComponentDefinition.ts
+++ b/packages/core/src/compiler/findComponentDefinition.ts
@@ -1,11 +1,6 @@
 import { toArray } from "@easyblocks/utils";
-import { NoCodeComponentEntry } from "../types";
-import {
-  InternalComponentDefinition,
-  InternalComponentDefinitions,
-} from "./types";
-
-type AnyContextWithDefinitions = { definitions: InternalComponentDefinitions };
+import { NoCodeComponentEntry, AnyContextWithDefinitions } from "../types";
+import { InternalComponentDefinition } from "./types";
 
 function allDefs(
   context?: AnyContextWithDefinitions
diff --git a/packages/core/src/compiler/traverseComponents.ts b/packages/core/src/compiler/traverseComponents.ts
index 0d0f426d..77a84d7e 100644
--- a/packages/core/src/compiler/traverseComponents.ts
+++ b/packages/core/src/compiler/traverseComponents.ts
@@ -1,7 +1,7 @@
 import { NoCodeComponentEntry } from "../types";
 import { findComponentDefinition } from "./findComponentDefinition";
 import { isSchemaPropComponent } from "./schema";
-import { CompilationContextType } from "./types";
+import { AnyContextWithDefinitions } from "../types";
 
 type TraverseComponentsCallback = (arg: {
   path: string;
@@ -12,7 +12,7 @@ type TraverseComponentsCallback = (arg: {
  */
 function traverseComponents(
   config: NoCodeComponentEntry,
-  context: CompilationContextType,
+  context: AnyContextWithDefinitions,
   callback: TraverseComponentsCallback
 ): void {
   traverseComponentsInternal(config, context, callback, "");
@@ -20,7 +20,7 @@ function traverseComponents(
 
 function traverseComponentsArray(
   array: NoCodeComponentEntry[],
-  context: CompilationContextType,
+  context: AnyContextWithDefinitions,
   callback: TraverseComponentsCallback,
   path: string
 ) {
@@ -31,7 +31,7 @@ function traverseComponentsArray(
 
 function traverseComponentsInternal(
   componentConfig: NoCodeComponentEntry,
-  context: CompilationContextType,
+  context: AnyContextWithDefinitions,
   callback: TraverseComponentsCallback,
   path: string
 ) {
diff --git a/packages/core/src/compiler/types.ts b/packages/core/src/compiler/types.ts
index eb570050..0b7cb128 100644
--- a/packages/core/src/compiler/types.ts
+++ b/packages/core/src/compiler/types.ts
@@ -6,6 +6,7 @@ import {
   ContextParams,
   Devices,
   EditingInfoBase,
+  EditorActions,
   ExternalSchemaProp,
   ExternalTypeDefinition,
   FieldPortal,
@@ -134,31 +135,6 @@ export type InternalComponentDefinitions = {
   components: InternalRenderableComponentDefinition<string, any, any>[];
 };
 
-type EditorActions = {
-  notify: (message: string) => void;
-  openComponentPicker: (config: {
-    path: string;
-    componentTypes?: string[];
-  }) => Promise<NoCodeComponentEntry | undefined>;
-  moveItems: (
-    fieldNames: Array<string>,
-    direction: "top" | "right" | "bottom" | "left"
-  ) => void;
-  replaceItems: (paths: Array<string>, newConfig: NoCodeComponentEntry) => void;
-  removeItems: (fieldNames: Array<string>) => void;
-  insertItem: (insertItemProps: {
-    name: string;
-    index: number;
-    block: NoCodeComponentEntry;
-  }) => void;
-  duplicateItems: (fieldNames: Array<string>) => void;
-  pasteItems: (items: Array<NoCodeComponentEntry>) => void;
-  runChange: <Callback extends () => Array<string> | void>(
-    configChangeCallback: Callback
-  ) => void;
-  logSelectedItems: () => void;
-};
-
 export type EditorContextType = CompilationContextType & {
   breakpointIndex: string;
   locales: Locale[];
diff --git a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
index e81f8232..672dedaa 100644
--- a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
+++ b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
@@ -190,7 +190,7 @@ function getCompiledSubcomponents(
   path: string,
   meta: CompilationMetadata,
   isEditing: boolean,
-  components: ComponentBuilderProps["components"]
+  components: Record<string, ComponentType<any>>
 ) {
   const originalPath = path;
 
@@ -273,7 +273,8 @@ function getCompiledSubcomponents(
                     name: path,
                     index: 0,
                     block: event.data.payload.config,
-                  })
+                  }),
+                  "*"
                 );
               }
             }
@@ -281,7 +282,7 @@ function getCompiledSubcomponents(
 
           window.addEventListener("message", handleComponentPickerCloseMessage);
 
-          window.parent.postMessage(componentPickerOpened(originalPath));
+          window.parent.postMessage(componentPickerOpened(originalPath), "*");
         }}
         meta={meta}
       />,
@@ -300,16 +301,7 @@ export type ComponentBuilderProps = {
     [key: string]: any; // any extra props passed in components
   };
   compiled: CompiledComponentConfig;
-  components: {
-    "@easyblocks/missing-component": ComponentType<any>;
-    "@easyblocks/rich-text.client": ComponentType<any>;
-    "@easyblocks/rich-text-block-element": ComponentType<any>;
-    "@easyblocks/rich-text-line-element": ComponentType<any>;
-    "@easyblocks/rich-text-part": ComponentType<any>;
-    "@easyblocks/text.client": ComponentType<any>;
-    "EditableComponentBuilder.client": ComponentType<any>;
-    [key: string]: ComponentType<any>;
-  };
+  components: Record<string, ComponentType<any>>;
 };
 
 export type InternalNoCodeComponentProps = NoCodeComponentProps & {
@@ -459,7 +451,7 @@ function ComponentBuilder(props: ComponentBuilderProps): ReactElement | null {
     __easyblocks: easyblocksProp,
   };
 
-  return <Component {...componentProps} />;
+  return <Component key={compiled._id} {...componentProps} />;
 }
 
 function getComponent(
diff --git a/packages/core/src/components/EasyblocksCanvasProvider.tsx b/packages/core/src/components/EasyblocksCanvasProvider.tsx
new file mode 100644
index 00000000..5ee5ed62
--- /dev/null
+++ b/packages/core/src/components/EasyblocksCanvasProvider.tsx
@@ -0,0 +1,69 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useState,
+  useEffect,
+  ComponentType,
+} from "react";
+import { EditorContextType } from "../_internals";
+import {
+  CompilationMetadata,
+  CompiledShopstoryComponentConfig,
+  FetchOutputResources,
+} from "../types";
+
+export type EasyblocksCanvasState = {
+  meta: CompilationMetadata;
+  compiled: CompiledShopstoryComponentConfig;
+  externalData: FetchOutputResources;
+  formValues: EditorContextType["form"]["values"];
+  definitions: EditorContextType["definitions"];
+  locale: EditorContextType["contextParams"]["locale"];
+  locales: EditorContextType["locales"];
+  isEditing: EditorContextType["isEditing"];
+  devices: EditorContextType["devices"];
+  focussedField: EditorContextType["focussedField"];
+  components: Record<string, ComponentType<any>>;
+};
+
+const EasyblocksCanvasContext = createContext<EasyblocksCanvasState | null>(
+  null
+);
+
+type EasyblocksCanvasProviderProps = {
+  children: ReactNode;
+  components: Record<string, ComponentType<any>>;
+};
+
+const EasyblocksCanvasProvider: React.FC<EasyblocksCanvasProviderProps> = ({
+  children,
+  components,
+}) => {
+  const [state, setState] = useState<EasyblocksCanvasState | null>(null);
+
+  useEffect(() => {
+    const handler = (event: any) => {
+      if (event.data.type === "@easyblocks/canvas-data") {
+        const data = JSON.parse(event.data.data);
+        setState((prevState) => ({ ...prevState, ...data, components }));
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  }, []);
+
+  return (
+    <EasyblocksCanvasContext.Provider value={state}>
+      {children}
+    </EasyblocksCanvasContext.Provider>
+  );
+};
+
+const useEasyblocksCanvasContext = () => {
+  return useContext(EasyblocksCanvasContext);
+};
+
+export { EasyblocksCanvasProvider, useEasyblocksCanvasContext };
diff --git a/packages/core/src/events.ts b/packages/core/src/events.ts
index e52d6936..a2e62cd2 100644
--- a/packages/core/src/events.ts
+++ b/packages/core/src/events.ts
@@ -1,5 +1,5 @@
 import { serialize } from "@easyblocks/utils";
-import { NoCodeComponentEntry, SchemaProp } from "./types";
+import { ConfigDevices, NoCodeComponentEntry, SchemaProp } from "./types";
 import { Component$$$SchemaProp } from "./compiler/schema";
 
 type EasyblocksEditorEventData<
@@ -119,6 +119,102 @@ type ItemMovedEvent = MessageEvent<
   >
 >;
 
+type ChangeResponsiveEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/change-responsive",
+    {
+      device: keyof ConfigDevices;
+    }
+  >
+>;
+
+type UndoEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/undo",
+    {
+      type: "@easyblocks-editor/undo";
+    }
+  >
+>;
+
+type CanvasLoadedEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/canvas-loaded",
+    {
+      type: "@easyblocks-editor/canvas-loaded";
+    }
+  >
+>;
+
+type RemoveItemsEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/remove-items",
+    {
+      type: "@easyblocks-editor/remove-items";
+      paths: Array<string>;
+    }
+  >
+>;
+
+type PasteItemsEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/paste-items",
+    {
+      type: "@easyblocks-editor/paste-items";
+      configs: any;
+    }
+  >
+>;
+
+type MoveItemsEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/move-items",
+    {
+      type: "@easyblocks-editor/move-items";
+      paths: Array<string>;
+      direction: "top" | "right" | "bottom" | "left";
+    }
+  >
+>;
+
+type LogSelectedEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/log-selected-items",
+    {
+      type: "@easyblocks-editor/log-selected-items";
+    }
+  >
+>;
+
+type FormChangeEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/form-change",
+    {
+      key: string;
+      value: any;
+      focussedField?: Array<string> | string;
+    }
+  >
+>;
+
+type RedoEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/redo",
+    {
+      type: "@easyblocks-editor/redo";
+    }
+  >
+>;
+
+type SetFocussedFieldEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/focus",
+    {
+      target: Array<string> | string;
+    }
+  >
+>;
+
 function itemMoved(
   payload: InferShopstoryEditorEventData<ItemMovedEvent>["payload"]
 ): InferShopstoryEditorEventData<ItemMovedEvent> {
@@ -145,4 +241,14 @@ export type {
   RichTextChangedEvent,
   SelectionFramePositionChangedEvent,
   EasyblocksEditorEventData,
+  ChangeResponsiveEvent,
+  UndoEvent,
+  RedoEvent,
+  SetFocussedFieldEvent,
+  FormChangeEvent,
+  CanvasLoadedEvent,
+  RemoveItemsEvent,
+  PasteItemsEvent,
+  MoveItemsEvent,
+  LogSelectedEvent,
 };
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index bdc43b1a..486011ad 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,6 +1,7 @@
 import { ComponentType, ReactElement } from "react";
 import { PartialDeep } from "type-fest";
 import { Locale } from "./locales";
+import { InternalComponentDefinitions } from "./compiler/types";
 
 export type ScalarOrCollection<T> = T | Array<T>;
 
@@ -997,3 +998,32 @@ export type TokenValue<T = any> = {
   tokenId?: string;
   widgetId?: string;
 };
+
+export type AnyContextWithDefinitions = {
+  definitions: InternalComponentDefinitions;
+};
+
+export type EditorActions = {
+  notify: (message: string) => void;
+  openComponentPicker: (config: {
+    path: string;
+    componentTypes?: string[];
+  }) => Promise<NoCodeComponentEntry | undefined>;
+  moveItems: (
+    fieldNames: Array<string>,
+    direction: "top" | "right" | "bottom" | "left"
+  ) => void;
+  replaceItems: (paths: Array<string>, newConfig: NoCodeComponentEntry) => void;
+  removeItems: (fieldNames: Array<string>) => void;
+  insertItem: (insertItemProps: {
+    name: string;
+    index: number;
+    block: NoCodeComponentEntry;
+  }) => void;
+  duplicateItems: (fieldNames: Array<string>) => void;
+  pasteItems: (items: Array<NoCodeComponentEntry>) => void;
+  runChange: <Callback extends () => Array<string> | void>(
+    configChangeCallback: Callback
+  ) => void;
+  logSelectedItems: () => void;
+};
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 2d672e3b..1853aec9 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -21,7 +21,6 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-modal": "^3.16.1",
     "react-select": "^5.7.0",
diff --git a/packages/editor/src/CanvasRoot/CanvasRoot.tsx b/packages/editor/src/CanvasRoot/CanvasRoot.tsx
index fc0f0b83..a5c5dde4 100644
--- a/packages/editor/src/CanvasRoot/CanvasRoot.tsx
+++ b/packages/editor/src/CanvasRoot/CanvasRoot.tsx
@@ -1,24 +1,39 @@
 import React, { ReactNode } from "react";
-import { useEditorGlobalKeyboardShortcuts } from "../useEditorGlobalKeyboardShortcuts";
+import { useEasyblocksCanvasContext } from "@easyblocks/core/_internals";
+import { useCanvasGlobalKeyboardShortcuts } from "../useCanvasGlobalKeyboardShortcuts";
 
 type CanvasRootProps = {
   children: ReactNode;
 };
 
 function CanvasRoot(props: CanvasRootProps) {
-  const { editorContext } = window.parent.editorWindowAPI;
+  const canvasContext = useEasyblocksCanvasContext();
 
-  useEditorGlobalKeyboardShortcuts(editorContext);
+  if (!canvasContext) {
+    return null;
+  }
+
+  const { isEditing } = canvasContext;
+
+  useCanvasGlobalKeyboardShortcuts();
 
   return (
     <div
       onClick={() => {
-        if (editorContext.isEditing) {
-          editorContext.setFocussedField([]);
+        if (isEditing) {
+          window.parent.postMessage(
+            {
+              type: "@easyblocks-editor/focus",
+              payload: {
+                target: [],
+              },
+            },
+            "*"
+          );
         }
       }}
     >
-      {editorContext.isEditing && (
+      {isEditing && (
         <div style={{ minHeight: "100vh" }}>
           <style
             dangerouslySetInnerHTML={{
@@ -28,7 +43,7 @@ function CanvasRoot(props: CanvasRootProps) {
           {props.children}
         </div>
       )}
-      {!editorContext.isEditing && props.children}
+      {!isEditing && props.children}
     </div>
   );
 }
diff --git a/packages/editor/src/EasyblocksEditor.tsx b/packages/editor/src/EasyblocksEditor.tsx
index be269fa8..91f6c2d7 100644
--- a/packages/editor/src/EasyblocksEditor.tsx
+++ b/packages/editor/src/EasyblocksEditor.tsx
@@ -5,11 +5,18 @@ import { EasyblocksCanvas } from "./EditorChildWindow";
 import { PreviewRenderer } from "./PreviewRenderer";
 import { addDebugToEditorProps } from "./debug/addDebugToEditorProps";
 import { parseQueryParams } from "./parseQueryParams";
+import {
+  EasyblocksCanvasProvider,
+  RichTextEditor,
+  TextEditor,
+} from "@easyblocks/core/_internals";
+import EditableComponentBuilder from "./EditableComponentBuilder/EditableComponentBuilder.editor";
+import TypePlaceholder from "./Placeholder";
 
 export function EasyblocksEditor(props: EasyblocksEditorProps) {
   const [selectedWindow, setSelectedWindow] = useState<
     "parent" | "child" | "preview" | null
-  >(null);
+  >(props.isCanvas ? "child" : null);
 
   const setSelectedWindowToParent = () => {
     window.isShopstoryEditor = true;
@@ -22,6 +29,10 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
       return;
     }
 
+    if (props.isCanvas) {
+      return;
+    }
+
     const setSelectedWindowToChild = () => {
       setSelectedWindow("child");
     };
@@ -62,11 +73,22 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
           onExternalDataChange={props.onExternalDataChange ?? (() => ({}))}
           widgets={props.widgets}
           components={props.components}
+          canvasURL={props.canvasURL}
         />
       )}
 
       {selectedWindow === "child" && (
-        <EasyblocksCanvas components={props.components} />
+        <EasyblocksCanvasProvider
+          components={{
+            ...props.components,
+            "@easyblocks/rich-text.editor": RichTextEditor,
+            "@easyblocks/text.editor": TextEditor,
+            "EditableComponentBuilder.editor": EditableComponentBuilder,
+            Placeholder: TypePlaceholder,
+          }}
+        >
+          <EasyblocksCanvas />
+        </EasyblocksCanvasProvider>
       )}
 
       {selectedWindow === "preview" && <PreviewRenderer {...props} />}
diff --git a/packages/editor/src/EasyblocksEditorProps.ts b/packages/editor/src/EasyblocksEditorProps.ts
index 00c69611..c7fcccfd 100644
--- a/packages/editor/src/EasyblocksEditorProps.ts
+++ b/packages/editor/src/EasyblocksEditorProps.ts
@@ -23,6 +23,7 @@ export type EasyblocksEditorProps = {
     | ComponentType<WidgetComponentProps<any>>
     | ComponentType<InlineTypeWidgetComponentProps<any>>
   >;
-
+  canvasURL?: string;
+  isCanvas?: boolean;
   __debug?: boolean;
 };
diff --git a/packages/editor/src/EasyblocksParent.tsx b/packages/editor/src/EasyblocksParent.tsx
index 033e3cdd..6e6b7bd8 100644
--- a/packages/editor/src/EasyblocksParent.tsx
+++ b/packages/editor/src/EasyblocksParent.tsx
@@ -31,6 +31,7 @@ type EasyblocksParentProps = {
     | ComponentType<InlineTypeWidgetComponentProps<any>>
   >;
   components?: Record<string, ComponentType<any>>;
+  canvasURL?: string;
 };
 
 const shouldForwardProp: ShouldForwardProp<"web"> = (propName, target) => {
@@ -82,6 +83,7 @@ export function EasyblocksParent(props: EasyblocksParentProps) {
               ...props.widgets,
             }}
             components={props.components}
+            canvasURL={props.canvasURL}
           />
         </TooltipProvider>
         <Toaster containerStyle={{ zIndex: 100100 }} />
diff --git a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
index 20b90721..69e22e43 100644
--- a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
+++ b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
@@ -10,7 +10,11 @@ import {
   ComponentCollectionSchemaProp,
   SerializedRenderableComponentDefinition,
 } from "@easyblocks/core";
-import { parsePath, useEasyblocksMetadata } from "@easyblocks/core/_internals";
+import {
+  parsePath,
+  useEasyblocksCanvasContext,
+  useEasyblocksMetadata,
+} from "@easyblocks/core/_internals";
 import { Colors } from "@easyblocks/design-system";
 import { toArray } from "@easyblocks/utils";
 import React, { Fragment } from "react";
@@ -40,8 +44,13 @@ export function BlocksControls({
   index,
   length,
 }: BlocksControlsProps) {
-  const { focussedField, setFocussedField, form } =
-    window.parent.editorWindowAPI.editorContext;
+  const canvasContext = useEasyblocksCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const { focussedField, formValues } = canvasContext;
 
   const meta = useEasyblocksMetadata();
   const dndContext = useDndContext();
@@ -61,7 +70,7 @@ export function BlocksControls({
     focusedField.startsWith(path)
   );
 
-  const entryPathParseResult = parsePath(path, form);
+  const entryPathParseResult = parsePath(path, { values: formValues });
   const entryComponentDefinition = meta.vars.definitions.components.find(
     (c) => c.id === entryPathParseResult.parent!.templateId
   );
@@ -87,7 +96,7 @@ export function BlocksControls({
   });
 
   const draggedEntryPathParseResult = dndContext.active
-    ? parsePath(dndContext.active.data.current!.path, form)
+    ? parsePath(dndContext.active.data.current!.path, { values: formValues })
     : null;
 
   const draggedComponentDefinition = draggedEntryPathParseResult
@@ -163,6 +172,10 @@ export function BlocksControls({
     const isMultipleSelection = event.shiftKey;
 
     function getNextFocusedField() {
+      if (!focussedField) {
+        return;
+      }
+
       if (isMultipleSelection) {
         if (focussedField.includes(path)) {
           const result = focussedField.filter(
@@ -184,7 +197,15 @@ export function BlocksControls({
 
     const nextFocusedField = getNextFocusedField();
 
-    setFocussedField(nextFocusedField);
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/focus",
+        payload: {
+          target: nextFocusedField,
+        },
+      },
+      "*"
+    );
 
     if (isMultipleSelection) {
       document.getSelection()?.removeAllRanges();
diff --git a/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx b/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx
index ae912670..af0d0878 100644
--- a/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx
+++ b/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx
@@ -1,5 +1,8 @@
 import type { useSortable } from "@dnd-kit/sortable";
-import { selectionFramePositionChanged } from "@easyblocks/core/_internals";
+import {
+  selectionFramePositionChanged,
+  useEasyblocksCanvasContext,
+} from "@easyblocks/core/_internals";
 import { Colors } from "@easyblocks/design-system";
 import React, { MouseEvent, ReactNode, useEffect, useState } from "react";
 
@@ -107,17 +110,36 @@ function SelectionFrameController({
     },
   });
 
+  const canvasContext = useEasyblocksCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const { focussedField } = canvasContext;
+
   useEffect(() => {
     return () => {
+      if (!focussedField) {
+        return;
+      }
       // If the the node of active element is not in the DOM anymore we want to deselect it to prevent showing
       // add buttons on the not existing element.
       if (
         isActive &&
         node &&
         !window.document.contains(node) &&
-        path === window.parent.editorWindowAPI.editorContext.focussedField[0]
+        path === focussedField[0]
       ) {
-        window.parent.editorWindowAPI.editorContext.setFocussedField([]);
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/focus",
+            payload: {
+              target: [],
+            },
+          },
+          "*"
+        );
       }
     };
   });
@@ -154,8 +176,6 @@ function useUpdateFramePosition({
   node: HTMLElement | null;
   isDisabled: boolean;
 }) {
-  const dispatch = window.parent.postMessage;
-
   useEffect(() => {
     if (isDisabled || !node) {
       return;
@@ -164,11 +184,12 @@ function useUpdateFramePosition({
     const updateSelectionFramePosition = createThrottledHandler(() => {
       const nodeRect = node.getBoundingClientRect();
 
-      dispatch(
+      window.parent.postMessage(
         selectionFramePositionChanged(
           nodeRect,
           window.document.documentElement.getBoundingClientRect()
-        )
+        ),
+        "*"
       );
     });
 
@@ -178,7 +199,7 @@ function useUpdateFramePosition({
 
     const handleResize = createThrottledHandler(() => {
       const nodeRect = node.getBoundingClientRect();
-      dispatch(selectionFramePositionChanged(nodeRect));
+      window.parent.postMessage(selectionFramePositionChanged(nodeRect), "*");
     });
 
     window.addEventListener("resize", handleResize, {
@@ -192,7 +213,10 @@ function useUpdateFramePosition({
           event.target as HTMLElement
         ).getBoundingClientRect();
 
-        dispatch(selectionFramePositionChanged(nodeRect, containerRect));
+        window.parent.postMessage(
+          selectionFramePositionChanged(nodeRect, containerRect),
+          "*"
+        );
       });
 
     const closestScrollableElement = node.closest(
@@ -207,11 +231,12 @@ function useUpdateFramePosition({
       }
     );
 
-    dispatch(
+    window.parent.postMessage(
       selectionFramePositionChanged(
         node.getBoundingClientRect(),
         closestScrollableElement?.getBoundingClientRect()
-      )
+      ),
+      "*"
     );
 
     return () => {
diff --git a/packages/editor/src/Editor.tsx b/packages/editor/src/Editor.tsx
index 8d34002a..dd14139e 100644
--- a/packages/editor/src/Editor.tsx
+++ b/packages/editor/src/Editor.tsx
@@ -24,10 +24,20 @@ import {
   validate,
 } from "@easyblocks/core";
 import {
+  CanvasLoadedEvent,
+  ChangeResponsiveEvent,
   CompilationContextType,
   ComponentPickerOpenedEvent,
+  FormChangeEvent,
   ItemInsertedEvent,
   ItemMovedEvent,
+  LogSelectedEvent,
+  MoveItemsEvent,
+  PasteItemsEvent,
+  RedoEvent,
+  RemoveItemsEvent,
+  SetFocussedFieldEvent,
+  UndoEvent,
   componentPickerClosed,
   duplicateConfig,
   findComponentDefinitionById,
@@ -176,6 +186,7 @@ type EditorProps = {
     | ComponentType<TokenTypeWidgetComponentProps<any>>
   >;
   components?: Record<string, ComponentType<any>>;
+  canvasURL?: string;
 };
 
 export const Editor = EditorBackendInitializer;
@@ -754,6 +765,12 @@ const EditorContent = ({
         });
 
         setFocussedField(fieldsToFocus);
+
+        /* Send content change event to canvas to notify it about the change */
+        shopstoryCanvasIframe?.current?.contentWindow?.postMessage(
+          "@easyblocks/content-changed",
+          "*"
+        );
       });
     },
     logSelectedItems: () => {
@@ -867,7 +884,10 @@ const EditorContent = ({
     });
   }, []);
 
+  const [canvasLoaded, setCanvasLoaded] = useState(false);
+
   useEffect(() => {
+    sendCanvasData();
     if (window.editorWindowAPI.onUpdate) {
       window.editorWindowAPI.onUpdate();
     }
@@ -877,107 +897,235 @@ const EditorContent = ({
     isEditing,
     currentViewport,
     externalData,
+    canvasLoaded,
   ]);
 
   useEffect(() => {
     function handleEditorEvents(
-      event: ComponentPickerOpenedEvent | ItemInsertedEvent | ItemMovedEvent
+      event:
+        | ComponentPickerOpenedEvent
+        | ItemInsertedEvent
+        | ItemMovedEvent
+        | ChangeResponsiveEvent
+        | SetFocussedFieldEvent
+        | UndoEvent
+        | RedoEvent
+        | FormChangeEvent
+        | CanvasLoadedEvent
+        | RemoveItemsEvent
+        | PasteItemsEvent
+        | MoveItemsEvent
+        | LogSelectedEvent
     ) {
-      if (event.data.type === "@easyblocks-editor/component-picker-opened") {
-        actions
-          .openComponentPicker({ path: event.data.payload.path })
-          .then((config) => {
-            const shopstoryCanvasIframe = window.document.getElementById(
-              "shopstory-canvas"
-            ) as HTMLIFrameElement | undefined;
-
-            shopstoryCanvasIframe?.contentWindow?.postMessage(
-              componentPickerClosed(config)
-            );
-          });
-      }
+      switch (event.data.type) {
+        case "@easyblocks-editor/remove-items": {
+          actions.removeItems(event.data.payload.paths);
+          break;
+        }
 
-      if (event.data.type === "@easyblocks-editor/item-inserted") {
-        actions.insertItem(event.data.payload);
-      }
+        case "@easyblocks-editor/paste-items": {
+          console.log(focussedField);
+          actions.pasteItems(event.data.payload.configs);
+          break;
+        }
 
-      if (event.data.type === "@easyblocks-editor/item-moved") {
-        const { fromPath, toPath, placement } = event.data.payload;
+        case "@easyblocks-editor/move-items": {
+          actions.moveItems(
+            event.data.payload.paths,
+            event.data.payload.direction
+          );
 
-        const fromPathParseResult = parsePath(fromPath, editorContext.form);
-        const toPathParseResult = parsePath(toPath, editorContext.form);
+          break;
+        }
 
-        if (
-          !fromPathParseResult.parent ||
-          !toPathParseResult.parent ||
-          fromPathParseResult.index === undefined ||
-          toPathParseResult === undefined
-        ) {
-          return;
+        case "@easyblocks-editor/log-selected-items": {
+          actions.logSelectedItems();
+          break;
         }
 
-        if (fromPathParseResult.parent.path === toPathParseResult.parent.path) {
-          const pathToMove = `${
-            fromPathParseResult.parent.path
-              ? fromPathParseResult.parent.path + "."
-              : ""
-          }${fromPathParseResult.parent.fieldName}`;
-
-          actions.runChange(() => {
-            form.mutators.move(
-              pathToMove,
-              fromPathParseResult.index,
-              toPathParseResult.index
-            );
+        case "@easyblocks-editor/canvas-loaded": {
+          setCanvasLoaded(true);
+          break;
+        }
 
-            return [toPath];
-          });
-        } else {
-          // TODO: We should reuse logic of pasting items here, but we need to handle the case of pasting into placeholder (empty array)
-          const isToPathPlaceholder = toPathParseResult.fieldName !== undefined;
-
-          const insertionPath = `${
-            toPathParseResult.parent.path === ""
-              ? ""
-              : toPathParseResult.parent.path + "."
-          }${toPathParseResult.parent.fieldName}${
-            isToPathPlaceholder
-              ? `.${toPathParseResult.index}.${toPathParseResult.fieldName}`
-              : ""
-          }`;
-
-          actions.runChange(() => {
-            const newConfig = duplicateConfig(
-              dotNotationGet(form.values, fromPath),
-              editorContext
-            );
+        case "@easyblocks-editor/form-change": {
+          if (event.data.payload.focussedField) {
+            actions.runChange(() => {
+              if (
+                event.data.type === "@easyblocks-editor/form-change" &&
+                Array.isArray(event.data.payload.focussedField)
+              ) {
+                form.change(event.data.payload.key, event.data.payload.value);
+                return event.data.payload.focussedField;
+              }
+            });
+          } else {
+            form.change(event.data.payload.key, event.data.payload.value);
+          }
 
-            const insertionIndex = calculateInsertionIndex(
-              fromPath,
-              toPath,
-              placement,
-              form
-            );
+          break;
+        }
+
+        case "@easyblocks-editor/focus": {
+          handleSetFocussedField(event.data.payload.target);
+          break;
+        }
+
+        case "@easyblocks-editor/change-responsive": {
+          setCurrentViewport(event.data.payload.device);
+          break;
+        }
 
-            form.mutators.insert(insertionPath, insertionIndex, newConfig);
+        case "@easyblocks-editor/undo": {
+          undo();
+          break;
+        }
+
+        case "@easyblocks-editor/redo": {
+          redo();
+          break;
+        }
+
+        case "@easyblocks-editor/component-picker-opened": {
+          actions
+            .openComponentPicker({ path: event.data.payload.path })
+            .then((config) => {
+              const shopstoryCanvasIframe = window.document.getElementById(
+                "shopstory-canvas"
+              ) as HTMLIFrameElement | undefined;
+
+              shopstoryCanvasIframe?.contentWindow?.postMessage(
+                componentPickerClosed(config),
+                "*"
+              );
+            });
+
+          break;
+        }
+
+        case "@easyblocks-editor/item-inserted": {
+          actions.insertItem(event.data.payload);
+          break;
+        }
+
+        case "@easyblocks-editor/item-moved": {
+          const { fromPath, toPath, placement } = event.data.payload;
+
+          const fromPathParseResult = parsePath(fromPath, editorContext.form);
+          const toPathParseResult = parsePath(toPath, editorContext.form);
 
-            actions.removeItems([fromPath]);
+          if (
+            !fromPathParseResult.parent ||
+            !toPathParseResult.parent ||
+            fromPathParseResult.index === undefined ||
+            toPathParseResult === undefined
+          ) {
+            return;
+          }
 
-            return [
+          if (
+            fromPathParseResult.parent.path === toPathParseResult.parent.path
+          ) {
+            const pathToMove = `${
+              fromPathParseResult.parent.path
+                ? fromPathParseResult.parent.path + "."
+                : ""
+            }${fromPathParseResult.parent.fieldName}`;
+
+            actions.runChange(() => {
+              form.mutators.move(
+                pathToMove,
+                fromPathParseResult.index,
+                toPathParseResult.index
+              );
+
+              return [toPath];
+            });
+          } else {
+            // TODO: We should reuse logic of pasting items here, but we need to handle the case of pasting into placeholder (empty array)
+            const isToPathPlaceholder =
+              toPathParseResult.fieldName !== undefined;
+
+            const insertionPath = `${
+              toPathParseResult.parent.path === ""
+                ? ""
+                : toPathParseResult.parent.path + "."
+            }${toPathParseResult.parent.fieldName}${
               isToPathPlaceholder
-                ? `${insertionPath}.0`
-                : `${insertionPath}.${insertionIndex}`,
-            ];
-          });
+                ? `.${toPathParseResult.index}.${toPathParseResult.fieldName}`
+                : ""
+            }`;
+
+            actions.runChange(() => {
+              const newConfig = duplicateConfig(
+                dotNotationGet(form.values, fromPath),
+                editorContext
+              );
+
+              const insertionIndex = calculateInsertionIndex(
+                fromPath,
+                toPath,
+                placement,
+                form
+              );
+
+              form.mutators.insert(insertionPath, insertionIndex, newConfig);
+
+              actions.removeItems([fromPath]);
+
+              return [
+                isToPathPlaceholder
+                  ? `${insertionPath}.0`
+                  : `${insertionPath}.${insertionIndex}`,
+              ];
+            });
+          }
+
+          break;
         }
+
+        default:
+          break;
       }
     }
 
     window.addEventListener("message", handleEditorEvents);
 
-    return () => window.removeEventListener("message", handleEditorEvents);
+    return () => {
+      window.removeEventListener("message", handleEditorEvents);
+    };
+  }, [focussedField]);
+
+  const shopstoryCanvasIframe = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    const iframe = document.getElementById(
+      "shopstory-canvas"
+    ) as HTMLIFrameElement | null;
+    shopstoryCanvasIframe.current = iframe;
   }, []);
 
+  const sendCanvasData = () => {
+    shopstoryCanvasIframe?.current?.contentWindow?.postMessage(
+      {
+        type: "@easyblocks/canvas-data",
+        data: JSON.stringify({
+          compiled: renderableContent,
+          meta,
+          externalData: externalData,
+          formValues: form.values,
+          definitions: editorContext.definitions,
+          locale: editorContext.contextParams.locale,
+          locales: editorContext.locales,
+          isEditing,
+          devices: editorContext.devices,
+          focussedField,
+        }),
+      },
+      "*"
+    );
+  };
+
   const [isDataSaverOverlayOpen, setDataSaverOverlayOpen] = useState(false);
 
   useEditorGlobalKeyboardShortcuts(editorContext);
@@ -1047,12 +1195,11 @@ const EditorContent = ({
                 }}
               >
                 <EditorIframe
-                  onEditorHistoryUndo={undo}
-                  onEditorHistoryRedo={redo}
                   width={iframeSize.width}
                   height={iframeSize.height}
                   transform={iframeSize.transform}
                   containerRef={iframeContainerRef}
+                  canvasURL={props.canvasURL}
                 />
                 {isEditing && (
                   <SelectionFrame
diff --git a/packages/editor/src/EditorChildWindow.tsx b/packages/editor/src/EditorChildWindow.tsx
index 8b58a91b..17e0766e 100644
--- a/packages/editor/src/EditorChildWindow.tsx
+++ b/packages/editor/src/EditorChildWindow.tsx
@@ -10,18 +10,14 @@ import { SortableContext } from "@dnd-kit/sortable";
 import { NoCodeComponentEntry, Easyblocks } from "@easyblocks/core";
 import {
   EasyblocksMetadataProvider,
-  EditorContextType,
-  RichTextEditor,
-  TextEditor,
   configTraverse,
   itemMoved,
+  useEasyblocksCanvasContext,
 } from "@easyblocks/core/_internals";
 import { useForceRerender } from "@easyblocks/utils";
 import React, { useEffect, useRef, useState } from "react";
-import { z } from "zod";
+import { set, z } from "zod";
 import { CanvasRoot } from "./CanvasRoot/CanvasRoot";
-import EditableComponentBuilder from "./EditableComponentBuilder/EditableComponentBuilder.editor";
-import TypePlaceholder from "./Placeholder";
 
 const dragDataSchema = z.object({
   path: z.string(),
@@ -43,14 +39,7 @@ function customCollisionDetection(args: Parameters<CollisionDetection>[0]) {
   return rectIntersection(args);
 }
 
-export function EasyblocksCanvas({
-  components,
-}: {
-  components?: Record<string, React.ComponentType<any>>;
-}) {
-  const { meta, compiled, externalData, editorContext } =
-    window.parent.editorWindowAPI;
-
+export function EasyblocksCanvas() {
   const [enabled, setEnabled] = useState(false);
   const activeDraggedEntryPath = useRef<string | null>(null);
   const { forceRerender } = useForceRerender();
@@ -69,25 +58,28 @@ export function EasyblocksCanvas({
   }, []);
 
   useEffect(() => {
-    window.parent.editorWindowAPI.onUpdate = () => {
-      // Force re-render when child gets info from parent that data changed
-      forceRerender();
-    };
-  });
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/canvas-loaded",
+      },
+      "*"
+    );
+  }, []);
+
+  const canvasContext = useEasyblocksCanvasContext();
 
-  const shouldNotRender = !enabled || !meta || !compiled || !externalData;
+  const shouldNotRender = !enabled || !canvasContext;
 
   if (shouldNotRender) {
     return <div>Loading...</div>;
   }
 
-  const sortableItems = getSortableItems(
-    editorContext.form.values,
-    editorContext
-  );
+  const { meta, compiled, externalData, formValues, definitions, components } =
+    canvasContext;
+
+  const sortableItems = getSortableItems(formValues, definitions);
 
   return (
-    /* EasyblocksMetadataProvider must be defined in case of nested <Easyblocks /> components are used! */
     <EasyblocksMetadataProvider meta={meta}>
       <CanvasRoot>
         <DndContext
@@ -98,7 +90,15 @@ export function EasyblocksCanvas({
             activeDraggedEntryPath.current = dragDataSchema.parse(
               event.active.data.current
             ).path;
-            window.parent.editorWindowAPI.editorContext.setFocussedField([]);
+            window.parent.postMessage(
+              {
+                type: "@easyblocks-editor/focus",
+                payload: {
+                  target: [],
+                },
+              },
+              "*"
+            );
           }}
           onDragEnd={(event) => {
             document.documentElement.style.cursor = "";
@@ -109,8 +109,14 @@ export function EasyblocksCanvas({
 
               if (event.over.id === event.active.id) {
                 // If the dragged item is dropped on itself, we want to refocus the dragged item.
-                window.parent.editorWindowAPI.editorContext.setFocussedField(
-                  activeData.path
+                window.parent.postMessage(
+                  {
+                    type: "@easyblocks-editor/focus",
+                    payload: {
+                      target: activeData.path,
+                    },
+                  },
+                  "*"
                 );
               } else {
                 const itemMovedEvent = itemMoved({
@@ -122,21 +128,33 @@ export function EasyblocksCanvas({
                 });
 
                 requestAnimationFrame(() => {
-                  window.parent.postMessage(itemMovedEvent);
+                  window.parent.postMessage(itemMovedEvent, "*");
                 });
               }
             } else {
               // If there was no drop target, we want to refocus the dragged item.
-              window.parent.editorWindowAPI.editorContext.setFocussedField(
-                activeData.path
+              window.parent.postMessage(
+                {
+                  type: "@easyblocks-editor/focus",
+                  payload: {
+                    target: activeData.path,
+                  },
+                },
+                "*"
               );
             }
           }}
           onDragCancel={(event) => {
             document.documentElement.style.cursor = "";
             // If the drag was canceled, we want to refocus dragged item.
-            window.parent.editorWindowAPI.editorContext.setFocussedField(
-              dragDataSchema.parse(event.active.data.current).path
+            window.parent.postMessage(
+              {
+                type: "@easyblocks-editor/focus",
+                payload: {
+                  target: dragDataSchema.parse(event.active.data.current).path,
+                },
+              },
+              "*"
             );
           }}
         >
@@ -147,13 +165,7 @@ export function EasyblocksCanvas({
                 meta,
               }}
               externalData={externalData}
-              components={{
-                ...components,
-                "@easyblocks/rich-text.editor": RichTextEditor,
-                "@easyblocks/text.editor": TextEditor,
-                "EditableComponentBuilder.editor": EditableComponentBuilder,
-                Placeholder: TypePlaceholder,
-              }}
+              components={components}
             />
           </SortableContext>
         </DndContext>
@@ -162,15 +174,12 @@ export function EasyblocksCanvas({
   );
 }
 
-function getSortableItems(
-  rootNoCodeEntry: NoCodeComponentEntry,
-  editorContext: EditorContextType
-) {
+function getSortableItems(formValues: NoCodeComponentEntry, definitions: any) {
   const sortableItems: Array<string> = [];
 
   configTraverse(
-    rootNoCodeEntry,
-    editorContext,
+    formValues,
+    { definitions },
     ({ value, schemaProp, config }) => {
       if (schemaProp.type === "component-collection") {
         if (value.length === 0) {
diff --git a/packages/editor/src/EditorIframe.tsx b/packages/editor/src/EditorIframe.tsx
index eb892105..6d6c9821 100644
--- a/packages/editor/src/EditorIframe.tsx
+++ b/packages/editor/src/EditorIframe.tsx
@@ -1,24 +1,21 @@
 import { Colors } from "@easyblocks/design-system";
 import React, { useState } from "react";
 import styled, { css } from "styled-components";
-import { ExtraKeys, useWindowKeyDown } from "./useWindowKeyDown";
 
 interface EditorIframeWrapperProps {
-  onEditorHistoryRedo: () => void;
-  onEditorHistoryUndo: () => void;
   width: number;
   height: number;
   transform: string;
   containerRef: React.RefObject<HTMLDivElement>;
+  canvasURL?: string;
 }
 
 function EditorIframe({
-  onEditorHistoryRedo,
-  onEditorHistoryUndo,
   width,
   height,
   transform,
   containerRef,
+  canvasURL,
 }: EditorIframeWrapperProps) {
   const [isIframeReady, setIframeReady] = useState(false);
 
@@ -26,32 +23,12 @@ function EditorIframe({
     setIframeReady(true);
   };
 
-  useWindowKeyDown("z", onEditorHistoryUndo, {
-    extraKeys: [ExtraKeys.META_KEY],
-    isDisabled: !isIframeReady,
-  });
-
-  useWindowKeyDown("z", onEditorHistoryRedo, {
-    extraKeys: [ExtraKeys.META_KEY, ExtraKeys.SHIFT_KEY],
-    isDisabled: !isIframeReady,
-  });
-
-  useWindowKeyDown("z", onEditorHistoryUndo, {
-    extraKeys: [ExtraKeys.CTRL_KEY],
-    isDisabled: !isIframeReady,
-  });
-
-  useWindowKeyDown("y", onEditorHistoryRedo, {
-    extraKeys: [ExtraKeys.CTRL_KEY],
-    isDisabled: !isIframeReady,
-  });
-
   return (
     <IframeContainer ref={containerRef}>
       <IframeInnerContainer>
         <Iframe
           id="shopstory-canvas"
-          src={window.location.href}
+          src={canvasURL || window.location.href}
           onLoad={handleIframeLoaded}
           style={{
             // These properties will change a lot during resizing, so we don't pass it to styled component to prevent
diff --git a/packages/editor/src/Placeholder.tsx b/packages/editor/src/Placeholder.tsx
index 2645006a..b0c61947 100644
--- a/packages/editor/src/Placeholder.tsx
+++ b/packages/editor/src/Placeholder.tsx
@@ -1,7 +1,11 @@
 import { useDndContext } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { PlaceholderAppearance } from "@easyblocks/core";
-import { parsePath, useEasyblocksMetadata } from "@easyblocks/core/_internals";
+import {
+  parsePath,
+  useEasyblocksCanvasContext,
+  useEasyblocksMetadata,
+} from "@easyblocks/core/_internals";
 import { Colors, Fonts } from "@easyblocks/design-system";
 import { toArray } from "@easyblocks/utils";
 import React from "react";
@@ -117,13 +121,18 @@ type TypePlaceholderComponentBuilderProps = {
 export default function TypePlaceholder(
   props: TypePlaceholderComponentBuilderProps
 ) {
-  const { form } = window.parent.editorWindowAPI
-    .editorContext as EditorContextType;
+  const canvasContext = useEasyblocksCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const { formValues } = canvasContext;
   const meta = useEasyblocksMetadata();
   const dndContext = useDndContext();
 
   const draggedEntryPathParseResult = dndContext.active
-    ? parsePath(dndContext.active.data.current!.path, form)
+    ? parsePath(dndContext.active.data.current!.path, { values: formValues })
     : null;
 
   const draggedComponentDefinition = draggedEntryPathParseResult
diff --git a/packages/editor/src/tinacms/fields/plugins/IdentityFieldPlugin.tsx b/packages/editor/src/tinacms/fields/plugins/IdentityFieldPlugin.tsx
index c789ab02..2a272ce0 100644
--- a/packages/editor/src/tinacms/fields/plugins/IdentityFieldPlugin.tsx
+++ b/packages/editor/src/tinacms/fields/plugins/IdentityFieldPlugin.tsx
@@ -12,6 +12,7 @@ import { toArray } from "@easyblocks/utils";
 import React, { useContext } from "react";
 import type { FieldRenderProps } from "react-final-form";
 import { css } from "styled-components";
+
 import { useEditorContext } from "../../../EditorContext";
 import { isMixedFieldValue } from "../components/isMixedFieldValue";
 import { PanelContext } from "./BlockFieldPlugin";
@@ -56,9 +57,12 @@ function IdentityField({ input, field }: IdentityFieldProps) {
         (parentSchemaProp as ComponentSchemaProp).required
       : true);
 
-  const isNonChangable =
-    componentDefinition?.id === "@easyblocks/rich-text-part" ||
+  const isRootComponent =
     componentDefinition?.id === editorContext.rootComponent.id;
+  const isClosable = isRootComponent && editorContext.focussedField.length > 0;
+
+  const isNonChangable =
+    componentDefinition?.id === "@easyblocks/rich-text-part" || isRootComponent;
 
   function handleChangeComponentType() {
     if (isNonChangable) {
@@ -83,6 +87,18 @@ function IdentityField({ input, field }: IdentityFieldProps) {
   }
 
   function handleRemove() {
+    if (isClosable) {
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/toggle-settings",
+          payload: null,
+        },
+        "*"
+      );
+
+      return;
+    }
+
     if (isNonRemovable) {
       return;
     }
@@ -106,6 +122,7 @@ function IdentityField({ input, field }: IdentityFieldProps) {
       >
         {componentDefinition?.label ?? componentDefinition?.id}
       </Typography>
+
       {!isNonChangable && <Icons.ChevronDown size={16} />}
     </div>
   );
@@ -132,7 +149,7 @@ function IdentityField({ input, field }: IdentityFieldProps) {
             onClick={() => {
               panelContext.onClose();
             }}
-            css={`
+            css={css`
               margin-right: auto;
             `}
           />
@@ -141,20 +158,25 @@ function IdentityField({ input, field }: IdentityFieldProps) {
         {isNonChangable && (
           <div style={{ padding: "7px 6px" }}>{titleContent}</div>
         )}
+
         {!isNonChangable && (
-          <ButtonGhost onClick={handleChangeComponentType}>
+          <ButtonGhost
+            title="Replace component"
+            onClick={handleChangeComponentType}
+          >
             {titleContent}
           </ButtonGhost>
         )}
 
         <ButtonGhost
           aria-label="Remove component"
-          icon={Icons.Remove}
+          title="Remove component"
+          icon={isClosable ? Icons.Close : Icons.Remove}
           onClick={handleRemove}
           css={css`
             margin-left: auto;
-            opacity: ${isNonRemovable ? 0 : 1};
-            pointer-events: ${isNonRemovable ? "none" : "auto"};
+            opacity: ${isNonRemovable && !isClosable ? 0 : 1};
+            pointer-events: ${isNonRemovable && !isClosable ? "none" : "auto"};
           `}
         />
       </div>
diff --git a/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts b/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts
new file mode 100644
index 00000000..a9718454
--- /dev/null
+++ b/packages/editor/src/useCanvasGlobalKeyboardShortcuts.ts
@@ -0,0 +1,257 @@
+import {
+  EditorContextType,
+  duplicateConfig,
+  useEasyblocksCanvasContext,
+} from "@easyblocks/core/_internals";
+import { dotNotationGet, preOrderPathComparator } from "@easyblocks/utils";
+import { useEffect } from "react";
+import { AnyContextWithDefinitions } from "@easyblocks/core/";
+import { ExtraKeys, useWindowKeyDown } from "./useWindowKeyDown";
+
+const GLOBAL_SHORTCUTS_KEYS = [
+  "Delete",
+  "Backspace",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "l",
+  "L",
+];
+
+const DATA_TRANSFER_FORMAT = "text/x-shopstory";
+
+const actions = {
+  undo: () => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/undo",
+        payload: {},
+      },
+      "*"
+    );
+  },
+  redo: () => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/redo",
+        payload: {},
+      },
+      "*"
+    );
+  },
+  removeItems: (paths: string[]) => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/remove-items",
+        payload: {
+          paths,
+        },
+      },
+      "*"
+    );
+  },
+  moveItems: (paths: string[], direction: "top" | "bottom") => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/move-items",
+        payload: {
+          paths,
+          direction,
+        },
+      },
+      "*"
+    );
+  },
+  logSelectedItems: () => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/log-selected-items",
+        payload: {},
+      },
+      "*"
+    );
+  },
+  pasteItems: (configs: any[]) => {
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/paste-items",
+        payload: {
+          configs,
+        },
+      },
+      "*"
+    );
+  },
+};
+
+function useCanvasGlobalKeyboardShortcuts() {
+  const canvasContext = useEasyblocksCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const { formValues, definitions, focussedField } = canvasContext;
+
+  useWindowKeyDown("z", actions.undo, {
+    extraKeys: [ExtraKeys.META_KEY],
+    isDisabled: false,
+  });
+
+  useWindowKeyDown("z", actions.redo, {
+    extraKeys: [ExtraKeys.META_KEY, ExtraKeys.SHIFT_KEY],
+    isDisabled: false,
+  });
+
+  useWindowKeyDown("z", actions.undo, {
+    extraKeys: [ExtraKeys.CTRL_KEY],
+    isDisabled: false,
+  });
+
+  useWindowKeyDown("y", actions.redo, {
+    extraKeys: [ExtraKeys.CTRL_KEY],
+    isDisabled: false,
+  });
+
+  useEffect(() => {
+    function handleKeydown(event: KeyboardEvent): void {
+      if (isTargetInputElement(event.target)) {
+        return;
+      }
+
+      if (!isGlobalShortcut(event) || !isAnyFieldSelected(focussedField)) {
+        return;
+      }
+
+      if (event.key === "Delete" || event.key === "Backspace") {
+        actions.removeItems(focussedField);
+      } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        actions.moveItems(focussedField, "top");
+      } else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        actions.moveItems(focussedField, "bottom");
+      } else if (event.key.toUpperCase() === "L") {
+        actions.logSelectedItems();
+      }
+    }
+
+    function handleCopy(event: ClipboardEvent): void {
+      if (!canHandleCopyPaste(focussedField, event)) {
+        return;
+      }
+      const configs = getConfigsToCopy(focussedField, formValues, {
+        definitions,
+      });
+
+      event.preventDefault();
+      event.clipboardData?.setData(
+        DATA_TRANSFER_FORMAT,
+        JSON.stringify(configs)
+      );
+    }
+
+    function handleCut(event: ClipboardEvent): void {
+      if (!canHandleCopyPaste(focussedField, event)) {
+        return;
+      }
+
+      const configs = getConfigsToCopy(focussedField, formValues, {
+        definitions,
+      });
+
+      event.preventDefault();
+      event.clipboardData?.setData(
+        DATA_TRANSFER_FORMAT,
+        JSON.stringify(configs)
+      );
+
+      actions.removeItems(focussedField);
+    }
+
+    function handlePaste(event: ClipboardEvent): void {
+      if (!canHandleCopyPaste(focussedField, event)) {
+        return;
+      }
+
+      const rawData = event.clipboardData?.getData(DATA_TRANSFER_FORMAT);
+
+      if (!rawData || rawData === "") {
+        return;
+      }
+
+      try {
+        const parsedData = JSON.parse(rawData);
+
+        const data = Array.isArray(parsedData) ? parsedData : [parsedData];
+
+        actions.pasteItems(data);
+        event.preventDefault();
+      } catch (e) {
+        console.error(e);
+        return;
+      }
+    }
+
+    window.document.addEventListener("keydown", handleKeydown);
+    window.document.addEventListener("copy", handleCopy);
+    window.document.addEventListener("cut", handleCut);
+    window.document.addEventListener("paste", handlePaste);
+
+    return () => {
+      window.document.removeEventListener("keydown", handleKeydown);
+      window.document.removeEventListener("copy", handleCopy);
+      window.document.removeEventListener("cut", handleCut);
+      window.document.removeEventListener("paste", handlePaste);
+    };
+  });
+}
+
+function isTargetInputElement(target: EventTarget | null): boolean {
+  return (
+    isTargetHtmlElement(target) &&
+    (["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) ||
+      (target.tagName === "DIV" && target.getAttribute("role") === "textbox"))
+  );
+}
+
+function isTargetHtmlElement(
+  element: EventTarget | null
+): element is HTMLElement {
+  return element !== null;
+}
+
+function getConfigsToCopy(
+  paths: string[],
+  formValues: any,
+  context: AnyContextWithDefinitions
+) {
+  const sortedPaths = [...paths].sort(preOrderPathComparator("ascending"));
+  return sortedPaths.map((path) => {
+    const config = dotNotationGet(formValues, path);
+    return duplicateConfig(config, context);
+  });
+}
+
+function canHandleCopyPaste(focussedField: string[], event: ClipboardEvent) {
+  const notInsideInputElement = !(
+    isTargetInputElement(event.target) ||
+    isTargetInputElement(document.activeElement)
+  );
+
+  const insideEditorIFrame = window.self !== window.top;
+  const focussedFieldSelected = isAnyFieldSelected(focussedField);
+  return notInsideInputElement && insideEditorIFrame && focussedFieldSelected;
+}
+
+function isGlobalShortcut(event: KeyboardEvent): boolean {
+  return GLOBAL_SHORTCUTS_KEYS.includes(event.key);
+}
+
+// FIXME: This is my mistake, because I was lazy at the beginning and it was easier for me to introduce changes
+// by assuming that non empty array with empty string means no fields selected.
+// IMO this is stupid and can lead to confusion.
+function isAnyFieldSelected(focussedField: string[]) {
+  return focussedField.length > 0 && focussedField[0] !== "";
+}
+
+export { useCanvasGlobalKeyboardShortcuts };
diff --git a/packages/editor/src/useWindowKeyDown.ts b/packages/editor/src/useWindowKeyDown.ts
index 70996e66..6a829351 100644
--- a/packages/editor/src/useWindowKeyDown.ts
+++ b/packages/editor/src/useWindowKeyDown.ts
@@ -43,12 +43,7 @@ export const useWindowKeyDown = (
 
   useEffect(() => {
     if (!isDisabled) {
-      document
-        .getElementsByTagName("iframe")![0]
-        .contentWindow!.window.document.body.addEventListener(
-          "keydown",
-          downHandler
-        );
+      document.body.addEventListener("keydown", downHandler);
 
       window.addEventListener("keydown", downHandler);
       return () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab33e0fa..e6ee79ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 overrides:
   '@types/react': ^18.2.20
 
@@ -480,7 +484,7 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       react:
-        specifier: ^18.2.0
+        specifier: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
         version: 18.2.0
       react-hot-toast:
         specifier: ^2.4.0
@@ -3307,7 +3311,6 @@ packages:
     dependencies:
       eslint: 8.36.0
       eslint-visitor-keys: 3.4.3
-    dev: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.36.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
@@ -3342,7 +3345,6 @@ packages:
   /@eslint-community/regexpp@4.4.1:
     resolution: {integrity: sha512-BISJ6ZE4xQsuL/FmsyRaiffpq977bMlsKfGHTQrOGFErfByxIe6iZTxPf/00Zon9b9a7iUykfQwejN3s2ZW/Bw==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: true
 
   /@eslint-community/regexpp@4.9.0:
     resolution: {integrity: sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==}
@@ -3364,7 +3366,6 @@ packages:
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@eslint/eslintrc@2.1.2:
     resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
@@ -3386,7 +3387,6 @@ packages:
   /@eslint/js@8.36.0:
     resolution: {integrity: sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
 
   /@eslint/js@8.44.0:
     resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
@@ -3509,7 +3509,6 @@ packages:
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@humanwhocodes/module-importer@1.0.1:
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@@ -5016,7 +5015,7 @@ packages:
   /@radix-ui/react-accessible-icon@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-duVGKeWPSUILr/MdlPxV+GeULTc2rS1aihGdQ3N2qCUPMgxYLxvAsHJM3mCVLF8d5eK+ympmB22mb1F3a5biNw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5037,7 +5036,7 @@ packages:
   /@radix-ui/react-alert-dialog@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5063,7 +5062,7 @@ packages:
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5084,7 +5083,7 @@ packages:
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5105,7 +5104,7 @@ packages:
   /@radix-ui/react-aspect-ratio@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5126,7 +5125,7 @@ packages:
   /@radix-ui/react-avatar@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5150,7 +5149,7 @@ packages:
   /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5178,7 +5177,7 @@ packages:
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5202,7 +5201,7 @@ packages:
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5226,7 +5225,7 @@ packages:
   /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -5240,7 +5239,7 @@ packages:
   /@radix-ui/react-context-menu@2.1.5(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5266,7 +5265,7 @@ packages:
   /@radix-ui/react-context@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -5280,7 +5279,7 @@ packages:
   /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5314,7 +5313,7 @@ packages:
   /@radix-ui/react-direction@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -5328,7 +5327,7 @@ packages:
   /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5353,7 +5352,7 @@ packages:
   /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5378,7 +5377,7 @@ packages:
   /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5403,7 +5402,7 @@ packages:
   /@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5430,7 +5429,7 @@ packages:
   /@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5457,7 +5456,7 @@ packages:
   /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -5471,7 +5470,7 @@ packages:
   /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5494,7 +5493,7 @@ packages:
   /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5517,7 +5516,7 @@ packages:
   /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5540,7 +5539,7 @@ packages:
   /@radix-ui/react-form@0.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5566,7 +5565,7 @@ packages:
   /@radix-ui/react-hover-card@1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5603,7 +5602,7 @@ packages:
   /@radix-ui/react-id@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -5618,7 +5617,7 @@ packages:
   /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5639,7 +5638,7 @@ packages:
   /@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5677,7 +5676,7 @@ packages:
   /@radix-ui/react-menu@2.0.6(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5715,7 +5714,7 @@ packages:
   /@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5750,7 +5749,7 @@ packages:
   /@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5780,7 +5779,7 @@ packages:
   /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5810,7 +5809,7 @@ packages:
   /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5840,7 +5839,7 @@ packages:
   /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5861,7 +5860,7 @@ packages:
   /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5882,7 +5881,7 @@ packages:
   /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5903,7 +5902,7 @@ packages:
   /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5925,7 +5924,7 @@ packages:
   /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5947,7 +5946,7 @@ packages:
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5968,7 +5967,7 @@ packages:
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -5989,7 +5988,7 @@ packages:
   /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6019,7 +6018,7 @@ packages:
   /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6049,7 +6048,7 @@ packages:
   /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6078,7 +6077,7 @@ packages:
   /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6107,7 +6106,7 @@ packages:
   /@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6136,7 +6135,7 @@ packages:
   /@radix-ui/react-select@2.0.0(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6177,7 +6176,7 @@ packages:
   /@radix-ui/react-select@2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6218,7 +6217,7 @@ packages:
   /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6239,7 +6238,7 @@ packages:
   /@radix-ui/react-slider@1.1.2(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6270,7 +6269,7 @@ packages:
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6285,7 +6284,7 @@ packages:
   /@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6312,7 +6311,7 @@ packages:
   /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6340,7 +6339,7 @@ packages:
   /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6368,7 +6367,7 @@ packages:
   /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6395,7 +6394,7 @@ packages:
   /@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6418,7 +6417,7 @@ packages:
   /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6450,7 +6449,7 @@ packages:
   /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6482,7 +6481,7 @@ packages:
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6496,7 +6495,7 @@ packages:
   /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6511,7 +6510,7 @@ packages:
   /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6526,7 +6525,7 @@ packages:
   /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6540,7 +6539,7 @@ packages:
   /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6554,7 +6553,7 @@ packages:
   /@radix-ui/react-use-rect@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6569,7 +6568,7 @@ packages:
   /@radix-ui/react-use-size@1.0.1(@types/react@18.2.42)(react@18.2.0):
     resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       react: ^16.8 || ^17.0 || ^18.0
     peerDependenciesMeta:
       '@types/react':
@@ -6584,7 +6583,7 @@ packages:
   /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6605,7 +6604,7 @@ packages:
   /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -6632,7 +6631,7 @@ packages:
   /@radix-ui/themes@2.0.3(@types/react-dom@18.2.14)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yaXQ8aWT2P1CQ0Xe6YCRD9HXsfMTvKkrIYkrc4aitCzhGTLS0sjtTqKmrxIWMVA+3DIbEuG9K/8aAMRJBhep8g==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^18.2.20
       '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
@@ -7373,7 +7372,6 @@ packages:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@typescript-eslint/parser@5.56.0(eslint@8.45.0)(typescript@5.1.6):
     resolution: {integrity: sha512-sn1OZmBxUsgxMmR8a8U5QM/Wl+tyqlH//jTqCg8daTAmhAk26L2PFhcqPLlYBhYUJMZJK276qLXlHN3a83o2cg==}
@@ -7507,7 +7505,6 @@ packages:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@typescript-eslint/utils@5.56.0(eslint@8.36.0)(typescript@5.3.3):
     resolution: {integrity: sha512-XhZDVdLnUJNtbzaJeDSCIYaM+Tgr59gZGbFuELgF7m0IY03PlciidS7UQNKLE0+WpUTn1GlycEr6Ivb/afjbhA==}
@@ -10744,7 +10741,7 @@ packages:
       eslint: 8.45.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.28.1)(eslint@8.45.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
+      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint@8.45.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.45.0)
       eslint-plugin-react: 7.33.2(eslint@8.45.0)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.45.0)
@@ -10769,7 +10766,7 @@ packages:
       eslint: 8.51.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.28.1)(eslint@8.51.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
+      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint@8.51.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.51.0)
       eslint-plugin-react: 7.33.2(eslint@8.51.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.51.0)
@@ -10809,7 +10806,7 @@ packages:
       enhanced-resolve: 5.14.1
       eslint: 8.45.0
       eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
+      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint@8.45.0)
       get-tsconfig: 4.5.0
       globby: 13.1.3
       is-core-module: 2.13.0
@@ -10833,7 +10830,7 @@ packages:
       enhanced-resolve: 5.14.1
       eslint: 8.51.0
       eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.51.0)
-      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
+      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint@8.51.0)
       get-tsconfig: 4.5.0
       globby: 13.1.3
       is-core-module: 2.13.0
@@ -10906,7 +10903,65 @@ packages:
       - supports-color
     dev: false
 
-  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0):
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint@8.45.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.56.0(eslint@8.36.0)(typescript@5.3.3)
+      debug: 3.2.7
+      eslint: 8.45.0
+      eslint-import-resolver-node: 0.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint@8.51.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.56.0(eslint@8.36.0)(typescript@5.3.3)
+      debug: 3.2.7
+      eslint: 8.51.0
+      eslint-import-resolver-node: 0.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.56.0)(eslint@8.45.0):
     resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -10916,7 +10971,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.56.0(eslint@8.45.0)(typescript@5.1.6)
+      '@typescript-eslint/parser': 5.56.0(eslint@8.36.0)(typescript@5.3.3)
       array-includes: 3.1.6
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.1
@@ -10925,7 +10980,42 @@ packages:
       doctrine: 2.1.0
       eslint: 8.45.0
       eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint@8.45.0)
+      has: 1.0.3
+      is-core-module: 2.13.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.6
+      object.groupby: 1.0.1
+      object.values: 1.1.6
+      semver: 6.3.1
+      tsconfig-paths: 3.14.2
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: false
+
+  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.56.0)(eslint@8.51.0):
+    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.56.0(eslint@8.36.0)(typescript@5.3.3)
+      array-includes: 3.1.6
+      array.prototype.findlastindex: 1.2.3
+      array.prototype.flat: 1.3.1
+      array.prototype.flatmap: 1.3.1
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.51.0
+      eslint-import-resolver-node: 0.3.7
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-node@0.3.7)(eslint@8.51.0)
       has: 1.0.3
       is-core-module: 2.13.0
       is-glob: 4.0.3
@@ -11102,7 +11192,6 @@ packages:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
-    dev: true
 
   /eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
@@ -11115,7 +11204,6 @@ packages:
   /eslint-visitor-keys@3.3.0:
     resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
 
   /eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
@@ -11168,7 +11256,6 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /eslint@8.45.0:
     resolution: {integrity: sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==}
@@ -11278,7 +11365,6 @@ packages:
       acorn: 8.10.0
       acorn-jsx: 5.3.2(acorn@8.10.0)
       eslint-visitor-keys: 3.4.3
-    dev: true
 
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -12388,7 +12474,6 @@ packages:
 
   /grapheme-splitter@1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
-    dev: true
 
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
@@ -14028,7 +14113,6 @@ packages:
 
   /js-sdsl@4.4.0:
     resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==}
-    dev: true
 
   /js-tokens@3.0.2:
     resolution: {integrity: sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==}
@@ -16193,7 +16277,6 @@ packages:
       prelude-ls: 1.2.1
       type-check: 0.4.0
       word-wrap: 1.2.3
-    dev: true
 
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
@@ -17201,7 +17284,7 @@ packages:
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': ^18.2.20
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -17217,7 +17300,7 @@ packages:
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': ^18.2.20
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -17257,7 +17340,7 @@ packages:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': ^18.2.20
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -19244,7 +19327,6 @@ packages:
     dependencies:
       tslib: 1.14.1
       typescript: 5.3.3
-    dev: true
 
   /tuf-js@1.1.2:
     resolution: {integrity: sha512-gBfbnS6khluxjvoFCpRV0fhWT265xNfpiNXOcBX0Ze6HGbPhe93UG5V5DdKcgm/aXsMadnY76l/h6j63GmJS5g==}
@@ -19595,7 +19677,7 @@ packages:
     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      '@types/react': ^18.2.20
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -19645,7 +19727,7 @@ packages:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      '@types/react': ^18.2.20
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -19998,7 +20080,6 @@ packages:
   /word-wrap@1.2.3:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
@@ -20317,7 +20398,3 @@ packages:
 
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false