@usefragments/ui 1.6.0 → 2.0.0

package/src/components/RadioGroup/RadioGroup.contract.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "RadioGroup",
-  "description": "Single selection from a list of mutually exclusive options",
-  "category": "forms",
+  "description": "Selects one option from a mutually exclusive set.",
+  "category": "inputs",
   "tags": ["form", "radio", "selection", "options"],
   "status": "stable",
   "sourcePath": "src/components/RadioGroup/index.tsx",
@@ -19,6 +19,7 @@
     "helperText: string",
     "error: union",
     "size: sm|md|lg (default: md)",
+    "variant: outline",
     "wrapperClassName: string",
     "groupClassName: string",
     "groupId: string",
@@ -87,10 +88,9 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual variant. 'default' is the inline radio, 'card' renders each item as a full-width clickable card with the radio tucked inside.",
-      "default": "default",
+      "description": "Chrome. Omit for the inline radio beside its label; 'outline' renders each item as a full-width bordered surface with the radio tucked inside.",
       "required": false,
-      "values": ["default", "card"]
+      "values": ["outline"]
     },
     "wrapperClassName": {
       "type": "string",
@@ -115,63 +115,62 @@
   },
   "usage": {
     "when": [
-      "User must select exactly one option from a small set",
-      "Options are mutually exclusive",
-      "All options should be visible at once",
-      "2-5 options available"
+      "Exactly one answer out of two to five",
+      "Options rule each other out",
+      "Every option should be visible without opening anything"
     ],
     "whenNot": [
-      "Multiple selections allowed (use Checkbox group)",
-      "Many options (use Select)",
-      "Binary on/off choice (use Switch)",
-      "Options need to be searchable (use Combobox)"
+      "Several answers allowed (use a Checkbox group)",
+      "Long lists (use Select)",
+      "A single on/off (use Switch)",
+      "Options need searching (use Combobox)"
     ],
     "guidelines": [
-      "Always have one option pre-selected when possible",
-      "Order options logically (alphabetical, frequency, etc.)",
-      "Keep option labels concise",
-      "Use helperText on RadioGroup.Item for complex options"
+      "Pre-select a sensible default whenever one exists",
+      "Order options predictably: alphabetical, by frequency, or by cost",
+      "Keep labels short",
+      "Put the trade-off in each item's helperText"
     ],
     "accessibility": [
-      "Group must have an accessible label",
-      "Use arrow keys to navigate between options",
-      "Selected option should be clearly indicated"
+      "The group carries its own label",
+      "Arrow keys move between options",
+      "The selected option reads as checked"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic radio group with labels",
+      "description": "Three options stacked, the first already chosen.",
       "code": "<RadioGroup defaultValue=\"option1\" label=\"Select an option\">\n  <RadioGroup.Item value=\"option1\" label=\"Option 1\" />\n  <RadioGroup.Item value=\"option2\" label=\"Option 2\" />\n  <RadioGroup.Item value=\"option3\" label=\"Option 3\" />\n</RadioGroup>"
     },
     {
       "name": "With Helper Text",
-      "description": "Radio items with additional context",
+      "description": "Each option carries the trade-off under its label.",
       "code": "<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    helperText=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    helperText=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    helperText=\"Next business day\"\n  />\n</RadioGroup>"
     },
     {
       "name": "Horizontal",
-      "description": "Side-by-side layout",
+      "description": "One row — good for short labels like sizes.",
       "code": "<RadioGroup orientation=\"horizontal\" defaultValue=\"small\" label=\"Size\">\n  <RadioGroup.Item value=\"small\" label=\"S\" />\n  <RadioGroup.Item value=\"medium\" label=\"M\" />\n  <RadioGroup.Item value=\"large\" label=\"L\" />\n  <RadioGroup.Item value=\"xlarge\" label=\"XL\" />\n</RadioGroup>"
     },
     {
       "name": "With Group Helper Text",
-      "description": "Group-level helper text",
+      "description": "One note under the whole group instead of per option.",
       "code": "<RadioGroup defaultValue=\"standard\" label=\"Plan\" helperText=\"You can change your plan at any time\">\n  <RadioGroup.Item value=\"free\" label=\"Free\" />\n  <RadioGroup.Item value=\"standard\" label=\"Standard\" />\n  <RadioGroup.Item value=\"pro\" label=\"Pro\" />\n</RadioGroup>"
     },
     {
       "name": "With Error",
-      "description": "Validation error state (string shows error message)",
+      "description": "Passing a string to error tints the group and prints the reason.",
       "code": "<RadioGroup label=\"Required selection\" error=\"Please select an option\">\n  <RadioGroup.Item value=\"a\" label=\"Option A\" />\n  <RadioGroup.Item value=\"b\" label=\"Option B\" />\n</RadioGroup>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive state",
+      "description": "The choice stays visible but nothing can change it.",
       "code": "<RadioGroup disabled defaultValue=\"locked\" label=\"Locked selection\">\n  <RadioGroup.Item value=\"locked\" label=\"This is locked\" />\n  <RadioGroup.Item value=\"other\" label=\"Cannot select\" />\n</RadioGroup>"
     },
     {
       "name": "Styling Targets",
-      "description": "Use explicit class names for wrapper/group/item styling hooks",
+      "description": "Named class hooks for the wrapper, the group, and each item.",
       "code": "<RadioGroup\n  defaultValue=\"a\"\n  label=\"Display mode\"\n  wrapperClassName=\"demo-radio-wrapper\"\n  groupClassName=\"demo-radio-group\"\n>\n  <RadioGroup.Item value=\"a\" label=\"Compact\" controlClassName=\"demo-radio-control\" contentClassName=\"demo-radio-content\" />\n  <RadioGroup.Item value=\"b\" label=\"Comfortable\" />\n</RadioGroup>"
     }
   ],
@@ -199,13 +198,15 @@
       "onChange: (value: string) => void - alias for onValueChange",
       "orientation: horizontal|vertical (default: vertical)",
       "size: sm|md|lg (default: md)",
+      "variant: outline - each item a full-width bordered surface; omit for the inline control",
       "label: string - group label",
       "helperText: string - helper text below the group",
       "error: boolean | string - error styling and message",
       "disabled: boolean - disable all options",
       "wrapperClassName/groupClassName - explicit styling targets for wrapper and group",
       "groupId: string - ID forwarded to the inner radiogroup while id remains on the wrapper",
-      "RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling"
+      "RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling",
+      "RadioGroup.Item trailing: ReactNode - a short value (price, count) at the end of the row on the label's line; pairs with variant=outline for plan pickers"
     ],
     "a11yRules": ["A11Y_RADIO_GROUP", "A11Y_LABEL_REQUIRED", "A11Y_TARGET_SIZE_MIN"]
   },

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -45,11 +45,24 @@
   }
 
   &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @include disabled-state;
+  }
+
+  // A trailing value takes a third column so the label and helper keep
+  // theirs; it sits on the label's line at the end of the row.
+  &[data-has-trailing] {
+    grid-template-columns:
+      var(--_fui-boolean-mark-size, #{boolean.mark-size("md")}) minmax(0, 1fr)
+      auto;
   }
 }
 
+.trailing {
+  justify-self: end;
+  text-align: end;
+  white-space: nowrap;
+}
+
 // The radio circle
 .radio {
   @include interactive-base;
@@ -62,39 +75,47 @@
   flex-shrink: 0;
   box-sizing: border-box;
   margin-block-start: var(--_fui-boolean-mark-offset, 0);
-  background-color: var(--fui-field-bg, $fui-bg-elevated);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-field-border, $fui-border-strong);
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-strong, $fui-border-strong);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: inherit;
+  @include high-contrast-outline;
 
   &:hover:not([data-disabled]) {
-    border-color: var(--fui-field-border-hover, $fui-text-tertiary);
+    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:focus-visible {
+    @include field.focus-state;
   }
 
   &[data-checked] {
     background-color: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 8%,
-      var(--fui-field-bg, #{$fui-bg-elevated})
+      var(--fui-control-checked-bg, #{$fui-color-accent}) 8%,
+      var(--fui-bg-primary, #{$fui-bg-primary})
     );
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
-    box-shadow: inset 0 0 0 1px
-      color-mix(in srgb, var(--fui-button-primary-base, #{$fui-color-accent}) 55%, transparent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
+    box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
+      color-mix(in srgb, var(--fui-control-checked-border, #{$fui-color-accent}) 55%, transparent);
   }
 
   &[data-checked]:hover:not([data-disabled]) {
     background-color: color-mix(
       in srgb,
-      var(--fui-button-primary-hover, #{$fui-color-accent}) 12%,
-      var(--fui-field-bg, #{$fui-bg-elevated})
+      var(--fui-control-checked-bg-hover, #{$fui-color-accent-hover}) 12%,
+      var(--fui-bg-primary, #{$fui-bg-primary})
     );
-    border-color: var(--fui-button-primary-hover, $fui-color-accent);
+    border-color: var(--fui-control-checked-border-hover, $fui-color-accent-hover);
   }
 
   &[data-invalid] {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
+    @include field.invalid-state;
 
+    &:focus-visible {
+      @include field.invalid-focus-state;
+    }
+  }
 }
 
 // Size variants
@@ -114,7 +135,7 @@
   left: 50%;
   width: var(--fui-raw-space-8, 8px);
   height: var(--fui-raw-space-8, 8px);
-  background-color: var(--fui-button-primary-base, $fui-color-accent);
+  background-color: var(--fui-control-checked-bg, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 
   // Animation - use translate for centering combined with scale
@@ -161,16 +182,16 @@
 }
 
 // ============================================
-// Card variant: each item is a full-width clickable surface that signals
+// Outline variant: each item is a full-width bordered surface that signals
 // selection via background + border tint while keeping the inline radio
 // circle as the canonical control. The `:has([data-checked])` selector is
 // the source of truth for selected styling — no extra attribute plumbing
 // required from JS.
 // ============================================
-// Card variant uses a transparent base so the selected accent tint reads
-// as a deliberate state change rather than a small shift between two grey
-// surfaces. Mirrors the pattern used by the Checkbox card variant.
-.itemWrapperCard {
+// The outline variant uses a transparent base so the selected accent tint
+// reads as a deliberate state change rather than a small shift between two
+// grey surfaces. Mirrors the pattern used by the Checkbox outline variant.
+.itemWrapperOutline {
   width: 100%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-default, $fui-border-default);
@@ -186,23 +207,23 @@
   }
 
   &:focus-within:not([data-disabled]) {
-    border-color: var(--fui-button-primary-base, $fui-color-accent);
+    border-color: var(--fui-control-checked-border, $fui-color-accent);
     @include focus-ring;
   }
 
   &:has([data-checked]) {
     background: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 13%,
+      var(--fui-control-checked-bg, #{$fui-color-accent}) 13%,
       transparent
     );
     border-color: color-mix(
       in srgb,
-      var(--fui-button-primary-base, #{$fui-color-accent}) 62%,
+      var(--fui-control-checked-border, #{$fui-color-accent}) 62%,
       transparent
     );
-    box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--fui-button-primary-base, #{$fui-color-accent}) 28%, transparent);
+    box-shadow: 0 0 0 var(--fui-stroke-hairline, 1px)
+      color-mix(in srgb, var(--fui-control-checked-border, #{$fui-color-accent}) 28%, transparent);
   }
 
   &[data-size="sm"] {
@@ -219,26 +240,10 @@
 }
 
 .group[data-invalid] .radio {
-  border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-}
-
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
+  @include field.invalid-state;
 
-@media (prefers-contrast: more) {
-  .radio {
-    border-color: var(--fui-text-primary, $fui-text-primary);
-    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-
-    &[data-checked] {
-      border-color: var(--fui-button-primary-base, $fui-color-accent);
-    }
-
-    &[data-invalid] {
-      border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-    }
+  &:focus-visible {
+    @include field.invalid-focus-state;
   }
 }
 

package/src/components/RadioGroup/index.tsx

@@ -50,13 +50,11 @@ export interface RadioGroupProps extends Omit<
   /** Size variant */
   size?: "sm" | "md" | "lg";
   /**
-   * Visual variant.
-   * - `default`: inline radio circle next to a label (form-control style).
-   * - `card`: each item is a full-width clickable card with the radio circle
-   *   tucked inside. Useful for high-stakes choices, surveys, plan pickers.
-   * @default "default"
+   * Chrome. Omit it for the inline radio circle next to a label (form-control
+   * style); `outline` renders each item as a full-width bordered surface with
+   * the radio circle tucked inside — high-stakes choices, surveys, plan pickers.
    */
-  variant?: "default" | "card";
+  variant?: "outline";
   /** Class applied to the outer wrapper (label + group + error) */
   wrapperClassName?: string;
   /** Class applied to the inner radio group container */
@@ -76,6 +74,12 @@ export interface RadioItemProps {
   helperText?: string;
   /** @deprecated Use helperText instead. Description text below the label. */
   description?: string;
+  /**
+   * A value at the end of the row, on the label's line — a price, a count,
+   * a date. Read by the label's accessible name, so keep it short and put
+   * the explanation in `helperText`.
+   */
+  trailing?: React.ReactNode;
   /** Whether this item is disabled */
   disabled?: boolean;
   /** Accessible name for icon-only mode */
@@ -97,7 +101,7 @@ export interface RadioItemProps {
 // ============================================
 
 const RadioSizeContext = React.createContext<ControlSize>("md");
-const RadioVariantContext = React.createContext<"default" | "card">("default");
+const RadioVariantContext = React.createContext<"outline" | undefined>(undefined);
 
 // ============================================
 // Radio Item Component
@@ -108,6 +112,7 @@ function RadioItem({
   label,
   helperText,
   description,
+  trailing,
   disabled = false,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -122,6 +127,7 @@ function RadioItem({
   const id = React.useId();
   const labelId = label ? `radio-label-${id}` : undefined;
   const descriptionId = resolvedHelperText ? `radio-desc-${id}` : undefined;
+  const trailingId = trailing != null ? `radio-trailing-${id}` : undefined;
 
   const radioClasses = [
     styles.radio,
@@ -134,7 +140,7 @@ function RadioItem({
 
   const wrapperClasses = [
     styles.itemWrapper,
-    variant === "card" && styles.itemWrapperCard,
+    variant === "outline" && styles.itemWrapperOutline,
     className,
   ]
     .filter(Boolean)
@@ -162,13 +168,14 @@ function RadioItem({
       className={wrapperClasses}
       data-disabled={disabled || undefined}
       data-has-description={resolvedHelperText ? true : undefined}
+      data-has-trailing={trailing != null ? true : undefined}
       data-size={size}
     >
       <BaseRadio.Root
         value={value}
         disabled={disabled}
         aria-label={ariaLabel}
-        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
+        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId, trailingId)}
         aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}
         data-size={size}
         className={radioClasses}
@@ -185,6 +192,11 @@ function RadioItem({
           </span>
         )}
       </div>
+      {trailing != null && (
+        <span id={trailingId} className={styles.trailing}>
+          {trailing}
+        </span>
+      )}
     </label>
   );
 }
@@ -210,7 +222,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
     helperText,
     error,
     size: sizeProp,
-    variant = "default",
+    variant,
     wrapperClassName,
     groupClassName,
     groupId,
@@ -266,6 +278,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
             aria-describedby={mergeAriaIds(ariaDescribedBy, errorId, helperId)}
             data-size={size}
             data-invalid={hasError || undefined}
+            aria-invalid={hasError || undefined}
             className={groupClasses}
           >
             {children}

package/src/components/ScrollArea/ScrollArea.contract.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "ScrollArea",
-  "description": "A styled scrollable container with thin scrollbars and optional fade indicators.",
+  "description": "Scrolls overflowing content with a slim scrollbar and optional edge fades.",
   "category": "layout",
   "tags": ["scroll", "overflow", "scrollbar", "container", "layout"],
   "status": "stable",
@@ -48,20 +48,19 @@
   },
   "usage": {
     "when": [
-      "Content overflows its container and needs scrolling",
-      "Horizontal tab bars or chip lists that may overflow",
-      "Scrollable panels, sidebars, or dropdown content",
-      "Any area where native scrollbars look too heavy"
+      "Content that overflows a fixed-size container",
+      "Tab bars or chip rows that may run past the edge",
+      "Scrollable panels, sidebars, and menu content"
     ],
     "whenNot": [
-      "Page-level scrolling (use native body scroll)",
-      "Very short content that never overflows"
+      "Whole-page scrolling (use the native body scroll)",
+      "Content that can never overflow"
     ],
     "guidelines": [
-      "Use `orientation` to constrain scroll direction",
-      "Use `showFades` to hint at hidden content beyond the viewport",
-      "The `auto` and `hover` modes keep the thumb quiet until hover or keyboard focus without changing track geometry",
-      "Combine with `orientation=\"horizontal\"` for tab bars and chip rows"
+      "orientation constrains which axis can scroll",
+      "showFades hints at hidden content when nothing else does",
+      "scrollbarVisibility=\"hover\" hides the thumb without shifting layout",
+      "The container needs a fixed height or the area cannot scroll"
     ],
     "accessibility": [
       "Preserves native scroll behavior and keyboard support across both axes",
@@ -72,23 +71,23 @@
   "examples": [
     {
       "name": "Vertical",
-      "description": "Vertical scrollable area with thin scrollbar.",
-      "code": "<ScrollArea style={{ height: '200px' }}>\n  {/* Long content */}\n</ScrollArea>"
+      "description": "Scrolls down with a thin, always-visible thumb.",
+      "code": "import { Box } from '@/components/Box';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <ScrollArea style={{ height: '200px' }}>\n    <Box padding=\"sm\">\n      <Stack gap=\"sm\">\n        <Text>Row 1</Text>\n        <Text>Row 2</Text>\n        <Text>Row 3</Text>\n        <Text>Row 4</Text>\n        <Text>Row 5</Text>\n        <Text>Row 6</Text>\n        <Text>Row 7</Text>\n        <Text>Row 8</Text>\n        <Text>Row 9</Text>\n        <Text>Row 10</Text>\n        <Text>Row 11</Text>\n        <Text>Row 12</Text>\n      </Stack>\n    </Box>\n  </ScrollArea>\n</Box>"
     },
     {
       "name": "Horizontal",
-      "description": "Horizontal scrollable area for overflowing inline content like tabs or chips.",
-      "code": "<ScrollArea orientation=\"horizontal\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    {tags.map(tag => <Chip key={tag}>{tag}</Chip>)}\n  </div>\n</ScrollArea>"
+      "description": "Keeps an overflowing row of chips on one line.",
+      "code": "import { Box } from '@/components/Box';\nimport { Chip } from '@/components/Chip';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\n\n<Box width=\"100%\">\n  <ScrollArea orientation=\"horizontal\">\n    <Stack direction=\"row\" gap=\"sm\">\n      <Chip>React</Chip>\n      <Chip>TypeScript</Chip>\n      <Chip>Accessibility</Chip>\n      <Chip>Docs</Chip>\n      <Chip>Playground</Chip>\n      <Chip>CLI</Chip>\n      <Chip>Tokens</Chip>\n      <Chip>Governance</Chip>\n      <Chip>Contracts</Chip>\n      <Chip>Registry</Chip>\n    </Stack>\n  </ScrollArea>\n</Box>"
     },
     {
       "name": "With Fades",
-      "description": "Fade indicators independently show the available logical direction on each scrollable axis.",
-      "code": "<ScrollArea orientation=\"horizontal\" showFades>\n  {/* Overflowing content */}\n</ScrollArea>"
+      "description": "Edge fades signal there is more content each way.",
+      "code": "import { Box } from '@/components/Box';\nimport { Chip } from '@/components/Chip';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\n\n<Box width=\"100%\">\n  <ScrollArea orientation=\"horizontal\" showFades>\n    <Stack direction=\"row\" gap=\"sm\">\n      <Chip>React</Chip>\n      <Chip>TypeScript</Chip>\n      <Chip>Accessibility</Chip>\n      <Chip>Docs</Chip>\n      <Chip>Playground</Chip>\n      <Chip>CLI</Chip>\n      <Chip>Tokens</Chip>\n      <Chip>Governance</Chip>\n      <Chip>Contracts</Chip>\n      <Chip>Registry</Chip>\n    </Stack>\n  </ScrollArea>\n</Box>"
     },
     {
       "name": "Hover Scrollbar",
-      "description": "Scrollbar thumb paint appears on hover or keyboard focus without changing track dimensions.",
-      "code": "<ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n  {/* Content */}\n</ScrollArea>"
+      "description": "Thumb stays invisible until hover or keyboard focus.",
+      "code": "import { Box } from '@/components/Box';\nimport { ScrollArea } from '@/components/ScrollArea';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n    <Box padding=\"sm\">\n      <Stack gap=\"sm\">\n        <Text>Row 1</Text>\n        <Text>Row 2</Text>\n        <Text>Row 3</Text>\n        <Text>Row 4</Text>\n        <Text>Row 5</Text>\n        <Text>Row 6</Text>\n        <Text>Row 7</Text>\n        <Text>Row 8</Text>\n        <Text>Row 9</Text>\n        <Text>Row 10</Text>\n        <Text>Row 11</Text>\n        <Text>Row 12</Text>\n      </Stack>\n    </Box>\n  </ScrollArea>\n</Box>"
     }
   ],
   "contract": {