@mhamz.01/easyflow-texteditor 0.1.36 → 0.1.38

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/tooltip/tooltip.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/tooltip/tooltip.css */
 .tiptap-tooltip {
   --tt-tooltip-bg: var(--tt-gray-light-900);
   --tt-tooltip-text: var(--white);
@@ -43,7 +43,7 @@
   color: var(--tt-kbd);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-colors.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-colors.css */
 .tiptap-button {
   --tt-button-default-bg-color: var(--tt-gray-light-a-100);
   --tt-button-hover-bg-color: var(--tt-gray-light-200);
@@ -279,7 +279,7 @@
   --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-group.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-group.css */
 .tiptap-button-group {
   position: relative;
   display: flex;
@@ -300,7 +300,7 @@
   align-items: center;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button.css */
 .tiptap-button {
   font-size: 0.875rem;
   font-weight: 500;
@@ -563,7 +563,7 @@
   color: var(--tt-button-disabled-icon-color);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/separator/separator.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/separator/separator.css */
 .tiptap-separator {
   --tt-link-border-color: var(--tt-gray-light-a-200);
 }
@@ -584,14 +584,14 @@
   width: 1px;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/toolbar/toolbar.css */
-:root {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/toolbar/toolbar.css */
+.easyflow-editor {
   --tt-toolbar-height: 2.75rem;
   --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --tt-toolbar-bg-color: var(--white);
   --tt-toolbar-border-color: var(--tt-gray-light-a-100);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-toolbar-bg-color: var(--black);
   --tt-toolbar-border-color: var(--black);
 }
@@ -692,8 +692,8 @@
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/image-upload-node/image-upload-node.css */
-:root {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/image-upload-node/image-upload-node.css */
+.easyflow-editor {
   --tiptap-image-upload-active: var(--tt-brand-color-500);
   --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
   --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
@@ -706,7 +706,7 @@
   --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
   --tiptap-image-upload-icon-color: var(--white);
 }
-.dark {
+.easyflow-editor .dark {
   --tiptap-image-upload-active: var(--tt-brand-color-400);
   --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
   --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
@@ -896,7 +896,7 @@
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/blockquote-node/blockquote-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/blockquote-node/blockquote-node.css */
 .tiptap.ProseMirror {
   --blockquote-bg-color: var(--tt-gray-light-900);
 }
@@ -926,7 +926,7 @@
   border-radius: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/code-block-node/code-block-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/code-block-node/code-block-node.css */
 .tiptap.ProseMirror {
   --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
   --tt-inline-code-text-color: var(--tt-gray-light-a-700);
@@ -971,7 +971,7 @@
   color: inherit;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css */
 .tiptap.ProseMirror {
   --horizontal-rule-color: var(--tt-gray-light-a-200);
 }
@@ -990,7 +990,7 @@
   padding-bottom: 0.75rem;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/list-node/list-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/list-node/list-node.css */
 .tiptap.ProseMirror {
   --tt-checklist-bg-color: var(--tt-gray-light-a-100);
   --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
@@ -1115,7 +1115,7 @@
   min-width: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/image-node/image-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/image-node/image-node.css */
 .tiptap.ProseMirror img {
   max-width: 100%;
   height: auto;
@@ -1140,7 +1140,7 @@
   margin: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-node/heading-node/heading-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-node/heading-node/heading-node.css */
 .tiptap.ProseMirror h1,
 .tiptap.ProseMirror h2,
 .tiptap.ProseMirror h3,
@@ -1180,7 +1180,7 @@
   margin-top: 2em;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-colors.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-colors.css */
 .tiptap-badge {
   --tt-badge-border-color: var(--tt-gray-light-a-200);
   --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
@@ -1378,7 +1378,7 @@
   --tt-badge-icon-color-emphasized: var( --tt-brand-color-900 );
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-group.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-group.css */
 .tiptap-badge-group {
   align-items: center;
   display: flex;
@@ -1392,7 +1392,7 @@
   flex-direction: row;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge.css */
 .tiptap-badge {
   font-size: 0.625rem;
   font-weight: 700;
@@ -1470,7 +1470,7 @@
   color: var(--tt-badge-icon-color-subdued);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css */
 .tiptap-dropdown-menu {
   --tt-dropdown-menu-bg-color: var(--white);
   --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
@@ -1517,13 +1517,13 @@
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/card/card.css */
-:root {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/card/card.css */
+.easyflow-editor {
   --tiptap-card-bg-color: var(--white);
   --tiptap-card-border-color: var(--tt-gray-light-a-100);
   --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
 }
-.dark {
+.easyflow-editor.dark {
   --tiptap-card-bg-color: var(--tt-gray-dark-50);
   --tiptap-card-border-color: var(--tt-gray-dark-a-100);
   --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
@@ -1586,7 +1586,7 @@
   color: var(--tiptap-card-group-label-color);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/popover/popover.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/popover/popover.css */
 .tiptap-popover {
   --tt-popover-bg-color: var(--white);
   --tt-popover-border-color: var(--tt-gray-light-a-100);
@@ -1633,7 +1633,7 @@
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css */
 .tiptap-button-highlight {
   position: relative;
   width: 1.25rem;
@@ -1667,11 +1667,11 @@
   filter: brightness(180%);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-ui-primitive/input/input.css */
-:root {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-ui-primitive/input/input.css */
+.easyflow-editor {
   --tiptap-input-placeholder: var(--tt-gray-light-a-400);
 }
-.dark {
+.easyflow-editor.dark {
   --tiptap-input-placeholder: var(--tt-gray-dark-a-400);
 }
 .tiptap-input {
@@ -1707,12 +1707,12 @@
   align-items: stretch;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/components/tiptap-templates/simple/simple-editor.css */
-body {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/components/tiptap-templates/simple/simple-editor.css */
+.easyflow-editor {
   --tt-toolbar-height: 44px;
   --tt-theme-text: var(--tt-gray-dark-900);
 }
-body {
+.easyflow-editor {
   font-family: "Inter", sans-serif;
   color: var(--tt-theme-text);
   font-optical-sizing: auto;
@@ -1721,36 +1721,32 @@ body {
   padding: 0;
   overscroll-behavior-y: none;
 }
-html,
-body {
+.easyflow-editor {
   overscroll-behavior-x: none;
   height: 100%;
 }
-html,
-body,
-#root,
-#app {
+.easyflow-editor {
   height: 100%;
   background-color: var(--tt-bg-color);
 }
-::-webkit-scrollbar {
+.easyflow-editor {
   width: 0.25rem;
 }
-* {
+.easyflow-editor * {
   scrollbar-width: thin;
   scrollbar-color: var(--tt-scrollbar-color) transparent;
 }
-::-webkit-scrollbar-thumb {
+.easyflow-editor ::-webkit-scrollbar-thumb {
   background-color: var(--tt-scrollbar-color);
   border-radius: 9999px;
 }
-::-webkit-scrollbar-track {
+.easyflow-editor ::-webkit-scrollbar-track {
   background: transparent;
 }
-.tiptap.ProseMirror {
+.easyflow-editor .tiptap.ProseMirror {
   font-family: "DM Sans", sans-serif;
 }
-.simple-editor-wrapper {
+.easyflow-editor .simple-editor-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
@@ -1761,7 +1757,7 @@ body,
   -webkit-overflow-scrolling: touch;
   position: relative;
 }
-.simple-editor-content {
+.easyflow-editor .simple-editor-content {
   max-width: 900px;
   width: 100%;
   margin: 0 auto;
@@ -1775,7 +1771,7 @@ body,
   box-sizing: border-box;
   padding: 1.25rem 1rem;
 }
-.simple-editor-content .tiptap.ProseMirror.simple-editor {
+.easyflow-editor .simple-editor-content .tiptap.ProseMirror.simple-editor {
   flex: 1;
   padding: 4rem 3rem 30vh;
   min-width: 0;
@@ -1785,20 +1781,20 @@ body,
   overflow-wrap: anywhere;
   outline: none;
 }
-.simple-editor-content .tiptap.ProseMirror.simple-editor.ProseMirror-focused {
+.easyflow-editor .simple-editor-content .tiptap.ProseMirror.simple-editor.ProseMirror-focused {
   border-color: transparent;
   outline: none;
   box-shadow: none;
 }
-table {
+.easyflow-editor .tiptap table {
   border-collapse: collapse;
   margin: 0;
   overflow: hidden;
   table-layout: fixed;
   width: 100%;
 }
-table td,
-table th {
+.easyflow-editor .tiptap table td,
+.easyflow-editor .tiptap table th {
   border: 1px solid #3A3A3A;
   box-sizing: border-box;
   min-width: 1em;
@@ -1807,17 +1803,17 @@ table th {
   vertical-align: top;
   color: #E6E6E6;
 }
-table td > *,
-table th > * {
+.easyflow-editor .tiptap table td > *,
+.easyflow-editor .tiptap table th > * {
   margin-bottom: 0;
 }
-table th {
+.easyflow-editor .tiptap table th {
   background-color: #1E1E1E;
   font-weight: bold;
   text-align: left;
   color: #FFFFFF;
 }
-table .selectedCell:after {
+.easyflow-editor .tiptap table .selectedCell:after {
   background: #2A2A2A;
   content: "";
   left: 0;
@@ -1828,7 +1824,7 @@ table .selectedCell:after {
   position: absolute;
   z-index: 2;
 }
-table .column-resize-handle {
+.easyflow-editor .tiptap table .column-resize-handle {
   background-color: #6A5ACD;
   bottom: -2px;
   pointer-events: none;
@@ -1846,12 +1842,12 @@ table .column-resize-handle {
   cursor: col-resize;
 }
 @media screen and (max-width: 480px) {
-  .simple-editor-content .tiptap.ProseMirror.simple-editor {
+  .easyflow-editor .simple-editor-content .tiptap.ProseMirror.simple-editor {
     padding: 4rem 1.5rem 50vh;
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/styles/index.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/styles/index.css */
 .tiptap.ProseMirror {
   --blockquote-bg-color: var(--tt-gray-light-900);
 }
@@ -2001,7 +1997,7 @@ table .column-resize-handle {
 .tiptap.ProseMirror .tiptap-thread img {
   margin: 0;
 }
-:root {
+.easyflow-editor {
   --tiptap-image-upload-active: var(--tt-brand-color-500);
   --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
   --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
@@ -2014,7 +2010,7 @@ table .column-resize-handle {
   --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
   --tiptap-image-upload-icon-color: var(--white);
 }
-.dark {
+.easyflow-editor .dark {
   --tiptap-image-upload-active: var(--tt-brand-color-400);
   --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
   --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
@@ -2499,11 +2495,11 @@ table .column-resize-handle {
   height: 0.188rem;
   cursor: grabbing;
 }
-body {
+.easyflow-editor {
   --tt-toolbar-height: 44px;
   --tt-theme-text: var(--tt-gray-dark-900);
 }
-body {
+.easyflow-editor {
   font-family: "Inter", sans-serif;
   color: var(--tt-theme-text);
   font-optical-sizing: auto;
@@ -2512,36 +2508,32 @@ body {
   padding: 0;
   overscroll-behavior-y: none;
 }
-html,
-body {
+.easyflow-editor {
   overscroll-behavior-x: none;
   height: 100%;
 }
-html,
-body,
-#root,
-#app {
+.easyflow-editor {
   height: 100%;
   background-color: var(--tt-bg-color);
 }
-::-webkit-scrollbar {
+.easyflow-editor {
   width: 0.25rem;
 }
-* {
+.easyflow-editor * {
   scrollbar-width: thin;
   scrollbar-color: var(--tt-scrollbar-color) transparent;
 }
-::-webkit-scrollbar-thumb {
+.easyflow-editor ::-webkit-scrollbar-thumb {
   background-color: var(--tt-scrollbar-color);
   border-radius: 9999px;
 }
-::-webkit-scrollbar-track {
+.easyflow-editor ::-webkit-scrollbar-track {
   background: transparent;
 }
-.tiptap.ProseMirror {
+.easyflow-editor .tiptap.ProseMirror {
   font-family: "DM Sans", sans-serif;
 }
-.simple-editor-wrapper {
+.easyflow-editor .simple-editor-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
@@ -2552,7 +2544,7 @@ body,
   -webkit-overflow-scrolling: touch;
   position: relative;
 }
-.simple-editor-content {
+.easyflow-editor .simple-editor-content {
   max-width: 900px;
   width: 100%;
   margin: 0 auto;
@@ -2566,7 +2558,7 @@ body,
   box-sizing: border-box;
   padding: 1.25rem 1rem;
 }
-.simple-editor-content .tiptap.ProseMirror.simple-editor {
+.easyflow-editor .simple-editor-content .tiptap.ProseMirror.simple-editor {
   flex: 1;
   padding: 4rem 3rem 30vh;
   min-width: 0;
@@ -2576,20 +2568,20 @@ body,
   overflow-wrap: anywhere;
   outline: none;
 }
-.simple-editor-content .tiptap.ProseMirror.simple-editor.ProseMirror-focused {
+.easyflow-editor .simple-editor-content .tiptap.ProseMirror.simple-editor.ProseMirror-focused {
   border-color: transparent;
   outline: none;
   box-shadow: none;
 }
-table {
+.easyflow-editor .tiptap table {
   border-collapse: collapse;
   margin: 0;
   overflow: hidden;
   table-layout: fixed;
   width: 100%;
 }
-table td,
-table th {
+.easyflow-editor .tiptap table td,
+.easyflow-editor .tiptap table th {
   border: 1px solid #3A3A3A;
   box-sizing: border-box;
   min-width: 1em;
@@ -2598,17 +2590,17 @@ table th {
   vertical-align: top;
   color: #E6E6E6;
 }
-table td > *,
-table th > * {
+.easyflow-editor .tiptap table td > *,
+.easyflow-editor .tiptap table th > * {
   margin-bottom: 0;
 }
-table th {
+.easyflow-editor .tiptap table th {
   background-color: #1E1E1E;
   font-weight: bold;
   text-align: left;
   color: #FFFFFF;
 }
-table .selectedCell:after {
+.easyflow-editor .tiptap table .selectedCell:after {
   background: #2A2A2A;
   content: "";
   left: 0;
@@ -2619,7 +2611,7 @@ table .selectedCell:after {
   position: absolute;
   z-index: 2;
 }
-table .column-resize-handle {
+.easyflow-editor .tiptap table .column-resize-handle {
   background-color: #6A5ACD;
   bottom: -2px;
   pointer-events: none;
@@ -2637,7 +2629,7 @@ table .column-resize-handle {
   cursor: col-resize;
 }
 @media screen and (max-width: 480px) {
-  .simple-editor-content .tiptap.ProseMirror.simple-editor {
+  .easyflow-editor .simple-editor-content .tiptap.ProseMirror.simple-editor {
     padding: 4rem 1.5rem 50vh;
   }
 }
@@ -3363,12 +3355,12 @@ table .column-resize-handle {
 .tiptap-button:disabled .tiptap-button-icon {
   color: var(--tt-button-disabled-icon-color);
 }
-:root {
+.easyflow-editor {
   --tiptap-card-bg-color: var(--white);
   --tiptap-card-border-color: var(--tt-gray-light-a-100);
   --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
 }
-.dark {
+.easyflow-editor.dark {
   --tiptap-card-bg-color: var(--tt-gray-dark-50);
   --tiptap-card-border-color: var(--tt-gray-dark-a-100);
   --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
@@ -3475,10 +3467,10 @@ table .column-resize-handle {
 .tiptap-dropdown-menu[data-side=left-end] {
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-:root {
+.easyflow-editor {
   --tiptap-input-placeholder: var(--tt-gray-light-a-400);
 }
-.dark {
+.easyflow-editor.dark {
   --tiptap-input-placeholder: var(--tt-gray-dark-a-400);
 }
 .tiptap-input {
@@ -3577,13 +3569,13 @@ table .column-resize-handle {
   height: 1.5rem;
   width: 1px;
 }
-:root {
+.easyflow-editor {
   --tt-toolbar-height: 2.75rem;
   --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --tt-toolbar-bg-color: var(--white);
   --tt-toolbar-border-color: var(--tt-gray-light-a-100);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-toolbar-bg-color: var(--black);
   --tt-toolbar-border-color: var(--black);
 }
@@ -3724,8 +3716,8 @@ table .column-resize-handle {
   color: var(--tt-kbd);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-24244-nQwsELvjangq/easyflow-texteditor/src/styles/_variables.css */
-:root {
+/* C:/Users/hamza/AppData/Local/Temp/tmp-5380-1KjRi1rJ1fXV/easyflow-texteditor/src/styles/_variables.css */
+easyflow-editor {
   overflow-wrap: break-word;
   text-size-adjust: none;
   text-rendering: optimizeLegibility;
@@ -3841,14 +3833,14 @@ table .column-resize-handle {
   --tt-destructive-contrast: 8%;
   --tt-foreground-contrast: 8%;
 }
-:root,
-:root *,
-:root ::before,
-:root ::after {
+easyflow-editor .easyflow-editor,
+easyflow-editor .easyflow-editor *,
+easyflow-editor .easyflow-editor *::before,
+easyflow-editor .easyflow-editor *::after {
   box-sizing: border-box;
   transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
 }
-:root {
+easyflow-editor {
   --tt-bg-color: var(--white);
   --tt-border-color: var(--tt-gray-light-a-200);
   --tt-border-color-tint: var(--tt-gray-light-a-100);
@@ -3859,7 +3851,7 @@ table .column-resize-handle {
   --tt-card-bg-color: var(--white);
   --tt-card-border-color: var(--tt-gray-light-a-100);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-bg-color: var(--black);
   --tt-border-color: var(--tt-gray-dark-a-200);
   --tt-border-color-tint: var(--tt-gray-dark-a-100);
@@ -3875,7 +3867,7 @@ table .column-resize-handle {
     0px 6px 8px 0px rgba(0, 0, 0, 0.22),
     0px 2px 3px 0px rgba(0, 0, 0, 0.12);
 }
-:root {
+easyflow-editor {
   --tt-color-text-gray: hsl(45, 2%, 46%);
   --tt-color-text-brown: hsl(19, 31%, 47%);
   --tt-color-text-orange: hsl(30, 89%, 45%);
@@ -3895,7 +3887,7 @@ table .column-resize-handle {
   --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
   --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-text-gray: hsl(0, 0%, 61%);
   --tt-color-text-brown: hsl(18, 35%, 58%);
   --tt-color-text-orange: hsl(25, 53%, 53%);
@@ -3915,7 +3907,7 @@ table .column-resize-handle {
   --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
   --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
 }
-:root {
+easyflow-editor {
   --tt-color-highlight-yellow: #fef9c3;
   --tt-color-highlight-green: #dcfce7;
   --tt-color-highlight-blue: #e0f2fe;
@@ -3935,7 +3927,7 @@ table .column-resize-handle {
   --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
   --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-highlight-yellow: #6b6524;
   --tt-color-highlight-green: #509568;
   --tt-color-highlight-blue: #6e92aa;
@@ -4723,10 +4715,10 @@ table .column-resize-handle {
     }
   }
   .border-input {
-    border-color: var(--input);
+    border-color: var(--ef-input);
   }
   .border-sidebar-border {
-    border-color: var(--sidebar-border);
+    border-color: var(--ef-sidebar-border);
   }
   .border-t-transparent {
     border-top-color: transparent;
@@ -4735,10 +4727,10 @@ table .column-resize-handle {
     border-left-color: transparent;
   }
   .bg-accent {
-    background-color: var(--accent);
+    background-color: var(--ef-accent);
   }
   .bg-background {
-    background-color: var(--background);
+    background-color: var(--ef-background);
   }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
@@ -4747,28 +4739,28 @@ table .column-resize-handle {
     }
   }
   .bg-border {
-    background-color: var(--border);
+    background-color: var(--ef-border);
   }
   .bg-destructive {
-    background-color: var(--destructive);
+    background-color: var(--ef-destructive);
   }
   .bg-foreground {
-    background-color: var(--foreground);
+    background-color: var(--ef-foreground);
   }
   .bg-popover {
-    background-color: var(--popover);
+    background-color: var(--ef-popover);
   }
   .bg-primary {
-    background-color: var(--primary);
+    background-color: var(--ef-primary);
   }
   .bg-secondary {
-    background-color: var(--secondary);
+    background-color: var(--ef-secondary);
   }
   .bg-sidebar {
-    background-color: var(--sidebar);
+    background-color: var(--ef-sidebar);
   }
   .bg-sidebar-border {
-    background-color: var(--sidebar-border);
+    background-color: var(--ef-sidebar-border);
   }
   .bg-transparent {
     background-color: transparent;
@@ -4777,7 +4769,7 @@ table .column-resize-handle {
     fill: currentcolor;
   }
   .fill-foreground {
-    fill: var(--foreground);
+    fill: var(--ef-foreground);
   }
   .p-0 {
     padding: calc(var(--spacing) * 0);
@@ -4896,36 +4888,36 @@ table .column-resize-handle {
     color: #a3a3a8;
   }
   .text-background {
-    color: var(--background);
+    color: var(--ef-background);
   }
   .text-foreground {
-    color: var(--foreground);
+    color: var(--ef-foreground);
   }
   .text-muted-foreground {
-    color: var(--muted-foreground);
+    color: var(--ef-muted-foreground);
   }
   .text-popover-foreground {
-    color: var(--popover-foreground);
+    color: var(--ef-popover-foreground);
   }
   .text-primary {
-    color: var(--primary);
+    color: var(--ef-primary);
   }
   .text-primary-foreground {
-    color: var(--primary-foreground);
+    color: var(--ef-primary-foreground);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
   .text-secondary-foreground {
-    color: var(--secondary-foreground);
+    color: var(--ef-secondary-foreground);
   }
   .text-sidebar-foreground {
-    color: var(--sidebar-foreground);
+    color: var(--ef-sidebar-foreground);
   }
   .text-sidebar-foreground\/70 {
-    color: var(--sidebar-foreground);
+    color: var(--ef-sidebar-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+      color: color-mix(in oklab, var(--ef-sidebar-foreground) 70%, transparent);
     }
   }
   .text-white {
@@ -5008,10 +5000,10 @@ table .column-resize-handle {
       var(--tw-shadow);
   }
   .ring-sidebar-ring {
-    --tw-ring-color: var(--sidebar-ring);
+    --tw-ring-color: var(--ef-sidebar-ring);
   }
   .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
+    --tw-ring-offset-color: var(--ef-background);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -5313,7 +5305,7 @@ table .column-resize-handle {
   }
   .group-data-\[variant\=floating\]\:border-sidebar-border {
     &:is(:where(.group)[data-variant=floating] *) {
-      border-color: var(--sidebar-border);
+      border-color: var(--ef-sidebar-border);
     }
   }
   .group-data-\[variant\=floating\]\:shadow-sm {
@@ -5330,7 +5322,7 @@ table .column-resize-handle {
   .peer-hover\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button):hover ~ *) {
       @media (hover: hover) {
-        color: var(--sidebar-accent-foreground);
+        color: var(--ef-sidebar-accent-foreground);
       }
     }
   }
@@ -5346,7 +5338,7 @@ table .column-resize-handle {
   }
   .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button)[data-active=true] ~ *) {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
@@ -5366,18 +5358,18 @@ table .column-resize-handle {
   }
   .selection\:bg-primary {
     & *::selection {
-      background-color: var(--primary);
+      background-color: var(--ef-primary);
     }
     &::selection {
-      background-color: var(--primary);
+      background-color: var(--ef-primary);
     }
   }
   .selection\:text-primary-foreground {
     & *::selection {
-      color: var(--primary-foreground);
+      color: var(--ef-primary-foreground);
     }
     &::selection {
-      color: var(--primary-foreground);
+      color: var(--ef-primary-foreground);
     }
   }
   .file\:inline-flex {
@@ -5415,12 +5407,12 @@ table .column-resize-handle {
   }
   .file\:text-foreground {
     &::file-selector-button {
-      color: var(--foreground);
+      color: var(--ef-foreground);
     }
   }
   .placeholder\:text-muted-foreground {
     &::placeholder {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .after\:absolute {
@@ -5491,16 +5483,16 @@ table .column-resize-handle {
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
       }
     }
   }
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--ef-accent) 50%, transparent);
         }
       }
     }
@@ -5508,9 +5500,9 @@ table .column-resize-handle {
   .hover\:bg-accent\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 80%, transparent);
+          background-color: color-mix(in oklab, var(--ef-accent) 80%, transparent);
         }
       }
     }
@@ -5518,9 +5510,9 @@ table .column-resize-handle {
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+          background-color: color-mix(in oklab, var(--ef-destructive) 90%, transparent);
         }
       }
     }
@@ -5528,9 +5520,9 @@ table .column-resize-handle {
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--primary);
+        background-color: var(--ef-primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+          background-color: color-mix(in oklab, var(--ef-primary) 90%, transparent);
         }
       }
     }
@@ -5538,9 +5530,9 @@ table .column-resize-handle {
   .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--secondary);
+        background-color: var(--ef-secondary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+          background-color: color-mix(in oklab, var(--ef-secondary) 80%, transparent);
         }
       }
     }
@@ -5548,7 +5540,7 @@ table .column-resize-handle {
   .hover\:bg-sidebar-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--sidebar-accent);
+        background-color: var(--ef-sidebar-accent);
       }
     }
   }
@@ -5562,14 +5554,14 @@ table .column-resize-handle {
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--accent-foreground);
+        color: var(--ef-accent-foreground);
       }
     }
   }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--sidebar-accent-foreground);
+        color: var(--ef-sidebar-accent-foreground);
       }
     }
   }
@@ -5611,7 +5603,7 @@ table .column-resize-handle {
     &:hover {
       @media (hover: hover) {
         &:is(:where(.group)[data-collapsible=offcanvas] *) {
-          background-color: var(--sidebar);
+          background-color: var(--ef-sidebar);
         }
       }
     }
@@ -5621,19 +5613,19 @@ table .column-resize-handle {
       @media (hover: hover) {
         &::after {
           content: var(--tw-content);
-          background-color: var(--sidebar-border);
+          background-color: var(--ef-sidebar-border);
         }
       }
     }
   }
   .focus\:bg-accent {
     &:focus {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .focus\:text-accent-foreground {
     &:focus {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .focus\:text-red-600 {
@@ -5654,7 +5646,7 @@ table .column-resize-handle {
   }
   .focus\:ring-ring {
     &:focus {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--ef-ring);
     }
   }
   .focus\:ring-offset-2 {
@@ -5675,7 +5667,7 @@ table .column-resize-handle {
   }
   .focus-visible\:border-ring {
     &:focus-visible {
-      border-color: var(--ring);
+      border-color: var(--ef-ring);
     }
   }
   .focus-visible\:ring-2 {
@@ -5702,17 +5694,17 @@ table .column-resize-handle {
   }
   .focus-visible\:ring-destructive\/20 {
     &:focus-visible {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
       }
     }
   }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--ef-ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-ring) 50%, transparent);
       }
     }
   }
@@ -5724,12 +5716,12 @@ table .column-resize-handle {
   }
   .active\:bg-sidebar-accent {
     &:active {
-      background-color: var(--sidebar-accent);
+      background-color: var(--ef-sidebar-accent);
     }
   }
   .active\:text-sidebar-accent-foreground {
     &:active {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .disabled\:pointer-events-none {
@@ -5759,7 +5751,7 @@ table .column-resize-handle {
   }
   .has-data-\[variant\=inset\]\:bg-sidebar {
     &:has(*[data-variant=inset]) {
-      background-color: var(--sidebar);
+      background-color: var(--ef-sidebar);
     }
   }
   .has-\[\>svg\]\:px-2\.5 {
@@ -5789,20 +5781,20 @@ table .column-resize-handle {
   }
   .aria-invalid\:border-destructive {
     &[aria-invalid=true] {
-      border-color: var(--destructive);
+      border-color: var(--ef-destructive);
     }
   }
   .aria-invalid\:ring-destructive\/20 {
     &[aria-invalid=true] {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
       }
     }
   }
   .data-\[active\=true\]\:bg-sidebar-accent {
     &[data-active=true] {
-      background-color: var(--sidebar-accent);
+      background-color: var(--ef-sidebar-accent);
     }
   }
   .data-\[active\=true\]\:font-medium {
@@ -5813,7 +5805,7 @@ table .column-resize-handle {
   }
   .data-\[active\=true\]\:text-sidebar-accent-foreground {
     &[data-active=true] {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .data-\[disabled\]\:pointer-events-none {
@@ -5863,12 +5855,12 @@ table .column-resize-handle {
   }
   .data-\[selected\=true\]\:bg-accent {
     &[data-selected=true] {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .data-\[selected\=true\]\:text-accent-foreground {
     &[data-selected=true] {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
@@ -5948,22 +5940,22 @@ table .column-resize-handle {
   }
   .data-\[state\=open\]\:bg-accent {
     &[data-state=open] {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .data-\[state\=open\]\:bg-secondary {
     &[data-state=open] {
-      background-color: var(--secondary);
+      background-color: var(--ef-secondary);
     }
   }
   .data-\[state\=open\]\:text-accent-foreground {
     &[data-state=open] {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .data-\[state\=open\]\:text-muted-foreground {
     &[data-state=open] {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .data-\[state\=open\]\:opacity-100 {
@@ -6013,7 +6005,7 @@ table .column-resize-handle {
     &[data-state=open] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--sidebar-accent);
+          background-color: var(--ef-sidebar-accent);
         }
       }
     }
@@ -6022,22 +6014,22 @@ table .column-resize-handle {
     &[data-state=open] {
       &:hover {
         @media (hover: hover) {
-          color: var(--sidebar-accent-foreground);
+          color: var(--ef-sidebar-accent-foreground);
         }
       }
     }
   }
   .data-\[variant\=destructive\]\:text-destructive {
     &[data-variant=destructive] {
-      color: var(--destructive);
+      color: var(--ef-destructive);
     }
   }
   .data-\[variant\=destructive\]\:focus\:bg-destructive\/10 {
     &[data-variant=destructive] {
       &:focus {
-        background-color: var(--destructive);
+        background-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+          background-color: color-mix(in oklab, var(--ef-destructive) 10%, transparent);
         }
       }
     }
@@ -6045,7 +6037,7 @@ table .column-resize-handle {
   .data-\[variant\=destructive\]\:focus\:text-destructive {
     &[data-variant=destructive] {
       &:focus {
-        color: var(--destructive);
+        color: var(--ef-destructive);
       }
     }
   }
@@ -6158,22 +6150,22 @@ table .column-resize-handle {
   }
   .dark\:border-input {
     @media (prefers-color-scheme: dark) {
-      border-color: var(--input);
+      border-color: var(--ef-input);
     }
   }
   .dark\:bg-destructive\/60 {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--destructive);
+      background-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--ef-destructive) 60%, transparent);
       }
     }
   }
   .dark\:bg-input\/30 {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--input);
+      background-color: var(--ef-input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--ef-input) 30%, transparent);
       }
     }
   }
@@ -6186,9 +6178,9 @@ table .column-resize-handle {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--accent);
+          background-color: var(--ef-accent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+            background-color: color-mix(in oklab, var(--ef-accent) 50%, transparent);
           }
         }
       }
@@ -6198,9 +6190,9 @@ table .column-resize-handle {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--input);
+          background-color: var(--ef-input);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--input) 50%, transparent);
+            background-color: color-mix(in oklab, var(--ef-input) 50%, transparent);
           }
         }
       }
@@ -6209,9 +6201,9 @@ table .column-resize-handle {
   .dark\:focus-visible\:ring-destructive\/40 {
     @media (prefers-color-scheme: dark) {
       &:focus-visible {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 40%, transparent);
         }
       }
     }
@@ -6219,9 +6211,9 @@ table .column-resize-handle {
   .dark\:aria-invalid\:ring-destructive\/40 {
     @media (prefers-color-scheme: dark) {
       &[aria-invalid=true] {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 40%, transparent);
         }
       }
     }
@@ -6230,9 +6222,9 @@ table .column-resize-handle {
     @media (prefers-color-scheme: dark) {
       &[data-variant=destructive] {
         &:focus {
-          background-color: var(--destructive);
+          background-color: var(--ef-destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+            background-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
           }
         }
       }
@@ -6262,7 +6254,7 @@ table .column-resize-handle {
   }
   .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
     & [cmdk-group-heading] {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .\[\&_\[cmdk-group\]\]\:px-2 {
@@ -6328,14 +6320,14 @@ table .column-resize-handle {
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
     & svg:not([class*=text-]) {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
     &[data-variant=destructive] {
       :is(& > *) {
         &:is(svg) {
-          color: var(--destructive) !important;
+          color: var(--ef-destructive) !important;
         }
       }
     }
@@ -6365,7 +6357,7 @@ table .column-resize-handle {
   }
   .\[\&\>svg\]\:text-sidebar-accent-foreground {
     & > svg {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
@@ -6406,7 +6398,7 @@ table .column-resize-handle {
 @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; }
 @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
-:root {
+easyflow-editor {
   overflow-wrap: break-word;
   text-size-adjust: none;
   text-rendering: optimizeLegibility;
@@ -6521,15 +6513,15 @@ table .column-resize-handle {
   --tt-accent-contrast: 8%;
   --tt-destructive-contrast: 8%;
   --tt-foreground-contrast: 8%;
-  &,
-  *,
-  ::before,
-  ::after {
+  .easyflow-editor,
+  .easyflow-editor *,
+  .easyflow-editor *::before,
+  .easyflow-editor *::after {
     box-sizing: border-box;
     transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
   }
 }
-:root {
+easyflow-editor {
   --tt-bg-color: var(--white);
   --tt-border-color: var(--tt-gray-light-a-200);
   --tt-border-color-tint: var(--tt-gray-light-a-100);
@@ -6540,7 +6532,7 @@ table .column-resize-handle {
   --tt-card-bg-color: var(--white);
   --tt-card-border-color: var(--tt-gray-light-a-100);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-bg-color: var(--black);
   --tt-border-color: var(--tt-gray-dark-a-200);
   --tt-border-color-tint: var(--tt-gray-dark-a-100);
@@ -6556,7 +6548,7 @@ table .column-resize-handle {
     0px 6px 8px 0px rgba(0, 0, 0, 0.22),
     0px 2px 3px 0px rgba(0, 0, 0, 0.12);
 }
-:root {
+easyflow-editor {
   --tt-color-text-gray: hsl(45, 2%, 46%);
   --tt-color-text-brown: hsl(19, 31%, 47%);
   --tt-color-text-orange: hsl(30, 89%, 45%);
@@ -6576,7 +6568,7 @@ table .column-resize-handle {
   --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
   --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-text-gray: hsl(0, 0%, 61%);
   --tt-color-text-brown: hsl(18, 35%, 58%);
   --tt-color-text-orange: hsl(25, 53%, 53%);
@@ -6596,7 +6588,7 @@ table .column-resize-handle {
   --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
   --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
 }
-:root {
+easyflow-editor {
   --tt-color-highlight-yellow: #fef9c3;
   --tt-color-highlight-green: #dcfce7;
   --tt-color-highlight-blue: #e0f2fe;
@@ -6616,7 +6608,7 @@ table .column-resize-handle {
   --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
   --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
 }
-.dark {
+.easyflow-editor.dark {
   --tt-color-highlight-yellow: #6b6524;
   --tt-color-highlight-green: #509568;
   --tt-color-highlight-blue: #6e92aa;
@@ -6718,42 +6710,31 @@ table .column-resize-handle {
     transform: rotate(360deg);
   }
 }
-* {
-  border-color: #1e1e1e;
+.easyflow-editor {
+  * {
+    border-color: #1e1e1e;
+  }
 }
-:root {
+.easyflow-editor {
   --radius: 0.625rem;
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --ef-background: oklch(0.145 0 0);
+  --ef-foreground: oklch(0.985 0 0);
+  --ef-card: oklch(0.205 0 0);
+  --ef-card-foreground: oklch(0.985 0 0);
+  --ef-popover: oklch(0.205 0 0);
+  --ef-popover-foreground: oklch(0.985 0 0);
+  --ef-primary: oklch(0.922 0 0);
+  --ef-primary-foreground: oklch(0.205 0 0);
+  --ef-secondary: oklch(0.269 0 0);
+  --ef-secondary-foreground: oklch(0.985 0 0);
+  --ef-muted: oklch(0.269 0 0);
+  --ef-muted-foreground: oklch(0.708 0 0);
+  --ef-border: oklch(1 0 0 / 10%);
+  --ef-input: oklch(1 0 0 / 15%);
+  --ef-ring: oklch(0.556 0 0);
+  --ef-sidebar: oklch(0.205 0 0);
+  --ef-sidebar-foreground: oklch(0.985 0 0);
+  --ef-sidebar-border: oklch(1 0 0 / 10%);
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }