@1money/component-ui 0.0.76 → 0.0.78

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

@@ -79,9 +79,9 @@
       "source": "canonical",
       "compilable": true
     },
-    "06b3a8e6513382a6e7d5bd530b625d83a008bbb52aa5f05cb2812e54e8854b3a": {
-      "title": "Api Examples",
-      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Row\n        gutter={GRID_GUTTER_SPACED}\n        align={GRID_ALIGN.middle}\n        justify={GRID_JUSTIFY.spaceBetween}\n        wrap={WRAP_DISABLED}\n        prefixCls={GRID_ROW_PREFIX}\n      >\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}><div style={DEMO_BOX_STYLE}>Span</div></Col>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}><div style={DEMO_BOX_STYLE}>Span</div></Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_COMPACT} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_QUARTER} offset={OFFSET_SMALL} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Offset</div>\n        </Col>\n        <Col span={SPAN_QUARTER} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Offset</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_COMPACT} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_QUARTER} push={PUSH_SMALL} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Push</div>\n        </Col>\n        <Col span={SPAN_QUARTER} pull={PULL_SMALL} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Pull</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_RESPONSIVE} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Responsive Gutter</div>\n        </Col>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Responsive Gutter</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_REM} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>String Gutter</div>\n        </Col>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>String Gutter</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_COMPACT} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_QUARTER} order={ORDER_LAST} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Order</div>\n        </Col>\n        <Col span={SPAN_QUARTER} order={ORDER_FIRST} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Order</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_COMPACT} prefixCls={GRID_ROW_PREFIX}>\n        <Col flex={FLEX_ONE} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Flex 1</div>\n        </Col>\n        <Col flex={FLEX_TWO} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Flex 2</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED} wrap={WRAP_ENABLED} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_BASE} sm={SPAN_SM} md={{ span: SPAN_MD, offset: OFFSET_SMALL }} lg={SPAN_LG} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Responsive</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED} justify={JUSTIFY_RESPONSIVE} prefixCls={GRID_ROW_PREFIX}>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Justify Responsive</div>\n        </Col>\n        <Col span={SPAN_HALF} prefixCls={GRID_COL_PREFIX}>\n          <div style={DEMO_BOX_STYLE}>Justify Responsive</div>\n        </Col>\n      </Row>\n\n    </div>",
+    "05c3c5fa95ff7d6243ba7d1b45aa7eeb2fbd1b7a8ac53adf85ac29f3c2d215ec": {
+      "title": "Push Pull",
+      "code": "<Row gutter={GRID_GUTTER_COMPACT}>\n      <Col span={SPAN_HALF} push={PUSH_HALF}>\n        <div style={DEMO_BOX_STYLE}>first in DOM, pushed right</div>\n      </Col>\n      <Col span={SPAN_HALF} pull={PULL_HALF}>\n        <div style={DEMO_BOX_STYLE}>second in DOM, pulled left</div>\n      </Col>\n    </Row>",
       "source": "stories",
       "compilable": true
     },
@@ -97,12 +97,6 @@
       "source": "stories",
       "compilable": true
     },
-    "0738342c14cdb11218bb04fca3fb2f8adc34b4d7bbe92ca4a57b934569d07089": {
-      "title": "Marketing Page Layout",
-      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED} justify={GRID_JUSTIFY.center}>\n        <Col span={12} md={10} lg={8}>\n          <div style={DEMO_CHART_BLOCK_STYLE}>Hero Section</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12} sm={6} lg={4}>\n          <div style={DEMO_WIDGET_BLOCK_STYLE}>Feature Card A</div>\n        </Col>\n        <Col span={12} sm={6} lg={4}>\n          <div style={DEMO_WIDGET_BLOCK_STYLE}>Feature Card B</div>\n        </Col>\n        <Col span={12} sm={6} lg={4}>\n          <div style={DEMO_WIDGET_BLOCK_STYLE}>Feature Card C</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED} align={GRID_ALIGN.middle}>\n        <Col span={12} md={6}>\n          <div style={DEMO_MAIN_BLOCK_STYLE}>Image / Illustration</div>\n        </Col>\n        <Col span={12} md={6}>\n          <div style={DEMO_MAIN_BLOCK_STYLE}>Value Description</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12}>\n          <div style={DEMO_TABLE_BLOCK_STYLE}>FAQ / Timeline</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12}>\n          <div style={DEMO_FOOTER_BLOCK_STYLE}>Footer Links</div>\n        </Col>\n      </Row>\n    </div>",
-      "source": "stories",
-      "compilable": true
-    },
     "07987ce3193833ae5e02466d3b7ea1e51372a52d41cdafaa11450f4bab575130": {
       "title": "Canonical usage",
       "code": "import { Dropdown } from '@1money/component-ui';\n// or\nimport { Dropdown } from '@1money/component-ui/Dropdown';",
@@ -181,12 +175,6 @@
       "source": "stories",
       "compilable": true
     },
-    "0cda435f1e77eae5e9d6a2c883f7b45f34643b77a9a4f8ca3d23ea33a09b9a01": {
-      "title": "Responsive Usage",
-      "code": "const GRID_GUTTER = { sm: 8, md: 16, lg: 24 };\nconst SPAN_BASE = 12;\nconst SPAN_SM = 6;\nconst SPAN_MD = 4;\nconst OFFSET_MD = 2;\nconst SPAN_LARGE = 3;\n\nimport { GRID_JUSTIFY } from '@1money/component-ui/Grid';\n\nconst GRID_JUSTIFY_RESPONSIVE = {\n  sm: GRID_JUSTIFY.start,\n  md: GRID_JUSTIFY.spaceBetween,\n  lg: GRID_JUSTIFY.end\n};\nconst PUSH_COL = 1;\nconst PULL_COL = 1;\n\n<Grid gutter={GRID_GUTTER}>\n  <Grid.Col span={SPAN_BASE} sm={SPAN_SM} md={{ span: SPAN_MD, offset: OFFSET_MD }} lg={SPAN_LARGE} />\n</Grid>\n\n<Grid gutter={GRID_GUTTER} justify={GRID_JUSTIFY_RESPONSIVE}>\n  <Grid.Col span={SPAN_BASE} sm={SPAN_SM} md={{ span: SPAN_MD, offset: OFFSET_MD }} lg={SPAN_LARGE} />\n  <Grid.Col span={SPAN_BASE} push={PUSH_COL} pull={PULL_COL} />\n</Grid>",
-      "source": "readme",
-      "compilable": true
-    },
     "0df7d43ad53f6a66386ebad5a61eaaf088d0b9200a5fb97e51f6c4964aefd05e": {
       "title": "Usage",
       "code": "<Switch label=\"Notifications\" onChange={(checked) => console.log(checked)} />\n\n<Switch\n  label=\"Dark Mode\"\n  description=\"Enable dark theme across the app\"\n  defaultChecked\n/>",
@@ -247,6 +235,12 @@
       "source": "stories",
       "compilable": false
     },
+    "147587a799da67b4343553b5435fe31ac9f430de58f9e765d4f6ab30880c9cda": {
+      "title": "Flex",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col flex={FLEX_TWO}>\n          <div style={DEMO_BOX_STYLE}>flex 2 (ratio)</div>\n        </Col>\n        <Col flex={FLEX_THREE}>\n          <div style={DEMO_BOX_STYLE}>flex 3 (ratio)</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col flex={FLEX_FIXED}>\n          <div style={DEMO_BOX_STYLE}>flex 200px (fixed)</div>\n        </Col>\n        <Col flex={FLEX_AUTO}>\n          <div style={DEMO_BOX_STYLE}>flex auto (fills the rest)</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "1622196bc98fc696224e0af42f3858aefbb46ae0237ebd7ed753d40c2e0f87d6": {
       "title": "Single Select Filter",
       "code": "<Table<PortfolioRow>\n      rowKey=\"id\"\n      pagination={false}\n      dataSource={portfolioRows}\n      columns={[\n        portfolioColumns[0],\n        {\n          ...portfolioColumns[1],\n          filters: NETWORK_FILTER_ITEMS,\n          filterMultiple: false,\n          onFilter: (value, record) => record.network === value,\n        },\n        portfolioColumns[2],\n        portfolioColumns[3],\n      ]}\n    />",
@@ -259,6 +253,12 @@
       "source": "readme",
       "compilable": true
     },
+    "17543ee50d9e8d0c57b34b1c130fc07f3f79acf781228ef5a831be51e710f6c5": {
+      "title": "Responsive Usage (desktop-first)",
+      "code": "import { GRID_JUSTIFY } from '@1money/component-ui/Grid';\n\n// Gap shrinks as the screen narrows: 24 (≥1280) → 16 (<1024) → 8 (<768).\nconst GRID_GUTTER = { sm: 8, md: 16, lg: 24 };\n\n// Desktop value drives the layout; md/sm override downward.\nconst SPAN_DESKTOP = 4; // 3 columns per row on desktop\nconst SPAN_TABLET = 6; //  2 columns per row below 1024px\nconst SPAN_MOBILE = 12; // 1 column per row below 768px\n\nconst GRID_JUSTIFY_RESPONSIVE = {\n  sm: GRID_JUSTIFY.start, // < 768px\n  md: GRID_JUSTIFY.spaceBetween, // < 1024px\n  lg: GRID_JUSTIFY.end // ≥ 1280px (largest key seeds the base)\n};\n\n<Grid gutter={GRID_GUTTER}>\n  <Grid.Col span={SPAN_DESKTOP} md={SPAN_TABLET} sm={SPAN_MOBILE} />\n  <Grid.Col span={SPAN_DESKTOP} md={SPAN_TABLET} sm={SPAN_MOBILE} />\n  <Grid.Col span={SPAN_DESKTOP} md={SPAN_TABLET} sm={SPAN_MOBILE} />\n</Grid>\n\n<Grid gutter={GRID_GUTTER} justify={GRID_JUSTIFY_RESPONSIVE}>\n  <Grid.Col span={6} sm={12} />\n  <Grid.Col span={6} sm={12} />\n</Grid>",
+      "source": "readme",
+      "compilable": true
+    },
     "17aad2a9b23bb7f9a4768f770a9b9b5b06d74dab24c5200037505b0047ec2391": {
       "title": "Controlled",
       "code": "{\n    const [open, setOpen] = useState(false);\n    return (\n      <div style={ANCHOR_WRAPPER_STYLE}>\n        <button id=\"tooltip-controlled\">Anchor</button>\n        <div style={CONTROL_ROW_STYLE}>\n          <button onClick={() => setOpen(true)}>Open</button>\n          <button onClick={() => setOpen(false)}>Close</button>\n          <button onClick={() => setOpen((v) => !v)}>Toggle</button>\n        </div>\n        <Tooltip\n          anchorSelect=\"#tooltip-controlled\"\n          title=\"Controlled\"\n          body=\"This tooltip is controlled externally.\"\n          open={open}\n          onOpenChange={setOpen}\n        />\n      </div>\n    );\n  }",
@@ -439,12 +439,6 @@
       "source": "stories",
       "compilable": false
     },
-    "259f23e43a9bab9ac08664151900a9dc9f3cc181adccdacc7a28bd34ab37be7e": {
-      "title": "Form Layout Patterns",
-      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12}>\n          <div style={DEMO_HEADER_BLOCK_STYLE}>Form Header</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12} md={3}>\n          <div style={DEMO_FORM_LABEL_STYLE}>Label: Company Name</div>\n        </Col>\n        <Col span={12} md={9}>\n          <div style={DEMO_FORM_FIELD_STYLE}>Input Field (span 9)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12} md={3}>\n          <div style={DEMO_FORM_LABEL_STYLE}>Label: Email</div>\n        </Col>\n        <Col span={12} md={9}>\n          <div style={DEMO_FORM_FIELD_STYLE}>Input Field (span 9)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12} md={{ span: 9, offset: 3 }}>\n          <div style={DEMO_FORM_FIELD_STYLE}>Inline Help / Validation Message (offset 3)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12} md={{ span: 9, offset: 3 }}>\n          <Row gutter={GRID_GUTTER_COMPACT} justify={GRID_JUSTIFY.end}>\n            <Col span={6} md={4} lg={3}>\n              <div style={DEMO_FORM_ACTION_STYLE}>Secondary Action</div>\n            </Col>\n            <Col span={6} md={4} lg={3}>\n              <div style={DEMO_FORM_ACTION_STYLE}>Primary Action</div>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n    </div>",
-      "source": "stories",
-      "compilable": true
-    },
     "25d3c27d4d446cfc5d638fc4025c31ea8026f219ad274ed16cbc32bef414ba5c": {
       "title": "Checked",
       "code": "<Switch {...args} label=\"Label\" defaultChecked />",
@@ -457,12 +451,24 @@
       "source": "stories",
       "compilable": false
     },
+    "267b1cee479eb227e3e0dc2e583586ffa25a245dc1ea61600d8b038326496d16": {
+      "title": "Dialog Form Custom Width",
+      "code": "<DialogForm\n      {...args}\n      title=\"Create User\"\n      width={768}\n      trigger={<Button color=\"primary\">Open Wide Dialog Form (768px)</Button>}\n      onFinish={async (values) => {\n        alert(JSON.stringify(values, null, 2));\n      }}\n    >\n      <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n      <ProFormText name=\"email\" label=\"Email\" rules={[{ required: true }]} />\n      <ProFormSwitch name=\"active\" label=\"Active\" />\n    </DialogForm>",
+      "source": "stories",
+      "compilable": false
+    },
     "267f5a3ff897958d20e8cf8872f84ac550344f94b274b43885d55f28b7e9fb62": {
       "title": "Drawer Form Controlled",
       "code": "{\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div style={{ display: 'flex', gap: 8 }}>\n        <Button color=\"primary\" onClick={() => setOpen(true)}>Open (Controlled)</Button>\n        <Button color=\"secondary\" onClick={() => setOpen(false)}>Close</Button>\n        <DrawerForm\n          {...args}\n          open={open}\n          onOpenChange={setOpen}\n          title=\"Edit Profile\"\n          width={520}\n          initialValues={{ name: 'Alice', role: 'Admin' }}\n          onFinish={async (values) => {\n            alert(JSON.stringify(values, null, 2));\n          }}\n        >\n          <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n          <ProFormText name=\"role\" label=\"Role\" />\n        </DrawerForm>\n      </div>\n    );\n  }",
       "source": "stories",
       "compilable": false
     },
+    "269342ac60c8933658e1742f472b34e32a6a6356d8ef56c07232ead730f83373": {
+      "title": "Query Filter Collapse",
+      "code": "<QueryFilter\n      {...args}\n      defaultColsNumber={3}\n      onFinish={(values) => alert('Search: ' + JSON.stringify(values, null, 2))}\n    >\n      <ProFormText name=\"keyword\" label=\"Keyword\" placeholder=\"Search...\" />\n      <ProFormSelect\n        name=\"status\"\n        label=\"Status\"\n        valueEnum={{ all: 'All', active: 'Active', inactive: 'Inactive' }}\n      />\n      <ProFormSelect name=\"role\" label=\"Role\" valueEnum={{ admin: 'Admin', member: 'Member' }} />\n      <ProFormText name=\"owner\" label=\"Owner\" placeholder=\"Owner...\" />\n      <ProFormDatePicker name=\"createdAt\" label=\"Created\" />\n    </QueryFilter>",
+      "source": "stories",
+      "compilable": false
+    },
     "2747faa4403a689de6d4dcfed855783441d64415a45749a3540e57922479641a": {
       "title": "Dynamic List",
       "code": "<ProForm\n      {...args}\n      initialValues={{\n        members: [\n          { name: 'Alice', role: 'Admin' },\n          { name: 'Bob', role: 'Member' },\n        ],\n      }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormList name=\"members\" label=\"Team Members\" min={1} max={5}>\n        {(fields) =>\n          fields.map(({ name, key }) => (\n            <div key={key} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>\n              <ProFormText name={`${name}.name`} label=\"Name\" placeholder=\"Name\" />\n              <ProFormText name={`${name}.role`} label=\"Role\" placeholder=\"Role\" />\n            </div>\n          ))\n        }\n      </ProFormList>\n    </ProForm>",
@@ -523,6 +529,12 @@
       "source": "readme",
       "compilable": true
     },
+    "2c3e8df84f97a0c45dee2b95fc78c4b44f9173c4b0421a06f1c4ba6088ba407e": {
+      "title": "Basic Columns",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Row gutter={GRID_GUTTER}>\n        <Col span={SPAN_FULL}>\n          <div style={DEMO_BOX_STYLE}>span 12</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER}>\n        <Col span={SPAN_HALF}>\n          <div style={DEMO_BOX_STYLE}>span 6</div>\n        </Col>\n        <Col span={SPAN_HALF}>\n          <div style={DEMO_BOX_STYLE}>span 6</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER}>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>span 4</div>\n        </Col>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>span 4</div>\n        </Col>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>span 4</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER}>\n        <Col span={SPAN_QUARTER}>\n          <div style={DEMO_BOX_STYLE}>span 3</div>\n        </Col>\n        <Col span={SPAN_QUARTER}>\n          <div style={DEMO_BOX_STYLE}>span 3</div>\n        </Col>\n        <Col span={SPAN_QUARTER}>\n          <div style={DEMO_BOX_STYLE}>span 3</div>\n        </Col>\n        <Col span={SPAN_QUARTER}>\n          <div style={DEMO_BOX_STYLE}>span 3</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "2cca976a647db275dfb45ce8bb53bc85d304e49c3d91f76e5987d11e95b604c1": {
       "title": "Import",
       "code": "import { Cell } from '@1money/component-ui';\n// or\nimport { Cell } from '@1money/component-ui/Cell';",
@@ -565,12 +577,6 @@
       "source": "stories",
       "compilable": false
     },
-    "31e687407721cc55ccd2d23531c5e503c2b504126b32c3d64a6ea3fd5841a76c": {
-      "title": "Typed forms (generics)",
-      "code": "interface CreateUserPayload { username: string; role: 'admin' | 'viewer' }\n\n<ProForm<CreateUserPayload>\n  onFinish={(values) => createUser(values)} // values: CreateUserPayload\n  formRef={formRef}                          // ProFormFormInstance<CreateUserPayload>\n/>",
-      "source": "readme",
-      "compilable": true
-    },
     "321187232dc3b48e95ce3712c00ca272ee685f253daca21db994104a5eb509d2": {
       "title": "Searchable",
       "code": "{\n    const [basic, setBasic] = useState<string | number | undefined>('usdt');\n    const [searchOnly, setSearchOnly] = useState<string | number | undefined>(undefined);\n    const [searchValue, setSearchValue] = useState('');\n    const [smallValue, setSmallValue] = useState<string | number | undefined>('usdt');\n\n    const trimmed = searchValue.trim().toLowerCase();\n    const filteredOptions = trimmed\n      ? ASSET_OPTIONS.filter((option) => {\n          const label = String(option.label).toLowerCase();\n          const description = String(option.description ?? '').toLowerCase();\n          const optionValue = String(option.value).toLowerCase();\n          return (\n            label.includes(trimmed) ||\n            description.includes(trimmed) ||\n            optionValue.includes(trimmed)\n          );\n        })\n      : [];\n\n    return (\n      <div style={rowStyle}>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Default (large)</p>\n          <Select\n            label=\"Asset\"\n            searchable\n            searchPlaceholder=\"Search\"\n            options={ASSET_OPTIONS}\n            value={basic}\n            onChange={(next) => setBasic(next as string | number | undefined)}\n          />\n        </div>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Small + grouped</p>\n          <Select\n            label=\"Asset\"\n            size=\"small\"\n            searchable\n            searchPlaceholder=\"Search\"\n            filterInputAutoFocus={false}\n            options={GROUPED_ASSET_OPTIONS}\n            renderOption={renderAssetOption}\n            value={smallValue}\n            onChange={(next) => setSmallValue(next as string | number | undefined)}\n          />\n        </div>\n        <div style={cellStyle(320)}>\n          <p style={captionStyle}>Controlled filter (search-only)</p>\n          <Select\n            label=\"Asset\"\n            searchable\n            searchPlaceholder=\"Search\"\n            options={filteredOptions}\n            searchValue={searchValue}\n            emptyContent={trimmed ? 'No matches' : 'Type to search assets'}\n            value={searchOnly}\n            onSearchChange={setSearchValue}\n            onChange={(next) => setSearchOnly(next as string | number | undefined)}\n          />\n        </div>\n      </div>\n    );\n  }",
@@ -619,18 +625,6 @@
       "source": "stories",
       "compilable": true
     },
-    "35d03672d22c429b5728577ce7f8d9a9e1c71faa8b6a6831ec83c20ab0f32541": {
-      "title": "Dashboard Layout",
-      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12}>\n          <div style={DEMO_HEADER_BLOCK_STYLE}>Header (12/12)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12} md={3} lg={3}>\n          <div style={DEMO_SIDEBAR_BLOCK_STYLE}>Sidebar (12 → 3 → 3)</div>\n        </Col>\n        <Col span={12} md={9} lg={9}>\n          <Row gutter={GRID_GUTTER_SPACED}>\n            <Col span={6} lg={3}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 1</div>\n            </Col>\n            <Col span={6} lg={3}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 2</div>\n            </Col>\n            <Col span={6} lg={3}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 3</div>\n            </Col>\n            <Col span={6} lg={3}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 4</div>\n            </Col>\n          </Row>\n\n          <Row gutter={GRID_GUTTER_SPACED}>\n            <Col span={12} lg={8}>\n              <div style={DEMO_CHART_BLOCK_STYLE}>Main Chart (12 → 8)</div>\n            </Col>\n            <Col span={12} lg={4}>\n              <div style={DEMO_CHART_BLOCK_STYLE}>Side Panel (12 → 4)</div>\n            </Col>\n          </Row>\n\n          <Row gutter={GRID_GUTTER_SPACED}>\n            <Col span={12}>\n              <div style={DEMO_TABLE_BLOCK_STYLE}>Table Section (12/12)</div>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={12}>\n          <div style={DEMO_FOOTER_BLOCK_STYLE}>Footer (12/12)</div>\n        </Col>\n      </Row>\n    </div>",
-      "source": "stories",
-      "compilable": true
-    },
-    "35ef262aacb50e576c661e627da1e7f2a63d545598db02d89b2aca173d0a6129": {
-      "title": "Grid Layout",
-      "code": "<ProForm\n      {...args}\n      rowProps={{ gutter: 16 }}\n      initialValues={{}}\n    >\n      <ProFormText name=\"firstName\" label=\"First Name\" colProps={{ span: 12 }} />\n      <ProFormText name=\"lastName\" label=\"Last Name\" colProps={{ span: 12 }} />\n      <ProFormText name=\"email\" label=\"Email\" colProps={{ span: 12 }} />\n      <ProFormText name=\"phone\" label=\"Phone\" colProps={{ span: 12 }} />\n      <ProFormTextArea name=\"address\" label=\"Address\" colProps={{ span: 24 }} />\n    </ProForm>",
-      "source": "stories",
-      "compilable": false
-    },
     "35f57c8747980e6bf5b6557fb00fbd1de7494d3164d9b0b0b2697c9badc38482": {
       "title": "With Search",
       "code": "{\n    const [query, setQuery] = useState('');\n    const filtered = SIMPLE_ITEMS.filter((item) =>\n      item.toLowerCase().includes(query.toLowerCase()),\n    );\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 240 }}\n        content={\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n            <Input.Search\n              size=\"small\"\n              placeholder=\"Search\"\n              value={query}\n              onChange={setQuery}\n              allowClear\n            />\n            <div style={{ display: 'flex', flexDirection: 'column' }}>\n              {filtered.length === 0 && (\n                <p style={{ ...itemSubtitleStyle, padding: '8px 12px' }}>\n                  No results found\n                </p>\n              )}\n              {filtered.map((item) => (\n                <DropdownItem key={item} title={item} />\n              ))}\n            </div>\n          </div>\n        }\n      >\n        <Button>Search Items</Button>\n      </Dropdown>\n    );\n  }",
@@ -685,24 +679,30 @@
       "source": "stories",
       "compilable": true
     },
+    "393f0c9c2f19d0c46277430d3414f19443e0ae06c63b1cc70483c5107356c310": {
+      "title": "Hidden Column",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col span={SPAN_HALF}>\n          <div style={DEMO_BOX_STYLE}>always visible</div>\n        </Col>\n        <Col span={SPAN_HIDDEN}>\n          <div style={DEMO_BOX_STYLE}>span 0 — never rendered visually</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col span={SPAN_HALF} sm={SPAN_FULL}>\n          <div style={DEMO_BOX_STYLE}>always visible</div>\n        </Col>\n        <Col span={SPAN_HALF} sm={SPAN_HIDDEN}>\n          <div style={DEMO_BOX_STYLE}>hidden below 768px (sm=0)</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "398c56e66e36d3ab3b61b257b2bc0522eb642f46f8bcb939b5c59ff543449dc7": {
       "title": "Usage",
       "code": "<Input label=\"Amount\" placeholder=\"Value\" />\n\n<Input.Password label=\"Password\" />\n\n<Input.Search label=\"Search\" onSearch={(value) => console.log(value)} />\n\n<Input.TextArea label=\"Memo\" rows={4} />\n\n<Input.OTP length={6} />\n\n<Input.Trade currencySymbol=\"$\" currencyUnit=\"USD\" />\n\n<Input.Amount currencyLabel=\"USDC\" />\n\n<Input.Mask mask=\"999-99-9999\" />",
       "source": "readme",
       "compilable": true
     },
+    "3b1c013f838f3b6af14a9a63496b252a2639f729be7c2afe0f0aa6f72973e0fe": {
+      "title": "Responsive",
+      "code": "<Row gutter={GRID_GUTTER}>\n      <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n        <div style={DEMO_BOX_STYLE}>A</div>\n      </Col>\n      <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n        <div style={DEMO_BOX_STYLE}>B</div>\n      </Col>\n      <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n        <div style={DEMO_BOX_STYLE}>C</div>\n      </Col>\n    </Row>",
+      "source": "stories",
+      "compilable": true
+    },
     "3b416ca019f27f4a1d80ae5a1bbafa8b6b9d196ebbdbf9df77bbd8d7c4118934": {
       "title": "Custom Size And Wrap",
       "code": "<Space size={[8, 16]} wrap style={{ maxWidth: 240 }}>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <div style={DEMO_BOX_STYLE} key={index}>\n          Item {index + 1}\n        </div>\n      ))}\n    </Space>",
       "source": "stories",
       "compilable": true
     },
-    "3c3505571d048f21d338aa69eef9958e1c52c1291853b9b05ab914623319a464": {
-      "title": "Async Request",
-      "code": "{\n    const [userId, setUserId] = useState(1);\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n        <div style={{ display: 'flex', gap: 8 }}>\n          <Button color={userId === 1 ? 'primary' : 'grey'} onClick={() => setUserId(1)}>\n            User 1\n          </Button>\n          <Button color={userId === 2 ? 'primary' : 'grey'} onClick={() => setUserId(2)}>\n            User 2\n          </Button>\n        </div>\n        <ProForm\n          {...args}\n          params={{ userId }}\n          request={async (params) => {\n            await new Promise((r) => setTimeout(r, 1000));\n            const data: Record<number, Record<string, unknown>> = {\n              1: { name: 'Alice', email: 'alice@example.com' },\n              2: { name: 'Bob', email: 'bob@example.com' },\n            };\n            return data[(params as { userId: number })?.userId] || {};\n          }}\n        >\n          <ProFormText name=\"name\" label=\"Name\" />\n          <ProFormText name=\"email\" label=\"Email\" />\n        </ProForm>\n      </div>\n    );\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "3c5bbd0e70d50121131f70e69229d2badab6a0c4ce56c9343804fac5db4cc85d": {
       "title": "Cell Centered",
       "code": "<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', flexWrap: 'wrap' }}>\n      <Radio\n        checked\n        variant=\"cell\"\n        size=\"large\"\n        alignment=\"center\"\n        icon=\"language\"\n        tag=\"Tag\"\n        label=\"Global account\"\n        description=\"International transfers\"\n        style={{ width: 200 }}\n      />\n      <Radio\n        checked\n        variant=\"cell\"\n        size=\"medium\"\n        alignment=\"center\"\n        icon=\"usd\"\n        label=\"USD1\"\n        style={{ width: 200 }}\n      />\n      <Radio\n        checked\n        variant=\"cell\"\n        size=\"small\"\n        alignment=\"center\"\n        icon=\"usd\"\n        label=\"USD1\"\n        style={{ width: 200 }}\n      />\n    </div>",
@@ -775,6 +775,12 @@
       "source": "stories",
       "compilable": false
     },
+    "4617e0aac2539a1d63cf4476b33848da29083ee5a92a4655275ac7eba9eb0246": {
+      "title": "Typed forms (generics)",
+      "code": "const cityColumn: ProFormSchemaColumn<CreateUserPayload, 'address.city'> = {\n  dataIndex: 'address.city',\n  initialValue: 'Shanghai',\n};",
+      "source": "readme",
+      "compilable": true
+    },
     "466a2cf763ac1374c62583da68c81d15d8aece066ae06417d6a4356855606954": {
       "title": "With Badges",
       "code": "<Tabs\n      items={[\n        { key: 'tab1', label: 'Overview', badge: 5 },\n        { key: 'tab2', label: 'Transactions', badge: 12 },\n        { key: 'tab3', label: 'Analytics' },\n        { key: 'tab4', label: 'Settings', badge: 3 },\n      ]}\n    />",
@@ -829,18 +835,18 @@
       "source": "stories",
       "compilable": false
     },
-    "49dfc73d483629f124012f5f0ce9f22e06b9496d4f80a2c7a2ad32ac3cb8f6c9": {
-      "title": "Kitchen Sink",
-      "code": "<ProForm\n      {...args}\n      grid\n      rowProps={{ gutter: 16 }}\n      initialValues={{\n        name: '',\n        email: '',\n        bio: '',\n        newsletter: false,\n        darkMode: true,\n        items: [{ title: 'Item 1' }],\n      }}\n      submitter={{ submitText: 'Create', resetText: 'Clear All' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText\n        name=\"name\"\n        label=\"Full Name\"\n        colProps={{ span: 12 }}\n        rules={[{ required: true }]}\n      />\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        colProps={{ span: 12 }}\n        rules={[{ required: true }]}\n      />\n      <ProFormTextArea\n        name=\"bio\"\n        label=\"Biography\"\n        colProps={{ span: 24 }}\n      />\n      <ProFormCheckbox name=\"newsletter\" label=\"Subscribe to newsletter\" colProps={{ span: 12 }} />\n      <ProFormSwitch name=\"darkMode\" label=\"Dark Mode\" colProps={{ span: 12 }} />\n      <ProFormDependency name={['newsletter']}>\n        {({ newsletter }) =>\n          newsletter ? (\n            <ProFormText\n              name=\"frequency\"\n              label=\"Email Frequency\"\n              placeholder=\"daily / weekly / monthly\"\n              colProps={{ span: 24 }}\n            />\n          ) : null\n        }\n      </ProFormDependency>\n    </ProForm>",
-      "source": "stories",
-      "compilable": false
-    },
     "49fefb1f1d8145921b4b4e7c674411c0a6ca5a63d9c22a60a5e82735ab251e86": {
       "title": "Default",
       "code": "<Dropdown {...args} content={<MenuContent />}>\n      <Button>Actions</Button>\n    </Dropdown>",
       "source": "stories",
       "compilable": false
     },
+    "4a895c708129dba60a9452a82b550b2f431e587c0987b51738984c48f0e964e1": {
+      "title": "Typed forms (generics)",
+      "code": "const ctx = ProForm.useContext<CreateUserPayload>();\nctx.values.address.city;              // string\nctx.setFieldValue('role', 'viewer');  // value checked against the field",
+      "source": "readme",
+      "compilable": true
+    },
     "4ad4837cde91f1ebd2cad90d6f82683fd94957192e4b88fa46882aac2330b854": {
       "title": "Group Collapsible",
       "code": "<ProForm\n      {...args}\n      initialValues={{ name: 'Alice', bio: '', theme: 'light' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProForm.Group title=\"Basic Info\" collapsible>\n        <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n        <ProFormText name=\"bio\" label=\"Bio\" />\n      </ProForm.Group>\n      <ProForm.Group title=\"Preferences\" collapsible defaultCollapsed>\n        <ProFormText name=\"theme\" label=\"Theme\" />\n        <ProFormSwitch name=\"notifications\" label=\"Notifications\" />\n      </ProForm.Group>\n    </ProForm>",
@@ -889,6 +895,12 @@
       "source": "readme",
       "compilable": true
     },
+    "562dddaaddd3e544936b5e89215d9e70e60d127971cf1ac6ae60d8b177af7fab": {
+      "title": "Typed forms (generics)",
+      "code": "interface CreateUserPayload {\n  username: string;\n  role: 'admin' | 'viewer';\n  address: { city: string };\n}\n\n<ProForm<CreateUserPayload>\n  onFinish={(values) => createUser(values)} // values: CreateUserPayload\n  formRef={formRef}                          // ProFormFormInstance<CreateUserPayload>\n>\n  <ProForm.Text<CreateUserPayload> name=\"username\" />\n  <ProForm.Text<CreateUserPayload> name=\"address.city\" />\n</ProForm>\n\nconst [form] = ProForm.useForm<CreateUserPayload>();\nform.getFieldValue('address.city');          // string\nform.getFieldFormatValue('role');            // 'admin' | 'viewer'\nform.setFieldValue('role', 'admin');         // value checked against the field\nform.setFieldsValue({ address: { city: 'SG' } }); // nested patches deep-merge\nform.setFieldsValue({ 'address.city': 'SG' }); // dot-key patches are supported",
+      "source": "readme",
+      "compilable": true
+    },
     "56434ea344c01f25a04ecb3cdf55d35d04a2631937c4fdecac6e4bb577a69175": {
       "title": "Canonical usage",
       "code": "import { Switch } from '@1money/component-ui';\n// or\nimport { Switch } from '@1money/component-ui/Switch';",
@@ -1009,6 +1021,12 @@
       "source": "canonical",
       "compilable": true
     },
+    "5e62458df6c4fc5e394adb062eaf4e86dc588a4e0853291cab7570d562727b7d": {
+      "title": "Nested Grid",
+      "code": "<Row gutter={GRID_GUTTER}>\n      <Col span={SPAN_TWO_THIRDS}>\n        <div style={DEMO_BOX_STYLE}>\n          <Row gutter={GRID_GUTTER_COMPACT}>\n            <Col span={SPAN_HALF}>\n              <div style={DEMO_BOX_STYLE}>nested 6</div>\n            </Col>\n            <Col span={SPAN_HALF}>\n              <div style={DEMO_BOX_STYLE}>nested 6</div>\n            </Col>\n          </Row>\n        </div>\n      </Col>\n      <Col span={SPAN_THIRD}>\n        <div style={DEMO_BOX_STYLE}>outer 4</div>\n      </Col>\n    </Row>",
+      "source": "stories",
+      "compilable": true
+    },
     "5ee36de77e5b738be3d01e003ffd9e566be8aac97cb86967680185ff6acde1c6": {
       "title": "Usage",
       "code": "// Basic\n<Button color=\"primary\" size=\"medium\">Submit</Button>\n\n// With icons\n<Button color=\"secondary\" iconStart={<Icons name=\"add\" size={16} />}>\n  Add Item\n</Button>\n\n<Button color=\"grey\" iconEnd={<Icons name=\"arrowRight\" size={16} />}>\n  Next\n</Button>\n\n// Full-width (block)\n<Button block>Continue</Button>\n\n// Loading state\n<Button loading>Processing...</Button>\n\n// Disabled\n<Button disabled>Unavailable</Button>",
@@ -1069,6 +1087,12 @@
       "source": "stories",
       "compilable": true
     },
+    "62750a71bdc58bc9e0f99757dab54b58d289781855f75464a3dfde041584e5a9": {
+      "title": "Typed forms (generics)",
+      "code": "<ProForm<CreateUserPayload, { tenantId: string }>\n  params={{ tenantId: 'tenant-1' }}\n  request={async (params) => ({ username: params?.tenantId ?? '' })}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
     "62b5efe615c2669f474d5e6b4b89e9548d25b067decf9570da5994151f8c3d63": {
       "title": "Import",
       "code": "import { Radio, RadioGroup } from '@1money/component-ui';\n// or tree-shakeable\nimport { Radio, RadioGroup } from '@1money/component-ui/Radio';",
@@ -1093,6 +1117,12 @@
       "source": "stories",
       "compilable": true
     },
+    "659937a02004ff278161fb5e5f275f70e74bfc2be9cb0006f467fd47fb6550f2": {
+      "title": "Playground",
+      "code": "<Grid {...args}>\n      <Grid.Col span={SPAN_THIRD}>\n        <div style={DEMO_BOX_STYLE}>span 4</div>\n      </Grid.Col>\n      <Grid.Col span={SPAN_THIRD}>\n        <div style={DEMO_BOX_STYLE}>span 4</div>\n      </Grid.Col>\n      <Grid.Col span={SPAN_THIRD}>\n        <div style={DEMO_BOX_STYLE}>span 4</div>\n      </Grid.Col>\n    </Grid>",
+      "source": "stories",
+      "compilable": false
+    },
     "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>",
@@ -1111,11 +1141,11 @@
       "source": "stories",
       "compilable": true
     },
-    "699022fcfe2193a016f965ca015fe7b541b5f1215b76c3ce9b65711615c76f76": {
-      "title": "ProForm.useWatch",
-      "code": "const plan = ProForm.useWatch('plan');     // single field\nconst values = ProForm.useWatch();          // whole values object",
-      "source": "readme",
-      "compilable": true
+    "692b786f52a95876c3ce1005391b4720c2fdb792e169c6832998d818a6be5fbc": {
+      "title": "Async Validator Error",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ email: 'taken@example.com' }}\n      onFinish={(values) => alert('Success: ' + JSON.stringify(values))}\n      onFinishFailed={({ errors }) =>\n        alert('Submit blocked by validation: ' + JSON.stringify(errors))\n      }\n    >\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        placeholder=\"Any value — the remote check always rejects\"\n        description=\"The async validator always rejects after a simulated 800ms delay; the rejected Error's message becomes the field error. Blur the field to see the pending → error transition. Submit is blocked and routed to onFinishFailed.\"\n        validateTrigger={['onChange', 'onBlur']}\n        rules={[\n          { required: true, message: 'Email is required' },\n          { validator: checkEmailAlwaysTaken, validateTrigger: 'onBlur' },\n        ]}\n      />\n      <CheckingHint name=\"email\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
     },
     "69b3c7f7f0c52a2b442c48facf31fa65600796fb8e47401b6b3c432389dbf92d": {
       "title": "Slider Story",
@@ -1177,6 +1207,12 @@
       "source": "stories",
       "compilable": false
     },
+    "72791f662fcf89e80142f2bfa365124f069ad691fd8779bb8d42587b91073e0d": {
+      "title": "ProForm.useWatch",
+      "code": "const plan = ProForm.useWatch('plan'); // untyped/open usage\n\nconst city = ProForm.useWatch<CreateUserPayload, 'address.city'>('address.city'); // string\nconst values = ProForm.useWatch<CreateUserPayload>(); // CreateUserPayload",
+      "source": "readme",
+      "compilable": true
+    },
     "7318e5e19b35c2334284717d2b44382c3f0aa456d1d61c6892e3211c2c77135d": {
       "title": "Canonical usage",
       "code": "import { Pagination, usePagination } from '@1money/component-ui';\n// or\nimport { Pagination, usePagination } from '@1money/component-ui/Pagination';",
@@ -1351,6 +1387,12 @@
       "source": "stories",
       "compilable": false
     },
+    "82296675b7970df9eb7f280d893c161ec78b0563e42bd73528b51abb8533923c": {
+      "title": "Custom Field",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ brand: '#1677ff', label: 'Primary' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormColor name=\"brand\" label=\"Brand Color\" />\n      <ProFormText name=\"label\" label=\"Label\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
     "829d1add076b11f67d3d30e761c7861b952e35bb1ae8a1c71c99a97bbf5318a9": {
       "title": "All States",
       "code": "<div style={previewStackStyle}>\n      <Cell {...args}>Authenticator app</Cell>\n      <Cell {...args} className=\"om-component-ui-cell-hovered\">\n        Authenticator app\n      </Cell>\n      <Cell {...args} active>\n        Authenticator app\n      </Cell>\n      <Cell {...args} disabled>\n        Authenticator app\n      </Cell>\n    </div>",
@@ -1465,12 +1507,24 @@
       "source": "canonical",
       "compilable": true
     },
+    "889a457e21065033d6605caafda90cc3784769e68c8bef026d4ad686ade70300": {
+      "title": "Marketing Page Layout",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED} justify={GRID_JUSTIFY.center}>\n        <Col span={SPAN_TWO_THIRDS} md={SPAN_FULL}>\n          <div style={DEMO_CHART_BLOCK_STYLE}>Hero Section</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n          <div style={DEMO_WIDGET_BLOCK_STYLE}>Feature Card A</div>\n        </Col>\n        <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n          <div style={DEMO_WIDGET_BLOCK_STYLE}>Feature Card B</div>\n        </Col>\n        <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n          <div style={DEMO_WIDGET_BLOCK_STYLE}>Feature Card C</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED} align={GRID_ALIGN.middle}>\n        <Col span={SPAN_HALF} sm={SPAN_FULL}>\n          <div style={DEMO_MAIN_BLOCK_STYLE}>Image / Illustration</div>\n        </Col>\n        <Col span={SPAN_HALF} sm={SPAN_FULL}>\n          <div style={DEMO_MAIN_BLOCK_STYLE}>Value Description</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_FULL}>\n          <div style={DEMO_TABLE_BLOCK_STYLE}>FAQ / Timeline</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_FULL}>\n          <div style={DEMO_FOOTER_BLOCK_STYLE}>Footer Links</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "88a98229b741820a7e0d61f5e3e8e51340ac8d1cc2eb5332be8189a42f43b6ff": {
       "title": "No Animation",
       "code": "<Tabs items={DEFAULT_ITEMS} animated={false} />",
       "source": "stories",
       "compilable": true
     },
+    "88b4f9d2df4fa6c3faa1e2f13f63d992f6c70030e1c5f56b23f198bc735e0ee7": {
+      "title": "Responsive Gutter",
+      "code": "<Row gutter={GRID_GUTTER_RESPONSIVE}>\n      <Col span={SPAN_HALF}>\n        <div style={DEMO_BOX_STYLE}>Responsive gutter</div>\n      </Col>\n      <Col span={SPAN_HALF}>\n        <div style={DEMO_BOX_STYLE}>Responsive gutter</div>\n      </Col>\n    </Row>",
+      "source": "stories",
+      "compilable": true
+    },
     "88d755986a79510c067c54071ee75a7b8a5f294d653e8f9be6f69bda6df1d23e": {
       "title": "`Summary`",
       "code": "import { Table, Summary } from '@1money/component-ui';\n\n<Table\n  rowKey=\"id\"\n  columns={columns}\n  dataSource={rows}\n  pagination={false}\n  summary={(data) => {\n    const total = data.reduce((sum, row) => sum + row.amount, 0);\n    return (\n      <Summary fixed=\"bottom\">\n        <Summary.Row>\n          <Summary.Cell index={0} colSpan={2}>Grand Total</Summary.Cell>\n          <Summary.Cell index={2} align=\"right\">{total}</Summary.Cell>\n        </Summary.Row>\n      </Summary>\n    );\n  }}\n/>",
@@ -1549,6 +1603,18 @@
       "source": "stories",
       "compilable": false
     },
+    "8fb084db7fe25d6133b446ee034f21273995ab316045602bae78fecb682613a1": {
+      "title": "Responsive Align",
+      "code": "<Row gutter={GRID_GUTTER} align={ALIGN_RESPONSIVE}>\n      <Col span={SPAN_HALF}>\n        <div style={DEMO_BOX_TALL_STYLE}>tall</div>\n      </Col>\n      <Col span={SPAN_HALF}>\n        <div style={DEMO_BOX_STYLE}>short — alignment changes by breakpoint</div>\n      </Col>\n    </Row>",
+      "source": "stories",
+      "compilable": true
+    },
+    "900a6c842c5f571d94658a4de0d28d1ce726745efc44a81da6b6ab04cb3c3c1d": {
+      "title": "Gutter",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>1</div>\n        </Col>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>2</div>\n        </Col>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>3</div>\n        </Col>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>4 (wraps, shows vertical gap)</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER_REM}>\n        <Col span={SPAN_HALF}>\n          <div style={DEMO_BOX_STYLE}>string gutter 1rem</div>\n        </Col>\n        <Col span={SPAN_HALF}>\n          <div style={DEMO_BOX_STYLE}>string gutter 1rem</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "91b867963c8770d8b5e23b0323c47c0d4e3b5b166eb238a1041701349dfc9001": {
       "title": "Canonical usage",
       "code": "import type { ProTableRequest } from '@1money/component-ui';",
@@ -1639,18 +1705,18 @@
       "source": "stories",
       "compilable": true
     },
-    "99531c5452d90fd65cb2b8267d93bd81cafb03cf282005f5232b325f159fa2f7": {
-      "title": "Responsive",
-      "code": "<Row gutter={GRID_GUTTER}>\n      <Col span={SPAN_BASE} sm={SPAN_SM} md={SPAN_MD} lg={SPAN_LG}><div style={DEMO_BOX_STYLE}>A</div></Col>\n      <Col span={SPAN_BASE} sm={SPAN_SM} md={SPAN_MD} lg={SPAN_LG}><div style={DEMO_BOX_STYLE}>B</div></Col>\n      <Col span={SPAN_BASE} sm={SPAN_SM} md={SPAN_MD} lg={SPAN_LG}><div style={DEMO_BOX_STYLE}>C</div></Col>\n    </Row>",
-      "source": "stories",
-      "compilable": true
-    },
     "9971f4d638cacc647af1a34ef98beb3f2aaf11c08d3a3f8f21fd0fd5bdef0dde": {
       "title": "CheckboxGroup Props",
       "code": "import { Checkbox, CheckboxGroup } from '@1money/component-ui';\n// or\nimport { Checkbox, CheckboxGroup } from '@1money/component-ui/Checkbox';\n\n<CheckboxGroup\n  name=\"fruits\"\n  options={[\n    { label: 'Apple', value: 'apple' },\n    { label: 'Pear', value: 'pear' },\n  ]}\n  value={selectedValues}\n  onChange={setSelectedValues}\n/>\n\n<Checkbox.Group defaultValue={['alpha']}>\n  <Checkbox value=\"alpha\" label=\"Alpha\" />\n  <Checkbox value=\"beta\" label=\"Beta\" />\n</Checkbox.Group>",
       "source": "readme",
       "compilable": true
     },
+    "997b534904e60a96182155c95bdb97f044ea39feef9ac915c014984b29bbf90b": {
+      "title": "Item Gap",
+      "code": "<div style={{ display: 'flex', gap: 48, alignItems: 'flex-start' }}>\n      <div style={{ flex: 1 }}>\n        <h4 style={{ marginBottom: 16 }}>Default spacing</h4>\n        <ProForm {...args}>\n          <ProFormText name=\"a\" label=\"Field A\" />\n          <ProFormText name=\"b\" label=\"Field B\" />\n          <ProFormText name=\"c\" label=\"Field C\" />\n        </ProForm>\n      </div>\n      <div style={{ flex: 1 }}>\n        <h4 style={{ marginBottom: 16 }}>itemGap: 8</h4>\n        <ProForm {...args} layout={{ itemGap: 8 }}>\n          <ProFormText name=\"a\" label=\"Field A\" />\n          <ProFormText name=\"b\" label=\"Field B\" />\n          <ProFormText name=\"c\" label=\"Field C\" />\n        </ProForm>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
     "9af2306c1aff18816073dccbcebb287dda5cedc961f04ea7a2ad419875c3055b": {
       "title": "States",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <Radio label=\"Unchecked\" />\n      <Radio label=\"Checked\" checked />\n      <Radio label=\"Disabled unchecked\" disabled />\n      <Radio label=\"Disabled checked\" checked disabled />\n    </div>",
@@ -1711,6 +1777,12 @@
       "source": "stories",
       "compilable": true
     },
+    "a33e8cbf38a27bce297ad4b5fcc85bfdaca5929487fdcef6068cea40b4c01bb1": {
+      "title": "Dashboard Layout",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_FULL}>\n          <div style={DEMO_HEADER_BLOCK_STYLE}>Header (12/12)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_QUARTER} md={SPAN_FULL}>\n          <div style={DEMO_SIDEBAR_BLOCK_STYLE}>Sidebar (3 on desktop → full below md)</div>\n        </Col>\n        <Col span={SPAN_NINE} md={SPAN_FULL}>\n          <Row gutter={GRID_GUTTER_SPACED}>\n            <Col span={SPAN_QUARTER} md={SPAN_HALF} sm={SPAN_FULL}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 1</div>\n            </Col>\n            <Col span={SPAN_QUARTER} md={SPAN_HALF} sm={SPAN_FULL}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 2</div>\n            </Col>\n            <Col span={SPAN_QUARTER} md={SPAN_HALF} sm={SPAN_FULL}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 3</div>\n            </Col>\n            <Col span={SPAN_QUARTER} md={SPAN_HALF} sm={SPAN_FULL}>\n              <div style={DEMO_WIDGET_BLOCK_STYLE}>KPI 4</div>\n            </Col>\n          </Row>\n\n          <Row gutter={GRID_GUTTER_SPACED}>\n            <Col span={SPAN_TWO_THIRDS} md={SPAN_FULL}>\n              <div style={DEMO_CHART_BLOCK_STYLE}>Main Chart (8 → full)</div>\n            </Col>\n            <Col span={SPAN_THIRD} md={SPAN_FULL}>\n              <div style={DEMO_CHART_BLOCK_STYLE}>Side Panel (4 → full)</div>\n            </Col>\n          </Row>\n\n          <Row gutter={GRID_GUTTER_SPACED}>\n            <Col span={SPAN_FULL}>\n              <div style={DEMO_TABLE_BLOCK_STYLE}>Table Section (12/12)</div>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_FULL}>\n          <div style={DEMO_FOOTER_BLOCK_STYLE}>Footer (12/12)</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "a384708daf54145061d22ec7ae65bd975180650d5364956566a5ba2641f012c5": {
       "title": "Label Placement and Direction",
       "code": "{/* Default variant uses labelPlacement */}\n<Radio label=\"Dot on left, label on right\" labelPlacement=\"left\" />\n<Radio label=\"Dot on right, label on left\" labelPlacement=\"right\" />\n\n{/* Cell variant uses alignment */}\n<Radio variant=\"cell\" alignment=\"left\" icon=\"swift\" label=\"Horizontal\" />\n<Radio variant=\"cell\" alignment=\"center\" icon=\"swift\" label=\"Vertical\" />\n\n<RadioGroup direction=\"horizontal\" value={selected} onChange={handleChange}>\n  <Radio value=\"sm\" label=\"Small\" />\n  <Radio value=\"md\" label=\"Medium\" />\n  <Radio value=\"lg\" label=\"Large\" />\n</RadioGroup>",
@@ -1729,12 +1801,24 @@
       "source": "readme",
       "compilable": true
     },
+    "a42255849b141dd73dff3ced30dfeb8ee519d47ca162bbe07a53959a0ea251c4": {
+      "title": "Offset",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col span={SPAN_HALF} offset={OFFSET_HALF}>\n          <div style={DEMO_BOX_STYLE}>span 6, offset 6</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col span={SPAN_THIRD} offset={OFFSET_SMALL}>\n          <div style={DEMO_BOX_STYLE}>span 4, offset 1</div>\n        </Col>\n        <Col span={SPAN_THIRD} offset={OFFSET_SMALL}>\n          <div style={DEMO_BOX_STYLE}>span 4, offset 1</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "a441ef91fd2695501c12b9a749acb9e33886f02b78b6e77d818f5c11c7a23fe7": {
       "title": "Group With Options",
       "code": "{\n    const [value, setValue] = React.useState<string | number>('email');\n    const handleChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setValue(event.target.value);\n      }\n    };\n\n    return (\n      <RadioGroup\n        value={value}\n        onChange={handleChange}\n        options={[\n          { value: 'email', label: 'Email', description: 'Receive via email' },\n          { value: 'sms', label: 'SMS', description: 'Receive via text message' },\n          { value: 'push', label: 'Push notification', description: 'Receive on your device' },\n        ]}\n      />\n    );\n  }",
       "source": "stories",
       "compilable": true
     },
+    "a4f761e7565b681a7fc266a2d8fa8abea6821b0cdde836710ae297a857a86c19": {
+      "title": "Grid Layout",
+      "code": "<ProForm\n      {...args}\n      rowProps={{ gutter: 16 }}\n      initialValues={{}}\n    >\n      <ProFormText name=\"firstName\" label=\"First Name\" colProps={{ span: 6 }} />\n      <ProFormText name=\"lastName\" label=\"Last Name\" colProps={{ span: 6 }} />\n      <ProFormText name=\"email\" label=\"Email\" colProps={{ span: 6 }} />\n      <ProFormText name=\"phone\" label=\"Phone\" colProps={{ span: 6 }} />\n      <ProFormTextArea name=\"address\" label=\"Address\" colProps={{ span: 12 }} />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
     "a56b698411c5aa0624871fc60a5699dc1b9226f3ce9553b8fc9f1bbe7a3e4be7": {
       "title": "Logo",
       "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{\n      display: 'grid', flexDirection: 'row', gap: 24, flexWrap: 'wrap', gridTemplateColumns: 'repeat(auto-fill, minmax(222px, 1fr))'\n    }}>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logo' />\")}>\n        <Icons {...args} name='logo' />\n        <span>logo</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoWord' />\")}>\n        <Icons {...args} name='logoWord' width={150} height={30} />\n        <span>logoWord</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoNetwork' />\")}>\n        <Icons {...args} name='logoNetwork' width={150} height={30} />\n        <span>logoNetwork</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoWithWords' />\")}>\n        <Icons {...args} name='logoWithWords' width={180} height={36} />\n        <span>logoWithWords</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoWithWords' networkLogo />\")}>\n        <Icons {...args} name='logoWithWords' width={320} height={30} networkLogo />\n        <span>logoWithWordsAndNetwork</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoBg' />\")}>\n        <Icons {...args} name='logoBg' width={56} height={57} />\n        <span>logoBg</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoBeta' />\")}>\n        <Icons {...args} name='logoBeta' width={30} height={9} />\n        <span>logoBeta</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logoWithBeta' />\")}>\n        <Icons {...args} name='logoWithBeta' width={152} height={22} />\n        <span>logoWithBeta</span>\n      </CopyIconBox>\n    </div>;\n  }",
@@ -1789,12 +1873,24 @@
       "source": "readme",
       "compilable": true
     },
+    "aad211d09ce80f06ce3a71874dacf77a849944badd75f6b1b9ac1d4595d1e789": {
+      "title": "Justify",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      {GRID_JUSTIFY_OPTIONS.map(value => (\n        <div key={value}>\n          <p style={DEMO_LABEL_STYLE}>justify: {value}</p>\n          <Row justify={value} gutter={GRID_GUTTER_COMPACT}>\n            <Col span={SPAN_QUARTER}>\n              <div style={DEMO_BOX_STYLE}>1</div>\n            </Col>\n            <Col span={SPAN_QUARTER}>\n              <div style={DEMO_BOX_STYLE}>2</div>\n            </Col>\n          </Row>\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "ab9c2b8dec3865ef9826586aa69c01790a48073272eb97a2006323577fbf2550": {
       "title": "Dashboard Header Layout",
       "code": "<div style={DEMO_PAGE_STYLE}>\n      <Flex\n        gap={GAP_MIDDLE}\n        align={FLEX_ALIGN.center}\n        justify={FLEX_JUSTIFY.spaceBetween}\n        wrap={WRAP_DISABLED}\n        prefixCls={FLEX_PREFIX}\n      >\n        <div style={DEMO_BAR_STYLE}>Brand / Logo</div>\n        <Flex gap={GAP_SMALL} align={FLEX_ALIGN.center}>\n          <div style={DEMO_ITEM_STYLE}>Overview</div>\n          <div style={DEMO_ITEM_STYLE}>Accounts</div>\n          <div style={DEMO_ITEM_STYLE}>Transactions</div>\n        </Flex>\n        <Flex gap={GAP_SMALL} align={FLEX_ALIGN.center}>\n          <div style={DEMO_ITEM_STYLE}>Search</div>\n          <div style={DEMO_ITEM_STYLE}>Notification</div>\n          <div style={DEMO_ITEM_STYLE}>Profile</div>\n        </Flex>\n      </Flex>\n    </div>",
       "source": "stories",
       "compilable": true
     },
+    "aba0160ff1433e8ec47e740639c3fcc345982a27d57e7200952dd2bc7e98f388": {
+      "title": "Typed forms (generics)",
+      "code": "<ProForm.Dependency<CreateUserPayload, 'username' | 'address.city'>\n  name={['username', 'address.city']}\n>\n  {(values) => values['address.city']?.toUpperCase()}\n</ProForm.Dependency>",
+      "source": "readme",
+      "compilable": true
+    },
     "abaf53378348a997d22cd4e9abbef98299cae2f9597be56cb07ed01f22fc9873": {
       "title": "Basic",
       "code": "<ProTable<DemoRecord> rowKey=\"id\" columns={columns} request={mockRequest} pagination={{ pageSize: 10 }} />",
@@ -1933,6 +2029,12 @@
       "source": "readme",
       "compilable": true
     },
+    "b5990026021f4a0cfbac3d0bee608a7ae7c76564e78a068bfc6dd6cedbf985cf": {
+      "title": "Custom Item",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ nickname: '' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProForm.Item\n        name=\"nickname\"\n        label=\"Nickname\"\n        rules={[{ required: true, message: 'Required' }]}\n      >\n        <Input placeholder=\"Bring your own control\" />\n      </ProForm.Item>\n      <ProFormText name=\"email\" label=\"Email\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
     "b5ac338b8dae79ebaa6977ba835eec80689422de45f275287959a9a88f1ecce7": {
       "title": "Usage",
       "code": "<Select\n  label=\"Currency\"\n  placeholder=\"Select currency\"\n  options={[\n    { label: 'USD', value: 'USD' },\n    { label: 'EUR', value: 'EUR', disabled: true },\n  ]}\n  onChange={(value, option) => console.log(value, option)}\n/>",
@@ -2029,6 +2131,12 @@
       "source": "stories",
       "compilable": false
     },
+    "bde1cfac6cd9e79abd8a588ca4513007cd6469937fb2c18b39021f44a28134b7": {
+      "title": "Grid Responsive",
+      "code": "<ProForm\n      {...args}\n      grid\n      rowProps={{ gutter: 16 }}\n      initialValues={{}}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText\n        name=\"firstName\"\n        label=\"First Name\"\n        colProps={{ span: 3, md: 6, sm: 12 }}\n      />\n      <ProFormText\n        name=\"lastName\"\n        label=\"Last Name\"\n        colProps={{ span: 3, md: 6, sm: 12 }}\n      />\n      <ProFormText name=\"email\" label=\"Email\" colProps={{ span: 3, md: 6, sm: 12 }} />\n      <ProFormText name=\"phone\" label=\"Phone\" colProps={{ span: 3, md: 6, sm: 12 }} />\n      <ProFormTextArea name=\"address\" label=\"Address\" colProps={{ span: 12 }} />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
     "bfa365023d672d8f94c08d4bf7dba03404964ed3489949e44748853da10be22b": {
       "title": "Dialog Form Story",
       "code": "<DialogForm\n      {...args}\n      title=\"Create User\"\n      trigger={<Button color=\"primary\">Open Dialog Form</Button>}\n      onFinish={async (values) => {\n        alert(JSON.stringify(values, null, 2));\n      }}\n    >\n      <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n      <ProFormText name=\"email\" label=\"Email\" rules={[{ required: true }]} />\n      <ProFormSwitch name=\"active\" label=\"Active\" />\n    </DialogForm>",
@@ -2131,6 +2239,12 @@
       "source": "stories",
       "compilable": false
     },
+    "c71a7dffc772a7bab75e4c0e65062753a8527d613df86631bfff9aa0e99ea28b": {
+      "title": "ProForm.List Props",
+      "code": "interface Member { name: string; enabled: boolean }\n\n<ProForm.List<Member> name=\"members\">\n  {(fields, action) => {\n    action.add({ name: 'Ada', enabled: true });\n    const first = action.get(0);   // Member | undefined\n    const list = action.getList(); // Member[]\n    return fields.map((field) => (\n      <ProForm.Text key={field.key} name={`${field.name}.name`} />\n    ));\n  }}\n</ProForm.List>",
+      "source": "readme",
+      "compilable": true
+    },
     "c7adce2c978836debb618dc91c44c12df9f50836e6ff9994fe3822dd48caef5a": {
       "title": "Nav (flat / grouped navigation)",
       "code": "<Nav\n  items={[\n    {\n      key: 'group-accounts',\n      label: 'Accounts',\n      icon: 'wallet',\n      children: [\n        { key: 'checking', label: 'Checking', active: true },\n        { key: 'savings', label: 'Savings' },\n      ],\n    },\n    { key: 'settings', label: 'Settings' },\n  ]}\n/>",
@@ -2239,6 +2353,12 @@
       "source": "readme",
       "compilable": true
     },
+    "d0d6d084a06b00746d89e17b1ebf4562e80c7210150ba0b8f6631c5f03a5eb63": {
+      "title": "Rtl",
+      "code": "<div dir=\"rtl\" style={DEMO_SECTION_STYLE}>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col span={SPAN_THIRD} offset={OFFSET_SMALL}>\n          <div style={DEMO_BOX_STYLE}>offset 1 (from the right)</div>\n        </Col>\n        <Col span={SPAN_THIRD}>\n          <div style={DEMO_BOX_STYLE}>next</div>\n        </Col>\n      </Row>\n      <Row gutter={GRID_GUTTER_COMPACT}>\n        <Col span={SPAN_HALF} push={PUSH_HALF}>\n          <div style={DEMO_BOX_STYLE}>pushed</div>\n        </Col>\n        <Col span={SPAN_HALF} pull={PULL_HALF}>\n          <div style={DEMO_BOX_STYLE}>pulled</div>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "d17ae919d30d1b43236c52018609c72e725c0e22e47938fa2bed04cae70b2542": {
       "title": "Usage",
       "code": "<Tag label=\"Active\" color=\"success\" />\n<Tag label=\"Warning\" color=\"warning\" icon=\"add\" removable onRemove={() => {}} />\n<Tag label=\"Medium\" size=\"medium\" color=\"recommended\" />\n<Tag label=\"Small\" size=\"small\" color=\"negative\" />",
@@ -2257,12 +2377,24 @@
       "source": "stories",
       "compilable": false
     },
+    "d5369ef44077dbcf96179383100ab2803515743fec525cd9038c16b98537baa8": {
+      "title": "Async Request",
+      "code": "{\n    const [userId, setUserId] = useState(1);\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n        <div style={{ display: 'flex', gap: 8 }}>\n          <Button color={userId === 1 ? 'primary' : 'grey'} onClick={() => setUserId(1)}>\n            User 1\n          </Button>\n          <Button color={userId === 2 ? 'primary' : 'grey'} onClick={() => setUserId(2)}>\n            User 2\n          </Button>\n        </div>\n        <ProForm\n          {...args}\n          params={{ userId }}\n          request={async (params) => {\n            await new Promise((r) => setTimeout(r, 1000));\n            const data: Record<number, Record<string, any>> = {\n              1: { name: 'Alice', email: 'alice@example.com' },\n              2: { name: 'Bob', email: 'bob@example.com' },\n            };\n            return data[(params as { userId: number })?.userId] || {};\n          }}\n        >\n          <ProFormText name=\"name\" label=\"Name\" />\n          <ProFormText name=\"email\" label=\"Email\" />\n        </ProForm>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
     "d59cf6cbe1b9a6cd4f989c2114ed6f88b58903941b2e534a11b7c7ec938035f3": {
       "title": "Polling",
       "code": "<ProTable<DemoRecord> rowKey=\"id\" columns={columns} request={mockRequest} polling={5000} pagination={{ pageSize: 10 }} />",
       "source": "stories",
       "compilable": true
     },
+    "d6965745af06852a81359a3c4705cf8186acb400f765e3f1eb95f8184c09ae58": {
+      "title": "Form Instance",
+      "code": "{\n    const formRef = React.useRef<ProFormFormInstance | undefined>(undefined);\n\n    const handleValidate = () => {\n      const inst = formRef.current;\n      if (!inst) return;\n      Promise.resolve(inst.validateFields())\n        .then(() => alert('All fields valid'))\n        .catch(() => alert('Validation failed — see field errors'));\n    };\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>\n          <Button\n            color=\"secondary\"\n            size=\"small\"\n            onClick={() =>\n              formRef.current?.setFieldsValue({ name: 'Alice', email: 'alice@example.com' })\n            }\n          >\n            Fill\n          </Button>\n          <Button color=\"secondary\" size=\"small\" onClick={() => formRef.current?.resetFields()}>\n            Reset\n          </Button>\n          <Button color=\"secondary\" size=\"small\" onClick={handleValidate}>\n            Validate\n          </Button>\n          <Button\n            color=\"secondary\"\n            size=\"small\"\n            onClick={() => alert(JSON.stringify(formRef.current?.getFieldsValue(), null, 2))}\n          >\n            Read values\n          </Button>\n          <Button color=\"primary\" size=\"small\" onClick={() => formRef.current?.submitForm()}>\n            Submit\n          </Button>\n        </div>\n        <ProForm\n          {...args}\n          formRef={formRef as React.MutableRefObject<ProFormFormInstance>}\n          submitter={false}\n          initialValues={{ name: '', email: '' }}\n          onFinish={(values) => alert('Submitted: ' + JSON.stringify(values, null, 2))}\n        >\n          <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n          <ProFormText\n            name=\"email\"\n            label=\"Email\"\n            rules={[{ required: true }, { type: 'email', message: 'Invalid email' }]}\n          />\n        </ProForm>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
     "d85ceae6b6d298d1080aa6deb8853caf2818436e1ea75064e79bc43b28cc3223": {
       "title": "Import",
       "code": "import { ResizeObserver, useResizeObserver } from '@1money/component-ui';\n// or\nimport { ResizeObserver, Collection, useResizeObserver } from '@1money/component-ui/ResizeObserver';",
@@ -2323,12 +2455,6 @@
       "source": "stories",
       "compilable": false
     },
-    "dbe5994cff8f6c4f3635681f94133b647911651dcbd137756971ec6c7ff898f9": {
-      "title": "Primary",
-      "code": "<Grid {...args}>\n      <Grid.Col span={SPAN_THIRD}><div style={DEMO_BOX_STYLE}>4</div></Grid.Col>\n      <Grid.Col span={SPAN_THIRD}><div style={DEMO_BOX_STYLE}>4</div></Grid.Col>\n      <Grid.Col span={SPAN_THIRD}><div style={DEMO_BOX_STYLE}>4</div></Grid.Col>\n    </Grid>",
-      "source": "stories",
-      "compilable": false
-    },
     "dc01398c0ec62b3b260632c8c528234ca38fcf7b153be444936a2dd5cf7ffcc0": {
       "title": "All Variants",
       "code": "<div style={stackStyle}>\n      <Alert\n        {...args}\n        status=\"info\"\n        title=\"Sync in progress\"\n        body=\"Large uploads may take a few more seconds to appear everywhere.\"\n        link={{ label: 'See sync status', onClick: fn() }}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        status=\"success\"\n        title=\"Verification complete\"\n        body=\"Your account passed the latest security checks.\"\n        link={{ label: 'Open audit log', onClick: fn() }}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        status=\"warning\"\n        title=\"Review payout details\"\n        body=\"One recipient is missing bank metadata and may fail on submission.\"\n        link={{ label: 'Fix recipient', onClick: fn() }}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        status=\"error\"\n        title=\"Transfer failed\"\n        body=\"The quoted rate expired before settlement. Refresh and try again.\"\n        link={{ label: 'Retry transfer', onClick: fn() }}\n        closable={false}\n      />\n    </div>",
@@ -2347,6 +2473,12 @@
       "source": "stories",
       "compilable": true
     },
+    "dd276ec40a68db70b9c67d52adaacba880f9c1f3c39d293d57b769890d92a448": {
+      "title": "Order",
+      "code": "<Row gutter={GRID_GUTTER_COMPACT}>\n      <Col span={SPAN_THIRD} order={ORDER_THIRD}>\n        <div style={DEMO_BOX_STYLE}>DOM 1 / order 3</div>\n      </Col>\n      <Col span={SPAN_THIRD} order={ORDER_SECOND}>\n        <div style={DEMO_BOX_STYLE}>DOM 2 / order 2</div>\n      </Col>\n      <Col span={SPAN_THIRD} order={ORDER_FIRST}>\n        <div style={DEMO_BOX_STYLE}>DOM 3 / order 1</div>\n      </Col>\n    </Row>",
+      "source": "stories",
+      "compilable": true
+    },
     "ddba2f9ed531e8d41eb802983744dee6f9a543308278efec1b7cbab638caf0e5": {
       "title": "Loading State",
       "code": "<ProForm {...args} initialValues={{ name: 'Loading...' }}>\n      <ProFormText name=\"name\" label=\"Name\" />\n      <ProFormText name=\"email\" label=\"Email\" />\n    </ProForm>",
@@ -2407,6 +2539,12 @@
       "source": "stories",
       "compilable": false
     },
+    "e163c095234bf8e498a14071e955061aeaf911e0efdd0052b6b1940ce57c97d9": {
+      "title": "Form Layout Patterns",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_FULL}>\n          <div style={DEMO_HEADER_BLOCK_STYLE}>Form Header</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_QUARTER} sm={SPAN_FULL}>\n          <div style={DEMO_FORM_LABEL_STYLE}>Label: Company Name</div>\n        </Col>\n        <Col span={SPAN_NINE} sm={SPAN_FULL}>\n          <div style={DEMO_FORM_FIELD_STYLE}>Input Field (span 9)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_QUARTER} sm={SPAN_FULL}>\n          <div style={DEMO_FORM_LABEL_STYLE}>Label: Email</div>\n        </Col>\n        <Col span={SPAN_NINE} sm={SPAN_FULL}>\n          <div style={DEMO_FORM_FIELD_STYLE}>Input Field (span 9)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_NINE} offset={OFFSET_THIRD}>\n          <div style={DEMO_FORM_FIELD_STYLE}>Inline Help / Validation Message (offset 3)</div>\n        </Col>\n      </Row>\n\n      <Row gutter={GRID_GUTTER_SPACED}>\n        <Col span={SPAN_NINE} offset={OFFSET_THIRD}>\n          <Row gutter={GRID_GUTTER_COMPACT} justify={GRID_JUSTIFY.end}>\n            <Col span={SPAN_QUARTER} md={SPAN_THIRD}>\n              <div style={DEMO_FORM_ACTION_STYLE}>Secondary Action</div>\n            </Col>\n            <Col span={SPAN_QUARTER} md={SPAN_THIRD}>\n              <div style={DEMO_FORM_ACTION_STYLE}>Primary Action</div>\n            </Col>\n          </Row>\n        </Col>\n      </Row>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "e3b3197749176ad9a73173f5d1928f15b52b030d41a28e61ef40deaabbc9a554": {
       "title": "Usage",
       "code": "<Step\n  items={[\n    { key: 'start', title: 'Start', description: 'Create the request', status: 'completed' },\n    { key: 'review', title: 'Review', tag: { label: 'Pending' } },\n    { key: 'done', title: 'Complete' },\n  ]}\n/>",
@@ -2449,6 +2587,12 @@
       "source": "stories",
       "compilable": false
     },
+    "e81d400d6a0f0bda06097d7c51b429dfa7fd16d2ad7ccba32265402b756c22bb": {
+      "title": "Kitchen Sink",
+      "code": "<ProForm\n      {...args}\n      grid\n      rowProps={{ gutter: 16 }}\n      initialValues={{\n        name: '',\n        email: '',\n        bio: '',\n        newsletter: false,\n        darkMode: true,\n        items: [{ title: 'Item 1' }],\n      }}\n      submitter={{ submitText: 'Create', resetText: 'Clear All' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText\n        name=\"name\"\n        label=\"Full Name\"\n        colProps={{ span: 6 }}\n        rules={[{ required: true }]}\n      />\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        colProps={{ span: 6 }}\n        rules={[{ required: true }]}\n      />\n      <ProFormTextArea\n        name=\"bio\"\n        label=\"Biography\"\n        colProps={{ span: 12 }}\n      />\n      <ProFormCheckbox name=\"newsletter\" label=\"Subscribe to newsletter\" colProps={{ span: 6 }} />\n      <ProFormSwitch name=\"darkMode\" label=\"Dark Mode\" colProps={{ span: 6 }} />\n      <ProFormDependency name={['newsletter']}>\n        {({ newsletter }) =>\n          newsletter ? (\n            <ProFormText\n              name=\"frequency\"\n              label=\"Email Frequency\"\n              placeholder=\"daily / weekly / monthly\"\n              colProps={{ span: 12 }}\n            />\n          ) : null\n        }\n      </ProFormDependency>\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
     "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>",
@@ -2491,6 +2635,12 @@
       "source": "readme",
       "compilable": true
     },
+    "ecb3533d4ee872b4622fda0666553a144f5e4e9dc6b2721213f921fd0d2757da": {
+      "title": "Alignment",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      {GRID_ALIGN_OPTIONS.map(value => (\n        <div key={value}>\n          <p style={DEMO_LABEL_STYLE}>align: {value}</p>\n          <Row align={value} gutter={GRID_GUTTER_COMPACT}>\n            <Col span={SPAN_THIRD}>\n              <div style={DEMO_BOX_TALL_STYLE}>tall</div>\n            </Col>\n            <Col span={SPAN_THIRD}>\n              <div style={DEMO_BOX_STYLE}>short</div>\n            </Col>\n            <Col span={SPAN_THIRD}>\n              <div style={DEMO_BOX_FILL_STYLE}>fill</div>\n            </Col>\n          </Row>\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
     "ed5aa33f8e734dad460aa9b2a7c6fc0690efc9cda3b0854c642d59b2bbf55870": {
       "title": "Illustrations",
       "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusChecked' />\")}>\n        <Icons {...args} name='illusChecked' />\n        <span>illusChecked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusEmailError' />\")}>\n        <Icons {...args} name='illusEmailError' />\n        <span>illusEmailError</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusLinkExpired' />\")}>\n        <Icons {...args} name='illusLinkExpired' />\n        <span>illusLinkExpired</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illus2FA' />\")}>\n        <Icons {...args} name='illus2FA' />\n        <span>illus2FA</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusLocked' />\")}>\n        <Icons {...args} name='illusLocked' />\n        <span>illusLocked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusError' />\")}>\n        <Icons {...args} name='illusError' />\n        <span>illusError</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusRegionNotSupported' />\")}>\n        <Icons {...args} name='illusRegionNotSupported' />\n        <span>illusRegionNotSupported</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusID' />\")}>\n        <Icons {...args} name='illusID' />\n        <span>illusID</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusVerification' />\")}>\n        <Icons {...args} name='illusVerification' />\n        <span>illusVerification</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusPending' />\")}>\n        <Icons {...args} name='illusPending' color='#F4C600' />\n        <span>illusPending</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusPasskey' />\")}>\n        <Icons {...args} name='illusPasskey' />\n        <span>illusPasskey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusAddAccount' />\")}>\n        <Icons {...args} name='illusAddAccount' />\n        <span>illusAddAccount</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusRewards' />\")}>\n        <Icons {...args} name='illusRewards' />\n        <span>illusRewards</span>\n      </CopyIconBox>\n    </div>;\n  }",
@@ -2539,6 +2689,12 @@
       "source": "stories",
       "compilable": true
     },
+    "f21609ac4b7aeed97ece902670a14304b9156937eeca3ab4edf884ea4a8289aa": {
+      "title": "Responsive Justify",
+      "code": "<Row gutter={GRID_GUTTER} justify={JUSTIFY_RESPONSIVE}>\n      <Col span={SPAN_QUARTER}>\n        <div style={DEMO_BOX_STYLE}>1</div>\n      </Col>\n      <Col span={SPAN_QUARTER}>\n        <div style={DEMO_BOX_STYLE}>2</div>\n      </Col>\n    </Row>",
+      "source": "stories",
+      "compilable": true
+    },
     "f2c3b9fe0a35d0f3e87ed98754d67b66bdf140128496a16d3ebc5ba4819068cc": {
       "title": "All Variants",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Default</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n          <Radio label=\"Unchecked\" />\n          <Radio label=\"Checked\" checked />\n          <Radio label=\"Disabled unchecked\" disabled />\n          <Radio label=\"Disabled checked\" checked disabled />\n        </div>\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>With Description</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n          <Radio label=\"Unchecked\" description=\"Helper text\" />\n          <Radio label=\"Checked\" description=\"Helper text\" checked />\n          <Radio\n            label=\"Disabled unchecked\"\n            description=\"Helper text\"\n            disabled\n          />\n          <Radio\n            label=\"Disabled checked\"\n            description=\"Helper text\"\n            checked\n            disabled\n          />\n        </div>\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Label Placement: Right</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n          <Radio label=\"Unchecked\" labelPlacement=\"right\" />\n          <Radio label=\"Checked\" labelPlacement=\"right\" checked />\n          <Radio\n            label=\"With description\"\n            description=\"Helper text\"\n            labelPlacement=\"right\"\n          />\n        </div>\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Cell</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n          <Radio\n            checked\n            variant=\"cell\"\n            size=\"large\"\n            alignment=\"left\"\n            icon=\"swift\"\n            label=\"Wire transfer\"\n            description=\"Receive via SWIFT\"\n            style={{ width: 320 }}\n          />\n          <Radio\n            variant=\"cell\"\n            size=\"medium\"\n            alignment=\"left\"\n            icon=\"usd\"\n            label=\"USD1\"\n            style={{ width: 180 }}\n          />\n          <Radio\n            checked\n            variant=\"cell\"\n            size=\"large\"\n            alignment=\"center\"\n            icon=\"language\"\n            tag=\"Popular\"\n            label=\"Global account\"\n            description=\"Use for international settlement\"\n            style={{ width: 220 }}\n          />\n        </div>\n      </div>\n    </div>",
@@ -2671,12 +2827,6 @@
       "source": "readme",
       "compilable": true
     },
-    "fcf58f34ec54a1feebe1b6bcd494ced5bc067fe18fe4faea458801a538a151fb": {
-      "title": "Grid Responsive",
-      "code": "<ProForm\n      {...args}\n      grid\n      rowProps={{ gutter: 16 }}\n      initialValues={{}}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText\n        name=\"firstName\"\n        label=\"First Name\"\n        colProps={{ span: 12, sm: 12, md: 8, lg: 6 }}\n      />\n      <ProFormText\n        name=\"lastName\"\n        label=\"Last Name\"\n        colProps={{ span: 12, sm: 12, md: 8, lg: 6 }}\n      />\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        colProps={{ span: 24, sm: 24, md: 8, lg: 6 }}\n      />\n      <ProFormText\n        name=\"phone\"\n        label=\"Phone\"\n        colProps={{ span: 24, sm: 12, md: 12, lg: 6 }}\n      />\n      <ProFormTextArea\n        name=\"address\"\n        label=\"Address\"\n        colProps={{ span: 24 }}\n      />\n    </ProForm>",
-      "source": "stories",
-      "compilable": false
-    },
     "fd2a2c6d3a51c13f2b7674054f0afc8f88905362641c5a16d2c84fcaffff1d7a": {
       "title": "Group Horizontal",
       "code": "{\n    const [value, setValue] = React.useState<string | number>('sm');\n    const handleChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setValue(event.target.value);\n      }\n    };\n\n    return (\n      <RadioGroup value={value} onChange={handleChange} direction=\"horizontal\">\n        <Radio value=\"sm\" label=\"Small\" />\n        <Radio value=\"md\" label=\"Medium\" />\n        <Radio value=\"lg\" label=\"Large\" />\n      </RadioGroup>\n    );\n  }",