@harnessio/ui 0.5.16 → 0.5.18

package/dist/tailwind.config.js

@@ -1,5 +1,6 @@
-import { p as z, t as $ } from "./tailwind-design-system-B-Jd9lCG.js";
-const I = {
+import { p as $, t as I } from "./tailwind-design-system-B-Jd9lCG.js";
+import { F as R, C as g, f as T } from "./form-shared-styles-W3czzLsz.js";
+const W = {
   ".cn-accordion": {
     display: "flex",
     flexDirection: "column",
@@ -26,7 +27,7 @@ const I = {
         "@apply font-heading-base": ""
       },
       "&.cn-accordion-card": {
-        gap: "var(--cn-accordion-md-card-gap-y)"
+        [`@apply ${R}`]: ""
       }
     },
     "&-item": {
@@ -120,7 +121,7 @@ const I = {
       }
     }
   }
-}, R = ["info", "danger", "warning", "success"], T = {
+}, B = ["info", "danger", "warning", "success"], L = {
   info: {
     backgroundColor: "gray-secondary",
     color: "text-cn-2",
@@ -142,10 +143,10 @@ const I = {
     fadeBgColor: "success"
   }
 };
-function W() {
+function H() {
   const r = {};
-  return R.forEach((e) => {
-    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = T[e];
+  return B.forEach((e) => {
+    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = L[e];
     n.backgroundColor = `var(--cn-set-${o}-bg)`, n["> .cn-alert-icon"] = {
       color: `var(--cn-${a})`
     }, n[" .cn-alert-fade-overlay"] = {
@@ -153,7 +154,7 @@ function W() {
     }, r[`&:where(.cn-alert-${e})`] = n;
   }), r;
 }
-const B = {
+const A = {
   ".cn-alert": {
     gap: "var(--cn-alert-gap)",
     paddingTop: "var(--cn-alert-py)",
@@ -242,12 +243,12 @@ const B = {
     "&-link-wrapper": {
       paddingTop: "var(--cn-spacing-1)"
     },
-    ...W()
+    ...H()
   }
-}, L = ["md", "sm", "lg", "xs"];
-function H() {
+}, j = ["md", "sm", "lg", "xs"];
+function E() {
   const r = {};
-  return L.forEach((e) => {
+  return j.forEach((e) => {
     e === "xs" ? r[`&:where(.cn-avatar-${e})`] = {
       height: `var(--cn-avatar-size-${e})`,
       width: `var(--cn-avatar-size-${e})`,
@@ -262,7 +263,7 @@ function H() {
     };
   }), r;
 }
-const A = {
+const D = {
   ".cn-avatar": {
     display: "inline-flex",
     alignItems: "center",
@@ -273,7 +274,7 @@ const A = {
     boxShadow: "var(--cn-comp-shadow-avatar-inner)",
     letterSpacing: "var(--cn-tracking-tight)",
     "@apply shrink-0": "",
-    ...H(),
+    ...E(),
     "&:where(.cn-avatar-rounded)": {
       borderRadius: "var(--cn-avatar-radius-rounded)"
     },
@@ -297,7 +298,7 @@ const A = {
     // Avatar xs → Icon xs, Avatar sm → Icon sm, Avatar md → Icon sm, Avatar lg → Icon md
     ".cn-avatar-icon": {}
   }
-}, j = ["primary", "secondary", "outline", "status", "ghost"], E = ["success", "info", "warning", "danger", "muted", "merged", "risk"], D = {
+}, P = ["primary", "secondary", "outline", "status", "ghost"], O = ["success", "info", "warning", "danger", "muted", "merged", "risk"], _ = {
   success: "success",
   info: "blue",
   warning: "warning",
@@ -306,18 +307,18 @@ const A = {
   merged: "purple",
   risk: "orange"
 };
-function P() {
+function X() {
   const r = {}, e = {};
-  return j.forEach((n) => {
-    E.forEach((o) => {
-      const a = {}, t = D[o];
+  return P.forEach((n) => {
+    O.forEach((o) => {
+      const a = {}, t = _[o];
       n === "ghost" ? (a.color = `var(--cn-set-${t}-outline-text)`, r[`&:where(.cn-badge-${n}.cn-badge-${o})`] = a) : n !== "status" ? (a.backgroundColor = `var(--cn-set-${t}-${n}-bg)`, a.color = `var(--cn-set-${t}-${n}-text)`, a.borderColor = `var(--cn-set-${t}-${n}-border, var(--cn-set-${t}-${n}-bg))`, r[`&:where(.cn-badge-${n}.cn-badge-${o})`] = a) : e[`&.cn-badge-status.cn-badge-${o} > .cn-badge-indicator`] = {
         backgroundColor: `var(--cn-set-${t}-primary-bg)`
       };
     });
   }), { ...r, ...e };
 }
-const O = {
+const F = {
   ".cn-badge": {
     paddingBlock: "var(--cn-badge-md-py)",
     paddingInline: "var(--cn-badge-md-px)",
@@ -370,9 +371,9 @@ const O = {
       }
     },
     /** Variants */
-    ...P()
+    ...X()
   }
-}, X = {
+}, V = {
   ".cn-breadcrumb": {
     "@apply flex flex-wrap items-center break-words select-none": "",
     gap: "var(--cn-spacing-1)"
@@ -475,23 +476,23 @@ const O = {
       color: "var(--cn-text-1)"
     }
   }
-}, V = ["primary", "secondary", "outline", "ghost"], F = ["success", "danger", "default"], N = ["3xs", "2xs", "xs", "sm", "md"], g = "0.99", l = "150ms", s = "ease-in-out", _ = {
+}, G = ["primary", "secondary", "outline", "ghost"], Y = ["success", "danger", "default"], N = ["3xs", "2xs", "xs", "sm", "md"], v = "0.99", l = "150ms", s = "ease-in-out", M = {
   success: "success",
   danger: "danger",
   default: "gray"
 };
-function G() {
+function U() {
   const r = {}, e = {};
-  return V.forEach((n) => {
-    F.forEach((o) => {
-      const a = {}, t = _[o];
+  return G.forEach((n) => {
+    Y.forEach((o) => {
+      const a = {}, t = M[o];
       if (n === "ghost") {
         a.color = `var(--cn-set-${t}-outline-text)`;
-        const c = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-hover)`, S = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-selected)`;
+        const c = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-hover)`, z = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-selected)`;
         a["&:hover:not(:disabled, .cn-button-disabled)"] = {
           backgroundColor: c
         }, a["&:active:not(:disabled, .cn-button-disabled), &:where(.cn-button-active), &:where([data-state=open])"] = {
-          backgroundColor: S
+          backgroundColor: z
         };
       } else {
         const c = n === "primary" && o === "default" ? "brand" : t;
@@ -520,7 +521,7 @@ function G() {
     });
   }), { ...r, ...e };
 }
-function Y() {
+function K() {
   const r = {};
   return N.forEach((e) => {
     r[`&:where(.cn-button-${e})`] = {
@@ -531,7 +532,7 @@ function Y() {
     };
   }), r;
 }
-const M = {
+const q = {
   ".cn-button": {
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, transform, box-shadow, opacity",
     transitionDuration: l,
@@ -547,7 +548,7 @@ const M = {
     border: "var(--cn-btn-border) solid var(--cn-set-gray-outline-border)",
     "@apply font-body-single-line-normal select-none overflow-hidden inline-flex items-center justify-center whitespace-nowrap": "",
     "&:active:not(:disabled, .cn-button-disabled, .cn-button-split-dropdown)": {
-      transform: `scale(${g})`
+      transform: `scale(${v})`
     },
     "&:where(.cn-button-split-dropdown)": {
       height: "var(--cn-btn-size-md)",
@@ -563,7 +564,7 @@ const M = {
       }
     },
     // sizes
-    ...Y(),
+    ...K(),
     "&:where(.cn-button-xs, .cn-button-3xs, .cn-button-2xs)": {
       "@apply font-caption-single-line-normal": ""
     },
@@ -609,7 +610,7 @@ const M = {
       }
     },
     // variant styles
-    ...G(),
+    ...U(),
     // Rounded
     "&:where(.cn-button-rounded)": {
       borderRadius: "var(--cn-btn-rounded-radius)"
@@ -723,10 +724,10 @@ const M = {
       transform: "none !important"
     },
     "&:has(> .cn-button:active)": {
-      transform: `scale(${g})`
+      transform: `scale(${v})`
     }
   }
-}, U = {
+}, J = {
   ".cn-button-group": {
     "@apply flex": "",
     "&-horizontal": {
@@ -767,7 +768,7 @@ const M = {
       }
     }
   }
-}, q = {
+}, Q = {
   ".cn-button-layout": {
     gap: "var(--cn-layout-sm)",
     "@apply flex": "",
@@ -807,7 +808,7 @@ const M = {
       "@apply flex": ""
     }
   }
-}, J = {
+}, Z = {
   ".cn-caption": {
     gap: "var(--cn-spacing-1)",
     "@apply w-full inline-flex items-start": ""
@@ -815,7 +816,7 @@ const M = {
   ":where([disabled]) + .cn-caption": {
     "@apply opacity-cn-disabled": ""
   }
-}, K = {
+}, ee = {
   ".cn-card": {
     border: "var(--cn-card-border) solid var(--cn-border-2)",
     borderRadius: "var(--cn-card-md-radius)",
@@ -900,7 +901,7 @@ const M = {
       "@apply outline-offset-cn-tight": ""
     }
   }
-}, Q = {
+}, re = {
   ".cn-card-select-root": {
     display: "grid",
     "&:where(.cn-card-select-horizontal)": {
@@ -976,7 +977,7 @@ const M = {
   ".cn-card-select-hidden-input": {
     "@apply sr-only": ""
   }
-}, Z = {
+}, ne = {
   ".cn-checkbox-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -1105,7 +1106,7 @@ const M = {
     },
     "@apply truncate": ""
   }
-}, ee = {
+}, ae = {
   ".cn-modal-dialog-overlay": {
     backgroundColor: "var(--cn-comp-dialog-backdrop)",
     padding: "var(--cn-dialog-safezone)",
@@ -1274,7 +1275,7 @@ const M = {
       opacity: "0"
     }
   }
-}, re = {
+}, oe = {
   ".cn-drawer": {
     "&-content": {
       userSelect: "auto !important",
@@ -1430,7 +1431,7 @@ const M = {
       "@apply flex flex-col border-t": ""
     }
   }
-}, ne = [
+}, te = [
   "gray",
   "green",
   "red",
@@ -1445,14 +1446,14 @@ const M = {
   "orange",
   "pink",
   "violet"
-], ae = () => {
+], ce = () => {
   const r = {};
-  return ne.forEach((e) => {
+  return te.forEach((e) => {
     r[`&.cn-dropdown-menu-item-indicator-${e}`] = {
       backgroundColor: `var(--cn-set-${e}-solid-bg)`
     };
   }), r;
-}, oe = {
+}, ie = {
   ".cn-dropdown-menu": {
     zIndex: "50",
     minWidth: "var(--cn-dropdown-min-width)",
@@ -1530,7 +1531,7 @@ const M = {
         height: "var(--cn-badge-indicator-size-sm)",
         borderRadius: "var(--cn-rounded-full)",
         flexShrink: "0",
-        ...ae()
+        ...ce()
       }
     },
     "&-group-label": {
@@ -1558,41 +1559,15 @@ const M = {
       padding: "calc(var(--cn-dropdown-item-py) + var(--cn-spacing-4)) var(--cn-dropdown-item-px)"
     }
   }
-}, te = {
-  ".cn-form": {
-    "@apply flex flex-col gap-cn-xl": ""
-  },
-  ":where(.cn-control-group)": {
-    gap: "var(--cn-input-wrapper-gap)",
-    "@apply relative flex flex-col": "",
-    maxWidth: "100%",
-    "&.cn-control-group-horizontal": {
-      "@apply flex-row": "",
-      ".cn-control-group-label": {
-        width: "var(--cn-input-horizontal-label-max-width)"
-      },
-      ".cn-control-group-input": {
-        "@apply flex-1": ""
-      }
-    }
-  },
-  ":where(.cn-control-group-label)": {
-    gap: "var(--cn-layout-3xs)",
-    "@apply relative flex flex-col": ""
-  },
-  ":where(.cn-control-group-input)": {
-    gap: "var(--cn-input-wrapper-gap)",
-    "@apply relative flex flex-col": ""
-  }
-}, ce = ["2xs", "xs", "sm", "md", "lg", "xl"], ie = ["xs", "sm", "md", "lg"];
+}, de = ["2xs", "xs", "sm", "md", "lg", "xl"], le = ["xs", "sm", "md", "lg"];
 function p(r) {
-  const e = r === "icon" ? ce : ie, n = r === "symbol" ? "logo" : r, o = {};
+  const e = r === "icon" ? de : le, n = r === "symbol" ? "logo" : r, o = {};
   return e.forEach((a) => {
     const t = {};
     t.width = `var(--cn-${n}-size-${a})`, t["min-width"] = `var(--cn-${n}-size-${a})`, t.height = `var(--cn-${n}-size-${a})`, t["min-height"] = `var(--cn-${n}-size-${a})`, r === "icon" && (t["stroke-width"] = `var(--cn-icon-stroke-width-${a})`), o[`&:where(.cn-${r}-${a})`] = t;
   }), o;
 }
-const de = {
+const se = {
   ".cn-icon": {
     ...p("icon")
   },
@@ -1602,10 +1577,10 @@ const de = {
   ".cn-symbol": {
     ...p("symbol")
   }
-}, le = ["danger", "warning", "success"];
-function se() {
+}, pe = ["danger", "warning", "success"];
+function be() {
   const r = {};
-  return le.forEach((e) => {
+  return pe.forEach((e) => {
     r[`&:where(.cn-input-${e}):not(:has(input[disabled]))`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -1620,7 +1595,7 @@ function se() {
     };
   }), r;
 }
-const pe = {
+const ge = {
   ".cn-input": {
     "&-input": {
       height: "100%",
@@ -1708,7 +1683,7 @@ const pe = {
         "@apply h-full border-0 border-l rounded-l-cn-none": "",
         borderColor: "inherit"
       },
-      ...se()
+      ...be()
     },
     "&-search": {
       "&:where(.cn-input-input)": {
@@ -1719,7 +1694,7 @@ const pe = {
       }
     }
   }
-}, be = {
+}, ve = {
   ".cn-label": {
     "@apply font-body-normal": "",
     display: "grid",
@@ -1743,7 +1718,7 @@ const pe = {
       color: "var(--cn-text-3)"
     }
   }
-}, ge = {
+}, he = {
   ".cn-link": {
     display: "inline-flex",
     alignItems: "center",
@@ -1804,7 +1779,7 @@ const pe = {
       textDecorationLine: "none !important"
     }
   }
-}, ve = {
+}, ue = {
   ".cn-message-bubble": {
     display: "flex",
     flexDirection: "column",
@@ -1830,7 +1805,7 @@ const pe = {
       gap: "var(--cn-spacing-1)"
     }
   }
-}, he = {
+}, me = {
   ".cn-meter": {
     "@apply flex h-[19px] items-stretch gap-cn-3xs": "",
     "&:has(.cn-meter-tooltip-bar:hover) .cn-meter-bar:not(:hover)": {
@@ -1844,10 +1819,10 @@ const pe = {
       transition: "all 0.15s"
     }
   }
-}, ue = ["danger", "warning"];
-function me() {
+}, xe = ["danger", "warning"];
+function ye() {
   const r = {};
-  return ue.forEach((e) => {
+  return xe.forEach((e) => {
     r[`&:where(.cn-multi-select-${e}):not(:has(input[disabled]))`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -1862,7 +1837,7 @@ function me() {
     };
   }), r;
 }
-const xe = {
+const fe = {
   ".cn-multi-select": {
     "&-outer-container": {
       "@apply flex flex-col gap-cn-xs": ""
@@ -1882,7 +1857,7 @@ const xe = {
       "&:where(:hover):not(:has(input[disabled]))": {
         borderColor: "var(--cn-border-brand)"
       },
-      ...me()
+      ...ye()
     },
     "&-tag-wrapper": {
       "@apply relative flex flex-wrap items-center gap-cn-xs": ""
@@ -1909,7 +1884,7 @@ const xe = {
       "@apply border rounded-cn-3 shadow-cn-3 mt-cn-3xs overflow-hidden animate-in absolute top-cn-3xs z-[55] w-full outline-none": ""
     }
   }
-}, ye = {
+}, we = {
   ".cn-pagination": {
     "&-root": {
       containerType: "inline-size",
@@ -1949,7 +1924,7 @@ const xe = {
       paddingInline: "var(--cn-pagination-btn-px)"
     }
   }
-}, fe = {
+}, ke = {
   ".cn-popover": {
     "&-content": {
       display: "grid",
@@ -2033,7 +2008,7 @@ const xe = {
       }
     }
   }
-}, we = ["sm", "md", "lg"], ke = ["processing", "completed", "paused", "failed"], i = {
+}, Ce = ["sm", "md", "lg"], Se = ["processing", "completed", "paused", "failed"], i = {
   processing: {
     progressBg: "progress",
     color: "text-cn-3"
@@ -2050,25 +2025,25 @@ const xe = {
     progressBg: "danger",
     color: "text-danger"
   }
-}, b = "var(--cn-comp-slider-track-progress-stripes)", Ce = `linear-gradient(45deg,
+}, b = "var(--cn-comp-slider-track-progress-stripes)", ze = `linear-gradient(45deg,
   ${b} 18.75%,
   transparent 18.75%,
   transparent 50%,
   ${b} 50%,
   ${b} 68.75%,
   transparent 68.75%,
-  transparent)`, Se = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
-function ze() {
+  transparent)`, $e = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
+function Ie() {
   const r = {};
-  return we.forEach((e) => {
+  return Ce.forEach((e) => {
     const n = {};
     n[" .cn-progress-root"] = {
       height: `var(--cn-progress-size-${e})`
     }, n[" .cn-progress-processing-fake"] = {
-      "background-size": Se(e),
+      "background-size": $e(e),
       "animation-name": `cnProgressBar-${e}`
     }, r[`&:where(.cn-progress-${e})`] = n;
-  }), ke.forEach((e) => {
+  }), Se.forEach((e) => {
     const n = {};
     n[" .cn-progress-root::-webkit-progress-value"] = {
       "background-color": `var(--cn-comp-slider-track-${i[e].progressBg})`
@@ -2083,7 +2058,7 @@ function ze() {
     }, r[`&:where(.cn-progress-${e})`] = n;
   }), r;
 }
-const $e = {
+const Re = {
   ".cn-progress": {
     "&-container": {
       position: "relative"
@@ -2168,13 +2143,13 @@ const $e = {
     },
     "&-processing-fake": {
       "background-color": "var(--cn-comp-slider-track-progress)",
-      "background-image": Ce,
+      "background-image": ze,
       "background-size": "16px 16px",
       height: "100%",
       width: "100%",
       animation: "cnProgressBar-md 0.8s linear infinite"
     },
-    ...ze(),
+    ...Ie(),
     "@keyframes cnProgressIndeterminateAnimation": {
       "0%": {
         transform: "translateX(-100%)"
@@ -2208,7 +2183,7 @@ const $e = {
       }
     }
   }
-}, Ie = {
+}, Te = {
   "@property --cn-angle": {
     syntax: '"<angle>"',
     inherits: "true",
@@ -2274,13 +2249,12 @@ const $e = {
       boxShadow: "0 0 3px 0 color-mix(in srgb, var(--cn-gradient-ai-stop-3) 30%, transparent), 0 0 12px 2px color-mix(in srgb, var(--cn-gradient-ai-stop-3) 15%, transparent), 0 0 28px 6px color-mix(in srgb, var(--cn-gradient-ai-stop-3) 8%, transparent)"
     }
   }
-}, Re = {
+}, We = {
   ":where(.cn-radio-control)": {
-    gap: "var(--cn-layout-sm) var(--cn-input-wrapper-gap)"
+    [`@apply ${g}`]: ""
   },
   ":where(.cn-radio-root)": {
-    "@apply grid": "",
-    gap: "var(--cn-layout-sm)"
+    [`@apply grid ${g}`]: ""
   },
   ".cn-radio-item-wrapper": {
     display: "flex",
@@ -2360,7 +2334,7 @@ const $e = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, Te = {
+}, Be = {
   ".cn-reasoning": {
     marginBottom: "var(--cn-spacing-4)"
   },
@@ -2413,7 +2387,7 @@ const $e = {
       opacity: "0"
     }
   }
-}, We = {
+}, Le = {
   ".cn-repo": {
     "&-header": {
       paddingTop: "var(--cn-page-container-spacing-py)",
@@ -2428,7 +2402,7 @@ const $e = {
       }
     }
   }
-}, Be = {
+}, He = {
   ".cn-sandbox-layout": {
     "&-content": {
       paddingTop: "var(--cn-page-container-spacing-py)",
@@ -2444,7 +2418,7 @@ const $e = {
       paddingRight: "var(--cn-page-container-spacing-px)"
     }
   }
-}, Le = {
+}, Ae = {
   ".cn-scroll-area": {
     "@apply overflow-auto grid min-w-full": "",
     "&-content": {
@@ -2466,10 +2440,10 @@ const $e = {
       }
     }
   }
-}, He = ["danger", "warning"], Ae = ["sm"];
-function je() {
+}, je = ["danger", "warning"], Ee = ["sm"];
+function De() {
   const r = {};
-  return He.forEach((e) => {
+  return je.forEach((e) => {
     r[`&:where(.cn-select-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -2478,7 +2452,7 @@ function je() {
         boxShadow: `var(--cn-ring-${e}-hover)`
       }
     };
-  }), Ae.forEach((e) => {
+  }), Ee.forEach((e) => {
     r[`&.cn-select-${e}`] = {
       height: `var(--cn-input-size-${e})`
     }, r[`&.cn-select-${e} .cn-select-trigger`] = {
@@ -2486,7 +2460,7 @@ function je() {
     };
   }), r;
 }
-const Ee = {
+const Pe = {
   ".cn-select": {
     display: "flex",
     alignItems: "center",
@@ -2537,9 +2511,9 @@ const Ee = {
       aspectRatio: "1",
       height: "100%"
     },
-    ...je()
+    ...De()
   }
-}, De = {
+}, Oe = {
   ".cn-shimmer": {
     position: "relative",
     display: "inline-block",
@@ -2550,7 +2524,7 @@ const Ee = {
     backgroundImage: "var(--shimmer-highlight), linear-gradient(var(--shimmer-color), var(--shimmer-color))",
     backgroundRepeat: "no-repeat, padding-box"
   }
-}, Pe = {
+}, _e = {
   ".cn-shortcut": {
     "&, &.cn-input-suffix": {
       display: "inline-flex",
@@ -2567,15 +2541,15 @@ const Ee = {
 }, d = (r) => ({
   color: r,
   "& svg, & path": { color: r, stroke: r, fill: "none" }
-}), Oe = {
+}), Xe = {
   ".cn-sidebar-item-content-title": { color: "var(--cn-comp-sidebar-item-text-hover)" },
   ".cn-sidebar-item-content-icon": { color: "var(--cn-comp-sidebar-item-text-hover)" }
-}, v = {
+}, h = {
   ".cn-sidebar-item-content-title": { color: "var(--cn-comp-sidebar-item-text-selected)" },
   ".cn-sidebar-item-content-icon": { color: "var(--cn-comp-sidebar-item-text-selected)" }
-}, h = {
-  "& .cn-sidebar-item-content-icon": { color: "var(--cn-text-1)" }
 }, u = {
+  "& .cn-sidebar-item-content-icon": { color: "var(--cn-text-1)" }
+}, m = {
   ".cn-sidebar-item-content.cn-sidebar-item-content-w-description": {
     ".cn-sidebar-item-content-icon": {
       alignSelf: "stretch",
@@ -2583,7 +2557,7 @@ const Ee = {
       alignItems: "center"
     }
   }
-}, Xe = {
+}, Fe = {
   "& .cn-input-prefix": {
     "@apply ml-0": ""
   },
@@ -2748,7 +2722,7 @@ const Ee = {
       overflow: "hidden",
       "@apply duration-150 transition-[max-width,margin-left,padding] ease-linear": "",
       // Router-active (e.g. NavLink); label colors — hover is handled on .cn-sidebar-item-wrapper
-      "&-active": v,
+      "&-active": h,
       "&:hover": {
         textDecoration: "none !important"
       },
@@ -2789,7 +2763,7 @@ const Ee = {
             "&[data-active=false] .cn-sidebar-item-content": {
               backgroundColor: "var(--cn-state-hover)"
             },
-            ...Oe,
+            ...Xe,
             ".cn-sidebar-item-action-menu": { opacity: "1" },
             ".cn-sidebar-item-content-action-buttons": { display: "flex !important" },
             ".cn-sidebar-item-grip-handle": { opacity: "1" },
@@ -2799,7 +2773,7 @@ const Ee = {
             ".cn-sidebar-item-content": {
               background: "var(--cn-comp-sidebar-item-selected)"
             },
-            ...v,
+            ...h,
             ".cn-sidebar-item-action-menu": { opacity: "1" },
             ".cn-sidebar-item-active-indicator": {
               backgroundColor: "var(--cn-set-brand-primary-bg)",
@@ -2853,7 +2827,7 @@ const Ee = {
           `,
             gridTemplateColumns: "auto 1fr auto"
           },
-          ...h
+          ...u
         },
         "&-w-r-element": {
           gridTemplateAreas: '"icon title elem"',
@@ -2877,7 +2851,7 @@ const Ee = {
           `,
             gridTemplateColumns: "auto 1fr auto auto"
           },
-          ...h
+          ...u
         },
         /** Reserves space for active bar + grip handle so icon/title stay stable when active or dragging */
         "&-icon": { gridArea: "icon", marginLeft: "var(--cn-layout-sm)" },
@@ -3009,7 +2983,7 @@ const Ee = {
         }
       }
     },
-    "&[data-state=collapsed]": Xe
+    "&[data-state=collapsed]": Fe
   },
   ".cn-sidebar-popover-measurement": {
     position: "fixed",
@@ -3031,11 +3005,11 @@ const Ee = {
     width: "var(--cn-size-64)",
     height: "100vh",
     borderRadius: "0 var(--cn-popover-radius) var(--cn-popover-radius) 0",
-    ...u
+    ...m
   },
   ".cn-popover-content.cn-sidebar-popover": {
     backgroundColor: "var(--cn-bg-2)",
-    ...u,
+    ...m,
     ".cn-sidebar-group-header": {
       padding: "var(--cn-layout-2xs)"
     },
@@ -3055,33 +3029,33 @@ const Ee = {
       backgroundColor: "var(--cn-comp-sidebar-separator)"
     }
   }
-}, Fe = ["sm", "md", "lg", "xs"], Ne = ["2xs", "xs", "sm", "md", "lg", "xl"], _e = ["xs", "sm", "md", "lg"], Ge = ["sm"];
-function Ye() {
+}, Ge = ["sm", "md", "lg", "xs"], Ye = ["2xs", "xs", "sm", "md", "lg", "xl"], Ne = ["xs", "sm", "md", "lg"], Me = ["sm"];
+function Ue() {
   const r = {};
-  return Fe.forEach((e) => {
+  return Ge.forEach((e) => {
     r[`&:where(.cn-skeleton-avatar-${e})`] = {
       width: `var(--cn-avatar-size-${e})`,
       height: `var(--cn-avatar-size-${e})`
     };
   }), r;
 }
-function m(r) {
-  const e = r === "icon" ? Ne : _e, n = {};
+function x(r) {
+  const e = r === "icon" ? Ye : Ne, n = {};
   return e.forEach((o) => {
     const a = {};
     a.width = `var(--cn-${r}-size-${o})`, a["min-width"] = `var(--cn-${r}-size-${o})`, a.height = `var(--cn-${r}-size-${o})`, a["min-height"] = `var(--cn-${r}-size-${o})`, n[`&:where(.cn-skeleton-${r}-${o})`] = a;
   }), n;
 }
-function Me() {
+function Ke() {
   const r = {};
-  return Ge.forEach((e) => {
+  return Me.forEach((e) => {
     r[`&.cn-skeleton-form-item-${e}`] = {
       padding: `var(--cn-input-${e}-py) var(--cn-input-${e}-pr) var(--cn-input-${e}-py) var(--cn-input-${e}-pl)`,
       height: `var(--cn-input-size-${e})`
     };
   }), r;
 }
-const Ue = {
+const qe = {
   ".cn-skeleton": {
     "&-base": {
       backgroundImage: "var(--cn-comp-skeleton-bg)",
@@ -3096,13 +3070,13 @@ const Ue = {
       "&:where(.cn-skeleton-avatar-rounded)": {
         borderRadius: "var(--cn-avatar-radius-rounded)"
       },
-      ...Ye()
+      ...Ue()
     },
     "&-icon": {
-      ...m("icon")
+      ...x("icon")
     },
     "&-logo": {
-      ...m("logo")
+      ...x("logo")
     },
     "&-typography": {
       "&-wrapper": {
@@ -3132,7 +3106,7 @@ const Ue = {
         border: "var(--cn-input-border) solid var(--cn-border-2)",
         borderRadius: "var(--cn-input-radius)",
         backgroundColor: "var(--cn-comp-input-bg)",
-        ...Me()
+        ...Ke()
       }
     },
     "&-list": {
@@ -3153,7 +3127,7 @@ const Ue = {
       backgroundPosition: "-200% 0"
     }
   }
-}, qe = {
+}, Je = {
   ".cn-slider": {
     display: "flex",
     flexDirection: "column",
@@ -3429,7 +3403,7 @@ const Ue = {
       }
     }
   }
-}, Je = {
+}, Qe = {
   ".cn-stacked-list": {
     "@apply w-full bg-cn-1 border rounded-cn-3": "",
     "& > *:first-child > .cn-stacked-list-item": {
@@ -3497,14 +3471,14 @@ const Ue = {
       }
     }
   }
-}, C = ".cn-studio-card-header, .cn-studio-card-message, .cn-studio-card-footer, .cn-studio-card-content > .cn-studio-card-expand-button, .cn-studio-card-content > .cn-studio-card-button, .cn-studio-card-tag, .cn-studio-card-status", x = {
-  [C]: {
+}, S = ".cn-studio-card-header, .cn-studio-card-message, .cn-studio-card-footer, .cn-studio-card-content > .cn-studio-card-expand-button, .cn-studio-card-content > .cn-studio-card-button, .cn-studio-card-tag, .cn-studio-card-status", y = {
+  [S]: {
     opacity: "0.45 !important",
     transition: "opacity 200ms ease-in-out"
   }
-}, y = {
+}, f = {
   boxShadow: "0 4px 6px -1px lch(from var(--cn-shadow-color-3) l c h / 0.05), 0 2px 8px -2px lch(from var(--cn-shadow-color-3) l c h / 0.05)"
-}, Ke = {
+}, Ze = {
   ".cn-studio-card": {
     borderRadius: "var(--cn-rounded-4)",
     border: "1px solid var(--cn-border-2)",
@@ -3518,6 +3492,12 @@ const Ue = {
     minWidth: "220px",
     maxWidth: "220px",
     height: "var(--cn-size-40)",
+    "&.cn-studio-card-xs": {
+      // Extra small variant - reduces dimensions for compact cards
+      width: "auto",
+      minWidth: "var(--cn-size-41)",
+      height: "auto"
+    },
     "&.cn-studio-card-sm": {
       borderWidth: "2px !important"
     },
@@ -3543,22 +3523,24 @@ const Ue = {
     "&:has(.cn-studio-card-group:hover)": {
       backgroundColor: "lch(from var(--cn-bg-3) l c h / 0.45) !important",
       borderColor: "lch(from var(--cn-border-2) l c h / 0.65) !important",
-      ...y,
+      ...f,
       ">": {
-        ...x
+        ...y
       }
     },
     // Group card variant
     "&:where(.cn-studio-card-group)": {
       width: "auto",
-      minWidth: "var(--cn-size-90)",
+      // minWidth: 'var(--cn-size-90)',
       maxWidth: "none",
       height: "auto",
       "&.cn-studio-card-stage": {
-        minWidth: "var(--cn-size-90)"
+        // minWidth: 'var(--cn-size-90)'
       },
+      // When expanded - remove max-width to fit children
       '&:has(> .cn-studio-card-content > [data-expanded="true"])': {
-        "@apply bg-cn-3/50": ""
+        "@apply bg-cn-3/50": "",
+        maxWidth: "none"
       },
       "> .cn-studio-card-content": {
         minHeight: "108px"
@@ -3566,10 +3548,31 @@ const Ue = {
       "> .cn-studio-card-content:not(:has(> .cn-studio-card-message))": {
         "@apply justify-center items-start": ""
       },
+      // When collapsed - fixed width
+      '&:has(> .cn-studio-card-content > [data-expanded="false"])': {
+        // width: 'var(--cn-size-90)',
+        // minWidth: 'var(--cn-size-90)',
+        // maxWidth: 'var(--cn-size-90)'
+      }
+    },
+    // Group card variant with xs size - compact layout
+    "&:where(.cn-studio-card-group.cn-studio-card-xs)": {
+      minWidth: "var(--cn-size-41)",
+      "&.cn-studio-card-stage": {
+        minWidth: "var(--cn-size-41)"
+      },
+      "> .cn-studio-card-content": {
+        minHeight: "63px"
+      },
+      // When expanded - remove max-width to fit children
+      '&:has(> .cn-studio-card-content > [data-expanded="true"])': {
+        maxWidth: "none"
+      },
+      // When collapsed - fixed width
       '&:has(> .cn-studio-card-content > [data-expanded="false"])': {
-        width: "var(--cn-size-90)",
-        minWidth: "var(--cn-size-90)",
-        maxWidth: "var(--cn-size-90)"
+        width: "var(--cn-size-41)",
+        minWidth: "var(--cn-size-41)",
+        maxWidth: "var(--cn-size-41)"
       }
     },
     // Shimmer effect for executing status
@@ -3604,8 +3607,13 @@ const Ue = {
       "@apply flex-1": ""
     }
   },
+  // Compact header padding for xs cards
+  ".cn-studio-card-xs .cn-studio-card-header": {
+    "@apply p-cn-2xs pl-cn-xs": ""
+  },
   ".cn-studio-card-code-preview": {
     "@apply relative h-full overflow-hidden": "",
+    minHeight: "var(--cn-size-13)",
     "&::before": {
       "@apply absolute inset-y-0 right-0 w-8": "",
       content: '""',
@@ -3617,11 +3625,18 @@ const Ue = {
       content: '""',
       zIndex: "2",
       background: "linear-gradient(to bottom, color-mix(in lch, var(--cn-comp-pipeline-card-footer) 0%, transparent), var(--cn-comp-pipeline-card-footer))"
+    },
+    // Allow pre tags to wrap and prevent width expansion
+    "& pre": {
+      position: "absolute",
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      overflowWrap: "break-word"
     }
   },
   // Content Component
   ".cn-studio-card-content": {
-    "@apply flex flex-col flex-grow gap-cn-sm px-cn-md pb-cn-lg pt-cn-sm": "",
+    "@apply flex flex-col flex-grow gap-cn-sm px-cn-md pb-cn-md pt-cn-sm": "",
     paddingTop: "0 !important",
     // When a group card is hovered anywhere inside this content
     "&:has(.cn-studio-card-group:hover)": {
@@ -3637,8 +3652,8 @@ const Ue = {
         '&:not(:has(> [data-status="executing"]))': {
           borderColor: "lch(from var(--cn-border-2) l c h / 0.65) !important"
         },
-        ...y,
-        ...x
+        ...f,
+        ...y
       },
       // Preserve opacity for the hovered group itself
       "& .cn-studio-card-group:hover": {
@@ -3652,7 +3667,7 @@ const Ue = {
           // borderColor: 'lch(from var(--cn-border-2) l c h / 0.65) !important',
         },
         "@apply shadow-cn-3": "",
-        [C]: {
+        [S]: {
           opacity: "1 !important"
         }
       }
@@ -3698,6 +3713,28 @@ const Ue = {
     "& span": {
       "@apply line-clamp-4": ""
     },
+    // Explicit compact size via prop
+    '&[data-size="compact"]': {
+      minHeight: "var(--cn-size-13)",
+      "& span": {
+        "@apply line-clamp-2": ""
+      }
+    },
+    // Auto-detect parent Root size - xs cards get compact footer
+    ".cn-studio-card-xs > &": {
+      minHeight: "var(--cn-size-16)",
+      "@apply px-cn-xs py-cn-xs": "",
+      "& span": {
+        "@apply line-clamp-2": ""
+      }
+    },
+    // Auto-detect parent Root size - sm cards get slightly reduced footer
+    ".cn-studio-card-sm > &": {
+      minHeight: "var(--cn-size-20)",
+      "& span": {
+        "@apply line-clamp-3": ""
+      }
+    },
     // Group card variant - adjust padding and line-clamp
     ".cn-studio-card-group > &": {
       minHeight: "var(--cn-size-13)",
@@ -3734,7 +3771,7 @@ const Ue = {
     width: "226px",
     height: "var(--cn-size-22)",
     transition: "transform 0.1s linear",
-    // Stack layers
+    // Stack layers - default direction is "right"
     "&-stack": {
       pointerEvents: "none",
       transitionProperty: "transform",
@@ -3757,7 +3794,7 @@ const Ue = {
         transform: "translateX(6px)"
       }
     },
-    // Hover state - expand stacks and translate button right
+    // Hover state - expand stacks and translate button
     "&:hover": {
       transform: "scale(1.02) !important",
       ".cn-studio-card-expand-button-stack-1": {
@@ -3767,6 +3804,35 @@ const Ue = {
         transform: "translateX(8px)"
       }
     },
+    // Bottom stack direction variant
+    '&[data-stack-direction="bottom"]': {
+      ".cn-studio-card-expand-button-stack-1": {
+        insetBlock: "0px",
+        insetInline: "3px",
+        transform: "translateY(3px)"
+      },
+      ".cn-studio-card-expand-button-stack-2": {
+        insetBlock: "0px",
+        insetInline: "6px",
+        transform: "translateY(6px)"
+      },
+      "&:hover": {
+        ".cn-studio-card-expand-button-stack-1": {
+          transform: "translateY(4px)"
+        },
+        ".cn-studio-card-expand-button-stack-2": {
+          transform: "translateY(8px)"
+        }
+      }
+    },
+    // Minimal variant
+    '&[data-variant="minimal"]': {
+      width: "auto",
+      height: "auto",
+      ".cn-studio-card-expand-button-top": {
+        "@apply p-cn-2xs px-cn-sm": ""
+      }
+    },
     // Expanded state - hide stacks
     '&:where([data-expanded="true"])': {
       ".cn-studio-card-expand-button-stack": {
@@ -3774,7 +3840,7 @@ const Ue = {
       }
     }
   }
-}, Qe = {
+}, er = {
   ".cn-switch-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -3863,7 +3929,7 @@ const Ue = {
     },
     "@apply truncate": ""
   }
-}, Ze = {
+}, rr = {
   ".cn-table-v2": {
     "@apply w-full": "",
     // Table container
@@ -4037,7 +4103,7 @@ const Ue = {
   ".cn-row-pin-on": {
     opacity: "1"
   }
-}, er = {
+}, nr = {
   ".cn-tabs-scroll-container": {
     position: "relative",
     width: "100%",
@@ -4197,7 +4263,7 @@ const Ue = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, rr = [
+}, ar = [
   "gray",
   "blue",
   "brown",
@@ -4213,24 +4279,24 @@ const Ue = {
   "red",
   "violet",
   "yellow"
-], nr = {
+], or = {
   green: "success",
   red: "danger",
   yellow: "warning"
-}, f = (r, e) => ({
+}, w = (r, e) => ({
   backgroundColor: `var(--cn-set-${r}-${e ? "outline-bg-hover" : "secondary-bg-hover"})`,
   borderColor: `var(--cn-set-${r}-${e ? "outline-border" : "secondary-bg-hover"})`
 });
-function w(r) {
+function k(r) {
   const e = {};
-  return rr.forEach((n) => {
-    const o = nr[n] ?? n, a = r === "outline", t = {
+  return ar.forEach((n) => {
+    const o = or[n] ?? n, a = r === "outline", t = {
       color: `var(--cn-set-${o}-${a ? "outline-text" : "secondary-text"})`,
       backgroundColor: `var(--cn-set-${o}-${a ? "outline-bg" : "secondary-bg"})`,
       borderColor: `var(--cn-set-${o}-${a ? "outline-border" : "secondary-bg"})`,
-      "&.cn-tag-hoverable:hover:not(.cn-tag-split *)": f(o, a),
+      "&.cn-tag-hoverable:hover:not(.cn-tag-split *)": w(o, a),
       "&:where(.cn-tag-split-left)": {
-        ".cn-tag-split.cn-tag-split-hoverable:hover &": f(o, a)
+        ".cn-tag-split.cn-tag-split-hoverable:hover &": w(o, a)
       },
       "&:where(.cn-tag-split-right)": a ? {
         borderColor: `var(--cn-set-${o}-secondary-bg)`,
@@ -4251,7 +4317,7 @@ function w(r) {
     e[`&:where(.cn-tag-${o})`] = t;
   }), e;
 }
-const ar = {
+const tr = {
   ".cn-tag": {
     display: "inline-flex",
     alignItems: "center",
@@ -4297,19 +4363,19 @@ const ar = {
       }
     },
     "&:where(.cn-tag-outline)": {
-      ...w("outline")
+      ...k("outline")
     },
     "&:where(.cn-tag-secondary)": {
-      ...w("secondary")
+      ...k("secondary")
     },
     ".cn-tag-text": {
       "@apply truncate leading-normal align-middle inline-block": ""
     }
   }
-}, or = ["danger", "warning"], tr = ["sm"];
-function cr() {
+}, cr = ["danger", "warning"], ir = ["sm"];
+function dr() {
   const r = {};
-  return or.forEach((e) => {
+  return cr.forEach((e) => {
     r[`&:where(.cn-textarea-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -4322,13 +4388,13 @@ function cr() {
         boxShadow: `var(--cn-ring-${e})`
       }
     };
-  }), tr.forEach((e) => {
+  }), ir.forEach((e) => {
     r[`&.cn-textarea-${e}`] = {
       padding: `var(--cn-input-${e}-py) var(--cn-input-${e}-pr) var(--cn-input-${e}-py) var(--cn-input-${e}-pl)`
     };
   }), r;
 }
-const ir = {
+const lr = {
   ".cn-textarea": {
     borderRadius: "var(--cn-input-radius)",
     padding: "var(--cn-input-md-py) var(--cn-input-md-pr) var(--cn-input-md-py) var(--cn-input-md-pl)",
@@ -4367,7 +4433,7 @@ const ir = {
     "&-resizable": {
       resize: "vertical"
     },
-    ...cr(),
+    ...dr(),
     "&-label-wrapper": {
       display: "flex",
       alignItems: "center",
@@ -4388,7 +4454,7 @@ const ir = {
       }
     }
   }
-}, dr = {
+}, sr = {
   ".cn-time-ago-card": {
     "&-trigger": {
       "@apply leading-snug whitespace-nowrap truncate max-w-full": "",
@@ -4410,7 +4476,7 @@ const ir = {
       "@apply grid grid-cols-[auto_1fr_auto] items-center whitespace-nowrap": ""
     }
   }
-}, lr = {
+}, pr = {
   ".cn-toast-wrapper": {
     right: "var(--cn-toast-offset-right)",
     bottom: "var(--cn-toast-offset-bottom)"
@@ -4486,9 +4552,9 @@ const ir = {
       }
     }
   }
-}, sr = ["xs", "sm", "md"], pr = () => {
+}, br = ["xs", "sm", "md"], gr = () => {
   const r = {};
-  return sr.forEach((e) => {
+  return br.forEach((e) => {
     r[`&.cn-toggle-${e}.cn-toggle-transparent.cn-toggle-text`] = {
       paddingLeft: `var(--cn-btn-px-${e})`,
       paddingRight: `var(--cn-btn-px-${e})`,
@@ -4497,15 +4563,15 @@ const ir = {
       border: "var(--cn-btn-border) solid transparent"
     };
   }), r;
-}, br = {
+}, vr = {
   ".cn-toggle": {
     transitionDuration: "100ms",
-    ...pr(),
+    ...gr(),
     '&[data-state="on"]': {
       color: "var(--cn-text-1)"
     }
   }
-}, gr = {
+}, hr = {
   ".cn-toggle-group": {
     gap: "var(--cn-layout-3xs)",
     "@apply flex": "",
@@ -4513,7 +4579,7 @@ const ir = {
       "@apply flex-col": ""
     }
   }
-}, vr = {
+}, ur = {
   ".cn-tooltip": {
     minWidth: "var(--cn-tooltip-min)",
     maxWidth: "var(--cn-tooltip-max)",
@@ -4565,17 +4631,17 @@ const ir = {
       }
     }
   }
-}, k = {
+}, C = {
   "@apply text-cn-2 font-body-normal": "",
   minHeight: "var(--cn-tree-item-height)",
   padding: "var(--cn-tree-item-py) var(--cn-tree-item-pr) var(--cn-tree-item-py)"
-}, hr = {
+}, mr = {
   ".cn-file-tree": {
     "&-base-item": {
-      ...k
+      ...C
     },
     "&-item": {
-      ...k,
+      ...C,
       "@apply relative gap-cn-3xs flex items-center w-[fill-available]": "",
       "&-wrapper": {
         "@apply relative transition-colors": "",
@@ -4615,71 +4681,71 @@ const ir = {
       }
     }
   }
-}, ur = [
-  I,
-  B,
-  O,
-  M,
-  oe,
-  Qe,
-  be,
-  ar,
-  ge,
+}, xr = [
+  W,
   A,
-  K,
-  Q,
-  ye,
-  $e,
-  re,
+  F,
   q,
+  ie,
   er,
+  ve,
+  tr,
+  he,
+  D,
   ee,
-  We,
-  Be,
+  re,
+  we,
+  Re,
+  oe,
+  Q,
+  nr,
+  ae,
   Le,
-  fe,
-  vr,
-  lr,
+  He,
+  Ae,
+  ke,
+  ur,
+  pr,
   Ve,
-  X,
-  de,
-  dr,
-  Pe,
-  br,
-  gr,
-  U,
-  Ie,
-  Ue,
-  Je,
-  Ke,
+  V,
+  se,
+  sr,
+  _e,
+  vr,
   hr,
-  he,
-  ve,
+  J,
   Te,
-  De,
   qe,
+  Qe,
+  Ze,
+  mr,
+  me,
+  ue,
+  Be,
+  Oe,
+  Je,
   // Form styles
-  Ee,
-  te,
+  Pe,
+  T,
+  ne,
+  We,
+  lr,
+  ge,
   Z,
-  Re,
-  ir,
-  pe,
-  J,
-  xe,
-  Ze
-], mr = {
+  fe,
+  rr
+], yr = {
   content: [],
   plugins: [
-    z(({ addComponents: r }) => {
-      r(ur);
+    $(({ addComponents: r }) => {
+      r(xr);
     })
   ]
-}, yr = {
-  presets: [mr, $],
+}, kr = {
+  presets: [yr, I],
   content: ["./src/**/*.{ts,tsx}"]
 };
 export {
-  yr as default
+  kr as default
 };
 //# sourceMappingURL=tailwind.config.js.map