@1money/component-ui 0.0.23 → 0.0.25

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

@@ -0,0 +1,2651 @@
+{
+  "schemaVersion": "1",
+  "examples": {
+    "002615fee8d755dab7889ab4b878d7d6b4e25024bba2b7cae8f9e4d86fc61cb4": {
+      "title": "Table",
+      "code": "{\n    const contentCount = 3;\n    const headerStyle: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: 16,\n    };\n    const rowStyle: React.CSSProperties = {\n      ...headerStyle,\n    };\n    return (\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 16,\n          border: '1px solid #e5e7eb',\n          borderRadius: 24,\n          backgroundColor: '#f9fafb',\n          padding: 24,\n          width: '100%',\n        }}\n      >\n        <div style={headerStyle}>\n          {Array.from({ length: 6 }).map((_, i) => (\n            <Skeleton key={i} width=\"15%\" height=\"16px\" borderRadius=\"8px\" animation={args.animation} />\n          ))}\n        </div>\n        <div style={{ width: '100%', height: 1, backgroundColor: '#e5e7eb' }} />\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n          {Array.from({ length: contentCount }).map((_, i) => (\n            <div key={i} style={rowStyle}>\n              {Array.from({ length: 6 }).map((_, j) => (\n                <Skeleton key={j} width=\"15%\" height=\"24px\" borderRadius=\"12px\" animation={args.animation} />\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "00374992c219d7042d32ee0297713e87c7da0a14563aa91ec24246b11ddd8462": {
+      "title": "Hover Trigger",
+      "code": "<Dropdown\n      {...args}\n      trigger=\"hover\"\n      hoverDelay={{ open: 100, close: 200 }}\n      content={<MenuContent />}\n    >\n      <Button>Hover me</Button>\n    </Dropdown>",
+      "source": "stories",
+      "compilable": false
+    },
+    "00ebb02ec69a1e88dc08dd1c08594a0cab9d86855da2de7eca6b118c6f886dc7": {
+      "title": "Cell Variant",
+      "code": "<Radio\n  checked\n  variant=\"cell\"\n  size=\"large\"\n  alignment=\"center\"\n  icon=\"language\"\n  tag=\"Popular\"\n  label=\"Global account\"\n  description=\"International settlement\"\n/>\n\n<RadioGroup\n  value={selected}\n  variant=\"cell\"\n  size=\"large\"\n  alignment=\"left\"\n  direction=\"horizontal\"\n  onChange={handleChange}\n  options={[\n    { value: 'swift', label: 'SWIFT', description: 'Receive via bank rails' },\n    {\n      value: 'global',\n      label: 'Global account',\n      description: 'International settlement',\n      icon: 'language',\n    },\n  ]}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "018f2394328d31f76d39fcd543c941becb287828707ce2f98959543360d2a209": {
+      "title": "With Text",
+      "code": "<Divider>Section Title</Divider>\n<Divider orientation=\"left\">Left Title</Divider>\n<Divider orientation=\"right\">Right Title</Divider>",
+      "source": "readme",
+      "compilable": true
+    },
+    "01a336a327f3b1450173b3c03356bd341f077f546ef4a84c6861881c6f62d89e": {
+      "title": "Sizes",
+      "code": "<div style={rowStyle}>\n      {BUTTON_SIZES.map((size) => (\n        <Button {...args} key={size} size={size}>\n          {size}\n        </Button>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "01e3e9258a1bda78a667e40406fafe7b7cf89b5e3354d2035d37e360422aab36": {
+      "title": "RadioGroup With Children",
+      "code": "const [selected, setSelected] = useState<string | number>('a');\n\n<RadioGroup\n  value={selected}\n  onChange={(event) => {\n    if (event.target.value !== undefined) {\n      setSelected(event.target.value);\n    }\n  }}\n>\n  <Radio value=\"a\" label=\"Option A\" />\n  <Radio value=\"b\" label=\"Option B\" />\n  <Radio value=\"c\" label=\"Option C\" />\n</RadioGroup>",
+      "source": "readme",
+      "compilable": true
+    },
+    "02eb41ce0715973b9fe2fb88cf59851f0fa8962318df7f86a9405a50cfe907b2": {
+      "title": "Canonical usage",
+      "code": "import { Checkbox } from '@1money/components-ui';\n// or\nimport { Checkbox } from '@1money/components-ui/Checkbox';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "034773bdaca67ca0d5a236ca92c3d84403ca823cb8249eacea2414545523ab3d": {
+      "title": "Grouped",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <Select\n        {...args}\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "03ae4647e3bd8aa48fde505061070eb0425296d0b86b97f0b240c36897efc68f": {
+      "title": "Split",
+      "code": "<Space split={<span>|</span>} size={SPACE_SIZE.large}>\n      <span>Alpha</span>\n      <span>Beta</span>\n      <span>Gamma</span>\n    </Space>",
+      "source": "stories",
+      "compilable": true
+    },
+    "03d4e0cef5922bd9d1c1934b5b1c8af440c30f7e1ae1f7f31d755dd518639b6c": {
+      "title": "Canonical usage",
+      "code": "import type { DialogFormProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "03db5f06b9d053c3b514bf4bd85fdb3c21604f60d3b598d6de714a98a3a17713": {
+      "title": "Usage",
+      "code": "<Slider\n  label=\"Price\"\n  description=\"Set your budget\"\n  valuePrefix=\"$\"\n  defaultValue={40}\n  min={0}\n  max={100}\n  onChange={(value) => console.log(value)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "03fa3fcdf3577c4278551ee032cd36a6b3f43a21aa6c2f807a57da22f9ac48dd": {
+      "title": "Field Request",
+      "code": "<ProForm\n      {...args}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormSelect\n        name=\"user\"\n        label=\"User (async loaded)\"\n        request={async () => {\n          await new Promise((r) => setTimeout(r, 800));\n          return [\n            { label: 'Alice', value: 'alice' },\n            { label: 'Bob', value: 'bob' },\n            { label: 'Charlie', value: 'charlie' },\n          ];\n        }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "043dd268dff2f5670f3ab2c4c19161fec1e9322d74c3151a062126f0e295a632": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormItemProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "047c2f9b4e0f29aa1bfa1d29f631e05af609d686dc8ddcf1ab8a44f3838c16a5": {
+      "title": "Default",
+      "code": "<DashboardTemplate />",
+      "source": "stories",
+      "compilable": true
+    },
+    "04e9dc127df402e09fdd97b4e5a8113b98bd6e4cc73a657077883081e9a0b8f2": {
+      "title": "Canonical usage",
+      "code": "import type { StepStatus } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "05717fb84522993ea86a1295a654c812fe4de71b24eacb8657ec875518efde6a": {
+      "title": "Usage",
+      "code": "<Alert\n  status=\"info\"\n  title=\"Information\"\n  body=\"This is an informational message.\"\n  link={{ label: 'Learn more', href: '/docs' }}\n  onClose={() => console.log('closed')}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "069beba30456db7a61ea657851e695df2a417f06c69fdf677a0d60c1a7af3de9": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormValueType } from '@1money/component-ui';",
+      "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>",
+      "source": "stories",
+      "compilable": true
+    },
+    "06fe88ad0e8ab0eb5303e6d550234af6433a3b3e5f18fcddba351e64fab26e13": {
+      "title": "Canonical usage",
+      "code": "import type { SelectOptionValue } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "0716e5e5fffc542e7b028181c93a5655fb3738281657fc43abb5eb99a95b3e8b": {
+      "title": "Custom Icon",
+      "code": "<Alert\n      {...args}\n      status=\"info\"\n      title=\"Manual review queued\"\n      body=\"This alert uses a custom icon to reflect a workflow-specific state instead of the default status glyph.\"\n      icon={<Icons name=\"notificationWarning\" size={32} />}\n      link={{ label: 'Open queue', onClick: fn() }}\n    />",
+      "source": "stories",
+      "compilable": false
+    },
+    "07375b5c56ac79927802e4336d7ae0810a8b408066590d4011ab6dca04412897": {
+      "title": "Mask",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n      {/* ── Common Masks ── */}\n      <div>\n        <h3 style={{ margin: '0 0 16px' }}>Common Masks</h3>\n        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Phone</p>\n            <Input.Mask\n              label=\"Phone\"\n              mask=\"(99) 99999-9999\"\n            />\n          </div>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>CPF</p>\n            <Input.Mask\n              label=\"CPF\"\n              mask=\"999.999.999-99\"\n            />\n          </div>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>CNPJ</p>\n            <Input.Mask\n              label=\"CNPJ\"\n              mask=\"99.999.999/9999-99\"\n            />\n          </div>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Date</p>\n            <Input.Mask\n              label=\"Date\"\n              mask=\"99/99/9999\"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* ── States ── */}\n      <div>\n        <h3 style={{ margin: '0 0 16px' }}>States</h3>\n        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Filled</p>\n            <Input.Mask\n              label=\"CPF\"\n              mask=\"999.999.999-99\"\n              defaultValue=\"12345678901\"\n            />\n          </div>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Error</p>\n            <Input.Mask\n              label=\"CPF\"\n              mask=\"999.999.999-99\"\n              status=\"error\"\n              feedback=\"Invalid CPF\"\n              feedbackIcon={<Icons name=\"error\" size={16} />}\n              defaultValue=\"123\"\n            />\n          </div>\n          <div style={{ width: 310 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Disabled</p>\n            <Input.Mask\n              label=\"CPF\"\n              mask=\"999.999.999-99\"\n              disabled\n              defaultValue=\"12345678901\"\n            />\n          </div>\n        </div>\n      </div>\n\n    </div>",
+      "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
+    },
+    "079ea5a6232196a5bc2822e0a2466a32b0fbfa7bfa8b3a800a5e3d65b6226e42": {
+      "title": "Canonical usage",
+      "code": "import type { ProgressColor } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "07a4236cc3c96aa1a14a8ab647fef5e00704b05042314ec5815451b3dd3b5ba0": {
+      "title": "Usage",
+      "code": "<Typography.Display size=\"lg\">Account Overview</Typography.Display>\n\n<Typography.Headline size=\"md\">Settlement Timeline</Typography.Headline>\n\n<Typography.Title size=\"sm\" strong>\n  Customer Details\n</Typography.Title>\n\n<Typography.Body size=\"md\" as=\"p\">\n  Semantic body copy keeps product text aligned with the shared typography scale.\n</Typography.Body>\n\n<Typography.Body size=\"md\" ellipsis={{ tooltip: true }} copyable>\n  0x814f0d3a9b2c7e1f5d6a8b4c3e2f1a0d9c8b7a6f749f\n</Typography.Body>\n\n<Typography.Label size=\"sm\" htmlFor=\"email\">\n  Email\n</Typography.Label>\n\n<Typography.Link size=\"md\" href=\"https://ant.design/components/typography/\" target=\"_blank\">\n  Typography reference\n</Typography.Link>",
+      "source": "readme",
+      "compilable": true
+    },
+    "0914d8f9442c252fe06be76431695e7673a02bd475b9bad034e5bc5dedf021ff": {
+      "title": "Canonical usage",
+      "code": "import type { TriggerContent } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "0a72ee3d63ec85bf631eafb8407f424d82c2c3d9da1437fb18801bec174133af": {
+      "title": "Five Items",
+      "code": "<Segment\n      items={[\n        { value: 'tab1', label: 'Label' },\n        { value: 'tab2', label: 'Label' },\n        { value: 'tab3', label: 'Label' },\n        { value: 'tab4', label: 'Label' },\n        { value: 'tab5', label: 'Label' },\n      ]}\n    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "0c0afbe2548cd54cf225af79ea0be88e179d1592672834759ce9d5c4dd0d7476": {
+      "title": "Canonical usage",
+      "code": "import type { ValidateTrigger } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "0c268f0ec6b90f7352970d3db858c53364c60f2321af3c578568fc93082425bb": {
+      "title": "Canonical usage",
+      "code": "import { Tabs } from '@1money/components-ui';\n// or\nimport { Tabs } from '@1money/components-ui/Tabs';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "0c7c04366337519cd94b38f5358dfa8f9eec80c8f289ba172def5f00e1a89ba3": {
+      "title": "Date Picker Story",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ birthday: null, startDate: null }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormDatePicker\n        name=\"birthday\"\n        label=\"Birthday\"\n        fieldProps={{ dateFormat: 'yy-mm-dd', showIcon: true }}\n      />\n      <ProFormDatePicker\n        name=\"startDate\"\n        label=\"Start Date\"\n        fieldProps={{ dateFormat: 'mm/dd/yy', showButtonBar: true }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "0caa8e66489f540fb7f7969ee8d11091048124739a3d26ddcbc22e6ba567048f": {
+      "title": "No Submitter",
+      "code": "<ProForm {...args} submitter={false}>\n      <ProFormText name=\"search\" label=\"Search\" placeholder=\"Type to search...\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "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/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "0eccd89d4848e5f239f204a25e0a5afbc08ea70a21eb5403bc608a3da6da85ad": {
+      "title": "Canonical usage",
+      "code": "<Drawer />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "0f561819e24a9b6521e16b4a9238c0250741795e0996d3dca59f7fb9a111ddf4": {
+      "title": "Canonical usage",
+      "code": "<ProFormText />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "0f978c9e8cebacc672d00e70889ae1fb18b0d5a39b29dc3e53b0d53ab04aedf1": {
+      "title": "Canonical usage",
+      "code": "import type { PaginationItem } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "11f60c018746e51bd823c5ce8039341a2200f2e132e62e58f99f23cfe2166cbd": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      {PROGRESS_COLORS.map(color => (\n        <div key={color} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <h3 style={{ margin: 0 }}>{color}</h3>\n          {PROGRESS_PLACEMENTS.map(placement => (\n            <div key={`${color}-${placement}`} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n              <h4 style={{ margin: 0 }}>{placement}</h4>\n              {PROGRESS_STATES.map(state => (\n                <Progress\n                  {...args}\n                  key={`${color}-${placement}-${state}`}\n                  color={color}\n                  placement={placement}\n                  state={state}\n                  percent={state === 'success' ? 100 : state === 'not-started' ? 0 : 25}\n                  feedback={state === 'error' ? 'Feedback' : undefined}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "123291e7b1b33126adc91e8204e4002c37c71a74eb5bfca67a4da71b9aec2f6a": {
+      "title": "Default",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <Select\n        {...args}\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "1238535c7f91f78671738663cda3f3ed6984f0c29a539c190b264b03630e6d69": {
+      "title": "Disabled",
+      "code": "<Dropdown {...args} disabled content={<MenuContent />}>\n      <Button disabled>Disabled</Button>\n    </Dropdown>",
+      "source": "stories",
+      "compilable": false
+    },
+    "124abe44040ddcd13aa6aad8f0dd237bae86b652e64005957c39324a2182b934": {
+      "title": "Import",
+      "code": "import { Typography } from '@1money/components-ui';\n// or\nimport { Typography } from '@1money/components-ui/Typography';",
+      "source": "readme",
+      "compilable": true
+    },
+    "144e248f0e0e1f5a681bdd8625add8d71643d3cca3f40bd840d914b057970d9a": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <div>\n        <p style={{ marginBottom: 8 }}>Default</p>\n        <Copy {...args} contained/>\n      </div>\n      <div>\n        <Copy {...args} contained={false} />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "1549a41755f2d85818188654c648d16f6deea173c67c20999f5d5aa896204817": {
+      "title": "Canonical usage",
+      "code": "<ProFormTextArea />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "159060bf345ad56b198657357005740fb6892291717bb99ada373f0a62cdcdc9": {
+      "title": "Canonical usage",
+      "code": "import type { ProgressProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "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  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "182c2782ef8a0d17a1da002048cb2f2ccd2469370cc302d126d075b4394df24b": {
+      "title": "Canonical usage",
+      "code": "import type { TriggerContentContext } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "1856eecdadbccda4468f63edff75ac60c746187efb7df1f7699540bec7ce4929": {
+      "title": "Canonical usage",
+      "code": "import type { PortalProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "1ad3863a7ccae5d72cf0b223899e03501462831ed16ae711d9f497c103c00008": {
+      "title": "Group Cell Options",
+      "code": "{\n    const [value, setValue] = React.useState<string | number>('swift');\n\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        variant=\"cell\"\n        size=\"large\"\n        alignment=\"left\"\n        direction=\"horizontal\"\n        onChange={handleChange}\n        options={[\n          {\n            value: 'swift',\n            label: 'SWIFT',\n            description: 'Receive via bank rails',\n            icon: 'swift',\n          },\n          {\n            value: 'global',\n            label: 'Global account',\n            description: 'International settlement',\n            icon: 'language',\n          },\n        ]}\n      />\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "1d0cc410e4f667fa13d9ad249ca801acda6fd51fc78c87c3b00209163c48df6b": {
+      "title": "Range Selection",
+      "code": "<Calendar\n  label=\"Date Range\"\n  selectionMode=\"range\"\n  numberOfMonths={2}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "1d55eaab6342218fa931b8a061cfa308bbaa48c4ed6bcd3d40557b5b13b938e9": {
+      "title": "Password",
+      "code": "{\n    const sizes = ['large', 'small'] as const;\n    const valueTypes = ['Placeholder', 'Filled'] as const;\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n        {sizes.map((size) => (\n          <div key={size}>\n            <h3 style={{ margin: '0 0 16px', textTransform: 'capitalize' }}>{size}</h3>\n            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n              {valueTypes.map((vt) => (\n                <div key={`default-${vt}`} style={{ width: 310 }}>\n                  <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                    default / {vt}\n                  </p>\n                  <Input.Password\n                    size={size}\n                    label=\"Password\"\n                    feedback=\"Feedback\"\n                    feedbackIcon={<Icons name=\"info\" size={16} />}\n                    placeholder=\"Enter password\"\n                    defaultValue={vt === 'Filled' ? 'secretpass' : undefined}\n                  />\n                </div>\n              ))}\n              {/* Error */}\n              <div style={{ width: 310 }}>\n                <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>error / Filled</p>\n                <Input.Password\n                  size={size}\n                  status=\"error\"\n                  label=\"Password\"\n                  feedback=\"Password too short\"\n                  feedbackIcon={<Icons name=\"error\" size={16} />}\n                  placeholder=\"Enter password\"\n                  defaultValue=\"123\"\n                />\n              </div>\n              {/* Disabled */}\n              <div style={{ width: 310 }}>\n                <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>disabled / Filled</p>\n                <Input.Password\n                  size={size}\n                  disabled\n                  label=\"Password\"\n                  placeholder=\"Enter password\"\n                  defaultValue=\"secretpass\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "1d6e4664da8b92ef6df17dcaa33fbb89d503e9119ff6b26e08b59365bdcf248f": {
+      "title": "Drawer Form Left",
+      "code": "<DrawerForm\n      {...args}\n      title=\"Settings\"\n      placement=\"left\"\n      width={400}\n      trigger={<Button color=\"secondary\">Open from Left</Button>}\n      onFinish={async (values) => {\n        alert(JSON.stringify(values, null, 2));\n      }}\n    >\n      <ProFormText name=\"theme\" label=\"Theme\" placeholder=\"dark / light\" />\n      <ProFormText name=\"language\" label=\"Language\" placeholder=\"en / zh\" />\n      <ProFormSwitch name=\"notifications\" label=\"Enable Notifications\" />\n    </DrawerForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "1e2ce5743dcd5a069489baf67169280a5ebfc7ed959fc8cb1f7f52f846c1b544": {
+      "title": "Text Variant",
+      "code": "<div style={columnStyle}>\n      {BUTTON_SIZES.map((size) => (\n        <div key={size}>\n          <h3 style={sectionHeaderStyle}>Text - {size}</h3>\n          <div style={rowStyle}>\n            <Button {...args} variant={BUTTON_VARIANT.text} size={size}>\n              Button\n            </Button>\n            <Button {...args} variant={BUTTON_VARIANT.text} size={size} disabled>\n              Disabled\n            </Button>\n            <Button {...args} variant={BUTTON_VARIANT.text} size={size} loading>\n              Loading\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "1eb0a331971caa6d8ea905cd7fb9c8e846ff5dbc535c68ea157133495806f4e7": {
+      "title": "Canonical usage",
+      "code": "import { Navigation } from '@1money/components-ui';\n// or\nimport { Navigation } from '@1money/components-ui/Navigation';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "1ecd90179c2ebd2ed33c0063235f9367b50ed37a7eba1d4c6aa1973033ed554c": {
+      "title": "Multi Select",
+      "code": "{\n    const [selected, setSelected] = useState<string[]>(['Apple', 'Cherry', 'Fig']);\n\n    const toggle = (item: string) => {\n      setSelected((prev) =>\n        prev.includes(item) ? prev.filter((v) => v !== item) : [...prev, item],\n      );\n    };\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 260 }}\n        content={\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n            {selected.length > 0 && (\n              <div style={selectedBarStyle}>\n                <span style={{ fontSize: 14, fontWeight: 500, color: '#131313' }}>\n                  {selected.length} selected\n                </span>\n                <button\n                  type=\"button\"\n                  style={clearAllBtnStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={16} color=\"#ae0000\" />\n                  Clear all\n                </button>\n              </div>\n            )}\n            <div style={{ display: 'flex', flexDirection: 'column' }}>\n              {SIMPLE_ITEMS.map((item) => (\n                <DropdownItem\n                  key={item}\n                  title={item}\n                  selected={selected.includes(item)}\n                  onClick={() => toggle(item)}\n                />\n              ))}\n            </div>\n          </div>\n        }\n      >\n        <Button>\n          {selected.length > 0 ? `${selected.length} selected` : 'Select items'}\n        </Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "216b625401b1ee29a2c8f02427f776e18dd670858e53fd87ea414473832ba9c9": {
+      "title": "With Title",
+      "code": "<div style={ANCHOR_WRAPPER_STYLE}>\n      <button id=\"tooltip-title\">Hover me</button>\n      <Tooltip {...args} anchorSelect=\"#tooltip-title\" />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "2179af6a270bc4891095e10b5a182d62e7767a442d309c3641e1cfea330c5d5f": {
+      "title": "Import",
+      "code": "import { Popconfirm } from '@1money/components-ui';\nimport '@1money/components-ui/index.css';",
+      "source": "readme",
+      "compilable": true
+    },
+    "21e145efeaada4cb2c7e716099dd9261f34d38e9df00905994175c1a5e9aabb5": {
+      "title": "Dynamic Data",
+      "code": "{\n    const [count, setCount] = useState(100);\n    const data = generateData(count);\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12, display: 'flex', gap: 8 }}>\n          <button style={btnStyle} onClick={() => setCount((c) => c + 100)}>\n            Add 100 items ({count} total)\n          </button>\n          <button style={btnStyle} onClick={() => setCount((c) => Math.max(0, c - 100))}>\n            Remove 100 items\n          </button>\n          <button style={btnStyle} onClick={() => setCount(0)}>\n            Clear\n          </button>\n        </div>\n        <div style={containerStyle}>\n          <VirtualList\n            data={data}\n            height={300}\n            itemHeight={30}\n            itemKey=\"id\"\n          >\n            {(item: Item) => (\n              <div style={itemStyle(item.height)}>\n                <span>Item {item.id}</span>\n              </div>\n            )}\n          </VirtualList>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "21eb2cf21cf8e39cfc4a35ce8e3d25f28e8ecc6de0c0dec1707f725f281dc4fa": {
+      "title": "Usage",
+      "code": "<Cell iconStart=\"security\" iconEnd=\"arrowRight\" disabled>\n  Authenticator app\n</Cell>",
+      "source": "readme",
+      "compilable": true
+    },
+    "21fc19a127fa75a33f2fedc609d8be2d2db4e044ec38917a3b2b7d048b68d7d3": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      {LINK_COLORS.map((color) => (\n        <div key={color}>\n          <h3 style={{ marginBottom: 12, textTransform: 'capitalize' }}>{color}</h3>\n          {LINK_SIZES.map((size) => (\n            <div\n              key={`${color}-${size}`}\n              style={{\n                display: 'flex',\n                gap: 48,\n                alignItems: 'center',\n                marginBottom: 8,\n              }}\n            >\n              <span style={{ width: 64, fontSize: 12, textTransform: 'capitalize' }}>{size}</span>\n              {STATES.map((state) => (\n                <div\n                  key={`${color}-${size}-${state}`}\n                  style={{ display: 'flex', flexDirection: 'column', gap: 4 }}\n                >\n                  <span style={{ fontSize: 10, color: '#888', textTransform: 'capitalize' }}>\n                    {state}\n                  </span>\n                  <Link\n                    {...args}\n                    color={color}\n                    size={size}\n                    disabled={state === 'disabled'}\n                  >\n                    Link\n                  </Link>\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "22701739de59f3ff8757908dd59dec110a126e3b95861d3ad523cb1552deeed7": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      {VARIANTS.map((variant) => (\n        <div key={variant}>\n          <h3 style={{ marginBottom: 12 }}>{variant}</h3>\n          <Empty {...args} variant={variant} />\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "22edc8d5014aba685af83f60b94c089e387cc95677d233691190f5e2d031e262": {
+      "title": "Dotted",
+      "code": "<div>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider variant=\"dotted\" />\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider variant=\"dotted\">Dotted</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "231708504f9ec34c52004329a3bb5c026dbda32f45ef5a642b02861df747100a": {
+      "title": "Loading",
+      "code": "<div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n      <div style={{ width: 310 }}>\n        <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Large</p>\n        <Input\n          label=\"Label\"\n          placeholder=\"Loading...\"\n          loading\n        />\n      </div>\n      <div style={{ width: 310 }}>\n        <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Small</p>\n        <Input\n          size=\"small\"\n          label=\"Label\"\n          placeholder=\"Loading...\"\n          loading\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "23bda2a849d16045cdaa73e374c204db1099cbca913ff14a7ef5f02f346f50b6": {
+      "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// Loading state\n<Button loading>Processing...</Button>\n\n// Disabled\n<Button disabled>Unavailable</Button>",
+      "source": "readme",
+      "compilable": true
+    },
+    "24d5e46e111c329ee3e4214816d4f82614fd465fefb80ab345960c8ddc0bcef3": {
+      "title": "Usage",
+      "code": "<Segment\n  defaultValue=\"overview\"\n  items={[\n    { value: 'overview', label: 'Overview' },\n    { value: 'transactions', label: 'Transactions' },\n    { value: 'analytics', label: 'Analytics' },\n  ]}\n  onChange={(value) => console.log('Selected:', value)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "25481ee92272cd2b9cdd59f68f847651b99333df541c23495f75abe261b5686c": {
+      "title": "Upload Field",
+      "code": "<ProForm\n      {...args}\n      onFinish={(values) => {\n        const files = values.attachment as FileList | null;\n        alert(files ? `Selected: ${Array.from(files).map(f => f.name).join(', ')}` : 'No file');\n      }}\n    >\n      <ProFormUpload\n        name=\"attachment\"\n        label=\"Attachment\"\n        fieldProps={{ accept: '.pdf,.png,.jpg', multiple: true, buttonLabel: 'Choose Files' }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "25966efe47cbb331081aa62151a5d80e7324bfce0b4a1b82e323559d9349cd54": {
+      "title": "Canonical usage",
+      "code": "<Select />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "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
+    },
+    "25c5df1e3c4d654a48016148beb792280ff11859280c9f51c6c226b15ab3becf": {
+      "title": "Primary Icons",
+      "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))' }}>\n      {/* Primary Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='deposit' />\")}>\n        <Icons {...args} name='deposit' />\n        <span>Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdrawal' />\")}>\n        <Icons {...args} name='withdrawal' />\n        <span>Withdrawal</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='conversion' />\")}>\n        <Icons {...args} name='conversion' />\n        <span>Conversion</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mintToken' />\")}>\n        <Icons {...args} name='mintToken' />\n        <span>MintToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='burnToken' />\")}>\n        <Icons {...args} name='burnToken' />\n        <span>BurnToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='accountLocked' />\")}>\n        <Icons {...args} name='accountLocked' />\n        <span>Account Locked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pending' />\")}>\n        <Icons {...args} name='pending' />\n        <span>Pending</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='success' />\")}>\n        <Icons {...args} name='success' />\n        <span>Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fail' />\")}>\n        <Icons {...args} name='fail' />\n        <span>Fail</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='error' />\")}>\n        <Icons {...args} name='error' />\n        <span>Error</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusSuccess' color='#1F580033' />\")}>\n        <Icons {...args} name='statusSuccess' color='#1F580033' />\n        <span>Status Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusFail' color='#AE00001A' />\")}>\n        <Icons {...args} name='statusFail' color='#AE00001A' />\n        <span>Status Fail</span>\n      </CopyIconBox>\n      {/* Menu Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dashboard' />\")}>\n        <Icons {...args} name='dashboard' />\n        <span>Dashboard</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='digitalAsset' />\")}>\n        <Icons {...args} name='digitalAsset' />\n        <span>Digital Asset</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='addressBook' />\")}>\n        <Icons {...args} name='addressBook' />\n        <span>Address Book</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedBankAccounts' />\")}>\n        <Icons {...args} name='linkedBankAccounts' />\n        <span>Linked Bank Accounts</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wire' />\")}>\n        <Icons {...args} name='wire' />\n        <span>Wire</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swift' />\")}>\n        <Icons {...args} name='swift' />\n        <span>Swift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='account' />\")}>\n        <Icons {...args} name='account' />\n        <span>Account</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='profile' />\")}>\n        <Icons {...args} name='profile' />\n        <span>Profile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='security' />\")}>\n        <Icons {...args} name='security' />\n        <span>Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logout' />\")}>\n        <Icons {...args} name='logout' />\n        <span>Logout</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='portfolio' />\")}>\n        <Icons {...args} name='portfolio' />\n        <span>Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='home' />\")}>\n        <Icons {...args} name='home' />\n        <span>Home</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='convert' />\")}>\n        <Icons {...args} name='convert' />\n        <span>Convert</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdraw' />\")}>\n        <Icons {...args} name='withdraw' />\n        <span>Withdraw</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='send' />\")}>\n        <Icons {...args} name='send' />\n        <span>Send</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='menuDeposit' />\")}>\n        <Icons {...args} name='menuDeposit' />\n        <span>Menu Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='company' />\")}>\n        <Icons {...args} name='company' />\n        <span>Company</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='parties' />\")}>\n        <Icons {...args} name='parties' />\n        <span>Parties</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transactions' />\")}>\n        <Icons {...args} name='transactions' />\n        <span>Transactions</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fiat' />\")}>\n        <Icons {...args} name='fiat' />\n        <span>Fiat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='money' />\")}>\n        <Icons {...args} name='money' />\n        <span>Money</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sendCrypto' />\")}>\n        <Icons {...args} name='sendCrypto' />\n        <span>Send Crypto</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='businessAccount' />\")}>\n        <Icons {...args} name='businessAccount' />\n        <span>Business Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='individualAccount' />\")}>\n        <Icons {...args} name='individualAccount' />\n        <span>Identity</span>\n      </CopyIconBox>\n\n      {/* Functional Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowUp' />\")}>\n        <Icons {...args} name='arrowUp' />\n        <span>Arrow Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowDown' />\")}>\n        <Icons {...args} name='arrowDown' />\n        <span>Arrow Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowLeft' />\")}>\n        <Icons {...args} name='arrowLeft' />\n        <span>Arrow Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowRight' />\")}>\n        <Icons {...args} name='arrowRight' />\n        <span>Arrow Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='add' />\")}>\n        <Icons {...args} name='add' />\n        <span>Add</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='minus' />\")}>\n        <Icons {...args} name='minus' />\n        <span>Minus</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cross' />\")}>\n        <Icons {...args} name='cross' />\n        <span>Cross</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='more' />\")}>\n        <Icons {...args} name='more' />\n        <span>More</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronDown' />\")}>\n        <Icons {...args} name='chevronDown' />\n        <span>Chevron Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronUp' />\")}>\n        <Icons {...args} name='chevronUp' />\n        <span>Chevron Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronLeft' />\")}>\n        <Icons {...args} name='chevronLeft' />\n        <span>Chevron Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronRight' />\")}>\n        <Icons {...args} name='chevronRight' />\n        <span>Chevron Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' />\")}>\n        <Icons {...args} name='sort' />\n        <span>Sort Default</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='ascend' />\")}>\n        <Icons {...args} name='sort' status='ascend' />\n        <span>Sort Ascend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='descend' />\")}>\n        <Icons {...args} name='sort' status='descend' />\n        <span>Sort Descend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='collapse' />\")}>\n        <Icons {...args} name='collapse' />\n        <span>Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='extend' />\")}>\n        <Icons {...args} name='extend' />\n        <span>Extend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='spinner' />\")}>\n        <Icons {...args} name='spinner' />\n        <span>Spinner</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='check' />\")}>\n        <Icons {...args} name='check' />\n        <span>Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='remove' />\")}>\n        <Icons {...args} name='remove' />\n        <span>Remove</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pix' />\")}>\n        <Icons {...args} name='pix' />\n        <span>PIX</span>\n      </CopyIconBox>\n      {/* System Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='info' />\")}>\n        <Icons {...args} name='info' />\n        <span>Info</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notifications' />\")}>\n        <Icons {...args} name='notifications' />\n        <span>Notifications</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='favorite' />\")}>\n        <Icons {...args} name='favorite' />\n        <span>Favorite</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transferHistory' />\")}>\n        <Icons {...args} name='transferHistory' />\n        <span>Transfer History</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='support' />\")}>\n        <Icons {...args} name='support' />\n        <span>Support</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='help' />\")}>\n        <Icons {...args} name='help' />\n        <span>Help</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='language' />\")}>\n        <Icons {...args} name='language' />\n        <span>Language</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='share' />\")}>\n        <Icons {...args} name='share' />\n        <span>Share</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='products' />\")}>\n        <Icons {...args} name='products' />\n        <span>Products</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hub' />\")}>\n        <Icons {...args} name='hub' />\n        <span>Hub</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemSecurity' />\")}>\n        <Icons {...args} name='systemSecurity' />\n        <span>System Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fees' />\")}>\n        <Icons {...args} name='fees' />\n        <span>Fees</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='settings' />\")}>\n        <Icons {...args} name='settings' />\n        <span>Settings</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='id' />\")}>\n        <Icons {...args} name='id' />\n        <span>ID</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='viewBalance' />\")}>\n        <Icons {...args} name='viewBalance' />\n        <span>View Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hideBalance' />\")}>\n        <Icons {...args} name='hideBalance' />\n        <span>Hide Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='privacy' />\")}>\n        <Icons {...args} name='privacy' />\n        <span>Privacy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='card' />\")}>\n        <Icons {...args} name='card' />\n        <span>Card</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coin' />\")}>\n        <Icons {...args} name='coin' />\n        <span>Coin</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wallet' />\")}>\n        <Icons {...args} name='wallet' />\n        <span>Wallet</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='email' />\")}>\n        <Icons {...args} name='email' />\n        <span>Email</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='rewards' />\")}>\n        <Icons {...args} name='rewards' />\n        <span>Rewards</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='time' />\")}>\n        <Icons {...args} name='time' />\n        <span>Time</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='location' />\")}>\n        <Icons {...args} name='location' />\n        <span>Location</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='calendar' />\")}>\n        <Icons {...args} name='calendar' />\n        <span>Calendar</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='securityCheck' />\")}>\n        <Icons {...args} name='securityCheck' />\n        <span>Security Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='devices' />\")}>\n        <Icons {...args} name='devices' />\n        <span>Devices</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='images' />\")}>\n        <Icons {...args} name='images' />\n        <span>Images</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='bank' />\")}>\n        <Icons {...args} name='bank' />\n        <span>Bank</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coins' />\")}>\n        <Icons {...args} name='coins' />\n        <span>Coins</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='earn' />\")}>\n        <Icons {...args} name='earn' />\n        <span>Earn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='scan' />\")}>\n        <Icons {...args} name='scan' />\n        <span>Scan</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='search' />\")}>\n        <Icons {...args} name='search' />\n        <span>Search</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='maintenance' />\")}>\n        <Icons {...args} name='maintenance' />\n        <span>Maintenance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='editFile' />\")}>\n        <Icons {...args} name='editFile' />\n        <span>Edit File</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='document' />\")}>\n        <Icons {...args} name='document' />\n        <span>Document</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='upload' />\")}>\n        <Icons {...args} name='upload' />\n        <span>Upload</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gift' />\")}>\n        <Icons {...args} name='gift' />\n        <span>Gift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='filter' />\")}>\n        <Icons {...args} name='filter' />\n        <span>Filter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='expand' />\")}>\n        <Icons {...args} name='expand' />\n        <span>Expand</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemCollapse' />\")}>\n        <Icons {...args} name='systemCollapse' />\n        <span>System Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='refresh' />\")}>\n        <Icons {...args} name='refresh' />\n        <span>Refresh</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transfer' />\")}>\n        <Icons {...args} name='transfer' />\n        <span>Transfer</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='link' />\")}>\n        <Icons {...args} name='link' />\n        <span>Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='save' />\")}>\n        <Icons {...args} name='save' />\n        <span>Save</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='like' />\")}>\n        <Icons {...args} name='like' />\n        <span>Like</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dislike' />\")}>\n        <Icons {...args} name='dislike' />\n        <span>Dislike</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='copy' />\")}>\n        <Icons {...args} name='copy' />\n        <span>Copy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mobile' />\")}>\n        <Icons {...args} name='mobile' />\n        <span>Mobile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chat' />\")}>\n        <Icons {...args} name='chat' />\n        <span>Chat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swap' />\")}>\n        <Icons {...args} name='swap' />\n        <span>Swap</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='clock' />\")}>\n        <Icons {...args} name='clock' />\n        <span>Clock</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='desktop' />\")}>\n        <Icons {...args} name='desktop' />\n        <span>Desktop</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='usd' />\")}>\n        <Icons {...args} name='usd' />\n        <span>USD</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='eur' />\")}>\n        <Icons {...args} name='eur' />\n        <span>EUR</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gbp' />\")}>\n        <Icons {...args} name='gbp' />\n        <span>GBP</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='jpy' />\")}>\n        <Icons {...args} name='jpy' />\n        <span>JPY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cny' />\")}>\n        <Icons {...args} name='cny' />\n        <span>CNY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='google' />\")}>\n        <Icons {...args} name='google' />\n        <span>Google</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apple' />\")}>\n        <Icons {...args} name='apple' />\n        <span>Apple</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='twitter' />\")}>\n        <Icons {...args} name='twitter' />\n        <span>Twitter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedIn' />\")}>\n        <Icons {...args} name='linkedIn' />\n        <span>LinkedIn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='passkey' />\")}>\n        <Icons {...args} name='passkey' />\n        <span>Passkey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='ach' />\")}>\n        <Icons {...args} name='ach' />\n        <span>ACH</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apiKey' />\")}>\n        <Icons {...args} name='apiKey' />\n        <span>APIKey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='brokenLink' />\")}>\n        <Icons {...args} name='brokenLink' />\n        <span>Broken Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pause' />\")}>\n        <Icons {...args} name='pause' />\n        <span>Pause</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='autoConversionRules' />\")}>\n        <Icons {...args} name='autoConversionRules' />\n        <span>Auto Conversion Rules</span>\n      </CopyIconBox>\n    </div>;\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "25d3c27d4d446cfc5d638fc4025c31ea8026f219ad274ed16cbc32bef414ba5c": {
+      "title": "Checked",
+      "code": "<Switch {...args} label=\"Label\" defaultChecked />",
+      "source": "stories",
+      "compilable": false
+    },
+    "25f9f9086f93b5fe128992d1c388b0c9cd77df643010c4c5cc403527a80b7528": {
+      "title": "Canonical usage",
+      "code": "<QueryFilter />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "26594eacf431540e6380fac7c7ff44f09d414de2052860d55187217317c0cbb1": {
+      "title": "Field Set",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ phone: ['+1', '555-0100'] }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProForm.FieldSet name=\"phone\" label=\"Phone Number\" gap={8}>\n        <Input placeholder=\"Area code\" style={{ width: 80 }} />\n        <Input placeholder=\"Number\" style={{ width: 200 }} />\n      </ProForm.FieldSet>\n      <ProFormText name=\"email\" label=\"Email\" />\n    </ProForm>",
+      "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
+    },
+    "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>",
+      "source": "stories",
+      "compilable": false
+    },
+    "27d6aac7d1c034f300fff363095f94668ca8ac06615c0e779fc6f83aba43ab8e": {
+      "title": "Cell Size Matrix",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Alignment Left</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=\"Large\"\n            description=\"Description\"\n            style={{ width: 300 }}\n          />\n          <Radio\n            checked\n            variant=\"cell\"\n            size=\"medium\"\n            alignment=\"left\"\n            icon=\"swift\"\n            label=\"Medium\"\n            style={{ width: 180 }}\n          />\n          <Radio\n            checked\n            variant=\"cell\"\n            size=\"small\"\n            alignment=\"left\"\n            icon=\"swift\"\n            label=\"Small\"\n            style={{ width: 180 }}\n          />\n        </div>\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Alignment Center</h3>\n        <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=\"Large\"\n            description=\"Description\"\n            style={{ width: 200 }}\n          />\n          <Radio\n            checked\n            variant=\"cell\"\n            size=\"medium\"\n            alignment=\"center\"\n            icon=\"usd\"\n            label=\"Medium\"\n            style={{ width: 200 }}\n          />\n          <Radio\n            checked\n            variant=\"cell\"\n            size=\"small\"\n            alignment=\"center\"\n            icon=\"usd\"\n            label=\"Small\"\n            style={{ width: 200 }}\n          />\n        </div>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "283bf6fd5eff1ebe8a6ed952b6bd855c824f627f386f40f0a520e4ca0814982e": {
+      "title": "Notification Icons",
+      "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notificationInfo' />\")}>\n        <Icons {...args} name='notificationInfo' size={32} />\n        <span>notificationInfo</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notificationWarning' />\")}>\n        <Icons {...args} name='notificationWarning' size={32} />\n        <span>notificationWarning</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notificationSuccess' />\")}>\n        <Icons {...args} name='notificationSuccess' size={32} />\n        <span>notificationSuccess</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notificationError' />\")}>\n        <Icons {...args} name='notificationError' size={32} />\n        <span>notificationError</span>\n      </CopyIconBox>\n    </div>;\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "285dd42c2ca63f8f2eb21d39bf4dd6649d9b1383834a94ba626d242b9acc24a1": {
+      "title": "Import",
+      "code": "import { Upload, UploadFileBar } from '@1money/components-ui';\n// or\nimport { Upload, UploadFileBar } from '@1money/components-ui/Upload';",
+      "source": "readme",
+      "compilable": true
+    },
+    "28dcbb40d407a6c3c48dcdb51a06d11466a26d831324f8c583ab6b877bc5eb7d": {
+      "title": "Vertical Layout",
+      "code": "<Space direction={SPACE_DIRECTION.vertical} size={SPACE_SIZE.large}>\n  <div>Top</div>\n  <div>Bottom</div>\n</Space>",
+      "source": "readme",
+      "compilable": true
+    },
+    "2a00b4740e301b8a7ac79f978053cc5d0d9e28704a3496719ce12b34448697d2": {
+      "title": "Import",
+      "code": "import { Accordion } from '@1money/components-ui';\n// or\nimport { Accordion } from '@1money/components-ui/Accordion';",
+      "source": "readme",
+      "compilable": true
+    },
+    "2ab81b696087edd4949bb8a066c36ceb58197f8a8d1e3ab2f387eb6275fe724e": {
+      "title": "Canonical usage",
+      "code": "import type { VirtualListScrollInfo } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "2b97ea480bdd9e78ecabd54bc4c254a48c281f6121a50a054418593c9c9d8f5c": {
+      "title": "Middle Ellipsis",
+      "code": "<div style={{ ...STORY_LAYOUT_STYLE, maxWidth: 480 }}>\n      <div style={ROW_STYLE}>\n        <Typography.Label size=\"md\" color=\"default-secondary\">Sender ID</Typography.Label>\n        <div style={CONSTRAINED_STYLE}>\n          <Typography.Body size=\"md\" ellipsis={{ tooltip: true }} copyable>\n            {SENDER_ID}\n          </Typography.Body>\n        </div>\n      </div>\n      <div style={ROW_STYLE}>\n        <Typography.Label size=\"md\" color=\"default-secondary\">Recipient name</Typography.Label>\n        <Typography.Body size=\"md\">Apextech LLC</Typography.Body>\n      </div>\n      <div style={ROW_STYLE}>\n        <Typography.Label size=\"md\" color=\"default-secondary\">Recipient ID</Typography.Label>\n        <div style={CONSTRAINED_STYLE}>\n          <Typography.Body size=\"md\" ellipsis={{ tooltip: true }} copyable>\n            {RECIPIENT_ID}\n          </Typography.Body>\n        </div>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "2c58c83426bf77e0fd761deff8e74853f41c3213c0b293c97d142554dca062bc": {
+      "title": "Canonical usage",
+      "code": "<ResizeObserver>Label</ResizeObserver>",
+      "source": "canonical",
+      "compilable": true
+    },
+    "2cca976a647db275dfb45ce8bb53bc85d304e49c3d91f76e5987d11e95b604c1": {
+      "title": "Import",
+      "code": "import { Cell } from '@1money/component-ui';\n// or\nimport { Cell } from '@1money/component-ui/Cell';",
+      "source": "readme",
+      "compilable": true
+    },
+    "2d7f3d765471e161eebea75b1e1a3270b8a6b415b29bbead4e0362770a9eef3b": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormFieldSetProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "2db7958f91085606312d3dea5983e6a87724bdaaaeb755893810034b5be459a2": {
+      "title": "Copyable",
+      "code": "<Typography.Link\n  size=\"md\"\n  href=\"https://example.com/reference\"\n  copyable={{ text: 'https://example.com/reference' }}\n>\n  https://example.com/reference\n</Typography.Link>",
+      "source": "readme",
+      "compilable": true
+    },
+    "2e38eb2bbde2587fea5af46f3c34d8b7b9a3bc7951fa044bcd363a4ce3812a47": {
+      "title": "Canonical usage",
+      "code": "import type { StepProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "2f65549d43490603034b9f30beadb2efd27c2c0f454242a54f434f213d051491": {
+      "title": "Omit Nil",
+      "code": "<ProForm\n      {...args}\n      omitNil\n      initialValues={{ name: '', email: '', note: null }}\n      onFinish={(values) => {\n        alert('Nil values stripped:\\n' + JSON.stringify(values, null, 2));\n      }}\n    >\n      <ProFormText name=\"name\" label=\"Name (leave empty to omit)\" />\n      <ProFormText name=\"email\" label=\"Email (leave empty to omit)\" />\n      <ProFormText name=\"note\" label=\"Note (null → omitted)\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "2f6710b655bb5d7c4adb4aa08f77909913d90ba3a32d1fea39ab8604ddc2f8f5": {
+      "title": "Canonical usage",
+      "code": "import type { SelectSingleValue } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "31dd5c9e926c0deeefba1a4028848b13ee819e42fbdf5ba0438329ffa1907e66": {
+      "title": "Width Presets",
+      "code": "<ProForm {...args}>\n      <ProFormText name=\"sm\" label=\"Small (sm = 160px)\" width=\"sm\" />\n      <ProFormText name=\"md\" label=\"Medium (md = 240px)\" width=\"md\" />\n      <ProFormText name=\"lg\" label=\"Large (lg = 320px)\" width=\"lg\" />\n      <ProFormText name=\"xl\" label=\"XL (xl = 420px)\" width=\"xl\" />\n      <ProFormText name=\"custom\" label=\"Custom (200px)\" width={200} />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "323997b5e7fbded862fcafd3b54089dd9dfae28d4b7c04fbe3d26f612a7b2406": {
+      "title": "Canonical usage",
+      "code": "import { Tooltip } from '@1money/components-ui';\n// or\nimport { Tooltip } from '@1money/components-ui/Tooltip';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "3298cc00509da7da73ca2da525874e520a453a289a0c4985f6f11249b5768dba": {
+      "title": "Full Width",
+      "code": "<Tabs items={DEFAULT_ITEMS} fullWidth />",
+      "source": "stories",
+      "compilable": true
+    },
+    "331af5c2212fd55974bf970db262267197fa7ead2695ac5e5ad86d13f1a999d5": {
+      "title": "Canonical usage",
+      "code": "import type { ResizeObserverOnResize } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "34536f5f5abc20bc7255387d21700a4725ea8d6f9806b09cb947375f7afde43c": {
+      "title": "Label Right",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Switch {...args} label=\"Label\" description=\"Description\" labelPlacement=\"right\" />\n      <Switch {...args} label=\"Label\" description=\"Description\" labelPlacement=\"right\" defaultChecked />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "34e2f9c81f78d36f106c7236b21814e0edbc3300a9f8b86d898f88ce8076b551": {
+      "title": "Strong Support",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_TITLE_SIZES.map(size => (\n          <Typography.Title key={size} size={size} strong>\n            Strong title {size}\n          </Typography.Title>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_BODY_SIZES.map(size => (\n          <Typography.Body key={size} size={size} strong>\n            Strong body {size}\n          </Typography.Body>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_LABEL_SIZES.map(size => (\n          <Typography.Label key={size} size={size} strong>\n            Strong label {size}\n          </Typography.Label>\n        ))}\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "359419046d682dfd62714062c25dcec8d14f5e324dc74f77fe952a6dbc601d96": {
+      "title": "Api Examples",
+      "code": "<div style={DEMO_SECTION_STYLE}>\n      <Space size={SPACE_SIZE.middle} align={SPACE_ALIGN.center}>\n        <div style={DEMO_BOX_STYLE}>Align</div>\n        <div style={DEMO_BOX_STYLE}>Center</div>\n      </Space>\n      <Space direction={SPACE_DIRECTION.vertical} size={SPACE_SIZE.large}>\n        <div style={DEMO_BOX_STYLE}>Vertical</div>\n        <div style={DEMO_BOX_STYLE}>Large</div>\n      </Space>\n    </div>",
+      "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  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "36235293da09b5cde1912c14c77f599d7ac78dba18bdc80d587926d6f474f656": {
+      "title": "Vertical Layout",
+      "code": "const VERTICAL_GAP = 16;\n\n<Flex vertical gap={VERTICAL_GAP}>\n  <div>Top</div>\n  <div>Bottom</div>\n</Flex>",
+      "source": "readme",
+      "compilable": true
+    },
+    "36cbaf7aab4a01a5e1c94430f29c9f8881ec84e60dac84ca5c2e32cb25e14ae5": {
+      "title": "Usage",
+      "code": "// Basic usage with icon name\n<Empty\n  icon=\"transactions\"\n  title=\"No record found\"\n  description=\"Try adjusting your filters to find the record you are looking for\"\n/>\n\n// With custom icon component\n<Empty\n  icon={<MyCustomIcon />}\n  description=\"No data available\"\n/>\n\n// With action button\n<Empty\n  variant=\"stroke\"\n  icon=\"bank\"\n  description=\"You don't have any bank accounts linked\"\n  action={<Button>Add new bank account</Button>}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "36f868d28259a7ebb3c6decbe9768b0ac838fd1617e57e32bace1c0dde27546d": {
+      "title": "Usage",
+      "code": "<Calendar\n  label=\"Date of Birth\"\n  required\n  placeholder=\"MM/DD/YYYY\"\n  onChange={(e) => console.log(e.value)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "3836a143b0bc0c3df0917e6d83e399c700a858b3e0cf7703a8417090067c3088": {
+      "title": "Default",
+      "code": "<Switch {...args} label=\"Label\" />",
+      "source": "stories",
+      "compilable": false
+    },
+    "38cc049b002ef2643d573c3ed8ec40bd44f8aadbccbeea471bedd8ace0207adb": {
+      "title": "Group Basic",
+      "code": "{\n    const [value, setValue] = React.useState<string | number>('a');\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}>\n        <Radio value=\"a\" label=\"Option A\" />\n        <Radio value=\"b\" label=\"Option B\" />\n        <Radio value=\"c\" label=\"Option C\" />\n      </RadioGroup>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "38d85a62962bcd59b02127b7cf4808c8cb8ffe3d72866928828846cb5adb5e77": {
+      "title": "Basic Usage",
+      "code": "<Popconfirm\n  title=\"Delete transfer rule?\"\n  body=\"This action removes the rule immediately and cannot be undone.\"\n  cancelText=\"Keep rule\"\n  confirmText=\"Delete\"\n  onConfirm={() => {\n    // perform delete\n  }}\n>\n  <Button color=\"danger\">Delete rule</Button>\n</Popconfirm>",
+      "source": "readme",
+      "compilable": true
+    },
+    "390cabc2f23e7ce30b17814c2a5b8202b8da33904affa60c9bcf5e26fadd9d2f": {
+      "title": "Orientation Margin",
+      "code": "<div>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider orientation=\"left\" orientationMargin=\"0\">Left (margin 0)</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider orientation=\"left\" orientationMargin={50}>Left (margin 50)</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider orientation=\"right\" orientationMargin={0}>Right (margin 0)</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "3b0609d66de90d74188d6f4ab20aa01fa0063b08806f15b90448a4dd7ff49fe2": {
+      "title": "Canonical usage",
+      "code": "import type { FormInstance } from '@1money/component-ui';",
+      "source": "canonical",
+      "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>",
+      "source": "stories",
+      "compilable": true
+    },
+    "3e868fc7054ec26b6d612e345cd084dcdbb6a51b7d290eae2fa333509e0c9b33": {
+      "title": "Canonical usage",
+      "code": "<Popconfirm />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "3eeffae8089eb4c5263987d1efdbdb531b44459ca7f63135ee8f3a215faa0928": {
+      "title": "No Arrow",
+      "code": "<div style={ANCHOR_WRAPPER_STYLE}>\n      <button id=\"tooltip-no-arrow\">Hover me</button>\n      <Tooltip {...args} anchorSelect=\"#tooltip-no-arrow\" />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "3f7947a62ea88c98ba7ab12c99856262c9bcfbce67805459f690e130f0d6920e": {
+      "title": "Canonical usage",
+      "code": "import { Space } from '@1money/components-ui';\n// or\nimport { Space } from '@1money/components-ui/Space';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/components-ui/Space';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "3fed6ca7982c867ccd1b2b58023950f8365462d92b44c75722551d4d3127c8bb": {
+      "title": "Canonical usage",
+      "code": "import type { DialogSize } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "40a22244886d5bdbd3ed0c2eeccc5859897c73c7f35ce9d0b27a7a9547709f28": {
+      "title": "Import",
+      "code": "import { Tag } from '@1money/components-ui';\n// or\nimport { Tag } from '@1money/components-ui/Tag';",
+      "source": "readme",
+      "compilable": true
+    },
+    "40b55a924e580ca4161d97e698db47fb342eae5c804b2bfbaab1f5eb64a58e09": {
+      "title": "Basic",
+      "code": "<div style={containerStyle}>\n      <VirtualList\n        data={data1000}\n        height={300}\n        itemHeight={30}\n        itemKey=\"id\"\n      >\n        {(item: Item) => (\n          <div style={itemStyle(item.height)}>\n            <span>Item {item.id}</span>\n            <span style={{ color: '#999', fontSize: 12 }}>h: {item.height}px</span>\n          </div>\n        )}\n      </VirtualList>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "4186c0d2b90dd549d7f6497e4b7fb0b101654305b0e3e128cd0f1d6ca78bfb2a": {
+      "title": "Canonical usage",
+      "code": "import type { ValidateStatus } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "41c91bf415fa7b2b7fcfbba49136e2254bcf778a33e916d12446e042629a0943": {
+      "title": "Canonical usage",
+      "code": "import { Switch } from '@1money/components-ui';\n// or\nimport { Switch } from '@1money/components-ui/Switch';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "421c6af797703e115fd55a10242e5ac801283d4eb80d5409fc997c7d9c730393": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormGroupProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "42d09791892e2a4de1863d920b4d11b5c83b30770a9775f63645e3291eb98416": {
+      "title": "Custom Submitter",
+      "code": "<ProForm\n      {...args}\n      submitter={{\n        submitText: 'Save Changes',\n        resetText: 'Discard',\n        render: (props, dom) => (\n          <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>\n            {dom}\n          </div>\n        ),\n      }}\n    >\n      <ProFormText name=\"title\" label=\"Title\" rules={[{ required: true }]} />\n      <ProFormTextArea name=\"content\" label=\"Content\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "433e2ddc78741578443b854668e9b0bc02f7196c44580c8b913bf9d7d68c08ae": {
+      "title": "Canonical usage",
+      "code": "import { CoachMark } from '@1money/components-ui';\n// or\nimport { CoachMark } from '@1money/components-ui/CoachMark';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4382388bcd674e464f60d818049720fa134a38574be7255cff59425e9d027d63": {
+      "title": "Canonical usage",
+      "code": "import type { FormSize } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4389223d4dd418331dd628d1bb657512018df7b6124067044b1b577c26853c32": {
+      "title": "Canonical usage",
+      "code": "<Dialog />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "43cb69594b17d8f71ddb9912efb8eea26ee52cf45990ef9f7a2212c0694b0811": {
+      "title": "Dashed",
+      "code": "<div>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider variant=\"dashed\" />\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider variant=\"dashed\">Dashed</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "43cd04ae4cce4b5299321d915077358a92a0a5000ab402da2f9ba9ccac91ef84": {
+      "title": "Canonical usage",
+      "code": "import { Spinner } from '@1money/components-ui';\n// or\nimport { Spinner } from '@1money/components-ui/Spinner';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "43e86173eaa57a1ad76a23b43ba3b90b40e118c2d4885e13b759adc68c95f5a8": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormFormInstance } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "44c4b25e35236d2eaf4d26824badf330c6495194077c815a662b000591be91be": {
+      "title": "Multiple Collapsed",
+      "code": "{\n    const [value, setValue] = useState<Array<string | number>>([\n      'btc',\n      'eth',\n      'usdt',\n      'usdc',\n      'sol',\n      'doge',\n    ]);\n\n    return (\n      <div style={{ width: 320 }}>\n        <Select\n          {...args}\n          multiple\n          value={value}\n          onChange={(nextValue, option) => {\n            setValue((nextValue as Array<string | number>) ?? []);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "45540f738e1068d8a124b639401d1c1ce52ae887afdc2aec99071704644db73a": {
+      "title": "Toolbar Spacing",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <div style={{ ...DEMO_PANEL_STYLE, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n        <Space size={SPACE_SIZE.small} align={SPACE_ALIGN.center}>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Date Range</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Status</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Currency</div>\n        </Space>\n        <Space size={SPACE_SIZE.small} align={SPACE_ALIGN.center}>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Export</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Refresh</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Create</div>\n        </Space>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "45927e79f2361b1e135a1b6aba335d6c44091ecc37424d0dcaf5424bb38149f4": {
+      "title": "Mode Read",
+      "code": "<ProForm\n      {...args}\n      mode=\"read\"\n      initialValues={{ name: 'Alice', email: 'alice@example.com', active: true }}\n    >\n      <ProFormText name=\"name\" label=\"Name\" />\n      <ProFormText name=\"email\" label=\"Email\" />\n      <ProFormSwitch name=\"active\" label=\"Active\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "459fb4fed33834539f12047eb8791c8c459888b43df3cfa51c852237d244b1b1": {
+      "title": "Canonical usage",
+      "code": "createProFormField(config);",
+      "source": "canonical",
+      "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    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "4831602e1843344ccb14281ad853e240d2d5c1c2010be19cf091cacd678e6eda": {
+      "title": "Canonical usage",
+      "code": "import type { UsePaginationOptions } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4844dfaf4dff931b3d5b14135a788fc632daa05669c14237139b0a15e6d1a793": {
+      "title": "Click Trigger",
+      "code": "<div style={ANCHOR_WRAPPER_STYLE}>\n      <button id=\"tooltip-click\">Click me</button>\n      <Tooltip\n        {...args}\n        anchorSelect=\"#tooltip-click\"\n        openEvents={{ click: true, mouseover: false, mouseenter: false, focus: false }}\n        closeEvents={{ click: true, mouseleave: false, mouseout: false, blur: false }}\n      />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "487a87a540c310c3a95d1656126aa0686d4ce8932394b10ef7be463bd2139b11": {
+      "title": "Canonical usage",
+      "code": "import type { FormLayout } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "48f6ebde7546d7db844b0cd43bd6e6ec6956746f93c55167fda6a2cd84599a3e": {
+      "title": "No Animation",
+      "code": "<Segment items={DEFAULT_ITEMS} animated={false} />",
+      "source": "stories",
+      "compilable": true
+    },
+    "4925f0fa31e738cbe6dcf51caa4529687907afbd4c5d75a2b6babee74973dcb6": {
+      "title": "Canonical usage",
+      "code": "import type { Rule } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4946413c8eb03c3d0ed457a33ffdb8dfdef55dfe7f8f8440b878a1ae2be1c46a": {
+      "title": "With Default Value",
+      "code": "<Segment defaultValue=\"transactions\" items={DEFAULT_ITEMS} />",
+      "source": "stories",
+      "compilable": true
+    },
+    "49a2e96ec0947afd6fe798ab777749f04241987e5f6c9364ac5fdff699d8aa31": {
+      "title": "Canonical usage",
+      "code": "import type { TriggerProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "49ad060bce26c0a2bb20e2d9487869063f8aa30ca5cff68d8bbb108fbeef29a1": {
+      "title": "Dashed / Dotted",
+      "code": "<Divider variant=\"dashed\" />\n<Divider variant=\"dotted\">Dotted</Divider>",
+      "source": "readme",
+      "compilable": true
+    },
+    "49c72f97a10ef34333a88507a7d9e8e5bb582173ce599c9b9a2aae31efedb1e1": {
+      "title": "Inline Loading",
+      "code": "<button disabled={loading}>\n  {loading ? (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n      <Spinner style={{ width: '16px', height: '16px' }} />\n      <span>Loading...</span>\n    </div>\n  ) : (\n    'Submit'\n  )}\n</button>",
+      "source": "readme",
+      "compilable": true
+    },
+    "49d5f7314ab1ae951fe87a5f276d65d91c81daf6f489b93cffa522dab5fa7054": {
+      "title": "Sizes",
+      "code": "<div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>\n      {LINK_SIZES.map((size) => (\n        <Link {...args} key={size} size={size}>\n          {size}\n        </Link>\n      ))}\n    </div>",
+      "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
+    },
+    "4a0586bd3c33f563c7de439b2edc169e9d921c2f9f7fb0c72e411af2d0637fa5": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormFieldTransformFn } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4a5e5cef011be8e4312b7e27e13d519193ffe35d681413267098a0f06182c9d9": {
+      "title": "Basic Usage",
+      "code": "// Basic icon (default 24px, color #131313)\n<Icons name=\"arrowRight\" />\nimport { Icons, IconWrapper, Logo } from '@1money/components-ui';\n\n// Custom size and color\n<Icons name=\"settings\" size={32} color=\"#3D73F2\" />\n\n// With explicit width/height\n<Icons name=\"search\" width={20} height={20} />\n\n// Icon with hover container\n<IconHover>\n  <Icons name=\"more\" />\n</IconHover>\n\n// Disabled hover container\n<IconHover disabled>\n  <Icons name=\"settings\" />\n</IconHover>\n\n// Logo\n<Icons name=\"logo\" size={40} />",
+      "source": "readme",
+      "compilable": true
+    },
+    "4aa25969f149eda32514cc530fb2b8fceabc54fcbf63b87641b7cfd13f967bda": {
+      "title": "Canonical usage",
+      "code": "<ProFormRadioGroup />",
+      "source": "canonical",
+      "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>",
+      "source": "stories",
+      "compilable": false
+    },
+    "4ae865ab021e175d88a07c485155d3003940a4025b8432040b9ebb3bfc9ac877": {
+      "title": "Single Select",
+      "code": "{\n    const [selected, setSelected] = useState<string | null>(null);\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 380 }}\n        content={({ close }) => (\n          <div style={{ display: 'flex', flexDirection: 'column' }}>\n            {CURRENCIES.slice(0, 4).map((item) => (\n              <DropdownItem\n                key={item.code}\n                selected={selected === item.code}\n                left={<CurrencyIcon flag={item.flag} />}\n                title={item.code}\n                subtitle={item.name}\n                right={<p style={itemAmountStyle}>{item.amount}</p>}\n                onClick={() => {\n                  setSelected(item.code);\n                  close();\n                }}\n              />\n            ))}\n          </div>\n        )}\n      >\n        <Button>\n          {selected\n            ? `${CURRENCIES.find((c) => c.code === selected)?.flag} ${selected}`\n            : 'Choose currency'}\n        </Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "4bfe9b50aecfd9832aab22cf2c5dc3bea89aeaba7934e60fe4e7a9d8c3ce823b": {
+      "title": "Canonical usage",
+      "code": "import type { PortalContainer } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4db81691f06b6d355c08291c79ad9154135a7851bc1653cf092a6f6ff1766a2a": {
+      "title": "Canonical usage",
+      "code": "import type { TriggerRole } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "4eb35f906280d6f50e93ee158c0792dc740933db4705b831c71d24aadf3e2de7": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      {TAG_SIZES.map((size) => (\n        <div key={size}>\n          <h3 style={{ marginBottom: 12 }}>{size}</h3>\n          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>\n            {TAG_COLORS.map((color) => (\n              <Tag\n                {...args}\n                key={`${size}-${color}`}\n                size={size}\n                color={color}\n                label={color}\n              />\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "50164c21b0b9ce491a97b9f31ca0eab4a51ce38d2496720d37242f774f78df20": {
+      "title": "Canonical usage",
+      "code": "import { Slider } from '@1money/components-ui';\n// or\nimport { Slider } from '@1money/components-ui/Slider';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "528ab6afb943c07fe6e0c68fe3bda683e292529a705bd2d968f4c5dfed7e3a83": {
+      "title": "Canonical usage",
+      "code": "import type { PaginationControlItem } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "52b3c46129e939dcab127c033e5069b7027eeec39a253fe8741b74807b6de599": {
+      "title": "Canonical usage",
+      "code": "<ProFormPassword />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "52e49c0728ddadda69ef98366ad789e66211d87acbb7ca43af959df87ec0767b": {
+      "title": "Event Shape",
+      "code": "type RadioChangeEvent = {\n  nativeEvent: Event;\n  preventDefault: () => void;\n  stopPropagation: () => void;\n  target: {\n    checked: boolean;\n    disabled: boolean;\n    id?: string;\n    name?: string;\n    type: 'radio';\n    value?: string | number;\n  };\n};",
+      "source": "readme",
+      "compilable": true
+    },
+    "52fff43bfcb2391a44e980e0fff53642d0b10d4dcc439c76c5d150e7209d9cad": {
+      "title": "CheckboxGroup",
+      "code": "import { Checkbox, CheckboxGroup } from '@1money/components-ui';\n// or\nimport { Checkbox, CheckboxGroup } from '@1money/components-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
+    },
+    "546ef2d886471f0e410921f3ca3fa1ec2db5d4bed5ff1902bc190d0d87c75054": {
+      "title": "Canonical usage",
+      "code": "<ProFormDatePicker />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "5545418d49fc7cdc897ea3ab29b0c7e5326b5e6a7321eec41eece864275198a0": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n        <h3>Default</h3>\n        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>\n          <Spinner size={20} />\n          <Spinner size={32} />\n          <Spinner size={48} />\n        </div>\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n        <h3>Brand</h3>\n        <Spinner type=\"brand\" size={32} title=\"Loading\" />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n        <h3>Brand + BG</h3>\n        <Spinner type=\"brand-bg\" size={74} title=\"Loading\" body=\"Body text\" />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "5694ed3a17a8aaa5d7736cb50c6e16eff3b03b29a74afbbd401544ec9a894672": {
+      "title": "Drawer Form Story",
+      "code": "<DrawerForm\n      {...args}\n      title=\"Create User\"\n      trigger={<Button color=\"primary\">Open Drawer 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      <ProFormTextArea name=\"bio\" label=\"Bio\" />\n      <ProFormSwitch name=\"active\" label=\"Active\" />\n    </DrawerForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "56b494b1a04a352e9bedd066d593b090bbc5039fc29319eceb82865d0e8dfb65": {
+      "title": "File Bar",
+      "code": "<UploadFileBar fileName=\"document.pdf\" />\n<UploadFileBar fileName=\"failed.pdf\" status={1} message=\"Upload failed\" onRemove={() => {}} />",
+      "source": "readme",
+      "compilable": true
+    },
+    "572f2d8e36841d6c929bf0ee4c11423ef33dc618291ed6bd10d900f09cf64d11": {
+      "title": "Frameless",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <Select\n        {...args}\n        value={value}\n        variant=\"frameless\"\n        prefix={<Icons name=\"usd\" size={24} color=\"currentColor\" />}\n        onChange={(nextValue, option) => {\n          setValue(nextValue as string | number | undefined);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "57555cab23c1ab39cfa023e9e3f6cec2998ddc9537a47354aa1cf1fd14488461": {
+      "title": "Canonical usage",
+      "code": "import type { ProgressFormatContext } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "57e5a7e81ccfa1d876cf40e95b6165f9d630fe343bc29dbb15c3fe546e689e62": {
+      "title": "Default",
+      "code": "<div style={wrapperStyle}>\n      <Step {...args} />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "58bad3562da4a5152857d932ada3b06876ddf701e0bc5b396abc799cfee00ff8": {
+      "title": "All Variants",
+      "code": "<div style={columnStyle}>\n      {LABEL_PLACEMENTS.map((placement) => (\n        <div key={placement}>\n          <h3 style={sectionHeaderStyle}>Label Placement: {placement}</h3>\n          <div style={sectionBodyStyle}>\n            {/* Default states */}\n            <div style={rowStyle}>\n              <Checkbox\n                {...args}\n                labelPlacement={placement}\n                label=\"Unchecked\"\n              />\n              <Checkbox\n                {...args}\n                labelPlacement={placement}\n                defaultChecked\n                label=\"Checked\"\n              />\n              <Checkbox\n                {...args}\n                labelPlacement={placement}\n                indeterminate\n                label=\"Indeterminate\"\n              />\n            </div>\n            {/* Disabled states */}\n            <div style={rowStyle}>\n              <Checkbox\n                {...args}\n                labelPlacement={placement}\n                disabled\n                label=\"Disabled\"\n              />\n              <Checkbox\n                {...args}\n                labelPlacement={placement}\n                checked\n                disabled\n                label=\"Disabled Checked\"\n              />\n              <Checkbox\n                {...args}\n                labelPlacement={placement}\n                indeterminate\n                disabled\n                label=\"Disabled Indeterminate\"\n              />\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "5a95c3048a0d4147931cea1f357e39f808578b8e0f072baa127124f6004cef1d": {
+      "title": "Canonical usage",
+      "code": "<DialogForm />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "5a9b5ddd9a26199701d3d3f2307a6ad3b964f66d5fdbfd30efdbbf8aba0c2c80": {
+      "title": "Canonical usage",
+      "code": "<ProFormSlider />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "5b6b616e8d95d382632b332591de2af84de98f77720ee5b0628d3a44feff076a": {
+      "title": "Group With Extra",
+      "code": "<ProForm\n      {...args}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProForm.Group\n        title=\"Contact\"\n        extra={<Button color=\"secondary\" size=\"small\">Import</Button>}\n      >\n        <ProFormText name=\"email\" label=\"Email\" />\n        <ProFormText name=\"phone\" label=\"Phone\" />\n      </ProForm.Group>\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "5ba789cfffb9110e9a147117959a6e59585384a46fa350d42dedc8e0857f1821": {
+      "title": "Canonical usage",
+      "code": "<ProFormUpload />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "5bbda57b2d06dfefaed853ba5ad655bb306fd8ecfbc92a6a96dee1deffc1af2f": {
+      "title": "With Content",
+      "code": "<Tabs\n      defaultActiveKey=\"tab1\"\n      items={[\n        { key: 'tab1', label: 'Overview', children: <div>Overview content goes here</div> },\n        { key: 'tab2', label: 'Transactions', children: <div>Transactions content goes here</div> },\n        { key: 'tab3', label: 'Analytics', children: <div>Analytics content goes here</div> },\n      ]}\n    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "5c8961675725144291340a7560c3c798389ce24d786783dedd6ffcac93193a0d": {
+      "title": "Batch Resize",
+      "code": "{\n    const [batchInfo, setBatchInfo] = useState<string>('');\n\n    return (\n      <div>\n        <p style={{ marginBottom: 8, color: '#666' }}>\n          Collection batches resize events from multiple children into a single callback:\n        </p>\n        <ResizeObserver.Collection\n          onBatchResize={(infos) => {\n            setBatchInfo(\n              `Batch: ${infos.length} resize(s) — ${infos.map((i) => `${i.data}: ${i.size.width}×${i.size.height}`).join(', ')}`,\n            );\n          }}\n        >\n          <div style={{ display: 'flex', gap: 16 }}>\n            {['First', 'Second'].map((name) => (\n              <ResizeObserver key={name} data={name}>\n                <div style={{ ...boxStyle, minWidth: 150 }}>\n                  {name}\n                </div>\n              </ResizeObserver>\n            ))}\n          </div>\n        </ResizeObserver.Collection>\n        {batchInfo && <div style={infoStyle}>{batchInfo}</div>}\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "5ce7cb216d31f3e8bace6eec75085ae89aa47cfd850b1983e62033e9fc5f6042": {
+      "title": "Default",
+      "code": "<Tabs items={DEFAULT_ITEMS} />",
+      "source": "stories",
+      "compilable": true
+    },
+    "5dc10afdccbf1759489ec0ca6e8837d8edd2fdacf6965a82e879ea4b1fe9cfbc": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Default (3 items)</h3>\n        <Segment items={DEFAULT_ITEMS} />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>5 items</h3>\n        <Segment\n          items={[\n            { value: '1', label: 'Label' },\n            { value: '2', label: 'Label' },\n            { value: '3', label: 'Label' },\n            { value: '4', label: 'Label' },\n            { value: '5', label: 'Label' },\n          ]}\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>With disabled item</h3>\n        <Segment\n          items={[\n            { value: '1', label: 'Active' },\n            { value: '2', label: 'Normal' },\n            { value: '3', label: 'Disabled', disabled: true },\n          ]}\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "5eab08235fada880deb893a45f8e307f765861578cd95522dc38da0053be3353": {
+      "title": "Canonical usage",
+      "code": "import type { PaginationEllipsisItem } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "5f3b6d99f2f042d7c984a9f73cb179167b6c80cfbd3c106d1c96ecc86ba1a888": {
+      "title": "Cell States",
+      "code": "<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=\"Checked\"\n        description=\"Primary selection\"\n        style={{ width: 300 }}\n      />\n      <Radio\n        checked\n        variant=\"cell\"\n        size=\"medium\"\n        alignment=\"left\"\n        icon=\"swift\"\n        label=\"Medium\"\n        style={{ width: 180 }}\n      />\n      <Radio\n        checked\n        variant=\"cell\"\n        size=\"small\"\n        alignment=\"left\"\n        icon=\"swift\"\n        label=\"Small\"\n        style={{ width: 180 }}\n      />\n      <Radio\n        checked\n        disabled\n        variant=\"cell\"\n        size=\"large\"\n        alignment=\"left\"\n        icon=\"swift\"\n        label=\"Disabled checked\"\n        description=\"Disabled state\"\n        style={{ width: 300 }}\n      />\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "5f3c0615ec3a69ebd87d06468b31046b347a1553105db72ec7cc2fca6b04678e": {
+      "title": "Group Cell Alignments",
+      "code": "{\n    const [leftValue, setLeftValue] = React.useState<string | number>('checked');\n    const [centerValue, setCenterValue] = React.useState<string | number>('checked');\n\n    const options = [\n      {\n        value: 'checked',\n        label: 'Label',\n        description: 'Description',\n        icon: 'language',\n      },\n      {\n        value: 'unchecked',\n        label: 'Label',\n        description: 'Description',\n        icon: 'swift',\n      },\n    ];\n\n    const handleLeftChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setLeftValue(event.target.value);\n      }\n    };\n\n    const handleCenterChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setCenterValue(event.target.value);\n      }\n    };\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n        <div style={{ width: 300 }}>\n          <h3 style={{ marginBottom: 12 }}>Alignment Left</h3>\n          <RadioGroup\n            value={leftValue}\n            variant=\"cell\"\n            size=\"large\"\n            alignment=\"left\"\n            direction=\"vertical\"\n            onChange={handleLeftChange}\n            options={options}\n          />\n        </div>\n        <div style={{ width: 300 }}>\n          <h3 style={{ marginBottom: 12 }}>Alignment Center</h3>\n          <RadioGroup\n            value={centerValue}\n            variant=\"cell\"\n            size=\"large\"\n            alignment=\"center\"\n            direction=\"vertical\"\n            onChange={handleCenterChange}\n            options={options}\n          />\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "5f4e0a0d85f2ecaf7434a70622e83ab0495c984cb44a41abe7be980b68b4274e": {
+      "title": "Import",
+      "code": "import { Space } from '@1money/components-ui';\n// or\nimport { Space } from '@1money/components-ui/Space';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/components-ui/Space';",
+      "source": "readme",
+      "compilable": true
+    },
+    "5fe4eaf6d6cc1aae1c57021991c5791efa10197d77e9fee4d8d3ad0301ed09b2": {
+      "title": "Canonical usage",
+      "code": "const result = usePagination(options);",
+      "source": "canonical",
+      "compilable": true
+    },
+    "600b7c61c09e62351c4da01ba0451212e347f76292d57d62d472809568ab33f1": {
+      "title": "Canonical usage",
+      "code": "const result = useResizeObserver(enabled, getTarget);",
+      "source": "canonical",
+      "compilable": true
+    },
+    "605adda93170929ef763469422e3708f248624774e5274b6053c7aa0c53b9680": {
+      "title": "Action And Close",
+      "code": "<Alert\n      {...args}\n      status=\"warning\"\n      title=\"New compliance checklist\"\n      body=\"A new checklist item is required before the next outbound transfer can be approved.\"\n      link={{ label: 'Open checklist', onClick: fn() }}\n      action={<Button onClick={fn()}>Review now</Button>}\n      closable\n      onClose={fn()}\n    />",
+      "source": "stories",
+      "compilable": false
+    },
+    "60cbcdaca9952007d461beb3b4f61ed1039f1a0faf6382bf593852a3a1e96d74": {
+      "title": "Canonical usage",
+      "code": "import { Skeleton } from '@1money/components-ui';\n// or\nimport { Skeleton } from '@1money/components-ui/Skeleton';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "61f7894b78494c7b8069bd9cba419dea3dc5215d42e3f43c87b4951f285b8421": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      {VARIANTS.map(variant => (\n        <div key={variant}>\n          <h3 style={{ marginBottom: 8 }}>{variant}</h3>\n          <Divider variant={variant} />\n          <Divider variant={variant}>{variant} with text</Divider>\n          <Divider variant={variant} orientation=\"left\">Left</Divider>\n          <Divider variant={variant} orientation=\"right\">Right</Divider>\n        </div>\n      ))}\n      <h3>Vertical</h3>\n      <div>\n        Text\n        {VARIANTS.map(variant => (\n          <React.Fragment key={variant}>\n            <Divider type=\"vertical\" variant={variant} />\n            {variant}\n          </React.Fragment>\n        ))}\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "62215ceb6b1bce283f5b3dce105d70132d7edfe684fc2e00f9c598761ae2abb4": {
+      "title": "Canonical usage",
+      "code": "import type { PopconfirmProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "63dbd5aa5b4f9b648a7f6152b99058966f4b36ade7cece4b750f71e4389a4dea": {
+      "title": "Usage",
+      "code": "<Carousel count={4} defaultActiveIndex={0} onChange={(index) => console.log(index)} />",
+      "source": "readme",
+      "compilable": true
+    },
+    "6478fc80ce583f333fa19561a67d364fae1c84389c5242714d4aa85e16ece19c": {
+      "title": "Ellipsis Custom Chars",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      <Typography.Label size=\"xs\" color=\"default-secondary\">start=6, end=6</Typography.Label>\n      <div style={CONSTRAINED_STYLE}>\n        <Typography.Body size=\"md\" ellipsis={{ start: 6, end: 6, tooltip: true }}>\n          {SENDER_ID}\n        </Typography.Body>\n      </div>\n\n      <Typography.Label size=\"xs\" color=\"default-secondary\">start=10, end=8</Typography.Label>\n      <div style={CONSTRAINED_STYLE}>\n        <Typography.Body size=\"md\" ellipsis={{ start: 10, end: 8, tooltip: true }}>\n          {SENDER_ID}\n        </Typography.Body>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "66d442fc9388c014800dbcc672d9dae750c1529fd05f0b26e8f4dbf091abd20b": {
+      "title": "Visual Spec",
+      "code": "<div style={PREVIEW_GRID_STYLE}>\n      <TooltipPreviewCard label=\"Title + body / left aligned\" title=\"Title\" body=\"Body text\" />\n      <TooltipPreviewCard label=\"Minimum width 48px\" body=\"Hi\" />\n      <TooltipPreviewCard label=\"Maximum width 400px on web\" title=\"Long title\" body={LONG_BODY} />\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "67584b9b52bd672e0ebac7428297a5655e868141267114cdc9637baff807b308": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Default</h3>\n        <Tabs\n          items={[\n            { key: 'tab1', label: 'Label' },\n            { key: 'tab2', label: 'Label' },\n            { key: 'tab3', label: 'Label' },\n          ]}\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>With Badges</h3>\n        <Tabs\n          items={[\n            { key: 'tab1', label: 'Label', badge: 10 },\n            { key: 'tab2', label: 'Label', badge: 5 },\n            { key: 'tab3', label: 'Label', badge: 20 },\n          ]}\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>With Disabled</h3>\n        <Tabs\n          items={[\n            { key: 'tab1', label: 'Label' },\n            { key: 'tab2', label: 'Label', disabled: true },\n            { key: 'tab3', label: 'Label' },\n          ]}\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Full Width</h3>\n        <Tabs\n          fullWidth\n          items={[\n            { key: 'tab1', label: 'Label' },\n            { key: 'tab2', label: 'Label' },\n            { key: 'tab3', label: 'Label' },\n          ]}\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "69b3c7f7f0c52a2b442c48facf31fa65600796fb8e47401b6b3c432389dbf92d": {
+      "title": "Slider Story",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ volume: 50, price: 200 }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormSlider\n        name=\"volume\"\n        label=\"Volume\"\n        fieldProps={{ min: 0, max: 100, step: 1 }}\n      />\n      <ProFormSlider\n        name=\"price\"\n        label=\"Price\"\n        fieldProps={{ min: 0, max: 1000, step: 10, valuePrefix: '$' }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "6a4d77a29ff76bfcd465b53ac79952fae765bb337ef3ca2affc7781ce487a74f": {
+      "title": "With Icon End",
+      "code": "<Button {...args} iconEnd={<Icons name=\"arrowRight\" />}>\n      Icon End\n    </Button>",
+      "source": "stories",
+      "compilable": false
+    },
+    "6c73541844cb6bb287f5a4f0c9d25be0cbdd0d09518b1abd0c49b8d738ddfaa8": {
+      "title": "Import",
+      "code": "import { Spinner } from '@1money/components-ui';\n// or\nimport { Spinner } from '@1money/components-ui/Spinner';",
+      "source": "readme",
+      "compilable": true
+    },
+    "6ccfe4f2a1e0923b5c6ee03d7662c164882ad513d3e32a35a1ea7b9500f17169": {
+      "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/components-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
+    },
+    "6f2b7da00479a6033fdaca36f0646a924c61cbf09cd0e07da6948a884af98a61": {
+      "title": "Dependency",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ hasAccount: false, accountType: '' }}\n    >\n      <ProFormSwitch name=\"hasAccount\" label=\"Has Account\" />\n      <ProFormDependency name={['hasAccount']}>\n        {({ hasAccount }) =>\n          hasAccount ? (\n            <>\n              <ProFormText\n                name=\"accountId\"\n                label=\"Account ID\"\n                rules={[{ required: true }]}\n              />\n              <ProFormText name=\"accountName\" label=\"Account Name\" />\n            </>\n          ) : null\n        }\n      </ProFormDependency>\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "701f468e63d72f0fe836f011aae7941f7202835fe80f43ae13f529a130c5a505": {
+      "title": "Semantic Tags",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      <Typography.Display size=\"sm\" as=\"h1\">\n        Display rendered as h1\n      </Typography.Display>\n      <Typography.Headline size=\"md\" as=\"h2\">\n        Headline rendered as h2\n      </Typography.Headline>\n      <Typography.Title size=\"lg\" as=\"h3\">\n        Title rendered as h3\n      </Typography.Title>\n      <Typography.Body size=\"md\" as=\"p\">\n        Body rendered as p for longer narrative content.\n      </Typography.Body>\n      <Typography.Label size=\"sm\" htmlFor=\"typography-story-input\">\n        Email address\n      </Typography.Label>\n      <input id=\"typography-story-input\" placeholder=\"Input target for label\" />\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "711c445955f338d909c2ca767156df860542cbd4c4a2dd6f4962abe54d6905fe": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormListAction } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "71f7aeb8fd7bb546bc7d562a717683681d8eccf7f2beeee86e3196121d6656f1": {
+      "title": "With Icon Start",
+      "code": "<Button {...args} iconStart={<Icons name=\"add\" />}>\n      Icon Start\n    </Button>",
+      "source": "stories",
+      "compilable": false
+    },
+    "724f2c2f5081ae9ec1b8b50f385cd5773c50b6ba6c8a9835738b3cd5184d59e5": {
+      "title": "Canonical usage",
+      "code": "import { Icons, IconWrapper, IconHover } from '@1money/components-ui';\n// or\nimport { Icons, IconWrapper, IconHover } from '@1money/components-ui/Icons';\n\n// Type import\nimport type { IconName } from '@1money/components-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "72e53f1f60724efcfebfca8207585573799139c8895777a6a6d283673008ba74": {
+      "title": "Import",
+      "code": "import { CoachMark } from '@1money/components-ui';\n// or\nimport { CoachMark } from '@1money/components-ui/CoachMark';",
+      "source": "readme",
+      "compilable": true
+    },
+    "7374135a0f5702e8c0e689b3ce2576b5c15b47c90d9fffe7c2bcff8693acd9ef": {
+      "title": "Default",
+      "code": "<Segment items={DEFAULT_ITEMS} />",
+      "source": "stories",
+      "compilable": true
+    },
+    "73da19095cdcbe4a8b8d7ec782967002cf9da27f5638d7ec08e376a8d777aeda": {
+      "title": "Controlled and Uncontrolled",
+      "code": "// Standalone controlled\n<Radio\n  label=\"Controlled\"\n  checked={value}\n  onChange={(event) => setValue(event.target.checked)}\n/>\n\n// Standalone uncontrolled\n<Radio label=\"Uncontrolled\" defaultChecked />\n\n// Group controlled\n<RadioGroup value={selected} onChange={handleChange}>\n  <Radio value=\"a\" label=\"Option A\" />\n  <Radio value=\"b\" label=\"Option B\" />\n</RadioGroup>\n\n// Group uncontrolled\n<RadioGroup defaultValue=\"a\">\n  <Radio value=\"a\" label=\"Option A\" />\n  <Radio value=\"b\" label=\"Option B\" />\n</RadioGroup>",
+      "source": "readme",
+      "compilable": true
+    },
+    "74f28ec19da10ee7a3cecb129f444ca1e9b9bfa6a44bda5422d89c70a079ddc3": {
+      "title": "Validation",
+      "code": "<ProForm\n      {...args}\n      initialValues={{}}\n      onFinish={(values) => alert('Success: ' + JSON.stringify(values))}\n    >\n      <ProFormText\n        name=\"username\"\n        label=\"Username\"\n        rules={[\n          { required: true, message: 'Username is required' },\n          { min: 3, message: 'At least 3 characters' },\n          { max: 20, message: 'At most 20 characters' },\n        ]}\n      />\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        rules={[\n          { required: true, message: 'Email is required' },\n          { pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/, message: 'Invalid email' },\n        ]}\n      />\n      <ProFormPassword\n        name=\"password\"\n        label=\"Password\"\n        rules={[\n          { required: true },\n          { min: 8, message: 'At least 8 characters' },\n        ]}\n      />\n      <ProFormCheckbox\n        name=\"terms\"\n        label=\"I accept the terms\"\n        rules={[\n          {\n            validator: (value) => {\n              if (!value) return 'You must accept the terms';\n              return true;\n            },\n          },\n        ]}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "76052e611a155b488f8eee38973e3b050274bc58b0a974f66b8c9a55e77e28b6": {
+      "title": "Canonical usage",
+      "code": "import { Typography } from '@1money/components-ui';\n// or\nimport { Typography } from '@1money/components-ui/Typography';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "76302edb4c36b3507a837c478a5be477379f78f3e0093f51d2c5874f610a1fb5": {
+      "title": "Detail Panel Spacing",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Space size={SPACE_SIZE.large} align={SPACE_ALIGN.start} style={{ width: '100%' }}>\n        <Space direction={SPACE_DIRECTION.vertical} size={SPACE_SIZE.middle} style={DEMO_COLUMN_STYLE}>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Business Name</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Registration Number</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Country</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Created At</div>\n        </Space>\n\n        <Space direction={SPACE_DIRECTION.vertical} size={SPACE_SIZE.middle} style={DEMO_COLUMN_STYLE}>\n          <Space split={<span>|</span>} size={SPACE_SIZE.small}>\n            <span>Risk: Medium</span>\n            <span>KYB: Reviewing</span>\n            <span>AML: Passed</span>\n          </Space>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Operator: Derrick</div>\n          <div style={DEMO_INLINE_ITEM_STYLE}>Last Updated: 2026-02-09</div>\n        </Space>\n      </Space>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "766dd217b19892aada825661298c8a2786c749173f3ec4d4f1f4a8e6aa0c5724": {
+      "title": "Ellipsis",
+      "code": "// Default: start=8, end=4\n<Typography.Body size=\"md\" ellipsis>\n  0x814f0d3a9b2c7e1f5d6a8b4c3e2f1a0d749f\n</Typography.Body>\n// Fits → 0x814f0d3a9b2c7e1f5d6a8b4c3e2f1a0d749f\n// Overflows → 0x814f0d...749f\n\n// Custom character counts\n<Typography.Body size=\"md\" ellipsis={{ start: 6, end: 6 }}>\n  0x814f0d3a9b2c7e1f5d6a8b4c3e2f1a0d749f\n</Typography.Body>\n// Overflows → 0x814f...0d749f\n\n// With tooltip showing full text on hover\n<Typography.Body size=\"md\" ellipsis={{ tooltip: true }}>\n  0x814f0d3a9b2c7e1f5d6a8b4c3e2f1a0d749f\n</Typography.Body>",
+      "source": "readme",
+      "compilable": true
+    },
+    "770c9ef1e8d4b176e14cf2288788ed37782cbbee674dbb3f3017c1714e81a200": {
+      "title": "Import",
+      "code": "import { Switch } from '@1money/components-ui';\n// or\nimport { Switch } from '@1money/components-ui/Switch';",
+      "source": "readme",
+      "compilable": true
+    },
+    "77b3bac4d9e36462c300020fa400a7cfe5bc7aa77bd896162f48c5d77a0ada23": {
+      "title": "Canonical usage",
+      "code": "import type { DrawerPlacement } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "784dd70341f79c53f5d9474c553dbaa803f65c317904a95d6b511fd57dcff804": {
+      "title": "Canonical usage",
+      "code": "<ProFormGroup />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "7880909af758a291affc6ba2a56af087c012f00945684528454d55e9faffbb53": {
+      "title": "Sidebar Content Layout",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Flex gap={GAP_MIDDLE} align={FLEX_ALIGN.start} justify={FLEX_JUSTIFY.start} wrap={WRAP_DISABLED}>\n        <Flex vertical gap={GAP_SMALL} style={{ ...DEMO_PANEL_STYLE, minWidth: 220 }}>\n          <div style={DEMO_ITEM_STYLE}>Menu Group A</div>\n          <div style={DEMO_ITEM_STYLE}>Menu Group B</div>\n          <div style={DEMO_ITEM_STYLE}>Menu Group C</div>\n        </Flex>\n\n        <Flex vertical gap={GAP_MIDDLE} style={{ ...DEMO_PANEL_STYLE, flex: 1 }}>\n          <Flex align={FLEX_ALIGN.center} justify={FLEX_JUSTIFY.spaceBetween}>\n            <div style={DEMO_ITEM_STYLE}>Page Title</div>\n            <Flex gap={GAP_SMALL}>\n              <div style={DEMO_ITEM_STYLE}>Export</div>\n              <div style={DEMO_ITEM_STYLE}>Create</div>\n            </Flex>\n          </Flex>\n          <div style={DEMO_PANEL_STYLE}>Main Content</div>\n          <Flex align={FLEX_ALIGN.center} justify={FLEX_JUSTIFY.end} gap={GAP_SMALL}>\n            <div style={DEMO_ITEM_STYLE}>Cancel</div>\n            <div style={DEMO_ITEM_STYLE}>Save</div>\n          </Flex>\n        </Flex>\n      </Flex>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "799a697a88c95889b4c090d62789d89c9f7e92453d3a048ccb28e552fbe17b5b": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormContextValue } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "79d6736104fbd2a0cdb0081045a650f31fb2cdc051f7170c185c73b5a70c2bf0": {
+      "title": "Canonical usage",
+      "code": "import type { TriggerAction } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "7ae894e8181a0534204e98888ca38826cde3925bb26787a732a0829c181669a3": {
+      "title": "Canonical usage",
+      "code": "import type { TourStep } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "7aff0837c66402bc8bfd244cefc96957343db1dc910f9d19c3fd5a4d38936448": {
+      "title": "Horizontal Scroll",
+      "code": "<div style={{ ...containerStyle, width: 400 }}>\n      <VirtualList\n        data={data1000}\n        height={300}\n        itemHeight={30}\n        itemKey=\"id\"\n        scrollWidth={800}\n      >\n        {(item: Item, _index, { style, offsetX }) => (\n          <div\n            style={{\n              ...itemStyle(30),\n              ...style,\n              transform: `translateX(-${offsetX}px)`,\n              width: 800,\n            }}\n          >\n            <span>Item {item.id}</span>\n            <span style={{ color: '#999', fontSize: 12 }}>Wide content here →</span>\n            <span style={{ marginLeft: 200 }}>End</span>\n          </div>\n        )}\n      </VirtualList>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "7b215bce46f64784de7156995e907e66d62ce4f4a9b7cb0950fa2f8f78463ad3": {
+      "title": "All Placements",
+      "code": "<div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(3, 1fr)',\n        gap: 48,\n        padding: 120,\n        textAlign: 'center',\n      }}\n    >\n      {PLACEMENTS.map((placement) => (\n        <div key={placement}>\n          <button id={`tooltip-${placement}`}>{placement}</button>\n          <Tooltip {...args} placement={placement} anchorSelect={`#tooltip-${placement}`} />\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "7b2c94c513acf5b275219e155daac0f581e31ca51335008c34cfe3aac8e86beb": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      {SIZES.map(size => (\n        <div key={size}>\n          <h3 style={{ marginBottom: 12 }}>{size}</h3>\n          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>\n            <Calendar\n              size={size}\n              label=\"Default\"\n              required\n              appendTo={null}\n            />\n            <Calendar\n              size={size}\n              label=\"Disabled\"\n              disabled\n              appendTo={null}\n            />\n            <Calendar\n              size={size}\n              label=\"Invalid\"\n              invalid\n              message=\"This field is required\"\n              appendTo={null}\n            />\n            <Calendar\n              size={size}\n              label=\"Success\"\n              success\n              message=\"Looks good!\"\n              appendTo={null}\n            />\n          </div>\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "7decc20ca0112ca8b497a08d1131565c7fc9d060ebdee8a34422d6f60b1a5c00": {
+      "title": "Non Virtual",
+      "code": "{\n    const smallData = generateData(20);\n    return (\n      <div style={containerStyle}>\n        <VirtualList\n          data={smallData}\n          height={300}\n          itemHeight={30}\n          itemKey=\"id\"\n          virtual={false}\n        >\n          {(item: Item) => (\n            <div style={itemStyle(item.height)}>\n              <span>Item {item.id} (non-virtual)</span>\n            </div>\n          )}\n        </VirtualList>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "7e1e1d6bbd91a0fc8b5a8fd8d047345df926d0330af9470a74e3bc6326e04ca1": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 400 }}>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Not Started</h3>\n        <Slider\n          label=\"Label\"\n          description=\"Description\"\n          valuePrefix=\"$\"\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Default (value=40)</h3>\n        <Slider\n          label=\"Label\"\n          description=\"Description\"\n          valuePrefix=\"$\"\n          defaultValue={40}\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Disabled</h3>\n        <Slider\n          label=\"Label\"\n          description=\"Description\"\n          valuePrefix=\"$\"\n          disabled\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Without Label</h3>\n        <Slider\n          description=\"Description\"\n          showLabel={false}\n          defaultValue={60}\n        />\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Without Description</h3>\n        <Slider\n          label=\"Label\"\n          valuePrefix=\"$\"\n          showDescription={false}\n          defaultValue={75}\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "7e26a59ffd74e1167b6e8cc158a6b4d57088a2809930de494ce3b85f7c59a718": {
+      "title": "Tag Group Wrap Layout",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Flex wrap={WRAP_ENABLED} gap={GAP_SMALL} align={FLEX_ALIGN.center} justify={FLEX_JUSTIFY.start}>\n        <div style={DEMO_TAG_STYLE}>Pending</div>\n        <div style={DEMO_TAG_STYLE}>Approved</div>\n        <div style={DEMO_TAG_STYLE}>Rejected</div>\n        <div style={DEMO_TAG_STYLE}>In Review</div>\n        <div style={DEMO_TAG_STYLE}>Manual Check</div>\n        <div style={DEMO_TAG_STYLE}>Needs Update</div>\n        <div style={DEMO_TAG_STYLE}>Completed</div>\n        <div style={DEMO_TAG_STYLE}>Escalated</div>\n      </Flex>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "7e423f9896eb2bcccdb051f9cae6f76f83c431686da59f2d1c5a3d6a8ce51474": {
+      "title": "Canonical usage",
+      "code": "import { Carousel } from '@1money/components-ui';\n// or\nimport { Carousel } from '@1money/components-ui/Carousel';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "7f54085ee6892564556d190e01d8e809af4cd0841f2c8c6876faeb511fbe8834": {
+      "title": "All Field Types",
+      "code": "<ProForm\n      {...args}\n      initialValues={{\n        text: 'Hello',\n        textWithButton: '',\n        password: 'secret123',\n        textarea: 'Multi-line\\ncontent',\n        agree: true,\n        options: [],\n        darkMode: false,\n        role: 'admin',\n        volume: 60,\n        date: null,\n      }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText name=\"text\" label=\"Text Input\" placeholder=\"Type here...\" />\n      <ProFormText\n        name=\"textWithButton\"\n        label=\"Text with Button\"\n        placeholder=\"Enter verification code\"\n        fieldProps={{\n          suffix: (\n            <Button color=\"primary\" size=\"small\" style={{ marginRight: -4 }}>\n              Send Code\n            </Button>\n          ),\n        }}\n      />\n      <ProFormPassword name=\"password\" label=\"Password\" placeholder=\"Password\" />\n      <ProFormTextArea name=\"textarea\" label=\"Text Area\" placeholder=\"Enter long text\" />\n      <ProFormCheckbox name=\"agree\" label=\"I agree to the terms\" />\n      <ProFormCheckboxGroup\n        name=\"options\"\n        label=\"Pick options\"\n        fieldProps={{\n          options: [\n            { label: 'Option A', value: 'a' },\n            { label: 'Option B', value: 'b' },\n            { label: 'Option C', value: 'c' },\n          ],\n        }}\n      />\n      <ProFormSwitch name=\"darkMode\" label=\"Dark Mode\" />\n      <ProFormRadioGroup\n        name=\"role\"\n        label=\"Role\"\n        fieldProps={{\n          direction: 'horizontal',\n          options: [\n            { label: 'Admin', value: 'admin' },\n            { label: 'Editor', value: 'editor' },\n            { label: 'Viewer', value: 'viewer' },\n          ],\n        }}\n      />\n      <ProFormSlider\n        name=\"volume\"\n        label=\"Volume\"\n        fieldProps={{ min: 0, max: 100 }}\n      />\n      <ProFormDatePicker\n        name=\"date\"\n        label=\"Date\"\n        fieldProps={{ dateFormat: 'yy-mm-dd' }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "7f9b721c6811ebeeeda10ed23eb590ad0f0d00b3e64ce2aedb8a6e3b12179071": {
+      "title": "Grouped Asset Options",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          value={value}\n          renderOption={renderAssetOption}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "7fcff23beb3f8649dd3c8e6b827035a4838bd0ceb71aec2a6debfbd16fc7d1f8": {
+      "title": "Basic",
+      "code": "<DrawerLauncher {...args} />",
+      "source": "stories",
+      "compilable": false
+    },
+    "802d7a93824c4a4841c52f2688f4d5b201b3c4f56435625c03ecafb2df0e8db6": {
+      "title": "Canonical usage",
+      "code": "import type { SelectStatus } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "81fa795ca4a1acae4ec31efda3c21167df7e3f24ad1461056a90469ff70b835a": {
+      "title": "Multi Select With Checkbox",
+      "code": "{\n    const [selected, setSelected] = useState<string[]>(['Banana', 'Date']);\n\n    const toggle = (item: string) => {\n      setSelected((prev) =>\n        prev.includes(item) ? prev.filter((v) => v !== item) : [...prev, item],\n      );\n    };\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 260 }}\n        content={\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n            {selected.length > 0 && (\n              <div style={selectedBarStyle}>\n                <span style={{ fontSize: 14, fontWeight: 500, color: '#131313' }}>\n                  {selected.length} selected\n                </span>\n                <button\n                  type=\"button\"\n                  style={clearAllBtnStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={16} color=\"#ae0000\" />\n                  Clear all\n                </button>\n              </div>\n            )}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n              {SIMPLE_ITEMS.map((item) => (\n                <div\n                  key={item}\n                  style={{\n                    padding: '6px 12px',\n                    borderRadius: 8,\n                    fontSize: 14,\n                    backgroundColor: selected.includes(item) ? '#f8f8f8' : 'transparent',\n                  }}\n                >\n                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }} onClick={() => toggle(item)}>\n                   <Checkbox\n                      checked={selected.includes(item)}\n                      onChange={() => toggle(item)}\n                   />\n                    <TypographyBody>{item}</TypographyBody>\n                  </div>\n\n                </div>\n              ))}\n            </div>\n          </div>\n        }\n      >\n        <Button>\n          {selected.length > 0 ? `${selected.length} selected` : 'Select items'}\n        </Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "8217407dd420ce682fb91f9e1bba564e90bed8d67c39533ac62c057b69593987": {
+      "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} />",
+      "source": "readme",
+      "compilable": true
+    },
+    "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>",
+      "source": "stories",
+      "compilable": false
+    },
+    "82ed28632bfdbef8997d2ce35118bfa9620a94a8c2ee8ebf3228c37f66eca988": {
+      "title": "Decorations",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      <Typography.Body size=\"md\" italic>\n        Italic body copy\n      </Typography.Body>\n      <Typography.Body size=\"md\" underline>\n        Underlined body copy\n      </Typography.Body>\n      <Typography.Body size=\"md\" delete>\n        Deleted body copy\n      </Typography.Body>\n      <Typography.Body size=\"md\" underline delete>\n        Underlined and deleted body copy\n      </Typography.Body>\n      <Typography.Link size=\"md\" href=\"https://ant.design/components/typography/\" underline delete>\n        Link with combined decoration\n      </Typography.Link>\n      <Typography.Label size=\"md\" disabled>\n        Disabled label\n      </Typography.Label>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "832687bdcc14df6731994d11b086d90daa70e8c701da773ecd71389df82887db": {
+      "title": "Usage",
+      "code": "<Tabs\n  defaultActiveKey=\"tab1\"\n  items={[\n    { key: 'tab1', label: 'Overview', badge: 5 },\n    { key: 'tab2', label: 'Transactions' },\n    { key: 'tab3', label: 'Analytics', disabled: true },\n  ]}\n  onChange={(key) => console.log('Active tab:', key)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "834b1493f597716ffd0faa47a8af73c11fd286bff5048777205a4596bd3e648b": {
+      "title": "Sync To Url",
+      "code": "<QueryFilter\n      {...args}\n      syncToUrl\n      onFinish={(values) => {\n        console.log('QueryFilter submit:', values);\n        alert('Check URL bar — params synced!\\n' + JSON.stringify(values));\n      }}\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    </QueryFilter>",
+      "source": "stories",
+      "compilable": false
+    },
+    "838291178b40cf32c5a10bdfadfad93e6a54827006c573ba8a145db2e9bf5697": {
+      "title": "Usage",
+      "code": "<Checkbox\n  checked={isChecked}\n  label=\"Accept terms\"\n  description=\"You must accept the terms to continue\"\n  onChange={(event) => setIsChecked(event.target.checked)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "83a7f14ec7ad74308dcc340c21d3a1bd3bfae1a54793a236229c65619188361f": {
+      "title": "Canonical usage",
+      "code": "import { Input } from '@1money/components-ui';\n// or\nimport { Input } from '@1money/components-ui/Input';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "83f9c4b31401922ddc84d60264badd258d516373ccfc2b81813bf57f5c7a1e5a": {
+      "title": "Canonical usage",
+      "code": "<ProFormFieldSet />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "842244e70f89e2aaf6941718de836ab3a6e08d642a4d4bb2e80cee160158470f": {
+      "title": "Default",
+      "code": "{\n    const sizes = ['large', 'small'] as const;\n    const statuses = ['default', 'error'] as const;\n    const valueTypes = ['Placeholder', 'Filled'] as const;\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n        {sizes.map((size) => (\n          <div key={size}>\n            <h3 style={{ margin: '0 0 16px', textTransform: 'capitalize' }}>{size}</h3>\n            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n              {statuses.map((status) =>\n                valueTypes.map((vt) => (\n                  <div key={`${status}-${vt}`} style={{ width: 310 }}>\n                    <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                      {status} / {vt}\n                    </p>\n                    <Input\n                      size={size}\n                      status={status}\n                      label=\"Label\"\n                      feedback=\"Feedback\"\n                      feedbackIcon={status === 'error' ? <Icons name=\"error\" size={16} /> : <Icons name=\"info\" size={16} />}\n                      placeholder=\"Value\"\n                      allowClear\n                      defaultValue={vt === 'Filled' ? 'Input value' : undefined}\n                    />\n                  </div>\n                )),\n              )}\n              {/* Read-Only */}\n              {valueTypes.map((vt) => (\n                <div key={`readonly-${vt}`} style={{ width: 310 }}>\n                  <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                    read-only / {vt}\n                  </p>\n                  <Input\n                    size={size}\n                    readOnly\n                    label=\"Label\"\n                    feedback=\"Feedback\"\n                    feedbackIcon={<Icons name=\"info\" size={16} />}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'Read-only value' : undefined}\n                  />\n                </div>\n              ))}\n              {/* Disabled */}\n              {valueTypes.map((vt) => (\n                <div key={`disabled-${vt}`} style={{ width: 310 }}>\n                  <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                    disabled / {vt}\n                  </p>\n                  <Input\n                    size={size}\n                    disabled\n                    label=\"Label\"\n                    feedback=\"Feedback\"\n                    feedbackIcon={<Icons name=\"info\" size={16} />}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'Disabled value' : undefined}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n\n        {/* ── With Prefix / Suffix ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>With Prefix / Suffix</h3>\n          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Prefix + Suffix</p>\n              <Input\n                label=\"Label\"\n                defaultValue=\"100\"\n                prefix={<span>USD</span>}\n                suffix={<span>Max</span>}\n                allowClear\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Prefix only</p>\n              <Input\n                label=\"Label\"\n                placeholder=\"Enter amount\"\n                prefix={<span>$</span>}\n                allowClear\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Suffix only</p>\n              <Input\n                label=\"Label\"\n                placeholder=\"Enter email\"\n                suffix={<span>@gmail.com</span>}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* ── Required / Info ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Required / Info</h3>\n          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Required</p>\n              <Input\n                label=\"Label\"\n                required\n                placeholder=\"Required field\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Optional (required=false)</p>\n              <Input\n                label=\"Label\"\n                required={false}\n                placeholder=\"Optional field\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>With Info</p>\n              <Input\n                label=\"Label\"\n                info=\"Optional hint\"\n                placeholder=\"Value\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>With Tip</p>\n              <Input\n                label=\"Label\"\n                tip=\"This is a helpful tooltip\"\n                placeholder=\"Value\"\n              />\n            </div>\n            <div style={{ width: 310 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Optional + Info + Tip</p>\n              <Input\n                label=\"Label\"\n                required={false}\n                info=\"Optional hint\"\n                tip=\"This is a helpful tooltip\"\n                placeholder=\"Value\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "85a3e1ad39461a191a1fdd7c9e26a2810d6e3f39e4304aad3029d5eec043b3d8": {
+      "title": "RadioGroup With Options",
+      "code": "const [selected, setSelected] = useState<string | number>('email');\n\n<RadioGroup\n  value={selected}\n  onChange={(event) => {\n    if (event.target.value !== undefined) {\n      setSelected(event.target.value);\n    }\n  }}\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', description: 'Receive on your device' },\n  ]}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "85bd84178bbfcd56c92db6d690a33530c91f2485e3d9d27441e33fdf838e377f": {
+      "title": "Canonical usage",
+      "code": "<ProFormList name=\"name\" />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "8635e5203dcc0ffc85bde3edc3cafc477676635bb31ab8c71a82f13a90c00b5d": {
+      "title": "Error",
+      "code": "<div style={wrapperStyle}>\n      <Step\n        {...args}\n        items={[\n          {\n            key: STEP_ITEM_KEYS.start,\n            title: STEP_SAMPLE_COPY.title,\n            description: STEP_SAMPLE_COPY.description,\n            status: STEP_STATUS.error,\n            tag: STEP_SAMPLE_COPY.tag,\n          },\n          {\n            key: STEP_ITEM_KEYS.complete,\n            title: STEP_SAMPLE_COPY.title,\n            description: STEP_SAMPLE_COPY.description,\n            status: STEP_STATUS.error,\n            tag: STEP_SAMPLE_COPY.tag,\n          },\n          {\n            key: STEP_ITEM_KEYS.error,\n            title: STEP_SAMPLE_COPY.title,\n            description: STEP_SAMPLE_COPY.description,\n            status: STEP_STATUS.default,\n            tag: STEP_SAMPLE_COPY.tag,\n          },\n        ]}\n      />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "86adb3cfba3b31e2471a79d61a1b957e43bef02210b83c118411573478e7d4d7": {
+      "title": "Canonical usage",
+      "code": "import { notification } from '@1money/components-ui';\n// or\nimport notification from '@1money/components-ui/Notification';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "87119f77a8e04ec0f07dec55f2ef7985b167400772592d70172ee644167c1ebe": {
+      "title": "Canonical usage",
+      "code": "<ProFormSwitch />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "87b1990f73c96b7555165d59c2646f36d1db7d9f27712298b04b46ac63020d03": {
+      "title": "Controlled",
+      "code": "{\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div style={POPCONFIRM_STORY_STYLE.controlledWrapper}>\n        <Popconfirm\n          {...args}\n          open={open}\n          onOpenChange={(nextOpen) => {\n            setOpen(nextOpen);\n            args.onOpenChange?.(nextOpen);\n          }}\n          onCancel={(event, context) => {\n            args.onCancel?.(event, context);\n            setOpen(false);\n          }}\n          onConfirm={(event, context) => {\n            args.onConfirm?.(event, context);\n            setOpen(false);\n          }}\n        >\n          <Button>{POPCONFIRM_DEMO_COPY.controlledTriggerText}</Button>\n        </Popconfirm>\n        <Button\n          size={BUTTON_SIZE.small}\n          color={BUTTON_COLOR.grey}\n          onClick={() => setOpen((prev) => !prev)}\n        >\n          {POPCONFIRM_DEMO_COPY.toggleText}: {open\n            ? POPCONFIRM_DEMO_COPY.openStateText\n            : POPCONFIRM_DEMO_COPY.closedStateText}\n        </Button>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "87dd752d00210f310d98413fe703cdc2d1dd610bd62efc974185675ea4f82d78": {
+      "title": "Canonical usage",
+      "code": "import type { DrawerFormProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "87df6d0f746b9be426eb490a25c877d56ac0252bcbdc0d69fa90260397387d4c": {
+      "title": "Canonical usage",
+      "code": "import type { DrawerProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "88336a196e8322974055de2b8c590f70ade08e176b0eac3f8cd6b72800b1b63a": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormListProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "88a98229b741820a7e0d61f5e3e8e51340ac8d1cc2eb5332be8189a42f43b6ff": {
+      "title": "No Animation",
+      "code": "<Tabs items={DEFAULT_ITEMS} animated={false} />",
+      "source": "stories",
+      "compilable": true
+    },
+    "88c9a5db9af74e9bf306d1fde453862a643a76dc012d945baefc628eb65abacc": {
+      "title": "Canonical usage",
+      "code": "import { Grid, Row, Col } from '@1money/components-ui';\n// or\nimport { Grid, Row, Col } from '@1money/components-ui/Grid';\nimport { GRID_ALIGN, GRID_JUSTIFY } from '@1money/components-ui/Grid';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "89acd530e5d3ac4d2f2cdc50085c98fc8d6ee5a3f488a16486455a35460bb354": {
+      "title": "Long Text",
+      "code": "<div style={PREVIEW_GRID_STYLE}>\n      <TooltipPreviewCard\n        label=\"Long body only\"\n        body={EXTRA_LONG_TEXT}\n      />\n      <TooltipPreviewCard\n        label=\"Long title + long body\"\n        title=\"This is a very long tooltip title that might wrap to multiple lines\"\n        body={EXTRA_LONG_TEXT}\n      />\n      <TooltipPreviewCard\n        label=\"Long body with placement right\"\n        body={EXTRA_LONG_TEXT}\n        placement=\"right\"\n      />\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "8a3e06c994d49e66e84658c981c59eb96d6e7a88fc16dbc6a2abf4d76493b94f": {
+      "title": "Import",
+      "code": "import { Carousel } from '@1money/components-ui';\n// or\nimport { Carousel } from '@1money/components-ui/Carousel';",
+      "source": "readme",
+      "compilable": true
+    },
+    "8bbc2c00d6f26600eaf14a2347cb6396fa9aed93dd50bb9b95614282b0c307ea": {
+      "title": "Colors",
+      "code": "<div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>\n      {LINK_COLORS.map((color) => (\n        <Link {...args} key={color} color={color}>\n          {color}\n        </Link>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "8d9b4b816f395924fb061a9384e54b2fc8e97a3bfd441367d6c70ff5397f23ec": {
+      "title": "Text With Icon",
+      "code": "<Button {...args} variant={BUTTON_VARIANT.text} iconEnd={<Icons name=\"arrowRight\" />}>\n      Learn More\n    </Button>",
+      "source": "stories",
+      "compilable": false
+    },
+    "8df6f3452cf569f7cd621f94c1dd995eb5ec459f581e7d193254034e7a6dbbd2": {
+      "title": "Large Dataset",
+      "code": "<div style={containerStyle}>\n      <VirtualList\n        data={data10000}\n        height={400}\n        itemHeight={30}\n        itemKey=\"id\"\n      >\n        {(item: Item) => (\n          <div style={itemStyle(30)}>\n            <span>Item {item.id}</span>\n            <span style={{ color: '#999', fontSize: 12 }}>{item.id + 1} / 10000</span>\n          </div>\n        )}\n      </VirtualList>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "8eb6ee9780aed6e852f19eb5e510f31bf0e507d50da449a6da3f1fb8f76b33bc": {
+      "title": "Canonical usage",
+      "code": "import { Flex } from '@1money/components-ui';\n// or\nimport { Flex } from '@1money/components-ui/Flex';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY, FLEX_WRAP } from '@1money/components-ui/Flex';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "8ee4eda344b62edf1015fe21cd52d4f5a5dd71cc3afca58644d9f941978f4f08": {
+      "title": "Canonical usage",
+      "code": "import { Tag } from '@1money/components-ui';\n// or\nimport { Tag } from '@1money/components-ui/Tag';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "8f2d97b44cca3977d39ba134e5981f875d9e8cf9cff20b301aed559b8870665b": {
+      "title": "Vertical",
+      "code": "Text <Divider type=\"vertical\" /> Text",
+      "source": "readme",
+      "compilable": true
+    },
+    "8ffb7323c737a0cc1f4c296336b8763bf0acdafb29eb029b4046496aaa1b4d27": {
+      "title": "Import",
+      "code": "import { Alert } from '@1money/components-ui';\n// or\nimport { Alert } from '@1money/components-ui/Alert';",
+      "source": "readme",
+      "compilable": true
+    },
+    "90952e793cfea81bc8613eaed2e1b60208c06b4e98ce6f0cc5a254619af9e93f": {
+      "title": "Illustrations",
+      "code": "// Old (still works)\nimport { Deprecated } from '@1money/components-ui';\n<Deprecated name=\"old-icon-name\" />\n\n// New (recommended)\nimport { Icons } from '@1money/components-ui';\n<Icons name=\"new-icon-name\" />",
+      "source": "readme",
+      "compilable": true
+    },
+    "90bea0eac958ff92526a0901cd2515a8694e96039b3d056e709ede70bd1b4678": {
+      "title": "Search Only Filtered",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>(undefined);\n    const [searchValue, setSearchValue] = useState('');\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={storyContainerStyle}>\n        <Select\n          {...args}\n          value={value}\n          options={filteredOptions}\n          searchValue={searchValue}\n          emptyContent={trimmed ? 'No matches' : 'Type to search assets'}\n          onSearchChange={(next) => {\n            setSearchValue(next);\n            args.onSearchChange?.(next);\n          }}\n          onChange={(nextValue, option) => {\n            setValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "92884b0ad016e0b0699fc547bc92043837674393d2d601ebe0fc0aa31ced6498": {
+      "title": "Canonical usage",
+      "code": "<Tour open steps={[]} onClose={() => {}} />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "92d700fd2da1bf06587fe4c86118bff9b3b4b42eb3ec5a4c9a790f7ac8950ff6": {
+      "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    </div>;\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "93778978611c05850a486471281bd8bb01ceeac22d3d7708ec1c59aaefb0ae95": {
+      "title": "Canonical usage",
+      "code": "import { Alert } from '@1money/components-ui';\n// or\nimport { Alert } from '@1money/components-ui/Alert';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "93b1291462e3499dc53cfc59ff3a287c0beb68213b4eb563c88cc64ce2158ba8": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormColProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "93b8b9acce6685bc6f00a21f857fc812e41fb754d3e946d7576e2543f056f1c0": {
+      "title": "Canonical usage",
+      "code": "import { Upload, UploadFileBar } from '@1money/components-ui';\n// or\nimport { Upload, UploadFileBar } from '@1money/components-ui/Upload';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "93d23d9eeea4da875fbe248ae5096c5ebccefaab935749a8067d38b9c0485be9": {
+      "title": "With Description",
+      "code": "<Switch {...args} label=\"Label\" description=\"Description\" />",
+      "source": "stories",
+      "compilable": false
+    },
+    "94f775f92f27f8bd4a4d9326ff913a157404db31807176b4ef09292284c90d8d": {
+      "title": "Basic Usage",
+      "code": "import { Grid } from '@1money/components-ui';\nimport { GRID_ALIGN, GRID_JUSTIFY } from '@1money/components-ui/Grid';\n\nconst GRID_GUTTER: [number, number] = [16, 8];\nconst SPAN_HALF = 6;\n\n<Grid gutter={GRID_GUTTER} justify={GRID_JUSTIFY.spaceBetween} align={GRID_ALIGN.middle}>\n  <Grid.Col span={SPAN_HALF}>Left</Grid.Col>\n  <Grid.Col span={SPAN_HALF}>Right</Grid.Col>\n</Grid>",
+      "source": "readme",
+      "compilable": true
+    },
+    "9532a16e360ac90c4955a5d2fb7dbfd364a470857fe111e7c0f76c886afe2153": {
+      "title": "Multiple",
+      "code": "{\n    const [value, setValue] = useState<Array<string | number>>([\n      'btc',\n      'eth',\n      'usdt',\n      'usdc',\n      'sol',\n      'doge',\n      'ada',\n      'matic',\n    ]);\n\n    return (\n      <Select\n        {...args}\n        multiple\n        value={value}\n        onChange={(nextValue, option) => {\n          setValue((nextValue as Array<string | number>) ?? []);\n          args.onChange?.(nextValue, option);\n        }}\n      />\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "957f519084a4f84fd6a79517a4f2c6a85245176f268b9c5f6e090ee983e82fa8": {
+      "title": "Single Content States",
+      "code": "<div style={stackStyle}>\n      <Alert\n        {...args}\n        title={multiLineTitle}\n        body={undefined}\n        link={undefined}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        title={undefined}\n        body={multiLineBody}\n        link={undefined}\n        closable={false}\n      />\n      <Alert\n        {...args}\n        title={multiLineTitle}\n        body={undefined}\n        link={{ label: 'Open details', onClick: fn() }}\n        closable={false}\n      />\n      <Alert\n\n        title={multiLineTitle}\n        body={undefined}\n        closable={false}\n        action={<Button onClick={(() => {\n          console.log('Action button clicked');\n        })}>Take action</Button>}\n      />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "95dc922235c54890ef40e287095692b232702132d592073e3c6b66efd6929f50": {
+      "title": "Canonical usage",
+      "code": "import { Copy } from '@1money/components-ui';\n// or\nimport { Copy } from '@1money/components-ui/Copy';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "96811d7b0b7448138a55d8b001aae58595a2e5201ba8bc5ef5ca1cf1a79a8524": {
+      "title": "Canonical usage",
+      "code": "import { Segment } from '@1money/components-ui';\n// or\nimport { Segment } from '@1money/components-ui/Segment';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "96e3c221e0a0bb936b1030912f88f56c0139a1804d4797492df913b9ec7b3766": {
+      "title": "Nested",
+      "code": "<Dropdown\n      {...args}\n      content={\n        <div style={panelContentStyle}>\n          <button type=\"button\" className=\"om-dropdown-item\">\n            Profile\n          </button>\n          <Dropdown\n            placement=\"right-start\"\n            content={\n              <div style={panelContentStyle}>\n                <button type=\"button\" className=\"om-dropdown-item\">\n                  English\n                </button>\n                <button type=\"button\" className=\"om-dropdown-item\">\n                  中文\n                </button>\n                <button type=\"button\" className=\"om-dropdown-item\">\n                  日本語\n                </button>\n              </div>\n            }\n          >\n            <button type=\"button\" className=\"om-dropdown-item\" style={{ justifyContent: 'space-between' }}>\n              Language\n              <Icons name=\"chevronRight\" size={14} color=\"#9fa3a3\" />\n            </button>\n          </Dropdown>\n          <button type=\"button\" className=\"om-dropdown-item\">\n            Settings\n          </button>\n          <button type=\"button\" className=\"om-dropdown-item\" style={{ color: '#e53935' }}>\n            Sign out\n          </button>\n        </div>\n      }\n    >\n      <Button>Menu</Button>\n    </Dropdown>",
+      "source": "stories",
+      "compilable": false
+    },
+    "96f9cfe7a3579cf1c7ff57afe66be83040e23794844ce4d35758cae32e1c7cdb": {
+      "title": "Usage",
+      "code": "<Navigation\n  items={[\n    { key: 'home', label: 'Home', icon: 'home', active: true },\n    { key: 'portfolio', label: 'Portfolio', icon: 'portfolio' },\n    { key: 'transactions', label: 'Transactions', icon: 'transactions', children: [\n      { key: 'deposits', label: 'Deposits' },\n      { key: 'withdrawals', label: 'Withdrawals' },\n    ]},\n  ]}\n  collapsible\n  onCollapse={(collapsed) => console.log(collapsed)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "97683a3f5c99b99a2b9a054edbee9d66d751fcb9ce9361898434af338708d3c9": {
+      "title": "Canonical usage",
+      "code": "<Step items={[]} />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "97c44f1fee50bdc6a2d6a8cb4b7c56c51a2997d2ea78b3647cce7b0c249f6f8c": {
+      "title": "Import",
+      "code": "import { Tooltip } from '@1money/components-ui';\n// or\nimport { Tooltip } from '@1money/components-ui/Tooltip';",
+      "source": "readme",
+      "compilable": true
+    },
+    "97d3304eb6ad0bcd991e2dcc8d7d92caa6f844fd15f4fe6aa0b33d374d922ecd": {
+      "title": "Basic Usage",
+      "code": "<Radio\n  label=\"Accept terms\"\n  checked={isChecked}\n  onChange={(event) => setIsChecked(event.target.checked)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "9856c3fcdf26046e1e631b2aeb36d7da1f1f316ddb5a33f17c71a0434111aea0": {
+      "title": "Default",
+      "code": "{\n    const [open, setOpen] = useState(false);\n    const uploadRef = useRef<HTMLButtonElement>(null);\n    const saveRef = useRef<HTMLButtonElement>(null);\n    const moreRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <div>\n        <Button color=\"primary\" onClick={() => setOpen(true)}>\n          Begin Tour\n        </Button>\n\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 48, marginTop: 40, width: 500 }}>\n          <div style={{ alignSelf: 'flex-start' }}>\n            <Button ref={uploadRef} variant=\"text\">Upload</Button>\n          </div>\n          <div style={{ alignSelf: 'center' }}>\n            <Button ref={saveRef} color=\"primary\">Save</Button>\n          </div>\n          <div style={{ alignSelf: 'flex-end' }}>\n            <Button ref={moreRef} variant=\"text\">···</Button>\n          </div>\n        </div>\n\n        <Tour\n          open={open}\n          onClose={() => setOpen(false)}\n          steps={[\n            {\n              target: uploadRef,\n              placement: 'bottom',\n              heading: 'Upload File',\n              body: 'Click to upload your files.',\n            },\n            {\n              target: saveRef,\n              placement: 'bottom',\n              heading: 'Save',\n              body: 'Save your changes.',\n            },\n            {\n              target: moreRef,\n              placement: 'bottom',\n              heading: 'More',\n              body: 'Click for more options.',\n            },\n          ]}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "991d316ea63cfd7ffbebf14b3b1e27e44442737febab245a5576b67e01d3af2a": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', gap: 48 }}>\n      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16 }}>\n        <h3>Rectangle</h3>\n        <Skeleton />\n        <Skeleton width=\"10rem\" />\n        <Skeleton width=\"5rem\" />\n        <Skeleton height=\"2rem\" />\n        <Skeleton width=\"10rem\" height=\"4rem\" />\n\n        <h3 style={{ marginTop: 8 }}>Rounded</h3>\n        <Skeleton borderRadius=\"16px\" />\n        <Skeleton width=\"10rem\" borderRadius=\"16px\" />\n        <Skeleton width=\"5rem\" borderRadius=\"16px\" />\n        <Skeleton height=\"2rem\" borderRadius=\"16px\" />\n        <Skeleton width=\"10rem\" height=\"4rem\" borderRadius=\"16px\" />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n        <h3>Square</h3>\n        <div style={{ display: 'flex', gap: 8 }}>\n          <Skeleton size=\"2rem\" />\n          <Skeleton size=\"3rem\" />\n          <Skeleton size=\"4rem\" />\n          <Skeleton size=\"5rem\" />\n        </div>\n\n        <h3 style={{ marginTop: 8 }}>Circle</h3>\n        <div style={{ display: 'flex', gap: 8 }}>\n          <Skeleton shape=\"circle\" size=\"2rem\" />\n          <Skeleton shape=\"circle\" size=\"3rem\" />\n          <Skeleton shape=\"circle\" size=\"4rem\" />\n          <Skeleton shape=\"circle\" size=\"5rem\" />\n        </div>\n      </div>\n    </div>",
+      "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
+    },
+    "995eb8461d39460977e9818109030cdeb75f213495063aab77b583441e8d6a76": {
+      "title": "Basic Usage",
+      "code": "import { Flex } from '@1money/components-ui';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY } from '@1money/components-ui/Flex';\n\n<Flex gap={FLEX_GAP.middle} align={FLEX_ALIGN.center} justify={FLEX_JUSTIFY.spaceBetween}>\n  <div>Left</div>\n  <div>Right</div>\n</Flex>",
+      "source": "readme",
+      "compilable": true
+    },
+    "9a5aa0a4875e686c1a64a1085ed22b25ebf5849ebf8bf0cd0fb6376c887729ab": {
+      "title": "Canonical usage",
+      "code": "<DrawerForm />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "9a6b2f4b0ce1fdea4c73f1f9ea0d1471dc97d3dd7783c798b6b99ddc7f3bf15c": {
+      "title": "Import",
+      "code": "import { Skeleton } from '@1money/components-ui';\n// or\nimport { Skeleton } from '@1money/components-ui/Skeleton';",
+      "source": "readme",
+      "compilable": true
+    },
+    "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>",
+      "source": "stories",
+      "compilable": true
+    },
+    "9b24b5a45401922ce5317e6b1dcdc28a9caba33fd0c952afb36b62e7cea62ea9": {
+      "title": "Canonical usage",
+      "code": "<ProFormSelect />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "9c4b5f475fd76261b4364f04f169997152a1ceea87575298d7a413fd0a551085": {
+      "title": "Canonical usage",
+      "code": "import type { FormCoreInstance } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "9d095c31abb7ac97c40b817bfca40bcb706f8b8572f9a6af7218643f08b7464b": {
+      "title": "Import",
+      "code": "import { Flex } from '@1money/components-ui';\n// or\nimport { Flex } from '@1money/components-ui/Flex';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY, FLEX_WRAP } from '@1money/components-ui/Flex';",
+      "source": "readme",
+      "compilable": true
+    },
+    "9eae41b47da6d3b07d6bfdb98fe407b6be85aa68db3fe695699cf9588b65eda8": {
+      "title": "Placements",
+      "code": "{\n    const placements: Placement[] = [\n      'top',\n      'top-start',\n      'top-end',\n      'bottom',\n      'bottom-start',\n      'bottom-end',\n      'left',\n      'left-start',\n      'left-end',\n      'right',\n      'right-start',\n      'right-end',\n    ];\n\n    return (\n      <div\n        style={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: 12,\n          padding: 120,\n          justifyContent: 'center',\n        }}\n      >\n        {placements.map((placement) => (\n          <Dropdown\n            {...args}\n            key={placement}\n            placement={placement}\n            content={\n              <div style={{ padding: 8, fontSize: 13, whiteSpace: 'nowrap' }}>\n                {placement}\n              </div>\n            }\n          >\n            <Button size=\"small\">{placement}</Button>\n          </Dropdown>\n        ))}\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "9f45424f9178a891c69cb91fbb3cdf939868a5fd8c6570516eff0fb74a449cc9": {
+      "title": "Vertical",
+      "code": "<div>\n      Text\n      <Divider type=\"vertical\" />\n      <a href=\"#\">Link</a>\n      <Divider type=\"vertical\" />\n      <a href=\"#\">Link</a>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "a0079a48172d1c0f7be06f282a42c0f276ba3128f87074785f69d97884b29375": {
+      "title": "Group Label Placement Right",
+      "code": "{\n    const [value, setValue] = React.useState<string | number>('a');\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} labelPlacement=\"right\">\n        <Radio value=\"a\" label=\"Option A\" description=\"Description A\" />\n        <Radio value=\"b\" label=\"Option B\" description=\"Description B\" />\n      </RadioGroup>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "a0db5e8a8634435b7717e8162c8d43cd1a6918c73fb73a44d76d56fa6d532de2": {
+      "title": "Canonical usage",
+      "code": "import type { ProgressState } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "a0eaa77614f8bc2563173aa4c68d578c2a7d2957ec1696516c9656d43737f7e2": {
+      "title": "Import",
+      "code": "import { Segment } from '@1money/components-ui';\n// or\nimport { Segment } from '@1money/components-ui/Segment';",
+      "source": "readme",
+      "compilable": true
+    },
+    "a148c8eb1938e582f665219c3d3266bc21931e8547a0e516ec73f3a420387ec3": {
+      "title": "Usage",
+      "code": "<Link disabled>Read more</Link>",
+      "source": "readme",
+      "compilable": true
+    },
+    "a304a3d6b1220502a36e9ed2e198e53f9ce51219f0ff9f64776058c9f3798045": {
+      "title": "Copyable Text",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      <Typography.Body size=\"md\" copyable>\n        Plain text with copy action\n      </Typography.Body>\n      <Typography.Body size=\"md\" copyable={{ text: 'custom-override-value' }}>\n        Copy uses a different value\n      </Typography.Body>\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>",
+      "source": "readme",
+      "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
+    },
+    "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  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "a5a04f0b0f7ad14c2ae616df4f7820ea44171f7317f4ba0ab23f15985159dc24": {
+      "title": "Group Directions",
+      "code": "{\n    const [verticalValue, setVerticalValue] = React.useState<string | number>('a');\n    const [horizontalValue, setHorizontalValue] = React.useState<string | number>('a');\n\n    const handleVerticalChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setVerticalValue(event.target.value);\n      }\n    };\n\n    const handleHorizontalChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setHorizontalValue(event.target.value);\n      }\n    };\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n        <div>\n          <h3 style={{ marginBottom: 12 }}>Direction Vertical</h3>\n          <RadioGroup value={verticalValue} onChange={handleVerticalChange} direction=\"vertical\">\n            <Radio value=\"a\" label=\"Option A\" />\n            <Radio value=\"b\" label=\"Option B\" />\n            <Radio value=\"c\" label=\"Option C\" />\n          </RadioGroup>\n        </div>\n        <div>\n          <h3 style={{ marginBottom: 12 }}>Direction Horizontal</h3>\n          <RadioGroup value={horizontalValue} onChange={handleHorizontalChange} direction=\"horizontal\">\n            <Radio value=\"a\" label=\"Option A\" />\n            <Radio value=\"b\" label=\"Option B\" />\n            <Radio value=\"c\" label=\"Option C\" />\n          </RadioGroup>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "a5ae14150d1724de4984c10921713734e86d15771efe397f3015a01c77d13676": {
+      "title": "Canonical usage",
+      "code": "import { Cell } from '@1money/component-ui';\n// or\nimport { Cell } from '@1money/component-ui/Cell';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "a823300963fcf8c4ccf8e531c42aa78d7ab59841b405c471d5c0c0d6ac0b9b22": {
+      "title": "Text Area",
+      "code": "{\n    const states = ['default', 'error'] as const;\n    const valueTypes = ['Placeholder', 'Filled'] as const;\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n        {/* ── Large ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Large</h3>\n          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n            {states.map((status) =>\n              valueTypes.map((vt) => (\n                <div key={`${status}-${vt}`} style={{ width: 400 }}>\n                  <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                    {status} / {vt}\n                  </p>\n                  <Input.TextArea\n                    label=\"Label\"\n                    feedback=\"Feedback\"\n                    feedbackIcon={status === 'error' ? <Icons name=\"error\" size={16} /> : <Icons name=\"info\" size={16} />}\n                    status={status}\n                    placeholder=\"Value\"\n                    defaultValue={vt === 'Filled' ? 'Longer memo value that spans multiple lines to demonstrate the filled state of the textarea component' : undefined}\n                    rows={4}\n                    showCount\n                    maxLength={250}\n                  />\n                </div>\n              )),\n            )}\n            {/* Disabled */}\n            {valueTypes.map((vt) => (\n              <div key={`disabled-${vt}`} style={{ width: 400 }}>\n                <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>\n                  disabled / {vt}\n                </p>\n                <Input.TextArea\n                  label=\"Label\"\n                  feedback=\"Feedback\"\n                  feedbackIcon={<Icons name=\"info\" size={16} />}\n                  disabled\n                  placeholder=\"Value\"\n                  defaultValue={vt === 'Filled' ? 'Disabled filled value' : undefined}\n                  rows={4}\n                  showCount\n                  maxLength={250}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* ── Small ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Small</h3>\n          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n            <div style={{ width: 400 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>default / Placeholder</p>\n              <Input.TextArea\n                size=\"small\"\n                label=\"Label\"\n                feedback=\"Feedback\"\n                feedbackIcon={<Icons name=\"info\" size={16} />}\n                placeholder=\"Value\"\n                rows={3}\n                showCount\n                maxLength={250}\n              />\n            </div>\n            <div style={{ width: 400 }}>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>default / Filled</p>\n              <Input.TextArea\n                size=\"small\"\n                label=\"Label\"\n                feedback=\"Feedback\"\n                feedbackIcon={<Icons name=\"info\" size={16} />}\n                placeholder=\"Value\"\n                defaultValue=\"Small filled value\"\n                rows={3}\n                showCount\n                maxLength={250}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "a95b0ad034e07b035fd0d4b861b4bb29fe68e7e04c8f0d3541178f4e15b7b0d1": {
+      "title": "Canonical usage",
+      "code": "import type { CreateProFormFieldConfig } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "aa0e9842f54e521f7ff371e51003e26ed69263bef1d5d37baaa5fd6fa189e32c": {
+      "title": "Split Example",
+      "code": "<Space split={<span>|</span>} size={SPACE_SIZE.small}>\n  <span>Alpha</span>\n  <span>Beta</span>\n  <span>Gamma</span>\n</Space>",
+      "source": "readme",
+      "compilable": true
+    },
+    "aa54a561acdb2781536fc6d5bf4b05fc2a4ec7cc3a1952f3d8aa3086f866754a": {
+      "title": "Canonical usage",
+      "code": "import type { StepItem } from '@1money/component-ui';",
+      "source": "canonical",
+      "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
+    },
+    "acab0e7cc530a58ffcca4edc686eb0a0b922021deac39c66bbd80ffd9d82ab5f": {
+      "title": "Variable Height",
+      "code": "<div style={containerStyle}>\n      <VirtualList\n        data={data1000}\n        height={300}\n        itemHeight={30}\n        itemKey=\"id\"\n      >\n        {(item: Item) => (\n          <div style={itemStyle(item.height)}>\n            <span>Item {item.id}</span>\n            <span style={{ color: '#999', fontSize: 12 }}>height: {item.height}px</span>\n          </div>\n        )}\n      </VirtualList>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "acd535782a8b3c08a8b1bb58612e250607a8c0fae373a31b2d8e0fc704d4721e": {
+      "title": "Usage",
+      "code": "const items = [\n  { key: '1', title: 'Section Title', children: 'Content here...' },\n  { key: '2', title: 'Another Section', children: 'More content...' },\n];\n\n<Accordion items={items} />\n<Accordion items={items} variant=\"stroke\" size=\"small\" />\n<Accordion items={items} multiple defaultActiveKeys={['1', '2']} />",
+      "source": "readme",
+      "compilable": true
+    },
+    "ae23f0d9349157c952b7752e33ea302d85c3d3f09654ece8ddf9107f7b194b68": {
+      "title": "Usage",
+      "code": "{/* Hover trigger (default) */}\n<button id=\"my-trigger\">Hover me</button>\n<Tooltip anchorSelect=\"#my-trigger\" body=\"Simple tooltip\" />\n\n{/* With title */}\n<button id=\"info-trigger\">Info</button>\n<Tooltip anchorSelect=\"#info-trigger\" title=\"Heading\" body=\"Detailed text\" placement=\"bottom\" />\n\n{/* Controlled */}\n<button id=\"ctrl-trigger\">Controlled</button>\n<Tooltip anchorSelect=\"#ctrl-trigger\" body=\"Controlled tooltip\" open={isOpen} onOpenChange={setIsOpen} />\n\n{/* Click trigger */}\n<button id=\"click-trigger\">Click me</button>\n<Tooltip\n  anchorSelect=\"#click-trigger\"\n  body=\"Click tooltip\"\n  openEvents={{ click: true, mouseover: false, mouseenter: false, focus: false }}\n  closeEvents={{ click: true, mouseleave: false, mouseout: false, blur: false }}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "aeb5b3145a02eaf5de7b756aa71f963aac5ab51ac00f7f76dbc2599ab7634b3a": {
+      "title": "Canonical usage",
+      "code": "import type { VirtualListProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "af6172fd099200e93181aeb231c5d69c5b4b4d057a1f32935aa2f35ed86ffebe": {
+      "title": "Search",
+      "code": "{\n    const onSearch = fn();\n    const sizes = ['large', 'small'] as const;\n    const columns = [\n      { label: 'Default', props: {} },\n      { label: 'Disabled', props: { disabled: true } },\n    ];\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n        {sizes.map((size) => (\n          <div key={size}>\n            <h3 style={{ margin: '0 0 16px', textTransform: 'capitalize' }}>{size}</h3>\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n              {/* Placeholder row */}\n              <div>\n                <p style={{ margin: '0 0 8px', color: '#666', fontSize: 13 }}>Placeholder</p>\n                <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>\n                  {columns.map((col) => (\n                    <div key={col.label} style={{ width: 310 }}>\n                      <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>{col.label}</p>\n                      <Input.Search\n                        size={size}\n                        placeholder=\"Search\"\n                        onSearch={onSearch}\n                        {...col.props}\n                      />\n                    </div>\n                  ))}\n                </div>\n              </div>\n              {/* Filled row */}\n              <div>\n                <p style={{ margin: '0 0 8px', color: '#666', fontSize: 13 }}>Filled</p>\n                <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>\n                  {columns.map((col) => (\n                    <div key={col.label} style={{ width: 310 }}>\n                      <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>{col.label}</p>\n                      <Input.Search\n                        size={size}\n                        placeholder=\"Search\"\n                        defaultValue=\"Search\"\n                        allowClear\n                        onSearch={onSearch}\n                        {...col.props}\n                      />\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          </div>\n        ))}\n        {/* Loading */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Loading</h3>\n          <div style={{ display: 'flex', gap: 16 }}>\n            <div style={{ width: 310 }}>\n              <Input.Search\n                placeholder=\"Search\"\n                defaultValue=\"Search\"\n                loading\n                onSearch={onSearch}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "af895efcacf8986532f0595254021a9fc61222edede0123afbd36e0ca9de61bc": {
+      "title": "Canonical usage",
+      "code": "<ProFormCheckbox />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b01e2ee6d41091e4a6c12c9a96eb56c7c35c717754ac47bc643756c276654869": {
+      "title": "With Both Icons",
+      "code": "<Button {...args} iconStart={<Icons name=\"add\" />} iconEnd={<Icons name=\"arrowRight\" />}>\n      Both Icons\n    </Button>",
+      "source": "stories",
+      "compilable": false
+    },
+    "b040eead4ef6d0382049572436b1eb5a21c9357a41e519f5204a58fc04e0c1ab": {
+      "title": "Usage",
+      "code": "<Copy\n  value=\"Text to copy\"\n  onSuccess={(val) => console.log('Copied:', val)}\n  onError={(val) => console.log('Failed:', val)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "b0c2a7a4682cc6d39e1a0404cc97bb0a8e70753ca73f95e40a82e692077ed4d4": {
+      "title": "With Description",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <Radio label=\"Option 1\" description=\"Description for option 1\" />\n      <Radio\n        label=\"Option 2\"\n        description=\"Description for option 2\"\n        checked\n      />\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "b10ee9c589c50c54ef2d4a90431dccecd7acbe7e6c56c234cf8b3d476fcd9e00": {
+      "title": "Scroll To",
+      "code": "{\n    const listRef = useRef<ListRef>(null);\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12, flexWrap: 'wrap', display: 'flex' }}>\n          <button style={btnStyle} onClick={() => listRef.current?.scrollTo(0)}>\n            Scroll to top\n          </button>\n          <button\n            style={btnStyle}\n            onClick={() => listRef.current?.scrollTo({ index: 50, align: 'top' })}\n          >\n            Index 50 (top)\n          </button>\n          <button\n            style={btnStyle}\n            onClick={() => listRef.current?.scrollTo({ index: 50, align: 'bottom' })}\n          >\n            Index 50 (bottom)\n          </button>\n          <button\n            style={btnStyle}\n            onClick={() => listRef.current?.scrollTo({ index: 50, align: 'auto' })}\n          >\n            Index 50 (auto)\n          </button>\n          <button\n            style={btnStyle}\n            onClick={() => listRef.current?.scrollTo({ index: 999, align: 'bottom' })}\n          >\n            Scroll to last\n          </button>\n          <button\n            style={btnStyle}\n            onClick={() =>\n              listRef.current?.scrollTo({ index: 100, align: 'top', offset: 20 })\n            }\n          >\n            Index 100 + 20px offset\n          </button>\n          <button\n            style={btnStyle}\n            onClick={() => listRef.current?.scrollTo({ key: 200, align: 'top' })}\n          >\n            Key 200 (top)\n          </button>\n        </div>\n        <div style={containerStyle}>\n          <VirtualList\n            ref={listRef}\n            data={data1000}\n            height={300}\n            itemHeight={30}\n            itemKey=\"id\"\n          >\n            {(item: Item) => (\n              <div style={itemStyle(item.height)}>\n                <span>Item {item.id}</span>\n              </div>\n            )}\n          </VirtualList>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "b1c6f9400c9b8e40e5ce950447b02ac670b68a1e55242b16a8dc86249f792a7f": {
+      "title": "Canonical usage",
+      "code": "<p>Above</p>\n<Divider />\n<p>Below</p>",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b401bcf29ce360237f303ffbc81511ca04225c2399c82206a9313ca93d71ee07": {
+      "title": "Full Featured",
+      "code": "{\n    const [query, setQuery] = useState('');\n    const [selected, setSelected] = useState<string[]>(['USD', 'USDT', 'SOL']);\n\n    const toggle = (code: string) => {\n      setSelected((prev) =>\n        prev.includes(code) ? prev.filter((v) => v !== code) : [...prev, code],\n      );\n    };\n\n    const filtered = CURRENCIES.filter(\n      (c) =>\n        c.code.toLowerCase().includes(query.toLowerCase()) ||\n        c.name.toLowerCase().includes(query.toLowerCase()),\n    );\n\n    const groups = useMemo(() => {\n      const map = new Map<string, CurrencyItem[]>();\n      filtered.forEach((c) => {\n        const list = map.get(c.group) ?? [];\n        list.push(c);\n        map.set(c.group, list);\n      });\n      return map;\n    }, [filtered]);\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 420 }}\n        content={\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>\n            {/* Selected bar */}\n            {selected.length > 0 && (\n              <div style={selectedBarStyle}>\n                <span style={{ fontSize: 14, fontWeight: 500, color: '#131313' }}>\n                  {selected.length} selected\n                </span>\n                <button\n                  type=\"button\"\n                  style={clearAllBtnStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={16} color=\"#ae0000\" />\n                  Clear all\n                </button>\n              </div>\n            )}\n\n            {/* Search */}\n            <div style={{ padding: '8px 0' }}>\n              <Input.Search\n                size=\"small\"\n                placeholder=\"Search\"\n                value={query}\n                onChange={setQuery}\n                allowClear\n              />\n            </div>\n\n            {/* Grouped items */}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n              {Array.from(groups.entries()).map(([group, items]) => (\n                <div key={group} style={{ display: 'flex', flexDirection: 'column' }}>\n                  <div style={groupHeaderStyle}>{group}</div>\n                  {items.map((item) => (\n                    <DropdownItem\n                      key={item.code}\n                      selected={selected.includes(item.code)}\n                      left={<CurrencyIcon flag={item.flag} />}\n                      title={item.code}\n                      subtitle={item.name}\n                      right={\n                        <p style={itemAmountStyle}>\n                          {item.amount}\n                          {item.amountUsd && (\n                            <>\n                              <br />\n                              {item.amountUsd}\n                            </>\n                          )}\n                        </p>\n                      }\n                      onClick={() => toggle(item.code)}\n                    />\n                  ))}\n                </div>\n              ))}\n              {filtered.length === 0 && (\n                <p style={{ ...itemSubtitleStyle, padding: '8px 12px' }}>\n                  No results found\n                </p>\n              )}\n            </div>\n          </div>\n        }\n      >\n        <Button>\n          {selected.length > 0 ? `${selected.length} currencies selected` : 'Select currencies'}\n        </Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "b5058892460d3456a042642b413b9da4a784488bd7e21f991f40aea1d5d14a93": {
+      "title": "Canonical usage",
+      "code": "import type { LabelAlign } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b5122ab00632d0b9f9f205345094b8cc87d3de0e265bfa06f77f8c0538a72a4a": {
+      "title": "Import",
+      "code": "import { Link } from '@1money/component-ui';\n// or\nimport { Link } from '@1money/component-ui/Link';",
+      "source": "readme",
+      "compilable": true
+    },
+    "b53d16f186c5371a04bc88eb4e5f48d69652f711a0b9596a5b520eea56fd12b7": {
+      "title": "Usage",
+      "code": "<Link href=\"https://docs.1money.com\" target=\"_blank\">\n  Documentation\n</Link>",
+      "source": "readme",
+      "compilable": true
+    },
+    "b544632e1c68a8027a7dc14c2772e211df6fcaa76bf806baaff18f201ed75656": {
+      "title": "Canonical usage",
+      "code": "<Table rowKey=\"id\" columns={columns} dataSource={rows} />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b5c565a619ca8c6ea6be3771a025e08245ee1157433a0f25341df72da8c82c84": {
+      "title": "Canonical usage",
+      "code": "import type { VirtualListRef } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b5cf05bb6a8f45cfcd470fe1172b358fbd92178d3eece19d966999aa3f077105": {
+      "title": "Canonical usage",
+      "code": "import { Link } from '@1money/component-ui';\n// or\nimport { Link } from '@1money/component-ui/Link';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b669352c8c48a5998e787d52dcf642775655517e1ea3c28da5047402bfb8f815": {
+      "title": "Canonical usage",
+      "code": "import type { ResizeObserverSizeInfo } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b6bf8d1eebcfbb2bb8d4eef7f3fbb26233d5abe1febad432c6cb4d4af6ad7a79": {
+      "title": "Multiple Children",
+      "code": "{\n    const [sizes, setSizes] = useState<Record<string, SizeInfo>>({});\n\n    const handleResize = (key: string) => (sizeInfo: SizeInfo) => {\n      setSizes((prev) => ({ ...prev, [key]: sizeInfo }));\n    };\n\n    return (\n      <div>\n        <p style={{ marginBottom: 8, color: '#666' }}>\n          Each box independently reports its size:\n        </p>\n        <div style={{ display: 'flex', gap: 16 }}>\n          {['A', 'B', 'C'].map((key) => (\n            <ResizeObserver key={key} onResize={handleResize(key)}>\n              <div\n                style={{\n                  ...boxStyle,\n                  minWidth: 120,\n                  width: 120 + ['A', 'B', 'C'].indexOf(key) * 40,\n                }}\n              >\n                Box {key}\n                {sizes[key] && (\n                  <div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>\n                    {sizes[key].width} × {sizes[key].height}\n                  </div>\n                )}\n              </div>\n            </ResizeObserver>\n          ))}\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "b85a9a4218f89a3b1cc4d062fb58ddec812f1555b1c52d1a71d3a3131c1c55da": {
+      "title": "Default",
+      "code": "<Popconfirm {...args}>\n      <Button color={BUTTON_COLOR.danger}>{POPCONFIRM_DEMO_COPY.destructive.triggerText}</Button>\n    </Popconfirm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "b91a32c9ec2ecd84c681d080f87903691347b1bed2ec950e4e4d52c3df72ebd3": {
+      "title": "Import",
+      "code": "import { Copy } from '@1money/components-ui';\n// or\nimport { Copy } from '@1money/components-ui/Copy';",
+      "source": "readme",
+      "compilable": true
+    },
+    "ba061872d363c81e7be320d4e4c26b4ed1989d21480077c3a3055d45d54f1afd": {
+      "title": "Icon Hover Demo",
+      "code": "<div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>\n      <IconHover>\n        <Icons {...args} name='deposit' />\n      </IconHover>\n      <IconHover>\n        <Icons {...args} name='withdrawal' />\n      </IconHover>\n      <IconHover>\n        <Icons {...args} name='conversion' />\n      </IconHover>\n      <IconHover>\n        <Icons {...args} name='settings' />\n      </IconHover>\n      <IconHover>\n        <Icons {...args} name='notifications' />\n      </IconHover>\n      <IconHover>\n        <Icons {...args} name='cross' />\n      </IconHover>\n      <IconHover disabled>\n        <Icons {...args} name='cross' />\n      </IconHover>\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "bd798228effd9ea304dec801de169c61b68aa249974a07c893487d7bb9d57dc0": {
+      "title": "Canonical usage",
+      "code": "import type { ResizeObserverProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "bda0a33c638ce6212b4a0c6a592ef4de615a792af4360935f5c256a31d3c2bfc": {
+      "title": "Controlled",
+      "code": "{\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>\n        <Dropdown\n          {...args}\n          open={open}\n          onOpenChange={(nextOpen) => {\n            setOpen(nextOpen);\n            args.onOpenChange?.(nextOpen);\n          }}\n          content={<MenuContent onClose={() => setOpen(false)} />}\n        >\n          <Button>Controlled</Button>\n        </Dropdown>\n        <Button color=\"grey\" size=\"small\" onClick={() => setOpen((prev) => !prev)}>\n          Toggle: {open ? 'Open' : 'Closed'}\n        </Button>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "bda12b1c91d1a7916b63557e18512a55470038d5bedc1baa01461d2d9d13c544": {
+      "title": "Address History",
+      "code": "{\n    const [selected, setSelected] = useState('1');\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 420 }}\n        content={({ close }) => (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>\n            {/* Title */}\n            <p style={panelTitleStyle}>Address History</p>\n\n            {/* Address list */}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n              {ADDRESSES.map((addr) => (\n                <button\n                  key={addr.id}\n                  type=\"button\"\n                  style={selected === addr.id ? addressItemSelectedStyle : addressItemStyle}\n                  onClick={() => {\n                    setSelected(addr.id);\n                    close();\n                  }}\n                >\n                  <div style={{ flex: 1, minWidth: 0 }}>\n                    <p style={itemTitleStyle}>{addr.label}</p>\n                    <p style={{ ...itemSubtitleStyle, wordBreak: 'break-all' }}>\n                      {addr.address}\n                    </p>\n                  </div>\n                  <div style={{ flexShrink: 0, textAlign: 'right' }}>\n                    <p style={itemAmountStyle}>{addr.token}</p>\n                  </div>\n                  <div style={{ flexShrink: 0, width: 16 }}>\n                    {selected === addr.id && (\n                      <Icons name=\"check\" size={16} color=\"#131313\" />\n                    )}\n                  </div>\n                </button>\n              ))}\n            </div>\n\n            {/* Footer action */}\n            <div style={panelFooterStyle}>\n              <button\n                type=\"button\"\n                style={{\n                  ...footerBtnStyle,\n                  backgroundColor: '#dde6f4',\n                  color: '#073387',\n                }}\n              >\n                <Icons name=\"add\" size={16} color=\"#073387\" />\n                New address\n              </button>\n            </div>\n          </div>\n        )}\n      >\n        <Button>Select Address</Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "bea04481c1d6a537bdee648094a468c0153ef005defd5762fd0568a7312f0b71": {
+      "title": "Canonical usage",
+      "code": "<ProFormItem />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "bea3fd79a9ce5be5ed4038daa57612f962de2b1b334870a215966790b6a5c1f5": {
+      "title": "Usage",
+      "code": "<CoachMark\n  heading=\"Welcome to Dashboard\"\n  body=\"Here you can see an overview of your finances.\"\n  steps={4}\n  defaultActiveStep={0}\n  placement=\"top\"\n  icon={<Icons name=\"dashboard\" size={24} />}\n  onFinish={() => console.log('Tour complete')}\n  onDismiss={() => console.log('Tour dismissed')}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "bec858e374183c180f6a8c8157e1d6204faf444043aa0bfe7145fdff1fb35c29": {
+      "title": "Canonical usage",
+      "code": "import type { QueryFilterProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "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>",
+      "source": "stories",
+      "compilable": false
+    },
+    "bfb9824d83e218356e786080a15403f2dfc660af265b41a8eec26863bd40cc53": {
+      "title": "Color Palette",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      {TYPOGRAPHY_COLORS.map(color => (\n        <Typography.Body key={color} size=\"md\" color={color}>\n          {color}\n        </Typography.Body>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "bfcdf99e7f52ffcf1dcf1ecb5cec8abe72003bb0176bb7aa1b8f4bf87df202ed": {
+      "title": "Default",
+      "code": "<div style={ANCHOR_WRAPPER_STYLE}>\n      <button id=\"tooltip-default\">Hover me</button>\n      <Tooltip {...args} anchorSelect=\"#tooltip-default\" />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "bfef3654ba7e004cca9c6680de5d7039f9de64917fbbcc8e2f2ca84d014a58b2": {
+      "title": "Canonical usage",
+      "code": "import type { SelectProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "c145e8864a44d06820814a82b0d0e2e486e772f015830b8cc626831e2e025878": {
+      "title": "Canonical usage",
+      "code": "<Portal />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "c196d3703b8f7605b2cf3ba5d441a3c20a72992b82874261716187376e93e86e": {
+      "title": "Vertical",
+      "code": "<Space direction={SPACE_DIRECTION.vertical} size={SPACE_SIZE.middle}>\n      <div style={DEMO_BOX_STYLE}>Top</div>\n      <div style={DEMO_BOX_STYLE}>Bottom</div>\n    </Space>",
+      "source": "stories",
+      "compilable": true
+    },
+    "c2d0e5c92e119088561656cca130e7fe6d43a492895329f41b30087cb4f987a7": {
+      "title": "Sizes",
+      "code": "<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>\n      {TAG_SIZES.map((size) => (\n        <Tag {...args} key={size} size={size} label={size} />\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "c303f66164ebe41cd2a3afd4f3f393f888ada9d6806d059d56b47f502825f2f7": {
+      "title": "OTP",
+      "code": "{\n    const onComplete = fn();\n    const onChange = fn();\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n        {/* ── Large ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Large</h3>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>default / Empty</p>\n              <Input.OTP\n                label=\"Verification Code\"\n                feedback=\"Feedback\"\n                feedbackIcon={<Icons name=\"info\" size={16} />}\n                length={6}\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>default / Partial</p>\n              <Input.OTP\n                label=\"Verification Code\"\n                feedback=\"Feedback\"\n                feedbackIcon={<Icons name=\"info\" size={16} />}\n                length={6}\n                defaultValue=\"123\"\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>error</p>\n              <Input.OTP\n                label=\"Verification Code\"\n                status=\"error\"\n                feedback=\"Invalid code\"\n                feedbackIcon={<Icons name=\"error\" size={16} />}\n                length={6}\n                defaultValue=\"999999\"\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>disabled</p>\n              <Input.OTP\n                label=\"Verification Code\"\n                disabled\n                length={6}\n                defaultValue=\"123456\"\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>mask (password style)</p>\n              <Input.OTP\n                label=\"PIN Code\"\n                length={6}\n                defaultValue=\"1234\"\n                mask\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* ── Small ── */}\n        <div>\n          <h3 style={{ margin: '0 0 16px' }}>Small</h3>\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>default / Empty</p>\n              <Input.OTP\n                size=\"small\"\n                label=\"Code\"\n                length={6}\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n            <div>\n              <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>4-digit code</p>\n              <Input.OTP\n                size=\"small\"\n                label=\"PIN\"\n                length={4}\n                defaultValue=\"12\"\n                onComplete={onComplete}\n                onChange={onChange}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "c3aaf0098db4c77ba5af727f8c2eb70a9969be6ea15dcba309d583137cfe6e21": {
+      "title": "Nested List",
+      "code": "<ProForm\n      {...args}\n      initialValues={{\n        groups: [\n          { title: 'Group A', items: [{ name: 'Item 1' }] },\n        ],\n      }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormList name=\"groups\" label=\"Groups\">\n        {(fields) =>\n          fields.map(({ name, key }) => (\n            <div key={key} style={{ border: '1px solid #eee', padding: 12, marginBottom: 8, borderRadius: 4 }}>\n              <ProFormText name={`${name}.title`} label=\"Group Title\" />\n              <ProFormList name=\"items\" label=\"Items\">\n                {(subFields) =>\n                  subFields.map((sf) => (\n                    <ProFormText key={sf.key} name={`${sf.name}.name`} label=\"Item Name\" />\n                  ))\n                }\n              </ProFormList>\n            </div>\n          ))\n        }\n      </ProFormList>\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "c4dc11bc9b4b9698e931dc881cc580895c8626b71430d09eec8f7054d49c46f0": {
+      "title": "With Text",
+      "code": "<div>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider>Text</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider orientation=\"left\">Left Text</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider orientation=\"right\">Right Text</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "c4fb3c20755ba50100856ee70fc3b85038d8c04bef80a4aec58734e95995d8a8": {
+      "title": "Canonical usage",
+      "code": "<ProFormCheckboxGroup />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "c5260837fe7728fca505a762c48a8ede3b34d472c53b2be29b29a49de267418d": {
+      "title": "Import",
+      "code": "import { Icons, IconWrapper, IconHover } from '@1money/components-ui';\n// or\nimport { Icons, IconWrapper, IconHover } from '@1money/components-ui/Icons';\n\n// Type import\nimport type { IconName } from '@1money/components-ui';",
+      "source": "readme",
+      "compilable": true
+    },
+    "c539c466c34edf9adf7a91c4b2d933518b120bce2cce74457c78e0579e6f91b5": {
+      "title": "Canonical usage",
+      "code": "import type { DropdownProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "c5c8294cf8e64c0260dadcf294fe23c8dc5b054d7780988addeb5f5bfa8f6658": {
+      "title": "Page Loading Overlay",
+      "code": "const PageLoader = ({ isLoading }) => {\n  if (!isLoading) return null;\n\n  return (\n    <div className=\"page-loader-overlay\">\n      <Spinner\n        style={{ width: '50px', height: '50px' }}\n        strokeWidth=\"3\"\n      />\n      <p>Loading your data...</p>\n    </div>\n  );\n};",
+      "source": "readme",
+      "compilable": true
+    },
+    "c614ee8b96a68d951bd7d9eb5c0f2a5c3be262fa670d2d245894f0a91deb000d": {
+      "title": "Canonical usage",
+      "code": "<Pagination />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "c61edd4d5f5113671afbb2b5ce72b88a70f64bf63d8e320cd21c669831574cd1": {
+      "title": "Canonical usage",
+      "code": "<ProFormDependency name={[]}>{() => {}}</ProFormDependency>",
+      "source": "canonical",
+      "compilable": true
+    },
+    "c6a83d6c798d0d40463dd843e21e8d400034b2e02b102cc4f379e4a07d4b9fe7": {
+      "title": "Import",
+      "code": "import { Slider } from '@1money/components-ui';\n// or\nimport { Slider } from '@1money/components-ui/Slider';",
+      "source": "readme",
+      "compilable": true
+    },
+    "c6c6006c18fc013fe133931a21d10e19d9263c424b639dbe5b1038884729bb32": {
+      "title": "Horizontal",
+      "code": "<p>Above</p>\n<Divider />\n<p>Below</p>",
+      "source": "readme",
+      "compilable": true
+    },
+    "c7034bd09dee419c111b7c340fad09a444cfe9e9697b0595059c042314217da5": {
+      "title": "Custom Styling",
+      "code": "<Dropdown\n      {...args}\n      overlayClassName=\"custom-dropdown-panel\"\n      overlayStyle={{ minWidth: 240 }}\n      content={<MenuContent />}\n    >\n      <Button>Custom Style</Button>\n    </Dropdown>",
+      "source": "stories",
+      "compilable": false
+    },
+    "c708d9a68618a957abae65c03f9ebb38fd38b515889a38cdc4abedf031315725": {
+      "title": "Basic Usage",
+      "code": "import { Space } from '@1money/components-ui';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/components-ui/Space';\n\n<Space size={SPACE_SIZE.middle} align={SPACE_ALIGN.center}>\n  <span>Left</span>\n  <span>Right</span>\n</Space>",
+      "source": "readme",
+      "compilable": true
+    },
+    "c7dcba25848c3c668f4be990f07f1a6cc8b5b3687bb3533b277bf10074bbbd74": {
+      "title": "Mode Update",
+      "code": "<ProForm\n      {...args}\n      mode=\"update\"\n      initialValues={{ id: 'USR-001', name: 'Alice', email: 'alice@example.com' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText name=\"id\" label=\"ID\" mode=\"read\" />\n      <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n      <ProFormText name=\"email\" label=\"Email\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "c9055581e81ec06997b903da8cf3dc5446cb9767423cb2fd80762ede31063176": {
+      "title": "Disabled",
+      "code": "{\n    const [disabled, setDisabled] = useState(false);\n    const [resizeCount, setResizeCount] = useState(0);\n\n    return (\n      <div>\n        <div style={{ marginBottom: 12 }}>\n          <label>\n            <input\n              type=\"checkbox\"\n              checked={disabled}\n              onChange={(e) => setDisabled(e.target.checked)}\n            />\n            {' '}Disable observer\n          </label>\n          <span style={{ marginLeft: 12, color: '#666' }}>\n            Resize events received: {resizeCount}\n          </span>\n        </div>\n        <ResizeObserver\n          disabled={disabled}\n          onResize={() => setResizeCount((c) => c + 1)}\n        >\n          <div style={boxStyle}>\n            {disabled ? 'Observer disabled — resize events paused' : 'Resize me to trigger events'}\n          </div>\n        </ResizeObserver>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "c9809b17f15305dd053e92c369352c1ab74e40750e704156f35c50b22b0fb7af": {
+      "title": "Network Selector",
+      "code": "{\n    const [selected, setSelected] = useState('BNB');\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 420 }}\n        content={({ close }) => (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n            <Alert\n              status=\"warning\"\n              body=\"Please only top up through supported networks, otherwise you may lose your funds\"\n              closable={false}\n            />\n            <div style={{ display: 'flex', flexDirection: 'column' }}>\n              {NETWORKS.map((network) => (\n                <DropdownItem\n                  key={network.code}\n                  selected={selected === network.code}\n                  left={<CurrencyIcon flag={network.icon} />}\n                  title={network.code}\n                  subtitle={network.name}\n                  right={<p style={itemAmountStyle}>{network.time}</p>}\n                  onClick={() => {\n                    setSelected(network.code);\n                    close();\n                  }}\n                />\n              ))}\n            </div>\n          </div>\n        )}\n      >\n        <Button>\n          {selected ? `${NETWORKS.find((n) => n.code === selected)?.icon} ${selected}` : 'Select Network'}\n        </Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "ca3b9b0ee348c09e621b11cf2534f5d42546ed5004f5f00f042b20c9ca6a7548": {
+      "title": "Canonical usage",
+      "code": "import type { DialogFooterRender } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "ca70d69f9d217bc2fb7464ca43a6e4014c47f608128b31fcaef0dce251e15ea4": {
+      "title": "With Disabled",
+      "code": "<Segment\n      items={[\n        { value: 'tab1', label: 'Overview' },\n        { value: 'tab2', label: 'Transactions' },\n        { value: 'tab3', label: 'Analytics', disabled: true },\n        { value: 'tab4', label: 'Settings' },\n      ]}\n    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "cb70ebe2c9a937bb1cd0ba29f708510c4c1e22e8ac2caacd37674882f698a196": {
+      "title": "Canonical usage",
+      "code": "import type { SelectRenderOptionMeta } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "cc02e88440947a6233796037b3d5c91a08dccc0fbd6048c0d19e0c449e82dc73": {
+      "title": "Canonical usage",
+      "code": "import type { DropdownContentContext } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "cc0a911d74a5939f71b3e713aed21e4a2dd1adc41fcc547aa40a60cf82549caa": {
+      "title": "Import",
+      "code": "import { Radio, RadioGroup } from '@1money/components-ui';\n// or tree-shakeable\nimport { Radio, RadioGroup } from '@1money/components-ui/Radio';",
+      "source": "readme",
+      "compilable": true
+    },
+    "ccaa3cb3e660ea38beaa59a26d94e5aa6bcd8ea3fb8449f82d28e13875c9c05e": {
+      "title": "Group Disabled",
+      "code": "<RadioGroup value=\"a\" disabled>\n      <Radio value=\"a\" label=\"Option A\" />\n      <Radio value=\"b\" label=\"Option B\" />\n      <Radio value=\"c\" label=\"Option C\" />\n    </RadioGroup>",
+      "source": "stories",
+      "compilable": true
+    },
+    "ce3412158804bef977933a6f68163249822402fcf44facae20470ccfd61de718": {
+      "title": "Import",
+      "code": "import { Calendar } from '@1money/components-ui';\n// or\nimport { Calendar } from '@1money/components-ui/Calendar';",
+      "source": "readme",
+      "compilable": true
+    },
+    "ce5a29cdd05e46095aa4e0495f15de25d4e29a8772e83863f793f174d89170df": {
+      "title": "Trade",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 660 }}>\n      <div>\n        <h3 style={{ margin: '0 0 8px' }}>Default (Placeholder)</h3>\n        <Input.Trade\n          currencySymbol=\"$\"\n          currencyUnit=\"USD\"\n          showMax\n          onMax={fn()}\n          onSwap={fn()}\n          exchangeText=\"0 USDT\"\n        />\n      </div>\n      <div>\n        <h3 style={{ margin: '0 0 8px' }}>Default (Filled)</h3>\n        <Input.Trade\n          currencySymbol=\"$\"\n          currencyUnit=\"USD\"\n          defaultValue=\"123,456,789\"\n          showMax\n          onMax={fn()}\n          onSwap={fn()}\n          exchangeText=\"123,456,789 USDT\"\n        />\n      </div>\n      <div>\n        <h3 style={{ margin: '0 0 8px' }}>Error</h3>\n        <Input.Trade\n          currencySymbol=\"$\"\n          currencyUnit=\"USD\"\n          defaultValue=\"123,456,789\"\n          status=\"error\"\n          showMax\n          onMax={fn()}\n          onSwap={fn()}\n          exchangeText=\"123,456,789 USDT\"\n          feedback=\"Insufficient balance\"\n        />\n      </div>\n      <div>\n        <h3 style={{ margin: '0 0 8px' }}>Disabled</h3>\n        <Input.Trade\n          currencySymbol=\"$\"\n          currencyUnit=\"USD\"\n          defaultValue=\"123,456,789\"\n          disabled\n          showMax\n          onSwap={fn()}\n          exchangeText=\"123,456,789 USDT\"\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "cef06a2fa9ec150e4ab25d3ca42529946e43096750463d7e09e45104bfe938a9": {
+      "title": "Canonical usage",
+      "code": "import type { SelectSize } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "cf77657b10de8590abb4f91c96d5208ef8e88c19ca770632f85ea70ebd3f41f2": {
+      "title": "Debounce Field",
+      "code": "<ProForm\n      {...args}\n      onValuesChange={(changed) => {\n        console.log('onValuesChange (debounced):', changed);\n      }}\n    >\n      <ProFormText\n        name=\"search\"\n        label=\"Search (300ms debounce — check console)\"\n        debounceTime={300}\n        placeholder=\"Type fast...\"\n      />\n      <ProFormText name=\"instant\" label=\"Instant (no debounce)\" placeholder=\"Type fast...\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "cf7c4b8794bcd349562a79995712162df90283bb284d622f89e02d30e115598d": {
+      "title": "Colors",
+      "code": "<div style={rowStyle}>\n      {BUTTON_COLORS.map((color) => (\n        <Button {...args} key={color} color={color}>\n          {color}\n        </Button>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "d04fb66d67c8ae60bbd4a4937cb198b9b91ef7835b27f5766f421c864efdf891": {
+      "title": "Canonical usage",
+      "code": "<VirtualList />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "d07754a416050437d6b99b5541fa4eb847f75facc92eb9f9427194d138408140": {
+      "title": "Canonical usage",
+      "code": "import type { DialogProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "d0b89ae2fa1043346a2874d6f6ab1231cc0e830f16e1f70fd5614d322a61b044": {
+      "title": "Canonical usage",
+      "code": "import type { SelectValue } from '@1money/component-ui';",
+      "source": "canonical",
+      "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\" />",
+      "source": "readme",
+      "compilable": true
+    },
+    "d1cd64f002a5ae848ed3cbc7468dc0fdeec83147216a79bfa61857ed1d9fb9b9": {
+      "title": "Placements",
+      "code": "<div style={POPCONFIRM_STORY_STYLE.placementsWrapper}>\n      {POPCONFIRM_PLACEMENTS.map((placement) => (\n        <Popconfirm\n          {...args}\n          key={placement}\n          placement={placement}\n          title={placement}\n          body={POPCONFIRM_DEMO_COPY.placementBody}\n        >\n          <Button size={BUTTON_SIZE.small} color={BUTTON_COLOR.grey}>\n            {placement}\n          </Button>\n        </Popconfirm>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "d2edd9eacbc07e5e229da3827b202d5da1fe8f4ca569e59c8162ce3927cbf36e": {
+      "title": "Import",
+      "code": "import { Input } from '@1money/components-ui';\n// or\nimport { Input } from '@1money/components-ui/Input';",
+      "source": "readme",
+      "compilable": true
+    },
+    "d41dbb44d3d8769c1d0adb9e207bae7aeb9410730ab9e50b3897b5913c110ee7": {
+      "title": "Field Dependencies",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ country: '', city: '' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormSelect\n        name=\"country\"\n        label=\"Country\"\n        valueEnum={{ us: 'United States', cn: 'China', jp: 'Japan' }}\n      />\n      <ProFormSelect\n        name=\"city\"\n        label=\"City (auto-loads based on Country)\"\n        dependencies={['country']}\n        request={async (params) => {\n          await new Promise((r) => setTimeout(r, 500));\n          const cities: Record<string, Array<{ label: string; value: string }>> = {\n            us: [{ label: 'New York', value: 'ny' }, { label: 'Los Angeles', value: 'la' }],\n            cn: [{ label: 'Beijing', value: 'bj' }, { label: 'Shanghai', value: 'sh' }],\n            jp: [{ label: 'Tokyo', value: 'tk' }, { label: 'Osaka', value: 'os' }],\n          };\n          return cities[params?.country as string] ?? [];\n        }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "d48d8676eb8b36a6ebc4a499db4fc5db1f7cad9d843dab155bcc0e51ae112dd7": {
+      "title": "Import",
+      "code": "import { Empty } from '@1money/components-ui';\n// or\nimport { Empty } from '@1money/components-ui/Empty';",
+      "source": "readme",
+      "compilable": true
+    },
+    "d4cfa73d1f8594d54e518f6d453f327da0cbfe5696e915132697bab1461257a2": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormMode } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "d6d63abfec53aafed291131ef3a163dafcf0b09dbf5655a9457e4a8c5e75868e": {
+      "title": "Canonical usage",
+      "code": "<Dropdown />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "d8541ce54f9d19430978dbd976d464fbc05c5ff5c9d4b33b03a2e25d6b11992c": {
+      "title": "Canonical usage",
+      "code": "import { Button } from '@1money/components-ui';\n// or\nimport { Button } from '@1money/components-ui/Button';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "d91c28bb6a118b26bb8a54276fb59ec8a840474d47297b0ab6537c738cb98876": {
+      "title": "Canonical usage",
+      "code": "import type { PopconfirmTrigger } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "d9882ee38a2bc32f9e2590509a569226bc8b174cfe3c16f5a1bdfbbc7662bf62": {
+      "title": "Placement",
+      "code": "{\n    const [open, setOpen] = useState(false);\n    const [placement, setPlacement] = useState<DrawerPlacement>('right');\n\n    const openDrawer = (p: DrawerPlacement) => {\n      setPlacement(p);\n      setOpen(true);\n    };\n\n    return (\n      <div style={{ display: 'flex', gap: 8 }}>\n        <Button onClick={() => openDrawer('top')}>Top</Button>\n        <Button onClick={() => openDrawer('right')}>Right</Button>\n        <Button onClick={() => openDrawer('bottom')}>Bottom</Button>\n        <Button onClick={() => openDrawer('left')}>Left</Button>\n        <Drawer\n          open={open}\n          placement={placement}\n          title={`${placement} drawer`}\n          onClose={() => setOpen(false)}\n          width={360}\n          height={300}\n        >\n          <p>Drawer slides in from the {placement}.</p>\n        </Drawer>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "d994495c029f812a3de0502ae8cfe6dd7e8d6a14d695143c5e427eb20b730904": {
+      "title": "Primary",
+      "code": "<Flex {...args}>\n      <div style={DEMO_BOX_STYLE}>One</div>\n      <div style={DEMO_BOX_STYLE}>Two</div>\n      <div style={DEMO_BOX_STYLE}>Three</div>\n    </Flex>",
+      "source": "stories",
+      "compilable": false
+    },
+    "d9aa8ed0c57561146c619eba9bd5fa468ec9bac579c2ba44822fc35b3c17dcc7": {
+      "title": "Usage",
+      "code": "<Cell iconStart=\"security\" iconEnd=\"arrowRight\">\n  Authenticator app\n</Cell>",
+      "source": "readme",
+      "compilable": true
+    },
+    "d9c8c640f134945ee1c690fc09f249d48531b5e05729faa4795d7411a8b3bc4e": {
+      "title": "Default",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ username: '', email: '' }}\n      onFinish={(values) => {\n        args.onFinish?.(values);\n        alert(JSON.stringify(values, null, 2));\n      }}\n    >\n      <ProFormText\n        name=\"username\"\n        label=\"Username\"\n        placeholder=\"Enter username\"\n        rules={[{ required: true, message: 'Username is required' }]}\n      />\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        placeholder=\"Enter email\"\n        rules={[{ required: true }, { type: 'email', message: 'Invalid email' }]}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "da48319e963f8bce14fd2d0e6276dbdb8273cee567181e50abfb14f902872b76": {
+      "title": "Colors",
+      "code": "<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>\n      {TAG_COLORS.map((color) => (\n        <Tag {...args} key={color} color={color} label={color} />\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "db11dae227995e92880a75b42e93f034782b06757a643753f468b4e0b598692a": {
+      "title": "Filter Wrap Spacing",
+      "code": "<div style={DEMO_PAGE_STYLE}>\n      <Space size={[8, 12]} wrap style={{ maxWidth: 640 }}>\n        <div style={DEMO_CHIP_ITEM_STYLE}>All</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>High Risk</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>KYC Pending</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>Manual Review</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>Today</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>This Week</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>Large Amount</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>USDT</div>\n        <div style={DEMO_CHIP_ITEM_STYLE}>USD</div>\n      </Space>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "db1561752135c60ff5a677102a19f86d01a79b50a6824699a9c6fe7a9ead392f": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormFieldConvertValueFn } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "dbdf57d8d45ba16d7872023c8baa1986123e9011100cd6332a0023a7d8d2a832": {
+      "title": "All Variants",
+      "code": "<div style={columnStyle}>\n      {BUTTON_SIZES.map((size) => (\n        <div key={size}>\n          <h3 style={sectionHeaderStyle}>{size}</h3>\n          <div style={rowStyle}>\n            {BUTTON_COLORS.map((color) => (\n              <Button {...args} key={`${size}-${color}`} size={size} color={color}>\n                {color}\n              </Button>\n            ))}\n          </div>\n          <div style={{ ...rowStyle, marginTop: 8 }}>\n            {BUTTON_COLORS.map((color) => (\n              <Button {...args} key={`${size}-${color}-disabled`} size={size} color={color} disabled>\n                {color}\n              </Button>\n            ))}\n          </div>\n          <div style={{ ...rowStyle, marginTop: 8 }}>\n            {BUTTON_COLORS.map((color) => (\n              <Button {...args} key={`${size}-${color}-loading`} size={size} color={color} loading>\n                {color}\n              </Button>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>",
+      "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>",
+      "source": "stories",
+      "compilable": false
+    },
+    "dd0dc5a0741ff7e4495ca9fb3eb3072f77d4f1b84be6af9dda1675475566cbcf": {
+      "title": "Render Props",
+      "code": "{\n    const [size, setSize] = useState<SizeInfo | null>(null);\n\n    return (\n      <div>\n        <p style={{ marginBottom: 8, color: '#666' }}>\n          Using render-props pattern for ref forwarding:\n        </p>\n        <ResizeObserver onResize={(sizeInfo) => setSize(sizeInfo)}>\n          {(ref) => (\n            <div ref={ref as React.RefObject<HTMLDivElement>} style={boxStyle}>\n              Render-props child\n              {size && (\n                <div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>\n                  {size.width} × {size.height}\n                </div>\n              )}\n            </div>\n          )}\n        </ResizeObserver>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "dd7a9e1ecc57d2efc005885114cec94320649768480f7dd0006adb2ea5855d5d": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormRequestOption } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "dda0f285741a298f3e8cd24f768a9faf10789e206854eb6555fc79970dcb9c2d": {
+      "title": "Import",
+      "code": "import { Tabs } from '@1money/components-ui';\n// or\nimport { Tabs } from '@1money/components-ui/Tabs';",
+      "source": "readme",
+      "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>",
+      "source": "stories",
+      "compilable": false
+    },
+    "de44f389edfa47e77cf32f1bd6ece4161001640b190878192b1685205bc79377": {
+      "title": "Amount",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>\n      {/* ── Large ── */}\n      <div>\n        <h3 style={{ margin: '0 0 16px' }}>Large</h3>\n        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n          {/* Placeholder */}\n          <div style={{ width: 400 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Placeholder</p>\n            <Input.Amount\n              label=\"You send\"\n              feedback=\"$2,992.68 USDC available\"\n              feedbackIcon={<Icons name=\"info\" size={16} />}\n              placeholder=\"Enter amount\"\n              actionLabel=\"Use Max\"\n              onAction={fn()}\n              currencyIcon={<img src={USDC_ICON} alt=\"USDC\" />}\n              currencyLabel=\"USDC\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n          {/* Filled */}\n          <div style={{ width: 400 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Filled</p>\n            <Input.Amount\n              label=\"You send\"\n              feedback=\"$2,992.68 USDC available\"\n              feedbackIcon={<Icons name=\"info\" size={16} />}\n              defaultValue=\"1,250.00\"\n              actionLabel=\"Use Max\"\n              onAction={fn()}\n              currencyIcon={<img src={USDC_ICON} alt=\"USDC\" />}\n              currencyLabel=\"USDC\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n          {/* Disabled */}\n          <div style={{ width: 400 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Disabled</p>\n            <Input.Amount\n              label=\"You send\"\n              feedback=\"$2,992.68 USDC available\"\n              feedbackIcon={<Icons name=\"info\" size={16} />}\n              disabled\n              actionLabel=\"Use Max\"\n              currencyIcon={<img src={USDC_ICON} alt=\"USDC\" />}\n              currencyLabel=\"USDC\"\n            />\n          </div>\n          {/* Error */}\n          <div style={{ width: 400 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Error</p>\n            <Input.Amount\n              label=\"You send\"\n              status=\"error\"\n              feedback=\"Insufficient balance\"\n              feedbackIcon={<Icons name=\"error\" size={16} />}\n              defaultValue=\"999,999.99\"\n              actionLabel=\"Use Max\"\n              onAction={fn()}\n              currencyIcon={<img src={USDC_ICON} alt=\"USDC\" />}\n              currencyLabel=\"USDC\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* ── Small ── */}\n      <div>\n        <h3 style={{ margin: '0 0 16px' }}>Small</h3>\n        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n          <div style={{ width: 400 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Placeholder</p>\n            <Input.Amount\n              size=\"small\"\n              label=\"You send\"\n              feedback=\"$2,992.68 USDT available\"\n              feedbackIcon={<Icons name=\"info\" size={16} />}\n              placeholder=\"Enter amount\"\n              actionLabel=\"Use Max\"\n              onAction={fn()}\n              currencyIcon={<img src={USDT_ICON} alt=\"USDT\" />}\n              currencyLabel=\"USDT\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n          <div style={{ width: 400 }}>\n            <p style={{ margin: '0 0 4px', fontSize: 12, color: '#999' }}>Filled</p>\n            <Input.Amount\n              size=\"small\"\n              label=\"You send\"\n              feedback=\"$2,992.68 USDT available\"\n              feedbackIcon={<Icons name=\"info\" size={16} />}\n              defaultValue=\"500.00\"\n              actionLabel=\"Use Max\"\n              onAction={fn()}\n              currencyIcon={<img src={USDT_ICON} alt=\"USDT\" />}\n              currencyLabel=\"USDT\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* ── With prefix currency selector ── */}\n      <div>\n        <h3 style={{ margin: '0 0 16px' }}>With Prefix Currency</h3>\n        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n          <div style={{ width: 400 }}>\n            <Input.Amount\n              label=\"You send\"\n              feedback=\"65,482.55 USD1 available\"\n              feedbackIcon={<Icons name=\"info\" size={16} />}\n              defaultValue=\"0\"\n              prefix={\n                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>\n                  <img src={USDT_ICON} alt=\"USDT\" style={{ width: 24, height: 24, borderRadius: '50%' }} />\n                  <span>USDT</span>\n                </span>\n              }\n              actionLabel=\"Use Max\"\n              onAction={fn()}\n              currencyIcon={<img src={USDC_ICON} alt=\"USDC\" />}\n              currencyLabel=\"USDC\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* ── Currency only (no action) ── */}\n      <div>\n        <h3 style={{ margin: '0 0 16px' }}>Currency Only (no action button)</h3>\n        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>\n          <div style={{ width: 400 }}>\n            <Input.Amount\n              label=\"Amount\"\n              placeholder=\"0.00\"\n              currencyIcon={<img src={USDC_ICON} alt=\"USDC\" />}\n              currencyLabel=\"USDC\"\n              onCurrencyClick={fn()}\n            />\n          </div>\n        </div>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "deac1f8bf34d4c1fa4d9d7bcf9bb8f258a87481df55c9c7d02d45ec6766aef71": {
+      "title": "Small",
+      "code": "<DialogLauncher {...args} />",
+      "source": "stories",
+      "compilable": false
+    },
+    "deb7c1bde978d151f18de91d4197364ea35d0d3f4dd7b0ba705acbf4eaa9eade": {
+      "title": "Canonical usage",
+      "code": "import type { PopconfirmActionContext } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "df516870a4f3b627969e2e1b0c6fc40fccc4ccb0fb7c04a34e5e169a928de479": {
+      "title": "Usage",
+      "code": "<Cell iconStart=\"security\" iconEnd=\"arrowRight\" active>\n  Authenticator app\n</Cell>",
+      "source": "readme",
+      "compilable": true
+    },
+    "e10bfd381cb38acb38120e8d2efaf6b5cde348cfa810261c23abb94f219581b9": {
+      "title": "Primary",
+      "code": "<Typography.Body {...args} />",
+      "source": "stories",
+      "compilable": false
+    },
+    "e1a8744a63bb83a89bcb9eda48e6f3874777ee0c7821e132cc555d0bf0998f0b": {
+      "title": "Import",
+      "code": "import { Navigation } from '@1money/components-ui';\n// or\nimport { Navigation } from '@1money/components-ui/Navigation';",
+      "source": "readme",
+      "compilable": true
+    },
+    "e2d97535c3a577c0c337fa59b2a6832e6337e4a07486d72339fb65ecb4899382": {
+      "title": "Import",
+      "code": "import { Checkbox } from '@1money/components-ui';\n// or\nimport { Checkbox } from '@1money/components-ui/Checkbox';",
+      "source": "readme",
+      "compilable": true
+    },
+    "e37aca8f7c9d9b0e9ebfac3d27da7b71899323685544aefcf84f04338a9232ce": {
+      "title": "Canonical usage",
+      "code": "<Progress percent={0} />",
+      "source": "canonical",
+      "compilable": true
+    },
+    "e45470810804263c8bc829534812b03b22c7885a5d86df48dfecce21f3ab3a2f": {
+      "title": "Usage",
+      "code": "<Link href=\"https://1money.com\" color=\"primary\" size=\"large\">\n  Visit 1Money\n</Link>",
+      "source": "readme",
+      "compilable": true
+    },
+    "e590bf2afc81b30b930dada6662ca8d5f1563febfe83f4e804b82bdeaa55d9e3": {
+      "title": "Value Enum",
+      "code": "<ProForm\n      {...args}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormSelect\n        name=\"status\"\n        label=\"Status\"\n        valueEnum={{ active: 'Active', inactive: 'Inactive', pending: { text: 'Pending', disabled: true } }}\n      />\n      <ProFormRadioGroup\n        name=\"role\"\n        label=\"Role\"\n        valueEnum={{ admin: 'Admin', editor: 'Editor', viewer: 'Viewer' }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "e5c65a663400bac3c3f390e36b09d4a78425de95dde7cad603a185c1cc30f68c": {
+      "title": "Import",
+      "code": "import { Grid, Row, Col } from '@1money/components-ui';\n// or\nimport { Grid, Row, Col } from '@1money/components-ui/Grid';\nimport { GRID_ALIGN, GRID_JUSTIFY } from '@1money/components-ui/Grid';",
+      "source": "readme",
+      "compilable": true
+    },
+    "e64bbef33f26f6cb756b2904ed6134a86633064c76641e65a06e65ed9fafa302": {
+      "title": "All Placements",
+      "code": "<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, padding: 60 }}>\n      {PLACEMENTS.map((p: CoachMarkPlacement) => (\n        <div key={p} style={{ display: 'flex', justifyContent: 'center' }}>\n          <CoachMark\n            steps={[\n              { icon: <span style={{ fontSize: 24 }}>👋</span>, heading: 'Welcome', body: 'Get started with the dashboard.' },\n              { icon: <span style={{ fontSize: 24 }}>🔍</span>, heading: 'Search', body: 'Find anything quickly.' },\n              { icon: <span style={{ fontSize: 24 }}>💳</span>, heading: 'Balance', body: 'Track all accounts.' },\n            ]}\n            placement={p}\n          />\n        </div>\n      ))}\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "e6697016dfdd32f6f999330e42ac897a235b3aca69ce17e3d84e78ced6d9ef67": {
+      "title": "Grouped Items",
+      "code": "{\n    const groups = useMemo(() => {\n      const map = new Map<string, CurrencyItem[]>();\n      CURRENCIES.forEach((c) => {\n        const list = map.get(c.group) ?? [];\n        list.push(c);\n        map.set(c.group, list);\n      });\n      return map;\n    }, []);\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 380 }}\n        content={\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n            {Array.from(groups.entries()).map(([group, items]) => (\n              <div key={group} style={{ display: 'flex', flexDirection: 'column' }}>\n                <div style={groupHeaderStyle}>{group}</div>\n                {items.map((item) => (\n                  <DropdownItem\n                    key={item.code}\n                    left={<CurrencyIcon flag={item.flag} />}\n                    title={item.code}\n                    subtitle={item.name}\n                    right={\n                      <p style={itemAmountStyle}>\n                        {item.amount}\n                        {item.amountUsd && (\n                          <>\n                            <br />\n                            {item.amountUsd}\n                          </>\n                        )}\n                      </p>\n                    }\n                  />\n                ))}\n              </div>\n            ))}\n          </div>\n        }\n      >\n        <Button>Currency List</Button>\n      </Dropdown>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "e80f4581561ee3095a2839fea6b7193b3e3a682901390a7f6147c36c9a75cc0d": {
+      "title": "Asset Multi Select Actions",
+      "code": "{\n    const [open, setOpen] = useState(false);\n    const [value, setValue] = useState<Array<string | number>>(['btc']);\n    const [draftValue, setDraftValue] = useState<Array<string | number>>(['btc']);\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select\n          {...args}\n          multiple\n          open={open}\n          value={open ? draftValue : value}\n          renderOption={renderAssetOption}\n          panelFooter={(\n            <div style={assetFooterActionsStyle}>\n              <Button\n                color=\"grey\"\n                size=\"small\"\n                style={{ flex: 1 }}\n                onClick={() => {\n                  setDraftValue([]);\n                }}\n              >\n                Reset\n              </Button>\n              <Button\n                size=\"small\"\n                style={{ flex: 1 }}\n                onClick={() => {\n                  setValue(draftValue);\n                  setOpen(false);\n                  args.onOpenChange?.(false);\n                }}\n              >\n                Apply\n              </Button>\n            </div>\n          )}\n          onOpenChange={(nextOpen) => {\n            setOpen(nextOpen);\n            setDraftValue(value);\n            args.onOpenChange?.(nextOpen);\n          }}\n          onChange={(nextValue, option) => {\n            setDraftValue((nextValue as Array<string | number>) ?? []);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
+    "e8366ffc0f016219e2e3c8525fc51ad1e6b761782aa7021fb8a40588988b1bb9": {
+      "title": "Canonical usage",
+      "code": "import { Radio, RadioGroup } from '@1money/components-ui';\n// or tree-shakeable\nimport { Radio, RadioGroup } from '@1money/components-ui/Radio';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "e9f60d4e278ffd41098f4db04f41855ffd8a9cb7a16f51dc8f8e99f4295effaa": {
+      "title": "Disabled",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Switch {...args} label=\"Unchecked disabled\" disabled />\n      <Switch {...args} label=\"Checked disabled\" disabled defaultChecked />\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "ead69923c50561a8b08e90c7dc7f2b6f0d3e3b1d3aa61f06af6f26303aeacc90": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "eb427461f9033ecdecd7f9fbecd2c65d93d6a9f081ee8af32cd9665d94095ec9": {
+      "title": "Semantic Scale",
+      "code": "<div style={STORY_LAYOUT_STYLE}>\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_DISPLAY_SIZES.map(size => (\n          <Typography.Display key={size} size={size}>\n            Display {size}\n          </Typography.Display>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_HEADLINE_SIZES.map(size => (\n          <Typography.Headline key={size} size={size}>\n            Headline {size}\n          </Typography.Headline>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_TITLE_SIZES.map(size => (\n          <Typography.Title key={size} size={size}>\n            Title {size}\n          </Typography.Title>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_BODY_SIZES.map(size => (\n          <Typography.Body key={size} size={size}>\n            Body {size} brings readable, content-first copy into forms, lists, and dense product surfaces.\n          </Typography.Body>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_LABEL_SIZES.map(size => (\n          <Typography.Label key={size} size={size}>\n            Label {size}\n          </Typography.Label>\n        ))}\n      </div>\n\n      <div style={STORY_SECTION_STYLE}>\n        {TYPOGRAPHY_LINK_SIZES.map(size => (\n          <Typography.Link key={size} size={size} href=\"https://ant.design/components/typography/\" target=\"_blank\">\n            Link {size}\n          </Typography.Link>\n        ))}\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "ec48d516a07ba5085b42c5936ddd4094b99978b593ccd77f2840587b3c15fe54": {
+      "title": "Canonical usage",
+      "code": "import type { PaginationPageItem } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "ede4a5629c02420f621373a9169c9671b906cc09439931df34b222da85911147": {
+      "title": "With Action",
+      "code": "<Alert\n      {...args}\n      status=\"info\"\n      title=\"Payment instruction ready\"\n      body=\"Share the deposit instruction with your treasury team or copy it directly.\"\n      link={{ label: 'Preview instruction', onClick: fn() }}\n      action={<Button onClick={fn()}>Copy details</Button>}\n      closable={false}\n    />",
+      "source": "stories",
+      "compilable": false
+    },
+    "eded2f3304b55730029801800edc5a3c7449e2643b4b52dbc06d117d3fa78b9c": {
+      "title": "Canonical usage",
+      "code": "import type { DropdownTrigger } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "ee2bdbb626c56a393f970bf1d78c39af26d41db0d878c1454242d504dadfb8c5": {
+      "title": "Usage",
+      "code": "// Basic spinner\n<Spinner />\n\n// Custom size\n<Spinner style={{ width: '20px', height: '20px' }} />\n\n// Custom animation duration\n<Spinner animationDuration=\"1s\" />\n\n// Custom stroke width\n<Spinner strokeWidth=\"3\" />\n\n// Custom fill\n<Spinner style={{ width: '60px', height: '60px' }} fill=\"#E8F5E8\" />",
+      "source": "readme",
+      "compilable": true
+    },
+    "ee930a68e587cff54897859095b7846cd2ee864a89a0d0e9fd833dbd1db85b82": {
+      "title": "All Variants",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Label Left (Default)</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <Switch {...args} label=\"Label\" description=\"Description\" />\n          <Switch {...args} label=\"Label\" description=\"Description\" defaultChecked />\n          <Switch {...args} label=\"Label\" description=\"Description\" disabled />\n          <Switch {...args} label=\"Label\" description=\"Description\" disabled defaultChecked />\n        </div>\n      </div>\n      <div>\n        <h3 style={{ marginBottom: 12 }}>Label Right</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <Switch {...args} label=\"Label\" description=\"Description\" labelPlacement=\"right\" />\n          <Switch {...args} label=\"Label\" description=\"Description\" labelPlacement=\"right\" defaultChecked />\n          <Switch {...args} label=\"Label\" description=\"Description\" labelPlacement=\"right\" disabled />\n          <Switch {...args} label=\"Label\" description=\"Description\" labelPlacement=\"right\" disabled defaultChecked />\n        </div>\n      </div>\n    </div>",
+      "source": "stories",
+      "compilable": false
+    },
+    "eebcc41c1f2c8421eb9925d8e4befdff5d0d9a0ac7ce205ace525ed07ee9f647": {
+      "title": "Canonical usage",
+      "code": "import type { PaginationProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "ef4db8ac914fd8f1b7ba6beb4ffdee91eb4c6541f40cad46d0d74c3e00a5d0e1": {
+      "title": "Canonical usage",
+      "code": "import type { SelectOption } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "ef6129271a1cc811da6f293b9cb03f5514e410a9c60c0abec3e045e6376745b1": {
+      "title": "Canonical usage",
+      "code": "import { Empty } from '@1money/components-ui';\n// or\nimport { Empty } from '@1money/components-ui/Empty';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "efb94a978c87bf9343e9605b358b08efa2db1f476e21029ee2bda3da4f275448": {
+      "title": "Api Examples",
+      "code": "<div style={DEMO_SECTION_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_BOX_STYLE}>Align</div>\n        <div style={DEMO_BOX_STYLE}>Justify</div>\n      </Flex>\n\n      <Flex vertical gap={GAP_LARGE} wrap={WRAP_ENABLED} prefixCls={FLEX_PREFIX}>\n        <div style={DEMO_BOX_STYLE}>Vertical</div>\n        <div style={DEMO_BOX_STYLE}>Wrap</div>\n      </Flex>\n    </div>",
+      "source": "stories",
+      "compilable": true
+    },
+    "effa85b9bec5c09b1096a3dc9f627ae7c6e52a1192e3f25d6c8ccec1fb06ad0f": {
+      "title": "Custom Icon",
+      "code": "<Popconfirm {...args}>\n      <Button color={BUTTON_COLOR.warning}>{POPCONFIRM_DEMO_COPY.archive.triggerText}</Button>\n    </Popconfirm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "f00e8c206a0704e37e6ae2cd3256fd59d70a1fb49e526ae606d6d9c83b6d2966": {
+      "title": "List Required",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ members: [] }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormList\n        name=\"members\"\n        label=\"Team Members\"\n        required\n        requiredMessage=\"Add at least one member\"\n      >\n        {(fields) =>\n          fields.map(({ name, key }) => (\n            <ProFormText key={key} name={`${name}.name`} label=\"Name\" />\n          ))\n        }\n      </ProFormList>\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "f02ed49d7825c626c3191734244f3e88dfbf48e8a2720ddd268229fe063b846a": {
+      "title": "Canonical usage",
+      "code": "import type { StepTagConfig } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f065597d223dc1f13a2322f8264117765b4ffe077f96a1224d73320e187354ec": {
+      "title": "Canonical usage",
+      "code": "import type { SubmitterProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f1fd9c22aed7f64f20f92113407cac7aeb1750a0623e511784dda6813e00b67e": {
+      "title": "Canonical usage",
+      "code": "Trigger();",
+      "source": "canonical",
+      "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>",
+      "source": "stories",
+      "compilable": true
+    },
+    "f3a91dcc57956f6ad5d0a390fd1f02519474f3ddfd4691ac865e8f7001fa9ef5": {
+      "title": "H5 Width Spec",
+      "code": "<TooltipPreviewCard\n      label=\"Maximum width 300px on H5\"\n      title=\"Long title\"\n      body={LONG_BODY}\n    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "f3e3e35db28e26c2e5f1870c2e23d646f593f798d99eda835808ea9652ed85d7": {
+      "title": "Canonical usage",
+      "code": "import type { TourProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f4820b22bbba91a3284238e73606be5b7825b28d6c345dcc4dde9b0681f61efd": {
+      "title": "Group Cell Directions",
+      "code": "{\n    const [verticalValue, setVerticalValue] = React.useState<string | number>('swift');\n    const [horizontalValue, setHorizontalValue] = React.useState<string | number>('swift');\n\n    const options = [\n      {\n        value: 'swift',\n        label: 'SWIFT',\n        description: 'Receive via bank rails',\n        icon: 'swift',\n      },\n      {\n        value: 'global',\n        label: 'Global account',\n        description: 'International settlement',\n        icon: 'language',\n      },\n    ];\n\n    const handleVerticalChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setVerticalValue(event.target.value);\n      }\n    };\n\n    const handleHorizontalChange = (event: RadioChangeEvent) => {\n      if (event.target.value !== undefined) {\n        setHorizontalValue(event.target.value);\n      }\n    };\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>\n        <div style={{ width: 320 }}>\n          <h3 style={{ marginBottom: 12 }}>Cell Direction Vertical</h3>\n          <RadioGroup\n            value={verticalValue}\n            variant=\"cell\"\n            size=\"large\"\n            alignment=\"left\"\n            direction=\"vertical\"\n            onChange={handleVerticalChange}\n            options={options}\n          />\n        </div>\n        <div>\n          <h3 style={{ marginBottom: 12 }}>Cell Direction Horizontal</h3>\n          <RadioGroup\n            value={horizontalValue}\n            variant=\"cell\"\n            size=\"large\"\n            alignment=\"left\"\n            direction=\"horizontal\"\n            onChange={handleHorizontalChange}\n            options={options}\n          />\n        </div>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "f49c87dfe21fbf4df7cf48ca08171e7695c029a2bb70a176aec70a90274cb24c": {
+      "title": "Basic",
+      "code": "{\n    const [size, setSize] = useState<SizeInfo | null>(null);\n\n    return (\n      <div>\n        <p style={{ marginBottom: 8, color: '#666' }}>\n          Drag the bottom-right corner to resize the box:\n        </p>\n        <ResizeObserver onResize={(sizeInfo) => setSize(sizeInfo)}>\n          <div style={boxStyle}>\n            Resize me!\n          </div>\n        </ResizeObserver>\n        {size && (\n          <div style={infoStyle}>\n            <div>width: {size.width}px</div>\n            <div>height: {size.height}px</div>\n            <div>offsetWidth: {size.offsetWidth}px</div>\n            <div>offsetHeight: {size.offsetHeight}px</div>\n          </div>\n        )}\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "f4d026d776aab61228b8c9e5a262948371f2441ac1be1fff0026dd1c3e0659cd": {
+      "title": "Canonical usage",
+      "code": "import type { PopconfirmPlacement } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f4f6718e815517b85df1ffee8b8b6101efc4f409150c16d25dc6d84726c971be": {
+      "title": "Readonly Mode",
+      "code": "<ProForm\n      {...args}\n      initialValues={{\n        name: 'John Doe',\n        email: 'john@example.com',\n        bio: 'Software engineer with 10 years of experience.',\n        newsletter: true,\n        active: true,\n      }}\n    >\n      <ProFormText name=\"name\" label=\"Name\" />\n      <ProFormText name=\"email\" label=\"Email\" />\n      <ProFormTextArea name=\"bio\" label=\"Bio\" />\n      <ProFormCheckbox name=\"newsletter\" label=\"Newsletter\" />\n      <ProFormSwitch name=\"active\" label=\"Active\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "f54ff3b0b6680cdec37c94acb43bf7f58648670a16b6c7be3cd82ca792d177fd": {
+      "title": "Canonical usage",
+      "code": "import type { DropdownContent } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f573e24b6bb2a0cf68e3dba916cbc777330e61e503cca982f2c5c5633a8d0b7a": {
+      "title": "Usage",
+      "code": "// Rectangle (default)\n<Skeleton />\n<Skeleton width=\"10rem\" />\n<Skeleton width=\"10rem\" height=\"4rem\" />\n\n// Rounded\n<Skeleton borderRadius=\"16px\" />\n\n// Square\n<Skeleton size=\"3rem\" />\n\n// Circle\n<Skeleton shape=\"circle\" size=\"4rem\" />\n\n// No animation\n<Skeleton animation=\"none\" />",
+      "source": "readme",
+      "compilable": true
+    },
+    "f5d6b11a550669747fb5a248be92fdbc1d02dc42ab2c8700fe44d9e09c3989ae": {
+      "title": "Import",
+      "code": "import { Divider } from '@1money/components-ui';",
+      "source": "readme",
+      "compilable": true
+    },
+    "f5e88271260df2b0e8df1a0b03d96a4c3004f14d0e5aaec8892007d6c41fddb4": {
+      "title": "With Disabled",
+      "code": "<Tabs\n      items={[\n        { key: 'tab1', label: 'Overview' },\n        { key: 'tab2', label: 'Transactions' },\n        { key: 'tab3', label: 'Analytics', disabled: true },\n        { key: 'tab4', label: 'Settings' },\n      ]}\n    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "f65811de7e147a092ae6e528449abcbde02b46201711bbf2cbf88493d3723538": {
+      "title": "Vertical",
+      "code": "<Flex vertical gap={GAP_SMALL}>\n      <div style={DEMO_BOX_STYLE}>Top</div>\n      <div style={DEMO_BOX_STYLE}>Bottom</div>\n    </Flex>",
+      "source": "stories",
+      "compilable": true
+    },
+    "f6add1649c4e02d141bd89c9cedf782cf9bf66c617de71226b13802729c7a205": {
+      "title": "Usage",
+      "code": "<Upload\n  mode=\"basic\"\n  chooseOptions={{ label: 'Upload file', icon: () => <></> }}\n  onUpload={(e) => console.log(e.files)}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
+    "f7b16782ec97c865cee1e4efd85132f308a13cf49fb00e7e75113b8db2f00476": {
+      "title": "Mode Edit",
+      "code": "<ProForm\n      {...args}\n      mode=\"edit\"\n      initialValues={{ name: '', email: '' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText name=\"name\" label=\"Name\" rules={[{ required: true }]} />\n      <ProFormText name=\"email\" label=\"Email\" />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "f7d75c4c5f4f678aa093b1506c43f3b64f084e77935a1995764eafb16f65acb3": {
+      "title": "Canonical usage",
+      "code": "import type { UsePaginationResult } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f7f96c74f982e37eb075e6bd5affd0bbcf3d63faca5bb60a1175fe7725dad87b": {
+      "title": "Multiple Files",
+      "code": "<Upload\n      label=\"Label\"\n      description=\"Description\"\n      feedback=\"Feedback\"\n    >\n      <UploadFileBar fileName=\"File name.PDF\" onRemove={fn()} />\n      <UploadFileBar fileName=\"File name.PDF\" onRemove={fn()} />\n      <UploadFileBar\n        fileName=\"File name.PDF\"\n        status={1}\n        message=\"Upload failed\"\n        onRemove={fn()}\n      />\n    </Upload>",
+      "source": "stories",
+      "compilable": false
+    },
+    "f83a21f43532c533551423571b437ae45b5e8e0ff76b9b783f68587c6b9a7e8d": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormFieldProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fa1715f659ca9bd453db3ccb6d40b47193e9dc838467b79a6a453d0b8b5aaed5": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormValueEnumObj } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fbd87569f46a26241c78761898d378521f9b220ad8c158ad1b3f619a9043f07d": {
+      "title": "Primary",
+      "code": "<Space {...args}>\n      <div style={DEMO_BOX_STYLE}>One</div>\n      <div style={DEMO_BOX_STYLE}>Two</div>\n      <div style={DEMO_BOX_STYLE}>Three</div>\n    </Space>",
+      "source": "stories",
+      "compilable": false
+    },
+    "fc7f011734a4a3a103721b68af73859114acc940da01099883443728203b2cad": {
+      "title": "Canonical usage",
+      "code": "import type { SelectMultipleValue } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fca476fdc8a8454562178330e2ef42b7cb756bb782574109179b48b0b5f2dfcb": {
+      "title": "Plain",
+      "code": "<div>\n      <p>Lorem ipsum dolor sit amet.</p>\n      <Divider plain>Text</Divider>\n      <p>Lorem ipsum dolor sit amet.</p>\n    </div>",
+      "source": "stories",
+      "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  }",
+      "source": "stories",
+      "compilable": true
+    },
+    "fd353a0cfce510dee427ac20924a2b4af00ee7928140326c422816b303a11ad9": {
+      "title": "Canonical usage",
+      "code": "import type { SelectRenderValueMeta } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fdf213199dc6788118e3f64a9156e33557e5611b1ca721d8b7c388245959d211": {
+      "title": "Import",
+      "code": "import { Button } from '@1money/components-ui';\n// or\nimport { Button } from '@1money/components-ui/Button';",
+      "source": "readme",
+      "compilable": true
+    },
+    "fe70357422313c2126f48b89c098c85159c4543c5ef3739330d48f86d8d0a509": {
+      "title": "Canonical usage",
+      "code": "import { Accordion } from '@1money/components-ui';\n// or\nimport { Accordion } from '@1money/components-ui/Accordion';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fe831014a074368cace22558725ed6a61ffdfa556cec55c5284d20d0357f8e2e": {
+      "title": "Canonical usage",
+      "code": "import type { ProgressPlacement } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fe9b007dfbadb99c5e9b23715cac072ae441727d20418766456554881470ea68": {
+      "title": "Canonical usage",
+      "code": "import { Calendar } from '@1money/components-ui';\n// or\nimport { Calendar } from '@1money/components-ui/Calendar';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "feb0c04288ce976b2a2dd118a352d0c9501645b51a4f529bf1cb1d9057ef34f1": {
+      "title": "Radio Group Story",
+      "code": "<ProForm\n      {...args}\n      initialValues={{ gender: 'male', plan: 'pro' }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormRadioGroup\n        name=\"gender\"\n        label=\"Gender\"\n        fieldProps={{\n          options: [\n            { label: 'Male', value: 'male' },\n            { label: 'Female', value: 'female' },\n            { label: 'Other', value: 'other' },\n          ],\n        }}\n      />\n      <ProFormRadioGroup\n        name=\"plan\"\n        label=\"Plan\"\n        fieldProps={{\n          direction: 'horizontal',\n          options: [\n            { label: 'Free', value: 'free' },\n            { label: 'Pro', value: 'pro' },\n            { label: 'Enterprise', value: 'enterprise' },\n          ],\n        }}\n      />\n    </ProForm>",
+      "source": "stories",
+      "compilable": false
+    },
+    "fee60afafe32035844a3102b3d30152024652c2b12eb46104b0dfb5c8026dc26": {
+      "title": "Canonical usage",
+      "code": "import type { ProFormDependencyProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    }
+  }
+}