@trycourier/react-designer 0.0.0-canary-20250604155619 → 0.0.0-canary-20250611183605

package/dist/esm/styles.css

@@ -896,11 +896,11 @@ body {
 .courier-inset-0 {
   inset: 0px;
 }
-.-courier-left-\[10px\] {
-  left: -10px;
+.-courier-left-\[2px\] {
+  left: -2px;
 }
-.-courier-right-\[10px\] {
-  right: -10px;
+.-courier-right-\[2px\] {
+  right: -2px;
 }
 .courier-bottom-0 {
   bottom: 0px;
@@ -1415,6 +1415,9 @@ body {
 .courier-items-center {
   align-items: center;
 }
+.courier-justify-start {
+  justify-content: flex-start;
+}
 .courier-justify-end {
   justify-content: flex-end;
 }
@@ -1485,6 +1488,9 @@ body {
 .courier-rounded-3xl {
   border-radius: 1.5rem;
 }
+.courier-rounded-\[40px\] {
+  border-radius: 40px;
+}
 .courier-rounded-full {
   border-radius: 9999px;
 }
@@ -1793,6 +1799,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;
@@ -1869,12 +1883,6 @@ body {
   padding-top: 1px;
   padding-bottom: 1px;
 }
-.\!courier-pl-2 {
-  padding-left: 0.5rem !important;
-}
-.\!courier-pr-2 {
-  padding-right: 0.5rem !important;
-}
 .courier-pb-0 {
   padding-bottom: 0px;
 }
@@ -2086,6 +2094,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);
@@ -2341,6 +2354,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;
@@ -2379,19 +2398,19 @@ body {
 .courier-editor-preview-mode.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>.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 * {
   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 * {
   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"] {
   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: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"] {
   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 .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 {
   display: none;
 }
 .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
@@ -2576,13 +2595,23 @@ body {
   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-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-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"] {
@@ -3071,15 +3100,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);
 }
@@ -3115,6 +3149,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);
 }
@@ -3129,9 +3167,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;
 }

package/dist/store.d.ts

@@ -1,11 +1,8 @@
-export type Channel = "email" | "sms" | "push" | "inbox";
-export declare const CHANNELS: {
-    label: string;
-    value: Channel;
-}[];
-export declare const channelAtom: import("jotai").PrimitiveAtom<Channel> & {
-    init: Channel;
+import type { ChannelType } from "./channels";
+export declare const channelAtom: import("jotai").PrimitiveAtom<ChannelType> & {
+    init: ChannelType;
 };
 export declare const pageAtom: import("jotai").PrimitiveAtom<"template" | "brand"> & {
     init: "template" | "brand";
 };
+export * from "./channels";

package/dist/styles.css

@@ -896,11 +896,11 @@ body {
 .courier-inset-0 {
   inset: 0px;
 }
-.-courier-left-\[10px\] {
-  left: -10px;
+.-courier-left-\[2px\] {
+  left: -2px;
 }
-.-courier-right-\[10px\] {
-  right: -10px;
+.-courier-right-\[2px\] {
+  right: -2px;
 }
 .courier-bottom-0 {
   bottom: 0px;
@@ -1415,6 +1415,9 @@ body {
 .courier-items-center {
   align-items: center;
 }
+.courier-justify-start {
+  justify-content: flex-start;
+}
 .courier-justify-end {
   justify-content: flex-end;
 }
@@ -1485,6 +1488,9 @@ body {
 .courier-rounded-3xl {
   border-radius: 1.5rem;
 }
+.courier-rounded-\[40px\] {
+  border-radius: 40px;
+}
 .courier-rounded-full {
   border-radius: 9999px;
 }
@@ -1793,6 +1799,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;
@@ -1869,12 +1883,6 @@ body {
   padding-top: 1px;
   padding-bottom: 1px;
 }
-.\!courier-pl-2 {
-  padding-left: 0.5rem !important;
-}
-.\!courier-pr-2 {
-  padding-right: 0.5rem !important;
-}
 .courier-pb-0 {
   padding-bottom: 0px;
 }
@@ -2086,6 +2094,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);
@@ -2341,6 +2354,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;
@@ -2379,19 +2398,19 @@ body {
 .courier-editor-preview-mode.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>.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 * {
   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 * {
   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"] {
   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: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"] {
   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 .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 {
   display: none;
 }
 .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
@@ -2576,13 +2595,23 @@ body {
   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-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-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"] {
@@ -3071,15 +3100,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);
 }
@@ -3115,6 +3149,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);
 }
@@ -3129,9 +3167,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;
 }

package/dist/types/elemental.schema.d.ts

@@ -5,17 +5,17 @@ export declare const ElementalSchema: z.ZodObject<{
     version: z.ZodLiteral<"2022-01-01">;
     elements: z.ZodArray<z.ZodType<ElementalNode, z.ZodTypeDef, ElementalNode>, "many">;
 }, "strip", z.ZodTypeAny, {
-    version: "2022-01-01";
     elements: ElementalNode[];
-}, {
     version: "2022-01-01";
+}, {
     elements: ElementalNode[];
+    version: "2022-01-01";
 }>;
 export declare const validateElemental: (json: unknown) => {
     success: boolean;
     data: {
-        version: "2022-01-01";
         elements: ElementalNode[];
+        version: "2022-01-01";
     };
     errors?: undefined;
 } | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-designer",
-  "version": "0.0.0-canary-20250604155619",
+  "version": "0.0.0-canary-20250611183605",
   "description": "React-based rich text designer component",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -71,6 +71,7 @@
     "lucide-react": "^0.473.0",
     "next-themes": "^0.4.5",
     "react-hook-form": "^7.53.2",
+    "sms-segments-calculator": "^1.2.0",
     "sonner": "^2.0.1",
     "tailwind-merge": "^1.14.0",
     "uuid": "^11.0.3",
@@ -138,7 +139,7 @@
     "lint": "eslint \"src/**/*.ts*\"",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --workers=1",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "analyze": "node build.js --analyze",
     "release": "node scripts/publish.js",