@1money/component-ui 0.0.77 → 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';",
@@ -613,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  }",
@@ -679,12 +679,24 @@
       "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>",
@@ -823,12 +835,6 @@
       "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>",
@@ -1015,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>",
@@ -1105,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>",
@@ -1369,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>",
@@ -1483,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/>",
@@ -1567,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';",
@@ -1657,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>",
@@ -1729,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>",
@@ -1747,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  }",
@@ -1807,6 +1873,12 @@
       "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>",
@@ -1957,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/>",
@@ -2053,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>",
@@ -2269,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\" />",
@@ -2299,6 +2389,12 @@
       "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';",
@@ -2359,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>",
@@ -2383,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>",
@@ -2443,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/>",
@@ -2485,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>",
@@ -2527,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  }",
@@ -2575,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>",
@@ -2707,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  }",