@trycourier/react-designer 0.0.0-canary-20251210164636 → 0.0.0-canary-20251211163746

package/dist/cjs/styles.css

@@ -985,6 +985,9 @@ body {
 .courier-top-\[50\%\] {
   top: 50%;
 }
+.courier-top-px {
+  top: 1px;
+}
 .-courier-z-10 {
   z-index: -10;
 }
@@ -1027,10 +1030,6 @@ body {
   margin-left: -1rem;
   margin-right: -1rem;
 }
-.courier-mx-0\.5 {
-  margin-left: 0.125rem;
-  margin-right: 0.125rem;
-}
 .courier-mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1047,6 +1046,10 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+.courier-my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .courier-my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1246,6 +1249,9 @@ body {
 .courier-h-\[25px\] {
   height: 25px;
 }
+.courier-h-\[28px\] {
+  height: 28px;
+}
 .courier-h-\[300px\] {
   height: 300px;
 }
@@ -2132,6 +2138,9 @@ body {
 .courier-pt-0 {
   padding-top: 0px;
 }
+.courier-pt-0\.5 {
+  padding-top: 0.125rem;
+}
 .courier-pt-2 {
   padding-top: 0.5rem;
 }
@@ -2150,9 +2159,6 @@ body {
 .courier-text-center {
   text-align: center;
 }
-.courier-align-middle {
-  vertical-align: middle;
-}
 .courier-font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -2214,8 +2220,8 @@ body {
 .courier-uppercase {
   text-transform: uppercase;
 }
-.courier-leading-\[25px\] {
-  line-height: 25px;
+.courier-leading-\[28px\] {
+  line-height: 28px;
 }
 .courier-leading-none {
   line-height: 1;
@@ -3040,10 +3046,15 @@ body {
 .ProseMirror > .react-renderer.node-divider {
   justify-content: center;
 }
-.ProseMirror > .react-renderer.node-variable {
-  margin: 0px;
+.ProseMirror > .react-renderer .node-variable {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
-.ProseMirror > .react-renderer.node-variable {
+.ProseMirror > .react-renderer .node-variable {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
+}
+.ProseMirror > .react-renderer .node-variable {
   display: inline-block;
 }
 .ProseMirror > .react-renderer.node-dragPlaceholder {
@@ -4450,6 +4461,90 @@ body {
       font-size: 0.8rem;
       padding: 0;
     }
+.courier-variable-chip {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  padding-right: 0.375rem;
+  padding-left: 1.5rem;
+
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+}
+/* Default state - yellow/warning (no value) */
+.courier-variable-chip:before {
+    content: "";
+  }
+.courier-variable-chip:before {
+  position: absolute;
+}
+.courier-variable-chip:before {
+  left: 0px;
+}
+.courier-variable-chip:before {
+  top: 1px;
+}
+.courier-variable-chip:before {
+  height: 100%;
+}
+.courier-variable-chip:before {
+  width: 100%;
+}
+.courier-variable-chip:before {
+  border-radius: 0.25rem;
+}
+.courier-variable-chip:before {
+  border-width: 1px;
+}
+.courier-variable-chip:before {
+    background-color: #fffbeb;
+    border-color: #fde68a;
+  }
+/* Icon container - absolutely positioned */
+.courier-variable-chip > span:first-child {
+  position: absolute;
+}
+.courier-variable-chip > span:first-child {
+  left: 0.25rem;
+}
+.courier-variable-chip > span:first-child {
+  top: 50%;
+}
+.courier-variable-chip > span:first-child {
+  z-index: 10;
+}
+.courier-variable-chip > span:first-child {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+/* Text span */
+.courier-variable-chip > span:last-child {
+  position: relative;
+}
+.courier-variable-chip > span:last-child {
+  z-index: 10;
+}
+.courier-variable-chip > span:last-child {
+    color: #92400e;
+  }
+/* Has value state - blue */
+.courier-variable-chip.courier-variable-chip-has-value:before {
+      background-color: #eff6ff;
+      border-color: #bfdbfe;
+    }
+.courier-variable-chip.courier-variable-chip-has-value > span:last-child {
+      color: #1e40af;
+    }
+/* Invalid state - reddish */
+.courier-variable-chip.courier-variable-chip-invalid:before {
+      background-color: #fef2f2;
+      border-color: #fecaca;
+    }
+.courier-variable-chip.courier-variable-chip-invalid > span:last-child {
+      color: #991b1b;
+    }
 /* Variable Textarea placeholder styles */
 .variable-textarea-placeholder .ProseMirror p.is-editor-empty:first-child::before,
 .variable-textarea-placeholder .ProseMirror p.is-empty:first-child::before {
@@ -4470,7 +4565,7 @@ body {
   margin: 0px;
 }
 .variable-input-placeholder .ProseMirror p {
-  height: 25px;
+  height: 28px;
 }
 .variable-input-placeholder .ProseMirror p {
   width: 100%;
@@ -4485,7 +4580,7 @@ body {
   padding: 0px;
 }
 .variable-input-placeholder .ProseMirror p {
-  line-height: 25px;
+  line-height: 28px;
 }
 .variable-input-placeholder .ProseMirror p {
   outline: 2px solid transparent;
@@ -5005,15 +5100,9 @@ body {
 .\[\&\>svg\]\:courier-shrink-0>svg {
   flex-shrink: 0;
 }
-.\[\&_\.ProseMirror\]\:courier-h-\[25px\] .ProseMirror {
-  height: 25px;
-}
 .\[\&_\.ProseMirror\]\:courier-min-h-\[20px\] .ProseMirror {
   min-height: 20px;
 }
-.\[\&_\.ProseMirror\]\:courier-flex-1 .ProseMirror {
-  flex: 1 1 0%;
-}
 .\[\&_\.ProseMirror\]\:courier-border-none .ProseMirror {
   border-style: none;
 }

package/dist/components/ui/VariableEditor/VariableChipBase.d.ts

@@ -29,7 +29,7 @@ export interface VariableChipBaseProps {
     className?: string;
     /** Override text color (e.g., for button context) */
     textColorOverride?: string;
-    /** Custom color getter function */
+    /** Custom color getter function (kept for API compatibility, colors handled by CSS) */
     getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
 }
 export declare const VariableChipBase: React.FC<VariableChipBaseProps>;