@xemahq/ui-kernel 0.9.1 → 0.9.2

package/src/ui/primitives/button.tsx

@@ -1,34 +1,9 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from '../cn';
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-1 font-medium ring-offset-background transition-[background-color,color,border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "text-ink-2 hover:bg-paper-elev hover:text-ink",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+import { buttonVariants } from './button-variants';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -44,4 +19,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button };

package/src/ui/primitives/form-stepper.tsx

@@ -1,22 +1,7 @@
 import { Check } from 'lucide-react';
 
-import type { ReactNode } from 'react';
-
 import { cn } from '../cn';
-
-export enum FormStepStatus {
-  PENDING = 'pending',
-  ACTIVE = 'active',
-  DONE = 'done',
-}
-
-export interface FormStep {
-  readonly key: string;
-  readonly label: string;
-  readonly hint?: string;
-  readonly status: FormStepStatus;
-  readonly children: ReactNode;
-}
+import { FormStepStatus, type FormStep } from './form-stepper.types';
 
 interface FormStepperProps {
   readonly steps: readonly FormStep[];

package/src/ui/primitives/form-stepper.types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export enum FormStepStatus {
+  PENDING = 'pending',
+  ACTIVE = 'active',
+  DONE = 'done',
+}
+
+export interface FormStep {
+  readonly key: string;
+  readonly label: string;
+  readonly hint?: string;
+  readonly status: FormStepStatus;
+  readonly children: ReactNode;
+}

package/src/ui/primitives/preview-device-frame.tsx

@@ -181,7 +181,7 @@ function ResponsiveViewport({
     const observer = new ResizeObserver(compute);
     observer.observe(el);
     return () => observer.disconnect();
-  }, [bezel.width, bezel.height]);
+  }, [aspectRatio, bezel.width, bezel.height]);
 
   return (
     <div

package/src/ui/primitives/tag-multi-select.tsx

@@ -138,9 +138,8 @@ export function TagMultiSelect({
                   className={cn('text-body-1 gap-1 pr-1', chipClass)}
                 >
                   <span className="truncate max-w-[160px]">{opt?.label ?? val}</span>
-                  <span
-                    role="button"
-                    tabIndex={-1}
+                  <button
+                    type="button"
                     onClick={(e) => remove(val, e)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') {
@@ -153,7 +152,7 @@ export function TagMultiSelect({
                     aria-label={`Remove ${opt?.label ?? val}`}
                   >
                     <X className="h-4 w-4" />
-                  </span>
+                  </button>
                 </Badge>
               );
             })}

package/src/vista/form-payload.spec.ts

@@ -2,22 +2,17 @@
  * Guards `validateFormPayload` — the structural half of "the value never
  * reaches the agent".
  *
- * The validator is what makes the submit target un-aimable at the host's own
- * origin (where the BFF / chat transport lives): only an ABSOLUTE `http(s)`
- * URL is accepted, and a rejected payload draws the typed fallback card rather
- * than a form.
+ * The payload has no network authority: it carries only a base64url opaque ref,
+ * while the trusted service base URL comes from `VistaFormHost`.
  */
 import { describe, expect, it } from 'vitest';
 
-import { CaptureFieldType } from '../ui/capture/field-spec';
-
 import { validateFormPayload } from './vista-payloads';
+import { CaptureFieldType } from '../ui/capture/field-spec';
 
 const BASE = {
   ref: 'ref-1',
   purpose: 'Connect Acme so I can read your tickets.',
-  submitUrl: 'https://connector-gateway.example.test/credential-elicitations/ref-1/submit',
-  statusUrl: 'https://connector-gateway.example.test/credential-elicitations/ref-1',
   fields: [
     {
       key: 'apiKey',
@@ -27,7 +22,13 @@ const BASE = {
       isSecret: true,
       transform: 'trim',
     },
-    { key: 'baseUrl', label: 'Base URL', type: CaptureFieldType.Url, required: true, isSecret: false },
+    {
+      key: 'baseUrl',
+      label: 'Base URL',
+      type: CaptureFieldType.Url,
+      required: true,
+      isSecret: false,
+    },
   ],
 };
 
@@ -41,11 +42,17 @@ describe('validateFormPayload', () => {
     expect(payload?.fields[0]?.transform).toBe('trim');
   });
 
-  it('REJECTS a host-relative submit URL — it could only hit the app itself', () => {
-    expect(validateFormPayload({ ...BASE, submitUrl: '/credential-elicitations/ref-1/submit' })).toBeNull();
-    expect(validateFormPayload({ ...BASE, submitUrl: '//evil.example/x' })).toBeNull();
-    expect(validateFormPayload({ ...BASE, submitUrl: 'javascript:alert(1)' })).toBeNull();
-    expect(validateFormPayload({ ...BASE, statusUrl: '/credential-elicitations/ref-1' })).toBeNull();
+  it('rejects old or malicious payload-selected submit/status authorities', () => {
+    for (const target of [
+      'https://evil.example/steal',
+      'https://trusted.example@evil.example/steal',
+      '//evil.example/steal',
+      '/credential-elicitations/ref-1/submit',
+      'javascript:alert(1)',
+    ]) {
+      expect(validateFormPayload({ ...BASE, submitUrl: target })).toBeNull();
+      expect(validateFormPayload({ ...BASE, statusUrl: target })).toBeNull();
+    }
   });
 
   it('accepts an EMPTY field schema — the service is the authority, not the client', () => {
@@ -55,39 +62,78 @@ describe('validateFormPayload', () => {
   });
 
   it('rejects a malformed field spec rather than half-rendering it', () => {
-    expect(validateFormPayload({ ...BASE, fields: [{ key: 'a', label: 'A', type: 'nope' }] })).toBeNull();
-    expect(validateFormPayload({ ...BASE, fields: [{ key: 'a', label: 'A' }] })).toBeNull();
     expect(
       validateFormPayload({
         ...BASE,
-        fields: [{ key: 'a', label: 'A', type: CaptureFieldType.String, isSecret: 'yes' }],
+        fields: [{ key: 'a', label: 'A', type: 'nope' }],
+      }),
+    ).toBeNull();
+    expect(
+      validateFormPayload({ ...BASE, fields: [{ key: 'a', label: 'A' }] }),
+    ).toBeNull();
+    expect(
+      validateFormPayload({
+        ...BASE,
+        fields: [
+          {
+            key: 'a',
+            label: 'A',
+            type: CaptureFieldType.String,
+            isSecret: 'yes',
+          },
+        ],
       }),
     ).toBeNull();
     expect(validateFormPayload({ ...BASE, fields: {} })).toBeNull();
   });
 
-  it('accepts a launch (oauth2 / app_install) payload with an absolute URL', () => {
+  it('accepts a launch payload with a root-relative trusted-service path', () => {
     const payload = validateFormPayload({
       ...BASE,
       fields: [],
-      launch: { url: 'https://acme.example.test/oauth/authorize?x=1', label: 'Continue to Acme', hint: 'h' },
+      launch: {
+        path: '/oauth/authorize?x=1',
+        label: 'Continue to Acme',
+        hint: 'h',
+      },
     });
     expect(payload?.launch).toEqual({
-      url: 'https://acme.example.test/oauth/authorize?x=1',
+      path: '/oauth/authorize?x=1',
       label: 'Continue to Acme',
       hint: 'h',
     });
   });
 
-  it('rejects a launch with a relative URL or no label', () => {
-    expect(validateFormPayload({ ...BASE, launch: { url: '/authorize', label: 'Go' } })).toBeNull();
+  it('rejects launch authority/scheme confusion and malformed paths', () => {
+    for (const path of [
+      'authorize',
+      '//evil.example/authorize',
+      'https://evil.example/authorize',
+      'javascript:alert(1)',
+      '\\\\evil.example\\authorize',
+    ]) {
+      expect(
+        validateFormPayload({ ...BASE, launch: { path, label: 'Go' } }),
+      ).toBeNull();
+    }
+    expect(
+      validateFormPayload({
+        ...BASE,
+        launch: { url: 'https://evil.example/a', label: 'Go' },
+      }),
+    ).toBeNull();
     expect(
-      validateFormPayload({ ...BASE, launch: { url: 'https://acme.example.test/a', label: '' } }),
+      validateFormPayload({
+        ...BASE,
+        launch: { path: '/authorize', label: '' },
+      }),
     ).toBeNull();
   });
 
-  it('rejects a missing ref', () => {
-    expect(validateFormPayload({ ...BASE, ref: '' })).toBeNull();
+  it('rejects missing refs and path-traversal/encoding input', () => {
+    for (const ref of ['', '.', '..', '../steal', 'a/b', '%2e%2e', 'réf']) {
+      expect(validateFormPayload({ ...BASE, ref })).toBeNull();
+    }
     expect(validateFormPayload({ ...BASE, ref: undefined })).toBeNull();
   });
 });

package/src/vista/index.ts

@@ -36,9 +36,13 @@ export * from './vista-model';
 export * from './vista-payloads';
 export * from './vista-tabs-manifest';
 export * from './vista-file-source';
+export * from './vista-file-context';
 export * from './vista-form-host';
+export * from './vista-form-context';
 export * from './vista-code-renderer';
+export * from './vista-code-renderer-context';
 export * from './vista-open-context';
+export * from './vista-open-state';
 export * from './use-vista-tabs';
 export * from './VistaPanel';
 export * from './vista-tools';

package/src/vista/surfaces/FilesSurface.tsx

@@ -13,78 +13,12 @@ import { ChevronRight, Folder } from 'lucide-react';
 
 
 import { fileSurface } from '../vista-model';
-import { useVistaOpen } from '../vista-open-context';
+import { useVistaOpen } from '../vista-open-state';
+import { fileExtMeta, groupFilesByFolder } from './file-surface-utils';
 
 import type { VistaFileEntry, VistaFilesPayload } from '../vista-payloads';
 import type { ReactElement } from 'react';
 
-/** Extension → colour-coded tile metadata. */
-interface FileExtMeta {
-  readonly color: string;
-  readonly tag: string;
-}
-
-const EXT_META: Readonly<Record<string, FileExtMeta>> = {
-  ts: { color: 'hsl(var(--info))', tag: 'TS' },
-  tsx: { color: 'hsl(var(--info))', tag: 'TSX' },
-  js: { color: 'hsl(var(--warning))', tag: 'JS' },
-  jsx: { color: 'hsl(var(--warning))', tag: 'JSX' },
-  json: { color: 'hsl(var(--ink-3))', tag: 'JSON' },
-  md: { color: 'hsl(var(--p-people))', tag: 'MD' },
-  css: { color: 'hsl(var(--p-sales))', tag: 'CSS' },
-  html: { color: 'hsl(var(--p-sales))', tag: 'HTML' },
-  yaml: { color: 'hsl(var(--ink-3))', tag: 'YAML' },
-  yml: { color: 'hsl(var(--ink-3))', tag: 'YAML' },
-};
-
-/** Resolve the colour-coded tile metadata for a filename. */
-export function fileExtMeta(name: string): FileExtMeta {
-  if (/\.test\.[tj]sx?$/.test(name) || /\.spec\.[tj]sx?$/.test(name)) {
-    return { color: 'hsl(var(--success))', tag: 'TEST' };
-  }
-  const ext = name.split('.').pop() ?? '';
-  return (
-    EXT_META[ext] ?? {
-      color: 'hsl(var(--ink-4))',
-      tag: (ext || 'FILE').toUpperCase().slice(0, 4),
-    }
-  );
-}
-
-/** A group of files under one folder caption. */
-export interface VistaFileGroup {
-  /** Folder path (`''` = root). */
-  readonly dir: string;
-  readonly files: readonly VistaFileEntry[];
-}
-
-/** Order folder captions: root first, then alphabetical. */
-function compareDirs(a: string, b: string): number {
-  if (a === '') return -1;
-  if (b === '') return 1;
-  return a.localeCompare(b);
-}
-
-/** Group a flat file list by folder, root group first, paths sorted. */
-export function groupFilesByFolder(
-  files: readonly VistaFileEntry[],
-): VistaFileGroup[] {
-  const groups = new Map<string, VistaFileEntry[]>();
-  for (const file of files) {
-    const slash = file.path.lastIndexOf('/');
-    const dir = slash < 0 ? '' : file.path.slice(0, slash);
-    const bucket = groups.get(dir);
-    if (bucket) bucket.push(file);
-    else groups.set(dir, [file]);
-  }
-  return [...groups.keys()].sort(compareDirs).map((dir) => ({
-    dir,
-    files: [...(groups.get(dir) ?? [])].sort((a, b) =>
-      a.path.localeCompare(b.path),
-    ),
-  }));
-}
-
 export function FilesSurface({
   files,
 }: Readonly<VistaFilesPayload>): ReactElement {

package/src/vista/surfaces/FormSurface.tsx

@@ -13,25 +13,45 @@
  *   • the values live in this component's `useState`; the single reader is
  *     `submitElicitationFields`, which takes them as a parameter and returns an
  *     outcome — the values are not reachable from any return or any throw;
- *   • the POST target is an ABSOLUTE service URL (`validateFormPayload` rejects
- *     a relative one), so the request cannot be aimed at the host's own BFF or
- *     the chat transport;
+ *   • the payload has NO URL authority. The exact endpoints are derived from
+ *     the trusted elicitation API base URL supplied by `VistaFormHost`;
  *   • secret fields are DECLARED (`spec.isSecret`) and render write-only; the
  *     surface holds no cache and no read path repopulates them.
  *
  * Nothing here is provider-aware. Whether the flow is a field form or an OAuth
  * handoff is decided by the payload the owning service produced.
  */
-import { AlertTriangle, CheckCircle2, ExternalLink, Loader2, ShieldCheck } from 'lucide-react';
-import { useCallback, useEffect, useState, type ReactElement, type ReactNode } from 'react';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ExternalLink,
+  Loader2,
+  ShieldCheck,
+} from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
 
-import { readElicitationStatus, submitElicitationFields, VistaFormSubmitError } from './elicitation-transport';
+import {
+  readElicitationStatus,
+  resolveTrustedElicitationEndpoints,
+  resolveTrustedElicitationLaunchUrl,
+  submitElicitationFields,
+  VistaFormSubmitError,
+} from './elicitation-transport';
 import { SchemaForm } from '../../ui/capture/schema-form';
 import { captureValuesToStringMap } from '../../ui/capture/submit-values';
 import { useSchemaValidation } from '../../ui/capture/use-schema-validation';
 import { cn } from '../../ui/cn';
 import { Button } from '../../ui/primitives/button';
-import { useVistaFormHost, type VistaFormOutcome } from '../vista-form-host';
+import {
+  useVistaFormHost,
+  type VistaFormOutcome,
+} from '../vista-form-context';
 
 import type { CaptureValues } from '../../ui/capture/field-spec';
 import type { VistaFormPayload } from '../vista-payloads';
@@ -51,6 +71,29 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
   const [showFieldErrors, setShowFieldErrors] = useState(false);
   const [outcome, setOutcome] = useState<VistaFormOutcome | null>(null);
   const { errors, isValid } = useSchemaValidation(payload.fields, values);
+  let transportConfigurationError: string | null = null;
+  let launchUrl: string | undefined;
+  if (host !== null) {
+    try {
+      // Validate the trust anchor before retrieving a bearer token or accepting
+      // a submit action. The transport repeats this check at the fetch boundary.
+      resolveTrustedElicitationEndpoints(
+        host.elicitationApiBaseUrl,
+        payload.ref,
+      );
+      if (payload.launch !== undefined) {
+        launchUrl = resolveTrustedElicitationLaunchUrl(
+          host.elicitationApiBaseUrl,
+          payload.launch.path,
+        );
+      }
+    } catch (error) {
+      transportConfigurationError =
+        error instanceof Error
+          ? error.message
+          : 'The trusted elicitation service is not configured safely.';
+    }
+  }
 
   const settle = useCallback(
     (next: VistaFormOutcome): void => {
@@ -85,14 +128,14 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
       .getAccessToken()
       .then((accessToken) =>
         submitElicitationFields({
-          submitUrl: payload.submitUrl,
+          apiBaseUrl: host.elicitationApiBaseUrl,
           ref: payload.ref,
           accessToken,
           fields: captureValuesToStringMap(payload.fields, values),
         }),
       )
       .then(settle, failed);
-  }, [host, isValid, payload.fields, payload.ref, payload.submitUrl, settle, failed, values]);
+  }, [host, isValid, payload.fields, payload.ref, settle, failed, values]);
 
   const handleCheckStatus = useCallback((): void => {
     if (host === null) return;
@@ -101,17 +144,23 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
     void host
       .getAccessToken()
       .then((accessToken) =>
-        readElicitationStatus({ statusUrl: payload.statusUrl, ref: payload.ref, accessToken }),
+        readElicitationStatus({
+          apiBaseUrl: host.elicitationApiBaseUrl,
+          ref: payload.ref,
+          accessToken,
+        }),
       )
       .then((next) => {
         if (next === null) {
-          setServiceError('Not completed yet — finish the steps in the other window, then check again.');
+          setServiceError(
+            'Not completed yet — finish the steps in the other window, then check again.',
+          );
           setPhase(FormPhase.Editing);
           return;
         }
         settle(next);
       }, failed);
-  }, [host, payload.ref, payload.statusUrl, settle, failed]);
+  }, [host, payload.ref, settle, failed]);
 
   // The consent/install window is a separate browsing context, so the only
   // signal this tab gets is the user returning to it. Re-checking on focus is
@@ -137,6 +186,19 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
     );
   }
 
+  if (transportConfigurationError !== null) {
+    return (
+      <Shell heading={payload.heading} purpose={payload.purpose}>
+        <Notice
+          tone="error"
+          title="The secure service is not configured safely"
+        >
+          {transportConfigurationError}
+        </Notice>
+      </Shell>
+    );
+  }
+
   if (phase === FormPhase.Settled && outcome !== null) {
     return (
       <Shell heading={payload.heading} purpose={payload.purpose}>
@@ -146,7 +208,10 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
             <p className="text-body-1 font-medium text-ink">Submitted.</p>
             <p className="text-caption text-ink-3">
               The value went straight to the service and was never shown to the
-              agent{outcome.connectionId === null ? '.' : `. Connection ${outcome.connectionId} is ready.`}
+              agent
+              {outcome.connectionId === null
+                ? '.'
+                : `. Connection ${outcome.connectionId} is ready.`}
             </p>
           </div>
         </div>
@@ -166,7 +231,9 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
           <div className="flex flex-wrap items-center gap-2">
             <Button
               onClick={() => {
-                globalThis.open(payload.launch?.url, '_blank', 'noopener,noreferrer');
+                // `launchUrl` was derived from the host trust anchor above; the
+                // payload contributes only a validated same-origin path.
+                globalThis.open(launchUrl, '_blank', 'noopener,noreferrer');
               }}
               className="gap-1.5"
               disabled={working}
@@ -174,7 +241,11 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
               <ExternalLink className="h-4 w-4" />
               {payload.launch.label}
             </Button>
-            <Button variant="outline" onClick={handleCheckStatus} disabled={working}>
+            <Button
+              variant="outline"
+              onClick={handleCheckStatus}
+              disabled={working}
+            >
               {working && <Loader2 className="mr-1 h-4 w-4 animate-spin" />}
               I&apos;ve finished — check
             </Button>
@@ -184,8 +255,8 @@ export function FormSurface(payload: Readonly<VistaFormPayload>): ReactElement {
         <>
           {payload.fields.length === 0 && (
             <Notice tone="warn" title="No form fields were declared">
-              This connector declares no onboarding form. Submitting will ask the
-              service, which is the authority on whether that is allowed.
+              This connector declares no onboarding form. Submitting will ask
+              the service, which is the authority on whether that is allowed.
             </Notice>
           )}
           <SchemaForm
@@ -217,16 +288,25 @@ function Shell({
   heading,
   purpose,
   children,
-}: Readonly<{ heading?: string; purpose: string; children: ReactNode }>): ReactElement {
+}: Readonly<{
+  heading?: string;
+  purpose: string;
+  children: ReactNode;
+}>): ReactElement {
   return (
     <div className="h-full overflow-auto">
       <div className="mx-auto max-w-2xl space-y-4 p-6">
         <div className="space-y-1">
-          <h2 className="text-subtitle font-semibold text-ink">{heading ?? 'Secure request'}</h2>
-          {purpose.length > 0 && <p className="text-body-1 text-ink-2">{purpose}</p>}
+          <h2 className="text-subtitle font-semibold text-ink">
+            {heading ?? 'Secure request'}
+          </h2>
+          {purpose.length > 0 && (
+            <p className="text-body-1 text-ink-2">{purpose}</p>
+          )}
           <p className="flex items-center gap-1.5 text-caption text-ink-3">
             <ShieldCheck className="h-3.5 w-3.5" />
-            Sent straight to the service with your own sign-in. The agent never sees what you type.
+            Sent straight to the service with your own sign-in. The agent never
+            sees what you type.
           </p>
         </div>
         {children}
@@ -239,23 +319,42 @@ function Notice({
   tone,
   title,
   children,
-}: Readonly<{ tone: 'error' | 'warn'; title: string; children: ReactNode }>): ReactElement {
+}: Readonly<{
+  tone: 'error' | 'warn';
+  title: string;
+  children: ReactNode;
+}>): ReactElement {
   return (
     <div
       role="alert"
       className={cn(
         'flex items-start gap-2 rounded-md border p-3',
-        tone === 'error' ? 'border-destructive/40 bg-destructive/10' : 'border-rule bg-paper-elev',
+        tone === 'error'
+          ? 'border-destructive/40 bg-destructive/10'
+          : 'border-rule bg-paper-elev',
       )}
     >
       <AlertTriangle
-        className={cn('mt-0.5 h-4 w-4 shrink-0', tone === 'error' ? 'text-destructive' : 'text-ink-3')}
+        className={cn(
+          'mt-0.5 h-4 w-4 shrink-0',
+          tone === 'error' ? 'text-destructive' : 'text-ink-3',
+        )}
       />
       <div className="space-y-0.5">
-        <p className={cn('text-body-1 font-medium', tone === 'error' ? 'text-destructive' : 'text-ink')}>
+        <p
+          className={cn(
+            'text-body-1 font-medium',
+            tone === 'error' ? 'text-destructive' : 'text-ink',
+          )}
+        >
           {title}
         </p>
-        <p className={cn('text-body-1', tone === 'error' ? 'text-destructive/90' : 'text-ink-3')}>
+        <p
+          className={cn(
+            'text-body-1',
+            tone === 'error' ? 'text-destructive/90' : 'text-ink-3',
+          )}
+        >
           {children}
         </p>
       </div>