@harnessio/ui 1.0.7 → 1.0.9

package/dist/tailwind.config.js

@@ -1,6 +1,6 @@
-import { p as H, t as D } from "./tailwind-design-system-D1osiuq5.js";
-import { F as W, C as p } from "./form-constants-CdD106iI.js";
-const A = {
+import { p as D, t as A } from "./tailwind-design-system-D1osiuq5.js";
+import { F as B, C as p } from "./form-constants-CdD106iI.js";
+const j = {
   ".cn-accordion": {
     display: "flex",
     flexDirection: "column",
@@ -27,7 +27,7 @@ const A = {
         "@apply font-heading-base": ""
       },
       "&.cn-accordion-card": {
-        [`@apply ${W}`]: ""
+        [`@apply ${B}`]: ""
       }
     },
     "&-item": {
@@ -130,7 +130,7 @@ const A = {
       overflow: "visible"
     }
   }
-}, j = ["info", "danger", "warning", "success"], E = {
+}, E = ["info", "danger", "warning", "success"], P = {
   info: {
     backgroundColor: "gray-secondary",
     color: "text-cn-2",
@@ -152,10 +152,10 @@ const A = {
     fadeBgColor: "success"
   }
 };
-function P() {
+function O() {
   const r = {};
-  return j.forEach((e) => {
-    const n = {}, { backgroundColor: t, color: a, fadeBgColor: o } = E[e];
+  return E.forEach((e) => {
+    const n = {}, { backgroundColor: t, color: a, fadeBgColor: o } = P[e];
     n.backgroundColor = `var(--cn-set-${t}-bg)`, n["> .cn-alert-icon"] = {
       color: `var(--cn-${a})`
     }, n[" .cn-alert-fade-overlay"] = {
@@ -163,7 +163,7 @@ function P() {
     }, r[`&:where(.cn-alert-${e})`] = n;
   }), r;
 }
-const O = {
+const _ = {
   ".cn-alert": {
     gap: "var(--cn-alert-gap)",
     paddingTop: "var(--cn-alert-py)",
@@ -253,12 +253,12 @@ const O = {
     "&-link-wrapper": {
       paddingTop: "var(--cn-spacing-1)"
     },
-    ...P()
+    ...O()
   }
-}, _ = ["md", "sm", "lg", "xs"];
-function X() {
+}, X = ["md", "sm", "lg", "xs"];
+function G() {
   const r = {};
-  return _.forEach((e) => {
+  return X.forEach((e) => {
     e === "xs" ? r[`&:where(.cn-avatar-${e})`] = {
       height: `var(--cn-avatar-size-${e})`,
       width: `var(--cn-avatar-size-${e})`,
@@ -284,7 +284,7 @@ const Y = {
     boxShadow: "var(--cn-comp-shadow-avatar-inner)",
     letterSpacing: "var(--cn-tracking-tight)",
     "@apply shrink-0": "",
-    ...X(),
+    ...G(),
     "&:where(.cn-avatar-rounded)": {
       borderRadius: "var(--cn-avatar-radius-rounded)"
     },
@@ -308,7 +308,7 @@ const Y = {
     // Avatar xs → Icon xs, Avatar sm → Icon sm, Avatar md → Icon sm, Avatar lg → Icon md
     ".cn-avatar-icon": {}
   }
-}, F = ["primary", "secondary", "outline", "status", "ghost"], G = ["success", "info", "warning", "danger", "muted", "merged", "risk"], N = {
+}, F = ["primary", "secondary", "outline", "status", "ghost"], N = ["success", "info", "warning", "danger", "muted", "merged", "risk"], V = {
   success: "success",
   info: "blue",
   warning: "warning",
@@ -317,11 +317,11 @@ const Y = {
   merged: "purple",
   risk: "orange"
 };
-function V() {
+function M() {
   const r = {}, e = {};
   return F.forEach((n) => {
-    G.forEach((t) => {
-      const a = {}, o = N[t];
+    N.forEach((t) => {
+      const a = {}, o = V[t];
       n === "ghost" ? (a.color = `var(--cn-set-${o}-outline-text)`, r[`&:where(.cn-badge-${n}.cn-badge-${t})`] = a) : n !== "status" ? (a.backgroundColor = `var(--cn-set-${o}-${n}-bg)`, a.color = `var(--cn-set-${o}-${n}-text)`, a.borderColor = `var(--cn-set-${o}-${n}-border, var(--cn-set-${o}-${n}-bg))`, r[`&:where(.cn-badge-${n}.cn-badge-${t})`] = a) : e[`&.cn-badge-status.cn-badge-${t} > .cn-badge-indicator`] = {
         backgroundColor: `var(--cn-set-${o}-primary-bg)`
       };
@@ -381,9 +381,9 @@ const U = {
       }
     },
     /** Variants */
-    ...V()
+    ...M()
   }
-}, M = {
+}, q = {
   ".cn-breadcrumb": {
     "@apply flex flex-wrap items-center break-words select-none": "",
     gap: "var(--cn-spacing-1)"
@@ -486,23 +486,23 @@ const U = {
       color: "var(--cn-text-1)"
     }
   }
-}, q = ["primary", "secondary", "outline", "ghost"], K = ["success", "danger", "default"], J = ["3xs", "2xs", "xs", "sm", "md"], x = "0.99", b = "150ms", g = "ease-in-out", Q = {
+}, K = ["primary", "secondary", "outline", "ghost"], J = ["success", "danger", "default"], Q = ["3xs", "2xs", "xs", "sm", "md"], x = "0.99", b = "150ms", g = "ease-in-out", Z = {
   success: "success",
   danger: "danger",
   default: "gray"
 };
-function Z() {
+function ee() {
   const r = {}, e = {};
-  return q.forEach((n) => {
-    K.forEach((t) => {
-      const a = {}, o = Q[t];
+  return K.forEach((n) => {
+    J.forEach((t) => {
+      const a = {}, o = Z[t];
       if (n === "ghost") {
         a.color = `var(--cn-set-${o}-outline-text)`;
-        const c = t === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${o}-outline-bg-hover)`, L = t === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${o}-outline-bg-selected)`;
+        const c = t === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${o}-outline-bg-hover)`, H = t === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${o}-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: L
+          backgroundColor: H
         };
       } else {
         const c = n === "primary" && t === "default" ? "brand" : o;
@@ -531,9 +531,9 @@ function Z() {
     });
   }), { ...r, ...e };
 }
-function ee() {
+function re() {
   const r = {};
-  return J.forEach((e) => {
+  return Q.forEach((e) => {
     r[`&:where(.cn-button-${e})`] = {
       height: `var(--cn-btn-size-${e})`,
       paddingBlock: `var(--cn-btn-py-${e})`,
@@ -542,7 +542,7 @@ function ee() {
     };
   }), r;
 }
-const re = {
+const ne = {
   ".cn-button": {
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, transform, box-shadow, opacity",
     transitionDuration: b,
@@ -574,7 +574,7 @@ const re = {
       }
     },
     // sizes
-    ...ee(),
+    ...re(),
     "&:where(.cn-button-xs, .cn-button-3xs, .cn-button-2xs)": {
       "@apply font-caption-single-line-normal": ""
     },
@@ -620,7 +620,7 @@ const re = {
       }
     },
     // variant styles
-    ...Z(),
+    ...ee(),
     // Rounded
     "&:where(.cn-button-rounded)": {
       borderRadius: "var(--cn-btn-rounded-radius)"
@@ -737,7 +737,7 @@ const re = {
       transform: `scale(${x})`
     }
   }
-}, ne = {
+}, ae = {
   ".cn-button-group": {
     "@apply flex": "",
     "&-horizontal": {
@@ -778,7 +778,7 @@ const re = {
       }
     }
   }
-}, ae = {
+}, te = {
   ".cn-button-layout": {
     gap: "var(--cn-layout-sm)",
     "@apply flex": "",
@@ -818,7 +818,7 @@ const re = {
       "@apply flex": ""
     }
   }
-}, te = {
+}, oe = {
   ".cn-caption": {
     gap: "var(--cn-spacing-1)",
     "@apply w-full inline-flex items-start": ""
@@ -826,7 +826,7 @@ const re = {
   ":where([disabled]) + .cn-caption": {
     "@apply opacity-cn-disabled": ""
   }
-}, oe = {
+}, ce = {
   ".cn-card": {
     border: "var(--cn-card-border) solid var(--cn-border-2)",
     borderRadius: "var(--cn-card-md-radius)",
@@ -911,7 +911,7 @@ const re = {
       "@apply outline-offset-cn-tight": ""
     }
   }
-}, ce = {
+}, ie = {
   ".cn-card-select-root": {
     display: "grid",
     "&:where(.cn-card-select-horizontal)": {
@@ -987,7 +987,7 @@ const re = {
   ".cn-card-select-hidden-input": {
     "@apply sr-only": ""
   }
-}, ie = {
+}, de = {
   ".cn-checkbox-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -1116,7 +1116,7 @@ const re = {
     },
     "@apply truncate": ""
   }
-}, de = {
+}, se = {
   ".cn-checkbox-tree": {
     "@apply w-full": ""
   },
@@ -1153,7 +1153,7 @@ const re = {
       "@apply hidden": ""
     }
   }
-}, se = {
+}, le = {
   ".cn-modal-dialog-overlay": {
     backgroundColor: "var(--cn-comp-dialog-backdrop)",
     padding: "var(--cn-dialog-safezone)",
@@ -1322,7 +1322,7 @@ const re = {
       opacity: "0"
     }
   }
-}, le = {
+}, pe = {
   ".cn-drawer": {
     "&-content": {
       userSelect: "auto !important",
@@ -1727,7 +1727,7 @@ const re = {
       }
     }
   }
-}, pe = [
+}, be = [
   "gray",
   "green",
   "red",
@@ -1742,14 +1742,14 @@ const re = {
   "orange",
   "pink",
   "violet"
-], be = () => {
+], ge = () => {
   const r = {};
-  return pe.forEach((e) => {
+  return be.forEach((e) => {
     r[`&.cn-dropdown-menu-item-indicator-${e}`] = {
       backgroundColor: `var(--cn-set-${e}-solid-bg)`
     };
   }), r;
-}, ge = {
+}, ve = {
   ".cn-dropdown-menu": {
     zIndex: "50",
     minWidth: "var(--cn-dropdown-min-width)",
@@ -1837,7 +1837,7 @@ const re = {
         height: "var(--cn-badge-indicator-size-sm)",
         borderRadius: "var(--cn-rounded-full)",
         flexShrink: "0",
-        ...be()
+        ...ge()
       }
     },
     "&-group-label": {
@@ -1865,7 +1865,7 @@ const re = {
       padding: "calc(var(--cn-dropdown-item-py) + var(--cn-spacing-4)) var(--cn-dropdown-item-px)"
     }
   }
-}, ve = {
+}, ue = {
   ".cn-dual-pane-stepper-root": {
     display: "flex",
     flexDirection: "column",
@@ -1952,7 +1952,7 @@ const re = {
       flexShrink: "0"
     }
   }
-}, ue = {
+}, he = {
   ".cn-flow-stepper-card": {
     position: "relative",
     background: "var(--cn-bg-1)",
@@ -2069,9 +2069,9 @@ const re = {
     gap: "var(--cn-spacing-2)",
     flexShrink: "0"
   }
-}, he = {
+}, me = {
   ".cn-form": {
-    [`@apply flex flex-col ${W}`]: ""
+    [`@apply flex flex-col ${B}`]: ""
   },
   ":where(.cn-control-group)": {
     [`@apply relative flex flex-col ${p}`]: "",
@@ -2118,7 +2118,7 @@ const re = {
     width: "var(--cn-size-26, 104px)"
   }
 };
-function me() {
+function xe() {
   return Object.fromEntries(
     Object.entries(m).map(([r, e]) => [
       `&:where(.cn-gauge-size-${r})`,
@@ -2132,7 +2132,7 @@ function me() {
     ])
   );
 }
-function xe() {
+function fe() {
   return Object.fromEntries(
     Object.keys(f).map((r) => [
       `&:where(.cn-gauge-status-${r})`,
@@ -2144,7 +2144,7 @@ function xe() {
     ])
   );
 }
-const fe = {
+const ye = {
   ".cn-gauge": {
     display: "inline-flex",
     flexDirection: "column",
@@ -2190,18 +2190,18 @@ const fe = {
       userSelect: "none",
       pointerEvents: "none"
     },
-    ...me(),
-    ...xe()
+    ...xe(),
+    ...fe()
   }
-}, ye = ["2xs", "xs", "sm", "md", "lg", "xl"], we = ["xs", "sm", "md", "lg"];
+}, we = ["2xs", "xs", "sm", "md", "lg", "xl"], ke = ["xs", "sm", "md", "lg"];
 function v(r) {
-  const e = r === "icon" ? ye : we, n = r === "symbol" ? "logo" : r, t = {};
+  const e = r === "icon" ? we : ke, n = r === "symbol" ? "logo" : r, t = {};
   return e.forEach((a) => {
     const o = {};
     o.width = `var(--cn-${n}-size-${a})`, o["min-width"] = `var(--cn-${n}-size-${a})`, o.height = `var(--cn-${n}-size-${a})`, o["min-height"] = `var(--cn-${n}-size-${a})`, r === "icon" && (o["stroke-width"] = `var(--cn-icon-stroke-width-${a})`), t[`&:where(.cn-${r}-${a})`] = o;
   }), t;
 }
-const ke = {
+const Ce = {
   ".cn-icon": {
     ...v("icon")
   },
@@ -2211,10 +2211,10 @@ const ke = {
   ".cn-symbol": {
     ...v("symbol")
   }
-}, Ce = ["danger", "warning", "success"];
-function Se() {
+}, Se = ["danger", "warning", "success"];
+function ze() {
   const r = {};
-  return Ce.forEach((e) => {
+  return Se.forEach((e) => {
     r[`&:where(.cn-input-${e}):not(:has(input[disabled]))`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -2229,7 +2229,7 @@ function Se() {
     };
   }), r;
 }
-const ze = {
+const $e = {
   ".cn-input": {
     "&-input": {
       height: "100%",
@@ -2317,7 +2317,7 @@ const ze = {
         "@apply h-full border-0 border-l rounded-l-cn-none": "",
         borderColor: "inherit"
       },
-      ...Se()
+      ...ze()
     },
     "&-search": {
       "&:where(.cn-input-input)": {
@@ -2328,7 +2328,7 @@ const ze = {
       }
     }
   }
-}, $e = {
+}, Ie = {
   ".cn-label": {
     "@apply font-body-normal": "",
     display: "grid",
@@ -2356,7 +2356,7 @@ const ze = {
       color: "var(--cn-set-danger-secondary-text)"
     }
   }
-}, Ie = {
+}, Re = {
   ".cn-link": {
     display: "inline-flex",
     alignItems: "center",
@@ -2417,7 +2417,7 @@ const ze = {
       textDecorationLine: "none !important"
     }
   }
-}, Re = {
+}, Te = {
   ".cn-message-bubble": {
     display: "flex",
     flexDirection: "column",
@@ -2443,7 +2443,7 @@ const ze = {
       gap: "var(--cn-spacing-1)"
     }
   }
-}, Te = {
+}, We = {
   ".cn-meter": {
     "@apply flex h-[19px] items-stretch gap-cn-3xs": "",
     "&:has(.cn-meter-tooltip-bar:hover) .cn-meter-bar:not(:hover)": {
@@ -2457,10 +2457,10 @@ const ze = {
       transition: "all 0.15s"
     }
   }
-}, We = ["danger", "warning"];
-function Be() {
+}, Be = ["danger", "warning"];
+function Le() {
   const r = {};
-  return We.forEach((e) => {
+  return Be.forEach((e) => {
     r[`&:where(.cn-multi-select-${e}):not(:has(input[disabled]))`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -2475,7 +2475,7 @@ function Be() {
     };
   }), r;
 }
-const Le = {
+const He = {
   ".cn-multi-select": {
     "&-outer-container": {
       "@apply flex flex-col gap-cn-xs": ""
@@ -2495,7 +2495,7 @@ const Le = {
       "&:where(:hover):not(:has(input[disabled]))": {
         borderColor: "var(--cn-border-brand)"
       },
-      ...Be()
+      ...Le()
     },
     "&-tag-wrapper": {
       "@apply relative flex flex-wrap items-center gap-cn-xs": ""
@@ -2522,7 +2522,7 @@ const Le = {
       "@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": ""
     }
   }
-}, He = {
+}, De = {
   ".cn-page": {
     // Horizontal page padding for scrollable content. Mirrors the sticky header's padding
     // (see page-header-v2) so the header and the content below it stay edge-aligned.
@@ -2536,7 +2536,7 @@ const Le = {
       paddingTop: "var(--cn-page-container-spacing-py)"
     }
   }
-}, De = {
+}, Ae = {
   ".cn-pagination": {
     "&-root": {
       containerType: "inline-size",
@@ -2576,7 +2576,7 @@ const Le = {
       paddingInline: "var(--cn-pagination-btn-px)"
     }
   }
-}, Ae = {
+}, je = {
   ".cn-popover": {
     "&-content": {
       display: "grid",
@@ -2660,7 +2660,7 @@ const Le = {
       }
     }
   }
-}, je = ["sm", "md", "lg"], Ee = ["processing", "completed", "paused", "failed"], Pe = [
+}, Ee = ["sm", "md", "lg"], Pe = ["processing", "completed", "paused", "failed"], Oe = [
   "gray",
   "blue",
   "brown",
@@ -2676,7 +2676,7 @@ const Le = {
   "red",
   "violet",
   "yellow"
-], Oe = {
+], _e = {
   green: "success",
   red: "danger",
   yellow: "warning"
@@ -2697,25 +2697,25 @@ const Le = {
     progressBg: "danger",
     color: "text-danger"
   }
-}, u = "var(--cn-comp-slider-track-progress-stripes)", _e = `linear-gradient(45deg,
+}, u = "var(--cn-comp-slider-track-progress-stripes)", Xe = `linear-gradient(45deg,
   ${u} 18.75%,
   transparent 18.75%,
   transparent 50%,
   ${u} 50%,
   ${u} 68.75%,
   transparent 68.75%,
-  transparent)`, Xe = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
+  transparent)`, Ge = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
 function Ye() {
   const r = {};
-  return je.forEach((e) => {
+  return Ee.forEach((e) => {
     const n = {};
     n[" .cn-progress-root"] = {
       height: `var(--cn-progress-size-${e})`
     }, n[" .cn-progress-processing-fake"] = {
-      "background-size": Xe(e),
+      "background-size": Ge(e),
       "animation-name": `cnProgressBar-${e}`
     }, r[`&:where(.cn-progress-${e})`] = n;
-  }), Ee.forEach((e) => {
+  }), Pe.forEach((e) => {
     const n = {};
     n[" .cn-progress-root::-webkit-progress-value"] = {
       "background-color": `var(--cn-comp-slider-track-${i[e].progressBg})`
@@ -2728,8 +2728,8 @@ function Ye() {
     }, n[" .cn-progress-subtitle"] = {
       color: `var(--cn-${i[e].color})`
     }, r[`&:where(.cn-progress-${e})`] = n;
-  }), Pe.forEach((e) => {
-    const t = `var(--cn-set-${Oe[e] ?? e}-primary-bg)`;
+  }), Oe.forEach((e) => {
+    const t = `var(--cn-set-${_e[e] ?? e}-primary-bg)`;
     r[`&:where(.cn-progress-color-${e})`] = {
       " .cn-progress-root::-webkit-progress-value": { "background-color": t },
       " .cn-progress-root::-moz-progress-bar": { "background-color": t },
@@ -2822,7 +2822,7 @@ const Fe = {
     },
     "&-processing-fake": {
       "background-color": "var(--cn-comp-slider-track-progress)",
-      "background-image": _e,
+      "background-image": Xe,
       "background-size": "16px 16px",
       height: "100%",
       width: "100%",
@@ -2862,7 +2862,7 @@ const Fe = {
       }
     }
   }
-}, Ge = {
+}, Ne = {
   "@property --cn-angle": {
     syntax: '"<angle>"',
     inherits: "true",
@@ -2928,7 +2928,7 @@ const Fe = {
       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)"
     }
   }
-}, Ne = {
+}, Ve = {
   ":where(.cn-radio-control)": {
     [`@apply ${p}`]: ""
   },
@@ -3013,7 +3013,7 @@ const Fe = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, Ve = {
+}, Me = {
   ".cn-reasoning": {
     marginBottom: "var(--cn-spacing-4)"
   },
@@ -3081,7 +3081,7 @@ const Fe = {
       }
     }
   }
-}, Me = {
+}, qe = {
   ".cn-sandbox-layout": {
     "&-content": {
       paddingTop: "var(--cn-page-container-spacing-py)",
@@ -3097,7 +3097,7 @@ const Fe = {
       paddingRight: "var(--cn-page-container-spacing-px)"
     }
   }
-}, qe = {
+}, Ke = {
   ".cn-scroll-area": {
     "@apply overflow-auto grid min-w-full": "",
     "&-content": {
@@ -3119,10 +3119,10 @@ const Fe = {
       }
     }
   }
-}, Ke = ["danger", "warning"], Je = ["sm"];
-function Qe() {
+}, Je = ["danger", "warning"], Qe = ["sm"];
+function Ze() {
   const r = {};
-  return Ke.forEach((e) => {
+  return Je.forEach((e) => {
     r[`&:where(.cn-select-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -3131,7 +3131,7 @@ function Qe() {
         boxShadow: `var(--cn-ring-${e}-hover)`
       }
     };
-  }), Je.forEach((e) => {
+  }), Qe.forEach((e) => {
     r[`&.cn-select-${e}`] = {
       height: `var(--cn-input-size-${e})`
     }, r[`&.cn-select-${e} .cn-select-trigger`] = {
@@ -3139,7 +3139,7 @@ function Qe() {
     };
   }), r;
 }
-const Ze = {
+const er = {
   ".cn-select": {
     display: "flex",
     alignItems: "center",
@@ -3190,9 +3190,9 @@ const Ze = {
       aspectRatio: "1",
       height: "100%"
     },
-    ...Qe()
+    ...Ze()
   }
-}, er = {
+}, rr = {
   ".cn-shimmer": {
     position: "relative",
     display: "inline-block",
@@ -3203,7 +3203,7 @@ const Ze = {
     backgroundImage: "var(--shimmer-highlight), linear-gradient(var(--shimmer-color), var(--shimmer-color))",
     backgroundRepeat: "no-repeat, padding-box"
   }
-}, rr = {
+}, nr = {
   ".cn-shortcut": {
     "&, &.cn-input-suffix": {
       display: "inline-flex",
@@ -3220,7 +3220,7 @@ const Ze = {
 }, d = (r) => ({
   color: r,
   "& svg, & path": { color: r, stroke: r, fill: "none" }
-}), nr = {
+}), ar = {
   ".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)" }
 }, y = {
@@ -3236,7 +3236,7 @@ const Ze = {
       alignItems: "center"
     }
   }
-}, ar = {
+}, tr = {
   "& .cn-input-prefix": {
     "@apply ml-0": ""
   },
@@ -3272,7 +3272,7 @@ const Ze = {
       opacity: "0"
     }
   }
-}, tr = {
+}, or = {
   ".cn-sidebar": {
     "&.cn-sidebar": {
       display: "flex",
@@ -3446,7 +3446,7 @@ const Ze = {
             "&[data-active=false] .cn-sidebar-item-content": {
               backgroundColor: "var(--cn-state-hover)"
             },
-            ...nr,
+            ...ar,
             ".cn-sidebar-item-action-menu": { opacity: "1" },
             ".cn-sidebar-item-content-action-buttons": { display: "flex !important" },
             ".cn-sidebar-item-grip-handle": { opacity: "1" },
@@ -3666,7 +3666,7 @@ const Ze = {
         }
       }
     },
-    "&[data-state=collapsed]": ar
+    "&[data-state=collapsed]": tr
   },
   ".cn-sidebar-popover-measurement": {
     position: "fixed",
@@ -3712,7 +3712,7 @@ const Ze = {
       backgroundColor: "var(--cn-comp-sidebar-separator)"
     }
   }
-}, or = {
+}, cr = {
   ".cn-single-pane-stepper-root": {
     display: "flex",
     flexDirection: "column",
@@ -3801,10 +3801,10 @@ const Ze = {
       flexShrink: "0"
     }
   }
-}, cr = ["sm", "md", "lg", "xs"], ir = ["2xs", "xs", "sm", "md", "lg", "xl"], dr = ["xs", "sm", "md", "lg"], sr = ["sm"];
-function lr() {
+}, ir = ["sm", "md", "lg", "xs"], dr = ["2xs", "xs", "sm", "md", "lg", "xl"], sr = ["xs", "sm", "md", "lg"], lr = ["sm"];
+function pr() {
   const r = {};
-  return cr.forEach((e) => {
+  return ir.forEach((e) => {
     r[`&:where(.cn-skeleton-avatar-${e})`] = {
       width: `var(--cn-avatar-size-${e})`,
       height: `var(--cn-avatar-size-${e})`
@@ -3812,22 +3812,22 @@ function lr() {
   }), r;
 }
 function C(r) {
-  const e = r === "icon" ? ir : dr, n = {};
+  const e = r === "icon" ? dr : sr, n = {};
   return e.forEach((t) => {
     const a = {};
     a.width = `var(--cn-${r}-size-${t})`, a["min-width"] = `var(--cn-${r}-size-${t})`, a.height = `var(--cn-${r}-size-${t})`, a["min-height"] = `var(--cn-${r}-size-${t})`, n[`&:where(.cn-skeleton-${r}-${t})`] = a;
   }), n;
 }
-function pr() {
+function br() {
   const r = {};
-  return sr.forEach((e) => {
+  return lr.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 br = {
+const gr = {
   ".cn-skeleton": {
     "&-base": {
       backgroundImage: "var(--cn-comp-skeleton-bg)",
@@ -3842,7 +3842,7 @@ const br = {
       "&:where(.cn-skeleton-avatar-rounded)": {
         borderRadius: "var(--cn-avatar-radius-rounded)"
       },
-      ...lr()
+      ...pr()
     },
     "&-icon": {
       ...C("icon")
@@ -3878,7 +3878,7 @@ const br = {
         border: "var(--cn-input-border) solid var(--cn-border-2)",
         borderRadius: "var(--cn-input-radius)",
         backgroundColor: "var(--cn-comp-input-bg)",
-        ...pr()
+        ...br()
       }
     },
     "&-list": {
@@ -3899,7 +3899,7 @@ const br = {
       backgroundPosition: "-200% 0"
     }
   }
-}, gr = {
+}, vr = {
   ".cn-slider": {
     display: "flex",
     flexDirection: "column",
@@ -4175,7 +4175,7 @@ const br = {
       }
     }
   }
-}, vr = {
+}, ur = {
   ".cn-stacked-list": {
     "@apply w-full bg-cn-1 border rounded-cn-3": "",
     "& > *:first-child > .cn-stacked-list-item": {
@@ -4276,7 +4276,7 @@ const br = {
     background: "var(--cn-border-2)",
     pointerEvents: "none"
   }
-}, ur = {
+}, hr = {
   ".cn-stepper": {
     minWidth: "200px",
     width: "100%",
@@ -4860,7 +4860,7 @@ const br = {
       }
     }
   }
-}, hr = {
+}, mr = {
   ".cn-sticky-list-section": {
     "@apply relative": "",
     "&-sentinel": {
@@ -4904,14 +4904,14 @@ const br = {
   ".cn-sticky-list-section-contained .cn-sticky-list-section-header-stuck": {
     backgroundColor: "var(--cn-sticky-header-bg, var(--cn-bg-1))"
   }
-}, B = ".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", z = {
-  [B]: {
+}, L = ".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", z = {
+  [L]: {
     opacity: "0.45 !important",
     transition: "opacity 200ms ease-in-out"
   }
 }, $ = {
   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)"
-}, mr = {
+}, I = "var(--cn-size-28)", xr = "var(--cn-layout-2xs)", fr = {
   ".cn-studio-card": {
     // Step cards (base, no group/stage). Three-way radius split — see overrides below.
     borderRadius: "var(--cn-rounded-5)",
@@ -5112,7 +5112,7 @@ const br = {
           // borderColor: 'lch(from var(--cn-border-2) l c h / 0.65) !important',
         },
         "@apply shadow-cn-3": "",
-        [B]: {
+        [L]: {
           opacity: "1 !important"
         }
       }
@@ -5125,6 +5125,7 @@ const br = {
   // Tag Component
   ".cn-studio-card-tag": {
     "@apply flex gap-cn-3xs p-cn-2xs border rounded-t-cn-4 top-[-28px] right-0 absolute select-none": "",
+    maxWidth: I,
     color: "var(--cn-set-purple-outline-text)",
     "background-color": "var(--cn-set-purple-outline-bg)",
     "border-color": "var(--cn-set-purple-outline-border)",
@@ -5149,7 +5150,13 @@ const br = {
   // Status Component
   ".cn-studio-card-status": {
     position: "absolute",
-    top: "-28px"
+    top: "-28px",
+    maxWidth: "100%",
+    // Override `.cn-badge` min-width: fit-content so max-width can take effect.
+    minWidth: "0",
+    ".cn-studio-card:has(> .cn-studio-card-tag) > &": {
+      maxWidth: `calc(100% - ${I} - ${xr})`
+    }
   },
   // Footer Component
   ".cn-studio-card-footer": {
@@ -5299,7 +5306,7 @@ const br = {
       }
     }
   }
-}, xr = {
+}, yr = {
   ".cn-switch-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -5388,7 +5395,7 @@ const br = {
     },
     "@apply truncate": ""
   }
-}, l = "linear-gradient(var(--cn-table-pinned-overlay), var(--cn-table-pinned-overlay)), var(--cn-table-pinned-base)", fr = {
+}, l = "linear-gradient(var(--cn-table-pinned-overlay), var(--cn-table-pinned-overlay)), var(--cn-table-pinned-base)", wr = {
   ".cn-table-v2": {
     "@apply w-full": "",
     // Table container
@@ -5668,7 +5675,7 @@ const br = {
   ".cn-row-pin-on": {
     opacity: "1"
   }
-}, yr = {
+}, kr = {
   ".cn-tabs-scroll-container": {
     position: "relative",
     width: "100%",
@@ -5893,7 +5900,7 @@ const br = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, wr = [
+}, Cr = [
   "gray",
   "blue",
   "brown",
@@ -5909,24 +5916,24 @@ const br = {
   "red",
   "violet",
   "yellow"
-], kr = {
+], Sr = {
   green: "success",
   red: "danger",
   yellow: "warning"
-}, I = (r, e) => ({
+}, R = (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 R(r) {
+function T(r) {
   const e = {};
-  return wr.forEach((n) => {
-    const t = kr[n] ?? n, a = r === "outline", o = {
+  return Cr.forEach((n) => {
+    const t = Sr[n] ?? n, a = r === "outline", o = {
       color: `var(--cn-set-${t}-${a ? "outline-text" : "secondary-text"})`,
       backgroundColor: `var(--cn-set-${t}-${a ? "outline-bg" : "secondary-bg"})`,
       borderColor: `var(--cn-set-${t}-${a ? "outline-border" : "secondary-bg"})`,
-      "&.cn-tag-hoverable:hover:not(.cn-tag-split *)": I(t, a),
+      "&.cn-tag-hoverable:hover:not(.cn-tag-split *)": R(t, a),
       "&:where(.cn-tag-split-left)": {
-        ".cn-tag-split.cn-tag-split-hoverable:hover &": I(t, a)
+        ".cn-tag-split.cn-tag-split-hoverable:hover &": R(t, a)
       },
       "&:where(.cn-tag-split-right)": a ? {
         borderColor: `var(--cn-set-${t}-secondary-bg)`,
@@ -5947,7 +5954,7 @@ function R(r) {
     e[`&:where(.cn-tag-${t})`] = o;
   }), e;
 }
-const Cr = {
+const zr = {
   ".cn-tag": {
     display: "inline-flex",
     alignItems: "center",
@@ -5955,9 +5962,9 @@ const Cr = {
     gap: "var(--cn-tag-gap)",
     borderWidth: "var(--cn-tag-border)",
     borderRadius: "var(--cn-tag-radius-default)",
-    maxWidth: "var(--cn-tag-max-width)",
+    maxWidth: "min(var(--cn-tag-max-width), 100%)",
     height: "var(--cn-tag-size-md)",
-    "@apply w-fit items-center transition-colors select-none font-body-single-line-normal": "",
+    "@apply w-fit min-w-0 items-center transition-colors select-none font-body-single-line-normal": "",
     ":where(.cn-tag-action-icon-button)": {
       marginRight: "calc(-1 * var(--cn-tag-px))",
       marginLeft: "calc(-1 * var(--cn-tag-gap))",
@@ -5993,19 +6000,23 @@ const Cr = {
       }
     },
     "&:where(.cn-tag-outline)": {
-      ...R("outline")
+      ...T("outline")
     },
     "&:where(.cn-tag-secondary)": {
-      ...R("secondary")
+      ...T("secondary")
     },
     ".cn-tag-text": {
       "@apply truncate leading-normal align-middle inline-block": ""
     }
+  },
+  ".cn-tag-split": {
+    maxWidth: "min(var(--cn-tag-split-max-width), 100%)",
+    "@apply min-w-0": ""
   }
-}, Sr = ["danger", "warning"], zr = ["sm"];
-function $r() {
+}, $r = ["danger", "warning"], Ir = ["sm"];
+function Rr() {
   const r = {};
-  return Sr.forEach((e) => {
+  return $r.forEach((e) => {
     r[`&:where(.cn-textarea-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -6018,13 +6029,13 @@ function $r() {
         boxShadow: `var(--cn-ring-${e})`
       }
     };
-  }), zr.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 Tr = {
   ".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)",
@@ -6063,7 +6074,7 @@ const Ir = {
     "&-resizable": {
       resize: "vertical"
     },
-    ...$r(),
+    ...Rr(),
     "&-label-wrapper": {
       display: "flex",
       alignItems: "center",
@@ -6084,7 +6095,7 @@ const Ir = {
       }
     }
   }
-}, Rr = {
+}, Wr = {
   ".cn-time-ago-card": {
     "&-trigger": {
       "@apply leading-snug whitespace-nowrap truncate max-w-full": "",
@@ -6106,7 +6117,7 @@ const Ir = {
       "@apply grid grid-cols-[auto_1fr_auto] items-center whitespace-nowrap": ""
     }
   }
-}, Tr = {
+}, Br = {
   ".cn-time-input": {
     // Hide the native time picker indicator across browsers so the
     // configurable IconV2 icon is the only affordance shown.
@@ -6118,7 +6129,7 @@ const Ir = {
       "-webkit-appearance": "none"
     }
   }
-}, Wr = {
+}, Lr = {
   ".cn-toast-wrapper": {
     right: "var(--cn-toast-offset-right)",
     bottom: "var(--cn-toast-offset-bottom)"
@@ -6194,9 +6205,9 @@ const Ir = {
       }
     }
   }
-}, Br = ["xs", "sm", "md"], Lr = () => {
+}, Hr = ["xs", "sm", "md"], Dr = () => {
   const r = {};
-  return Br.forEach((e) => {
+  return Hr.forEach((e) => {
     r[`&.cn-toggle-${e}.cn-toggle-transparent.cn-toggle-text`] = {
       paddingLeft: `var(--cn-btn-px-${e})`,
       paddingRight: `var(--cn-btn-px-${e})`,
@@ -6205,15 +6216,15 @@ const Ir = {
       border: "var(--cn-btn-border) solid transparent"
     };
   }), r;
-}, Hr = {
+}, Ar = {
   ".cn-toggle": {
     transitionDuration: "100ms",
-    ...Lr(),
+    ...Dr(),
     '&[data-state="on"]': {
       color: "var(--cn-text-1)"
     }
   }
-}, Dr = {
+}, jr = {
   ".cn-toggle-group": {
     gap: "var(--cn-layout-3xs)",
     "@apply flex": "",
@@ -6221,7 +6232,7 @@ const Ir = {
       "@apply flex-col": ""
     }
   }
-}, Ar = {
+}, Er = {
   ".cn-tooltip": {
     minWidth: "var(--cn-tooltip-min)",
     maxWidth: "var(--cn-tooltip-max)",
@@ -6273,17 +6284,17 @@ const Ir = {
       }
     }
   }
-}, T = {
+}, W = {
   "@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)"
-}, jr = {
+}, Pr = {
   ".cn-file-tree": {
     "&-base-item": {
-      ...T
+      ...W
     },
     "&-item": {
-      ...T,
+      ...W,
       "@apply relative gap-cn-3xs flex items-center w-[fill-available]": "",
       "&-wrapper": {
         "@apply relative transition-colors": "",
@@ -6323,7 +6334,7 @@ const Ir = {
       }
     }
   }
-}, Er = {
+}, Or = {
   ".cn-yaml-output-panel": {
     display: "flex",
     flexDirection: "column",
@@ -6343,81 +6354,81 @@ const Ir = {
     minHeight: "0",
     overflow: "hidden"
   }
-}, Pr = [
-  A,
-  O,
+}, _r = [
+  j,
+  _,
   U,
-  re,
-  ge,
-  xr,
-  $e,
-  Cr,
+  ne,
+  ve,
+  yr,
   Ie,
+  zr,
+  Re,
   Y,
-  oe,
   ce,
-  De,
+  ie,
+  Ae,
   Fe,
-  fe,
+  ye,
+  pe,
+  te,
+  kr,
   le,
-  ae,
-  yr,
-  se,
-  He,
+  De,
   Ue,
-  Me,
   qe,
-  Ae,
-  Ar,
+  Ke,
+  je,
+  Er,
+  Lr,
+  or,
+  q,
+  Ce,
   Wr,
-  tr,
-  M,
-  ke,
-  Rr,
-  rr,
-  Hr,
-  Dr,
-  ne,
-  Ge,
-  br,
-  vr,
-  hr,
-  mr,
+  nr,
+  Ar,
   jr,
-  Te,
-  Re,
-  Ve,
-  er,
+  ae,
+  Ne,
   gr,
-  ve,
-  or,
-  ue,
-  Er,
   ur,
-  // Form styles
-  Ze,
+  mr,
+  fr,
+  Pr,
+  We,
+  Te,
+  Me,
+  rr,
+  vr,
+  ue,
+  cr,
   he,
-  ie,
+  Or,
+  hr,
+  // Form styles
+  er,
+  me,
   de,
-  Ne,
-  Ir,
-  ze,
-  te,
-  Le,
+  se,
+  Ve,
   Tr,
-  fr
-], Or = {
+  $e,
+  oe,
+  He,
+  Br,
+  wr
+], Xr = {
   content: [],
   plugins: [
-    H(({ addComponents: r }) => {
-      r(Pr);
+    D(({ addComponents: r }) => {
+      r(_r);
     })
   ]
-}, Yr = {
-  presets: [Or, D],
+}, Fr = {
+  presets: [Xr, A],
   content: ["./src/**/*.{ts,tsx}"]
 };
 export {
-  Yr as default
+  Fr as default
 };
 //# sourceMappingURL=tailwind.config.js.map