{
  "version": "0.138.1",
  "begin": "───── CODE · ionbase-ui ─────",
  "end": "───── end code ─────",
  "blocks": {
    "1661:272": {
      "figmaComponent": "AI Label",
      "component": "AILabel",
      "block": "───── CODE · ionbase-ui ─────\nimport { AILabel } from 'ionbase-ui';\n<AILabel size=\"md\" aria-label={…}>Label</AILabel>\n\nPROPERTIES\n  Size → size: Medium=md, Small=sm\n  State → isOpen (Open only)\n  Show Edited → isEdited\n  Explanation → children\n\nNOTES\n  State: Open is runtime, not a prop to set: a press opens it and Escape, a press outside or focus leaving closes it. Pass isOpen only to control it from outside.\n  Show Edited: A person has changed the content since it was generated: the mark adds \"Edited\" and the explanation's heading says so.\n  Explanation: Required: what was generated, from what, and what to check — plus at most one Link. The heading \"Generated by AI\" is drawn by the component. Name the mark with aria-label for the content: \"About this result\".\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/ailabel/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1360:267": {
      "figmaComponent": "Accordion",
      "component": "Accordion",
      "block": "───── CODE · ionbase-ui ─────\nimport { Accordion } from 'ionbase-ui';\n<Accordion />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/accordion/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1360:266": {
      "figmaComponent": "Accordion Item",
      "component": "AccordionItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { AccordionItem } from 'ionbase-ui';\n<AccordionItem id={…} title={…}>Label</AccordionItem>\n\nPROPERTIES\n  Title → title\n  Content → children\n  State → isDisabled (Disabled only)\n\nNOTES\n  State: Collapsed and Expanded are the container’s expandedKeys, not the item’s: a static frame cannot own a selection, so the axis is drawn on the item and owned in code by Accordion.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/accordion-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1162:246": {
      "figmaComponent": "Agent Activity",
      "component": "AgentActivity",
      "block": "───── CODE · ionbase-ui ─────\nimport { AgentActivity } from 'ionbase-ui';\n<AgentActivity />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/agent-activity/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1161:287": {
      "figmaComponent": "Agent Activity Step",
      "component": "AgentActivityStep",
      "block": "───── CODE · ionbase-ui ─────\nimport { AgentActivityStep } from 'ionbase-ui';\n<AgentActivityStep status=\"pending\">Label</AgentActivityStep>\n\nPROPERTIES\n  Status → status: Pending=pending, Active=active, Done=done, Failed=failed, Skipped=skipped\n  Label → children\n  Detail → detail\n  Show Detail → detail\n\nNOTES\n  Show Detail: false means detail is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/agent-activity-step/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1156:296": {
      "figmaComponent": "Agent Stop",
      "component": "AgentStop",
      "block": "───── CODE · ionbase-ui ─────\nimport { AgentStop } from 'ionbase-ui';\n<AgentStop size=\"sm\" onStop={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Label → label\n  Stopping Label → stoppingLabel\n\nNOTES\n  State: Default/Hover are CSS states; Stopping is the drawn form of isStopping\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/agent-stop/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "812:1902": {
      "figmaComponent": "Alert",
      "component": "Alert",
      "block": "───── CODE · ionbase-ui ─────\nimport { Alert } from 'ionbase-ui';\n<Alert intent=\"information\" emphasis=\"subtle\" layout=\"inline\">Label</Alert>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Emphasis → emphasis: Subtle=subtle, Solid=solid\n  Layout → layout: Inline=inline, Banner=banner\n  Title → title\n  Show Title → title\n  Message → children\n  Show Icon → hideIcon\n  Show Dismiss → onDismiss\n  Show Actions → actions\n\nNOTES\n  Layout: Banner is the layout; for a notice about the whole product — maintenance, read-only mode — at the top of the app shell, use the Banner component, which is this layout plus a remembered dismissal\n  Show Title: false means omit title\n  Show Icon: inverted — Figma's Show Icon false is hideIcon true\n  Show Dismiss: the dismiss button appears when a handler is passed; there is no boolean\n  Show Actions: an absent prop is the switch\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/alert/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1160:423": {
      "figmaComponent": "Approval Gate",
      "component": "ApprovalGate",
      "block": "───── CODE · ionbase-ui ─────\nimport { ApprovalGate } from 'ionbase-ui';\n<ApprovalGate risk=\"low\" status=\"pending\" title={…}>Label</ApprovalGate>\n\nPROPERTIES\n  Risk → risk: Low=low, Medium=medium, High=high\n  Status → status: Pending=pending, Approved=approved, Rejected=rejected, Expired=expired\n  Title → title\n  Detail → children\n  Show Detail → children\n  Reject Label → rejectLabel\n  Edit Label → editLabel\n  Approve Label → approveLabel\n  Show Edit → onEdit\n\nNOTES\n  Show Detail: false means no children passed\n  Show Edit: the Edit button renders only when onEdit is supplied\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/approval-gate/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "74:164": {
      "figmaComponent": "Avatar",
      "component": "Avatar",
      "block": "───── CODE · ionbase-ui ─────\nimport { Avatar } from 'ionbase-ui';\n<Avatar size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Shape → shape: Circle=circle, Square=square\n  Type → src (Image only)\n  Initials → initials\n  Icon → icon\n  Show Ring → ring\n  Show Top Indicator → topIndicator\n  Show Bottom Indicator → bottomIndicator\n\nNOTES\n  Type: code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon.\n  Show Top Indicator: Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders.\n  Show Bottom Indicator: As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1054:305": {
      "figmaComponent": "Avatar Gradient",
      "component": "AvatarGradient",
      "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGradient } from 'ionbase-ui';\n<AvatarGradient size=\"lg\" color=\"slate\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Color → color: Slate=slate, Blue=blue, Violet=violet, Pink=pink, Orange=orange, Green=green, Red=red\n  Initials → initials\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-gradient/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "74:279": {
      "figmaComponent": "Avatar Group",
      "component": "AvatarGroup",
      "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGroup } from 'ionbase-ui';\n<AvatarGroup size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Shape → shape: Circle=circle, Square=square\n  Show Overflow → max\n  Show Avatar 3 → children\n  Show Avatar 4 → children\n\nNOTES\n  Show Overflow: the +N avatar appears when children exceed max\n  Show Avatar 3: Figma needs a boolean per slot; React just renders fewer children\n  Show Avatar 4: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-group/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "152:73": {
      "figmaComponent": "Badge",
      "component": "Badge",
      "block": "───── CODE · ionbase-ui ─────\nimport { Badge } from 'ionbase-ui';\n<Badge intent=\"neutral\" size=\"sm\" shape=\"pill\">Label</Badge>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Label → children\n  Show Label → children\n  Show Dot → dot\n  Show Icon → icon\n  Swap Icon → icon\n  Size → size: Small=sm, Medium=md, Large=lg\n  Shape → shape: Pill=pill, Rounded=rounded\n\nNOTES\n  Show Icon: false means omit icon; dot wins when both are set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/badge/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "126:22724": {
      "figmaComponent": "Border",
      "component": "Divider",
      "block": "───── CODE · ionbase-ui ─────\nimport { Divider } from 'ionbase-ui';\n<Divider orientation=\"vertical\" />\n\nPROPERTIES\n  Style → orientation: Horizontal=horizontal, Vertical=vertical\n\nFigma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/divider/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1359:252": {
      "figmaComponent": "Breadcrumb",
      "component": "Breadcrumb",
      "block": "───── CODE · ionbase-ui ─────\nimport { Breadcrumb } from 'ionbase-ui';\n<Breadcrumb />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/breadcrumb/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1359:251": {
      "figmaComponent": "Breadcrumb Item",
      "component": "BreadcrumbItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { BreadcrumbItem } from 'ionbase-ui';\n<BreadcrumbItem>Label</BreadcrumbItem>\n\nPROPERTIES\n  Label → children\n  State → isCurrent (Current only)\n\nNOTES\n  Show Separator: The separator is a CSS ::before in code and never markup, so it stays out of the accessibility tree — a \"/\" in the DOM is the usual build of this component and the usual defect. Figma has no generated content, so it is drawn as a real text layer and switched off on the first crumb. A drawing convenience with no prop behind it.\n  State: Default is the resting link and Hover is CSS. Only Current is a prop, because the last crumb renders as text rather than a link.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/breadcrumb-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "21:461": {
      "figmaComponent": "Button",
      "component": "Button",
      "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\">Label</Button>\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n  State → isDisabled (Disabled only)\n  Label → children\n  Leading Icon → startIcon\n  Trailing Icon → endIcon\n  Show Leading Icon → startIcon\n  Show Trailing Icon → endIcon\n\nNOTES\n  State: Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one.\n  Leading Icon: wrap in Icon; omit Icon's label, the button text names it\n  Trailing Icon: same\n  Show Leading Icon: an absent prop is the switch — React needs no Show boolean, so false means omit startIcon\n  Show Trailing Icon: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1564:513": {
      "figmaComponent": "Button Group",
      "component": "ButtonGroup",
      "block": "───── CODE · ionbase-ui ─────\nimport { ButtonGroup } from 'ionbase-ui';\n<ButtonGroup align=\"end\" overflow=\"wrap\">…</ButtonGroup>\n\nPROPERTIES\n  Align → align: End=end, Start=start, Center=center\n  Stack → stack (True only)\n  Overflow → overflow: Wrap=wrap, Menu=menu\n  Show Start → start\n\nNOTES\n  Stack: Stacked is what the group becomes below 32rem of viewport when `stack` is set; drawn at 343px. Align and Overflow do not apply to it, so it is drawn once.\n  Overflow: Menu shows the row once some Buttons have moved into More actions; in code the move is measured, not chosen — the design shows the result on a narrow row.\n  Show Start: The `start` slot: Back in a wizard. False means `start` is omitted.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button-group/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1441:294": {
      "figmaComponent": "Card",
      "component": "Card",
      "block": "───── CODE · ionbase-ui ─────\nimport { Card } from 'ionbase-ui';\n<Card intent=\"default\" />\n\nPROPERTIES\n  Intent → intent: Default=default, Danger=danger\n  Title → title\n  Show Header → title\n  Description → description\n  Show Description → description\n  Action → action\n  Show Action → action\n  Show Body → children\n\nNOTES\n  Show Header: false hides the whole title row. In code, omit title: the card renders a <div> rather than a named <section>, and description goes with it\n  Show Description: false means description is omitted\n  Action: a standalone Link in the design; a small Button also fits. One control only\n  Show Action: false means action is omitted\n  Show Body: the body frame is a placeholder; in code the card’s children follow the title row\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/card/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1432:369": {
      "figmaComponent": "Chart Legend",
      "component": "ChartLegend",
      "block": "───── CODE · ionbase-ui ─────\nimport { ChartLegend } from 'ionbase-ui';\n<ChartLegend shape=\"square\" items={…} />\n\nPROPERTIES\n  Shape → shape: Square=square, Line=line\n  Show Item 3 → items\n\nNOTES\n  Show Item 3: true draws a third entry in items; the entry count is the length of the array\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/chart-legend/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1432:282": {
      "figmaComponent": "Chart Tooltip",
      "component": "ChartTooltip",
      "block": "───── CODE · ionbase-ui ─────\nimport { ChartTooltip } from 'ionbase-ui';\n<ChartTooltip />\n\nPROPERTIES\n  Title → title\n  Show Row 2 → rows\n  Show Row 3 → rows\n\nNOTES\n  Show Row 2: true draws a second entry in rows; the row count is the length of the array\n  Show Row 3: true draws a third entry in rows\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/chart-tooltip/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1664:292": {
      "figmaComponent": "Chat Message",
      "component": "ChatMessage",
      "block": "───── CODE · ionbase-ui ─────\nimport { ChatMessage } from 'ionbase-ui';\n<ChatMessage from=\"person\" author={…}>…</ChatMessage>\n\nPROPERTIES\n  From → from: Person=person, Assistant=assistant\n  Show Actions → actions\n  Show Avatar → avatar\n\nNOTES\n  Show Actions: Buttons after the message — Copy answer, Ask again. In code, pass them as `actions`; they follow the content in reading order.\n  Show Avatar: Avatar Gradient for a person, Logo mark for the assistant. Decoration: hidden from assistive tech, since the author's name says who.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/chat-message/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "87:350": {
      "figmaComponent": "Checkbox",
      "component": "Checkbox",
      "block": "───── CODE · ionbase-ui ─────\nimport { Checkbox } from 'ionbase-ui';\n<Checkbox size=\"sm\" intent=\"brand\">Label</Checkbox>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  State → isIndeterminate (Indeterminate, Indeterminate-disabled only)\n  Label → children\n  Show Label → children\n\nNOTES\n  State: Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping.\n  Show Label: false means a bare box — and then aria-label becomes required\n  Focused: a drawn focus ring. In code it is :focus-visible, which the browser owns.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/checkbox/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1501:475": {
      "figmaComponent": "Checkbox Group",
      "component": "CheckboxGroup",
      "block": "───── CODE · ionbase-ui ─────\nimport { CheckboxGroup } from 'ionbase-ui';\n<CheckboxGroup orientation=\"vertical\" label=\"…\" />\n\nPROPERTIES\n  Orientation → orientation: Vertical=vertical, Horizontal=horizontal\n  State → isInvalid (Error only)\n  Label → label\n  Helper Text → description\n  Show Helper → description\n\nNOTES\n  State: Error recolours the helper and shows errorMessage in its place; pass the error copy as errorMessage, not description. Disabled is isDisabled on the group, which cascades to every Checkbox.\n  Helper Text: the help text; while State=Error the same slot holds errorMessage\n  Show Helper: an absent prop is the switch, so false means omit description\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/checkbox-group/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1167:247": {
      "figmaComponent": "Citation",
      "component": "Citation",
      "block": "───── CODE · ionbase-ui ─────\nimport { Citation } from 'ionbase-ui';\n<Citation index={…} source={…} />\n\nPROPERTIES\n  Index → index\n\nNOTES\n  State: Default/Hover is :hover in code\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/citation/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1168:246": {
      "figmaComponent": "Citation List",
      "component": "CitationList",
      "block": "───── CODE · ionbase-ui ─────\nimport { CitationList } from 'ionbase-ui';\n<CitationList />\n\nPROPERTIES\n  Label → label\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/citation-list/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1168:241": {
      "figmaComponent": "Citation List Item",
      "component": "CitationListItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { CitationListItem } from 'ionbase-ui';\n<CitationListItem index={…} source={…}>Label</CitationListItem>\n\nPROPERTIES\n  Index → index\n  Source → source\n  Passage → children\n  Show Passage → children\n\nNOTES\n  Show Passage: false means no children passed\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/citation-list-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1585:273": {
      "figmaComponent": "Code Snippet",
      "component": "CodeSnippet",
      "block": "───── CODE · ionbase-ui ─────\nimport { CodeSnippet } from 'ionbase-ui';\n<CodeSnippet type=\"single\">…</CodeSnippet>\n\nPROPERTIES\n  Type → type: Single=single, Multi=multi, Inline=inline\n\nThe code is the snippet's `children`, a string, shown and copied exactly as given. In Figma it is the Code text layer, edited directly.\n\nNOTES\n  Show More: Not a prop: Show more appears by itself when a multi block has more lines than `maxLines` (12 by default), and reads Show less once pressed.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/code-snippet/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1370:2359": {
      "figmaComponent": "Combobox",
      "component": "Combobox",
      "block": "───── CODE · ionbase-ui ─────\nimport { Combobox } from 'ionbase-ui';\n<Combobox size=\"sm\" options={…} label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → placeholder\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the field is Input’s box.\n  Value: Figma’s text is whatever the field shows. In code that is `placeholder` until something is chosen; after that it is the selected option’s label, which comes from `options`.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/combobox/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1458:368": {
      "figmaComponent": "Command Palette",
      "component": "CommandPalette",
      "block": "───── CODE · ionbase-ui ─────\nimport { CommandPalette } from 'ionbase-ui';\n<CommandPalette\n  commands={[\n    { id: 'new-agent', label: 'Create agent', section: 'Actions' },\n    { id: 'go-runs', label: 'Go to Runs', section: 'Navigation' },\n  ]}\n  onAction={(id) => run(id)}\n/>\n\nPROPERTIES\n  Placeholder → placeholder\n\nNOTES\n  Show Footer: the key hints are always rendered and hidden by CSS below 40rem, where there are no arrow keys to hint at — a viewport's answer, not a prop\n  State: Results and Empty are what the query produces against `commands`; the empty text is `emptyLabel`\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/command-palette/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1166:262": {
      "figmaComponent": "Confidence Indicator",
      "component": "ConfidenceIndicator",
      "block": "───── CODE · ionbase-ui ─────\nimport { ConfidenceIndicator } from 'ionbase-ui';\n<ConfidenceIndicator level=\"low\" basis={…} />\n\nPROPERTIES\n  Level → level: Low=low, Medium=medium, High=high\n  Basis → basis\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/confidence-indicator/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1578:563": {
      "figmaComponent": "Copy Button",
      "component": "CopyButton",
      "block": "───── CODE · ionbase-ui ─────\nimport { CopyButton } from 'ionbase-ui';\n<CopyButton variant=\"tertiary\" size=\"sm\" value={…} />\n\nPROPERTIES\n  Type → variant: Tertiary=tertiary, Secondary=secondary\n  Size → size: Small=sm, Medium=md, Large=lg\n  Icon Only → isIconOnly (True only)\n\nNOTES\n  Icon Only: `label` is then the name and the tooltip, and must say what is copied — \"Copy run ID\"\n  State: Idle, Copied and Failed are what the button shows after a press, for `resetAfter` milliseconds — not props. Copied and Failed read `copiedLabel` and `failedLabel`.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/copy-button/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1394:536": {
      "figmaComponent": "Date Picker",
      "component": "DatePicker",
      "block": "───── CODE · ionbase-ui ─────\nimport { DatePicker } from 'ionbase-ui';\n<DatePicker size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Input, whose box this is.\n  Type: Single is DatePicker; Range is DateRangePicker, which takes the same size and state props. A Figma set maps to one code component, so the range picker is reached through this axis — see codeUnmapped.DateRangePicker.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/date-picker/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1706:718": {
      "figmaComponent": "Coachmark",
      "component": "Coachmark",
      "block": "───── CODE · ionbase-ui ─────\nimport { Coachmark } from 'ionbase-ui';\n<Coachmark placement=\"bottom\" target={…} title={…}>Label</Coachmark>\n\nPROPERTIES\n  Placement → placement: Bottom=bottom, Top=top, Start=start, End=end\n  Title → title\n  Body → children\n  Show Close → onClose\n\nNOTES\n  Placement: logical: Start is drawn on the left, as a left-to-right page has it, and is the right in right to left. React Aria flips it when there is no room\n  Step: Tour's. Single is a Coachmark with no footer; First, Middle and Last are the footer a Tour builds for each step — its `progress` (\"2 of 4\") and Back, Next or Done. A lone Coachmark takes `progress` and `footer` itself; a sequence is Tour — see codeUnmapped.Tour\n  Show Close: the close button shows when `onClose` is passed, and Escape closes it too; without one there is neither\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/coachmark/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1711:6649": {
      "figmaComponent": "App Switcher",
      "component": "AppSwitcher",
      "block": "───── CODE · ionbase-ui ─────\nimport { AppSwitcher } from 'ionbase-ui';\n<AppSwitcher apps={…} />\n\nPROPERTIES\n  Label → label\n  Show Footer → footer\n\nNOTES\n  Label: names the nine-dot button, its tooltip and the panel; \"Apps\" by default\n  Show Footer: shown when `footer` is passed — a Link to every app, or to managing access\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/app-switcher/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1696:834": {
      "figmaComponent": "Color Picker",
      "component": "ColorPicker",
      "block": "───── CODE · ionbase-ui ─────\nimport { ColorPicker } from 'ionbase-ui';\n<ColorPicker size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, whose box this is. Default, Hover and Focus are empty: a struck-through chip and no hex, value={null}. The chip's blue is the value, #0B5FFF, not a token. Open, the area, the hue strip and the presets — the page's \"Example — colour, open\" frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/color-picker/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1691:763": {
      "figmaComponent": "Date Time Picker",
      "component": "DateTimePicker",
      "block": "───── CODE · ionbase-ui ─────\nimport { DateTimePicker } from 'ionbase-ui';\n<DateTimePicker size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Date Picker, whose box this is. The value text shows the reader's own format; the prop is YYYY-MM-DDTHH:MM, a wall-clock reading with no zone. Open, the calendar has a Time Field under it — the page's \"Example — date and time, open\" frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/date-time-picker/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1549:294": {
      "figmaComponent": "Description List",
      "component": "DescriptionList",
      "block": "───── CODE · ionbase-ui ─────\nimport { DescriptionList } from 'ionbase-ui';\n<DescriptionList layout=\"horizontal\">…</DescriptionList>\n\nPROPERTIES\n  Layout → layout: Horizontal=horizontal, Stacked=stacked, Row=row\n\nNOTES\n  Layout: Horizontal stacks by itself when the list is narrower than 24rem — its own width, not the screen's — so a narrow frame needs no Stacked swap.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/description-list/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1549:254": {
      "figmaComponent": "Description List Item",
      "component": "DescriptionListItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { DescriptionListItem } from 'ionbase-ui';\n<DescriptionListItem term={…}>Label</DescriptionListItem>\n\nPROPERTIES\n  Term → term\n  Value → children\n\nNOTES\n  Empty: the drawn form of an empty value. In code pass null (not a typed dash): the item draws the \"—\" and reads the list's emptyText, \"Not set\"\n  Layout: follows the DescriptionList's layout, not the item's: Horizontal items belong in a Horizontal list, Stacked items in a Stacked or Row one\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/description-list-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1365:2404": {
      "figmaComponent": "Drawer",
      "component": "Drawer",
      "block": "───── CODE · ionbase-ui ─────\nimport { Drawer } from 'ionbase-ui';\n<Drawer placement=\"start\" size=\"sm\" title={…} />\n\nPROPERTIES\n  Placement → placement: Start=start, End=end, Top=top, Bottom=bottom\n  Size → size: Small=sm, Medium=md, Large=lg\n  Title → title\n  Description → description\n  Show Description → description\n  Show Close → showClose\n  Show Footer → footer\n\nNOTES\n  Show Description: false means description is omitted\n  Show Footer: false means footer is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/drawer/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1334:2294": {
      "figmaComponent": "Empty State",
      "component": "EmptyState",
      "block": "───── CODE · ionbase-ui ─────\nimport { EmptyState } from 'ionbase-ui';\n<EmptyState size=\"inline\" reason=\"first-run\" title={…} />\n\nPROPERTIES\n  Size → size: Inline=inline, Panel=panel, Page=page\n  Reason → reason: No Results=no-results, First Run=first-run, No Access=no-access, Error=error\n  Title → title\n  Description → description\n  Show Description → description\n  Show Icon → icon\n  Show Actions → action\n\nNOTES\n  Show Description: an absent prop is the switch\n  Show Icon: the mark renders when a node is passed; there is no boolean, and reason picks the tint rather than the glyph\n  Show Actions: the row appears when action or secondaryAction is passed; there is no boolean\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/empty-state/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1367:2333": {
      "figmaComponent": "File Upload",
      "component": "FileUpload",
      "block": "───── CODE · ionbase-ui ─────\nimport { FileUpload } from 'ionbase-ui';\n<FileUpload size=\"md\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md\n  State → isInvalid (Invalid only)\n  Prompt → prompt\n  Hint → hint\n  Show Hint → hint\n\nNOTES\n  State: Hover and Dragging are CSS; Disabled is isDisabled. Dragging has no prop at all — it is a pointer state the browser owns.\n  Show Hint: false means hint is omitted\n  Icon: The upload glyph is inlined in the component, like Select’s chevron: it is part of the control rather than a slot a caller fills, so there is no prop to swap it. The INSTANCE_SWAP exists so a designer can substitute it in a mock without detaching.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/file-upload/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "592:857": {
      "figmaComponent": "Full Card",
      "component": "FullCard",
      "block": "───── CODE · ionbase-ui ─────\nimport { FullCard } from 'ionbase-ui';\n<FullCard alignment=\"right\" headline={…} />\n\nPROPERTIES\n  Row Reverse → alignment: True=left, False=right\n  Headline → headline\n  Description → description\n  Show Description → description\n  Eyebrow → eyebrow\n  Show Eyebrow → eyebrow\n  Actions → actions\n  Show Actions → actions\n  Media → media\n\nNOTES\n  Row Reverse: Figma's boolean reverses the row; the code prop names which side the MEDIA sits on\n  Media: pass the screenshot itself — the component draws the frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/full-card/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "69:335": {
      "figmaComponent": "Header",
      "component": "Header",
      "block": "───── CODE · ionbase-ui ─────\nimport { Header } from 'ionbase-ui';\n<Header />\n\nPROPERTIES\n  Device → open (Mobile-Open, Mobile-Closed only)\n  Center Slot → center\n  End Slot → end\n  Show Center Slot → center\n  Show End Slot → end\n\nNOTES\n  Device: Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop.\n  End Slot: a duplicate slot in the Figma component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/header/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "623:151": {
      "figmaComponent": "Icon Button",
      "component": "Button",
      "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n  State → isDisabled (Disabled only)\n  Icon → startIcon\n\nNot a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.\n\nNOTES\n  State: as Button\n  Icon: with Icon's own label omitted — the Button's aria-label carries the name\n  Shape: Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1623:368": {
      "figmaComponent": "Inline Edit",
      "component": "InlineEdit",
      "block": "───── CODE · ionbase-ui ─────\nimport { InlineEdit } from 'ionbase-ui';\n<InlineEdit size=\"sm\" label={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md\n\nThe value, and the Value text layer here, is `value` (or `defaultValue`); edit it directly. The label is not drawn — `label` names the field and the Edit button in code — and neither is the status that announces a save. In code the value inherits the text around it — a page description, a table cell — so the type drawn here is a sample; Size is the field's.\n\nNOTES\n  State: Runtime, not props. View is the value with its Edit button; Empty is no value, showing `placeholder`; Editing is after Edit is pressed — the field focused with its text selected, Save and Cancel below; Invalid is `validate` returning a message, or `onSave` rejecting, shown as the field's error with what was typed kept. Enter saves and Escape cancels.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/inline-edit/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "80:275": {
      "figmaComponent": "Input",
      "component": "Input",
      "block": "───── CODE · ionbase-ui ─────\nimport { Input } from 'ionbase-ui';\n<Input size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → value\n  Leading Icon → leadingIcon\n  Trailing Icon → trailingIcon\n  Show Leading Icon → leadingIcon\n  Show Trailing Icon → trailingIcon\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis.\n  Value: or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value\n  Show Leading Icon: false means omit the prop\n  Show Trailing Icon: false means omit the prop\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/input/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "80:372": {
      "figmaComponent": "Input/Phone",
      "component": "PhoneInput",
      "block": "───── CODE · ionbase-ui ─────\nimport { PhoneInput } from 'ionbase-ui';\n<PhoneInput size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Dial Code → dialCode\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/phone-input/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1457:242": {
      "figmaComponent": "Kbd",
      "component": "Kbd",
      "block": "───── CODE · ionbase-ui ─────\nimport { Kbd } from 'ionbase-ui';\n<Kbd shortcut=\"mod+k\" />\n\nPROPERTIES\n  Key → children\n\nNOTES\n  Key: one Figma Kbd is one key. For a shortcut, use `shortcut=\"mod+k\"` on a single Kbd rather than several: it draws each platform's own keys and names them for a screen reader\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/kbd/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "774:1516": {
      "figmaComponent": "Link",
      "component": "Link",
      "block": "───── CODE · ionbase-ui ─────\nimport { Link } from 'ionbase-ui';\n<Link variant=\"inline\">Label</Link>\n\nPROPERTIES\n  Type → variant: Inline=inline, Standalone=standalone\n  State → isDisabled (Disabled only)\n  Label → children\n  Leading Icon → startIcon\n  Trailing Icon → endIcon\n  Show Leading Icon → startIcon\n  Show Trailing Icon → endIcon\n\nNOTES\n  State: Hover and Focus are CSS; Visited is :visited, which no prop can set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/link/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1557:794": {
      "figmaComponent": "List",
      "component": "List",
      "block": "───── CODE · ionbase-ui ─────\nimport { List } from 'ionbase-ui';\n<List selectionMode=\"none\" density=\"default\" items={…} aria-label=\"…\" />\n\nPROPERTIES\n  Selection → selectionMode: None=none, Single=single, Multiple=multiple\n  Density → density: Default=default, Compact=compact\n\nNOTES\n  Selection: Multiple is where each row carries its Checkbox; the Figma rows show it with Selection=Multiple on List Item. The rows themselves are `items` — see List Item.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/list/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "52:21369": {
      "figmaComponent": "Logo-Ionbase",
      "component": "Logo",
      "block": "───── CODE · ionbase-ui ─────\nimport { Logo } from 'ionbase-ui';\n<Logo size=\"sm\" wordmark=\"vector\" />\n\nPROPERTIES\n  Size → size: Small=sm, Large=lg\n  Type → wordmark: Logo=vector, Icon=text\n\nNOTES\n  Type: the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text\n  Property: the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/logo/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "82:306": {
      "figmaComponent": "Menu",
      "component": "Menu",
      "block": "───── CODE · ionbase-ui ─────\nimport { Menu } from 'ionbase-ui';\n<Menu selectionMode=\"single\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → selectionMode: Single=single, Multi=multiple\n\nNOTES\n  Type: selectionMode none — an action menu with no check slot — is not drawn; every Figma menu shows a selection.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "82:217": {
      "figmaComponent": "Menu Item",
      "component": "MenuItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { MenuItem } from 'ionbase-ui';\n<MenuItem>Label</MenuItem>\n\nPROPERTIES\n  Label → children\n  Leading Icon → icon\n  Show Leading Icon → icon\n  State → isDisabled (Disabled only)\n\nNOTES\n  Leading Icon: wrap in Icon; omit Icon's label, the row text names it\n  Show Leading Icon: an absent prop is the switch, so false means omit icon\n  State: Hover is the highlighted row, which the keyboard and the pointer share. Selected and Selected-hover are the row's key in Menu's selectedKeys, not an item prop. A row that opens a submenu is not drawn: code puts a chevron where the check sits.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1468:271": {
      "figmaComponent": "Menu Section Title",
      "component": "MenuSection",
      "block": "───── CODE · ionbase-ui ─────\nimport { MenuSection } from 'ionbase-ui';\n<MenuSection />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu-section/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "792:1537": {
      "figmaComponent": "Modal",
      "component": "Modal",
      "block": "───── CODE · ionbase-ui ─────\nimport { Modal } from 'ionbase-ui';\n<Modal size=\"sm\" align=\"left\" title={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg, Fullscreen=fullscreen\n  Align → align: Left=left, Center=center\n  Title → title\n  Description → description\n  Show Description → description\n  Show Close → showClose\n  Show Body → children\n  Show Footer → footer\n  Show Media → media\n  Media → media\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/modal/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1510:666": {
      "figmaComponent": "Multi Select",
      "component": "MultiSelect",
      "block": "───── CODE · ionbase-ui ─────\nimport { MultiSelect } from 'ionbase-ui';\n<MultiSelect size=\"md\" options={…} label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Show Tags → hideTags\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly, and both hide the tags’ × buttons. The field is Combobox’s, which is Input’s box — the same split both record.\n  Show Tags: Inverted: Show Tags off is `hideTags`, for a filter bar whose active-filters row already shows the values. With tags shown, they are the chosen `value`, labelled from `options`, and appear whenever something is chosen.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/multi-select/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "53:13": {
      "figmaComponent": "Nav Item",
      "component": "NavItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { NavItem } from 'ionbase-ui';\n<NavItem>Label</NavItem>\n\nPROPERTIES\n  State → isCurrent (Current only)\n  Label → children\n  Icon → icon\n  Show Chevron → showChevron\n\nNOTES\n  State: Default and Hover are CSS and React Aria useHover, not props.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/nav-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1611:4730": {
      "figmaComponent": "Notifications Panel",
      "component": "NotificationsPanel",
      "block": "───── CODE · ionbase-ui ─────\nimport { NotificationsPanel } from 'ionbase-ui';\n<NotificationsPanel notifications={…} />\n\nPROPERTIES\n  State → isLoading (Loading only)\n\nThe panel's contents, drawn at the width of Popover Size=Large's body (368). Place it in the Popover's Body with the Title Notifications, or in a Drawer on a phone. Its rows are .Notification instances built from `notifications`; their text layers are edited directly.\n\nNOTES\n  State: List is the default. Empty is `notifications` = [], which renders Empty State Size=Inline, Reason=First Run, \"You’re all caught up\".\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/notifications-panel/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1389:473": {
      "figmaComponent": "Number Input",
      "component": "NumberInput",
      "block": "───── CODE · ionbase-ui ─────\nimport { NumberInput } from 'ionbase-ui';\n<NumberInput size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Stepper → showStepper\n  Value → value\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the box is Input’s.\n  Value: A number in code; Figma’s text is its formatted display, and the placeholder until one is entered.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/number-input/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1473:242": {
      "figmaComponent": "Page Header",
      "component": "PageHeader",
      "block": "───── CODE · ionbase-ui ─────\nimport { PageHeader } from 'ionbase-ui';\n<PageHeader title={…} />\n\nPROPERTIES\n  Title → title\n  Description → description\n  Show Description → description\n  Show Breadcrumb → breadcrumb\n  Show Status → status\n  Show Actions → actions\n  Show Below → children\n\nNOTES\n  Show Description: an absent prop is the switch, so false means omit description\n  Show Breadcrumb: pass a Breadcrumb; false means omit breadcrumb\n  Show Status: a Badge for the record's state; false means omit status\n  Show Actions: Buttons, most important last, and a MenuTrigger with an icon-only Button for the rest; false means omit actions\n  Show Below: the row beneath — the page's Tabs or its filters; false means no children\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/page-header/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1291:503": {
      "figmaComponent": "Pagination",
      "component": "Pagination",
      "block": "───── CODE · ionbase-ui ─────\nimport { Pagination } from 'ionbase-ui';\n<Pagination type=\"numbered\" size=\"sm\" page={…} pageCount={…} aria-label=\"…\" />\n\nPROPERTIES\n  Type → type: Numbered=numbered, Simple=simple\n  Size → size: Small=sm, Medium=md, Large=lg\n  Show Page Size → showPageSize\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/pagination/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1590:386": {
      "figmaComponent": "Password Input",
      "component": "PasswordInput",
      "block": "───── CODE · ionbase-ui ─────\nimport { PasswordInput } from 'ionbase-ui';\n<PasswordInput size=\"lg\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Revealed → isRevealed (True only)\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The eye is the Show password toggle, a tab stop, in every state.\n  Revealed: Usually left to the user: the toggle sets it. Pass isRevealed with onRevealedChange only to control it, or defaultRevealed to start shown. The name stays \"Show password\" either way; aria-pressed says which.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/password-input/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "825:1853": {
      "figmaComponent": "Popover",
      "component": "Popover",
      "block": "───── CODE · ionbase-ui ─────\nimport { Popover } from 'ionbase-ui';\n<Popover placement=\"bottom\" size=\"sm\">…</Popover>\n\nPROPERTIES\n  Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n  Size → size: Small=sm, Medium=md, Large=lg\n  Title → title\n  Show Header → title\n  Body → content\n  Show Body → content\n  Show Close → showClose\n  Show Footer → footer\n  Show Arrow → hideArrow\n\nNOTES\n  Show Arrow: inverted — Show Arrow false is hideArrow true\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/popover/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1344:331": {
      "figmaComponent": "Progress Bar",
      "component": "ProgressBar",
      "block": "───── CODE · ionbase-ui ─────\nimport { ProgressBar } from 'ionbase-ui';\n<ProgressBar intent=\"primary\" size=\"md\" label={…} />\n\nPROPERTIES\n  Intent → intent: Primary=primary, Success=success, Warning=warning, Error=error\n  Size → size: Small=sm, Medium=md\n  Type → value\n  Label → label\n  Value → valueText\n  Show Label → isLabelVisible\n  Show Value → isValueVisible\n\nNOTES\n  Type: not a prop value. Determinate means `value` was passed; Indeterminate means it was omitted, which is also what drops aria-valuenow. There is no `type` prop in code, and adding one would make the state settable independently of the number it describes\n  Value: the Figma text is a sample percentage; in code `valueText` REPLACES the computed percentage and is what a screen reader speaks\n  Show Value: bound only on the Determinate variants — an indeterminate bar has no percentage to reveal\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/progress-bar/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1703:333": {
      "figmaComponent": "Progress Ring",
      "component": "ProgressRing",
      "block": "───── CODE · ionbase-ui ─────\nimport { ProgressRing } from 'ionbase-ui';\n<ProgressRing intent=\"primary\" size=\"sm\" label={…} value={…} />\n\nPROPERTIES\n  Intent → intent: Primary=primary, Success=success, Warning=warning, Error=error\n  Size → size: Small=sm, Medium=md, Large=lg\n  Label → label\n  Value → valueText\n  Show Label → isLabelVisible\n  Show Value → isValueVisible\n\nNOTES\n  Value: the text beside the ring. On Small it is the value, the percentage when no valueText is passed; on Medium and Large it shows only with a valueText, since the centre already has the percentage\n  Percent: computed from value and max — there is no prop. The drawn arc is a sample 60%; in code the fill is dashed to the value. Medium and Large only: Small has no room inside\n  Show Value: one switch for the percentage inside and the value beside, as in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/progress-ring/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1393:387": {
      "figmaComponent": "Prompt Input",
      "component": "PromptInput",
      "block": "───── CODE · ionbase-ui ─────\nimport { PromptInput } from 'ionbase-ui';\n<PromptInput isRunning=\"false\" label={…} />\n\nPROPERTIES\n  State → isDisabled (Disabled only)\n  Running → isRunning: True=true, False=false\n  Value → value\n  Show Actions → actions\n\nNOTES\n  State: Hover and Focus are CSS. Filled is content — a non-empty value — and is the only state in which send is live.\n  Running: with onStop, which is what swaps send for AgentStop\n  Value: Figma’s text is whatever the field shows: the placeholder until something is typed, then the value.\n  Show Actions: false means actions is omitted; the attach button drawn there is an example, not part of the component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/prompt-input/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "89:314": {
      "figmaComponent": "Radio",
      "component": "Radio",
      "block": "───── CODE · ionbase-ui ─────\nimport { Radio } from 'ionbase-ui';\n<Radio size=\"lg\" intent=\"brand\" value={…}>Label</Radio>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  Label → children\n  Show Label → children\n\nNOTES\n  State: Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection\n  Show Label: false means aria-label is required\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/radio/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1498:242": {
      "figmaComponent": "Search Field",
      "component": "SearchField",
      "block": "───── CODE · ionbase-ui ─────\nimport { SearchField } from 'ionbase-ui';\n<SearchField size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → value\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The clear button Filled shows is not a prop: it appears whenever there is a query.\n  Value: The query. Figma's text is also the placeholder until one is typed — pass that as placeholder, and name the field with aria-label, not the placeholder.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/search-field/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1390:435": {
      "figmaComponent": "Segmented Control",
      "component": "SegmentedControl",
      "block": "───── CODE · ionbase-ui ─────\nimport { SegmentedControl } from 'ionbase-ui';\n<SegmentedControl size=\"sm\" isFullWidth=\"false\" label={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Full Width → isFullWidth: True=true, False=false\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/segmented-control/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1390:332": {
      "figmaComponent": "Segmented Control Item",
      "component": "SegmentedControlItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { SegmentedControlItem } from 'ionbase-ui';\n<SegmentedControlItem value={…}>Label</SegmentedControlItem>\n\nPROPERTIES\n  Label → children\n  Show Icon → icon\n  Icon → icon\n  State → isDisabled (Disabled, Selected-Disabled only)\n\nNOTES\n  Show Icon: false means icon is omitted\n  Size: set on the parent SegmentedControl, not per item\n  State: Default and Hover are CSS. Selected is the parent SegmentedControl’s value — the item never owns selection, the same split Tabs Item records.\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/segmented-control-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "82:379": {
      "figmaComponent": "Select",
      "component": "Select",
      "block": "───── CODE · ionbase-ui ─────\nimport { Select } from 'ionbase-ui';\n<Select size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → placeholder\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled\n  Value: Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/select/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1628:294": {
      "figmaComponent": "Selectable Tile",
      "component": "SelectableTile",
      "block": "───── CODE · ionbase-ui ─────\nimport { SelectableTile } from 'ionbase-ui';\n<SelectableTile value={…} title={…} />\n\nPROPERTIES\n  State → isDisabled (Disabled only)\n\nTitle is `title` — the Control's Label, the input's name; Description is `description` and Extra is `children`, both read after the name. The text layers are edited directly. The whole tile is the target in code; nothing inside it may be interactive.\n\nNOTES\n  Kind: Not a prop: the group decides. Radio is a tile inside a RadioGroup — one choice, arrow keys between them; Checkbox is a tile inside a CheckboxGroup, or alone.\n  State: Selected is the group's value (or `isSelected` alone), not a tile prop; Default is neither. Selected draws the 2px border/primary-strong and the filled indicator.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/selectable-tile/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1418:260": {
      "figmaComponent": "Setting Row",
      "component": "SettingRow",
      "block": "───── CODE · ionbase-ui ─────\nimport { SettingRow } from 'ionbase-ui';\n<SettingRow label={…}>…</SettingRow>\n\nPROPERTIES\n  Label → label\n  Description → description\n  Show Description → description\n  Control → children\n\nNOTES\n  Show Description: false means description is omitted\n  Control: the control is the row’s child; in code it is named and described by the row automatically, so turn its own label off in Figma too\n  Layout: not a prop: the row stacks below 30rem of its own width through a container query, the same call Header makes for its Device axis\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/setting-row/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1547:441": {
      "figmaComponent": "Side Panel",
      "component": "SidePanel",
      "block": "───── CODE · ionbase-ui ─────\nimport { SidePanel } from 'ionbase-ui';\n<SidePanel size=\"sm\" title={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Title → title\n  Description → description\n  Show Description → description\n  Show Close → showClose\n  Show Footer → footer\n\nNOTES\n  Show Description: false means description is omitted\n  Show Footer: false means footer is omitted. The footer holds Buttons; Figma's single action is one of them\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/side-panel/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1396:502": {
      "figmaComponent": "Sidebar",
      "component": "Sidebar",
      "block": "───── CODE · ionbase-ui ─────\nimport { Sidebar } from 'ionbase-ui';\n<Sidebar label={…} />\n\nPROPERTIES\n  Show Header → header\n  Show Footer → footer\n\nNOTES\n  Show Header: false means header is omitted; the logo drawn there is an example\n  Show Footer: false means footer is omitted; the Settings row drawn there is an example\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1396:412": {
      "figmaComponent": "Sidebar Item",
      "component": "SidebarItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { SidebarItem } from 'ionbase-ui';\n<SidebarItem isExpanded=\"false\" label={…} />\n\nPROPERTIES\n  State → isCurrent (Current, Current-Hover only)\n  Has Children → children (True only)\n  Expanded → isExpanded: True=true, False=false\n  Label → label\n  Show Icon → icon\n  Icon → icon\n  Show Badge → badge\n  Badge → badge\n  Actions Visible → actions\n\nNOTES\n  State: Default and Hover are CSS; Disabled is isDisabled.\n  Has Children: True means nested SidebarItems are passed as children; Figma draws them as sibling instances indented 16px.\n  Expanded: or defaultExpanded; only meaningful with children\n  Show Icon: false means icon is omitted\n  Show Badge: false means badge is omitted\n  Actions Visible: code renders them always but reveals them on hover and focus (always on touch); Figma shows or hides them\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1396:501": {
      "figmaComponent": "Sidebar Section",
      "component": "SidebarSection",
      "block": "───── CODE · ionbase-ui ─────\nimport { SidebarSection } from 'ionbase-ui';\n<SidebarSection isExpanded=\"true\" />\n\nPROPERTIES\n  Title → title\n  Collapsible → isCollapsible\n  Collapsed → isExpanded: False=true, True=false\n  Show Actions → actions\n\nNOTES\n  Collapsed: the names invert: Figma says Collapsed, code says isExpanded (or defaultExpanded)\n  Show Actions: false means actions is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar-section/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1345:248": {
      "figmaComponent": "Skeleton",
      "component": "Skeleton",
      "block": "───── CODE · ionbase-ui ─────\nimport { Skeleton } from 'ionbase-ui';\n<Skeleton variant=\"text\" />\n\nPROPERTIES\n  Variant → variant: Text=text, Circle=circle, Rect=rect\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/skeleton/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1668:241": {
      "figmaComponent": "Skip Link",
      "component": "SkipLink",
      "block": "───── CODE · ionbase-ui ─────\nimport { SkipLink } from 'ionbase-ui';\n<SkipLink target={…}>Label</SkipLink>\n\nPROPERTIES\n  Label → children\n\nNOTES\n  Label: Defaults to \"Skip to main content\"; set it only to translate it. Drawn in its one visible state, focused: in code it is clipped to nothing until it has keyboard focus. `target` has no Figma counterpart — the id of the page's <main>.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/skip-link/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1533:308": {
      "figmaComponent": "Slider",
      "component": "Slider",
      "block": "───── CODE · ionbase-ui ─────\nimport { Slider } from 'ionbase-ui';\n<Slider label=\"…\" />\n\nPROPERTIES\n  Type → value\n  State → isDisabled (Disabled only)\n  Label → label\n  Description → description\n  Show Description → description\n  Show Value → showValue\n\nNOTES\n  Type: Not a prop of its own: the shape of value or defaultValue decides it. Single is a number, defaultValue={120}; Range is a pair, defaultValue={[30, 120]}, with thumbLabels naming the two thumbs.\n  State: Focus is runtime: the ring goes round the focused thumb's 24px target when it has keyboard focus.\n  Show Description: false means description is omitted\n  Show Value: The value text is formatted in code from formatOptions — { style: 'unit', unit: 'second', unitDisplay: 'short' } gives \"120 sec\". Do not type it.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/slider/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1341:258": {
      "figmaComponent": "Spinner",
      "component": "Spinner",
      "block": "───── CODE · ionbase-ui ─────\nimport { Spinner } from 'ionbase-ui';\n<Spinner size=\"md\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Label → label\n  Show Label → isLabelVisible\n\nNOTES\n  Show Label: controls only whether the label is VISIBLE. The label is announced either way — turning this off in Figma does not remove it from the accessibility tree, and `isDecorative` is the prop that silences the component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/spinner/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1569:410": {
      "figmaComponent": "Split Button",
      "component": "SplitButton",
      "block": "───── CODE · ionbase-ui ─────\nimport { SplitButton } from 'ionbase-ui';\n<SplitButton variant=\"primary-brand\" size=\"sm\" label={…}>…</SplitButton>\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Secondary=secondary\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n\nNOTES\n  Type: Both halves take the type. Tertiary and destructive are not offered: a quiet split button reads as two loose buttons, and a destructive one hides dangerous variations behind a menu.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/split-button/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1412:344": {
      "figmaComponent": "Stat Group",
      "component": "StatGroup",
      "block": "───── CODE · ionbase-ui ─────\nimport { StatGroup } from 'ionbase-ui';\n<StatGroup />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stat-group/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1412:343": {
      "figmaComponent": "Stat Tile",
      "component": "StatTile",
      "block": "───── CODE · ionbase-ui ─────\nimport { StatTile } from 'ionbase-ui';\n<StatTile isLoading=\"false\" label={…} value={…} />\n\nPROPERTIES\n  Label → label\n  Value → value\n  Comparison → comparison\n  State → isLoading: Default=false, Loading=true\n  Change → goodWhen (Better Up, Better Down, Worse Up, Worse Down, Neutral Up, Neutral Down only)\n\nNOTES\n  Change: Figma draws what the badge SAYS; code derives it from two props. The direction is the sign of `change` (Up is positive), and Better or Worse follows from that and goodWhen — so Worse Up is a rise where down was good. No Change is a `change` that rounds to zero; None is `change` omitted. The badge text itself is computed from `change` and `changeUnit`.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stat-tile/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1593:290": {
      "figmaComponent": "Status Indicator",
      "component": "StatusIndicator",
      "block": "───── CODE · ionbase-ui ─────\nimport { StatusIndicator } from 'ionbase-ui';\n<StatusIndicator intent=\"neutral\" size=\"sm\">…</StatusIndicator>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Success=success, Warning=warning, Error=error, Information=information, Progress=progress\n  Size → size: Small=sm, Medium=md\n\nThe word is the component's children — the status in words, required — and the Label text layer here, edited directly. Beside a control, saying how its save went — Saving…, Saved, Not saved — it is InlineLoading in code; see codeUnmapped.InlineLoading.\n\nNOTES\n  Intent: Each intent is its own shape, so the status is not carried by colour alone. Progress spins in code, and stands still under reduced motion.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/status-indicator/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1391:431": {
      "figmaComponent": "Stepper",
      "component": "Stepper",
      "block": "───── CODE · ionbase-ui ─────\nimport { Stepper } from 'ionbase-ui';\n<Stepper orientation=\"horizontal\" />\n\nPROPERTIES\n  Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stepper/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1391:356": {
      "figmaComponent": "Stepper Step",
      "component": "StepperStep",
      "block": "───── CODE · ionbase-ui ─────\nimport { StepperStep } from 'ionbase-ui';\n<StepperStep status=\"incomplete\" isCurrent=\"false\">Label</StepperStep>\n\nPROPERTIES\n  Status → status: Incomplete=incomplete, Complete=complete, Error=error\n  Current → isCurrent: True=true, False=false\n  Label → children\n  Description → description\n  Show Description → description\n\nNOTES\n  Show Description: false means description is omitted\n  Number: the step’s position in the list; code numbers steps itself\n  Orientation: set on the parent Stepper, not per step — drawn per step only because the connector’s geometry differs\n  Show Connector: code draws a connector after every step but the last; Figma needs it switched off by hand on the last instance\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stepper-step/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1164:248": {
      "figmaComponent": "Streaming Text",
      "component": "StreamingText",
      "block": "───── CODE · ionbase-ui ─────\nimport { StreamingText } from 'ionbase-ui';\n<StreamingText isStreaming=\"true\">Label</StreamingText>\n\nPROPERTIES\n  Streaming → isStreaming: True=true, False=false\n  Text → children\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/streaming-text/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1523:753": {
      "figmaComponent": "Table Batch Bar",
      "component": "TableBatchBar",
      "block": "───── CODE · ionbase-ui ─────\nimport { TableBatchBar } from 'ionbase-ui';\n<TableBatchBar count={…} onClear={…} />\n\nPROPERTIES\n  Count → count\n  Show Select All → onSelectAll\n\nNOTES\n  Count: A number, not a string: the bar writes \"5 selected\" itself, formatted for the locale, and says \"All 128 selected\" once every matching row is. Change the words through `labels`.\n  Show Select All: Not a switch in code: the offer appears on its own whenever fewer than `total` rows are selected and `onSelectAll` is passed. Leave `onSelectAll` out to keep selection page-by-page.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-batch-bar/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "174:103": {
      "figmaComponent": "Table Cell",
      "component": "TableCell",
      "block": "───── CODE · ionbase-ui ─────\nimport { TableCell } from 'ionbase-ui';\n<TableCell align=\"leading\" />\n\nPROPERTIES\n  Type → header (Header only)\n  Align → align: Leading=leading, Trailing=trailing\n  Show Divider → showDivider\n  Content → children\n  Show Content → children\n\nNOTES\n  Type: Body is the default <td>\n  Density: density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-cell/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1652:796": {
      "figmaComponent": "Table Expansion Row",
      "component": "TableRow",
      "block": "───── CODE · ionbase-ui ─────\nimport { TableRow } from 'ionbase-ui';\n<TableRow aria-label=\"…\" />\n\nNot a component of its own: the second row a TableRow renders when its `expansion` is open. Content is `expansion.content`, in one cell across every column, starting past the toggle. It takes its row's stripe and selection.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-row/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "175:605": {
      "figmaComponent": "Table Row",
      "component": "TableRow",
      "block": "───── CODE · ionbase-ui ─────\nimport { TableRow } from 'ionbase-ui';\n<TableRow aria-label=\"…\" />\n\nPROPERTIES\n  State → isSelected (Selected, Selected-Hover only)\n  Show Expander → expansion\n  Show Selection → selection\n\nNOTES\n  State: Hover is CSS\n  Show Expander: takes `{ 'aria-label', content, isExpanded?, defaultExpanded?, onExpandedChange? }`, not a boolean — name it for the row, \"Details for run 4821\". In a head row it is `{ label }`, the header cell over the toggles. Open, the row loses its bottom rule and Table Expansion Row sits under it.\n  Show Selection: takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring\n  Density: set once on Table; see Table Cell\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-row/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1444:761": {
      "figmaComponent": "Table Sort Indicator",
      "component": "TableCell",
      "block": "───── CODE · ionbase-ui ─────\nimport { TableCell } from 'ionbase-ui';\n<TableCell sortDirection=\"none\" />\n\nPROPERTIES\n  Direction → sortDirection: None=none, Ascending=ascending, Descending=descending\n\nNOTES\n  Direction: drawn in a header Cell Text’s Trailing Icon slot; in code the header cell draws it and the label is a button. Set sortDirection on every sortable header and wire onSort, or use useTableSort’s sortProps(column)\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-cell/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "157:126": {
      "figmaComponent": "Tabs",
      "component": "Tabs",
      "block": "───── CODE · ionbase-ui ─────\nimport { Tabs } from 'ionbase-ui';\n<Tabs type=\"pill\" orientation=\"horizontal\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → type: Pill=pill, Underline=underline\n  Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tabs/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "156:259": {
      "figmaComponent": "Tabs Item",
      "component": "TabItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { TabItem } from 'ionbase-ui';\n<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>\n\nTabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.\n\nNOTES\n  Label: TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract.\n  Type: set on the parent Tabs, not per item\n  Size: set on the parent Tabs, not per item\n  State: selection is the Tabs collection's state; Disabled is disabledKeys on Tabs\n  Show Label: a tab without a label is a tab that cannot be named\n  Show Leading Icon: not yet in the code component\n  Leading Icon: not yet in the code component\n  Show Trailing: not yet in the code component\n  Trailing: not yet in the code component\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tab-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1448:290": {
      "figmaComponent": "Tag",
      "component": "Tag",
      "block": "───── CODE · ionbase-ui ─────\nimport { Tag } from 'ionbase-ui';\n<Tag key=\"team:finance\">Team: Finance</Tag>\n\nTag is a collection item and takes no props of its own. Size and removability are set once on the parent TagGroup, so every tag in a group matches.\n\nNOTES\n  Label: Tag’s label is its children, a collection prop the TypeScript checker cannot see — see Tag’s contract.\n  Show Remove: removability is TagGroup’s onRemove: pass it and every tag in the group shows the button, leave it out and none do\n  Size: set once on the parent TagGroup, not per tag\n  State: Hover is CSS and Focus is :focus-visible; Disabled is disabledKeys on TagGroup\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tag/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1448:333": {
      "figmaComponent": "Tag Group",
      "component": "TagGroup",
      "block": "───── CODE · ionbase-ui ─────\nimport { TagGroup } from 'ionbase-ui';\n<TagGroup size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md\n  Label → label\n  Show Label → label\n\nNOTES\n  Show Label: false means no visible label — pass aria-label instead, the group still needs a name\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tag-group/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1301:334": {
      "figmaComponent": "Textarea",
      "component": "Textarea",
      "block": "───── CODE · ionbase-ui ─────\nimport { Textarea } from 'ionbase-ui';\n<Textarea size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → value\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled, Read-only is isReadOnly — both react-aria props, mirroring Input.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/textarea/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1453:805": {
      "figmaComponent": "Time Field",
      "component": "TimeField",
      "block": "───── CODE · ionbase-ui ─────\nimport { TimeField } from 'ionbase-ui';\n<TimeField size=\"sm\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Date Picker, whose box this is. The value text shows the reader’s own format; the prop is 24-hour HH:MM\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/time-field/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1647:291": {
      "figmaComponent": "Timeline",
      "component": "Timeline",
      "block": "───── CODE · ionbase-ui ─────\nimport { Timeline } from 'ionbase-ui';\n<Timeline aria-label=\"…\" />\n\nAn ordered list of Timeline Items, newest first. Name it with `aria-label` in code — the history of what.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/timeline/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1647:290": {
      "figmaComponent": "Timeline Item",
      "component": "TimelineItem",
      "block": "───── CODE · ionbase-ui ─────\nimport { TimelineItem } from 'ionbase-ui';\n<TimelineItem title={…} timestamp={…} />\n\nTitle is `title` — what happened, as a sentence; Actor is `actor`; Time is `timestamp`, shown as its label or `timestampLabel`; Detail is `children`. The text layers are edited directly, and the Separator is drawn only with an actor.\n\nNOTES\n  Marker: Not a prop: Icon is an item given `icon`, Dot is one without. The icon is decoration, hidden from assistive tech; what happened is in the title.\n  Line: Not a prop: the line joins each event to the next and stops at the last one on its own. No is the last item in a Timeline.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/timeline-item/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "820:1655": {
      "figmaComponent": "Toast",
      "component": "Toast",
      "block": "───── CODE · ionbase-ui ─────\nimport { Toast } from 'ionbase-ui';\n<Toast intent=\"information\" onDismiss={…} id={…} />\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Title → title\n  Show Title → title\n  Message → message\n  Show Message → message\n  Show Action → action\n  Show Dismiss → dismissLabel\n\nNOTES\n  Show Action: one action only — a second belongs in a Modal\n  Show Dismiss: the dismiss control is always rendered; only its label is configurable\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toast/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "88:323": {
      "figmaComponent": "Toggle",
      "component": "Toggle",
      "block": "───── CODE · ionbase-ui ─────\nimport { Toggle } from 'ionbase-ui';\n<Toggle size=\"sm\" intent=\"brand\">Label</Toggle>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  Label → children\n  Show Label → children\n\nNOTES\n  State: On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop\n  Show Label: false means aria-label is required\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toggle/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1528:263": {
      "figmaComponent": "Toggletip",
      "component": "Toggletip",
      "block": "───── CODE · ionbase-ui ─────\nimport { Toggletip } from 'ionbase-ui';\n<Toggletip size=\"md\" aria-label={…}>Label</Toggletip>\n\nPROPERTIES\n  Size → size: Medium=md, Small=sm\n  State → isOpen (Open only)\n  Text → children\n\nNOTES\n  State: Open is runtime, not a prop to set: a press opens it and Escape, a press outside or focus leaving closes it. Pass isOpen only to control it from outside.\n  Text: The explanation, plus at most one Link or Button after it — Figma's link line is a Link child in code. Name the button with aria-label for the subject: \"About log retention\".\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toggletip/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1392:391": {
      "figmaComponent": "Tool Call",
      "component": "ToolCall",
      "block": "───── CODE · ionbase-ui ─────\nimport { ToolCall } from 'ionbase-ui';\n<ToolCall status=\"pending\" isExpanded=\"false\" title={…} />\n\nPROPERTIES\n  Status → status: Pending=pending, Active=active, Done=done, Failed=failed, Skipped=skipped\n  Expanded → isExpanded: True=true, False=false\n  Title → title\n  Name → name\n  Show Name → name\n  Duration → durationMs\n  Show Duration → durationMs\n  Error Message → errorMessage\n\nNOTES\n  Expanded: or defaultExpanded, uncontrolled\n  Show Name: false means name is omitted\n  Duration: milliseconds in code; Figma shows the formatted text (“1.2s”, “340ms”)\n  Show Duration: false means durationMs is omitted\n  Has Details: not a prop: code shows the chevron and makes the header a button when input or output is passed\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tool-call/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1517:583": {
      "figmaComponent": "Toolbar",
      "component": "Toolbar",
      "block": "───── CODE · ionbase-ui ─────\nimport { Toolbar } from 'ionbase-ui';\n<Toolbar orientation=\"horizontal\" aria-label=\"…\" />\n\nPROPERTIES\n  Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nNOTES\n  Orientation: Horizontal moves with ← →, vertical with ↑ ↓. The children are the caller's: Buttons, a Divider between groups (vertical in a horizontal toolbar), and a MenuTrigger with an icon-only Button for the overflow. Name it with aria-label for what it acts on.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toolbar/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "801:68": {
      "figmaComponent": "Tooltip",
      "component": "Tooltip",
      "block": "───── CODE · ionbase-ui ─────\nimport { Tooltip } from 'ionbase-ui';\n<Tooltip placement=\"top\" label={…}>…</Tooltip>\n\nPROPERTIES\n  Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n  Label → label\n  Title → title\n  Show Title → title\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tooltip/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1542:4542": {
      "figmaComponent": "Tree View",
      "component": "TreeView",
      "block": "───── CODE · ionbase-ui ─────\nimport { TreeView } from 'ionbase-ui';\n<TreeView selectionMode=\"none\" items={…} aria-label=\"…\" />\n\nPROPERTIES\n  Selection → selectionMode: None=none, Single=single, Multiple=multiple\n\nNOTES\n  Selection: Multiple is where rows draw their check; the Figma rows show it with Show Check on. The rows themselves are `items` — see Tree View Item.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tree-view/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1688:1129": {
      "figmaComponent": "Tree Grid",
      "component": "TreeGrid",
      "block": "───── CODE · ionbase-ui ─────\nimport { TreeGrid } from 'ionbase-ui';\n<TreeGrid selectionMode=\"none\" columns={…} items={…} aria-label=\"…\" />\n\nPROPERTIES\n  Selection → selectionMode: None=none, Multiple=multiple\n\nNOTES\n  Selection: Multiple gives each row a Checkbox and the header a select-all, indeterminate while some rows are picked. `single` is not drawn: it is Multiple's tint without the boxes. The rows are `items` and the columns `columns` — see Tree Grid Row. The focused row and the picked row drawn are one moment of use, not props\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tree-grid/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1637:287": {
      "figmaComponent": "Truncated Text",
      "component": "TruncatedText",
      "block": "───── CODE · ionbase-ui ─────\nimport { TruncatedText } from 'ionbase-ui';\n<TruncatedText overflow=\"tooltip\">…</TruncatedText>\n\nPROPERTIES\n  Overflow → overflow: Tooltip=tooltip, Expand=expand\n\nText is `children`, the whole text as a string; the layer is edited directly. Figma cuts it with the text layer's own truncation and max lines — `lines` in code. The tooltip is Tooltip's own component and is not drawn here: in code it appears only when the text is cut, on hover and on focus. The text takes the font of what it sits in.\n\nNOTES\n  State: Not a prop: Expanded is what Show more does, and Show less undoes. Collapsed is the text cut to `lines`.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/truncated-text/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1680:527": {
      "figmaComponent": "Dual Listbox",
      "component": "DualListbox",
      "block": "───── CODE · ionbase-ui ─────\nimport { DualListbox } from 'ionbase-ui';\n<DualListbox options={…} label=\"…\" />\n\nPROPERTIES\n  Label → label\n  Description → description\n  Show Description → description\n  Reorderable → isReorderable\n  State → isInvalid (Invalid only)\n\nNOTES\n  Description: on State=Invalid this is the `errorMessage`, which replaces the description while `isInvalid` is set\n  Show Description: false means description is omitted\n  Reorderable: shows Move up and Move down beside the chosen list\n  State: Disabled is isDisabled, which disables every option and button. The chosen list's red edge is the invalid state; the picked options and enabled buttons drawn are one moment of use, not props\n  Layout: not a prop: the lists stack below 30rem of the field's own width through a container query, the same call Setting Row makes for its Layout axis\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/dual-listbox/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1714:1267": {
      "figmaComponent": "Calendar",
      "component": "Calendar",
      "block": "───── CODE · ionbase-ui ─────\nimport { Calendar } from 'ionbase-ui';\n<Calendar label={…} />\n\nPROPERTIES\n  Label → label\n  Description → description\n  Show Description → description\n  State → isInvalid (Invalid only)\n\nNOTES\n  Description: replaced by `errorMessage` while invalid, as Invalid draws it\n  State: Disabled is isDisabled; the chosen day stays marked on the disabled surface. Hover and focus are the days' own, drawn by Calendar Day\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/calendar/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    },
    "1719:286": {
      "figmaComponent": "Split Pane",
      "component": "SplitPane",
      "block": "───── CODE · ionbase-ui ─────\nimport { SplitPane } from 'ionbase-ui';\n<SplitPane orientation=\"horizontal\" start={…} end={…} label={…} />\n\nPROPERTIES\n  Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nNOTES\n  Orientation: Horizontal is side by side, with a vertical divider; it stacks at `collapse`, mobile by default\n  State: The divider's own states: Hover is :hover, Focus is :focus-visible and a drag, both CSS. The share the Start pane takes is `defaultSize` or `size`, in percent — a value, not a variant\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/split-pane/index.html.md\nGenerated from ionbase-ui@0.138.1. Edit the code, not this block.\n───── end code ─────"
    }
  }
}