@collabchron/notiq 1.1.3 → 1.1.4

package/src/styles/notiq.css

@@ -6,7 +6,11 @@
 
 @custom-variant dark (&:is(.dark *));
 
-.notiq-editor {
+@layer notiq {
+/* =========================
+   Theme Tokens (SCOPED)
+   ========================= */
+.notiq-root {
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -50,8 +54,7 @@
   --background-red: #fbe4e4;
 }
 
-.dark .notiq-editor,
-.notiq-editor.dark {
+.dark .notiq-root {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.145 0 0);
@@ -93,71 +96,97 @@
   --background-red: #594141;
 }
 
+/* =========================
+   Tailwind Token Bridge
+   ========================= */
+.notiq-root {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
 @theme inline {
-  --color-notiq-background: var(--color-background, var(--background));
-  --color-notiq-foreground: var(--color-foreground, var(--foreground));
-  --color-notiq-card: var(--color-card, var(--card));
-  --color-notiq-card-foreground: var(--color-card-foreground, var(--card-foreground));
-  --color-notiq-popover: var(--color-popover, var(--popover));
-  --color-notiq-popover-foreground: var(--color-popover-foreground, var(--popover-foreground));
-  --color-notiq-primary: var(--color-primary, var(--primary));
-  --color-notiq-primary-foreground: var(--color-primary-foreground, var(--primary-foreground));
-  --color-notiq-secondary: var(--color-secondary, var(--secondary));
-  --color-notiq-secondary-foreground: var(--color-secondary-foreground, var(--secondary-foreground));
-  --color-notiq-muted: var(--color-muted, var(--muted));
-  --color-notiq-muted-foreground: var(--color-muted-foreground, var(--muted-foreground));
-  --color-notiq-accent: var(--color-accent, var(--accent));
-  --color-notiq-accent-foreground: var(--color-accent-foreground, var(--accent-foreground));
-  --color-notiq-destructive: var(--color-destructive, var(--destructive));
-  --color-notiq-destructive-foreground: var(--color-destructive-foreground, var(--destructive-foreground));
-  --color-notiq-border: var(--color-border, var(--border));
-  --color-notiq-input: var(--color-input, var(--input));
-  --color-notiq-ring: var(--color-ring, var(--ring));
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 }
 
-@layer base {
-  * {
-    @apply border-notiq-border outline-notiq-ring/50;
-  }
+/* =========================
+   Scoped Reset ONLY
+   ========================= */
+.notiq-root * {
+  @apply border-border outline-ring/50;
 }
 
-/* Editor custom styles */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+/* =========================
+   Editor Custom Styles
+   ========================= */
+.notiq-root input[type="number"]::-webkit-inner-spin-button,
+.notiq-root input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-#toolbar {
+.notiq-root #toolbar {
   scrollbar-width: none;
 }
 
-#toolbar::-webkit-scrollbar {
+.notiq-root #toolbar::-webkit-scrollbar {
   display: none;
 }
 
-.code {
+.notiq-root .code {
   scrollbar-width: none;
 }
 
-.code::-webkit-scrollbar {
+.notiq-root .code::-webkit-scrollbar {
   display: none;
 }
-/* File: C:\Users\HP\notiq\src\components\editor\nodes\InlineImageNode\InlineImageNode.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.InlineImageNode__contentEditable {
+
+/* =========================
+   Component Styles
+   ========================= */
+.notiq-root .InlineImageNode__contentEditable {
   min-height: 20px;
   border: 0px;
   resize: none;
@@ -176,7 +205,7 @@ input[type="number"]::-webkit-outer-spin-button {
   word-break: break-word;
 }
 
-.InlineImageNode__placeholder {
+.notiq-root .InlineImageNode__placeholder {
   font-size: 12px;
   color: #888;
   overflow: hidden;
@@ -190,14 +219,14 @@ input[type="number"]::-webkit-outer-spin-button {
   pointer-events: none;
 }
 
-.InlineImageNode_Checkbox:checked,
-.InlineImageNode_Checkbox:not(:checked) {
+.notiq-root .InlineImageNode_Checkbox:checked,
+.notiq-root .InlineImageNode_Checkbox:not(:checked) {
   position: absolute;
   left: -9999px;
 }
 
-.InlineImageNode_Checkbox:checked + label,
-.InlineImageNode_Checkbox:not(:checked) + label {
+.notiq-root .InlineImageNode_Checkbox:checked + label,
+.notiq-root .InlineImageNode_Checkbox:not(:checked) + label {
   position: absolute;
   padding-right: 55px;
   cursor: pointer;
@@ -206,8 +235,8 @@ input[type="number"]::-webkit-outer-spin-button {
   color: #666;
 }
 
-.InlineImageNode_Checkbox:checked + label:before,
-.InlineImageNode_Checkbox:not(:checked) + label:before {
+.notiq-root .InlineImageNode_Checkbox:checked + label:before,
+.notiq-root .InlineImageNode_Checkbox:not(:checked) + label:before {
   content: '';
   position: absolute;
   right: 0;
@@ -218,8 +247,8 @@ input[type="number"]::-webkit-outer-spin-button {
   background: #fff;
 }
 
-.InlineImageNode_Checkbox:checked + label:after,
-.InlineImageNode_Checkbox:not(:checked) + label:after {
+.notiq-root .InlineImageNode_Checkbox:checked + label:after,
+.notiq-root .InlineImageNode_Checkbox:not(:checked) + label:after {
   content: '';
   width: 8px;
   height: 8px;
@@ -231,47 +260,37 @@ input[type="number"]::-webkit-outer-spin-button {
   transition: all 0.2s ease;
 }
 
-.InlineImageNode_Checkbox:not(:checked) + label:after {
+.notiq-root .InlineImageNode_Checkbox:not(:checked) + label:after {
   opacity: 0;
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 
-.InlineImageNode_Checkbox:checked + label:after {
+.notiq-root .InlineImageNode_Checkbox:checked + label:after {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\editor\plugins\CollapsiblePlugin\Collapsible.css */
-.Collapsible__container {
+.notiq-root .Collapsible__container {
   margin-bottom: 8px;
-  
 }
 
-.Collapsible__title {
+.notiq-root .Collapsible__title {
   cursor: pointer;
   padding: 5px 5px 5px 20px;
   position: relative;
   font-weight: bold;
   list-style: none;
   outline: none;
-  
 }
 
-
-.Collapsible__title::marker,
-.Collapsible__title::-webkit-details-marker {
+.notiq-root .Collapsible__title::marker,
+.notiq-root .Collapsible__title::-webkit-details-marker {
   display: none;
-  
 }
 
-
-
-
-
-.dark .Collapsible__title:before {
+.dark .notiq-root .Collapsible__title:before {
   border-style: solid;
   border-color: transparent;
   border-width: 5px;
@@ -283,7 +302,8 @@ input[type="number"]::-webkit-outer-spin-button {
   top: 50%;
   transform: translateY(-50%);
 }
-.Collapsible__title:before {
+
+.notiq-root .Collapsible__title:before {
   border-style: solid;
   border-color: transparent;
   border-width: 5px;
@@ -296,35 +316,28 @@ input[type="number"]::-webkit-outer-spin-button {
   transform: translateY(-50%);
 }
 
-.dark .Collapsible__container[open] > .Collapsible__title:before {
+.dark .notiq-root .Collapsible__container[open] > .Collapsible__title:before {
   border-color: transparent;
   border-width: 6px 4px 0 4px;
   border-top-color: white;
-
-  
 }
 
-.Collapsible__container[open] > .Collapsible__title:before {
+.notiq-root .Collapsible__container[open] > .Collapsible__title:before {
   border-color: transparent;
   border-width: 6px 4px 0 4px;
   border-top-color: #000;
-
-
-
 }
 
-.Collapsible__content {
+.notiq-root .Collapsible__content {
   padding: 0 5px 5px 20px;
 }
 
-.Collapsible__collapsed .Collapsible__content {
+.notiq-root .Collapsible__collapsed .Collapsible__content {
   display: none;
   user-select: none;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\editor\themes\theme.css */
-.PlaygroundEditorTheme__table {
+.notiq-root .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
   overflow-x: auto;
@@ -335,13 +348,15 @@ input[type="number"]::-webkit-outer-spin-button {
   margin: 0px 25px 30px 0px;
 }
 
-.PlaygroundEditorTheme__tableSelection *::selection {
+.notiq-root .PlaygroundEditorTheme__tableSelection *::selection {
   background-color: transparent;
 }
-.PlaygroundEditorTheme__tableSelected {
+
+.notiq-root .PlaygroundEditorTheme__tableSelected {
   outline: 2px solid rgb(60, 132, 244);
 }
-.PlaygroundEditorTheme__tableCell {
+
+.notiq-root .PlaygroundEditorTheme__tableCell {
   border: 1px solid #979797;
   width: 75px;
   min-width: 75px;
@@ -351,18 +366,19 @@ input[type="number"]::-webkit-outer-spin-button {
   position: relative;
   outline: none;
 }
-.PlaygroundEditorTheme__tableCellSortedIndicator {
+
+.notiq-root .PlaygroundEditorTheme__tableCellSortedIndicator {
   display: block;
   opacity: 0.5;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
-
   height: 4px;
   background-color: #999;
 }
-.PlaygroundEditorTheme__tableCellResizer {
+
+.notiq-root .PlaygroundEditorTheme__tableCellResizer {
   position: absolute;
   right: -4px;
   height: 100%;
@@ -371,13 +387,16 @@ input[type="number"]::-webkit-outer-spin-button {
   z-index: 10;
   top: 0;
 }
-.PlaygroundEditorTheme__tableCellHeader {
+
+.notiq-root .PlaygroundEditorTheme__tableCellHeader {
   text-align: start;
 }
-.PlaygroundEditorTheme__tableCellSelected {
+
+.notiq-root .PlaygroundEditorTheme__tableCellSelected {
   background-color: #c9dbf0;
 }
-.PlaygroundEditorTheme__tableCellPrimarySelected {
+
+.notiq-root .PlaygroundEditorTheme__tableCellPrimarySelected {
   border: 2px solid rgb(60, 132, 244);
   display: block;
   height: calc(100% - 2px);
@@ -387,11 +406,13 @@ input[type="number"]::-webkit-outer-spin-button {
   top: -1px;
   z-index: 2;
 }
-.PlaygroundEditorTheme__tableCellEditing {
+
+.notiq-root .PlaygroundEditorTheme__tableCellEditing {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
   border-radius: 3px;
 }
-.PlaygroundEditorTheme__tableAddColumns {
+
+.notiq-root .PlaygroundEditorTheme__tableAddColumns {
   position: absolute;
   background-color: #eee;
   height: 100%;
@@ -399,7 +420,8 @@ input[type="number"]::-webkit-outer-spin-button {
   border: 0;
   cursor: pointer;
 }
-.PlaygroundEditorTheme__tableAddColumns:after {
+
+.notiq-root .PlaygroundEditorTheme__tableAddColumns:after {
   background-image: url(/public/images/icons/plus.svg);
   background-size: contain;
   background-position: center;
@@ -413,11 +435,13 @@ input[type="number"]::-webkit-outer-spin-button {
   height: 100%;
   opacity: 0.4;
 }
-.PlaygroundEditorTheme__tableAddColumns:hover,
-.PlaygroundEditorTheme__tableAddRows:hover {
+
+.notiq-root .PlaygroundEditorTheme__tableAddColumns:hover,
+.notiq-root .PlaygroundEditorTheme__tableAddRows:hover {
   background-color: #c9dbf0;
 }
-.PlaygroundEditorTheme__tableAddRows {
+
+.notiq-root .PlaygroundEditorTheme__tableAddRows {
   position: absolute;
   width: calc(100% - 25px);
   background-color: #eee;
@@ -425,7 +449,8 @@ input[type="number"]::-webkit-outer-spin-button {
   border: 0;
   cursor: pointer;
 }
-.PlaygroundEditorTheme__tableAddRows:after {
+
+.notiq-root .PlaygroundEditorTheme__tableAddRows:after {
   background-image: url(/public/images/icons/plus.svg);
   background-size: contain;
   background-position: center;
@@ -439,6 +464,7 @@ input[type="number"]::-webkit-outer-spin-button {
   height: 100%;
   opacity: 0.4;
 }
+
 @keyframes table-controls {
   0% {
     opacity: 0;
@@ -447,7 +473,8 @@ input[type="number"]::-webkit-outer-spin-button {
     opacity: 1;
   }
 }
-.PlaygroundEditorTheme__tableCellResizeRuler {
+
+.notiq-root .PlaygroundEditorTheme__tableCellResizeRuler {
   display: block;
   position: absolute;
   width: 1px;
@@ -455,7 +482,8 @@ input[type="number"]::-webkit-outer-spin-button {
   height: 100%;
   top: 0;
 }
-.PlaygroundEditorTheme__tableCellActionButtonContainer {
+
+.notiq-root .PlaygroundEditorTheme__tableCellActionButtonContainer {
   display: block;
   right: 5px;
   top: 6px;
@@ -464,7 +492,8 @@ input[type="number"]::-webkit-outer-spin-button {
   width: 20px;
   height: 20px;
 }
-.PlaygroundEditorTheme__tableCellActionButton {
+
+.notiq-root .PlaygroundEditorTheme__tableCellActionButton {
   background-color: #eee;
   display: block;
   border: 0;
@@ -474,51 +503,59 @@ input[type="number"]::-webkit-outer-spin-button {
   color: #222;
   cursor: pointer;
 }
-.PlaygroundEditorTheme__tableCellActionButton:hover {
+
+.notiq-root .PlaygroundEditorTheme__tableCellActionButton:hover {
   background-color: #ddd;
 }
 
-.PlaygroundEditorTheme__tokenComment {
+.notiq-root .PlaygroundEditorTheme__tokenComment {
   color: slategray;
 }
-.PlaygroundEditorTheme__tokenPunctuation {
+
+.notiq-root .PlaygroundEditorTheme__tokenPunctuation {
   color: #999;
 }
-.PlaygroundEditorTheme__tokenProperty {
+
+.notiq-root .PlaygroundEditorTheme__tokenProperty {
   color: rgba(226, 113, 175, 0.5);
 }
-.PlaygroundEditorTheme__tokenSelector {
+
+.notiq-root .PlaygroundEditorTheme__tokenSelector {
   color: #690;
 }
-.PlaygroundEditorTheme__tokenOperator {
+
+.notiq-root .PlaygroundEditorTheme__tokenOperator {
   color: #9a6e3a;
 }
-.PlaygroundEditorTheme__tokenAttr {
+
+.notiq-root .PlaygroundEditorTheme__tokenAttr {
   color: #07a;
 }
-.PlaygroundEditorTheme__tokenVariable {
+
+.notiq-root .PlaygroundEditorTheme__tokenVariable {
   color: #e90;
 }
-.PlaygroundEditorTheme__tokenFunction {
+
+.notiq-root .PlaygroundEditorTheme__tokenFunction {
   color: #e398a7;
 }
 
-.PlaygroundEditorTheme__embedBlock {
+.notiq-root .PlaygroundEditorTheme__embedBlock {
   user-select: none;
 }
-.PlaygroundEditorTheme__embedBlockFocus {
+
+.notiq-root .PlaygroundEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
 
-.line-code{
+.notiq-root .line-code {
   tab-size: 2;
 }
 
-
-.line-code:before {
+.notiq-root .line-code:before {
   content: attr(data-gutter);
   position: absolute;
-  background-color:transparent;
+  background-color: transparent;
   left: 0;
   top: 0;
   height: 100%;
@@ -529,42 +566,42 @@ input[type="number"]::-webkit-outer-spin-button {
   text-align: right;
   min-width: 25px;
 }
-.line-code:before:hover{
+
+.notiq-root .line-code:before:hover {
   background: red;
 }
-.dark .line-code:before{
+
+.dark .notiq-root .line-code:before {
   border-right: 1px solid #3b3b3b65;
   color: #777;
-  
 }
 
-.PlaygroundEditorTheme__ul1,
-.PlaygroundEditorTheme__ul2,
-.PlaygroundEditorTheme__ul3,
-.PlaygroundEditorTheme__ul4,
-.PlaygroundEditorTheme__ul5 {
+.notiq-root .PlaygroundEditorTheme__ul1,
+.notiq-root .PlaygroundEditorTheme__ul2,
+.notiq-root .PlaygroundEditorTheme__ul3,
+.notiq-root .PlaygroundEditorTheme__ul4,
+.notiq-root .PlaygroundEditorTheme__ul5 {
   padding: 0;
   margin: 0;
   list-style-position: inside;
-  
 }
-.PlaygroundEditorTheme__ol1,
-.PlaygroundEditorTheme__ol2,
-.PlaygroundEditorTheme__ol3,
-.PlaygroundEditorTheme__ol4,
-.PlaygroundEditorTheme__ol5 {
+
+.notiq-root .PlaygroundEditorTheme__ol1,
+.notiq-root .PlaygroundEditorTheme__ol2,
+.notiq-root .PlaygroundEditorTheme__ol3,
+.notiq-root .PlaygroundEditorTheme__ol4,
+.notiq-root .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__listItem {
+
+.notiq-root .PlaygroundEditorTheme__listItem {
   margin: 2px 32px;
-  
 }
 
-
-.PlaygroundEditorTheme__listItemChecked,
-.PlaygroundEditorTheme__listItemUnchecked {
+.notiq-root .PlaygroundEditorTheme__listItemChecked,
+.notiq-root .PlaygroundEditorTheme__listItemUnchecked {
   position: relative;
   margin-left: 8px;
   margin-right: 8px;
@@ -573,19 +610,21 @@ input[type="number"]::-webkit-outer-spin-button {
   list-style-type: none;
   outline: none;
 }
-.ol {
+
+.notiq-root .ol {
   list-style-type: decimal;
 }
 
-.ul {
-  list-style-type:disc;
+.notiq-root .ul {
+  list-style-type: disc;
 }
 
-.PlaygroundEditorTheme__listItemChecked {
+.notiq-root .PlaygroundEditorTheme__listItemChecked {
   text-decoration: line-through;
 }
-.PlaygroundEditorTheme__listItemUnchecked:before,
-.PlaygroundEditorTheme__listItemChecked:before {
+
+.notiq-root .PlaygroundEditorTheme__listItemUnchecked:before,
+.notiq-root .PlaygroundEditorTheme__listItemChecked:before {
   content: '';
   width: 16px;
   height: 16px;
@@ -596,27 +635,32 @@ input[type="number"]::-webkit-outer-spin-button {
   background-size: cover;
   position: absolute;
 }
-.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
-.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
+
+.notiq-root .PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
+.notiq-root .PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
   left: auto;
   right: 0;
 }
-.PlaygroundEditorTheme__listItemUnchecked:focus:before,
-.PlaygroundEditorTheme__listItemChecked:focus:before {
+
+.notiq-root .PlaygroundEditorTheme__listItemUnchecked:focus:before,
+.notiq-root .PlaygroundEditorTheme__listItemChecked:focus:before {
   box-shadow: 0 0 0 2px #a6cdfe;
   border-radius: 2px;
 }
-.PlaygroundEditorTheme__listItemUnchecked:before {
+
+.notiq-root .PlaygroundEditorTheme__listItemUnchecked:before {
   border: 1px solid #999;
   border-radius: 2px;
 }
-.PlaygroundEditorTheme__listItemChecked:before {
+
+.notiq-root .PlaygroundEditorTheme__listItemChecked:before {
   border: 1px solid rgb(61, 135, 245);
   border-radius: 2px;
   background-color: #3d87f5;
   background-repeat: no-repeat;
 }
-.PlaygroundEditorTheme__listItemChecked:after {
+
+.notiq-root .PlaygroundEditorTheme__listItemChecked:after {
   content: '';
   cursor: pointer;
   border-color: #fff;
@@ -632,96 +676,91 @@ input[type="number"]::-webkit-outer-spin-button {
   border-width: 0 2px 2px 0;
 }
 
-.PlaygroundEditorTheme__ol1 {
+.notiq-root .PlaygroundEditorTheme__ol1 {
   padding: 0;
   margin: 0;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ol2 {
+
+.notiq-root .PlaygroundEditorTheme__ol2 {
   padding: 0;
   margin: 0;
   list-style-type: upper-alpha;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ol3 {
+
+.notiq-root .PlaygroundEditorTheme__ol3 {
   padding: 0;
   margin: 0;
   list-style-type: lower-alpha;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ol4 {
+
+.notiq-root .PlaygroundEditorTheme__ol4 {
   padding: 0;
   margin: 0;
   list-style-type: upper-roman;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ol5 {
+
+.notiq-root .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
   list-style-type: lower-roman;
   list-style-position: outside;
 }
 
-.PlaygroundEditorTheme__ul1 {
+.notiq-root .PlaygroundEditorTheme__ul1 {
   padding: 0;
   margin: 0;
-  list-style-type:disc;
+  list-style-type: disc;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ul2 {
+
+.notiq-root .PlaygroundEditorTheme__ul2 {
   padding: 0;
   margin: 0;
-  list-style-type:circle;
+  list-style-type: circle;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ul3 {
+
+.notiq-root .PlaygroundEditorTheme__ul3 {
   padding: 0;
   margin: 0;
-  list-style-type:square;
+  list-style-type: square;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ul4 {
+
+.notiq-root .PlaygroundEditorTheme__ul4 {
   padding: 0;
   margin: 0;
-  list-style-type:circle;
+  list-style-type: circle;
   list-style-position: outside;
 }
-.PlaygroundEditorTheme__ul5 {
+
+.notiq-root .PlaygroundEditorTheme__ul5 {
   padding: 0;
   margin: 0;
-  list-style-type:disc;
+  list-style-type: disc;
   list-style-position: outside;
 }
 
-
-.PlaygroundEditorTheme__nestedListItem {
+.notiq-root .PlaygroundEditorTheme__nestedListItem {
   list-style-type: none;
 }
-.PlaygroundEditorTheme__nestedListItem:before,
-.PlaygroundEditorTheme__nestedListItem:after {
+
+.notiq-root .PlaygroundEditorTheme__nestedListItem:before,
+.notiq-root .PlaygroundEditorTheme__nestedListItem:after {
   display: none;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\editor\utils\setNodePlaceholderFromSelection\styles.css */
-.node-placeholder:has(br):not(:has(span))::before {
-    position: absolute;
-    content: attr(data-placeholder);
-    color: rgba(136, 136, 136, 0.6);
-    
+.notiq-root .node-placeholder:has(br):not(:has(span))::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  color: rgba(136, 136, 136, 0.6);
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\ContentEditable.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-.ContentEditable__root {
+.notiq-root .ContentEditable__root {
   border: 0;
   font-size: 15px;
   display: block;
@@ -730,14 +769,15 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 8px 46px 40px;
   min-height: 150px;
 }
+
 @media (max-width: 1025px) {
-  .ContentEditable__root {
+  .notiq-root .ContentEditable__root {
     padding-left: 8px;
     padding-right: 8px;
   }
 }
 
-.ContentEditable__placeholder {
+.notiq-root .ContentEditable__placeholder {
   font-size: 15px;
   color: #999;
   overflow: hidden;
@@ -751,36 +791,28 @@ input[type="number"]::-webkit-outer-spin-button {
   display: inline-block;
   pointer-events: none;
 }
+
 @media (max-width: 1025px) {
-  .ContentEditable__placeholder {
+  .notiq-root .ContentEditable__placeholder {
     left: 8px;
     right: 8px;
   }
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\Input.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.Input__wrapper {
+.notiq-root .Input__wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 10px;
 }
-.Input__label {
+
+.notiq-root .Input__label {
   display: flex;
   flex: 1;
   color: #666;
 }
-.Input__input {
+
+.notiq-root .Input__input {
   display: flex;
   flex: 2;
   border: 1px solid #999;
@@ -793,18 +825,7 @@ input[type="number"]::-webkit-outer-spin-button {
   min-width: 0;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\Modal.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.Modal__overlay {
+.notiq-root .Modal__overlay {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -819,7 +840,8 @@ input[type="number"]::-webkit-outer-spin-button {
   flex-shrink: 1px;
   z-index: 100;
 }
-.Modal__modal {
+
+.notiq-root .Modal__modal {
   padding: 20px;
   min-height: 100px;
   min-width: 300px;
@@ -831,13 +853,15 @@ input[type="number"]::-webkit-outer-spin-button {
   box-shadow: 0 0 20px 0 #444;
   border-radius: 10px;
 }
-.Modal__title {
+
+.notiq-root .Modal__title {
   color: #444;
   margin: 0px;
   padding-bottom: 10px;
   border-bottom: 1px solid #ccc;
 }
-.Modal__closeButton {
+
+.notiq-root .Modal__closeButton {
   border: 0px;
   position: absolute;
   right: 20px;
@@ -851,24 +875,16 @@ input[type="number"]::-webkit-outer-spin-button {
   cursor: pointer;
   background-color: #eee;
 }
-.Modal__closeButton:hover {
+
+.notiq-root .Modal__closeButton:hover {
   background-color: #ddd;
 }
-.Modal__content {
+
+.notiq-root .Modal__content {
   padding-top: 20px;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\Select.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-select {
+.notiq-root select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -880,18 +896,11 @@ select {
   font-size: inherit;
   cursor: inherit;
   line-height: inherit;
-
   z-index: 1;
   outline: none;
 }
 
-:root {
-  --select-border: #393939;
-  --select-focus: #101484;
-  --select-arrow: var(--select-border);
-}
-
-.select {
+.notiq-root .select {
   min-width: 160px;
   max-width: 290px;
   border: 1px solid var(--select-border);
@@ -903,46 +912,25 @@ select {
   background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\dialog\Dialog.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-.DialogActions {
+.notiq-root .DialogActions {
   display: flex;
   flex-direction: row;
   justify-content: right;
   margin-top: 20px;
 }
 
-.DialogButtonsList {
+.notiq-root .DialogButtonsList {
   display: flex;
   flex-direction: column;
   justify-content: right;
   margin-top: 20px;
 }
 
-.DialogButtonsList button {
+.notiq-root .DialogButtonsList button {
   margin-bottom: 20px;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\equation\EquationEditor.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.EquationEditor_inlineEditor {
+.notiq-root .EquationEditor_inlineEditor {
   padding: 0;
   margin: 0;
   border: 0;
@@ -952,7 +940,7 @@ select {
   resize: none;
 }
 
-.EquationEditor_blockEditor {
+.notiq-root .EquationEditor_blockEditor {
   padding: 0;
   margin: 0;
   border: 0;
@@ -963,27 +951,16 @@ select {
   width: 100%;
 }
 
-.EquationEditor_inputBackground {
+.notiq-root .EquationEditor_inputBackground {
   background-color: #eee;
 }
 
-.EquationEditor_dollarSign {
+.notiq-root .EquationEditor_dollarSign {
   text-align: left;
   color: #b0b0b0;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\equation\KatexEquationAlterer.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.KatexEquationAlterer_defaultRow {
+.notiq-root .KatexEquationAlterer_defaultRow {
   display: flex;
   flex-direction: row;
   margin-top: 10px;
@@ -992,7 +969,7 @@ select {
   overflow: hidden;
 }
 
-.KatexEquationAlterer_dialogActions {
+.notiq-root .KatexEquationAlterer_dialogActions {
   display: flex;
   flex-direction: row;
   overflow: hidden;
@@ -1001,7 +978,7 @@ select {
   justify-content: right;
 }
 
-.KatexEquationAlterer_centerRow {
+.notiq-root .KatexEquationAlterer_centerRow {
   display: flex;
   flex-direction: 'row';
   margin-top: 10px;
@@ -1010,24 +987,13 @@ select {
   overflow: hidden;
 }
 
-.KatexEquationAlterer_textArea {
+.notiq-root .KatexEquationAlterer_textArea {
   width: 100%;
   resize: none;
   padding: 7px;
 }
 
-
-/* File: C:\Users\HP\notiq\src\components\ui\excalidraw\ExcalidrawModal.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.ExcalidrawModal__overlay {
+.notiq-root .ExcalidrawModal__overlay {
   display: flex;
   align-items: center;
   position: fixed;
@@ -1041,18 +1007,21 @@ select {
   z-index: 100;
   background-color: rgba(40, 40, 40, 0.6);
 }
-.ExcalidrawModal__actions {
+
+.notiq-root .ExcalidrawModal__actions {
   text-align: end;
   position: absolute;
   right: 5px;
   top: 5px;
   z-index: 1;
 }
-.ExcalidrawModal__actions button {
+
+.notiq-root .ExcalidrawModal__actions button {
   background-color: #fff;
   border-radius: 5px;
 }
-.ExcalidrawModal__row {
+
+.notiq-root .ExcalidrawModal__row {
   position: relative;
   padding: 40px 5px 5px;
   width: 70vw;
@@ -1063,10 +1032,12 @@ select {
     0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
 }
-.ExcalidrawModal__row > div {
+
+.notiq-root .ExcalidrawModal__row > div {
   border-radius: 5px;
 }
-.ExcalidrawModal__modal {
+
+.notiq-root .ExcalidrawModal__modal {
   position: relative;
   z-index: 10;
   top: 50px;
@@ -1078,74 +1049,9 @@ select {
   border-radius: 8px;
   background-color: #eee;
 }
-.ExcalidrawModal__discardModal {
-  margin-top: 60px;
-  text-align: center;
-}
-
 
-/* File: C:\Users\HP\notiq\src\components\ui\excalidraw\Modal.css */
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.Modal__overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  flex-direction: column;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background-color: rgba(40, 40, 40, 0.6);
-  flex-grow: 0px;
-  flex-shrink: 1px;
-  z-index: 100;
-}
-.Modal__modal {
-  padding: 20px;
-  min-height: 100px;
-  min-width: 300px;
-  display: flex;
-  flex-grow: 0px;
-  background-color: #fff;
-  flex-direction: column;
-  position: relative;
-  box-shadow: 0 0 20px 0 #444;
-  border-radius: 10px;
-}
-.Modal__title {
-  color: #444;
-  margin: 0px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ccc;
-}
-.Modal__closeButton {
-  border: 0px;
-  position: absolute;
-  right: 20px;
-  border-radius: 20px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  width: 30px;
-  height: 30px;
+.notiq-root .ExcalidrawModal__discardModal {
+  margin-top: 60px;
   text-align: center;
-  cursor: pointer;
-  background-color: #eee;
 }
-.Modal__closeButton:hover {
-  background-color: #ddd;
 }
-.Modal__content {
-  padding-top: 20px;
-}
-
-