@1money/component-ui 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1money/component-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React Components based on primereact for 1money front-end projects",
   "main": "lib/index.js",
   "module": "es/index.js",

package/scripts/mcp-server/examples.generated.json

@@ -697,6 +697,12 @@
       "source": "readme",
       "compilable": true
     },
+    "375cf5683b84180c4bc80e22b6ba7368fb822758cda56ad9b6355832c752abc3": {
+      "title": "Header copy (`title` + `description`)",
+      "code": "<FormLayout variant='page' title='Add new bank account' description='We use this to settle payouts.' …>",
+      "source": "readme",
+      "compilable": true
+    },
     "376f33e3d6f965eddd80993afe2207b0350adc6c32f0649c8b9255a0de0f3ba4": {
       "title": "Sizes",
       "code": "<div style={{ display: 'flex', gap: 32, alignItems: 'flex-start' }}>\n      {FORM_SIZES.map((size) => (\n        <div key={size} style={{ flex: 1 }}>\n          <h4 style={{ marginBottom: 16, textTransform: 'capitalize' }}>{size}</h4>\n          <ProForm {...args} size={size}>\n            <ProFormText\n              name=\"username\"\n              label=\"Username\"\n              placeholder=\"Enter username\"\n            />\n            <ProFormText name=\"email\" label=\"Email\" placeholder=\"Enter email\" />\n            <ProFormSelect\n              name=\"role\"\n              label=\"Role\"\n              placeholder=\"Select role\"\n              options={[\n                { label: 'Admin', value: 'admin' },\n                { label: 'Member', value: 'member' },\n              ]}\n            />\n          </ProForm>\n        </div>\n      ))}\n    </div>",
@@ -1009,6 +1015,12 @@
       "source": "stories",
       "compilable": false
     },
+    "56f0124e0b5416214c4a093f6c339bc1d83d522e3291ddbafe6969b11066ff40": {
+      "title": "Modal Scrolling",
+      "code": "<FormLayout\n      variant='modal'\n      maxHeight={420}\n      title='Add new bank account'\n      description='Payouts settle to this account within 1–2 business days.'\n      footer={<ActionBar layout='compact' secondary={{ label: 'Cancel' }} primary={{ label: 'Add' }} />}\n    >\n      <BankAccountFields />\n      <BankAccountFields />\n    </FormLayout>",
+      "source": "stories",
+      "compilable": true
+    },
     "57e5a7e81ccfa1d876cf40e95b6165f9d630fe343bc29dbb15c3fe546e689e62": {
       "title": "Default",
       "code": "<div style={wrapperStyle}>\n      <Step {...args} />\n    </div>",
@@ -1219,12 +1231,6 @@
       "source": "stories",
       "compilable": false
     },
-    "664eb21364ecb7a22033800098dba9c5ed74a60ee1ecfeaa10694056d53e61ba": {
-      "title": "Page Small",
-      "code": "<FormLayout\n      variant='page'\n      size='small'\n      title='Sign in to 1Money'\n      footer={<ActionBar primary={{ label: 'Continue' }} />}\n    >\n      <Input label='Email' placeholder='name@company.com' type='email' />\n      <Input.Password label='Password' placeholder='Password' />\n    </FormLayout>",
-      "source": "stories",
-      "compilable": true
-    },
     "66d442fc9388c014800dbcc672d9dae750c1529fd05f0b26e8f4dbf091abd20b": {
       "title": "Visual Spec",
       "code": "<div style={PREVIEW_GRID_STYLE}>\n      <TooltipPreviewCard label=\"Title + body / left aligned\" title=\"Title\" body=\"Body text\" />\n      <TooltipPreviewCard label=\"Minimum width 48px\" body=\"Hi\" />\n      <TooltipPreviewCard label=\"Maximum width 400px on web\" title=\"Long title\" body={LONG_BODY} />\n    </div>",
@@ -1897,12 +1903,6 @@
       "source": "readme",
       "compilable": true
     },
-    "a1a0aed42f051433d5dc32d95c08519e920a1163cfa9588524779cca2abd2f79": {
-      "title": "Modal Scrolling",
-      "code": "<FormLayout\n      variant='modal'\n      maxHeight={420}\n      title='Add new bank account'\n      footer={<ActionBar layout='compact' secondary={{ label: 'Cancel' }} primary={{ label: 'Add' }} />}\n    >\n      <BankAccountFields />\n      <BankAccountFields />\n    </FormLayout>",
-      "source": "stories",
-      "compilable": true
-    },
     "a273142732c4077af48c520b0e9fbec1fcae48b0f012545bcb951e9554b1e0ef": {
       "title": "Canonical usage",
       "code": "import { Flex } from '@1money/component-ui';\n// or\nimport { Flex } from '@1money/component-ui/Flex';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY, FLEX_WRAP } from '@1money/component-ui/Flex';",
@@ -2149,6 +2149,12 @@
       "source": "canonical",
       "compilable": true
     },
+    "b2572dde0fbd88544baee48eed81ffe6a29bd15e8b2caf708f14022460518138": {
+      "title": "Header Copy",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>\n      <FormLayout\n        variant='modal'\n        title='Add new bank account'\n        description='Payouts settle to this account within 1–2 business days.'\n        footer={<ActionBar layout='compact' secondary={{ label: 'Cancel' }} primary={{ label: 'Add' }} />}\n      >\n        <Input label='Nickname' placeholder='e.g. Main payout account' maxLength={35} />\n      </FormLayout>\n      <FormLayout\n        variant='page'\n        title='Complete profile'\n        description='We use these details to verify your business before the first payout.'\n        footer={<ActionBar primary={{ label: 'Continue' }} />}\n      >\n        <Input label='Company name' placeholder='Apple Inc' maxLength={70} />\n      </FormLayout>\n      {/* Same string-vs-node rule as `title`: pass a node to deviate from the\n          spec style — here `strong` on top of the regular-weight default — and\n          you own the typography. The node is NOT wrapped, so this <p> is not\n          nested inside the spec one. */}\n      <FormLayout\n        variant='page'\n        title='Complete profile'\n        description={\n          <Typography.Body as='p' size='md' strong color='default-secondary'>\n            Emphasized copy: pass a node instead of a string to add `strong`.\n          </Typography.Body>\n        }\n        footer={<ActionBar primary={{ label: 'Continue' }} />}\n      >\n        <Input label='Company name' placeholder='Apple Inc' maxLength={70} />\n      </FormLayout>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "b2c3325448f12418ef1b7e0fdabadbd1b6d8eb991cfd3c0b126919566721c209": {
       "title": "Primary Icons",
       "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))' }}>\n      {/* Primary Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='deposit' />\")}>\n        <Icons {...args} name='deposit' />\n        <span>Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdrawal' />\")}>\n        <Icons {...args} name='withdrawal' />\n        <span>Withdrawal</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='conversion' />\")}>\n        <Icons {...args} name='conversion' />\n        <span>Conversion</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mintToken' />\")}>\n        <Icons {...args} name='mintToken' />\n        <span>MintToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='burnToken' />\")}>\n        <Icons {...args} name='burnToken' />\n        <span>BurnToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='accountLocked' />\")}>\n        <Icons {...args} name='accountLocked' />\n        <span>Account Locked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pending' />\")}>\n        <Icons {...args} name='pending' />\n        <span>Pending</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='success' />\")}>\n        <Icons {...args} name='success' />\n        <span>Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fail' />\")}>\n        <Icons {...args} name='fail' />\n        <span>Fail</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='error' />\")}>\n        <Icons {...args} name='error' />\n        <span>Error</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusSuccess' color='#1F580033' />\")}>\n        <Icons {...args} name='statusSuccess' color='#1F580033' />\n        <span>Status Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusFail' color='#AE00001A' />\")}>\n        <Icons {...args} name='statusFail' color='#AE00001A' />\n        <span>Status Fail</span>\n      </CopyIconBox>\n      {/* Menu Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dashboard' />\")}>\n        <Icons {...args} name='dashboard' />\n        <span>Dashboard</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='digitalAsset' />\")}>\n        <Icons {...args} name='digitalAsset' />\n        <span>Digital Asset</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='addressBook' />\")}>\n        <Icons {...args} name='addressBook' />\n        <span>Address Book</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedBankAccounts' />\")}>\n        <Icons {...args} name='linkedBankAccounts' />\n        <span>Linked Bank Accounts</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wire' />\")}>\n        <Icons {...args} name='wire' />\n        <span>Wire</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swift' />\")}>\n        <Icons {...args} name='swift' />\n        <span>Swift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='account' />\")}>\n        <Icons {...args} name='account' />\n        <span>Account</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='profile' />\")}>\n        <Icons {...args} name='profile' />\n        <span>Profile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='security' />\")}>\n        <Icons {...args} name='security' />\n        <span>Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logout' />\")}>\n        <Icons {...args} name='logout' />\n        <span>Logout</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='portfolio' />\")}>\n        <Icons {...args} name='portfolio' />\n        <span>Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='home' />\")}>\n        <Icons {...args} name='home' />\n        <span>Home</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='convert' />\")}>\n        <Icons {...args} name='convert' />\n        <span>Convert</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdraw' />\")}>\n        <Icons {...args} name='withdraw' />\n        <span>Withdraw</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='send' />\")}>\n        <Icons {...args} name='send' />\n        <span>Send</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='menuDeposit' />\")}>\n        <Icons {...args} name='menuDeposit' />\n        <span>Menu Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='company' />\")}>\n        <Icons {...args} name='company' />\n        <span>Company</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='parties' />\")}>\n        <Icons {...args} name='parties' />\n        <span>Parties</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transactions' />\")}>\n        <Icons {...args} name='transactions' />\n        <span>Transactions</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fiat' />\")}>\n        <Icons {...args} name='fiat' />\n        <span>Fiat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='money' />\")}>\n        <Icons {...args} name='money' />\n        <span>Money</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sendCrypto' />\")}>\n        <Icons {...args} name='sendCrypto' />\n        <span>Send Crypto</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='businessAccount' />\")}>\n        <Icons {...args} name='businessAccount' />\n        <span>Business Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='individualAccount' />\")}>\n        <Icons {...args} name='individualAccount' />\n        <span>Identity</span>\n      </CopyIconBox>\n\n      {/* Functional Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowUp' />\")}>\n        <Icons {...args} name='arrowUp' />\n        <span>Arrow Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowDown' />\")}>\n        <Icons {...args} name='arrowDown' />\n        <span>Arrow Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowLeft' />\")}>\n        <Icons {...args} name='arrowLeft' />\n        <span>Arrow Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowRight' />\")}>\n        <Icons {...args} name='arrowRight' />\n        <span>Arrow Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='add' />\")}>\n        <Icons {...args} name='add' />\n        <span>Add</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='minus' />\")}>\n        <Icons {...args} name='minus' />\n        <span>Minus</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cross' />\")}>\n        <Icons {...args} name='cross' />\n        <span>Cross</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='more' />\")}>\n        <Icons {...args} name='more' />\n        <span>More</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronDown' />\")}>\n        <Icons {...args} name='chevronDown' />\n        <span>Chevron Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronUp' />\")}>\n        <Icons {...args} name='chevronUp' />\n        <span>Chevron Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronLeft' />\")}>\n        <Icons {...args} name='chevronLeft' />\n        <span>Chevron Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronRight' />\")}>\n        <Icons {...args} name='chevronRight' />\n        <span>Chevron Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' />\")}>\n        <Icons {...args} name='sort' />\n        <span>Sort Default</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='ascend' />\")}>\n        <Icons {...args} name='sort' status='ascend' />\n        <span>Sort Ascend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='descend' />\")}>\n        <Icons {...args} name='sort' status='descend' />\n        <span>Sort Descend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='collapse' />\")}>\n        <Icons {...args} name='collapse' />\n        <span>Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='extend' />\")}>\n        <Icons {...args} name='extend' />\n        <span>Extend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='spinner' />\")}>\n        <Icons {...args} name='spinner' />\n        <span>Spinner</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='check' />\")}>\n        <Icons {...args} name='check' />\n        <span>Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='remove' />\")}>\n        <Icons {...args} name='remove' />\n        <span>Remove</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pix' />\")}>\n        <Icons {...args} name='pix' />\n        <span>PIX</span>\n      </CopyIconBox>\n      {/* System Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='info' />\")}>\n        <Icons {...args} name='info' />\n        <span>Info</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notifications' />\")}>\n        <Icons {...args} name='notifications' />\n        <span>Notifications</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='favorite' />\")}>\n        <Icons {...args} name='favorite' />\n        <span>Favorite</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transferHistory' />\")}>\n        <Icons {...args} name='transferHistory' />\n        <span>Transfer History</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='support' />\")}>\n        <Icons {...args} name='support' />\n        <span>Support</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='help' />\")}>\n        <Icons {...args} name='help' />\n        <span>Help</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='language' />\")}>\n        <Icons {...args} name='language' />\n        <span>Language</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='share' />\")}>\n        <Icons {...args} name='share' />\n        <span>Share</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='products' />\")}>\n        <Icons {...args} name='products' />\n        <span>Products</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hub' />\")}>\n        <Icons {...args} name='hub' />\n        <span>Hub</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemSecurity' />\")}>\n        <Icons {...args} name='systemSecurity' />\n        <span>System Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fees' />\")}>\n        <Icons {...args} name='fees' />\n        <span>Fees</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='settings' />\")}>\n        <Icons {...args} name='settings' />\n        <span>Settings</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='id' />\")}>\n        <Icons {...args} name='id' />\n        <span>ID</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='viewBalance' />\")}>\n        <Icons {...args} name='viewBalance' />\n        <span>View Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hideBalance' />\")}>\n        <Icons {...args} name='hideBalance' />\n        <span>Hide Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='privacy' />\")}>\n        <Icons {...args} name='privacy' />\n        <span>Privacy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='card' />\")}>\n        <Icons {...args} name='card' />\n        <span>Card</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coin' />\")}>\n        <Icons {...args} name='coin' />\n        <span>Coin</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wallet' />\")}>\n        <Icons {...args} name='wallet' />\n        <span>Wallet</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='email' />\")}>\n        <Icons {...args} name='email' />\n        <span>Email</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='rewards' />\")}>\n        <Icons {...args} name='rewards' />\n        <span>Rewards</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='time' />\")}>\n        <Icons {...args} name='time' />\n        <span>Time</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='location' />\")}>\n        <Icons {...args} name='location' />\n        <span>Location</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='calendar' />\")}>\n        <Icons {...args} name='calendar' />\n        <span>Calendar</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='securityCheck' />\")}>\n        <Icons {...args} name='securityCheck' />\n        <span>Security Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='devices' />\")}>\n        <Icons {...args} name='devices' />\n        <span>Devices</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='images' />\")}>\n        <Icons {...args} name='images' />\n        <span>Images</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='bank' />\")}>\n        <Icons {...args} name='bank' />\n        <span>Bank</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coins' />\")}>\n        <Icons {...args} name='coins' />\n        <span>Coins</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='earn' />\")}>\n        <Icons {...args} name='earn' />\n        <span>Earn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='scan' />\")}>\n        <Icons {...args} name='scan' />\n        <span>Scan</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='search' />\")}>\n        <Icons {...args} name='search' />\n        <span>Search</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='maintenance' />\")}>\n        <Icons {...args} name='maintenance' />\n        <span>Maintenance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='editFile' />\")}>\n        <Icons {...args} name='editFile' />\n        <span>Edit File</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='document' />\")}>\n        <Icons {...args} name='document' />\n        <span>Document</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='upload' />\")}>\n        <Icons {...args} name='upload' />\n        <span>Upload</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='downloadReport' />\")}>\n        <Icons {...args} name='downloadReport' />\n        <span>Download Report</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gift' />\")}>\n        <Icons {...args} name='gift' />\n        <span>Gift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='filter' />\")}>\n        <Icons {...args} name='filter' />\n        <span>Filter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='expand' />\")}>\n        <Icons {...args} name='expand' />\n        <span>Expand</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemCollapse' />\")}>\n        <Icons {...args} name='systemCollapse' />\n        <span>System Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='refresh' />\")}>\n        <Icons {...args} name='refresh' />\n        <span>Refresh</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transfer' />\")}>\n        <Icons {...args} name='transfer' />\n        <span>Transfer</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='link' />\")}>\n        <Icons {...args} name='link' />\n        <span>Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='save' />\")}>\n        <Icons {...args} name='save' />\n        <span>Save</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='like' />\")}>\n        <Icons {...args} name='like' />\n        <span>Like</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dislike' />\")}>\n        <Icons {...args} name='dislike' />\n        <span>Dislike</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='copy' />\")}>\n        <Icons {...args} name='copy' />\n        <span>Copy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mobile' />\")}>\n        <Icons {...args} name='mobile' />\n        <span>Mobile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chat' />\")}>\n        <Icons {...args} name='chat' />\n        <span>Chat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swap' />\")}>\n        <Icons {...args} name='swap' />\n        <span>Swap</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='clock' />\")}>\n        <Icons {...args} name='clock' />\n        <span>Clock</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='desktop' />\")}>\n        <Icons {...args} name='desktop' />\n        <span>Desktop</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='usd' />\")}>\n        <Icons {...args} name='usd' />\n        <span>USD</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='eur' />\")}>\n        <Icons {...args} name='eur' />\n        <span>EUR</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gbp' />\")}>\n        <Icons {...args} name='gbp' />\n        <span>GBP</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='jpy' />\")}>\n        <Icons {...args} name='jpy' />\n        <span>JPY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cny' />\")}>\n        <Icons {...args} name='cny' />\n        <span>CNY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='google' />\")}>\n        <Icons {...args} name='google' />\n        <span>Google</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apple' />\")}>\n        <Icons {...args} name='apple' />\n        <span>Apple</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='twitter' />\")}>\n        <Icons {...args} name='twitter' />\n        <span>Twitter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedIn' />\")}>\n        <Icons {...args} name='linkedIn' />\n        <span>LinkedIn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='passkey' />\")}>\n        <Icons {...args} name='passkey' />\n        <span>Passkey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='ach' />\")}>\n        <Icons {...args} name='ach' />\n        <span>ACH</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apiKey' />\")}>\n        <Icons {...args} name='apiKey' />\n        <span>APIKey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='brokenLink' />\")}>\n        <Icons {...args} name='brokenLink' />\n        <span>Broken Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pause' />\")}>\n        <Icons {...args} name='pause' />\n        <span>Pause</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='autoConversionRules' />\")}>\n        <Icons {...args} name='autoConversionRules' />\n        <span>Auto Conversion Rules</span>\n      </CopyIconBox>\n    </div>;\n  }",
@@ -2773,6 +2779,12 @@
       "source": "stories",
       "compilable": false
     },
+    "e85f5a8b1a24f11484c243b108438fac9b725d914cb0aa9bb663fd633fec9d03": {
+      "title": "Header copy (`title` + `description`)",
+      "code": "<FormLayout\n  title='Complete profile'\n  description={<Typography.Body as='p' size='md' strong color='default-secondary'>Emphasized copy.</Typography.Body>}\n  …\n/>",
+      "source": "readme",
+      "compilable": true
+    },
     "e95a0d0355599d90e5a8f3e2157c5f59f2ee97f9c77cde6b856ca73e439ba89d": {
       "title": "Usage",
       "code": "<ProForm\n  initialValues={{ name: '' }}\n  onFinish={(values) => console.log(values)}\n>\n  <ProForm.Text\n    name=\"name\"\n    label=\"Name\"\n    rules={[{ required: true, message: 'Name is required' }]}\n  />\n  <ProForm.Select\n    name=\"currency\"\n    label=\"Currency\"\n    fieldProps={{ options: [{ label: 'USD', value: 'USD' }] }}\n  />\n</ProForm>",
@@ -2905,6 +2917,12 @@
       "source": "stories",
       "compilable": true
     },
+    "f3dc535ec2baa93df7928da21d57b0eb48f6797cd94777e580ec9049fdaa97a6": {
+      "title": "Page Small",
+      "code": "<FormLayout\n      variant='page'\n      size='small'\n      title='Sign in to 1Money'\n      description='Use the email you signed up with.'\n      footer={<ActionBar primary={{ label: 'Continue' }} />}\n    >\n      <Input label='Email' placeholder='name@company.com' type='email' />\n      <Input.Password label='Password' placeholder='Password' />\n    </FormLayout>",
+      "source": "stories",
+      "compilable": true
+    },
     "f474abaf6391f2f1dd676b737fafef015afe1934991cb063aef209566001ec42": {
       "title": "Canonical usage",
       "code": "import type { ProTableValueType } from '@1money/component-ui';",

package/scripts/mcp-server/index.generated.json

@@ -4583,7 +4583,7 @@
       "name": "FormLayout",
       "kind": "component",
       "category": "misc",
-      "summary": "Form-only surface layout: panel chrome (white surface, hairline border, radius) + three regions (header with title/extra, fields content, footer) with variant-driven density.",
+      "summary": "Form-only surface layout: panel chrome (white surface, hairline border, radius) + three regions (header with title/description/extra, fields content, footer) with variant-driven density.",
       "importPath": "@1money/component-ui",
       "subpathImport": "@1money/component-ui/FormLayout",
       "sourceFile": "src/components/FormLayout/FormLayout.tsx",
@@ -4620,6 +4620,14 @@
           "description": "Heading; a plain string renders as `Headline/sm` (24 / 28) regardless of variant or size.",
           "inheritedFrom": null
         },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "optional": true,
+          "default": null,
+          "description": "Supporting copy under the title.",
+          "inheritedFrom": null
+        },
         {
           "name": "extra",
           "type": "ReactNode",
@@ -4697,12 +4705,20 @@
           "hash": "878fbef26e770a8edb30d246935990aaaae4a13cf626becca5de61f91781b8c5",
           "source": "readme"
         },
+        {
+          "hash": "375cf5683b84180c4bc80e22b6ba7368fb822758cda56ad9b6355832c752abc3",
+          "source": "readme"
+        },
+        {
+          "hash": "e85f5a8b1a24f11484c243b108438fac9b725d914cb0aa9bb663fd633fec9d03",
+          "source": "readme"
+        },
         {
           "hash": "7b9df7846bbfff4e15c8e946f02854ec4960729387cb7ee109332f859d9c95eb",
           "source": "stories"
         },
         {
-          "hash": "a1a0aed42f051433d5dc32d95c08519e920a1163cfa9588524779cca2abd2f79",
+          "hash": "56f0124e0b5416214c4a093f6c339bc1d83d522e3291ddbafe6969b11066ff40",
           "source": "stories"
         },
         {
@@ -4710,7 +4726,11 @@
           "source": "stories"
         },
         {
-          "hash": "664eb21364ecb7a22033800098dba9c5ed74a60ee1ecfeaa10694056d53e61ba",
+          "hash": "b2572dde0fbd88544baee48eed81ffe6a29bd15e8b2caf708f14022460518138",
+          "source": "stories"
+        },
+        {
+          "hash": "f3dc535ec2baa93df7928da21d57b0eb48f6797cd94777e580ec9049fdaa97a6",
           "source": "stories"
         }
       ]
@@ -4719,7 +4739,7 @@
       "name": "FormLayoutProps",
       "kind": "type",
       "category": "misc",
-      "summary": "Form-only surface layout: panel chrome (white surface, hairline border, radius) + three regions (header with title/extra, fields content, footer) with variant-driven density.",
+      "summary": "Form-only surface layout: panel chrome (white surface, hairline border, radius) + three regions (header with title/description/extra, fields content, footer) with variant-driven density.",
       "importPath": "@1money/component-ui",
       "subpathImport": "@1money/component-ui/FormLayout",
       "sourceFile": "src/components/FormLayout/interface.ts",