@mastra/playground-ui 41.1.0-alpha.2 → 42.0.0-alpha.13

package/dist/style.css

@@ -305,6 +305,8 @@
     --color-border2: var(--border2);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
     --color-surface-overlay-strong: var(--surface-overlay-strong);
+    --color-warning1: var(--warning1);
+    --color-positive1: var(--positive1);
     --color-negative1: var(--negative1);
     --color-notice-success: var(--notice-success);
     --color-notice-success-fg: var(--notice-success-fg);
@@ -1058,6 +1060,10 @@
     margin-top: var(--spacing-2);
   }
 
+  .mt-2\.5 {
+    margin-top: var(--spacing-2_5);
+  }
+
   .mt-3 {
     margin-top: var(--spacing-3);
   }
@@ -1078,6 +1084,18 @@
     margin-top: var(--spacing-8);
   }
 
+  .mt-9 {
+    margin-top: var(--spacing-9);
+  }
+
+  .mt-10 {
+    margin-top: var(--spacing-10);
+  }
+
+  .mt-14 {
+    margin-top: var(--spacing-14);
+  }
+
   .mt-\[3px\] {
     margin-top: 3px;
   }
@@ -1134,6 +1152,10 @@
     margin-bottom: var(--spacing-2);
   }
 
+  .mb-2\.5 {
+    margin-bottom: var(--spacing-2_5);
+  }
+
   .mb-3 {
     margin-bottom: var(--spacing-3);
   }
@@ -1162,6 +1184,10 @@
     margin-left: calc(var(--spacing-5) * -1);
   }
 
+  .-ml-\[\.8em\] {
+    margin-left: -.8em;
+  }
+
   .-ml-px {
     margin-left: -1px;
     margin-left: calc(var(--spacing-px) * -1);
@@ -1203,6 +1229,13 @@
     box-sizing: border-box;
   }
 
+  .line-clamp-1 {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .line-clamp-2 {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -1217,6 +1250,27 @@
     overflow: hidden;
   }
 
+  .line-clamp-4 {
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .line-clamp-5 {
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .line-clamp-6 {
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
   .block {
     display: block;
   }
@@ -1336,6 +1390,11 @@
     height: var(--spacing-16);
   }
 
+  .size-20 {
+    width: var(--spacing-20);
+    height: var(--spacing-20);
+  }
+
   .size-\[0\.6rem\] {
     width: .6rem;
     height: .6rem;
@@ -1575,6 +1634,10 @@
     height: var(--height-table-header);
   }
 
+  .max-h-32 {
+    max-height: var(--spacing-32);
+  }
+
   .max-h-64 {
     max-height: var(--spacing-64);
   }
@@ -1667,6 +1730,10 @@
     min-height: var(--spacing-14);
   }
 
+  .min-h-16 {
+    min-height: var(--spacing-16);
+  }
+
   .min-h-20 {
     min-height: var(--spacing-20);
   }
@@ -1727,6 +1794,10 @@
     width: var(--spacing-2_5);
   }
 
+  .w-2\/3 {
+    width: 66.6667%;
+  }
+
   .w-3 {
     width: var(--spacing-3);
   }
@@ -1799,10 +1870,6 @@
     width: var(--spacing-40);
   }
 
-  .w-48 {
-    width: var(--spacing-48);
-  }
-
   .w-56 {
     width: var(--spacing-56);
   }
@@ -2016,6 +2083,10 @@
     max-width: var(--spacing-24);
   }
 
+  .max-w-40 {
+    max-width: var(--spacing-40);
+  }
+
   .max-w-44 {
     max-width: var(--spacing-44);
   }
@@ -2072,6 +2143,10 @@
     max-width: 100%;
   }
 
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -2124,10 +2199,6 @@
     min-width: var(--spacing-60);
   }
 
-  .min-w-64 {
-    min-width: var(--spacing-64);
-  }
-
   .min-w-72 {
     min-width: var(--spacing-72);
   }
@@ -2447,10 +2518,6 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .grid-cols-\[minmax\(0\,1fr\)_4rem\] {
-    grid-template-columns: minmax(0, 1fr) 4rem;
-  }
-
   .grid-cols-\[minmax\(0\,1fr\)_80px_64px\] {
     grid-template-columns: minmax(0, 1fr) 80px 64px;
   }
@@ -3139,6 +3206,16 @@
     }
   }
 
+  .border-current\/25 {
+    border-color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-current\/25 {
+      border-color: color-mix(in oklab, currentcolor 25%, transparent);
+    }
+  }
+
   .border-emerald-400\/30 {
     border-color: #00d2944d;
   }
@@ -3245,6 +3322,36 @@
     border-color: var(--color-orange-400);
   }
 
+  .border-positive1\/15 {
+    border-color: var(--color-positive1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-positive1\/15 {
+      border-color: color-mix(in oklab, var(--color-positive1) 15%, transparent);
+    }
+  }
+
+  .border-positive1\/25 {
+    border-color: var(--color-positive1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-positive1\/25 {
+      border-color: color-mix(in oklab, var(--color-positive1) 25%, transparent);
+    }
+  }
+
+  .border-positive1\/40 {
+    border-color: var(--color-positive1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-positive1\/40 {
+      border-color: color-mix(in oklab, var(--color-positive1) 40%, transparent);
+    }
+  }
+
   .border-purple-400\/30 {
     border-color: #c07eff4d;
   }
@@ -3501,10 +3608,26 @@
     }
   }
 
-  .bg-neutral1 {
+  .bg-neutral1, .bg-neutral1\/40 {
+    background-color: var(--color-neutral1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral1\/40 {
+      background-color: color-mix(in oklab, var(--color-neutral1) 40%, transparent);
+    }
+  }
+
+  .bg-neutral1\/60 {
     background-color: var(--color-neutral1);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral1\/60 {
+      background-color: color-mix(in oklab, var(--color-neutral1) 60%, transparent);
+    }
+  }
+
   .bg-neutral2 {
     background-color: var(--color-neutral2);
   }
@@ -3701,6 +3824,16 @@
     }
   }
 
+  .bg-positive1, .bg-positive1\/5 {
+    background-color: var(--color-positive1);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-positive1\/5 {
+      background-color: color-mix(in oklab, var(--color-positive1) 5%, transparent);
+    }
+  }
+
   .bg-purple-500\/10 {
     background-color: #ac4bff1a;
   }
@@ -3783,7 +3916,17 @@
     }
   }
 
-  .bg-surface2, .bg-surface2\/60 {
+  .bg-surface2, .bg-surface2\/30 {
+    background-color: var(--color-surface2);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface2\/30 {
+      background-color: color-mix(in oklab, var(--color-surface2) 30%, transparent);
+    }
+  }
+
+  .bg-surface2\/60 {
     background-color: var(--color-surface2);
   }
 
@@ -3875,6 +4018,10 @@
     }
   }
 
+  .bg-warning1 {
+    background-color: var(--color-warning1);
+  }
+
   .bg-white\/\[0\.08\] {
     background-color: #ffffff14;
   }
@@ -4189,6 +4336,10 @@
     padding-top: var(--spacing-0);
   }
 
+  .pt-0\.5 {
+    padding-top: var(--spacing-0_5);
+  }
+
   .pt-1 {
     padding-top: var(--spacing-1);
   }
@@ -4443,6 +4594,10 @@
     font-size: .65rem;
   }
 
+  .text-\[0\.5625rem\] {
+    font-size: .5625rem;
+  }
+
   .text-\[10\.5px\] {
     font-size: 10.5px;
   }
@@ -4518,6 +4673,11 @@
     line-height: var(--spacing-4);
   }
 
+  .leading-5 {
+    --tw-leading: var(--spacing-5);
+    line-height: var(--spacing-5);
+  }
+
   .leading-6 {
     --tw-leading: var(--spacing-6);
     line-height: var(--spacing-6);
@@ -4608,6 +4768,16 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.2em\] {
+    --tw-tracking: .2em;
+    letter-spacing: .2em;
+  }
+
+  .tracking-\[0\.24em\] {
+    --tw-tracking: .24em;
+    letter-spacing: .24em;
+  }
+
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -4831,6 +5001,10 @@
     color: var(--color-notice-warning-fg);
   }
 
+  .text-positive1 {
+    color: var(--color-positive1);
+  }
+
   .text-purple-200\/80 {
     color: #e9d5ffcc;
   }
@@ -4865,6 +5039,10 @@
     color: #0000;
   }
 
+  .text-warning1 {
+    color: var(--color-warning1);
+  }
+
   .text-white {
     color: var(--color-white);
   }
@@ -4906,6 +5084,10 @@
     text-underline-offset: 2px;
   }
 
+  .accent-current {
+    accent-color: currentColor;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -4914,6 +5096,10 @@
     opacity: .3;
   }
 
+  .opacity-35 {
+    opacity: .35;
+  }
+
   .opacity-40 {
     opacity: .4;
   }
@@ -4943,6 +5129,40 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-\[0_0_7px_currentColor\] {
+    --tw-shadow: 0 0 7px var(--tw-shadow-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_0_9px_currentColor\] {
+    --tw-shadow: 0 0 9px var(--tw-shadow-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_0_12px_currentColor\] {
+    --tw-shadow: 0 0 12px var(--tw-shadow-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_0_14px_color-mix\(in_oklch\,currentColor_12\%\,transparent\)\] {
+    --tw-shadow: 0 0 14px var(--tw-shadow-color, currentColor);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-\[0_0_14px_color-mix\(in_oklch\,currentColor_12\%\,transparent\)\] {
+      --tw-shadow: 0 0 14px var(--tw-shadow-color, color-mix(in oklch,currentColor 12%,transparent));
+    }
+  }
+
+  .shadow-\[0_0_14px_color-mix\(in_oklch\,currentColor_12\%\,transparent\)\] {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-\[0_0_24px_var\(--color-positive1\)\] {
+    --tw-shadow: 0 0 24px var(--tw-shadow-color, var(--color-positive1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-\[0_1px_0_rgba\(0\,0\,0\,0\.1\)\] {
     --tw-shadow: 0 1px 0 var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6103,10 +6323,6 @@
       scale: 1.02;
     }
 
-    .hover\:border-\[var\(--cluster-color\)\]:hover {
-      border-color: var(--cluster-color);
-    }
-
     .hover\:border-border2:hover {
       border-color: var(--color-border2);
     }
@@ -6395,10 +6611,6 @@
     opacity: .7;
   }
 
-  .focus-visible\:border-\[var\(--cluster-color\)\]:focus-visible {
-    border-color: var(--cluster-color);
-  }
-
   .focus-visible\:border-accent1:focus-visible {
     border-color: var(--color-accent1);
   }
@@ -6471,6 +6683,10 @@
     }
   }
 
+  .focus-visible\:ring-border2:focus-visible {
+    --tw-ring-color: var(--color-border2);
+  }
+
   .focus-visible\:ring-neutral5:focus-visible {
     --tw-ring-color: var(--color-neutral5);
   }
@@ -6534,6 +6750,13 @@
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
 
+  .active\:scale-99:active {
+    --tw-scale-x: 99%;
+    --tw-scale-y: 99%;
+    --tw-scale-z: 99%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
   .active\:scale-\[0\.98\]:active {
     scale: .98;
   }
@@ -6654,6 +6877,14 @@
     align-content: flex-start;
   }
 
+  .has-\[\:checked\]\:border-border2:has(:checked) {
+    border-color: var(--color-border2);
+  }
+
+  .has-\[\:checked\]\:bg-surface4:has(:checked) {
+    background-color: var(--color-surface4);
+  }
+
   .has-\[\:disabled\]\:cursor-not-allowed:has(:disabled) {
     cursor: not-allowed;
   }
@@ -6721,10 +6952,6 @@
     padding-left: var(--spacing-1);
   }
 
-  .aria-checked\:bg-surface3[aria-checked="true"] {
-    background-color: var(--color-surface3);
-  }
-
   .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
     cursor: not-allowed;
   }
@@ -6739,10 +6966,6 @@
     }
   }
 
-  .aria-pressed\:bg-surface3[aria-pressed="true"] {
-    background-color: var(--color-surface3);
-  }
-
   .aria-selected\:bg-surface5[aria-selected="true"], .aria-selected\:bg-surface5\/50[aria-selected="true"] {
     background-color: var(--color-surface5);
   }
@@ -7563,6 +7786,12 @@
     color: var(--color-accent2);
   }
 
+  @media (prefers-reduced-motion: no-preference) {
+    .motion-safe\:animate-spin {
+      animation: var(--animate-spin);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .motion-reduce\:scale-100 {
       --tw-scale-x: 100%;
@@ -7641,6 +7870,10 @@
   }
 
   @media (min-width: 40rem) {
+    .sm\:mt-0 {
+      margin-top: var(--spacing-0);
+    }
+
     .sm\:hidden {
       display: none;
     }
@@ -7685,6 +7918,10 @@
       max-width: var(--container-lg);
     }
 
+    .sm\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -7741,8 +7978,8 @@
       display: inline-flex;
     }
 
-    .md\:grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    .md\:px-10 {
+      padding-inline: var(--spacing-10);
     }
   }
 
@@ -7759,6 +7996,10 @@
       margin-left: var(--spacing-0);
     }
 
+    .lg\:flex {
+      display: flex;
+    }
+
     .lg\:hidden {
       display: none;
     }
@@ -7775,9 +8016,21 @@
       grid-template-columns: 1.4fr .8fr;
     }
 
+    .lg\:grid-cols-\[17\.5rem_4\.5rem_17\.5rem_4\.5rem_minmax\(0\,1fr\)\] {
+      grid-template-columns: 17.5rem 4.5rem 17.5rem 4.5rem minmax(0, 1fr);
+    }
+
+    .lg\:gap-0 {
+      gap: var(--spacing-0);
+    }
+
     .lg\:gap-8 {
       gap: var(--spacing-8);
     }
+
+    .lg\:px-12 {
+      padding-inline: var(--spacing-12);
+    }
   }
 
   @media (min-width: 80rem) {
@@ -7796,6 +8049,10 @@
     .xl\:gap-10 {
       gap: var(--spacing-10);
     }
+
+    .xl\:px-\[4\.375rem\] {
+      padding-inline: 4.375rem;
+    }
   }
 
   @container (min-width: 28rem) {
@@ -8998,10 +9255,6 @@
     height: var(--spacing-4);
   }
 
-  .\[\&\>svg\]\:h-\[1\.1em\] > svg {
-    height: 1.1em;
-  }
-
   .\[\&\>svg\]\:h-\[1\.1rem\] > svg {
     height: 1.1rem;
   }
@@ -9022,10 +9275,6 @@
     width: var(--spacing-4);
   }
 
-  .\[\&\>svg\]\:w-\[1\.1em\] > svg {
-    width: 1.1em;
-  }
-
   .\[\&\>svg\]\:w-\[1\.1rem\] > svg {
     width: 1.1rem;
   }

package/dist/{text-field-block-CpKq1NCV.cjs → text-field-block-BUvxjW9m.cjs}

@@ -2,7 +2,7 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const input = require('./input-0R-fQTCF.cjs');
-const fieldBlock = require('./field-block-Dx-fDIP9.cjs');
+const fieldBlock = require('./field-block-CEbnWKc0.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 
 function TextFieldBlock({
@@ -47,4 +47,4 @@ function TextFieldBlock({
 }
 
 exports.TextFieldBlock = TextFieldBlock;
-//# sourceMappingURL=text-field-block-CpKq1NCV.cjs.map
+//# sourceMappingURL=text-field-block-BUvxjW9m.cjs.map

package/dist/{text-field-block-CpKq1NCV.cjs.map → text-field-block-BUvxjW9m.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"text-field-block-CpKq1NCV.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'default',\n  testId,\n  className,\n  ...props\n}: TextFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Input\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value}\n          placeholder={placeholder}\n          data-testid={testId}\n          size={size}\n          {...props}\n        />\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["FieldBlock","jsx","VisuallyHidden","jsxs","Input"],"mappings":";;;;;;;AAoBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uCACGA,qBAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,kCACTA,qBAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAAC,cAAA,CAACD,qBAAA,CAAW,OAAX,EAAiB,IAAA,EAAY,UAAoB,IAAA,EAAM,SAAA,IAAa,UAClE,QAAA,EAAA,aAAA,mBAAgBC,cAAA,CAACC,sCAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJC,eAAA,CAACH,qBAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5BC,cAAA,CAACD,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EAClE,iBACH,CAAA,GACE,IAAA;AAAA,sBACJC,cAAA;AAAA,QAACG,WAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA,EAAa,MAAA;AAAA,UACb,IAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,QAAA,oBAAYH,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAYC,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"text-field-block-BUvxjW9m.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'default',\n  testId,\n  className,\n  ...props\n}: TextFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Input\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value}\n          placeholder={placeholder}\n          data-testid={testId}\n          size={size}\n          {...props}\n        />\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["FieldBlock","jsx","VisuallyHidden","jsxs","Input"],"mappings":";;;;;;;AAoBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uCACGA,qBAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,kCACTA,qBAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAAC,cAAA,CAACD,qBAAA,CAAW,OAAX,EAAiB,IAAA,EAAY,UAAoB,IAAA,EAAM,SAAA,IAAa,UAClE,QAAA,EAAA,aAAA,mBAAgBC,cAAA,CAACC,sCAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJC,eAAA,CAACH,qBAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5BC,cAAA,CAACD,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EAClE,iBACH,CAAA,GACE,IAAA;AAAA,sBACJC,cAAA;AAAA,QAACG,WAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA,EAAa,MAAA;AAAA,UACb,IAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,QAAA,oBAAYH,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAYC,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/{text-field-block-CrFqgdKx.js → text-field-block-DxtR1Ft4.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { I as Input } from './input-DVZ0-3KP.js';
-import { F as FieldBlock } from './field-block-CC_EYPWe.js';
+import { F as FieldBlock } from './field-block-CBdMcT-i.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
 function TextFieldBlock({
@@ -45,4 +45,4 @@ function TextFieldBlock({
 }
 
 export { TextFieldBlock as T };
-//# sourceMappingURL=text-field-block-CrFqgdKx.js.map
+//# sourceMappingURL=text-field-block-DxtR1Ft4.js.map