@mastra/playground-ui 59.0.0 → 60.0.0-alpha.1

package/dist/style.css

@@ -630,6 +630,10 @@
 @layer components;
 
 @layer utilities {
+  .\@container\/workflow-timeline {
+    container: workflow-timeline / inline-size;
+  }
+
   .\@container {
     container-type: inline-size;
   }
@@ -799,6 +803,10 @@
     top: calc(var(--spacing) * 11);
   }
 
+  .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
+
   .top-\[50\%\] {
     top: 50%;
   }
@@ -983,6 +991,10 @@
     grid-column: span 3 / span 3;
   }
 
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
   .col-span-full {
     grid-column: 1 / -1;
   }
@@ -991,6 +1003,10 @@
     grid-column-start: 1;
   }
 
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+
   .col-start-\[icon\] {
     grid-column-start: icon;
   }
@@ -1142,6 +1158,10 @@
     margin-inline: calc(var(--spacing) * 4);
   }
 
+  .mx-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+
   .mx-6 {
     margin-inline: calc(var(--spacing) * 6);
   }
@@ -1150,6 +1170,10 @@
     margin-inline: auto;
   }
 
+  .-my-6 {
+    margin-block: calc(var(--spacing) * -6);
+  }
+
   .my-1 {
     margin-block: var(--spacing);
   }
@@ -1166,6 +1190,10 @@
     margin-block: calc(var(--spacing) * 3);
   }
 
+  .my-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+
   .prose {
     color: var(--tw-prose-body);
     max-width: 65ch;
@@ -1631,6 +1659,10 @@
     margin-top: calc(var(--spacing) * -.5);
   }
 
+  .-mt-5 {
+    margin-top: calc(var(--spacing) * -5);
+  }
+
   .-mt-12 {
     margin-top: calc(var(--spacing) * -12);
   }
@@ -1775,6 +1807,10 @@
     margin-left: calc(var(--spacing) * -1);
   }
 
+  .-ml-2 {
+    margin-left: calc(var(--spacing) * -2);
+  }
+
   .-ml-3 {
     margin-left: calc(var(--spacing) * -3);
   }
@@ -2085,6 +2121,10 @@
     height: calc(var(--spacing) * 1.5);
   }
 
+  .h-1\/2 {
+    height: 50%;
+  }
+
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -2261,10 +2301,18 @@
     height: 80vh;
   }
 
+  .h-\[150px\] {
+    height: 150px;
+  }
+
   .h-\[160px\] {
     height: 160px;
   }
 
+  .h-\[240px\] {
+    height: 240px;
+  }
+
   .h-\[400px\] {
     height: 400px;
   }
@@ -2285,6 +2333,10 @@
     height: calc(100vh - 6rem) !important;
   }
 
+  .h-\[calc\(100vh-126px\)\] {
+    height: calc(100vh - 126px);
+  }
+
   .h-\[var\(--collapsible-panel-height\)\] {
     height: var(--collapsible-panel-height);
   }
@@ -2377,10 +2429,22 @@
     max-height: calc(var(--spacing) * 64);
   }
 
+  .max-h-72 {
+    max-height: calc(var(--spacing) * 72);
+  }
+
   .max-h-80 {
     max-height: calc(var(--spacing) * 80);
   }
 
+  .max-h-100 {
+    max-height: calc(var(--spacing) * 100);
+  }
+
+  .max-h-150 {
+    max-height: calc(var(--spacing) * 150);
+  }
+
   .max-h-\[22rem\] {
     max-height: 22rem;
   }
@@ -2389,10 +2453,18 @@
     max-height: 30vh;
   }
 
+  .max-h-\[40vh\] {
+    max-height: 40vh;
+  }
+
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
 
+  .max-h-\[75\%\] {
+    max-height: 75%;
+  }
+
   .max-h-\[80dvh\] {
     max-height: 80dvh;
   }
@@ -2413,6 +2485,10 @@
     max-height: calc(85vh + 3rem);
   }
 
+  .max-h-\[calc\(100cqh-64px\)\] {
+    max-height: calc(100cqh - 64px);
+  }
+
   .max-h-\[calc\(100dvh-2rem\)\] {
     max-height: calc(100dvh - 2rem);
   }
@@ -2425,6 +2501,18 @@
     max-height: min(14rem, 32dvh);
   }
 
+  .max-h-\[min\(35\%\,280px\)\] {
+    max-height: min(35%, 280px);
+  }
+
+  .max-h-\[min\(320px\,40dvh\)\] {
+    max-height: min(320px, 40dvh);
+  }
+
+  .max-h-\[min\(720px\,calc\(100dvh-112px\)\)\] {
+    max-height: min(720px, 100dvh - 112px);
+  }
+
   .max-h-\[min\(var\(--spacing-dropdown\)\,60dvh\)\] {
     max-height: min(var(--spacing-dropdown), 60dvh);
   }
@@ -2509,10 +2597,18 @@
     min-height: calc(var(--spacing) * 28);
   }
 
+  .min-h-30 {
+    min-height: calc(var(--spacing) * 30);
+  }
+
   .min-h-32 {
     min-height: calc(var(--spacing) * 32);
   }
 
+  .min-h-45 {
+    min-height: calc(var(--spacing) * 45);
+  }
+
   .min-h-50 {
     min-height: calc(var(--spacing) * 50);
   }
@@ -2525,6 +2621,10 @@
     min-height: calc(var(--spacing) * 72);
   }
 
+  .min-h-100 {
+    min-height: calc(var(--spacing) * 100);
+  }
+
   .min-h-140 {
     min-height: calc(var(--spacing) * 140);
   }
@@ -2609,6 +2709,10 @@
     width: calc(var(--spacing) * 3);
   }
 
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+
   .w-3\/4 {
     width: 75%;
   }
@@ -2689,6 +2793,10 @@
     width: calc(var(--spacing) * 32);
   }
 
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -3201,6 +3309,10 @@
     max-width: calc(100% - 2rem);
   }
 
+  .max-w-\[calc\(100\%-16px\)\] {
+    max-width: calc(100% - 16px);
+  }
+
   .max-w-\[calc\(100dvw-1rem\)\] {
     max-width: calc(100dvw - 1rem);
   }
@@ -3249,6 +3361,10 @@
     min-width: 0;
   }
 
+  .min-w-0\.5 {
+    min-width: calc(var(--spacing) * .5);
+  }
+
   .min-w-2 {
     min-width: calc(var(--spacing) * 2);
   }
@@ -3345,6 +3461,10 @@
     flex: 1;
   }
 
+  .flex-initial {
+    flex: 0 auto;
+  }
+
   .flex-none {
     flex: none;
   }
@@ -3369,6 +3489,10 @@
     flex-basis: calc(var(--spacing) * 4);
   }
 
+  .basis-\[44\%\] {
+    flex-basis: 44%;
+  }
+
   .basis-auto {
     flex-basis: auto;
   }
@@ -3608,6 +3732,14 @@
     appearance: none;
   }
 
+  .auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -3772,6 +3904,10 @@
     grid-template-columns: minmax(10rem, 2fr) minmax(12rem, 3fr);
   }
 
+  .grid-cols-\[minmax\(130px\,1fr\)_minmax\(64px\,1fr\)_56px_64px\] {
+    grid-template-columns: minmax(130px, 1fr) minmax(64px, 1fr) 56px 64px;
+  }
+
   .grid-cols-subgrid {
     grid-template-columns: subgrid;
   }
@@ -4409,7 +4545,7 @@
     }
   }
 
-  .border-accent2\/25 {
+  .border-accent2, .border-accent2\/25 {
     border-color: var(--color-accent2);
   }
 
@@ -4833,6 +4969,16 @@
     background-color: var(--color-accent2Dark);
   }
 
+  .bg-accent3\/60 {
+    background-color: var(--color-accent3);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-accent3\/60 {
+      background-color: color-mix(in oklab, var(--color-accent3) 60%, transparent);
+    }
+  }
+
   .bg-accent3Dark {
     background-color: var(--color-accent3Dark);
   }
@@ -4847,6 +4993,16 @@
     }
   }
 
+  .bg-accent6\/60 {
+    background-color: var(--color-accent6);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-accent6\/60 {
+      background-color: color-mix(in oklab, var(--color-accent6) 60%, transparent);
+    }
+  }
+
   .bg-accent6Dark {
     background-color: var(--color-accent6Dark);
   }
@@ -5317,6 +5473,16 @@
     }
   }
 
+  .bg-muted-foreground\/25 {
+    background-color: var(--muted-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted-foreground\/25 {
+      background-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
+    }
+  }
+
   .bg-muted-foreground\/30 {
     background-color: var(--muted-foreground);
   }
@@ -5327,6 +5493,26 @@
     }
   }
 
+  .bg-muted-foreground\/40 {
+    background-color: var(--muted-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted-foreground\/40 {
+      background-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
+    }
+  }
+
+  .bg-muted-foreground\/60 {
+    background-color: var(--muted-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted-foreground\/60 {
+      background-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
+    }
+  }
+
   .bg-muted\/40 {
     background-color: var(--muted);
   }
@@ -5367,6 +5553,16 @@
     }
   }
 
+  .bg-negative1\/60 {
+    background-color: var(--color-negative1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-negative1\/60 {
+      background-color: color-mix(in oklab, var(--color-negative1) 60%, transparent);
+    }
+  }
+
   .bg-notice-destructive, .bg-notice-destructive\/20 {
     background-color: var(--color-notice-destructive);
   }
@@ -6876,6 +7072,10 @@
     text-decoration-line: underline;
   }
 
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+
   .accent-foreground {
     accent-color: var(--foreground);
   }
@@ -7794,7 +7994,7 @@
       background-color: var(--fill-subtle);
     }
 
-    .group-hover\/event\:opacity-100:is(:where(.group\/event):hover *), .group-hover\/message\:opacity-100:is(:where(.group\/message):hover *), .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
+    .group-hover\/event\:opacity-100:is(:where(.group\/event):hover *), .group-hover\/message\:opacity-100:is(:where(.group\/message):hover *), .group-hover\/resize\:opacity-100:is(:where(.group\/resize):hover *), .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
       opacity: 1;
     }
 
@@ -7859,7 +8059,17 @@
     --tw-ring-color: var(--color-accent3);
   }
 
-  .group-focus-visible\/event\:opacity-100:is(:where(.group\/event):focus-visible *), .group-focus-visible\/row\:opacity-100:is(:where(.group\/row):focus-visible *) {
+  .group-focus-visible\/event\:opacity-100:is(:where(.group\/event):focus-visible *) {
+    opacity: 1;
+  }
+
+  .group-focus-visible\/resize\:via-accent1:is(:where(.group\/resize):focus-visible *) {
+    --tw-gradient-via: var(--color-accent1);
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .group-focus-visible\/resize\:opacity-100:is(:where(.group\/resize):focus-visible *), .group-focus-visible\/row\:opacity-100:is(:where(.group\/row):focus-visible *) {
     opacity: 1;
   }
 
@@ -7877,6 +8087,25 @@
     opacity: 1;
   }
 
+  .group-active\/resize\:via-foreground\/45:is(:where(.group\/resize):active *) {
+    --tw-gradient-via: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .group-active\/resize\:via-foreground\/45:is(:where(.group\/resize):active *) {
+      --tw-gradient-via: color-mix(in oklab, var(--foreground) 45%, transparent);
+    }
+  }
+
+  .group-active\/resize\:via-foreground\/45:is(:where(.group\/resize):active *) {
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .group-active\/resize\:opacity-100:is(:where(.group\/resize):active *) {
+    opacity: 1;
+  }
+
   .group-active\/switch\:w-6:is(:where(.group\/switch):active *) {
     width: calc(var(--spacing) * 6);
   }
@@ -8213,6 +8442,11 @@
     inset: calc(var(--spacing) * -1);
   }
 
+  .before\:-inset-1\.5:before {
+    content: var(--tw-content);
+    inset: calc(var(--spacing) * -1.5);
+  }
+
   .before\:inset-0:before {
     content: var(--tw-content);
     inset: 0;
@@ -8710,6 +8944,10 @@
     padding-right: calc(var(--spacing) * 3);
   }
 
+  .last\:pb-0:last-child {
+    padding-bottom: 0;
+  }
+
   .first-of-type\:mt-3:first-of-type {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -9113,6 +9351,10 @@
     opacity: .7;
   }
 
+  .focus-visible\:rounded-sm:focus-visible {
+    border-radius: var(--radius-sm);
+  }
+
   .focus-visible\:border-accent1:focus-visible {
     border-color: var(--color-accent1);
   }
@@ -9192,6 +9434,10 @@
     --tw-ring-color: var(--border-focus);
   }
 
+  .focus-visible\:ring-border-strong:focus-visible {
+    --tw-ring-color: var(--border-strong);
+  }
+
   .focus-visible\:ring-ring:focus-visible {
     --tw-ring-color: var(--ring);
   }
@@ -9562,6 +9808,10 @@
     pointer-events: none;
   }
 
+  .aria-disabled\:cursor-default[aria-disabled="true"] {
+    cursor: default;
+  }
+
   .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
     cursor: not-allowed;
   }
@@ -11076,6 +11326,36 @@
     }
   }
 
+  @container workflow-timeline not (min-width: 540px) {
+    .\@max-\[540px\]\/workflow-timeline\:col-span-full {
+      grid-column: 1 / -1;
+    }
+
+    .\@max-\[540px\]\/workflow-timeline\:row-start-2 {
+      grid-row-start: 2;
+    }
+
+    .\@max-\[540px\]\/workflow-timeline\:ml-\[34px\] {
+      margin-left: 34px;
+    }
+
+    .\@max-\[540px\]\/workflow-timeline\:grid-cols-\[minmax\(0\,1fr\)_48px_64px\] {
+      grid-template-columns: minmax(0, 1fr) 48px 64px;
+    }
+
+    .\@max-\[540px\]\/workflow-timeline\:gap-x-1\.5 {
+      column-gap: calc(var(--spacing) * 1.5);
+    }
+
+    .\@max-\[540px\]\/workflow-timeline\:gap-y-1 {
+      row-gap: var(--spacing);
+    }
+
+    .\@max-\[540px\]\/workflow-timeline\:py-2 {
+      padding-block: calc(var(--spacing) * 2);
+    }
+  }
+
   @container (min-width: 28rem) {
     .\@md\:-my-1 {
       margin-block: calc(var(--spacing) * -1);
@@ -11436,6 +11716,12 @@
     opacity: 1;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:\[\&_\[data-slot\=collapsible-content\]\]\:transition-none [data-slot="collapsible-content"] {
+      transition-property: none;
+    }
+  }
+
   .\[\&_\[data-slot\=command-input-wrapper\]_svg\]\:size-5 [data-slot="command-input-wrapper"] svg {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -11685,6 +11971,21 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .\[\&\+\&\]\:border-t + .\[\&\+\&\]\:border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
+  .\[\&\+\&\]\:border-border\/50 + .\[\&\+\&\]\:border-border\/50 {
+    border-color: var(--border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&\+\&\]\:border-border\/50 + .\[\&\+\&\]\:border-border\/50 {
+      border-color: color-mix(in oklab, var(--border) 50%, transparent);
+    }
+  }
+
   .\[\&\.selected-row\]\:border.selected-row {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -12335,6 +12636,11 @@
     flex-shrink: 0;
   }
 
+  .\[\&\>svg\]\:translate-y-1 > svg {
+    --tw-translate-y: var(--spacing);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .\[\&\>svg\]\:\[stroke-width\:1\.5\] > svg {
     stroke-width: 1.5px;
   }

package/dist/text-and-icon-DCLdeWsT.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function TextAndIcon({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-1",
+        "[&_svg]:size-[1.1em] [&_svg]:shrink-0 [&_svg]:opacity-50",
+        "[&_img]:size-[1.2em] [&_img]:shrink-0 [&_img]:opacity-50",
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { TextAndIcon as T };
+//# sourceMappingURL=text-and-icon-DCLdeWsT.js.map

package/dist/text-and-icon-DCLdeWsT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-and-icon-DCLdeWsT.js","sources":["../src/ds/components/Text/text-and-icon.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type TextAndIconProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function TextAndIcon({ children, className }: TextAndIconProps) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-1',\n        '[&_svg]:size-[1.1em] [&_svg]:shrink-0 [&_svg]:opacity-50',\n        '[&_img]:size-[1.2em] [&_img]:shrink-0 [&_img]:opacity-50',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;AAOO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqB;AACrE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yBAAA;AAAA,QACA,0DAAA;AAAA,QACA,0DAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/text-and-icon-DQu30tMc.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function TextAndIcon({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn(
+        "flex items-center gap-1",
+        "[&_svg]:size-[1.1em] [&_svg]:shrink-0 [&_svg]:opacity-50",
+        "[&_img]:size-[1.2em] [&_img]:shrink-0 [&_img]:opacity-50",
+        className
+      ),
+      children
+    }
+  );
+}
+
+exports.TextAndIcon = TextAndIcon;
+//# sourceMappingURL=text-and-icon-DQu30tMc.cjs.map

package/dist/text-and-icon-DQu30tMc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-and-icon-DQu30tMc.cjs","sources":["../src/ds/components/Text/text-and-icon.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type TextAndIconProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function TextAndIcon({ children, className }: TextAndIconProps) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-1',\n        '[&_svg]:size-[1.1em] [&_svg]:shrink-0 [&_svg]:opacity-50',\n        '[&_img]:size-[1.2em] [&_img]:shrink-0 [&_img]:opacity-50',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;AAOO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqB;AACrE,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA,QACA,0DAAA;AAAA,QACA,0DAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/{text-field-block-CRh8sRXP.cjs → text-field-block-BCOCO1W2.cjs}

@@ -2,7 +2,8 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const input = require('./input-bd223EJW.cjs');
-const fieldErrorId = require('./field-error-id-V_WejsRL.cjs');
+const fieldBlock = require('./field-block-BG5E7u9v.cjs');
+const fieldErrorId = require('./field-error-id-B3Z2Zu5y.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 
 function TextFieldBlock({
@@ -26,11 +27,11 @@ function TextFieldBlock({
   ...props
 }) {
   const describedBy = [ariaDescribedBy, errorMsg ? fieldErrorId.fieldErrorId(name) : void 0].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(fieldErrorId.FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
-    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(fieldErrorId.FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldErrorId.FieldBlock.Label, { name, required, disabled, size: labelSize || "bigger", children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(fieldErrorId.FieldBlock.Column, { children: [
-      !labelIsHidden && layout === "vertical" ? /* @__PURE__ */ jsxRuntime.jsx(fieldErrorId.FieldBlock.Label, { name, required, disabled, size: labelSize || "default", children: label }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs(fieldErrorId.FieldBlock.Column, { className: "gap-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, disabled, size: labelSize || "bigger", children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      !labelIsHidden && layout === "vertical" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, disabled, size: labelSize || "default", children: label }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { className: "gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           input.Input,
           {
@@ -47,11 +48,11 @@ function TextFieldBlock({
             ...props
           }
         ),
-        helpText || errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(fieldErrorId.FieldBlock.Message, { name, helpText, errorMsg }) : null
+        helpText || errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Message, { name, helpText, errorMsg }) : null
       ] })
     ] })
   ] });
 }
 
 exports.TextFieldBlock = TextFieldBlock;
-//# sourceMappingURL=text-field-block-CRh8sRXP.cjs.map
+//# sourceMappingURL=text-field-block-BCOCO1W2.cjs.map