@harnessio/ui 1.3.0 → 1.3.1

package/dist/tailwind.config.js

@@ -1,5 +1,5 @@
 import { p as D, t as j } from "./tailwind-design-system-DIFJVle2.js";
-import { F as L, C as g } from "./form-constants-CdD106iI.js";
+import { F as L, C as b } from "./form-constants-CdD106iI.js";
 const A = {
   ".cn-accordion": {
     display: "flex",
@@ -530,7 +530,7 @@ const Q = {
       color: "var(--cn-text-1)"
     }
   }
-}, ee = ["primary", "secondary", "outline", "ghost"], re = ["success", "danger", "default"], ne = ["3xs", "2xs", "xs", "sm", "md"], f = "0.99", b = "150ms", v = "ease-in-out", ae = {
+}, ee = ["primary", "secondary", "outline", "ghost"], re = ["success", "danger", "default"], ne = ["3xs", "2xs", "xs", "sm", "md"], f = "0.99", g = "150ms", v = "ease-in-out", ae = {
   success: "success",
   danger: "danger",
   default: "gray"
@@ -589,7 +589,7 @@ function oe() {
 const ce = {
   ".cn-button": {
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, transform, box-shadow, opacity",
-    transitionDuration: b,
+    transitionDuration: g,
     transitionTimingFunction: v,
     willChange: "transform",
     borderRadius: "var(--cn-btn-default-radius)",
@@ -632,7 +632,7 @@ const ce = {
       backgroundSize: "300% 300%, 100% 100%",
       border: "var(--cn-btn-ai-border) solid transparent",
       transitionProperty: "color, background-size, background-position, border-color, box-shadow, transform, opacity",
-      transitionDuration: b,
+      transitionDuration: g,
       transitionTimingFunction: v,
       "&:hover:not(:disabled, .cn-button-disabled)": {
         // gradient matches the token one-to-one
@@ -772,7 +772,7 @@ const ce = {
   ".cn-button-split-wrapper": {
     display: "inline-flex",
     transitionProperty: "transform",
-    transitionDuration: b,
+    transitionDuration: g,
     transitionTimingFunction: v,
     "& > .cn-button, & > .cn-button-split-dropdown": {
       transform: "none !important"
@@ -1042,7 +1042,7 @@ const ce = {
   ".cn-card-select-hidden-input": {
     "@apply sr-only": ""
   }
-}, ge = {
+}, be = {
   ".cn-checkbox-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -1171,7 +1171,7 @@ const ce = {
     },
     "@apply truncate": ""
   }
-}, be = {
+}, ge = {
   ".cn-checkbox-tree": {
     "@apply w-full": ""
   },
@@ -1377,7 +1377,7 @@ const ce = {
       opacity: "0"
     }
   }
-}, he = {
+}, ue = {
   ".cn-drawer": {
     "&-content": {
       userSelect: "auto !important",
@@ -1782,7 +1782,7 @@ const ce = {
       }
     }
   }
-}, ue = [
+}, he = [
   "gray",
   "green",
   "red",
@@ -1799,7 +1799,7 @@ const ce = {
   "violet"
 ], me = () => {
   const r = {};
-  return ue.forEach((e) => {
+  return he.forEach((e) => {
     r[`&.cn-dropdown-menu-item-indicator-${e}`] = {
       backgroundColor: `var(--cn-set-${e}-solid-bg)`
     };
@@ -2137,7 +2137,7 @@ const ce = {
     [`@apply flex flex-col ${L}`]: ""
   },
   ":where(.cn-control-group)": {
-    [`@apply relative flex flex-col ${g}`]: "",
+    [`@apply relative flex flex-col ${b}`]: "",
     maxWidth: "100%",
     "&.cn-control-group-horizontal": {
       "@apply flex-row": "",
@@ -2154,7 +2154,7 @@ const ce = {
     "@apply relative flex flex-col": ""
   },
   ":where(.cn-control-group-input)": {
-    [`@apply relative flex flex-col ${g}`]: ""
+    [`@apply relative flex flex-col ${b}`]: ""
   }
 }, y = {
   poor: "var(--cn-comp-slider-track-danger)",
@@ -2257,7 +2257,7 @@ const Se = {
     ...Ce()
   }
 }, ze = ["2xs", "xs", "sm", "md", "lg", "xl"], $e = ["xs", "sm", "md", "lg"];
-function h(r) {
+function u(r) {
   const e = r === "icon" ? ze : $e, n = r === "symbol" ? "logo" : r, a = {};
   return e.forEach((t) => {
     const o = {};
@@ -2266,13 +2266,13 @@ function h(r) {
 }
 const Ie = {
   ".cn-icon": {
-    ...h("icon")
+    ...u("icon")
   },
   ".cn-logo": {
-    ...h("logo")
+    ...u("logo")
   },
   ".cn-symbol": {
-    ...h("symbol")
+    ...u("symbol")
   }
 }, Re = ["danger", "warning", "success"];
 function Te() {
@@ -2760,12 +2760,12 @@ const Ee = {
     progressBg: "danger",
     color: "text-danger"
   }
-}, u = "var(--cn-comp-slider-track-progress-stripes)", Ne = `linear-gradient(45deg,
-  ${u} 18.75%,
+}, h = "var(--cn-comp-slider-track-progress-stripes)", Ne = `linear-gradient(45deg,
+  ${h} 18.75%,
   transparent 18.75%,
   transparent 50%,
-  ${u} 50%,
-  ${u} 68.75%,
+  ${h} 50%,
+  ${h} 68.75%,
   transparent 68.75%,
   transparent)`, Ve = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
 function Me() {
@@ -3009,10 +3009,10 @@ const Ue = {
   }
 }, Ke = {
   ":where(.cn-radio-control)": {
-    [`@apply ${g}`]: ""
+    [`@apply ${b}`]: ""
   },
   ":where(.cn-radio-root)": {
-    [`@apply grid ${g}`]: ""
+    [`@apply grid ${b}`]: ""
   },
   ".cn-radio-item-wrapper": {
     display: "flex",
@@ -3880,8 +3880,8 @@ const tr = {
       flexShrink: "0"
     }
   }
-}, pr = ["sm", "md", "lg", "xs"], gr = ["2xs", "xs", "sm", "md", "lg", "xl"], br = ["xs", "sm", "md", "lg"], vr = ["sm"];
-function hr() {
+}, pr = ["sm", "md", "lg", "xs"], br = ["2xs", "xs", "sm", "md", "lg", "xl"], gr = ["xs", "sm", "md", "lg"], vr = ["sm"];
+function ur() {
   const r = {};
   return pr.forEach((e) => {
     r[`&:where(.cn-skeleton-avatar-${e})`] = {
@@ -3891,13 +3891,13 @@ function hr() {
   }), r;
 }
 function S(r) {
-  const e = r === "icon" ? gr : br, n = {};
+  const e = r === "icon" ? br : gr, n = {};
   return e.forEach((a) => {
     const t = {};
     t.width = `var(--cn-${r}-size-${a})`, t["min-width"] = `var(--cn-${r}-size-${a})`, t.height = `var(--cn-${r}-size-${a})`, t["min-height"] = `var(--cn-${r}-size-${a})`, n[`&:where(.cn-skeleton-${r}-${a})`] = t;
   }), n;
 }
-function ur() {
+function hr() {
   const r = {};
   return vr.forEach((e) => {
     r[`&.cn-skeleton-form-item-${e}`] = {
@@ -3921,7 +3921,7 @@ const mr = {
       "&:where(.cn-skeleton-avatar-rounded)": {
         borderRadius: "var(--cn-avatar-radius-rounded)"
       },
-      ...hr()
+      ...ur()
     },
     "&-icon": {
       ...S("icon")
@@ -3959,7 +3959,7 @@ const mr = {
         border: "var(--cn-input-border) solid var(--cn-border-2)",
         borderRadius: "var(--cn-input-radius)",
         backgroundColor: "var(--cn-comp-input-bg)",
-        ...ur()
+        ...hr()
       }
     },
     "&-list": {
@@ -6345,6 +6345,18 @@ const Hr = {
     ".cn-toast-description": {
       "@apply text-cn-2": ""
     },
+    "&.cn-toast-severity-critical": {
+      borderLeftColor: "var(--cn-border-danger)"
+    },
+    "&.cn-toast-severity-high": {
+      borderLeftColor: "var(--cn-border-warning)"
+    },
+    "&.cn-toast-severity-medium": {
+      borderLeftColor: "var(--cn-border-success)"
+    },
+    "&.cn-toast-severity-low": {
+      borderLeftColor: "var(--cn-border-brand)"
+    },
     "&.cn-toast-danger": {
       backgroundColor: "var(--cn-comp-toast-danger-bg)",
       borderColor: "var(--cn-comp-toast-danger-border)",
@@ -6385,6 +6397,9 @@ const Hr = {
         transform: "rotate(180deg)",
         transition: "transform 0.2s ease-out"
       }
+    },
+    ".cn-toast-bottom-actions": {
+      "@apply w-full": ""
     }
   }
 }, Er = ["xs", "sm", "md"], Pr = () => {
@@ -6553,7 +6568,7 @@ const Hr = {
   Oe,
   Ue,
   Se,
-  he,
+  ue,
   de,
   $r,
   ve,
@@ -6591,8 +6606,8 @@ const Hr = {
   // Form styles
   tr,
   we,
-  ge,
   be,
+  ge,
   Ke,
   Hr,
   We,