@examind/block-editor 0.1.15 → 0.1.16

package/dist/index.mjs

@@ -4473,16 +4473,22 @@ function humanReadableBytes(bytes) {
     return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;
   }
 }
-function getNumber(str) {
-  const trimmedStr = str.trim();
-  if (trimmedStr === "") {
-    return void 0;
+function getNumber(value) {
+  if (typeof value === "number") {
+    return Number.isNaN(value) ? void 0 : value;
   }
-  const num = +trimmedStr;
-  if (Number.isNaN(num)) {
-    return void 0;
+  if (typeof value === "string") {
+    const trimmedStr = value.trim();
+    if (trimmedStr === "") {
+      return void 0;
+    }
+    const num = +trimmedStr;
+    return Number.isNaN(num) ? void 0 : num;
   }
-  return num;
+  if (typeof value === "boolean") {
+    return value ? 1 : 0;
+  }
+  return void 0;
 }
 var formatNumber = (num, format) => {
   return format ? numeral(num).format(format) : autoFormatNumber(num);
@@ -17744,6 +17750,672 @@ function TypeaheadMenuPlugin() {
   );
 }
 
+// src/theme/defaultThemeVariables.ts
+var themeLight = `
+:host,
+.theme-light {
+  color-scheme: light;
+
+  --sl-color-primary-50: #f0f9ff;
+  --sl-color-primary-100: #e0f2fe;
+  --sl-color-primary-200: #bae6fd;
+  --sl-color-primary-300: #93c5fd;
+  --sl-color-primary-400: #60a5fa;
+  --sl-color-primary-500: #3b82f6;
+  --sl-color-primary-600: #2563eb;
+  --sl-color-primary-700: #1d4ed8;
+  --sl-color-primary-800: #1e40af;
+  --sl-color-primary-900: #1e3a8a;
+  --sl-color-primary-950: #172554;
+
+  --sl-color-success-50: #f0fdf4;
+  --sl-color-success-100: #dcfce7;
+  --sl-color-success-200: #bbf7d0;
+  --sl-color-success-300: #86efac;
+  --sl-color-success-400: #4ade80;
+  --sl-color-success-500: #22c55e;
+  --sl-color-success-600: #16a34a;
+  --sl-color-success-700: #15803d;
+  --sl-color-success-800: #166534;
+  --sl-color-success-900: #14532d;
+  --sl-color-success-950: #052e16;
+
+  --sl-color-warning-50: #fffbeb;
+  --sl-color-warning-100: #fef3c7;
+  --sl-color-warning-200: #fde68a;
+  --sl-color-warning-300: #fcd34d;
+  --sl-color-warning-400: #fbbf24;
+  --sl-color-warning-500: #f59e0b;
+  --sl-color-warning-600: #d97706;
+  --sl-color-warning-700: #b45309;
+  --sl-color-warning-800: #92400e;
+  --sl-color-warning-900: #78350f;
+  --sl-color-warning-950: #451a03;
+
+  --sl-color-danger-50: #fef2f2;
+  --sl-color-danger-100: #fee2e2;
+  --sl-color-danger-200: #fecaca;
+  --sl-color-danger-300: #fca5a5;
+  --sl-color-danger-400: #f87171;
+  --sl-color-danger-500: #ef4444;
+  --sl-color-danger-600: #dc2626;
+  --sl-color-danger-700: #b91c1c;
+  --sl-color-danger-800: #991b1b;
+  --sl-color-danger-900: #7f1d1d;
+  --sl-color-danger-950: #450a0a;
+
+  --sl-color-neutral-50: #fafafa;
+  --sl-color-neutral-100: #f4f4f5;
+  --sl-color-neutral-200: #e4e4e7;
+  --sl-color-neutral-300: #d4d4d8;
+  --sl-color-neutral-400: #a1a1aa;
+  --sl-color-neutral-500: #71717a;
+  --sl-color-neutral-600: #52525b;
+  --sl-color-neutral-700: #3f3f46;
+  --sl-color-neutral-800: #27272a;
+  --sl-color-neutral-900: #18181b;
+  --sl-color-neutral-950: #09090b;
+
+  --sl-color-neutral-0: #ffffff;
+  --sl-color-neutral-1000: hsl(0, 0%, 0%);
+
+  --sl-border-base: var(--be-border-base);
+  --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
+  --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
+  --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
+  --sl-border-radius-x-large: var(
+    --sl-border-base
+  );
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+
+  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
+  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
+  --sl-shadow-large: var(
+    --be-shadow-large,
+    0 2px 8px hsl(240 3.8% 46.1% / 12%)
+  );
+  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+
+  --sl-spacing-base: var(--be-spacing-base, 1rem);
+  --sl-spacing-3x-small: calc(
+    var(--sl-spacing-base) * 0.125
+  );
+  --sl-spacing-2x-small: calc(
+    var(--sl-spacing-base) * 0.25
+  );
+  --sl-spacing-1_5x-small: calc(
+    var(--sl-spacing-base) * 0.375
+  );
+  --sl-spacing-x-small: calc(
+    var(--sl-spacing-base) * 0.5
+  );
+  --sl-spacing-small: calc(
+    var(--sl-spacing-base) * 0.75
+  );
+  --sl-spacing-medium: var(--sl-spacing-base);
+  --sl-spacing-large: calc(
+    var(--sl-spacing-base) * 1.25
+  );
+  --sl-spacing-x-large: calc(
+    var(--sl-spacing-base) * 1.75
+  );
+  --sl-spacing-2x-large: calc(
+    var(--sl-spacing-base) * 2.25
+  );
+  --sl-spacing-3x-large: calc(
+    var(--sl-spacing-base) * 3
+  );
+  --sl-spacing-4x-large: calc(
+    var(--sl-spacing-base) * 4.5
+  );
+  --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
+
+  --indent-size: var(--sl-spacing-large);
+
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+
+  --sl-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    monospace;
+  --sl-font-sans: var(
+    --be-font-sans,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+  );
+  --sl-font-serif: var(
+    --be-font-serif,
+    Georgia,
+    'Times New Roman',
+    serif
+  );
+
+  --sl-font-size-base: var(--be-font-size-base, 1rem);
+  --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
+  --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
+  --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
+  --sl-font-size-medium: var(--sl-font-size-base);
+  --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
+  --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
+  --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
+  --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
+  --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
+
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 700;
+
+  --sl-letter-spacing-denser: -0.03em;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-letter-spacing-looser: 0.15em;
+
+  --sl-line-height-base: 1;
+  --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
+  --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
+  --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
+  --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
+  --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
+  --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
+  --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
+
+  --sl-focus-ring-color: var(--sl-color-primary-600);
+  --sl-focus-ring-style: solid;
+  --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
+  --sl-focus-ring: var(--sl-focus-ring-style)
+    var(--sl-focus-ring-width) var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
+
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+
+  --sl-input-height-base: 1rem;
+  --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
+  --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
+  --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
+
+  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color-hover: var(--sl-input-background-color);
+  --sl-input-background-color-focus: var(--sl-input-background-color);
+  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-border-color-hover: var(--sl-color-neutral-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-width: 1px;
+  --sl-input-required-content: '*';
+  --sl-input-required-content-offset: -2px;
+  --sl-input-required-content-color: var(--sl-input-label-color);
+
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color-hover: var(--sl-color-neutral-700);
+  --sl-input-color-focus: var(--sl-color-neutral-700);
+  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-icon-color: var(--sl-color-neutral-400);
+  --sl-input-icon-color-hover: var(--sl-color-neutral-500);
+  --sl-input-icon-color-focus: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color: var(--sl-color-neutral-400);
+  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
+  --sl-input-filled-background-color: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-hover: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-focus: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-disabled: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-color: var(--sl-color-neutral-800);
+  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+  --sl-toggle-size-small: 0.875rem;
+  --sl-toggle-size-medium: 1.125rem;
+  --sl-toggle-size-large: 1.375rem;
+
+  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
+
+  --sl-panel-background-color: var(--sl-color-neutral-0);
+  --sl-panel-border-color: var(--sl-color-neutral-300);
+  --sl-panel-border-width: 1px;
+
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-neutral-800);
+  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-2x-small)
+    var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 6px;
+
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+
+  --td-footer-background-color: #09090b;
+  --td-footer-color: #e4e4e7;
+
+  --td-code-block-toolbar-cell-background-color: #e2e8f0;
+  --td-code-block-highlighted-background-color: #dbeafe;
+
+  --td-card-color: 'inherit';
+  --td-card-background-color: var(--sl-color-neutral-0);
+  --td-card-background-hover-color: var(--sl-color-neutral-50);
+  --td-card-border-color: rgba(24, 24, 27, 0.08);
+  --td-card-box-shadow-1: rgba(24, 24, 27, 0.02);
+  --td-card-box-shadow-1-y: 3px;
+  --td-card-box-shadow-1-blur: 6px;
+  --td-card-box-shadow-2: rgba(24, 24, 27, 0.04);
+  --td-card-box-shadow-2-y: 2px;
+  --td-card-box-shadow-2-blur: 7px;
+
+  --td-card-hover-border-color: rgba(24, 24, 27, 0.15);
+  --td-card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
+  --td-card-hover-box-shadow-1-y: 3px;
+  --td-card-hover-box-shadow-1-blur: 6px;
+  --td-card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
+  --td-card-hover-box-shadow-2-y: 8px;
+  --td-card-hover-box-shadow-2-blur: 15px;
+
+  --td-body-gradient-line-color: #ffffff;
+
+  --td-editor-text-color-blue: hsl(221, 100%, 50%);
+  --td-editor-text-color-purple: hsl(291, 100%, 39%);
+  --td-editor-text-color-red: hsl(4, 100%, 40%);
+  --td-editor-text-color-green: hsl(122, 100%, 23%);
+
+  --td-editor-bg-color-blue: hsl(221, 100%, 50%, 0.1);
+  --td-editor-bg-color-purple: hsl(291, 100%, 39%, 0.1);
+  --td-editor-bg-color-red: hsl(4, 100%, 40%, 0.1);
+  --td-editor-bg-color-green: hsl(122, 100%, 23%, 0.1);
+}
+`;
+var themeDark = `
+:host,
+.theme-dark {
+  color-scheme: dark;
+
+  --sl-color-primary-950: #f0f9ff;
+  --sl-color-primary-900: #e0f2fe;
+  --sl-color-primary-800: #bae6fd;
+  --sl-color-primary-700: #93c5fd;
+  --sl-color-primary-600: #60a5fa;
+  --sl-color-primary-500: #3b82f6;
+  --sl-color-primary-400: #2563eb;
+  --sl-color-primary-300: #1d4ed8;
+  --sl-color-primary-200: #1e40af;
+  --sl-color-primary-100: #1e3a8a;
+  --sl-color-primary-50: #172554;
+
+  --sl-color-success-950: #f0fdf4;
+  --sl-color-success-900: #dcfce7;
+  --sl-color-success-800: #bbf7d0;
+  --sl-color-success-700: #86efac;
+  --sl-color-success-600: #4ade80;
+  --sl-color-success-500: #22c55e;
+  --sl-color-success-400: #16a34a;
+  --sl-color-success-300: #15803d;
+  --sl-color-success-200: #166534;
+  --sl-color-success-100: #14532d;
+  --sl-color-success-50: #052e16;
+
+  --sl-color-warning-950: #fffbeb;
+  --sl-color-warning-900: #fef3c7;
+  --sl-color-warning-800: #fde68a;
+  --sl-color-warning-700: #fcd34d;
+  --sl-color-warning-600: #fbbf24;
+  --sl-color-warning-500: #f59e0b;
+  --sl-color-warning-400: #d97706;
+  --sl-color-warning-300: #b45309;
+  --sl-color-warning-200: #92400e;
+  --sl-color-warning-100: #78350f;
+  --sl-color-warning-50: #451a03;
+
+  --sl-color-danger-950: #fef2f2;
+  --sl-color-danger-900: #fee2e2;
+  --sl-color-danger-800: #fecaca;
+  --sl-color-danger-700: #fca5a5;
+  --sl-color-danger-600: #f87171;
+  --sl-color-danger-500: #ef4444;
+  --sl-color-danger-400: #dc2626;
+  --sl-color-danger-300: #b91c1c;
+  --sl-color-danger-200: #991b1b;
+  --sl-color-danger-100: #7f1d1d;
+  --sl-color-danger-50: #450a0a;
+
+  --sl-color-neutral-950: #fafafa;
+  --sl-color-neutral-900: #f4f4f5;
+  --sl-color-neutral-800: #e4e4e7;
+  --sl-color-neutral-700: #d4d4d8;
+  --sl-color-neutral-600: #a1a1aa;
+  --sl-color-neutral-500: #71717a;
+
+  --sl-color-neutral-400: #71717a;
+  --sl-color-neutral-300: #52525b;
+  --sl-color-neutral-200: #3f3f46;
+  --sl-color-neutral-100: #27272a;
+  --sl-color-neutral-50: #18181b;
+  --sl-color-neutral-0: #09090b;
+  --sl-color-neutral-1000: hsl(0, 0%, 100%);
+
+  --sl-border-base: var(--be-border-base);
+  --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
+  --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
+  --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
+  --sl-border-radius-x-large: var(
+    --sl-border-base
+  );
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+
+  --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
+  --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
+  --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
+  --sl-shadow-large: var(
+    --be-shadow-large,
+    0 2px 8px rgb(0 0 0 / 24%)
+  );
+  --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
+
+  --sl-spacing-base: var(--be-spacing-base, 1rem);
+  --sl-spacing-3x-small: calc(
+    var(--sl-spacing-base) * 0.125
+  );
+  --sl-spacing-2x-small: calc(
+    var(--sl-spacing-base) * 0.25
+  );
+  --sl-spacing-1_5x-small: calc(
+    var(--sl-spacing-base) * 0.375
+  );
+  --sl-spacing-x-small: calc(
+    var(--sl-spacing-base) * 0.5
+  );
+  --sl-spacing-small: calc(
+    var(--sl-spacing-base) * 0.75
+  );
+  --sl-spacing-medium: var(--sl-spacing-base);
+  --sl-spacing-large: calc(
+    var(--sl-spacing-base) * 1.25
+  );
+  --sl-spacing-x-large: calc(
+    var(--sl-spacing-base) * 1.75
+  );
+  --sl-spacing-2x-large: calc(
+    var(--sl-spacing-base) * 2.25
+  );
+  --sl-spacing-3x-large: calc(
+    var(--sl-spacing-base) * 3
+  );
+  --sl-spacing-4x-large: calc(
+    var(--sl-spacing-base) * 4.5
+  );
+  --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
+
+  --indent-size: var(--sl-spacing-large);
+
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+
+  --sl-font-mono: var(
+    --be-font-mono,
+    SFMono-Regular,
+    Consolas,
+    'Liberation Mono',
+    Menlo,
+    monospace
+  );
+  --sl-font-sans: var(
+    --be-font-sans,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol'
+  );
+  --sl-font-serif: var(
+    --be-font-serif,
+    Georgia,
+    'Times New Roman',
+    serif
+  );
+
+  --sl-font-size-base: var(--be-font-size-base, 1rem);
+  --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
+  --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
+  --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
+  --sl-font-size-medium: var(--sl-font-size-base);
+  --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
+  --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
+  --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
+  --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
+  --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
+
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 700;
+
+  --sl-letter-spacing-denser: -0.03em;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-letter-spacing-looser: 0.15em;
+
+  --sl-line-height-base: 1;
+  --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
+  --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
+  --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
+  --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
+  --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
+  --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
+  --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
+
+  --sl-focus-ring-color: var(--sl-color-primary-700);
+  --sl-focus-ring-style: solid;
+  --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
+  --sl-focus-ring: var(--sl-focus-ring-style)
+    var(--sl-focus-ring-width) var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
+
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+
+  --sl-input-height-base: 1rem;
+  --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
+  --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
+  --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
+
+  --sl-input-background-color: var(--sl-color-neutral-0);
+  --sl-input-background-color-hover: var(--sl-input-background-color);
+  --sl-input-background-color-focus: var(--sl-input-background-color);
+  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-input-border-color: var(--sl-color-neutral-300);
+  --sl-input-border-color-hover: var(--sl-color-neutral-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-input-border-width: 1px;
+  --sl-input-required-content: '*';
+  --sl-input-required-content-offset: -2px;
+  --sl-input-required-content-color: var(--sl-input-label-color);
+
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+
+  --sl-input-color: var(--sl-color-neutral-700);
+  --sl-input-color-hover: var(--sl-color-neutral-700);
+  --sl-input-color-focus: var(--sl-color-neutral-700);
+  --sl-input-color-disabled: var(--sl-color-neutral-900);
+  --sl-input-icon-color: var(--sl-color-neutral-400);
+  --sl-input-icon-color-hover: var(--sl-color-neutral-500);
+  --sl-input-icon-color-focus: var(--sl-color-neutral-500);
+  --sl-input-placeholder-color: var(--sl-color-neutral-400);
+  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
+  --sl-input-filled-background-color: var(--sl-color-neutral-100);
+  --sl-input-filled-background-color-hover: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-focus: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-background-color-disabled: var(
+    --sl-color-neutral-100
+  );
+  --sl-input-filled-color: var(--sl-color-neutral-800);
+  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-neutral-500);
+
+  --sl-toggle-size-small: 0.875rem;
+  --sl-toggle-size-medium: 1.125rem;
+  --sl-toggle-size-large: 1.375rem;
+
+  --sl-overlay-background-color: hsla(0, 0%, 100%, 0.05);
+
+  --sl-panel-background-color: var(--sl-color-neutral-0);
+  --sl-panel-border-color: var(--sl-color-neutral-300);
+  --sl-panel-border-width: 1px;
+
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-neutral-800);
+  --sl-tooltip-color: var(--sl-color-neutral-0);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-2x-small)
+    var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 6px;
+
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+
+  --td-footer-background-color: #09090b;
+  --td-footer-color: #e4e4e7;
+
+  --td-code-block-toolbar-cell-background-color: #09090b;
+  --td-code-block-highlighted-background-color: #1e293b;
+
+  --td-card-color: 'inherit';
+  --td-card-background-color: var(--sl-color-neutral-0);
+  --td-card-background-hover-color: var(--sl-color-neutral-50);
+  --td-card-border-color: rgba(255, 255, 255, 0.1);
+  --td-card-box-shadow-1: rgba(0, 0, 0, 0.05);
+  --td-card-box-shadow-1-y: 3px;
+  --td-card-box-shadow-1-blur: 6px;
+  --td-card-box-shadow-2: rgba(0, 0, 0, 0.1);
+  --td-card-box-shadow-2-y: 8px;
+  --td-card-box-shadow-2-blur: 15px;
+
+  --td-card-hover-border-color: rgba(255, 255, 255, 0.2);
+  --td-card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
+  --td-card-hover-box-shadow-1-y: 5px;
+  --td-card-hover-box-shadow-1-blur: 10px;
+  --td-card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
+  --td-card-hover-box-shadow-2-y: 15px;
+  --td-card-hover-box-shadow-2-blur: 25px;
+
+  --td-body-gradient-line-color: #27272a47;
+
+  --td-editor-text-color-blue: hsl(221, 100%, 70%);
+  --td-editor-text-color-purple: hsl(291, 100%, 65%);
+  --td-editor-text-color-red: hsl(4, 100%, 63%);
+  --td-editor-text-color-green: hsl(122, 100%, 34%);
+
+  --td-editor-bg-color-blue: hsl(221, 100%, 70%, 0.2);
+  --td-editor-bg-color-purple: hsl(291, 100%, 65%, 0.2);
+  --td-editor-bg-color-red: hsl(4, 100%, 63%, 0.2);
+  --td-editor-bg-color-green: hsl(122, 100%, 34%, 0.2);
+}
+`;
+
 // src/theme/ThemeProvider.tsx
 import {
   createContext as createContext2,
@@ -17752,21 +18424,37 @@ import {
   useRef as useRef57,
   useState as useState19
 } from "react";
-import { jsx as jsx117 } from "react/jsx-runtime";
-var themeVariablesMap = {
+
+// src/theme/constants.ts
+var themeSettingsMap = {
   borderBase: "--be-border-base",
   fontSans: "--be-font-sans",
   fontSerif: "--be-font-serif",
   fontMono: "--be-font-mono",
   spacingBase: "--be-spacing-base",
-  fontSizeBase: "--be-font-size-base"
+  fontSizeBase: "--be-font-size-base",
+  focusRingWidth: "--be-focus-ring-width",
+  shadowLarge: "--be-shadow-large"
+};
+var defaultThemeSettings = {
+  borderBase: "1rem",
+  fontSans: "'Inter', sans-serif",
+  fontSerif: "Georgia, 'Times New Roman', serif",
+  fontMono: "Menlo, Monaco, 'Courier New', monospace",
+  focusRingWidth: "1px",
+  shadowLarge: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+  spacingBase: "1rem",
+  fontSizeBase: "1rem"
 };
+
+// src/theme/ThemeProvider.tsx
+import { jsx as jsx117, jsxs as jsxs43 } from "react/jsx-runtime";
 var ThemeContext = createContext2(
   void 0
 );
 function ThemeProvider({
   theme,
-  themeVariables = {},
+  themeSettings = {},
   children
 }) {
   const rootElementRef = useRef57(null);
@@ -17793,20 +18481,33 @@ function ThemeProvider({
     );
     rootElementRef.current?.classList.add(`theme-${effectiveTheme}`);
   }, [effectiveTheme]);
-  return /* @__PURE__ */ jsx117(ThemeContext.Provider, { value: { theme, effectiveTheme }, children: /* @__PURE__ */ jsx117(
-    "div",
+  return /* @__PURE__ */ jsx117(ThemeContext.Provider, { value: { theme, effectiveTheme }, children: /* @__PURE__ */ jsxs43(
+    "article",
     {
       ref: rootElementRef,
-      className: "theme-settings",
+      className: "be-article",
       style: {
         ...Object.fromEntries(
-          Object.entries(themeVariables).map(([key, value]) => [
-            themeVariablesMap[key],
+          Object.entries({
+            ...defaultThemeSettings,
+            themeSettings
+          }).map(([key, value]) => [
+            themeSettingsMap[key],
             value
           ])
         )
       },
-      children
+      children: [
+        /* @__PURE__ */ jsx117(
+          "style",
+          {
+            dangerouslySetInnerHTML: {
+              __html: effectiveTheme === "light" ? themeLight : themeDark
+            }
+          }
+        ),
+        children
+      ]
     }
   ) });
 }
@@ -17826,16 +18527,16 @@ import React24, {
   useRef as useRef58,
   useState as useState20
 } from "react";
-import { jsx as jsx118, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
 var TOGGLE_EDITING_MODE = "TOGGLE_EDITING_MODE";
 var RESET_EDITING_MODE = "RESET_EDITING_MODE";
 var BlockEditorContext = React24.createContext(null);
 function BlockEditor(props) {
   const {
-    themeSettings,
     editable = true,
     editorState,
     theme,
+    themeSettings,
     onChange,
     children,
     renderSettings
@@ -17851,9 +18552,6 @@ function BlockEditor(props) {
   const drawerRef = useRef58(null);
   const [isBlockEditorReady, setBlockEditorReady] = useState20(false);
   const { historyState } = useSharedHistoryContext();
-  const [blockEditorStyleVars, setBlockEditorStyleVars] = useState20({
-    "--be-ol-list-style-type": "decimal"
-  });
   const handleChange = useCallback11(
     (editorState2, _editor, tags) => {
       if (onChange && !tags?.has("new_state") && !tags?.has("history-merge")) {
@@ -17999,83 +18697,63 @@ function BlockEditor(props) {
         },
         drawer: drawerRef.current,
         isBlockEditorReady,
-        blockEditorStyleVars,
-        setBlockEditorStyleVars: (value) => {
-          setBlockEditorStyleVars({
-            ...blockEditorStyleVars,
-            ...value
-          });
-        },
         renderSettings: renderSettings ? renderSettings : () => /* @__PURE__ */ jsx118("div", {})
       },
-      children: /* @__PURE__ */ jsx118(ThemeProvider, { theme, themeVariables: themeSettings, children: /* @__PURE__ */ jsx118(ResizeObserver, { children: /* @__PURE__ */ jsx118(
-        "article",
-        {
-          className: "be-article",
-          style: { ...blockEditorStyleVars },
-          children: /* @__PURE__ */ jsx118(SharedHistoryContext, { children: /* @__PURE__ */ jsxs43(NodeProvider, { children: [
-            /* @__PURE__ */ jsx118(
-              "main",
-              {
-                className: `${settingsPanelSwitch === "on" ? "narrow" : ""}`,
-                children: /* @__PURE__ */ jsxs43(
-                  LexicalComposer,
-                  {
-                    initialConfig: { ...initialConfig },
-                    children: [
-                      /* @__PURE__ */ jsx118(
-                        EditorRefPlugin,
-                        {
-                          onMountRef: (editor) => editorRef.current = editor
-                        }
-                      ),
-                      /* @__PURE__ */ jsx118(AutoFocusPlugin, {}),
-                      /* @__PURE__ */ jsx118(AutoBottomParagraphPlugin, {}),
-                      /* @__PURE__ */ jsx118(
-                        HistoryPlugin9,
-                        {
-                          externalHistoryState: historyState
-                        }
-                      ),
-                      /* @__PURE__ */ jsx118(
-                        OnChangePlugin,
-                        {
-                          onChange: handleChange,
-                          ignoreSelectionChange: true
-                        }
-                      ),
-                      /* @__PURE__ */ jsx118(OnNestedChangePlugin, { onChange: handleChange }),
-                      /* @__PURE__ */ jsx118(
-                        RichTextPlugin7,
-                        {
-                          contentEditable: /* @__PURE__ */ jsx118(ContentEditable, {}),
-                          placeholder: null,
-                          ErrorBoundary: LexicalErrorBoundary9
-                        }
-                      ),
-                      /* @__PURE__ */ jsx118(NodePastePlugin, {}),
-                      /* @__PURE__ */ jsx118(ListPlugin2, {}),
-                      /* @__PURE__ */ jsx118(ListLevelLimitPlugin, {}),
-                      /* @__PURE__ */ jsx118(TabIndentationPlugin2, {}),
-                      children,
-                      /* @__PURE__ */ jsx118(TypeaheadMenuPlugin, {}),
-                      /* @__PURE__ */ jsx118(TypeaheadMenuAgentPlugin, {}),
-                      /* @__PURE__ */ jsx118(NodeMouseAnchorPlugin, {}),
-                      /* @__PURE__ */ jsx118(NodeMousePlugin, {}),
-                      /* @__PURE__ */ jsx118(TextToolbarPlugin, {}),
-                      /* @__PURE__ */ jsx118(TextToolbarAgentPlugin, {}),
-                      /* @__PURE__ */ jsx118(TypeaheadVariableAgentPlugin, {}),
-                      /* @__PURE__ */ jsx118(VariableComponentPlugin, {}),
-                      /* @__PURE__ */ jsx118(MarkdownPlugin, {})
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx118(Drawer, { ref: drawerRef })
-          ] }) })
-        }
-      ) }) })
+      children: /* @__PURE__ */ jsx118(ResizeObserver, { children: /* @__PURE__ */ jsx118(ThemeProvider, { theme, themeSettings, children: /* @__PURE__ */ jsx118(SharedHistoryContext, { children: /* @__PURE__ */ jsxs44(NodeProvider, { children: [
+        /* @__PURE__ */ jsx118(
+          "main",
+          {
+            className: `${settingsPanelSwitch === "on" ? "narrow" : ""}`,
+            children: /* @__PURE__ */ jsxs44(LexicalComposer, { initialConfig: { ...initialConfig }, children: [
+              /* @__PURE__ */ jsx118(
+                EditorRefPlugin,
+                {
+                  onMountRef: (editor) => editorRef.current = editor
+                }
+              ),
+              /* @__PURE__ */ jsx118(AutoFocusPlugin, {}),
+              /* @__PURE__ */ jsx118(AutoBottomParagraphPlugin, {}),
+              /* @__PURE__ */ jsx118(
+                HistoryPlugin9,
+                {
+                  externalHistoryState: historyState
+                }
+              ),
+              /* @__PURE__ */ jsx118(
+                OnChangePlugin,
+                {
+                  onChange: handleChange,
+                  ignoreSelectionChange: true
+                }
+              ),
+              /* @__PURE__ */ jsx118(OnNestedChangePlugin, { onChange: handleChange }),
+              /* @__PURE__ */ jsx118(
+                RichTextPlugin7,
+                {
+                  contentEditable: /* @__PURE__ */ jsx118(ContentEditable, {}),
+                  placeholder: null,
+                  ErrorBoundary: LexicalErrorBoundary9
+                }
+              ),
+              /* @__PURE__ */ jsx118(NodePastePlugin, {}),
+              /* @__PURE__ */ jsx118(ListPlugin2, {}),
+              /* @__PURE__ */ jsx118(ListLevelLimitPlugin, {}),
+              /* @__PURE__ */ jsx118(TabIndentationPlugin2, {}),
+              children,
+              /* @__PURE__ */ jsx118(TypeaheadMenuPlugin, {}),
+              /* @__PURE__ */ jsx118(TypeaheadMenuAgentPlugin, {}),
+              /* @__PURE__ */ jsx118(NodeMouseAnchorPlugin, {}),
+              /* @__PURE__ */ jsx118(NodeMousePlugin, {}),
+              /* @__PURE__ */ jsx118(TextToolbarPlugin, {}),
+              /* @__PURE__ */ jsx118(TextToolbarAgentPlugin, {}),
+              /* @__PURE__ */ jsx118(TypeaheadVariableAgentPlugin, {}),
+              /* @__PURE__ */ jsx118(VariableComponentPlugin, {}),
+              /* @__PURE__ */ jsx118(MarkdownPlugin, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx118(Drawer, { ref: drawerRef })
+      ] }) }) }) })
     }
   );
 }
@@ -18089,24 +18767,31 @@ var useBlockEditor = () => {
   return context;
 };
 
+// src/BlockEditorStyle.tsx
+import { jsx as jsx119 } from "react/jsx-runtime";
+function BlockEditorStyle(props) {
+  const { children, theme, themeSettings } = props;
+  return /* @__PURE__ */ jsx119(ThemeProvider, { theme, themeSettings, children });
+}
+
 // src/modules/Callout.tsx
 import { useEffect as useEffect83 } from "react";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 function Callout() {
   const { registerModule } = useBlockEditor();
   useEffect83(() => {
     registerModule("Callout");
   }, [registerModule]);
-  return /* @__PURE__ */ jsx119(CalloutBoxPlugin, {});
+  return /* @__PURE__ */ jsx120(CalloutBoxPlugin, {});
 }
 
 // src/plugins/TreeViewPlugin/index.tsx
 import { useLexicalComposerContext as useLexicalComposerContext64 } from "@lexical/react/LexicalComposerContext";
 import { TreeView } from "@lexical/react/LexicalTreeView";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 function TreeViewPlugin() {
   const [editor] = useLexicalComposerContext64();
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(
     TreeView,
     {
       viewClassName: "tree-view-output",
@@ -18122,25 +18807,25 @@ function TreeViewPlugin() {
 
 // src/modules/Debug.tsx
 import { useEffect as useEffect84 } from "react";
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 function Debug() {
   const { registerModule } = useBlockEditor();
   useEffect84(() => {
     registerModule("Debug");
   }, [registerModule]);
-  return /* @__PURE__ */ jsx121(TreeViewPlugin, {});
+  return /* @__PURE__ */ jsx122(TreeViewPlugin, {});
 }
 
 // src/modules/Image.tsx
 import { useEffect as useEffect85 } from "react";
-import { Fragment as Fragment46, jsx as jsx122 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx123 } from "react/jsx-runtime";
 function Image(props) {
   const { imageSettings } = props;
   const { registerModule } = useBlockEditor();
   useEffect85(() => {
     registerModule("Image");
   }, [registerModule]);
-  return /* @__PURE__ */ jsx122(Fragment46, { children: /* @__PURE__ */ jsx122(ImagePlugin, { imageSettings }) });
+  return /* @__PURE__ */ jsx123(Fragment46, { children: /* @__PURE__ */ jsx123(ImagePlugin, { imageSettings }) });
 }
 
 // src/plugins/LinkToolbarPlugin/LinkToolbarPlugin.tsx
@@ -18161,7 +18846,7 @@ import {
 import debounce6 from "lodash-es/debounce";
 import { Pencil, Trash2 as Trash24, X } from "lucide-react";
 import { useCallback as useCallback12, useEffect as useEffect86, useRef as useRef59, useState as useState21 } from "react";
-import { jsx as jsx123, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs45 } from "react/jsx-runtime";
 function LinkToolbarPlugin() {
   const [editor] = useLexicalComposerContext65();
   const popupToolbarRef = useRef59(null);
@@ -18271,12 +18956,12 @@ function LinkToolbarPlugin() {
   }, [editor]);
   const linkUrl = linkNode?.linkUrl;
   const linkTitle = linkNode?.linkUrl;
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx124(
     PopupToolbar,
     {
       ref: popupToolbarRef,
       onEscape: handleClose,
-      toolbar: /* @__PURE__ */ jsxs44(
+      toolbar: /* @__PURE__ */ jsxs45(
         "div",
         {
           style: {
@@ -18289,23 +18974,23 @@ function LinkToolbarPlugin() {
             padding: "var(--sl-spacing-2x-small) var(--sl-spacing-x-small) var(--sl-spacing-2x-small) var(--sl-spacing-medium)"
           },
           children: [
-            /* @__PURE__ */ jsx123("div", { children: /* @__PURE__ */ jsx123("a", { href: linkUrl, target: linkNode?.linkTarget || "", children: /* @__PURE__ */ jsx123(
+            /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124("a", { href: linkUrl, target: linkNode?.linkTarget || "", children: /* @__PURE__ */ jsx124(
               "sl-tooltip",
               {
                 style: { "--show-delay": "1800" },
                 hoist: true,
                 content: linkUrl || "[Empty URL]",
-                children: /* @__PURE__ */ jsx123("span", { className: "line-short-20", children: linkTitle })
+                children: /* @__PURE__ */ jsx124("span", { className: "line-short-20", children: linkTitle })
               }
             ) }) }),
-            /* @__PURE__ */ jsxs44(Stack, { className: "stack__row", children: [
-              /* @__PURE__ */ jsx123("div", { children: /* @__PURE__ */ jsx123(
+            /* @__PURE__ */ jsxs45(Stack, { className: "stack__row", children: [
+              /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124(
                 "sl-tooltip",
                 {
                   style: { "--show-delay": "1800" },
                   hoist: "hoist",
                   content: "Edit Link",
-                  children: /* @__PURE__ */ jsx123(
+                  children: /* @__PURE__ */ jsx124(
                     Button,
                     {
                       size: "small",
@@ -18344,13 +19029,13 @@ function LinkToolbarPlugin() {
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx123("div", { children: /* @__PURE__ */ jsx123(
+              /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124(
                 "sl-tooltip",
                 {
                   style: { "--show-delay": "1800" },
                   hoist: "hoist",
                   content: "Remove Link",
-                  children: /* @__PURE__ */ jsx123(
+                  children: /* @__PURE__ */ jsx124(
                     Button,
                     {
                       size: "small",
@@ -18385,13 +19070,13 @@ function LinkToolbarPlugin() {
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx123("div", { children: /* @__PURE__ */ jsx123(
+              /* @__PURE__ */ jsx124("div", { children: /* @__PURE__ */ jsx124(
                 "sl-tooltip",
                 {
                   style: { "--show-delay": "1800" },
                   hoist: "hoist",
                   content: "Close",
-                  children: /* @__PURE__ */ jsx123(
+                  children: /* @__PURE__ */ jsx124(
                     Button,
                     {
                       size: "small",
@@ -18414,15 +19099,15 @@ function LinkToolbarPlugin() {
 
 // src/modules/Link.tsx
 import { useEffect as useEffect87 } from "react";
-import { Fragment as Fragment47, jsx as jsx124, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment47, jsx as jsx125, jsxs as jsxs46 } from "react/jsx-runtime";
 function Link() {
   const { registerModule } = useBlockEditor();
   useEffect87(() => {
     registerModule("Link");
   }, [registerModule]);
-  return /* @__PURE__ */ jsxs45(Fragment47, { children: [
-    /* @__PURE__ */ jsx124(LinkEditorPlugin, {}),
-    /* @__PURE__ */ jsx124(LinkToolbarPlugin, {})
+  return /* @__PURE__ */ jsxs46(Fragment47, { children: [
+    /* @__PURE__ */ jsx125(LinkEditorPlugin, {}),
+    /* @__PURE__ */ jsx125(LinkToolbarPlugin, {})
   ] });
 }
 
@@ -18437,7 +19122,7 @@ import {
   createCommand as createCommand20
 } from "lexical";
 import { useEffect as useEffect88 } from "react";
-import { Fragment as Fragment48, jsx as jsx125 } from "react/jsx-runtime";
+import { Fragment as Fragment48, jsx as jsx126 } from "react/jsx-runtime";
 var INSERT_ESSAY_QUESTION_COMMAND = createCommand20("INSERT_ESSAY_QUESTION_COMMAND");
 function EssayQuestionPlugin() {
   const [editor] = useLexicalComposerContext66();
@@ -18475,7 +19160,7 @@ function EssayQuestionPlugin() {
       )
     );
   }, [editor]);
-  return /* @__PURE__ */ jsx125(Fragment48, {});
+  return /* @__PURE__ */ jsx126(Fragment48, {});
 }
 
 // src/plugins/FinancialStatementQuestionPlugin/FinancialStatementQuestionSettings.tsx
@@ -18503,7 +19188,7 @@ function validatePointsInput6(input) {
 }
 
 // src/plugins/FinancialStatementQuestionPlugin/FinancialStatementQuestionSettings.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 function FinancialStatementQuestionSettings(props) {
   const { nodeKey } = props;
   const [editor] = useLexicalComposerContext67();
@@ -18522,7 +19207,7 @@ function FinancialStatementQuestionSettings(props) {
   if (!foundNode) {
     return null;
   }
-  return /* @__PURE__ */ jsx126("div", { children: /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx127("div", { children: /* @__PURE__ */ jsx127(
     TextInput,
     {
       ref: pointsTextInputRef,
@@ -18565,7 +19250,7 @@ import {
   createEditor as createEditor9
 } from "lexical";
 import { useEffect as useEffect90, useRef as useRef61 } from "react";
-import { Fragment as Fragment49, jsx as jsx127, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx128, jsxs as jsxs47 } from "react/jsx-runtime";
 var INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND = createCommand21("INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND");
 function FinancialStatementQuestionPlugin() {
   const {
@@ -18630,21 +19315,21 @@ function FinancialStatementQuestionPlugin() {
       }
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsxs46(Fragment49, { children: [
-    drawer && /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsxs47(Fragment49, { children: [
+    drawer && /* @__PURE__ */ jsx128(
       StickyToPosition,
       {
         ref: settingsPanelStickyRef,
         container: drawer,
         children: (data, position, isVisible) => {
-          return /* @__PURE__ */ jsx127("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx127(
+          return /* @__PURE__ */ jsx128("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx128(
             SettingsCard,
             {
               isVisible: !!isVisible,
               container: drawer,
               title: "Financial Statement Settings",
               onClose: toggleSettingsPanelSwitch,
-              children: isVisible && /* @__PURE__ */ jsx127(
+              children: isVisible && /* @__PURE__ */ jsx128(
                 FinancialStatementQuestionSettings,
                 {
                   nodeKey: data.nodeKey
@@ -18656,32 +19341,32 @@ function FinancialStatementQuestionPlugin() {
         }
       }
     ),
-    /* @__PURE__ */ jsx127(FillInTheBlankSpaceSettingsPlugin, {})
+    /* @__PURE__ */ jsx128(FillInTheBlankSpaceSettingsPlugin, {})
   ] });
 }
 
 // src/modules/Questions.tsx
 import { useEffect as useEffect91 } from "react";
-import { Fragment as Fragment50, jsx as jsx128, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx129, jsxs as jsxs48 } from "react/jsx-runtime";
 function Questions() {
   const { registerModule } = useBlockEditor();
   useEffect91(() => {
     registerModule("Questions");
   }, [registerModule]);
-  return /* @__PURE__ */ jsxs47(Fragment50, { children: [
-    /* @__PURE__ */ jsx128(MultipleOptionQuestionPlugin, {}),
-    /* @__PURE__ */ jsx128(ShortAnswerQuestionPlugin, {}),
-    /* @__PURE__ */ jsx128(MatchingQuestionPlugin, {}),
-    /* @__PURE__ */ jsx128(FillInTheBlankQuestionPlugin, {}),
-    /* @__PURE__ */ jsx128(JournalEntryQuestionPlugin, {}),
-    /* @__PURE__ */ jsx128(FinancialStatementQuestionPlugin, {}),
-    /* @__PURE__ */ jsx128(EssayQuestionPlugin, {})
+  return /* @__PURE__ */ jsxs48(Fragment50, { children: [
+    /* @__PURE__ */ jsx129(MultipleOptionQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(ShortAnswerQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(MatchingQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(FillInTheBlankQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(JournalEntryQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(FinancialStatementQuestionPlugin, {}),
+    /* @__PURE__ */ jsx129(EssayQuestionPlugin, {})
   ] });
 }
 
 // src/modules/SettingsPanel.tsx
 import { useEffect as useEffect92 } from "react";
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
 function SettingsPanel(props) {
   const { defaultOpen = true } = props;
   const { registerModule, openSettingsPanel } = useBlockEditor();
@@ -18693,7 +19378,7 @@ function SettingsPanel(props) {
       }
     }, 50);
   }, [registerModule, defaultOpen, openSettingsPanel]);
-  return /* @__PURE__ */ jsx129(SettingsPanelPlugin, {});
+  return /* @__PURE__ */ jsx130(SettingsPanelPlugin, {});
 }
 
 // src/plugins/VariablesPlugin/VariableSettingsPlugin.tsx
@@ -18712,7 +19397,7 @@ import {
   useRef as useRef62,
   useState as useState23
 } from "react";
-import { Fragment as Fragment51, jsx as jsx130, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx131, jsxs as jsxs49 } from "react/jsx-runtime";
 var controlGridStyle = {
   width: "100%",
   display: "flex",
@@ -18934,8 +19619,8 @@ function VariableSettings(props) {
   if (!currentVariableNode) {
     return null;
   }
-  return /* @__PURE__ */ jsxs48(Fragment51, { children: [
-    /* @__PURE__ */ jsx130("div", { style: formFieldStyle, children: /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsxs49(Fragment51, { children: [
+    /* @__PURE__ */ jsx131("div", { style: formFieldStyle, children: /* @__PURE__ */ jsx131(
       Button,
       {
         className: "button__fullwidth",
@@ -18954,10 +19639,10 @@ function VariableSettings(props) {
         variant: "default"
       }
     ) }),
-    /* @__PURE__ */ jsxs48("div", { style: formFieldStyle, children: [
-      /* @__PURE__ */ jsx130("div", { style: formFieldLabel, children: "Name" }),
-      /* @__PURE__ */ jsxs48("div", { style: controlGridStyle, children: [
-        /* @__PURE__ */ jsx130("div", { style: { flexGrow: 1 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx130(
+    /* @__PURE__ */ jsxs49("div", { style: formFieldStyle, children: [
+      /* @__PURE__ */ jsx131("div", { style: formFieldLabel, children: "Name" }),
+      /* @__PURE__ */ jsxs49("div", { style: controlGridStyle, children: [
+        /* @__PURE__ */ jsx131("div", { style: { flexGrow: 1 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx131(
           "form",
           {
             onSubmit: (e) => {
@@ -18965,7 +19650,7 @@ function VariableSettings(props) {
               e.preventDefault();
               updateVariableName();
             },
-            children: /* @__PURE__ */ jsx130(
+            children: /* @__PURE__ */ jsx131(
               TextInput,
               {
                 ref: variableNameInputRef,
@@ -18977,7 +19662,7 @@ function VariableSettings(props) {
               }
             )
           }
-        ) : /* @__PURE__ */ jsx130(
+        ) : /* @__PURE__ */ jsx131(
           DropdownButton,
           {
             className: "button__fullwidth button__left_aligned",
@@ -18990,7 +19675,7 @@ function VariableSettings(props) {
             menu: variablesMenu
           }
         ) }),
-        /* @__PURE__ */ jsx130("div", { style: { flexGrow: 0 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx130(
+        /* @__PURE__ */ jsx131("div", { style: { flexGrow: 0 }, children: isSettingsEditingMode ? /* @__PURE__ */ jsx131(
           Button,
           {
             StartIcon: Save,
@@ -18998,7 +19683,7 @@ function VariableSettings(props) {
             size: "small",
             onClick: updateVariableName
           }
-        ) : /* @__PURE__ */ jsx130(
+        ) : /* @__PURE__ */ jsx131(
           Button,
           {
             StartIcon: Pencil2,
@@ -19011,9 +19696,9 @@ function VariableSettings(props) {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs48("div", { style: formFieldStyle, children: [
-      /* @__PURE__ */ jsx130("div", { style: formFieldLabel, children: "Type" }),
-      /* @__PURE__ */ jsx130(
+    /* @__PURE__ */ jsxs49("div", { style: formFieldStyle, children: [
+      /* @__PURE__ */ jsx131("div", { style: formFieldLabel, children: "Type" }),
+      /* @__PURE__ */ jsx131(
         DropdownButton,
         {
           className: "button__fullwidth button__left_aligned",
@@ -19027,9 +19712,9 @@ function VariableSettings(props) {
         }
       )
     ] }),
-    currentVariableNode.getVariableFormat() && /* @__PURE__ */ jsxs48("div", { style: formFieldStyle, children: [
-      /* @__PURE__ */ jsx130("div", { style: formFieldLabel, children: "Format" }),
-      /* @__PURE__ */ jsx130(
+    currentVariableNode.getVariableFormat() && /* @__PURE__ */ jsxs49("div", { style: formFieldStyle, children: [
+      /* @__PURE__ */ jsx131("div", { style: formFieldLabel, children: "Format" }),
+      /* @__PURE__ */ jsx131(
         DropdownButton,
         {
           className: "button__fullwidth button__left_aligned",
@@ -19043,7 +19728,7 @@ function VariableSettings(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx130("div", { style: { width: "100%", display: "f" }, children: /* @__PURE__ */ jsx130(
+    /* @__PURE__ */ jsx131("div", { style: { width: "100%", display: "f" }, children: /* @__PURE__ */ jsx131(
       Button,
       {
         size: "small",
@@ -19085,7 +19770,7 @@ function VariableSettings(props) {
 }
 
 // src/plugins/VariablesPlugin/VariableSettingsPlugin.tsx
-import { Fragment as Fragment52, jsx as jsx131 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx132 } from "react/jsx-runtime";
 function VariableSettingsPlugin() {
   const {
     registerSettingsPanel,
@@ -19104,20 +19789,20 @@ function VariableSettingsPlugin() {
       }
     }
   }, [isBlockEditorReady]);
-  return /* @__PURE__ */ jsx131(Fragment52, { children: drawer && /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx132(Fragment52, { children: drawer && /* @__PURE__ */ jsx132(
     StickyToPosition,
     {
       ref: settingsPanelStickyRef,
       container: drawer,
       children: (data, position, isVisible) => {
-        return /* @__PURE__ */ jsx131("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx131(
+        return /* @__PURE__ */ jsx132("div", { style: { width: position.width }, children: /* @__PURE__ */ jsx132(
           SettingsCard,
           {
             isVisible: !!isVisible,
             container: drawer,
             title: "Variable Settings",
             onClose: toggleSettingsPanelSwitch,
-            children: /* @__PURE__ */ jsx131(
+            children: /* @__PURE__ */ jsx132(
               VariableSettings,
               {
                 nodeKey: data.nodeKey,
@@ -19150,7 +19835,7 @@ import {
   useRef as useRef64,
   useState as useState24
 } from "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 function VariableToolbarPlugin() {
   const [editor] = useLexicalComposerContext70();
   const popupToolbarRef = useRef64(null);
@@ -19343,12 +20028,12 @@ function VariableToolbarPlugin() {
     ];
     return resultList;
   }, [toolbarState]);
-  return /* @__PURE__ */ jsx132(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
+  return /* @__PURE__ */ jsx133(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
 }
 
 // src/modules/Variables.tsx
 import { useEffect as useEffect96 } from "react";
-import { jsx as jsx133, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs50 } from "react/jsx-runtime";
 function Variables(props) {
   const { variablesSettings } = props;
   const { registerModule, setEditingModeDataCallback } = useBlockEditor();
@@ -19362,15 +20047,16 @@ function Variables(props) {
       };
     });
   }, [variablesSettings, setEditingModeDataCallback]);
-  return /* @__PURE__ */ jsxs49(VariablesProvider, { variablesSettings, children: [
-    /* @__PURE__ */ jsx133(TypeaheadVariablePlugin, {}),
-    /* @__PURE__ */ jsx133(VariableSettingsPlugin, {}),
-    /* @__PURE__ */ jsx133(VariableToolbarPlugin, {}),
-    /* @__PURE__ */ jsx133(VariableToolbarAgentPlugin, {})
+  return /* @__PURE__ */ jsxs50(VariablesProvider, { variablesSettings, children: [
+    /* @__PURE__ */ jsx134(TypeaheadVariablePlugin, {}),
+    /* @__PURE__ */ jsx134(VariableSettingsPlugin, {}),
+    /* @__PURE__ */ jsx134(VariableToolbarPlugin, {}),
+    /* @__PURE__ */ jsx134(VariableToolbarAgentPlugin, {})
   ] });
 }
 export {
   BlockEditor,
+  BlockEditorStyle,
   Callout,
   Debug,
   Image,