@1money/component-ui 0.0.42 → 0.0.44

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

@@ -37,12 +37,6 @@
       "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  }",
@@ -67,18 +61,18 @@
       "source": "stories",
       "compilable": false
     },
-    "0438a4317a7d7a552850cb51936a9650a74930e6c8b9e8a6f8c36de31ab885a0": {
-      "title": "Canonical usage",
-      "code": "import { Trigger } from '@1money/components-ui';\n// or\nimport { Trigger } from '@1money/components-ui/Trigger';",
-      "source": "canonical",
-      "compilable": true
-    },
     "047c2f9b4e0f29aa1bfa1d29f631e05af609d686dc8ddcf1ab8a44f3838c16a5": {
       "title": "Default",
       "code": "<DashboardTemplate />",
       "source": "stories",
       "compilable": true
     },
+    "059d700d7a0e1ac3f3128b3461d9f1e718e140448690ccb50db0915c49cd7461": {
+      "title": "Canonical usage",
+      "code": "import { Alert } from '@1money/component-ui';\n// or\nimport { Alert } from '@1money/component-ui/Alert';",
+      "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>",
@@ -103,21 +97,27 @@
       "source": "stories",
       "compilable": true
     },
+    "07987ce3193833ae5e02466d3b7ea1e51372a52d41cdafaa11450f4bab575130": {
+      "title": "Canonical usage",
+      "code": "import { Dropdown } from '@1money/component-ui';\n// or\nimport { Dropdown } from '@1money/component-ui/Dropdown';",
+      "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
     },
-    "08af6791ed777b4f8ea419b22b1309470e98f6762ccd1ac6fc23e09d6676587b": {
-      "title": "Canonical usage",
-      "code": "import { Progress } from '@1money/components-ui';\n// or\nimport { Progress } from '@1money/components-ui/Progress';",
-      "source": "canonical",
+    "07cacb15e560cfbe8f05e93459b5f0d51faf5fd0a01b0995368a360610e18d30": {
+      "title": "Import",
+      "code": "import {\n  ProForm,\n  ProFormText,\n  ProFormSelect,\n  DialogForm,\n  QueryFilter,\n} from '@1money/component-ui';\n// or\nimport { ProForm, ProFormText } from '@1money/component-ui/ProForm';",
+      "source": "readme",
       "compilable": true
     },
-    "08d86e1e9a9ccea86e7168af88595e9da0ef259cf44907a5be70520cdb1e4a4a": {
+    "08616eb7b07c701d8cd3872fb1e802eac207a2cf2a3a802b28360fc7112d1ca8": {
       "title": "Import",
-      "code": "import { Link } from '@1money/components-ui';\n// or\nimport { Link } from '@1money/components-ui/Link';",
+      "code": "import { Calendar } from '@1money/component-ui';\n// or\nimport { Calendar } from '@1money/component-ui/Calendar';",
       "source": "readme",
       "compilable": true
     },
@@ -133,10 +133,10 @@
       "source": "stories",
       "compilable": true
     },
-    "0c268f0ec6b90f7352970d3db858c53364c60f2321af3c578568fc93082425bb": {
-      "title": "Canonical usage",
-      "code": "import { Tabs } from '@1money/components-ui';\n// or\nimport { Tabs } from '@1money/components-ui/Tabs';",
-      "source": "canonical",
+    "0af966e9349f745d71c776d3f6e0547aecbbb0d12fb0a9964b1ec02d8a61baae": {
+      "title": "Import",
+      "code": "import { Dialog } from '@1money/component-ui';\n// or\nimport { Dialog } from '@1money/component-ui/Dialog';",
+      "source": "readme",
       "compilable": true
     },
     "0c7c04366337519cd94b38f5358dfa8f9eec80c8f289ba172def5f00e1a89ba3": {
@@ -145,30 +145,48 @@
       "source": "stories",
       "compilable": false
     },
+    "0c865e04e29af2a17146034e78e156e8271e4c6700f4b8d431d67f0ba04a6d6a": {
+      "title": "Canonical usage",
+      "code": "import {\n  ProForm,\n  ProFormText,\n  ProFormSelect,\n  DialogForm,\n  QueryFilter,\n} from '@1money/component-ui';\n// or\nimport { ProForm, ProFormText } from '@1money/component-ui/ProForm';",
+      "source": "canonical",
+      "compilable": true
+    },
     "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
     },
+    "0cda435f1e77eae5e9d6a2c883f7b45f34643b77a9a4f8ca3d23ea33a09b9a01": {
+      "title": "Responsive Usage",
+      "code": "const GRID_GUTTER = { sm: 8, md: 16, lg: 24 };\nconst SPAN_BASE = 12;\nconst SPAN_SM = 6;\nconst SPAN_MD = 4;\nconst OFFSET_MD = 2;\nconst SPAN_LARGE = 3;\n\nimport { GRID_JUSTIFY } from '@1money/component-ui/Grid';\n\nconst GRID_JUSTIFY_RESPONSIVE = {\n  sm: GRID_JUSTIFY.start,\n  md: GRID_JUSTIFY.spaceBetween,\n  lg: GRID_JUSTIFY.end\n};\nconst PUSH_COL = 1;\nconst PULL_COL = 1;\n\n<Grid gutter={GRID_GUTTER}>\n  <Grid.Col span={SPAN_BASE} sm={SPAN_SM} md={{ span: SPAN_MD, offset: OFFSET_MD }} lg={SPAN_LARGE} />\n</Grid>\n\n<Grid gutter={GRID_GUTTER} justify={GRID_JUSTIFY_RESPONSIVE}>\n  <Grid.Col span={SPAN_BASE} sm={SPAN_SM} md={{ span: SPAN_MD, offset: OFFSET_MD }} lg={SPAN_LARGE} />\n  <Grid.Col span={SPAN_BASE} push={PUSH_COL} pull={PULL_COL} />\n</Grid>",
+      "source": "readme",
+      "compilable": true
+    },
     "0df7d43ad53f6a66386ebad5a61eaaf088d0b9200a5fb97e51f6c4964aefd05e": {
       "title": "Usage",
       "code": "<Switch label=\"Notifications\" onChange={(checked) => console.log(checked)} />\n\n<Switch\n  label=\"Dark Mode\"\n  description=\"Enable dark theme across the app\"\n  defaultChecked\n/>",
       "source": "readme",
       "compilable": true
     },
+    "10c3dc4b995524ead942626d1a9e7ef96f11e52235700d42ddbf138090b3a9ad": {
+      "title": "Canonical usage",
+      "code": "import { Slider } from '@1money/component-ui';\n// or\nimport { Slider } from '@1money/component-ui/Slider';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "11a75effde4de419507479c188f4208bc45d4e54ee6928476375f622ea51f29d": {
+      "title": "Canonical usage",
+      "code": "import { ResizeObserver, useResizeObserver } from '@1money/component-ui';\n// or\nimport { ResizeObserver, Collection, useResizeObserver } from '@1money/component-ui/ResizeObserver';",
+      "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
     },
-    "121fd04bd739e98c6ccc312a1be13069715c343ad66bcbd8e3b076ee2611f60a": {
-      "title": "Canonical usage",
-      "code": "import type { IconsProps } from '@1money/component-ui';",
-      "source": "canonical",
-      "compilable": true
-    },
     "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  }",
@@ -181,18 +199,24 @@
       "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
     },
+    "1673418288f034d6e46db906f3b2fb8a2079625c30f15ed4c7c35c0e4568f940": {
+      "title": "Basic Usage",
+      "code": "import { Grid } from '@1money/component-ui';\nimport { GRID_ALIGN, GRID_JUSTIFY } from '@1money/component-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
+    },
+    "17a413d259fae192ca2f0c09fc23af856852b5f5ca65c1efa9dcb95480776ede": {
+      "title": "Disabled Vs Read Only",
+      "code": "<div style={{ display: 'flex', gap: 24 }}>\n      <div style={storyContainerStyle}>\n        <Select\n          label=\"Disabled\"\n          options={OPTIONS}\n          value=\"btc\"\n          disabled\n        />\n      </div>\n      <div style={storyContainerStyle}>\n        <Select\n          label=\"Read only\"\n          options={OPTIONS}\n          value=\"btc\"\n          readOnly\n        />\n      </div>\n    </div>",
+      "source": "stories",
+      "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  }",
@@ -205,12 +229,36 @@
       "source": "readme",
       "compilable": true
     },
+    "19d1f168d6381a52a225b4e4518a55b8dec5b0305e036f4c57f63a77465435b2": {
+      "title": "Import",
+      "code": "import { Step } from '@1money/component-ui';\n// or\nimport { Step } from '@1money/component-ui/Step';",
+      "source": "readme",
+      "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
     },
+    "1b3e0014243a3c2fc49f18ec95bf7915a97bf89be93ea39221e905dc26aa7035": {
+      "title": "Import",
+      "code": "import { Portal } from '@1money/component-ui';\n// or\nimport { Portal } from '@1money/component-ui/Portal';",
+      "source": "readme",
+      "compilable": true
+    },
+    "1b62b166b8cc556e31e7ffa0b7d5ea66b965e65e6bf73b737499332aa8b0ce15": {
+      "title": "Canonical usage",
+      "code": "import { Tooltip } from '@1money/component-ui';\n// or\nimport { Tooltip } from '@1money/component-ui/Tooltip';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "1cc244bf13712c43e79b378e25198234696ed488d0a147473327f0eb16c461bc": {
+      "title": "Searchable Sizes",
+      "code": "{\n    const [largeValue, setLargeValue] = useState<string | number | undefined>('usdt');\n    const [smallValue, setSmallValue] = useState<string | number | undefined>('usdt');\n\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 320 }}>\n        <Select\n          {...args}\n          size=\"large\"\n          label=\"Large\"\n          value={largeValue}\n          onChange={(nextValue, option) => {\n            setLargeValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n        <Select\n          {...args}\n          size=\"small\"\n          label=\"Small\"\n          filterInputAutoFocus={false}\n          value={smallValue}\n          onChange={(nextValue, option) => {\n            setSmallValue(nextValue as string | number | undefined);\n            args.onChange?.(nextValue, option);\n          }}\n        />\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": false
+    },
     "1d0cc410e4f667fa13d9ad249ca801acda6fd51fc78c87c3b00209163c48df6b": {
       "title": "Range Selection",
       "code": "<Calendar\n  label=\"Date Range\"\n  selectionMode=\"range\"\n  numberOfMonths={2}\n/>",
@@ -241,30 +289,42 @@
       "source": "stories",
       "compilable": false
     },
+    "1f1b7a95b5907a8f4904dcc20ae03f7dd509d1e5ea1570f9fd663a0d8baf1f2a": {
+      "title": "Canonical usage",
+      "code": "import { Input } from '@1money/component-ui';\n// or\nimport { Input } from '@1money/component-ui/Input';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "1f2928ec0a947db2a5fec3cc4241fef3b241c19c1d121bfc46c37aec0af0edbe": {
+      "title": "Usage",
+      "code": "import { Button } from '@1money/component-ui';\n\n<Dropdown\n  content={({ close }) => (\n    <button type=\"button\" onClick={close}>\n      Close\n    </button>\n  )}\n  placement=\"bottom-start\"\n>\n  <Button>Open menu</Button>\n</Dropdown>",
+      "source": "readme",
+      "compilable": true
+    },
     "1f944ea3bc1de41179d6d298524b5c3604ace798b878bacd31dc65416b264e80": {
       "title": "Brand Spinner with Message",
       "code": "<Spinner\n  type=\"brand\"\n  size={56}\n  title=\"Hang tight\"\n  body=\"We're processing your request\"\n/>",
       "source": "readme",
       "compilable": true
     },
+    "20d57203520c799fa33716a33d4bc15c62ab5180b8628139aa313d443bf3c802": {
+      "title": "Import",
+      "code": "import { Tooltip } from '@1money/component-ui';\n// or\nimport { Tooltip } from '@1money/component-ui/Tooltip';",
+      "source": "readme",
+      "compilable": true
+    },
+    "20ec463b0b6df55a2fa2c5df4836735067151eb22ca13e76ea7b7795465b3141": {
+      "title": "Without Portal",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <div style={{ position: 'relative' }}>\n        <Select\n          {...args}\n          portal={false}\n          value={value}\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
+    },
     "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
-    },
-    "21cf92888ecabc84d2f36ba71a1b5a30b1fc75a963b72b6bd4ad911c20be6142": {
-      "title": "Canonical usage",
-      "code": "import type { IconName } from '@1money/component-ui';",
-      "source": "canonical",
-      "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  }",
@@ -283,12 +343,6 @@
       "source": "stories",
       "compilable": false
     },
-    "226ab361064aae3c8c8f47bb5d32f8dd315bb5427d7c7a1e8cf5d4f10a0d325c": {
-      "title": "Canonical usage",
-      "code": "import { VirtualList } from '@1money/components-ui';\n// or\nimport { VirtualList } from '@1money/components-ui/VirtualList';",
-      "source": "canonical",
-      "compilable": true
-    },
     "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>",
@@ -307,6 +361,18 @@
       "source": "stories",
       "compilable": true
     },
+    "231cba24b4a9f1ba3a3ac60ae9526c919f6067a6a5e5147a00bec11fd9e57067": {
+      "title": "Import",
+      "code": "import { Grid, Row, Col } from '@1money/component-ui';\n// or\nimport { Grid, Row, Col } from '@1money/component-ui/Grid';\nimport { GRID_ALIGN, GRID_JUSTIFY } from '@1money/component-ui/Grid';",
+      "source": "readme",
+      "compilable": true
+    },
+    "23592116b9596d1493aa1b0ad242483fc2358a83e24e126eb5db3a4265391b98": {
+      "title": "Canonical usage",
+      "code": "import { CoachMark } from '@1money/component-ui';\n// or\nimport { CoachMark } from '@1money/component-ui/CoachMark';",
+      "source": "canonical",
+      "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>",
@@ -373,39 +439,33 @@
       "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
-    },
     "28a4918e2bb83aaa273cf3846c84c67dca51a5280decbef71e82f997dda9baac": {
       "title": "Usage",
       "code": "<ResizeObserver\n  onResize={(size, element) => {\n    console.log(size.width, element);\n  }}\n>\n  <div>Measured content</div>\n</ResizeObserver>",
       "source": "readme",
       "compilable": true
     },
+    "28d655b4312a50e5d20bbbf1d018d4583bd377ee502b3ffee72ca3f17a1bb072": {
+      "title": "Import",
+      "code": "import { Progress } from '@1money/component-ui';\n// or\nimport { Progress } from '@1money/component-ui/Progress';",
+      "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
     },
-    "29a8d3d4fdc2b1b61574ec8e8a8a2ffb57226781120cdc378f8d179d101a0032": {
+    "29453274a03adf14b66bc942588fe73c83d286a864658c26536b67a996236cc7": {
       "title": "Canonical usage",
-      "code": "import { Tour } from '@1money/components-ui';\n// or\nimport { Tour } from '@1money/components-ui/Tour';",
+      "code": "import { Radio, RadioGroup } from '@1money/component-ui';\n// or tree-shakeable\nimport { Radio, RadioGroup } from '@1money/component-ui/Radio';",
       "source": "canonical",
       "compilable": true
     },
-    "29e2310b26c2aecedef7a08fdce046f6fada2887312516d227bf0467d9691185": {
-      "title": "Import",
-      "code": "import {\n  ProForm,\n  ProFormText,\n  ProFormSelect,\n  DialogForm,\n  QueryFilter,\n} from '@1money/components-ui';\n// or\nimport { ProForm, ProFormText } from '@1money/components-ui/ProForm';",
-      "source": "readme",
-      "compilable": true
-    },
-    "2a00b4740e301b8a7ac79f978053cc5d0d9e28704a3496719ce12b34448697d2": {
+    "2982842534ed88247ac07099dc694a4b0087d1d1ed1f59eda5d9efaaf888f40c": {
       "title": "Import",
-      "code": "import { Accordion } from '@1money/components-ui';\n// or\nimport { Accordion } from '@1money/components-ui/Accordion';",
+      "code": "import { Upload, UploadFileBar } from '@1money/component-ui';\n// or\nimport { Upload, UploadFileBar } from '@1money/component-ui/Upload';",
       "source": "readme",
       "compilable": true
     },
@@ -415,36 +475,54 @@
       "source": "stories",
       "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
+    },
     "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
     },
+    "2f014c8b7fe8bf6d1251bf341df8d93d7b3d3d66a185b95d0cabfa7328259e4b": {
+      "title": "Canonical usage",
+      "code": "import { Tabs } from '@1money/component-ui';\n// or\nimport { Tabs } from '@1money/component-ui/Tabs';",
+      "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
     },
+    "31040a7ff19f27a25e9ba2a3b39168650944f1c7a3f0056e5b2b51ee4581d1af": {
+      "title": "Import",
+      "code": "import { Popconfirm } from '@1money/component-ui';\nimport '@1money/component-ui/index.css';",
+      "source": "readme",
+      "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
     },
+    "339afc4bf7df571a14ddee5065e32a46b5493ab19978ace33f336a5c7a504234": {
+      "title": "Import",
+      "code": "import { Clipboard } from '@1money/component-ui';\n// or\nimport { Clipboard } from '@1money/component-ui/Copy';",
+      "source": "readme",
+      "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>",
@@ -487,16 +565,10 @@
       "source": "readme",
       "compilable": true
     },
-    "36b6b20f42395f39098061f501edd80895fcbc554523f70a876a7e3a2be50f6f": {
-      "title": "Import",
-      "code": "import { Tour } from '@1money/components-ui';\n// or\nimport { Tour } from '@1money/components-ui/Tour';",
-      "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",
+    "36788273238e85e65bbc04aade71ec57ec93c9371eb2414aa4bbac932afe4cc8": {
+      "title": "Canonical usage",
+      "code": "import { Spinner } from '@1money/component-ui';\n// or\nimport { Spinner } from '@1money/component-ui/Spinner';",
+      "source": "canonical",
       "compilable": true
     },
     "36f868d28259a7ebb3c6decbe9768b0ac838fd1617e57e32bace1c0dde27546d": {
@@ -511,18 +583,18 @@
       "source": "stories",
       "compilable": false
     },
+    "388bcf7888091d287918f2abfe24285c3cfff0239bf53bd18a57521a4d44c8e1": {
+      "title": "Custom",
+      "code": "{\n    const [selected, setSelected] = useState<Array<string | number>>(['btc', 'eth', 'sol']);\n    const [open, setOpen] = useState(false);\n\n    const toggle = (value: string | number) => {\n      setSelected((prev) =>\n        prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n      );\n    };\n\n    const triggerLabel = selected.length > 0\n      ? `${selected.length} selected`\n      : null;\n\n    return (\n      <div style={storyContainerStyle}>\n        <Select.Custom\n          label=\"Assets\"\n          placeholder=\"Select assets\"\n          open={open}\n          onOpenChange={setOpen}\n          selectedTemplate={triggerLabel}\n        >\n          {() => (\n            <>\n              <div style={customPanelHeaderStyle}>\n                <span style={customPanelTitleStyle}>\n                  {selected.length} selected\n                </span>\n                <button\n                  type=\"button\"\n                  style={customClearAllStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={14} color=\"currentColor\" />\n                  Clear all\n                </button>\n              </div>\n              {ASSET_OPTIONS.map((option) => {\n                const isSelected = selected.includes(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    style={customRowStyle}\n                    onClick={() => toggle(option.value)}\n                  >\n                    <AssetMark value={option.value} />\n                    <span style={assetOptionLabelStyle}>{option.label}</span>\n                    <span style={customCheckboxStyle(isSelected)}>\n                      {isSelected && <Icons name=\"check\" size={14} color=\"currentColor\" />}\n                    </span>\n                  </button>\n                );\n              })}\n            </>\n          )}\n        </Select.Custom>\n      </div>\n    );\n  }",
+      "source": "stories",
+      "compilable": true
+    },
     "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>",
@@ -547,18 +619,18 @@
       "source": "stories",
       "compilable": false
     },
-    "3c554437f7534e672da53194827c88c647b2091520a4db816184c1ffdc84c59a": {
-      "title": "Canonical usage",
-      "code": "import type { IconWrapperProps } from '@1money/component-ui';",
-      "source": "canonical",
-      "compilable": true
-    },
     "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
     },
+    "3c96cd1309b8343e68775a3eb2807b574c01d500cd61c0aefff0e9007f042175": {
+      "title": "Import",
+      "code": "import { Icons, IconWrapper, IconHover } from '@1money/component-ui';\n// or\nimport { Icons, IconWrapper, IconHover } from '@1money/component-ui/Icons';\n\n// Type imports\nimport type { IconName, SortIconStatus } from '@1money/component-ui';",
+      "source": "readme",
+      "compilable": true
+    },
     "3e868fc7054ec26b6d612e345cd084dcdbb6a51b7d290eae2fa333509e0c9b33": {
       "title": "Canonical usage",
       "code": "<Popconfirm />",
@@ -571,27 +643,21 @@
       "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
-    },
-    "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
     },
-    "41c91bf415fa7b2b7fcfbba49136e2254bcf778a33e916d12446e042629a0943": {
+    "41af856d1d6a822e2c95f25c337807c0d18d1e445d318d07621beba85ce3e926": {
+      "title": "Searchable Small",
+      "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          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
+    },
+    "42725955e8eb348643a00cbbd15d1485475e1917d44f5e685f6f2a094fa6a4a5": {
       "title": "Canonical usage",
-      "code": "import { Switch } from '@1money/components-ui';\n// or\nimport { Switch } from '@1money/components-ui/Switch';",
+      "code": "import { Space } from '@1money/component-ui';\n// or\nimport { Space } from '@1money/component-ui/Space';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/component-ui/Space';",
       "source": "canonical",
       "compilable": true
     },
@@ -601,24 +667,12 @@
       "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
-    },
     "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
-    },
     "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  }",
@@ -655,6 +709,12 @@
       "source": "stories",
       "compilable": true
     },
+    "48c240723515be69d8de101f9bfe1d2ff596d82504645cc07dfb281c0a6a8ca5": {
+      "title": "Canonical usage",
+      "code": "import { Typography } from '@1money/component-ui';\n// or\nimport {\n  Typography,\n  TypographyBody,\n  TypographyDisplay,\n  TypographyHeadline,\n  TypographyLabel,\n  TypographyLink,\n  TypographyTitle,\n} from '@1money/component-ui/Typography';",
+      "source": "canonical",
+      "compilable": true
+    },
     "48f6ebde7546d7db844b0cd43bd6e6ec6956746f93c55167fda6a2cd84599a3e": {
       "title": "No Animation",
       "code": "<Segment items={DEFAULT_ITEMS} animated={false} />",
@@ -709,24 +769,12 @@
       "source": "stories",
       "compilable": false
     },
-    "4cc41ff919669138b7ad66655a256cd5a3885bd739764784d8a5de068b87beb3": {
-      "title": "Import",
-      "code": "import { Drawer } from '@1money/components-ui';\n// or\nimport { Drawer } from '@1money/components-ui/Drawer';",
-      "source": "readme",
-      "compilable": true
-    },
     "4d9f3593600e6013d369532a23201039bffa9c7463d467180f93c3e95fc48c1b": {
       "title": "Inline Button Loading",
       "code": "<button disabled={loading}>\n  {loading ? (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n      <Spinner size={16} />\n      <span>Submitting…</span>\n    </div>\n  ) : (\n    'Submit'\n  )}\n</button>",
       "source": "readme",
       "compilable": true
     },
-    "4e47a5538f745fc8cf26d22a91bc3e95fda46600baf715b49e208804b00e3049": {
-      "title": "Canonical usage",
-      "code": "import { Table, VirtualTable } from '@1money/components-ui';\n// or\nimport { Table, VirtualTable } from '@1money/components-ui/Table';",
-      "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>",
@@ -739,10 +787,10 @@
       "source": "readme",
       "compilable": true
     },
-    "50164c21b0b9ce491a97b9f31ca0eab4a51ce38d2496720d37242f774f78df20": {
-      "title": "Canonical usage",
-      "code": "import { Slider } from '@1money/components-ui';\n// or\nimport { Slider } from '@1money/components-ui/Slider';",
-      "source": "canonical",
+    "4f8d5b3c517bceedb0df6dc7f1b762de0f1625cd80d3cd006b7cd6725c693561": {
+      "title": "Import",
+      "code": "import { Checkbox } from '@1money/component-ui';\n// or\nimport { Checkbox } from '@1money/component-ui/Checkbox';",
+      "source": "readme",
       "compilable": true
     },
     "52e49c0728ddadda69ef98366ad789e66211d87acbb7ca43af959df87ec0767b": {
@@ -751,15 +799,9 @@
       "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
-    },
-    "5366737d28dd367f234fcb03fbbe9b966ae9baf9f4d4d05ad628e2c16c5a4e3c": {
+    "56434ea344c01f25a04ecb3cdf55d35d04a2631937c4fdecac6e4bb577a69175": {
       "title": "Canonical usage",
-      "code": "<IconWrapper />",
+      "code": "import { Switch } from '@1money/component-ui';\n// or\nimport { Switch } from '@1money/component-ui/Switch';",
       "source": "canonical",
       "compilable": true
     },
@@ -787,15 +829,21 @@
       "source": "stories",
       "compilable": false
     },
+    "57e6a47e5312d937d88aebeb098d4786684b38e5e6953da1f4dbcb0bee035b70": {
+      "title": "Import",
+      "code": "import { Flex } from '@1money/component-ui';\n// or\nimport { Flex } from '@1money/component-ui/Flex';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY, FLEX_WRAP } from '@1money/component-ui/Flex';",
+      "source": "readme",
+      "compilable": true
+    },
     "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
     },
-    "59a4bace5950d3f3aaef19cc61af7ddab1440a4220c81a0f60b0276728d5ab88": {
-      "title": "Usage",
-      "code": "<Dropdown\n  content={({ close }) => (\n    <button type=\"button\" onClick={close}>\n      Close\n    </button>\n  )}\n  placement=\"bottom-start\"\n>\n  <Button>Open menu</Button>\n</Dropdown>",
+    "5a4df64ed15fd8845be815f9f67cd01c0f22d1a22431c653c972f7ab6cff60f7": {
+      "title": "Import",
+      "code": "import { Slider } from '@1money/component-ui';\n// or\nimport { Slider } from '@1money/component-ui/Slider';",
       "source": "readme",
       "compilable": true
     },
@@ -811,12 +859,6 @@
       "source": "stories",
       "compilable": true
     },
-    "5c2d27af4dbbbbbab8df84b3717712bc8ef7522b3f93eb8d20540a1db723e8e9": {
-      "title": "Import",
-      "code": "import { VirtualList } from '@1money/components-ui';\n// or\nimport { VirtualList } from '@1money/components-ui/VirtualList';",
-      "source": "readme",
-      "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  }",
@@ -835,6 +877,12 @@
       "source": "stories",
       "compilable": true
     },
+    "5e00edd3637d6c6dc07726e8869358c272f4f3f102f4e7323b4dc71d74647a93": {
+      "title": "Canonical usage",
+      "code": "import { Clipboard } from '@1money/component-ui';\n\n<Clipboard\n  label=\"Setup Key\"\n  content=\"GWKLDLVE25dfLIJOHUD578JPIHD24JLJGHGOUH27HLIHOUGOLIKHJ547HOU\"\n  onSuccess={(v) => console.log(v)}\n/>",
+      "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>",
@@ -847,21 +895,21 @@
       "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
-    },
     "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": {
+    "6100fc2a8e5223e9cb058946bfa868735653b13a46dbde6901ba88436958f7b9": {
       "title": "Canonical usage",
-      "code": "import { Skeleton } from '@1money/components-ui';\n// or\nimport { Skeleton } from '@1money/components-ui/Skeleton';",
+      "code": "import { Navigation, Nav, NavigationStepper } from '@1money/component-ui';\n// or\nimport { Navigation, Nav, NavigationStepper } from '@1money/component-ui/Navigation';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "611d0250c7741a20c80e73d193b80a1b7ef07db189ce51a592525843432117af": {
+      "title": "Canonical usage",
+      "code": "import { Carousel } from '@1money/component-ui';\n// or\nimport { Carousel } from '@1money/component-ui/Carousel';",
       "source": "canonical",
       "compilable": true
     },
@@ -877,6 +925,18 @@
       "source": "canonical",
       "compilable": true
     },
+    "62b5efe615c2669f474d5e6b4b89e9548d25b067decf9570da5994151f8c3d63": {
+      "title": "Import",
+      "code": "import { Radio, RadioGroup } from '@1money/component-ui';\n// or tree-shakeable\nimport { Radio, RadioGroup } from '@1money/component-ui/Radio';",
+      "source": "readme",
+      "compilable": true
+    },
+    "63391782d107e1289c88ced32f63afa3f0c14adfed71d7eec78de19097260755": {
+      "title": "Navigation (sidebar with collapse)",
+      "code": "import { useRef } from 'react';\nimport type { NavigationHandlers } from '@1money/component-ui';\n\nconst ref = useRef<NavigationHandlers>(null);\n\nfunction CompanySelector() {\n  return <button type=\"button\">Acme Treasury</button>;\n}\n\nfunction SettingsLink() {\n  return <a href=\"/settings\">Settings</a>;\n}\n\n<Navigation\n  ref={ref}\n  items={[\n    { key: 'home', label: 'Home', icon: 'home', active: true },\n    { key: 'portfolio', label: 'Portfolio', icon: 'portfolio' },\n    {\n      key: 'transactions',\n      label: 'Transactions',\n      icon: 'transactions',\n      children: [\n        { key: 'deposits', label: 'Deposits' },\n        { key: 'withdrawals', label: 'Withdrawals' },\n      ],\n    },\n  ]}\n  collapsible\n  onCollapse={(collapsed) => console.log(collapsed)}\n  selector={<CompanySelector />}\n>\n  {/* rendered at the bottom of the sidebar */}\n  <SettingsLink />\n</Navigation>\n\n// Imperative control\nref.current?.toggle();\nref.current?.collapse(true);",
+      "source": "readme",
+      "compilable": true
+    },
     "63dbd5aa5b4f9b648a7f6152b99058966f4b36ade7cece4b750f71e4389a4dea": {
       "title": "Usage",
       "code": "<Carousel count={4} defaultActiveIndex={0} onChange={(index) => console.log(index)} />",
@@ -889,12 +949,6 @@
       "source": "stories",
       "compilable": true
     },
-    "65c3343037038d0c10d4369de3281ebadf175b42ba5afe9bf9ae5c490d587003": {
-      "title": "Import",
-      "code": "import { Pagination, usePagination } from '@1money/components-ui';\n// or\nimport { Pagination, usePagination } from '@1money/components-ui/Pagination';",
-      "source": "readme",
-      "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>",
@@ -913,54 +967,24 @@
       "source": "stories",
       "compilable": false
     },
-    "69f29e0647a74609f6aaa9ea3dc6ffa3559143861f405d2fd72e046abddd390a": {
-      "title": "Import",
-      "code": "import { Clipboard } from '@1money/components-ui';\n// or\nimport { Clipboard } from '@1money/components-ui/Copy';",
-      "source": "readme",
-      "compilable": true
-    },
     "6a4d77a29ff76bfcd465b53ac79952fae765bb337ef3ca2affc7781ce487a74f": {
       "title": "With Icon End",
       "code": "<Button {...args} iconEnd={<Icons name=\"arrowRight\" />}>\n      Icon End\n    </Button>",
       "source": "stories",
       "compilable": false
     },
-    "6c0a39263e45288c6f9a62e5fb3169389da1c8d69bd0092467335b58cf40b2ab": {
+    "6bf195e98d5a455cd0e5d43c58373b8311a4178b49a2f00f1f029af3e4b24447": {
       "title": "Canonical usage",
-      "code": "import { Link } from '@1money/components-ui';\n// or\nimport { Link } from '@1money/components-ui/Link';",
+      "code": "import { Empty } from '@1money/component-ui';\n// or\nimport { Empty } from '@1money/component-ui/Empty';",
       "source": "canonical",
       "compilable": true
     },
-    "6c73541844cb6bb287f5a4f0c9d25be0cbdd0d09518b1abd0c49b8d738ddfaa8": {
+    "6cdbf053120c0759e352f165296a9e509b2a7f994d1bf58da3b65dd4e3603553": {
       "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>",
+      "code": "import { Segment } from '@1money/component-ui';\n// or\nimport { Segment } from '@1money/component-ui/Segment';",
       "source": "readme",
       "compilable": true
     },
-    "6d1aac6219f8d395eb9f6c5c13da9f51970c30059c74d6faeb7ddc895bc2af19": {
-      "title": "Canonical usage",
-      "code": "import type { IconHoverProps } from '@1money/component-ui';",
-      "source": "canonical",
-      "compilable": true
-    },
-    "6dadb9a4d982338ee8398025f4cea4aa2ed33dba5303e56b6a65b1f23cb93bf0": {
-      "title": "Canonical usage",
-      "code": "import { Select } from '@1money/components-ui';\n// or\nimport { Select } from '@1money/components-ui/Select';",
-      "source": "canonical",
-      "compilable": true
-    },
-    "6e80043b40836c60acfd06f4f79316dc3655e1d82fbc77f8f04b8126862001af": {
-      "title": "Canonical usage",
-      "code": "import {\n  ProForm,\n  ProFormText,\n  ProFormSelect,\n  DialogForm,\n  QueryFilter,\n} from '@1money/components-ui';\n// or\nimport { ProForm, ProFormText } from '@1money/components-ui/ProForm';",
-      "source": "canonical",
-      "compilable": true
-    },
     "6ea2fa87fa2050f0e9e5f271bfbcac33d12cf62034f24d55257ec9955430ef59": {
       "title": "Usage",
       "code": "<Clipboard\n  label=\"Setup Key\"\n  content=\"GWKLDLVE25dfLIJOHUD578JPIHD24JLJGHGOUH27HLIHOUGOLIKHJ547HOU\"\n  onSuccess={(val) => console.log('Copied:', val)}\n  onError={(val) => console.log('Failed:', val)}\n/>",
@@ -973,28 +997,34 @@
       "source": "stories",
       "compilable": false
     },
+    "6fdf08048e1bed84d748f8d5d2fb86efe525926a026aaa4917f514fc855777b2": {
+      "title": "Canonical usage",
+      "code": "import { ProForm } from '@1money/component-ui';\n\n<ProForm onFinish={(values) => console.log(values)}>\n  <ProForm.Text name=\"name\" label=\"Name\" />\n</ProForm>",
+      "source": "canonical",
+      "compilable": true
+    },
     "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
     },
-    "71d241ed07b5a8c1aaa432bcff2fb9f72af207e1c7f5aa4023ac2359f926be9e": {
-      "title": "Usage",
-      "code": "<Drawer\n  open={open}\n  title=\"Transfer details\"\n  placement=\"right\"\n  onClose={() => setOpen(false)}\n  footer={<Button onClick={() => setOpen(false)}>Done</Button>}\n>\n  Drawer content\n</Drawer>",
-      "source": "readme",
-      "compilable": true
-    },
     "71f7aeb8fd7bb546bc7d562a717683681d8eccf7f2beeee86e3196121d6656f1": {
       "title": "With Icon Start",
       "code": "<Button {...args} iconStart={<Icons name=\"add\" />}>\n      Icon Start\n    </Button>",
       "source": "stories",
       "compilable": false
     },
-    "72e53f1f60724efcfebfca8207585573799139c8895777a6a6d283673008ba74": {
-      "title": "Import",
-      "code": "import { CoachMark } from '@1money/components-ui';\n// or\nimport { CoachMark } from '@1money/components-ui/CoachMark';",
-      "source": "readme",
+    "72f524de604ba1db3308d0b8f5131b0204abf6a3e411be78f4f61d0fc2081eb7": {
+      "title": "Render Option Content",
+      "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          renderOptionContent={renderAssetOptionContent}\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
+    },
+    "7318e5e19b35c2334284717d2b44382c3f0aa456d1d61c6892e3211c2c77135d": {
+      "title": "Canonical usage",
+      "code": "import { Pagination, usePagination } from '@1money/component-ui';\n// or\nimport { Pagination, usePagination } from '@1money/component-ui/Pagination';",
+      "source": "canonical",
       "compilable": true
     },
     "7374135a0f5702e8c0e689b3ce2576b5c15b47c90d9fffe7c2bcff8693acd9ef": {
@@ -1003,6 +1033,12 @@
       "source": "stories",
       "compilable": true
     },
+    "73c34dcab340dfc36bb0f4e928f6911b25f7f3d6d590dfb72c3c1226a9c573fe": {
+      "title": "Canonical usage",
+      "code": "import { Tag } from '@1money/component-ui';\n// or\nimport { Tag } from '@1money/component-ui/Tag';",
+      "source": "canonical",
+      "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>",
@@ -1021,18 +1057,6 @@
       "source": "stories",
       "compilable": false
     },
-    "75fc55f93a5502c927a0f7967cd25465c98417b3afe02ec8880531efc12a3362": {
-      "title": "Canonical usage",
-      "code": "import { Clipboard } from '@1money/components-ui';\n\n<Clipboard\n  label=\"Setup Key\"\n  content=\"GWKLDLVE25dfLIJOHUD578JPIHD24JLJGHGOUH27HLIHOUGOLIKHJ547HOU\"\n  onSuccess={(v) => console.log(v)}\n/>",
-      "source": "canonical",
-      "compilable": true
-    },
-    "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>",
@@ -1045,12 +1069,6 @@
       "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
-    },
     "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>",
@@ -1063,6 +1081,18 @@
       "source": "readme",
       "compilable": true
     },
+    "79ba9feac95c34ef9c471c31ca2e8d612dd9da173b384f413f52916a485d6065": {
+      "title": "Canonical usage",
+      "code": "import { Calendar } from '@1money/component-ui';\n// or\nimport { Calendar } from '@1money/component-ui/Calendar';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "7a25185c2f84fe20e85c2806cd7c4a624a5062225c528477beb49e950592f87c": {
+      "title": "Usage",
+      "code": "import { Icons } from '@1money/component-ui';\n\nconst steps = [\n  {\n    icon: <Icons name=\"dashboard\" size={24} />,\n    heading: 'Welcome to Dashboard',\n    body: 'Here you can see an overview of your finances.',\n  },\n  {\n    heading: 'Track Your Spending',\n    body: 'Use the charts to monitor transactions by category.',\n  },\n  {\n    heading: \"You're all set!\",\n    body: 'Explore the rest of the app at your own pace.',\n  },\n];\n\n<CoachMark\n  steps={steps}\n  defaultActiveStep={0}\n  placement=\"top\"\n  onFinish={() => console.log('Tour complete')}\n  onDismiss={() => console.log('Tour dismissed')}\n/>",
+      "source": "readme",
+      "compilable": true
+    },
     "7a3a92935f0b863855900ffe5295cb58ad8e6a2f83cdf8ae82ea0a93ff8b829b": {
       "title": "Description And Feedback",
       "code": "<ProForm\n      {...args}\n      initialValues={{ username: '', email: '', bio: '', agree: false }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormText\n        name=\"username\"\n        label=\"Username\"\n        description=\"Only letters, numbers, and underscores. 3-20 characters.\"\n        placeholder=\"Enter username\"\n        feedback=\"This will be your public display name.\"\n        rules={[\n          { required: true, message: 'Username is required' },\n          { min: 3, message: 'At least 3 characters' },\n        ]}\n      />\n      <ProFormText\n        name=\"email\"\n        label=\"Email\"\n        description=\"We'll never share your email with anyone else.\"\n        placeholder=\"Enter email\"\n        rules={[\n          { required: true, message: 'Email is required' },\n          { type: 'email', message: 'Invalid email format' },\n        ]}\n      />\n      <ProFormTextArea\n        name=\"bio\"\n        label=\"Bio\"\n        description=\"Markdown is supported. Max 500 characters.\"\n        placeholder=\"Tell us about yourself\"\n      />\n      <ProFormPassword\n        name=\"password\"\n        label=\"Password\"\n        description=\"Must contain at least 8 characters, one uppercase and one number.\"\n        rules={[{ required: true, message: 'Password is required' }]}\n      />\n      <ProFormCheckbox\n        name=\"agree\"\n        label=\"I accept the terms\"\n        feedback=\"You must agree before submitting.\"\n      />\n    </ProForm>",
@@ -1087,6 +1117,12 @@
       "source": "stories",
       "compilable": true
     },
+    "7d415c46958e4b98092da361ef3a5b5a788b71628f8dfaa3a8ee1021b6871cee": {
+      "title": "Import",
+      "code": "import { Button, Icons } from '@1money/component-ui';\n// or\nimport { Button } from '@1money/component-ui/Button';\nimport { Icons } from '@1money/component-ui/Icons';",
+      "source": "readme",
+      "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  }",
@@ -1105,12 +1141,6 @@
       "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>",
@@ -1135,12 +1165,6 @@
       "source": "stories",
       "compilable": false
     },
-    "8129a087395157c8e93b214d9f280f542658a37d2d8aa6ea5e2561bf7d128925": {
-      "title": "Navigation (sidebar with collapse)",
-      "code": "import { useRef } from 'react';\nimport type { NavigationHandlers } from '@1money/components-ui';\n\nconst ref = useRef<NavigationHandlers>(null);\n\n<Navigation\n  ref={ref}\n  items={[\n    { key: 'home', label: 'Home', icon: 'home', active: true },\n    { key: 'portfolio', label: 'Portfolio', icon: 'portfolio' },\n    {\n      key: 'transactions',\n      label: 'Transactions',\n      icon: 'transactions',\n      children: [\n        { key: 'deposits', label: 'Deposits' },\n        { key: 'withdrawals', label: 'Withdrawals' },\n      ],\n    },\n  ]}\n  collapsible\n  onCollapse={(collapsed) => console.log(collapsed)}\n  selector={<CompanySelector />}\n>\n  {/* rendered at the bottom of the sidebar */}\n  <SettingsLink />\n</Navigation>\n\n// Imperative control\nref.current?.toggle();\nref.current?.collapse(true);",
-      "source": "readme",
-      "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  }",
@@ -1177,39 +1201,51 @@
       "source": "readme",
       "compilable": true
     },
-    "8388c821f8c88d4cf800ec2b679c5ace3c46d929a152100c4d4f4eb52400039d": {
-      "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 imports\nimport type { IconName, SortIconStatus } from '@1money/components-ui';",
+    "83a40b3d42ffa56ab725f6babf7cfa8029b002fa72a6a9debc106e51292cd840": {
+      "title": "Basic Usage",
+      "code": "import { Flex } from '@1money/component-ui';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY } from '@1money/component-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
     },
-    "83a7f14ec7ad74308dcc340c21d3a1bd3bfae1a54793a236229c65619188361f": {
-      "title": "Canonical usage",
-      "code": "import { Input } from '@1money/components-ui';\n// or\nimport { Input } from '@1money/components-ui/Input';",
-      "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
     },
+    "8585bff0f1eb7ff6a28f523eb07a2fe420a92d4ab2b329724362d75b08df00d5": {
+      "title": "Import",
+      "code": "import { Typography } from '@1money/component-ui';\n// or\nimport {\n  Typography,\n  TypographyBody,\n  TypographyDisplay,\n  TypographyHeadline,\n  TypographyLabel,\n  TypographyLink,\n  TypographyTitle,\n} from '@1money/component-ui/Typography';",
+      "source": "readme",
+      "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
     },
+    "85a8f18e9db777e582613af812e91ae876d4cb2d7b0ce8feef546c53672a32e8": {
+      "title": "Canonical usage",
+      "code": "import { Copy } from '@1money/component-ui';\n// or\nimport { Copy } from '@1money/component-ui/Copy';",
+      "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": {
+    "87093dabc20e5f57b2b6778e44b86a15161814292c77dcf8ff8ee67b5416b71b": {
+      "title": "Canonical usage",
+      "code": "import { Dialog } from '@1money/component-ui';\n// or\nimport { Dialog } from '@1money/component-ui/Dialog';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "870e2b31b3b9f07f3c86e4a3d972ce2ac8d52ccfec472c80ef17614db549d99c": {
       "title": "Canonical usage",
-      "code": "import { notification } from '@1money/components-ui';\n// or\nimport notification from '@1money/components-ui/Notification';",
+      "code": "import { Grid, Row, Col } from '@1money/component-ui';\n// or\nimport { Grid, Row, Col } from '@1money/component-ui/Grid';\nimport { GRID_ALIGN, GRID_JUSTIFY } from '@1money/component-ui/Grid';",
       "source": "canonical",
       "compilable": true
     },
@@ -1219,27 +1255,33 @@
       "source": "stories",
       "compilable": false
     },
-    "88a98229b741820a7e0d61f5e3e8e51340ac8d1cc2eb5332be8189a42f43b6ff": {
-      "title": "No Animation",
-      "code": "<Tabs items={DEFAULT_ITEMS} animated={false} />",
-      "source": "stories",
+    "87da44f303a10795fdc48405385400573d6df57d3902450fd80820b207063783": {
+      "title": "Import",
+      "code": "import { Tour } from '@1money/component-ui';\n// or\nimport { Tour } from '@1money/component-ui/Tour';",
+      "source": "readme",
       "compilable": true
     },
-    "88c9a5db9af74e9bf306d1fde453862a643a76dc012d945baefc628eb65abacc": {
+    "881749c8a1a24d971f731a3a711abd8ca83a3db2291db92d41114f4df6b2b380": {
       "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';",
+      "code": "import { Progress } from '@1money/component-ui';\n// or\nimport { Progress } from '@1money/component-ui/Progress';",
       "source": "canonical",
       "compilable": true
     },
+    "88a98229b741820a7e0d61f5e3e8e51340ac8d1cc2eb5332be8189a42f43b6ff": {
+      "title": "No Animation",
+      "code": "<Tabs items={DEFAULT_ITEMS} animated={false} />",
+      "source": "stories",
+      "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';",
+    "8a5806fc588c223301f3b8050939aef03b37dac957c426887998aa3f4423697e": {
+      "title": "Vertical",
+      "code": "<span>\n  Text <Divider type=\"vertical\" /> Text\n</span>",
       "source": "readme",
       "compilable": true
     },
@@ -1249,6 +1291,12 @@
       "source": "stories",
       "compilable": false
     },
+    "8cc002e0e73f335fa1d9b738bc68bc5e35dc521d869efddbfd4aac0399ee81b8": {
+      "title": "Canonical usage",
+      "code": "import { Portal } from '@1money/component-ui';\n// or\nimport { Portal } from '@1money/component-ui/Portal';",
+      "source": "canonical",
+      "compilable": true
+    },
     "8d9b4b816f395924fb061a9384e54b2fc8e97a3bfd441367d6c70ff5397f23ec": {
       "title": "Text With Icon",
       "code": "<Button {...args} variant={BUTTON_VARIANT.text} iconEnd={<Icons name=\"arrowRight\" />}>\n      Learn More\n    </Button>",
@@ -1261,45 +1309,21 @@
       "source": "stories",
       "compilable": true
     },
-    "8eb6ee9780aed6e852f19eb5e510f31bf0e507d50da449a6da3f1fb8f76b33bc": {
+    "8f3224780dc7035f24c1a9a5e7915be84f23695cd953df669bb6e54afce4ff90": {
       "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';",
+      "code": "import { Icons } from '@1money/component-ui';\n\n<Icons name=\"arrowRight\" size={24} />",
       "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
-    },
     "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
     },
-    "93778978611c05850a486471281bd8bb01ceeac22d3d7708ec1c59aaefb0ae95": {
+    "920c6084b0c74e8e6ccd8e98e3afd2477bffb820950ef10b1e933c2597cd446f": {
       "title": "Canonical usage",
-      "code": "import { Alert } from '@1money/components-ui';\n// or\nimport { Alert } from '@1money/components-ui/Alert';",
-      "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';",
+      "code": "import { Icons, IconWrapper, IconHover } from '@1money/component-ui';\n// or\nimport { Icons, IconWrapper, IconHover } from '@1money/component-ui/Icons';\n\n// Type imports\nimport type { IconName, SortIconStatus } from '@1money/component-ui';",
       "source": "canonical",
       "compilable": true
     },
@@ -1309,9 +1333,9 @@
       "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>",
+    "93d92a4c2994ad24677ef5800318b556bdd570a6f6547fe359586b7898bbffa0": {
+      "title": "Import",
+      "code": "import { Navigation, Nav, NavigationStepper } from '@1money/component-ui';\n// or\nimport { Navigation, Nav, NavigationStepper } from '@1money/component-ui/Navigation';",
       "source": "readme",
       "compilable": true
     },
@@ -1327,15 +1351,9 @@
       "source": "stories",
       "compilable": false
     },
-    "95dc922235c54890ef40e287095692b232702132d592073e3c6b66efd6929f50": {
+    "96a4fb49627068cd32df95bce74ab746a2901c627dcd70fa9bf9c9247f21b7a3": {
       "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';",
+      "code": "import { Trigger } from '@1money/component-ui';\n// or\nimport { Trigger } from '@1money/component-ui/Trigger';",
       "source": "canonical",
       "compilable": true
     },
@@ -1345,9 +1363,9 @@
       "source": "stories",
       "compilable": false
     },
-    "97c44f1fee50bdc6a2d6a8cb4b7c56c51a2997d2ea78b3647cce7b0c249f6f8c": {
+    "972760bf5ab84d11fe02c95be34c823bc9ee3d6e0009ebd7bee036df4a721356": {
       "title": "Import",
-      "code": "import { Tooltip } from '@1money/components-ui';\n// or\nimport { Tooltip } from '@1money/components-ui/Tooltip';",
+      "code": "import { Dropdown } from '@1money/component-ui';\n// or\nimport { Dropdown } from '@1money/component-ui/Dropdown';",
       "source": "readme",
       "compilable": true
     },
@@ -1369,6 +1387,12 @@
       "source": "stories",
       "compilable": true
     },
+    "985b12a88fa482e6b7ff9230128c385166aa202ba56916e9d048bcb83046081b": {
+      "title": "Canonical usage",
+      "code": "import { Input } from '@1money/component-ui';\n\n<Input label=\"Amount\" placeholder=\"Value\" />",
+      "source": "canonical",
+      "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>",
@@ -1381,15 +1405,9 @@
       "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
-    },
-    "9a6b2f4b0ce1fdea4c73f1f9ea0d1471dc97d3dd7783c798b6b99ddc7f3bf15c": {
-      "title": "Import",
-      "code": "import { Skeleton } from '@1money/components-ui';\n// or\nimport { Skeleton } from '@1money/components-ui/Skeleton';",
+    "9971f4d638cacc647af1a34ef98beb3f2aaf11c08d3a3f8f21fd0fd5bdef0dde": {
+      "title": "CheckboxGroup Props",
+      "code": "import { Checkbox, CheckboxGroup } from '@1money/component-ui';\n// or\nimport { Checkbox, CheckboxGroup } from '@1money/component-ui/Checkbox';\n\n<CheckboxGroup\n  name=\"fruits\"\n  options={[\n    { label: 'Apple', value: 'apple' },\n    { label: 'Pear', value: 'pear' },\n  ]}\n  value={selectedValues}\n  onChange={setSelectedValues}\n/>\n\n<Checkbox.Group defaultValue={['alpha']}>\n  <Checkbox value=\"alpha\" label=\"Alpha\" />\n  <Checkbox value=\"beta\" label=\"Beta\" />\n</Checkbox.Group>",
       "source": "readme",
       "compilable": true
     },
@@ -1399,22 +1417,10 @@
       "source": "stories",
       "compilable": true
     },
-    "9c99f80f5636ab539416d2c5c60a083a9d43acd5938644b959803204f9470ac1": {
-      "title": "Import",
-      "code": "import { Portal } from '@1money/components-ui';\n// or\nimport { Portal } from '@1money/components-ui/Portal';",
-      "source": "readme",
-      "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
-    },
-    "9d9e13198adcfe9df9f475bcf7d1fcef492fbd98892daaddb28d65ca2e213a74": {
-      "title": "Import",
-      "code": "import { ResizeObserver, useResizeObserver } from '@1money/components-ui';\n// or\nimport { ResizeObserver, useResizeObserver } from '@1money/components-ui/ResizeObserver';",
-      "source": "readme",
+    "9bb4d9b6b7856693e7c803e925d729a969cf39ccee9c6e08327e6e60305ca0f3": {
+      "title": "Canonical usage",
+      "code": "import { Step } from '@1money/component-ui';\n// or\nimport { Step } from '@1money/component-ui/Step';",
+      "source": "canonical",
       "compilable": true
     },
     "9eae41b47da6d3b07d6bfdb98fe407b6be85aa68db3fe695699cf9588b65eda8": {
@@ -1435,18 +1441,24 @@
       "source": "stories",
       "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
     },
+    "a273142732c4077af48c520b0e9fbec1fcae48b0f012545bcb951e9554b1e0ef": {
+      "title": "Canonical usage",
+      "code": "import { Flex } from '@1money/component-ui';\n// or\nimport { Flex } from '@1money/component-ui/Flex';\nimport { FLEX_ALIGN, FLEX_GAP, FLEX_JUSTIFY, FLEX_WRAP } from '@1money/component-ui/Flex';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "a2e7aabc10ff9cc33437fbe0878251394c4112f7a174a23577d895a7249bba3b": {
+      "title": "Canonical usage",
+      "code": "import { Button, Icons } from '@1money/component-ui';\n// or\nimport { Button } from '@1money/component-ui/Button';\nimport { Icons } from '@1money/component-ui/Icons';",
+      "source": "canonical",
+      "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>",
@@ -1459,6 +1471,12 @@
       "source": "readme",
       "compilable": true
     },
+    "a3c2924a769ad563b93cde498367ce69f6fe286064bae9dd22799a8733aebea6": {
+      "title": "Import",
+      "code": "import { Empty } from '@1money/component-ui';\n// or\nimport { Empty } from '@1money/component-ui/Empty';",
+      "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  }",
@@ -1477,21 +1495,39 @@
       "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
+    },
+    "a5e7bfca00eae7d485a875832679ab34d67e3c8ef781d04913386ca1185eb822": {
+      "title": "Basic Usage",
+      "code": "import { Button } from '@1money/component-ui';\n\n<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
+    },
     "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
     },
-    "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>",
+    "a93b112762fa56f6d4b7725a0370a6f2c175f1458d13fc08c07ee10a2ca4ab6c": {
+      "title": "Import",
+      "code": "import { Copy } from '@1money/component-ui';\n// or\nimport { Copy } from '@1money/component-ui/Copy';",
       "source": "readme",
       "compilable": true
     },
-    "aa61ebf1b90fbb562c6110d57bc34506cb6448c179bb745b3c3106a7f6cc9e74": {
-      "title": "Import",
-      "code": "import { Progress } from '@1money/components-ui';\n// or\nimport { Progress } from '@1money/components-ui/Progress';",
+    "a9c090e5b6baf8fbf540fa9467f4b5fa43e6cc9de869c162084bb5262534e1d6": {
+      "title": "Canonical usage",
+      "code": "import { Skeleton } from '@1money/component-ui';\n// or\nimport { Skeleton } from '@1money/component-ui/Skeleton';",
+      "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
     },
@@ -1513,21 +1549,45 @@
       "source": "readme",
       "compilable": true
     },
+    "ad2d08fce81c4f209ec3c8897be49561183e09a4a4a0c1d763fa85e0837255db": {
+      "title": "Import",
+      "code": "import { Carousel } from '@1money/component-ui';\n// or\nimport { Carousel } from '@1money/component-ui/Carousel';",
+      "source": "readme",
+      "compilable": true
+    },
+    "adc02f7e653e00211d2f727e3ef895d626db0f7ff0da6436a51e52ecddefc1ec": {
+      "title": "Canonical usage",
+      "code": "import { VirtualList } from '@1money/component-ui';\n// or\nimport { VirtualList } from '@1money/component-ui/VirtualList';",
+      "source": "canonical",
+      "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
     },
+    "ae246cd51ebca22cef4c68e015452c7db50311c6425bddfe634ace9ce667fe11": {
+      "title": "Import",
+      "code": "import { CoachMark } from '@1money/component-ui';\n// or\nimport { CoachMark } from '@1money/component-ui/CoachMark';",
+      "source": "readme",
+      "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
     },
-    "af64339337cb6c9e4dfce14392faeb67ee7ab5b4fd60c434ee58ce8db56705c2": {
+    "af88d73f705cf2f7bb20f21e3b6bf5469ae3683b129dc3b5e6b59966449452b9": {
+      "title": "Import",
+      "code": "import { Alert } from '@1money/component-ui';\n// or\nimport { Alert } from '@1money/component-ui/Alert';",
+      "source": "readme",
+      "compilable": true
+    },
+    "afe811bb04937c81da684427fdc40982aa6f4b50d676e876710f3e22bc71404a": {
       "title": "Import",
-      "code": "import { Navigation, Nav } from '@1money/components-ui';\n// or\nimport { Navigation, Nav } from '@1money/components-ui/Navigation';",
+      "code": "import { Switch } from '@1money/component-ui';\n// or\nimport { Switch } from '@1money/component-ui/Switch';",
       "source": "readme",
       "compilable": true
     },
@@ -1573,6 +1633,12 @@
       "source": "stories",
       "compilable": false
     },
+    "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>",
@@ -1585,6 +1651,24 @@
       "source": "readme",
       "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
+    },
+    "b618a5ec89d3703e8bf3f9b88fa9987155c51787adb5c7b017064afc3b3fdb0b": {
+      "title": "Canonical usage",
+      "code": "import { Accordion } from '@1money/component-ui';\n// or\nimport { Accordion } from '@1money/component-ui/Accordion';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "b642ec44c242139bb5d0c19cff727d2e2c036e30ec3c4597eebd7e533c3252ed": {
+      "title": "Import",
+      "code": "import { Input } from '@1money/component-ui';\n// or\nimport { Input } from '@1money/component-ui/Input';",
+      "source": "readme",
+      "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  }",
@@ -1597,9 +1681,9 @@
       "source": "stories",
       "compilable": false
     },
-    "b91a32c9ec2ecd84c681d080f87903691347b1bed2ec950e4e4d52c3df72ebd3": {
-      "title": "Import",
-      "code": "import { Copy } from '@1money/components-ui';\n// or\nimport { Copy } from '@1money/components-ui/Copy';",
+    "b89885447fe4270b68a9a64c1a3c6664144939f977fd39aee5bb7e7334679a38": {
+      "title": "Basic Usage",
+      "code": "import { Space } from '@1money/component-ui';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/component-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
     },
@@ -1609,12 +1693,24 @@
       "source": "stories",
       "compilable": false
     },
+    "ba4d7fb2d83dc29cedcc36d923e7baf16aa5872c15a1e5b5a369f188cd1c1bd8": {
+      "title": "Import",
+      "code": "import { Drawer } from '@1money/component-ui';\n// or\nimport { Drawer } from '@1money/component-ui/Drawer';",
+      "source": "readme",
+      "compilable": true
+    },
     "bad68aaa47c4d8c9f976f817b5edbef7ff8573f469f9a1bc5bc53482ff65b38e": {
       "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  closable\n  onClose={() => console.log('closed')}\n/>",
       "source": "readme",
       "compilable": true
     },
+    "badf3cdf64f8d773268d54275bd790f16a3357210a7bd056f4637100b7746845": {
+      "title": "Import",
+      "code": "import { Divider } from '@1money/component-ui';",
+      "source": "readme",
+      "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  }",
@@ -1657,6 +1753,12 @@
       "source": "stories",
       "compilable": true
     },
+    "c2c42c200e9bad53b274260619d36029e7257a5f80b73408ffe619abdf14a9d9": {
+      "title": "Canonical usage",
+      "code": "import { Drawer } from '@1money/component-ui';\n// or\nimport { Drawer } from '@1money/component-ui/Drawer';",
+      "source": "canonical",
+      "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>",
@@ -1675,34 +1777,22 @@
       "source": "stories",
       "compilable": false
     },
-    "c37dda6e47f4681c24203fbf4f154801673c331d4394707e6c12c5b07eb3953b": {
-      "title": "Import",
-      "code": "import { Cell } from '@1money/components-ui';\n// or\nimport { Cell } from '@1money/components-ui/Cell';",
-      "source": "readme",
-      "compilable": true
-    },
     "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
-    },
-    "c53ede8df4b95ea3a84f4272cdde631bf1281322de0a44bfa5d9f4ac16ed9618": {
+    "c44b0833c259afe028af9e6fd0d572e5cdf883c9fe8f8701cc2f2199f6fa82a0": {
       "title": "Canonical usage",
-      "code": "import { Portal } from '@1money/components-ui';\n// or\nimport { Portal } from '@1money/components-ui/Portal';",
+      "code": "import { Checkbox } from '@1money/component-ui';\n// or\nimport { Checkbox } from '@1money/component-ui/Checkbox';",
       "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",
+    "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
     },
     "c6c6006c18fc013fe133931a21d10e19d9263c424b639dbe5b1038884729bb32": {
@@ -1717,12 +1807,6 @@
       "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
-    },
     "c7adce2c978836debb618dc91c44c12df9f50836e6ff9994fe3822dd48caef5a": {
       "title": "Nav (flat / grouped navigation)",
       "code": "<Nav\n  items={[\n    {\n      key: 'group-accounts',\n      label: 'Accounts',\n      icon: 'wallet',\n      children: [\n        { key: 'checking', label: 'Checking', active: true },\n        { key: 'savings', label: 'Savings' },\n      ],\n    },\n    { key: 'settings', label: 'Settings' },\n  ]}\n/>",
@@ -1735,12 +1819,24 @@
       "source": "stories",
       "compilable": false
     },
-    "c87555ab10e8a41bf2ce44d458d0c8d8df9f58151f64bb7a4c1edcec5ae0dbcd": {
+    "c816f5980daf6d897749e81e8bcb52963fb9584ae3d56cc2d6d73194bb1a655a": {
+      "title": "Import",
+      "code": "import { Tag } from '@1money/component-ui';\n// or\nimport { Tag } from '@1money/component-ui/Tag';",
+      "source": "readme",
+      "compilable": true
+    },
+    "c8bb2acc504d9189611763df8eebcb47062fe8c1c4ae3990fe6d9495cac88285": {
       "title": "Canonical usage",
-      "code": "import { Cell } from '@1money/components-ui';\n// or\nimport { Cell } from '@1money/components-ui/Cell';",
+      "code": "import { Table, VirtualTable } from '@1money/component-ui';\n// or\nimport { Table, VirtualTable } from '@1money/component-ui/Table';",
       "source": "canonical",
       "compilable": true
     },
+    "c8d370c232d30e9b0ca6730c9b632d0a84550b0b8fe84019b58ac0de6a712d40": {
+      "title": "Import",
+      "code": "import { Spinner } from '@1money/component-ui';\n// or\nimport { Spinner } from '@1money/component-ui/Spinner';",
+      "source": "readme",
+      "compilable": true
+    },
     "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  }",
@@ -1759,30 +1855,24 @@
       "source": "stories",
       "compilable": true
     },
-    "cb112d23d742e359bb073b630230b53ccd7362c90ce29f033223143742f4687a": {
-      "title": "Canonical usage",
-      "code": "import { Drawer } from '@1money/components-ui';\n// or\nimport { Drawer } from '@1money/components-ui/Drawer';",
-      "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": {
+    "ce159c0e7bfe1dd2cc4a5af7ae9f34a34970888e35d8d9350afa752f3b6ee2b6": {
       "title": "Import",
-      "code": "import { Calendar } from '@1money/components-ui';\n// or\nimport { Calendar } from '@1money/components-ui/Calendar';",
+      "code": "import { Select } from '@1money/component-ui';\n// or\nimport { Select } from '@1money/component-ui/Select';",
       "source": "readme",
       "compilable": true
     },
+    "ce52fe36100d5fa98b9745a1baf1b08d615fed812bf0a8c9022f4e95e68f2f13": {
+      "title": "Canonical usage",
+      "code": "import { Select } from '@1money/component-ui';\n// or\nimport { Select } from '@1money/component-ui/Select';",
+      "source": "canonical",
+      "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>",
@@ -1801,6 +1891,12 @@
       "source": "stories",
       "compilable": false
     },
+    "d073f561eaa33f59872ba1277c04ad853f99cb24d2f6e75ac36d0c33e12a9d40": {
+      "title": "Import",
+      "code": "import { VirtualList } from '@1money/component-ui';\n// or\nimport { VirtualList } from '@1money/component-ui/VirtualList';",
+      "source": "readme",
+      "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\" />",
@@ -1813,54 +1909,24 @@
       "source": "stories",
       "compilable": false
     },
-    "d2d7be30524d06f99a66b1ee9375fa33501fcff7421d697bce934b4c6a79e4c1": {
-      "title": "Canonical usage",
-      "code": "import { Dropdown } from '@1money/components-ui';\n// or\nimport { Dropdown } from '@1money/components-ui/Dropdown';",
-      "source": "canonical",
-      "compilable": true
-    },
-    "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": {
+    "d85ceae6b6d298d1080aa6deb8853caf2818436e1ea75064e79bc43b28cc3223": {
       "title": "Import",
-      "code": "import { Empty } from '@1money/components-ui';\n// or\nimport { Empty } from '@1money/components-ui/Empty';",
+      "code": "import { ResizeObserver, useResizeObserver } from '@1money/component-ui';\n// or\nimport { ResizeObserver, Collection, useResizeObserver } from '@1money/component-ui/ResizeObserver';",
       "source": "readme",
       "compilable": true
     },
-    "d7d5f601f2bc6d68fdd1f9092792a1ead79d09392794c0de5c6a6f08ae2fcd2b": {
-      "title": "Canonical usage",
-      "code": "import { ResizeObserver, useResizeObserver } from '@1money/components-ui';\n// or\nimport { ResizeObserver, useResizeObserver } from '@1money/components-ui/ResizeObserver';",
-      "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
     },
-    "d928a76793b3297d721487249b48aafd40ba72f0698c1706a33e4291c542d9ba": {
-      "title": "Canonical usage",
-      "code": "import { Step } from '@1money/components-ui';\n// or\nimport { Step } from '@1money/components-ui/Step';",
-      "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  }",
@@ -1897,12 +1963,6 @@
       "source": "stories",
       "compilable": true
     },
-    "dba235303ebe08452940ff868113324fc00c1a8ed5461ca69aaf6113382b9f6b": {
-      "title": "Canonical usage",
-      "code": "import { Pagination, usePagination } from '@1money/components-ui';\n// or\nimport { Pagination, usePagination } from '@1money/components-ui/Pagination';",
-      "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>",
@@ -1921,22 +1981,16 @@
       "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
-    },
-    "dd93657d7534b2334888be68dade1a1eb682df7f98475406bbe3c8f36ca64ba0": {
+    "dc46329177b98e36ae4cf9980b57021028eb5648f1e6420be16ea3d209de6d10": {
       "title": "Import",
-      "code": "import { Select } from '@1money/components-ui';\n// or\nimport { Select } from '@1money/components-ui/Select';",
+      "code": "import { Accordion } from '@1money/component-ui';\n// or\nimport { Accordion } from '@1money/component-ui/Accordion';",
       "source": "readme",
       "compilable": true
     },
-    "dda0f285741a298f3e8cd24f768a9faf10789e206854eb6555fc79970dcb9c2d": {
-      "title": "Import",
-      "code": "import { Tabs } from '@1money/components-ui';\n// or\nimport { Tabs } from '@1money/components-ui/Tabs';",
-      "source": "readme",
+    "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
     },
     "ddba2f9ed531e8d41eb802983744dee6f9a543308278efec1b7cbab638caf0e5": {
@@ -1969,6 +2023,12 @@
       "source": "stories",
       "compilable": true
     },
+    "df33210419a98aec37dfae90fbea2a1d1a5b7daf39ed1b4eee00184821d2f944": {
+      "title": "Import",
+      "code": "import { Space } from '@1money/component-ui';\n// or\nimport { Space } from '@1money/component-ui/Space';\nimport { SPACE_ALIGN, SPACE_DIRECTION, SPACE_SIZE } from '@1money/component-ui/Space';",
+      "source": "readme",
+      "compilable": true
+    },
     "df516870a4f3b627969e2e1b0c6fc40fccc4ccb0fb7c04a34e5e169a928de479": {
       "title": "Usage",
       "code": "<Cell iconStart=\"security\" iconEnd=\"arrowRight\" active>\n  Authenticator app\n</Cell>",
@@ -1981,30 +2041,6 @@
       "source": "stories",
       "compilable": false
     },
-    "e12204d81d25fedea606df0af41590ad6f951ad6a9c87fbb04b46d113a83c01c": {
-      "title": "Canonical usage",
-      "code": "import { Dialog } from '@1money/components-ui';\n// or\nimport { Dialog } from '@1money/components-ui/Dialog';",
-      "source": "canonical",
-      "compilable": true
-    },
-    "e1bc6906c5f00092c88e4e750bb2591d4397c214fe2ba32646792273d03f9942": {
-      "title": "Canonical usage",
-      "code": "<IconHover />",
-      "source": "canonical",
-      "compilable": true
-    },
-    "e26c609980f32c5d66ccd1ee1a5d53d3cf09e63f85e94f7adf9acc57bfdc7276": {
-      "title": "Canonical usage",
-      "code": "import { Navigation, Nav } from '@1money/components-ui';\n// or\nimport { Navigation, Nav } from '@1money/components-ui/Navigation';",
-      "source": "canonical",
-      "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
-    },
     "e3b3197749176ad9a73173f5d1928f15b52b030d41a28e61ef40deaabbc9a554": {
       "title": "Usage",
       "code": "<Step\n  items={[\n    { key: 'start', title: 'Start', description: 'Create the request', status: 'completed' },\n    { key: 'review', title: 'Review', tag: { label: 'Pending' } },\n    { key: 'done', title: 'Complete' },\n  ]}\n/>",
@@ -2017,6 +2053,12 @@
       "source": "readme",
       "compilable": true
     },
+    "e4c665e871b8546f38972172c483114d1eef73a4fc2b83e6ad929d359c408796": {
+      "title": "Allow Deselect",
+      "code": "{\n    const [value, setValue] = useState<string | number | undefined>('btc');\n\n    return (\n      <Select\n        {...args}\n        allowDeselect\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
+    },
     "e57037f057f4da5ac90baae9ad1d85153cb48c9cfff34a65cbe2a927bf5cb713": {
       "title": "Usage",
       "code": "<Dialog\n  open={open}\n  title=\"Confirm transfer\"\n  onCancel={() => setOpen(false)}\n  onOk={handleSubmit}\n/>",
@@ -2029,12 +2071,6 @@
       "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>",
@@ -2053,12 +2089,6 @@
       "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
-    },
     "e95a0d0355599d90e5a8f3e2157c5f59f2ee97f9c77cde6b856ca73e439ba89d": {
       "title": "Usage",
       "code": "<ProForm\n  initialValues={{ name: '' }}\n  onFinish={(values) => console.log(values)}\n>\n  <ProForm.Text\n    name=\"name\"\n    label=\"Name\"\n    rules={[{ required: true, message: 'Name is required' }]}\n  />\n  <ProForm.Select\n    name=\"currency\"\n    label=\"Currency\"\n    fieldProps={{ options: [{ label: 'USD', value: 'USD' }] }}\n  />\n</ProForm>",
@@ -2071,12 +2101,24 @@
       "source": "stories",
       "compilable": false
     },
+    "eb3d3bf8608e5ec527f4380b65309d405f31c3dc1995dc7128a95973cdb71495": {
+      "title": "Import",
+      "code": "import { Tabs } from '@1money/component-ui';\n// or\nimport { Tabs } from '@1money/component-ui/Tabs';",
+      "source": "readme",
+      "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
     },
+    "eb82f96d176ca1891ecf083e5f43c42256d422f023133b2171ab354f12705fdd": {
+      "title": "Usage",
+      "code": "import { Button } from '@1money/component-ui';\n\n<Drawer\n  open={open}\n  title=\"Transfer details\"\n  placement=\"right\"\n  onClose={() => setOpen(false)}\n  footer={<Button onClick={() => setOpen(false)}>Done</Button>}\n>\n  Drawer content\n</Drawer>",
+      "source": "readme",
+      "compilable": true
+    },
     "ed5aa33f8e734dad460aa9b2a7c6fc0690efc9cda3b0854c642d59b2bbf55870": {
       "title": "Illustrations",
       "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusChecked' />\")}>\n        <Icons {...args} name='illusChecked' />\n        <span>illusChecked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusEmailError' />\")}>\n        <Icons {...args} name='illusEmailError' />\n        <span>illusEmailError</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusLinkExpired' />\")}>\n        <Icons {...args} name='illusLinkExpired' />\n        <span>illusLinkExpired</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illus2FA' />\")}>\n        <Icons {...args} name='illus2FA' />\n        <span>illus2FA</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusLocked' />\")}>\n        <Icons {...args} name='illusLocked' />\n        <span>illusLocked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusError' />\")}>\n        <Icons {...args} name='illusError' />\n        <span>illusError</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusRegionNotSupported' />\")}>\n        <Icons {...args} name='illusRegionNotSupported' />\n        <span>illusRegionNotSupported</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusID' />\")}>\n        <Icons {...args} name='illusID' />\n        <span>illusID</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusVerification' />\")}>\n        <Icons {...args} name='illusVerification' />\n        <span>illusVerification</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusPending' />\")}>\n        <Icons {...args} name='illusPending' color='#F4C600' />\n        <span>illusPending</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusPasskey' />\")}>\n        <Icons {...args} name='illusPasskey' />\n        <span>illusPasskey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusAddAccount' />\")}>\n        <Icons {...args} name='illusAddAccount' />\n        <span>illusAddAccount</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='illusRewards' />\")}>\n        <Icons {...args} name='illusRewards' />\n        <span>illusRewards</span>\n      </CopyIconBox>\n    </div>;\n  }",
@@ -2095,12 +2137,6 @@
       "source": "stories",
       "compilable": false
     },
-    "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>",
@@ -2161,12 +2197,6 @@
       "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    />",
@@ -2185,21 +2215,33 @@
       "source": "stories",
       "compilable": false
     },
-    "f7c2c0a63e93844f526a49d62cfd4f5ced951213730b19e88cb69c559c39a367": {
-      "title": "Import",
-      "code": "import { Step } from '@1money/components-ui';\n// or\nimport { Step } from '@1money/components-ui/Step';",
-      "source": "readme",
-      "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
     },
-    "faa015d00f4f1ec9d43a4988251943c30d43285aadf14ee9d2c82d7fa4b0024f": {
+    "f846e6658290862cc4216f55f8c33505bd1c923167b1dd68d217b0166bca6aad": {
+      "title": "Canonical usage",
+      "code": "import { Upload, UploadFileBar } from '@1money/component-ui';\n// or\nimport { Upload, UploadFileBar } from '@1money/component-ui/Upload';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "f9a556c6bb441f9b96d63aaf12ad63145cdbe9193c743d5e921ef1ec53fc8224": {
+      "title": "Canonical usage",
+      "code": "import { Segment } from '@1money/component-ui';\n// or\nimport { Segment } from '@1money/component-ui/Segment';",
+      "source": "canonical",
+      "compilable": true
+    },
+    "fae5c24c6bab10e5462b6f5a8c5ca33714a0b121dc2cf3c44ca989ff33b3d36c": {
+      "title": "Import",
+      "code": "import { Pagination, usePagination } from '@1money/component-ui';\n// or\nimport { Pagination, usePagination } from '@1money/component-ui/Pagination';",
+      "source": "readme",
+      "compilable": true
+    },
+    "fbd27b2c45cf77922ee28f98299af2815b390ade86f902db573d0f520dcc2eb6": {
       "title": "Import",
-      "code": "import { Dialog } from '@1money/components-ui';\n// or\nimport { Dialog } from '@1money/components-ui/Dialog';",
+      "code": "import { Skeleton } from '@1money/component-ui';\n// or\nimport { Skeleton } from '@1money/component-ui/Skeleton';",
       "source": "readme",
       "compilable": true
     },
@@ -2209,18 +2251,18 @@
       "source": "stories",
       "compilable": false
     },
-    "fc9a7422a1bd65a99442277ecc3a078de35b6d7347c17ebe9cd83cdf379e54a7": {
-      "title": "Usage",
-      "code": "const steps = [\n  {\n    icon: <Icons name=\"dashboard\" size={24} />,\n    heading: 'Welcome to Dashboard',\n    body: 'Here you can see an overview of your finances.',\n  },\n  {\n    heading: 'Track Your Spending',\n    body: 'Use the charts to monitor transactions by category.',\n  },\n  {\n    heading: \"You're all set!\",\n    body: 'Explore the rest of the app at your own pace.',\n  },\n];\n\n<CoachMark\n  steps={steps}\n  defaultActiveStep={0}\n  placement=\"top\"\n  onFinish={() => console.log('Tour complete')}\n  onDismiss={() => console.log('Tour dismissed')}\n/>",
-      "source": "readme",
-      "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
     },
+    "fca8a95a331c2fbb0cd85959d30ecafff517a78cf35c1389a810dcaa08d6e5e6": {
+      "title": "Usage",
+      "code": "import { Button } from '@1money/component-ui';\n\nfunction MyCustomIcon() {\n  return <span aria-hidden=\"true\">No data</span>;\n}\n\n// 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
+    },
     "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>",
@@ -2233,35 +2275,23 @@
       "source": "stories",
       "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
+    "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
     },
-    "fe70357422313c2126f48b89c098c85159c4543c5ef3739330d48f86d8d0a509": {
+    "ff016409af028ad3a47644d56cb21acf445cb72e1c93de742fd656a520f41c9c": {
       "title": "Canonical usage",
-      "code": "import { Accordion } from '@1money/components-ui';\n// or\nimport { Accordion } from '@1money/components-ui/Accordion';",
+      "code": "import { notification } from '@1money/component-ui';\n// or\nimport notification, {\n  NOTIFICATION_PLACEMENTS,\n  NOTIFICATION_STATUSES,\n} from '@1money/component-ui/Notification';",
       "source": "canonical",
       "compilable": true
     },
-    "fe9b007dfbadb99c5e9b23715cac072ae441727d20418766456554881470ea68": {
+    "ff98ca6743d554b1f351e0d27e1a16a5bb7fb293ec5d30d1fe4f7e8a374f8e3f": {
       "title": "Canonical usage",
-      "code": "import { Calendar } from '@1money/components-ui';\n// or\nimport { Calendar } from '@1money/components-ui/Calendar';",
+      "code": "import { Tour } from '@1money/component-ui';\n// or\nimport { Tour } from '@1money/component-ui/Tour';",
       "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
-    },
-    "ffcdb76bb3216c346fc3ce624448bb8e51a3677f3fd96c8ed18c264f52ed6e31": {
-      "title": "Import",
-      "code": "import { Dropdown } from '@1money/components-ui';\n// or\nimport { Dropdown } from '@1money/components-ui/Dropdown';",
-      "source": "readme",
-      "compilable": true
     }
   }
 }