@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/components/SectionCard.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function CardHeading({
@@ -13,20 +14,19 @@ function CardHeading({
   className,
   descriptionClassName
 }) {
-  const danger = tone === "danger";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { id, className: utils_cn.cn("text-heading text-foreground", danger && "text-accent2", className), children: title }),
-    description != null && /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Txt.Txt,
       {
-        className: utils_cn.cn(
-          "mt-1 max-w-[62ch]",
-          danger ? "text-caption text-accent2/70" : "text-caption text-muted-foreground",
-          descriptionClassName
-        ),
-        children: description
+        as: "h3",
+        variant: "heading",
+        tone: "ink",
+        id,
+        className: utils_cn.cn(tone === "danger" && "text-destructive-subtle-foreground", className),
+        children: title
       }
-    )
+    ),
+    description != null && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", className: utils_cn.cn("mt-1 max-w-[62ch]", descriptionClassName), children: description })
   ] });
 }
 
@@ -48,7 +48,7 @@ function SectionCard({
       className: utils_cn.cn(
         "overflow-hidden rounded-2xl border",
         fillHeight && "flex h-full flex-col",
-        danger ? "border-accent2/25" : "border-border",
+        danger ? "border-destructive-edge" : "border-border",
         className
       ),
       children: [
@@ -57,7 +57,7 @@ function SectionCard({
           {
             className: utils_cn.cn(
               "flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
-              danger ? "bg-accent2/8" : "bg-surface-overlay-soft"
+              danger ? "bg-destructive-subtle" : "bg-surface-overlay-soft"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(CardHeading, { title, description, tone: danger ? "danger" : "default" }) }),
@@ -65,18 +65,7 @@ function SectionCard({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.cn(
-              "min-w-0 px-4 pt-3 pb-4",
-              fillHeight && "flex-1",
-              danger ? "bg-accent2/4" : null,
-              contentClassName
-            ),
-            children
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("min-w-0 px-4 pt-3 pb-4", fillHeight && "flex-1", contentClassName), children })
       ]
     }
   );

package/dist/components/SectionCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.cjs.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3 id={id} className={cn('text-heading text-foreground', danger && 'text-accent2', className)}>\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-1 max-w-[62ch]',\n            danger ? 'text-caption text-accent2/70' : 'text-caption text-muted-foreground',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-4 pt-3 pb-4',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","cn"],"mappings":";;;;;;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,IAAQ,SAAA,EAAWC,WAAA,CAAG,gCAAgC,MAAA,IAAU,cAAA,EAAgB,SAAS,CAAA,EAC1F,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,eAAe,IAAA,oBACdD,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,mBAAA;AAAA,UACA,SAAS,8BAAA,GAAiC,oCAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;ACtBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACEH,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWG,WAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,eAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAH,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWG,WAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAAA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAOA,cAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,WAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;;"}
+{"version":3,"file":"SectionCard.cjs.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  return (\n    <>\n      <Txt\n        as=\"h3\"\n        variant=\"heading\"\n        tone=\"ink\"\n        id={id}\n        className={cn(tone === 'danger' && 'text-destructive-subtle-foreground', className)}\n      >\n        {title}\n      </Txt>\n      {description != null && (\n        <Txt variant=\"caption\" tone=\"muted\" className={cn('mt-1 max-w-[62ch]', descriptionClassName)}>\n          {description}\n        </Txt>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-destructive-edge' : 'border-border',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-destructive-subtle' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div className={cn('min-w-0 px-4 pt-3 pb-4', fillHeight && 'flex-1', contentClassName)}>{children}</div>\n    </section>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","Txt","cn"],"mappings":";;;;;;;;AAaO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,IAAA;AAAA,QACH,OAAA,EAAQ,SAAA;AAAA,QACR,IAAA,EAAK,KAAA;AAAA,QACL,EAAA;AAAA,QACA,SAAA,EAAWC,WAAA,CAAG,IAAA,KAAS,QAAA,IAAY,sCAAsC,SAAS,CAAA;AAAA,QAEjF,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,WAAA,IAAe,IAAA,oBACdF,cAAA,CAACC,OAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAWC,WAAA,CAAG,mBAAA,EAAqB,oBAAoB,GACxF,QAAA,EAAA,WAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;ACtBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACEJ,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWI,WAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,yBAAA,GAA4B,eAAA;AAAA,QACrC;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAJ,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWI,WAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,uBAAA,GAA0B;AAAA,aACrC;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAAA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAOA,cAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACAA,cAAA,CAAC,SAAI,SAAA,EAAWE,WAAA,CAAG,0BAA0B,UAAA,IAAc,QAAA,EAAU,gBAAgB,CAAA,EAAI,QAAA,EAAS;AAAA;AAAA;AAAA,GACpG;AAEJ;;;;;"}

package/dist/components/SectionCard.es.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { T as Txt } from '../Txt-BP1SRHmL.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 
 function CardHeading({
@@ -9,20 +10,19 @@ function CardHeading({
   className,
   descriptionClassName
 }) {
-  const danger = tone === "danger";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("h3", { id, className: cn("text-heading text-foreground", danger && "text-accent2", className), children: title }),
-    description != null && /* @__PURE__ */ jsx(
-      "p",
+    /* @__PURE__ */ jsx(
+      Txt,
       {
-        className: cn(
-          "mt-1 max-w-[62ch]",
-          danger ? "text-caption text-accent2/70" : "text-caption text-muted-foreground",
-          descriptionClassName
-        ),
-        children: description
+        as: "h3",
+        variant: "heading",
+        tone: "ink",
+        id,
+        className: cn(tone === "danger" && "text-destructive-subtle-foreground", className),
+        children: title
       }
-    )
+    ),
+    description != null && /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", className: cn("mt-1 max-w-[62ch]", descriptionClassName), children: description })
   ] });
 }
 
@@ -44,7 +44,7 @@ function SectionCard({
       className: cn(
         "overflow-hidden rounded-2xl border",
         fillHeight && "flex h-full flex-col",
-        danger ? "border-accent2/25" : "border-border",
+        danger ? "border-destructive-edge" : "border-border",
         className
       ),
       children: [
@@ -53,7 +53,7 @@ function SectionCard({
           {
             className: cn(
               "flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
-              danger ? "bg-accent2/8" : "bg-surface-overlay-soft"
+              danger ? "bg-destructive-subtle" : "bg-surface-overlay-soft"
             ),
             children: [
               /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(CardHeading, { title, description, tone: danger ? "danger" : "default" }) }),
@@ -61,18 +61,7 @@ function SectionCard({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "min-w-0 px-4 pt-3 pb-4",
-              fillHeight && "flex-1",
-              danger ? "bg-accent2/4" : null,
-              contentClassName
-            ),
-            children
-          }
-        )
+        /* @__PURE__ */ jsx("div", { className: cn("min-w-0 px-4 pt-3 pb-4", fillHeight && "flex-1", contentClassName), children })
       ]
     }
   );

package/dist/components/SectionCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.es.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3 id={id} className={cn('text-heading text-foreground', danger && 'text-accent2', className)}>\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-1 max-w-[62ch]',\n            danger ? 'text-caption text-accent2/70' : 'text-caption text-muted-foreground',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-4 pt-3 pb-4',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,IAAQ,SAAA,EAAW,EAAA,CAAG,gCAAgC,MAAA,IAAU,cAAA,EAAgB,SAAS,CAAA,EAC1F,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,eAAe,IAAA,oBACd,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,mBAAA;AAAA,UACA,SAAS,8BAAA,GAAiC,oCAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;ACtBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,eAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAO,GAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SectionCard.es.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  return (\n    <>\n      <Txt\n        as=\"h3\"\n        variant=\"heading\"\n        tone=\"ink\"\n        id={id}\n        className={cn(tone === 'danger' && 'text-destructive-subtle-foreground', className)}\n      >\n        {title}\n      </Txt>\n      {description != null && (\n        <Txt variant=\"caption\" tone=\"muted\" className={cn('mt-1 max-w-[62ch]', descriptionClassName)}>\n          {description}\n        </Txt>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-destructive-edge' : 'border-border',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-destructive-subtle' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div className={cn('min-w-0 px-4 pt-3 pb-4', fillHeight && 'flex-1', contentClassName)}>{children}</div>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,IAAA;AAAA,QACH,OAAA,EAAQ,SAAA;AAAA,QACR,IAAA,EAAK,KAAA;AAAA,QACL,EAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,IAAA,KAAS,QAAA,IAAY,sCAAsC,SAAS,CAAA;AAAA,QAEjF,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,WAAA,IAAe,IAAA,oBACd,GAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,oBAAoB,GACxF,QAAA,EAAA,WAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;ACtBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,yBAAA,GAA4B,eAAA;AAAA,QACrC;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,uBAAA,GAA0B;AAAA,aACrC;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAO,GAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACA,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,0BAA0B,UAAA,IAAc,QAAA,EAAU,gBAAgB,CAAA,EAAI,QAAA,EAAS;AAAA;AAAA;AAAA,GACpG;AAEJ;;;;"}

package/dist/components/Select.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select = require('../select-C2IbXjKQ.cjs');
+const select = require('../select-C0ZGSJYa.cjs');
 
 
 

package/dist/components/Select.es.js

@@ -1,2 +1,2 @@
-export { S as Select, a as SelectContent, b as SelectGroup, c as SelectItem, d as SelectTrigger, e as SelectValue } from '../select-B_xxIbdq.js';
+export { S as Select, a as SelectContent, b as SelectGroup, c as SelectItem, d as SelectTrigger, e as SelectValue } from '../select-ch8imm15.js';
 //# sourceMappingURL=Select.es.js.map

package/dist/components/SideDialog.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const sideDialog = require('../side-dialog-2JVgN0vs.cjs');
+const sideDialog = require('../side-dialog-7P9aEC4v.cjs');
 
 
 

package/dist/components/SideDialog.es.js

@@ -1,2 +1,2 @@
-export { S as SideDialog } from '../side-dialog-BCREZ1dF.js';
+export { S as SideDialog } from '../side-dialog-D2O3Y7GB.js';
 //# sourceMappingURL=SideDialog.es.js.map

package/dist/components/Slider.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const slider = require('../slider-C-Fda4HC.cjs');
+const slider = require('../slider-T_BIZUV0.cjs');
 
 
 

package/dist/components/Slider.es.js

@@ -1,2 +1,2 @@
-export { S as Slider } from '../slider-MM3K0Pyv.js';
+export { S as Slider } from '../slider-D9dd_fVN.js';
 //# sourceMappingURL=Slider.es.js.map

package/dist/components/StatusIndicators.cjs.js

@@ -7,6 +7,8 @@ const utils_cn = require('../cn-DG0X1KEP.cjs');
 const React = require('react');
 const popover = require('../popover-lBqKiPtp.cjs');
 const tooltip = require('../tooltip-DIZ5oqjV.cjs');
+const Txt = require('../Txt-DPmEpNbp.cjs');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
 
 const deployStates = {
   ready: { label: "Ready", tone: "success" },
@@ -17,18 +19,18 @@ const deployStates = {
   error: { label: "Error", tone: "error" }
 };
 const TONE_FILL = {
-  success: "bg-notice-success",
-  progress: "bg-notice-warning",
-  error: "bg-notice-destructive",
+  success: "bg-success-indicator",
+  progress: "bg-warning-bright",
+  error: "bg-destructive-indicator",
   neutral: "bg-muted-foreground"
 };
 const TONE_RING = {
-  success: "border-notice-success",
-  progress: "border-notice-warning",
-  error: "border-notice-destructive",
+  success: "border-success-indicator",
+  progress: "border-warning-bright",
+  error: "border-destructive-indicator",
   neutral: "border-muted-foreground"
 };
-const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
+const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-border before:border-t-warning-bright before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
 function statusToneFill(tone) {
   return TONE_FILL[tone];
 }
@@ -77,17 +79,7 @@ function StatusDotPopoverInner({
     /* @__PURE__ */ jsxRuntime.jsx(
       popover.PopoverTrigger,
       {
-        render: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": resolved.label,
-            className: statusDotClass(
-              resolved,
-              "outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2"
-            )
-          }
-        )
+        render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": resolved.label, className: statusDotClass(resolved, primitives_transitions.focusRing) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -100,7 +92,7 @@ function StatusDotPopoverInner({
         onMouseEnter: onHoverOpen,
         onMouseLeave: onHoverScheduleClose,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-column text-foreground", children: resolved.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "column", tone: "ink", children: resolved.label }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-pretty text-muted-foreground", children: resolved.description })
         ]
       }
@@ -131,10 +123,7 @@ function StatusDot({
           {
             type: "button",
             "aria-label": presented.label,
-            className: statusDotClass(
-              presented,
-              "outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2"
-            )
+            className: statusDotClass(presented, utils_cn.cn("cursor-default", primitives_transitions.focusRing))
           }
         )
       }

package/dist/components/StatusIndicators.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicators.cjs.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-notice-success',\n  progress: 'border-notice-warning',\n  error: 'border-notice-destructive',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["cn","jsxs","jsx","useState","useRef","useEffect","Popover","PopoverTrigger","PopoverContent","presented","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"StatusIndicators.cjs.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-success-indicator',\n  progress: 'bg-warning-bright',\n  error: 'bg-destructive-indicator',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-success-indicator',\n  progress: 'border-warning-bright',\n  error: 'border-destructive-indicator',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-border before:border-t-warning-bright before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<button type=\"button\" aria-label={resolved.label} className={statusDotClass(resolved, focusRing)} />}\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <Txt variant=\"column\" tone=\"ink\">\n            {resolved.label}\n          </Txt>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(presented, cn('cursor-default', focusRing))}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["cn","jsxs","jsx","useState","useRef","useEffect","Popover","PopoverTrigger","focusRing","PopoverContent","Txt","presented","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}

package/dist/components/StatusIndicators.es.js

@@ -3,6 +3,8 @@ import { c as cn } from '../cn-65Adrsfj.js';
 import { useState, useRef, useEffect } from 'react';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-Dg70UGyn.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DsQPiynb.js';
+import { T as Txt } from '../Txt-BP1SRHmL.js';
+import { focusRing } from '../primitives/transitions.es.js';
 
 const deployStates = {
   ready: { label: "Ready", tone: "success" },
@@ -13,18 +15,18 @@ const deployStates = {
   error: { label: "Error", tone: "error" }
 };
 const TONE_FILL = {
-  success: "bg-notice-success",
-  progress: "bg-notice-warning",
-  error: "bg-notice-destructive",
+  success: "bg-success-indicator",
+  progress: "bg-warning-bright",
+  error: "bg-destructive-indicator",
   neutral: "bg-muted-foreground"
 };
 const TONE_RING = {
-  success: "border-notice-success",
-  progress: "border-notice-warning",
-  error: "border-notice-destructive",
+  success: "border-success-indicator",
+  progress: "border-warning-bright",
+  error: "border-destructive-indicator",
   neutral: "border-muted-foreground"
 };
-const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
+const PROGRESS_DECORATION = "relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-border before:border-t-warning-bright before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none";
 function statusToneFill(tone) {
   return TONE_FILL[tone];
 }
@@ -73,17 +75,7 @@ function StatusDotPopoverInner({
     /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
-        render: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": resolved.label,
-            className: statusDotClass(
-              resolved,
-              "outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2"
-            )
-          }
-        )
+        render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": resolved.label, className: statusDotClass(resolved, focusRing) })
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -96,7 +88,7 @@ function StatusDotPopoverInner({
         onMouseEnter: onHoverOpen,
         onMouseLeave: onHoverScheduleClose,
         children: [
-          /* @__PURE__ */ jsx("p", { className: "text-column text-foreground", children: resolved.label }),
+          /* @__PURE__ */ jsx(Txt, { variant: "column", tone: "ink", children: resolved.label }),
           /* @__PURE__ */ jsx("p", { className: "mt-1 text-pretty text-muted-foreground", children: resolved.description })
         ]
       }
@@ -127,10 +119,7 @@ function StatusDot({
           {
             type: "button",
             "aria-label": presented.label,
-            className: statusDotClass(
-              presented,
-              "outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2"
-            )
+            className: statusDotClass(presented, cn("cursor-default", focusRing))
           }
         )
       }

package/dist/components/StatusIndicators.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicators.es.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-notice-success',\n  progress: 'bg-notice-warning',\n  error: 'bg-notice-destructive',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-notice-success',\n  progress: 'border-notice-warning',\n  error: 'border-notice-destructive',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-notice-warning/20 before:border-t-notice-warning before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={resolved.label}\n              className={statusDotClass(\n                resolved,\n                'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n              )}\n            />\n          }\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <p className=\"text-column text-foreground\">{resolved.label}</p>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(\n              presented,\n              'outline-hidden focus-visible:ring-ring focus-visible:ring-offset-background cursor-default focus-visible:ring-2 focus-visible:ring-offset-2',\n            )}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["presented"],"mappings":"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"}
+{"version":3,"file":"StatusIndicators.es.js","sources":["../../src/ds/components/StatusIndicators/status-dot-styles.ts","../../src/ds/components/StatusIndicators/status.tsx","../../src/ds/components/StatusIndicators/status-dot.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type StatusTone = 'success' | 'progress' | 'error' | 'neutral';\nexport type StatusDotGlyph = 'filled' | 'ring';\n\nexport type StatusPresentation = {\n  label: string;\n  tone: StatusTone;\n  glyph?: StatusDotGlyph;\n  description: string;\n};\n\nexport type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;\n\nexport type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';\n\nexport const deployStates = {\n  ready: { label: 'Ready', tone: 'success' },\n  building: { label: 'Building', tone: 'progress' },\n  idle: { label: 'Idle', tone: 'neutral', glyph: 'ring' },\n  queued: { label: 'Queued', tone: 'neutral', glyph: 'ring' },\n  stopped: { label: 'Stopped', tone: 'neutral' },\n  error: { label: 'Error', tone: 'error' },\n} satisfies Record<DeployState, Omit<StatusPresentation, 'description'>>;\n\nconst TONE_FILL: Record<StatusTone, string> = {\n  success: 'bg-success-indicator',\n  progress: 'bg-warning-bright',\n  error: 'bg-destructive-indicator',\n  neutral: 'bg-muted-foreground',\n};\n\nconst TONE_RING: Record<StatusTone, string> = {\n  success: 'border-success-indicator',\n  progress: 'border-warning-bright',\n  error: 'border-destructive-indicator',\n  neutral: 'border-muted-foreground',\n};\n\nconst PROGRESS_DECORATION =\n  \"relative motion-safe:animate-pulse before:absolute before:-inset-1 before:rounded-full before:border before:border-border before:border-t-warning-bright before:content-[''] motion-safe:before:animate-spin motion-reduce:before:animate-none\";\n\nexport function statusToneFill(tone: StatusTone): string {\n  return TONE_FILL[tone];\n}\n\nexport function statusDotClass(\n  { tone, glyph = 'filled' }: Pick<StatusPresentation, 'tone' | 'glyph'>,\n  className?: string,\n): string {\n  return cn(\n    'inline-block size-2 shrink-0 rounded-full',\n    glyph === 'ring' ? cn('border bg-transparent', TONE_RING[tone]) : TONE_FILL[tone],\n    tone === 'progress' && PROGRESS_DECORATION,\n    className,\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { statusDotClass, type StatusPresentation } from './status-dot-styles';\nimport { cn } from '@/lib/utils';\n\nexport type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {\n  presentation: StatusPresentation;\n};\n\nexport function Status({ presentation, className, ...props }: StatusProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2', className)} {...props}>\n      <span className={statusDotClass(presentation)} aria-hidden />\n      {presentation.label}\n    </span>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { statusDotClass, type StatusPresentation, type StatusPresentationFn } from './status-dot-styles';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst HOVER_POPOVER_LEAVE_MS = 120;\n\nfunction StatusDotPopoverInner<T>({\n  status,\n  presentation,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n}) {\n  const [open, setOpen] = useState(false);\n  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const resolved = presentation(status);\n\n  useEffect(\n    () => () => {\n      if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    },\n    [],\n  );\n\n  function onHoverOpen() {\n    if (leaveTimer.current !== undefined) {\n      clearTimeout(leaveTimer.current);\n      leaveTimer.current = undefined;\n    }\n    setOpen(true);\n  }\n\n  function onHoverScheduleClose() {\n    if (leaveTimer.current !== undefined) clearTimeout(leaveTimer.current);\n    leaveTimer.current = setTimeout(() => setOpen(false), HOVER_POPOVER_LEAVE_MS);\n  }\n\n  return (\n    <span className=\"pointer-events-auto inline-flex\" onMouseEnter={onHoverOpen} onMouseLeave={onHoverScheduleClose}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<button type=\"button\" aria-label={resolved.label} className={statusDotClass(resolved, focusRing)} />}\n        />\n        <PopoverContent\n          side=\"top\"\n          align=\"start\"\n          sideOffset={6}\n          className=\"w-auto max-w-xs px-2.5 py-1.5 text-meta text-foreground\"\n          onMouseEnter={onHoverOpen}\n          onMouseLeave={onHoverScheduleClose}\n        >\n          <Txt variant=\"column\" tone=\"ink\">\n            {resolved.label}\n          </Txt>\n          <p className=\"mt-1 text-pretty text-muted-foreground\">{resolved.description}</p>\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n\nexport function StatusDot<T>({\n  status,\n  presentation,\n  variant = 'popover',\n  decorative = false,\n  resolved,\n}: {\n  status: T | null;\n  presentation: StatusPresentationFn<T>;\n  variant?: 'popover' | 'static';\n  decorative?: boolean;\n  resolved?: StatusPresentation;\n}) {\n  if (decorative) {\n    const presented = resolved ?? presentation(status);\n    return <span className={statusDotClass(presented)} aria-hidden />;\n  }\n\n  if (variant === 'popover') {\n    return <StatusDotPopoverInner status={status} presentation={presentation} />;\n  }\n\n  const presented = resolved ?? presentation(status);\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            type=\"button\"\n            aria-label={presented.label}\n            className={statusDotClass(presented, cn('cursor-default', focusRing))}\n          />\n        }\n      />\n      <TooltipContent side=\"top\" className=\"max-w-xs text-pretty\">\n        {presented.description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["presented"],"mappings":"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"}

package/dist/components/Steps.cjs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const spinner = require('../spinner-BCpN7LL9.cjs');
+const Txt = require('../Txt-DPmEpNbp.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
@@ -43,8 +44,8 @@ function StepStatusMarker({ status, variant }) {
       "span",
       {
         className: utils_cn.cn("flex size-4 items-center justify-center self-center [&>svg]:size-4", primitives_transitions.transitions.colors, {
-          "[&>svg]:text-positive1": status === "success",
-          "[&>svg]:text-negative1": status === "failed"
+          "[&>svg]:text-success-indicator": status === "success",
+          "[&>svg]:text-destructive-indicator": status === "failed"
         }),
         children: status === "pending" ? /* @__PURE__ */ jsxRuntime.jsx(PendingRing, {}) : getStatusIcon(status)
       }
@@ -58,12 +59,12 @@ function StepStatusMarker({ status, variant }) {
         primitives_transitions.transitions.colors,
         primitives_transitions.transitions.transform,
         {
-          "[&>svg]:text-notice-success-fg": status === "success",
-          "[&>svg]:text-notice-destructive-fg": status === "failed",
+          "[&>svg]:text-success-indicator": status === "success",
+          "[&>svg]:text-destructive-indicator": status === "failed",
           "border border-dashed border-placeholder": status === "pending",
           "[&>svg]:size-4": status !== "running",
-          "bg-accent1Dark": status === "success",
-          "bg-accent2Dark": status === "failed",
+          "bg-success-subtle": status === "success",
+          "bg-destructive-subtle": status === "failed",
           "scale-110": status === "success" || status === "failed"
         }
       ),
@@ -72,6 +73,7 @@ function StepStatusMarker({ status, variant }) {
   );
 }
 function ProcessStepListItem({ step, isActive, position, variant = "default" }) {
+  const stepTone = isActive || step.status === "success" ? "ink" : "muted";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -85,31 +87,13 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 grid-cols-[auto_1fr] gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: utils_cn.cn("flex min-w-6 justify-end text-body", primitives_transitions.transitions.colors, {
-                "text-foreground": isActive || step.status === "success",
-                "text-muted-foreground": !isActive && step.status !== "success"
-              }),
-              children: [
-                position,
-                "."
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", tone: stepTone, className: utils_cn.cn("flex min-w-6 justify-end", primitives_transitions.transitions.colors), children: [
+            position,
+            "."
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "h4",
-              {
-                className: utils_cn.cn("text-body", primitives_transitions.transitions.colors, {
-                  "text-foreground": isActive || step.status === "success",
-                  "text-muted-foreground": !isActive && step.status !== "success"
-                }),
-                children: step.title
-              }
-            ),
-            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: utils_cn.cn("-mt-0.5 text-body text-placeholder", { truncate: variant === "plain" }), children: step.description })
+            /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "h4", tone: stepTone, className: primitives_transitions.transitions.colors, children: step.title }),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "faint", className: utils_cn.cn("-mt-0.5", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(StepStatusMarker, { status: step.status, variant })
@@ -131,7 +115,7 @@ function ProcessStepProgressBar({ steps }) {
         "div",
         {
           className: utils_cn.cn("relative flex h-8 items-center justify-end", primitives_transitions.transitions.colors, {
-            "bg-accent1Dark": step.status === "success" && steps?.[idx - 1]?.status === "success"
+            "bg-success-subtle": step.status === "success" && steps?.[idx - 1]?.status === "success"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -142,8 +126,8 @@ function ProcessStepProgressBar({ steps }) {
                 primitives_transitions.transitions.transform,
                 {
                   "border border-dashed border-placeholder": step.status === "pending",
-                  "scale-110 bg-accent1Dark text-notice-success-fg": step.status === "success",
-                  "scale-110 bg-accent2Dark text-notice-destructive-fg": step.status === "failed"
+                  "scale-110 bg-success-subtle text-success-subtle-foreground": step.status === "success",
+                  "scale-110 bg-destructive-subtle text-destructive-subtle-foreground": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {}) : idx + 1