@trycourier/react-designer 0.0.0-canary-20250714142320 → 0.0.0-canary-20250725092737

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/cjs/index.css +1 -1
  2. package/dist/cjs/index.css.map +2 -2
  3. package/dist/cjs/index.js +39 -41
  4. package/dist/cjs/index.js.map +4 -4
  5. package/dist/cjs/styles.css +83 -10
  6. package/dist/components/TemplateEditor/Channels/Email/EmailEditor.d.ts +1 -1
  7. package/dist/components/TemplateEditor/Channels/Email/index.d.ts +1 -0
  8. package/dist/components/TemplateEditor/Channels/Push/PushEditor.d.ts +1 -2
  9. package/dist/components/TemplateEditor/Channels/useChannels.d.ts +1 -0
  10. package/dist/components/TemplateEditor/Layout/Layout.d.ts +1 -0
  11. package/dist/components/TemplateEditor/index.d.ts +1 -1
  12. package/dist/components/extensions/FixedChannelPaste/FixedChannelPaste.d.ts +11 -0
  13. package/dist/components/extensions/FixedChannelPaste/FixedChannelPaste.test.d.ts +1 -0
  14. package/dist/components/extensions/FixedChannelPaste/index.d.ts +2 -0
  15. package/dist/components/extensions/FixedChannelSelection/FixedChannelSelection.d.ts +14 -0
  16. package/dist/components/extensions/FixedChannelSelection/FixedChannelSelection.test.d.ts +1 -0
  17. package/dist/components/extensions/FixedChannelSelection/index.d.ts +1 -0
  18. package/dist/components/extensions/Variable/VariablePaste.d.ts +2 -0
  19. package/dist/components/extensions/Variable/VariablePaste.test.d.ts +1 -0
  20. package/dist/components/extensions/Variable/index.d.ts +1 -0
  21. package/dist/components/extensions/extension-kit.d.ts +1 -1
  22. package/dist/components/extensions/index.d.ts +3 -1
  23. package/dist/components/ui/PreviewPanel/PreviewPanel.d.ts +3 -2
  24. package/dist/components/ui-kit/AlertDialog/AlertDialog.d.ts +20 -0
  25. package/dist/components/ui-kit/AlertDialog/index.d.ts +1 -0
  26. package/dist/components/ui-kit/Button/Button.d.ts +1 -2
  27. package/dist/components/ui-kit/index.d.ts +1 -0
  28. package/dist/esm/index.css +1 -1
  29. package/dist/esm/index.css.map +2 -2
  30. package/dist/esm/index.js +39 -41
  31. package/dist/esm/index.js.map +4 -4
  32. package/dist/esm/styles.css +83 -10
  33. package/dist/styles.css +83 -10
  34. package/package.json +3 -2
@@ -884,6 +884,9 @@ body {
884
884
  .courier-invisible {
885
885
  visibility: hidden;
886
886
  }
887
+ .courier-fixed {
888
+ position: fixed;
889
+ }
887
890
  .courier-absolute {
888
891
  position: absolute;
889
892
  }
@@ -917,6 +920,9 @@ body {
917
920
  .courier-left-\[-20px\] {
918
921
  left: -20px;
919
922
  }
923
+ .courier-left-\[50\%\] {
924
+ left: 50%;
925
+ }
920
926
  .courier-right-0 {
921
927
  right: 0px;
922
928
  }
@@ -959,6 +965,9 @@ body {
959
965
  .courier-top-\[245px\] {
960
966
  top: 245px;
961
967
  }
968
+ .courier-top-\[50\%\] {
969
+ top: 50%;
970
+ }
962
971
  .courier-z-0 {
963
972
  z-index: 0;
964
973
  }
@@ -1318,6 +1327,9 @@ body {
1318
1327
  .courier-max-w-4xl {
1319
1328
  max-width: 56rem;
1320
1329
  }
1330
+ .courier-max-w-lg {
1331
+ max-width: 32rem;
1332
+ }
1321
1333
  .courier-flex-1 {
1322
1334
  flex: 1 1 0%;
1323
1335
  }
@@ -1406,6 +1418,9 @@ body {
1406
1418
  .courier-flex-col {
1407
1419
  flex-direction: column;
1408
1420
  }
1421
+ .courier-flex-col-reverse {
1422
+ flex-direction: column-reverse;
1423
+ }
1409
1424
  .courier-flex-wrap {
1410
1425
  flex-wrap: wrap;
1411
1426
  }
@@ -1654,6 +1669,9 @@ body {
1654
1669
  --tw-bg-opacity: 1;
1655
1670
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
1656
1671
  }
1672
+ .courier-bg-\[\#0a0a0a52\] {
1673
+ background-color: #0a0a0a52;
1674
+ }
1657
1675
  .courier-bg-\[\#3B82F6\] {
1658
1676
  --tw-bg-opacity: 1;
1659
1677
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -2172,6 +2190,9 @@ body {
2172
2190
  .courier-duration-100 {
2173
2191
  transition-duration: 100ms;
2174
2192
  }
2193
+ .courier-duration-200 {
2194
+ transition-duration: 200ms;
2195
+ }
2175
2196
  .courier-duration-300 {
2176
2197
  transition-duration: 300ms;
2177
2198
  }
@@ -2199,6 +2220,9 @@ body {
2199
2220
  .courier-duration-100 {
2200
2221
  animation-duration: 100ms;
2201
2222
  }
2223
+ .courier-duration-200 {
2224
+ animation-duration: 200ms;
2225
+ }
2202
2226
  .courier-duration-300 {
2203
2227
  animation-duration: 300ms;
2204
2228
  }
@@ -2395,34 +2419,43 @@ body {
2395
2419
  .courier-editor-main >div {
2396
2420
  width: 100%;
2397
2421
  }
2398
- .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main {
2422
+ .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main, .courier-editor-readonly.courier-editor-preview-mode-mobile .courier-editor-main {
2399
2423
  max-width: 24rem;
2400
2424
  }
2401
- .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main:hover >button {
2425
+ .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 {
2402
2426
  display: none;
2403
2427
  }
2404
- .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 * {
2428
+ .courier-editor-preview-mode .ProseMirror, .courier-editor-readonly .ProseMirror {
2405
2429
  pointer-events: none;
2406
2430
  }
2407
- .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 * {
2431
+ .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 * {
2432
+ pointer-events: none;
2433
+ }
2434
+ .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 * {
2408
2435
  cursor: default;
2409
2436
  }
2410
- .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"] {
2437
+ .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"] {
2438
+ display: none;
2439
+ }
2440
+ .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 {
2411
2441
  display: none;
2412
2442
  }
2413
- .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"] {
2443
+ .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 {
2414
2444
  display: none;
2415
2445
  }
2416
- .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 {
2446
+ .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"] {
2417
2447
  display: none;
2418
2448
  }
2419
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
2449
+ .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 {
2420
2450
  display: none;
2421
2451
  }
2422
- .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 {
2452
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
2423
2453
  display: none;
2424
2454
  }
2425
- .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 {
2455
+ .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 {
2456
+ display: none;
2457
+ }
2458
+ .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 {
2426
2459
  display: none;
2427
2460
  }
2428
2461
  .courier-sms-editor {
@@ -3349,6 +3382,18 @@ body {
3349
3382
  .data-\[side\=top\]\:courier-slide-in-from-bottom-2[data-side="top"] {
3350
3383
  --tw-enter-translate-y: 0.5rem;
3351
3384
  }
3385
+ .data-\[state\=closed\]\:courier-slide-out-to-left-1\/2[data-state="closed"] {
3386
+ --tw-exit-translate-x: -50%;
3387
+ }
3388
+ .data-\[state\=closed\]\:courier-slide-out-to-top-\[48\%\][data-state="closed"] {
3389
+ --tw-exit-translate-y: -48%;
3390
+ }
3391
+ .data-\[state\=open\]\:courier-slide-in-from-left-1\/2[data-state="open"] {
3392
+ --tw-enter-translate-x: -50%;
3393
+ }
3394
+ .data-\[state\=open\]\:courier-slide-in-from-top-\[48\%\][data-state="open"] {
3395
+ --tw-enter-translate-y: -48%;
3396
+ }
3352
3397
  .dark\:courier-border-foreground:is(.courier-dark *) {
3353
3398
  border-color: var(--foreground);
3354
3399
  }
@@ -3482,6 +3527,34 @@ body {
3482
3527
  --tw-text-opacity: 1;
3483
3528
  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
3484
3529
  }
3530
+ @media (min-width: 640px) {
3531
+
3532
+ .sm\:courier-mt-0 {
3533
+ margin-top: 0px;
3534
+ }
3535
+
3536
+ .sm\:courier-flex-row {
3537
+ flex-direction: row;
3538
+ }
3539
+
3540
+ .sm\:courier-justify-end {
3541
+ justify-content: flex-end;
3542
+ }
3543
+
3544
+ .sm\:courier-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3545
+ --tw-space-x-reverse: 0;
3546
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3547
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3548
+ }
3549
+
3550
+ .sm\:courier-rounded-lg {
3551
+ border-radius: var(--radius);
3552
+ }
3553
+
3554
+ .sm\:courier-text-left {
3555
+ text-align: left;
3556
+ }
3557
+ }
3485
3558
  @media (min-width: 768px) {
3486
3559
 
3487
3560
  .md\:courier-text-sm {
package/dist/styles.css CHANGED
@@ -884,6 +884,9 @@ body {
884
884
  .courier-invisible {
885
885
  visibility: hidden;
886
886
  }
887
+ .courier-fixed {
888
+ position: fixed;
889
+ }
887
890
  .courier-absolute {
888
891
  position: absolute;
889
892
  }
@@ -917,6 +920,9 @@ body {
917
920
  .courier-left-\[-20px\] {
918
921
  left: -20px;
919
922
  }
923
+ .courier-left-\[50\%\] {
924
+ left: 50%;
925
+ }
920
926
  .courier-right-0 {
921
927
  right: 0px;
922
928
  }
@@ -959,6 +965,9 @@ body {
959
965
  .courier-top-\[245px\] {
960
966
  top: 245px;
961
967
  }
968
+ .courier-top-\[50\%\] {
969
+ top: 50%;
970
+ }
962
971
  .courier-z-0 {
963
972
  z-index: 0;
964
973
  }
@@ -1318,6 +1327,9 @@ body {
1318
1327
  .courier-max-w-4xl {
1319
1328
  max-width: 56rem;
1320
1329
  }
1330
+ .courier-max-w-lg {
1331
+ max-width: 32rem;
1332
+ }
1321
1333
  .courier-flex-1 {
1322
1334
  flex: 1 1 0%;
1323
1335
  }
@@ -1406,6 +1418,9 @@ body {
1406
1418
  .courier-flex-col {
1407
1419
  flex-direction: column;
1408
1420
  }
1421
+ .courier-flex-col-reverse {
1422
+ flex-direction: column-reverse;
1423
+ }
1409
1424
  .courier-flex-wrap {
1410
1425
  flex-wrap: wrap;
1411
1426
  }
@@ -1654,6 +1669,9 @@ body {
1654
1669
  --tw-bg-opacity: 1;
1655
1670
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
1656
1671
  }
1672
+ .courier-bg-\[\#0a0a0a52\] {
1673
+ background-color: #0a0a0a52;
1674
+ }
1657
1675
  .courier-bg-\[\#3B82F6\] {
1658
1676
  --tw-bg-opacity: 1;
1659
1677
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -2172,6 +2190,9 @@ body {
2172
2190
  .courier-duration-100 {
2173
2191
  transition-duration: 100ms;
2174
2192
  }
2193
+ .courier-duration-200 {
2194
+ transition-duration: 200ms;
2195
+ }
2175
2196
  .courier-duration-300 {
2176
2197
  transition-duration: 300ms;
2177
2198
  }
@@ -2199,6 +2220,9 @@ body {
2199
2220
  .courier-duration-100 {
2200
2221
  animation-duration: 100ms;
2201
2222
  }
2223
+ .courier-duration-200 {
2224
+ animation-duration: 200ms;
2225
+ }
2202
2226
  .courier-duration-300 {
2203
2227
  animation-duration: 300ms;
2204
2228
  }
@@ -2395,34 +2419,43 @@ body {
2395
2419
  .courier-editor-main >div {
2396
2420
  width: 100%;
2397
2421
  }
2398
- .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main {
2422
+ .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main, .courier-editor-readonly.courier-editor-preview-mode-mobile .courier-editor-main {
2399
2423
  max-width: 24rem;
2400
2424
  }
2401
- .courier-editor-preview-mode.courier-editor-preview-mode-mobile .courier-editor-main:hover >button {
2425
+ .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 {
2402
2426
  display: none;
2403
2427
  }
2404
- .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 * {
2428
+ .courier-editor-preview-mode .ProseMirror, .courier-editor-readonly .ProseMirror {
2405
2429
  pointer-events: none;
2406
2430
  }
2407
- .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 * {
2431
+ .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 * {
2432
+ pointer-events: none;
2433
+ }
2434
+ .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 * {
2408
2435
  cursor: default;
2409
2436
  }
2410
- .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"] {
2437
+ .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"] {
2438
+ display: none;
2439
+ }
2440
+ .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 {
2411
2441
  display: none;
2412
2442
  }
2413
- .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"] {
2443
+ .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 {
2414
2444
  display: none;
2415
2445
  }
2416
- .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 {
2446
+ .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"] {
2417
2447
  display: none;
2418
2448
  }
2419
- .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
2449
+ .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 {
2420
2450
  display: none;
2421
2451
  }
2422
- .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 {
2452
+ .courier-editor-preview-mode .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image, .courier-editor-readonly .ProseMirror>.react-renderer.node-imageBlock .courier-empty-image {
2423
2453
  display: none;
2424
2454
  }
2425
- .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 {
2455
+ .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 {
2456
+ display: none;
2457
+ }
2458
+ .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 {
2426
2459
  display: none;
2427
2460
  }
2428
2461
  .courier-sms-editor {
@@ -3349,6 +3382,18 @@ body {
3349
3382
  .data-\[side\=top\]\:courier-slide-in-from-bottom-2[data-side="top"] {
3350
3383
  --tw-enter-translate-y: 0.5rem;
3351
3384
  }
3385
+ .data-\[state\=closed\]\:courier-slide-out-to-left-1\/2[data-state="closed"] {
3386
+ --tw-exit-translate-x: -50%;
3387
+ }
3388
+ .data-\[state\=closed\]\:courier-slide-out-to-top-\[48\%\][data-state="closed"] {
3389
+ --tw-exit-translate-y: -48%;
3390
+ }
3391
+ .data-\[state\=open\]\:courier-slide-in-from-left-1\/2[data-state="open"] {
3392
+ --tw-enter-translate-x: -50%;
3393
+ }
3394
+ .data-\[state\=open\]\:courier-slide-in-from-top-\[48\%\][data-state="open"] {
3395
+ --tw-enter-translate-y: -48%;
3396
+ }
3352
3397
  .dark\:courier-border-foreground:is(.courier-dark *) {
3353
3398
  border-color: var(--foreground);
3354
3399
  }
@@ -3482,6 +3527,34 @@ body {
3482
3527
  --tw-text-opacity: 1;
3483
3528
  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
3484
3529
  }
3530
+ @media (min-width: 640px) {
3531
+
3532
+ .sm\:courier-mt-0 {
3533
+ margin-top: 0px;
3534
+ }
3535
+
3536
+ .sm\:courier-flex-row {
3537
+ flex-direction: row;
3538
+ }
3539
+
3540
+ .sm\:courier-justify-end {
3541
+ justify-content: flex-end;
3542
+ }
3543
+
3544
+ .sm\:courier-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3545
+ --tw-space-x-reverse: 0;
3546
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3547
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3548
+ }
3549
+
3550
+ .sm\:courier-rounded-lg {
3551
+ border-radius: var(--radius);
3552
+ }
3553
+
3554
+ .sm\:courier-text-left {
3555
+ text-align: left;
3556
+ }
3557
+ }
3485
3558
  @media (min-width: 768px) {
3486
3559
 
3487
3560
  .md\:courier-text-sm {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trycourier/react-designer",
3
- "version": "0.0.0-canary-20250714142320",
3
+ "version": "0.0.0-canary-20250725092737",
4
4
  "description": "React-based rich text designer component",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -40,12 +40,13 @@
40
40
  "@dnd-kit/sortable": "^10.0.0",
41
41
  "@dnd-kit/utilities": "^3.2.2",
42
42
  "@hookform/resolvers": "^3.9.1",
43
+ "@radix-ui/react-alert-dialog": "^1.1.14",
43
44
  "@radix-ui/react-dropdown-menu": "^2.1.4",
44
45
  "@radix-ui/react-label": "^2.1.0",
45
46
  "@radix-ui/react-popover": "^1.1.4",
46
47
  "@radix-ui/react-separator": "^1.1.4",
47
48
  "@radix-ui/react-slider": "^1.2.3",
48
- "@radix-ui/react-slot": "^1.1.0",
49
+ "@radix-ui/react-slot": "^1.2.0",
49
50
  "@radix-ui/react-switch": "^1.1.3",
50
51
  "@radix-ui/react-tabs": "^1.1.3",
51
52
  "@radix-ui/react-toggle": "^1.1.0",