@trycourier/react-designer 0.0.2 → 0.0.3

package/dist/styles.css

@@ -884,6 +884,9 @@ body {
 .courier-invisible {
   visibility: hidden;
 }
+.courier-fixed {
+  position: fixed;
+}
 .courier-absolute {
   position: absolute;
 }
@@ -896,6 +899,12 @@ body {
 .courier-inset-0 {
   inset: 0px;
 }
+.-courier-left-\[2px\] {
+  left: -2px;
+}
+.-courier-right-\[2px\] {
+  right: -2px;
+}
 .courier-bottom-0 {
   bottom: 0px;
 }
@@ -911,6 +920,9 @@ body {
 .courier-left-\[-20px\] {
   left: -20px;
 }
+.courier-left-\[50\%\] {
+  left: 50%;
+}
 .courier-right-0 {
   right: 0px;
 }
@@ -920,6 +932,9 @@ body {
 .courier-right-3 {
   right: 0.75rem;
 }
+.courier-right-4 {
+  right: 1rem;
+}
 .courier-right-\[-12px\] {
   right: -12px;
 }
@@ -929,9 +944,30 @@ body {
 .courier-top-0 {
   top: 0px;
 }
+.courier-top-3 {
+  top: 0.75rem;
+}
+.courier-top-4 {
+  top: 1rem;
+}
 .courier-top-\[-1\.5em\] {
   top: -1.5em;
 }
+.courier-top-\[136px\] {
+  top: 136px;
+}
+.courier-top-\[178px\] {
+  top: 178px;
+}
+.courier-top-\[200px\] {
+  top: 200px;
+}
+.courier-top-\[245px\] {
+  top: 245px;
+}
+.courier-top-\[50\%\] {
+  top: 50%;
+}
 .courier-z-0 {
   z-index: 0;
 }
@@ -956,6 +992,9 @@ body {
 .courier-m-2 {
   margin: 0.5rem;
 }
+.courier-m-6 {
+  margin: 1.5rem;
+}
 .-courier-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -964,6 +1003,10 @@ body {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.courier-mx-11 {
+  margin-left: 2.75rem;
+  margin-right: 2.75rem;
+}
 .courier-mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -992,6 +1035,10 @@ body {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
+.courier-my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
 .courier-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1004,6 +1051,9 @@ body {
 .courier-mb-4 {
   margin-bottom: 1rem;
 }
+.courier-mb-6 {
+  margin-bottom: 1.5rem;
+}
 .courier-mb-8 {
   margin-bottom: 2rem;
 }
@@ -1016,12 +1066,18 @@ body {
 .courier-ml-auto {
   margin-left: auto;
 }
+.courier-mr-14 {
+  margin-right: 3.5rem;
+}
 .courier-mr-2 {
   margin-right: 0.5rem;
 }
 .courier-mr-auto {
   margin-right: auto;
 }
+.courier-mt-1 {
+  margin-top: 0.25rem;
+}
 .courier-mt-12 {
   margin-top: 3rem;
 }
@@ -1055,12 +1111,18 @@ body {
 .courier-inline-flex {
   display: inline-flex;
 }
+.courier-grid {
+  display: grid;
+}
 .courier-hidden {
   display: none;
 }
 .courier-aspect-square {
   aspect-ratio: 1 / 1;
 }
+.\!courier-h-5 {
+  height: 1.25rem !important;
+}
 .\!courier-h-6 {
   height: 1.5rem !important;
 }
@@ -1115,6 +1177,18 @@ body {
 .courier-h-\[300px\] {
   height: 300px;
 }
+.courier-h-\[500px\] {
+  height: 500px;
+}
+.courier-h-\[50px\] {
+  height: 50px;
+}
+.courier-h-\[78px\] {
+  height: 78px;
+}
+.courier-h-\[calc\(90\%-56px\)\] {
+  height: calc(90% - 56px);
+}
 .courier-h-auto {
   height: auto;
 }
@@ -1151,6 +1225,9 @@ body {
 .courier-w-0 {
   width: 0px;
 }
+.courier-w-0\.5 {
+  width: 0.125rem;
+}
 .courier-w-1 {
   width: 0.25rem;
 }
@@ -1196,6 +1273,12 @@ body {
 .courier-w-\[230px\] {
   width: 230px;
 }
+.courier-w-\[306px\] {
+  width: 306px;
+}
+.courier-w-\[360px\] {
+  width: 360px;
+}
 .courier-w-auto {
   width: auto;
 }
@@ -1244,6 +1327,9 @@ body {
 .courier-max-w-4xl {
   max-width: 56rem;
 }
+.courier-max-w-lg {
+  max-width: 32rem;
+}
 .courier-flex-1 {
   flex: 1 1 0%;
 }
@@ -1332,6 +1418,9 @@ body {
 .courier-flex-col {
   flex-direction: column;
 }
+.courier-flex-col-reverse {
+  flex-direction: column-reverse;
+}
 .courier-flex-wrap {
   flex-wrap: wrap;
 }
@@ -1341,6 +1430,9 @@ body {
 .courier-items-center {
   align-items: center;
 }
+.courier-justify-start {
+  justify-content: flex-start;
+}
 .courier-justify-end {
   justify-content: flex-end;
 }
@@ -1384,9 +1476,18 @@ body {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.courier-self-end {
+  align-self: flex-end;
+}
 .courier-self-center {
   align-self: center;
 }
+.courier-self-stretch {
+  align-self: stretch;
+}
+.courier-overflow-auto {
+  overflow: auto;
+}
 .courier-overflow-hidden {
   overflow: hidden;
 }
@@ -1396,9 +1497,18 @@ body {
 .courier-whitespace-nowrap {
   white-space: nowrap;
 }
+.\!courier-rounded-none {
+  border-radius: 0px !important;
+}
 .courier-rounded {
   border-radius: 0.25rem;
 }
+.courier-rounded-3xl {
+  border-radius: 1.5rem;
+}
+.courier-rounded-\[40px\] {
+  border-radius: 40px;
+}
 .courier-rounded-full {
   border-radius: 9999px;
 }
@@ -1408,15 +1518,16 @@ body {
 .courier-rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
-.courier-rounded-none {
-  border-radius: 0px;
-}
 .courier-rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
 .courier-rounded-xl {
   border-radius: 0.75rem;
 }
+.courier-rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 .courier-rounded-br-sm {
   border-bottom-right-radius: calc(var(--radius) - 4px);
 }
@@ -1432,27 +1543,28 @@ body {
 .courier-border-2 {
   border-width: 2px;
 }
+.courier-border-8 {
+  border-width: 8px;
+}
+.courier-border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
 .courier-border-b {
   border-bottom-width: 1px;
 }
+.courier-border-b-0 {
+  border-bottom-width: 0px;
+}
 .courier-border-b-2 {
   border-bottom-width: 2px;
 }
 .courier-border-l {
   border-left-width: 1px;
 }
-.courier-border-l-0 {
-  border-left-width: 0px;
-}
-.courier-border-r-0 {
-  border-right-width: 0px;
-}
 .courier-border-t {
   border-top-width: 1px;
 }
-.courier-border-t-0 {
-  border-top-width: 0px;
-}
 .courier-border-dashed {
   border-style: dashed;
 }
@@ -1535,6 +1647,9 @@ body {
 .courier-border-b-black\/10 {
   border-bottom-color: rgb(0 0 0 / 0.1);
 }
+.courier-border-b-transparent {
+  border-bottom-color: transparent;
+}
 .courier-border-t-black\/30 {
   border-top-color: rgb(0 0 0 / 0.3);
 }
@@ -1554,6 +1669,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
+.courier-bg-\[\#0a0a0a52\] {
+  background-color: #0a0a0a52;
+}
 .courier-bg-\[\#3B82F6\] {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -1675,6 +1793,9 @@ body {
 .\!courier-p-0\.5 {
   padding: 0.125rem !important;
 }
+.courier-p-0 {
+  padding: 0px;
+}
 .courier-p-0\.5 {
   padding: 0.125rem;
 }
@@ -1699,6 +1820,14 @@ body {
 .courier-p-\[3px\] {
   padding: 3px;
 }
+.\!courier-px-2 {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+.\!courier-py-\[5px\] {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
 .courier-px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1763,6 +1892,10 @@ body {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.courier-py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
 .courier-py-\[18px\] {
   padding-top: 18px;
   padding-bottom: 18px;
@@ -1777,6 +1910,9 @@ body {
 .courier-pb-2 {
   padding-bottom: 0.5rem;
 }
+.courier-pb-4 {
+  padding-bottom: 1rem;
+}
 .courier-pb-5 {
   padding-bottom: 1.25rem;
 }
@@ -1804,6 +1940,9 @@ body {
 .courier-pr-3 {
   padding-right: 0.75rem;
 }
+.courier-pr-4 {
+  padding-right: 1rem;
+}
 .courier-pr-8 {
   padding-right: 2rem;
 }
@@ -1835,6 +1974,10 @@ body {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.courier-text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
 .courier-text-\[\.65rem\] {
   font-size: .65rem;
 }
@@ -1888,6 +2031,10 @@ body {
 .courier-tracking-widest {
   letter-spacing: 0.1em;
 }
+.courier-text-\[\#A3A3A3\] {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
 .courier-text-accent-foreground {
   color: var(--accent-foreground);
 }
@@ -1968,6 +2115,11 @@ body {
 .courier-opacity-\[0\.999\] {
   opacity: 0.999;
 }
+.\!courier-shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
 .courier-shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2038,6 +2190,9 @@ body {
 .courier-duration-100 {
   transition-duration: 100ms;
 }
+.courier-duration-200 {
+  transition-duration: 200ms;
+}
 .courier-duration-300 {
   transition-duration: 300ms;
 }
@@ -2065,6 +2220,9 @@ body {
 .courier-duration-100 {
   animation-duration: 100ms;
 }
+.courier-duration-200 {
+  animation-duration: 200ms;
+}
 .courier-duration-300 {
   animation-duration: 300ms;
 }
@@ -2080,7 +2238,7 @@ body {
 .touch-transparent {
     -webkit-tap-highlight-color: transparent;
   }
-.courier-editor-preview-mode>div:first-child {
+.courier-editor-preview-mode.courier-main-content {
       flex-grow: 1;
       width: 100%;
     }
@@ -2110,6 +2268,35 @@ body {
 .lightTheme {
   height: 100%;
 }
+.courier-main-layout {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  min-height: 600px;
+  min-width: 812px;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: calc(var(--radius) - 4px);
+  border-width: 1px;
+  border-color: var(--border);
+  background-color: var(--card);
+  color: var(--foreground);
+}
+.courier-main-layout::before {
+  position: absolute;
+}
+.courier-main-layout::before {
+  inset: 0px;
+}
+.courier-main-layout::before {
+  z-index: -10;
+}
+.courier-main-layout::before {
+    content: '';
+    background: radial-gradient(#0A0A0A32 1px, transparent 1px);
+    background-size: 15px 15px;
+  }
 .courier-editor-container {
   position: relative;
   display: flex;
@@ -2122,8 +2309,6 @@ body {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   animation-duration: 300ms;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  background: radial-gradient(#0A0A0A32 1px, transparent 1px);
-  background-size: 15px 15px;
 }
 .courier-editor-sidebar {
   overflow-y: auto;
@@ -2196,6 +2381,12 @@ body {
 .courier-theme-editor-main >div .ProseMirror {
   padding: 0px;
 }
+.courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph .selected-element .node-element::before {
+  display: none;
+}
+.courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph .selected-element .courier-actions-panel {
+  display: none;
+}
 .courier-theme-editor-main >div .ProseMirror .react-renderer.node-paragraph p {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2210,6 +2401,7 @@ body {
   padding: 0px;
 }
 .courier-editor-main {
+  position: relative;
   width: 100%;
   max-width: 42rem;
   -webkit-user-select: none;
@@ -2227,34 +2419,241 @@ body {
 .courier-editor-main >div {
   width: 100%;
 }
-.courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main {
+.courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main, .courier-editor-readonly.courier-editor-preview-mode-mobile .courier-editor-main {
   max-width: 24rem;
 }
-.courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main:hover >button {
+.courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main:hover >button, .courier-editor-readonly.courier-editor-preview-mode-mobile .courier-editor-main:hover >button {
   display: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote * {
+.courier-editor-preview-mode .ProseMirror, .courier-editor-readonly .ProseMirror {
+  pointer-events: none;
+}
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow *, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-readonly .ProseMirror>.react-renderer.node-button *, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider *, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading *, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow * {
   pointer-events: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote * {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow *, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock *, .courier-editor-readonly .ProseMirror>.react-renderer.node-button *, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider *, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph *, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading *, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote *, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow * {
   cursor: default;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"] {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-button [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-divider [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-heading [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"] {
+  display: none;
+}
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .selected-element .courier-actions-panel, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button .selected-element .courier-actions-panel, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider .selected-element .courier-actions-panel, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote .selected-element .courier-actions-panel, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-button .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote .selected-element .courier-actions-panel, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow .selected-element .courier-actions-panel {
   display: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"] {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .selected-element .node-element::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button .selected-element .node-element::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider .selected-element .node-element::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote .selected-element .node-element::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote .selected-element .node-element::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow .selected-element .node-element::before {
   display: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover [data-cypress="draggable-handle"], .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-button:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-button:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:active [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:hover [data-cypress="draggable-handle"], .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:active [data-cypress="draggable-handle"] {
   display: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:hover .node-element.courier-empty-image::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element>div::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element>hr::before, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-buttonRow:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-button:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-divider:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote:active .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:hover .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:hover .node-element.courier-empty-image::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:active .node-element>div::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:active .node-element>hr::before, .courier-editor-readonly .ProseMirror>.react-renderer.node-buttonRow:active .node-element.courier-empty-image::before {
   display: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph .is-empty p::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph .is-empty blockquote::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote .is-empty p::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote .is-empty blockquote::after {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
   display: none;
 }
-.courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .is-empty h1::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .is-empty h2::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .is-empty h3::after {
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph .is-empty p::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-paragraph .is-empty blockquote::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote .is-empty p::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-blockquote .is-empty blockquote::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph .is-empty p::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-paragraph .is-empty blockquote::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote .is-empty p::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-blockquote .is-empty blockquote::after {
+  display: none;
+}
+.courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .is-empty h1::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .is-empty h2::after, .courier-editor-preview-mode .ProseMirror>.react-renderer.node-heading .is-empty h3::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading .is-empty h1::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading .is-empty h2::after, .courier-editor-readonly .ProseMirror>.react-renderer.node-heading .is-empty h3::after {
+  display: none;
+}
+.courier-sms-editor {
+  margin: 1.5rem;
+  margin-right: 3.5rem;
+  margin-top: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius);
+  background-color: var(--card);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.courier-sms-editor .ProseMirror {
+  padding: 0px;
+}
+.courier-sms-editor .ProseMirror>.react-renderer .draggable-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.courier-sms-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before {
+  display: none;
+}
+.courier-sms-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel {
+  display: none;
+}
+.courier-sms-editor .ProseMirror>.react-renderer:hover .draggable-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.courier-sms-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
+  display: none;
+}
+.courier-sms-editor .ProseMirror>.react-renderer:hover .node-element>div::before {
+  display: none;
+}
+.courier-push-editor {
+  position: relative;
+  margin: 1.5rem;
+  border-radius: var(--radius);
+  background-color: var(--card);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 1rem;
+}
+.courier-push-editor::before {
+    content: 'now';
+  }
+.courier-push-editor::before {
+  position: absolute;
+}
+.courier-push-editor::before {
+  top: 0.75rem;
+}
+.courier-push-editor::before {
+  right: 0.75rem;
+}
+.courier-push-editor::before {
+  z-index: 10;
+}
+.courier-push-editor::before {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.courier-push-editor::before {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.courier-push-editor .ProseMirror {
+  display: flex;
+}
+.courier-push-editor .ProseMirror {
+  flex-direction: column;
+}
+.courier-push-editor .ProseMirror {
+  gap: 0.125rem;
+}
+.courier-push-editor .ProseMirror {
+  padding: 0px;
+}
+.courier-push-editor .ProseMirror>.react-renderer .node-element>div {
+  padding: 0px !important;
+}
+.courier-push-editor .ProseMirror>.react-renderer .node-element h2, .courier-push-editor .ProseMirror>.react-renderer .node-element p {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.courier-push-editor .ProseMirror>.react-renderer .draggable-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.courier-push-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-push-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before {
+  display: none;
+}
+.courier-push-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-push-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel {
+  display: none;
+}
+.courier-push-editor .ProseMirror>.react-renderer:hover .draggable-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.courier-push-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
+  display: none;
+}
+.courier-push-editor .ProseMirror>.react-renderer:hover .node-element>div::before {
+  display: none;
+}
+.courier-inbox-editor {
+  flex: 1 1 0%;
+  overflow: auto;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-color: var(--border);
+  max-height: calc(90% - 56px);
+}
+.courier-inbox-editor .ProseMirror {
+  display: flex;
+}
+.courier-inbox-editor .ProseMirror {
+  flex-direction: column;
+}
+.courier-inbox-editor .ProseMirror {
+  gap: 0.125rem;
+}
+.courier-inbox-editor .ProseMirror {
+  padding: 1rem;
+}
+.courier-inbox-editor .ProseMirror {
+  padding-right: 2.5rem;
+}
+.courier-inbox-editor .ProseMirror::before {
+      content: 'now';
+    }
+.courier-inbox-editor .ProseMirror::before {
+  position: absolute;
+}
+.courier-inbox-editor .ProseMirror::before {
+  top: 1rem;
+}
+.courier-inbox-editor .ProseMirror::before {
+  right: 1rem;
+}
+.courier-inbox-editor .ProseMirror::before {
+  z-index: 10;
+}
+.courier-inbox-editor .ProseMirror::before {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.courier-inbox-editor .ProseMirror::before {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.courier-inbox-editor .ProseMirror>.react-renderer .node-element>div {
+  padding: 0px !important;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer .node-element h2, .courier-inbox-editor .ProseMirror>.react-renderer .node-element p {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-button {
+  margin-top: 0.5rem;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-button .node-element>div>div {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-button .node-element>div>div {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-button .node-element>div>div {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow {
+  margin-top: 0.5rem;
+}
+/* Override the centering from SortableItemWrapper */
+.courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .draggable-item {
+          justify-content: flex-start !important;
+        }
+.courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow [data-cypress="draggable-handle"] {
+  display: none;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer .draggable-item {
+  padding: 0px;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .node-element::before, .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .selected-element .node-element::before {
+  display: none;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer.node-paragraph .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-heading .selected-element .courier-actions-panel, .courier-inbox-editor .ProseMirror>.react-renderer.node-buttonRow .selected-element .courier-actions-panel {
+  display: none;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer:hover [data-cypress="draggable-handle"] {
+  display: none;
+}
+.courier-inbox-editor .ProseMirror>.react-renderer:hover .node-element>div::before {
   display: none;
 }
 .ProseMirror {
@@ -2737,15 +3136,20 @@ body {
 .read-only\:courier-border-transparent:read-only {
   border-color: transparent;
 }
+.hover\:courier-border-\[\#3B82F6\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
 .hover\:courier-border-accent-foreground:hover {
   border-color: var(--accent-foreground);
 }
+.hover\:courier-bg-\[\#3B82F6\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
 .hover\:courier-bg-accent:hover {
   background-color: var(--accent);
 }
-.hover\:courier-bg-accent-foreground:hover {
-  background-color: var(--accent-foreground);
-}
 .hover\:courier-bg-black\/5:hover {
   background-color: rgb(0 0 0 / 0.05);
 }
@@ -2781,6 +3185,10 @@ body {
 .hover\:courier-bg-opacity-20:hover {
   --tw-bg-opacity: 0.2;
 }
+.hover\:courier-text-\[\#ffffff\]:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
 .hover\:courier-text-accent-foreground:hover {
   color: var(--accent-foreground);
 }
@@ -2795,9 +3203,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(38 38 38 / var(--tw-text-opacity, 1));
 }
-.hover\:courier-text-secondary-foreground:hover {
-  color: var(--secondary-foreground);
-}
 .hover\:courier-outline-neutral-600:hover {
   outline-color: #525252;
 }
@@ -2899,9 +3304,15 @@ body {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.data-\[state\=active\]\:courier-border-b-accent-foreground[data-state="active"] {
+  border-bottom-color: var(--accent-foreground);
+}
 .data-\[state\=active\]\:courier-bg-accent[data-state="active"] {
   background-color: var(--accent);
 }
+.data-\[state\=active\]\:courier-bg-transparent[data-state="active"] {
+  background-color: transparent;
+}
 .data-\[state\=checked\]\:courier-bg-accent-foreground[data-state="checked"] {
   background-color: var(--accent-foreground);
 }
@@ -2920,6 +3331,9 @@ body {
 .data-\[state\=active\]\:courier-text-accent-foreground[data-state="active"] {
   color: var(--accent-foreground);
 }
+.data-\[state\=active\]\:courier-text-foreground[data-state="active"] {
+  color: var(--foreground);
+}
 .data-\[state\=on\]\:courier-text-accent-foreground[data-state="on"] {
   color: var(--accent-foreground);
 }
@@ -2968,6 +3382,18 @@ body {
 .data-\[side\=top\]\:courier-slide-in-from-bottom-2[data-side="top"] {
   --tw-enter-translate-y: 0.5rem;
 }
+.data-\[state\=closed\]\:courier-slide-out-to-left-1\/2[data-state="closed"] {
+  --tw-exit-translate-x: -50%;
+}
+.data-\[state\=closed\]\:courier-slide-out-to-top-\[48\%\][data-state="closed"] {
+  --tw-exit-translate-y: -48%;
+}
+.data-\[state\=open\]\:courier-slide-in-from-left-1\/2[data-state="open"] {
+  --tw-enter-translate-x: -50%;
+}
+.data-\[state\=open\]\:courier-slide-in-from-top-\[48\%\][data-state="open"] {
+  --tw-enter-translate-y: -48%;
+}
 .dark\:courier-border-foreground:is(.courier-dark *) {
   border-color: var(--foreground);
 }
@@ -3101,6 +3527,34 @@ body {
   --tw-text-opacity: 1;
   color: rgb(229 229 229 / var(--tw-text-opacity, 1));
 }
+@media (min-width: 640px) {
+
+  .sm\:courier-mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:courier-flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:courier-justify-end {
+    justify-content: flex-end;
+  }
+
+  .sm\:courier-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:courier-rounded-lg {
+    border-radius: var(--radius);
+  }
+
+  .sm\:courier-text-left {
+    text-align: left;
+  }
+}
 @media (min-width: 768px) {
 
   .md\:courier-text-sm {