@1money/component-ui 0.0.44 → 0.0.45

package/package.json

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

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

@@ -397,12 +397,6 @@
       "source": "stories",
       "compilable": true
     },
-    "25c5df1e3c4d654a48016148beb792280ff11859280c9f51c6c226b15ab3becf": {
-      "title": "Primary Icons",
-      "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))' }}>\n      {/* Primary Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='deposit' />\")}>\n        <Icons {...args} name='deposit' />\n        <span>Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdrawal' />\")}>\n        <Icons {...args} name='withdrawal' />\n        <span>Withdrawal</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='conversion' />\")}>\n        <Icons {...args} name='conversion' />\n        <span>Conversion</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mintToken' />\")}>\n        <Icons {...args} name='mintToken' />\n        <span>MintToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='burnToken' />\")}>\n        <Icons {...args} name='burnToken' />\n        <span>BurnToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='accountLocked' />\")}>\n        <Icons {...args} name='accountLocked' />\n        <span>Account Locked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pending' />\")}>\n        <Icons {...args} name='pending' />\n        <span>Pending</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='success' />\")}>\n        <Icons {...args} name='success' />\n        <span>Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fail' />\")}>\n        <Icons {...args} name='fail' />\n        <span>Fail</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='error' />\")}>\n        <Icons {...args} name='error' />\n        <span>Error</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusSuccess' color='#1F580033' />\")}>\n        <Icons {...args} name='statusSuccess' color='#1F580033' />\n        <span>Status Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusFail' color='#AE00001A' />\")}>\n        <Icons {...args} name='statusFail' color='#AE00001A' />\n        <span>Status Fail</span>\n      </CopyIconBox>\n      {/* Menu Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dashboard' />\")}>\n        <Icons {...args} name='dashboard' />\n        <span>Dashboard</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='digitalAsset' />\")}>\n        <Icons {...args} name='digitalAsset' />\n        <span>Digital Asset</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='addressBook' />\")}>\n        <Icons {...args} name='addressBook' />\n        <span>Address Book</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedBankAccounts' />\")}>\n        <Icons {...args} name='linkedBankAccounts' />\n        <span>Linked Bank Accounts</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wire' />\")}>\n        <Icons {...args} name='wire' />\n        <span>Wire</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swift' />\")}>\n        <Icons {...args} name='swift' />\n        <span>Swift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='account' />\")}>\n        <Icons {...args} name='account' />\n        <span>Account</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='profile' />\")}>\n        <Icons {...args} name='profile' />\n        <span>Profile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='security' />\")}>\n        <Icons {...args} name='security' />\n        <span>Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logout' />\")}>\n        <Icons {...args} name='logout' />\n        <span>Logout</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='portfolio' />\")}>\n        <Icons {...args} name='portfolio' />\n        <span>Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='home' />\")}>\n        <Icons {...args} name='home' />\n        <span>Home</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='convert' />\")}>\n        <Icons {...args} name='convert' />\n        <span>Convert</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdraw' />\")}>\n        <Icons {...args} name='withdraw' />\n        <span>Withdraw</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='send' />\")}>\n        <Icons {...args} name='send' />\n        <span>Send</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='menuDeposit' />\")}>\n        <Icons {...args} name='menuDeposit' />\n        <span>Menu Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='company' />\")}>\n        <Icons {...args} name='company' />\n        <span>Company</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='parties' />\")}>\n        <Icons {...args} name='parties' />\n        <span>Parties</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transactions' />\")}>\n        <Icons {...args} name='transactions' />\n        <span>Transactions</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fiat' />\")}>\n        <Icons {...args} name='fiat' />\n        <span>Fiat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='money' />\")}>\n        <Icons {...args} name='money' />\n        <span>Money</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sendCrypto' />\")}>\n        <Icons {...args} name='sendCrypto' />\n        <span>Send Crypto</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='businessAccount' />\")}>\n        <Icons {...args} name='businessAccount' />\n        <span>Business Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='individualAccount' />\")}>\n        <Icons {...args} name='individualAccount' />\n        <span>Identity</span>\n      </CopyIconBox>\n\n      {/* Functional Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowUp' />\")}>\n        <Icons {...args} name='arrowUp' />\n        <span>Arrow Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowDown' />\")}>\n        <Icons {...args} name='arrowDown' />\n        <span>Arrow Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowLeft' />\")}>\n        <Icons {...args} name='arrowLeft' />\n        <span>Arrow Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowRight' />\")}>\n        <Icons {...args} name='arrowRight' />\n        <span>Arrow Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='add' />\")}>\n        <Icons {...args} name='add' />\n        <span>Add</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='minus' />\")}>\n        <Icons {...args} name='minus' />\n        <span>Minus</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cross' />\")}>\n        <Icons {...args} name='cross' />\n        <span>Cross</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='more' />\")}>\n        <Icons {...args} name='more' />\n        <span>More</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronDown' />\")}>\n        <Icons {...args} name='chevronDown' />\n        <span>Chevron Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronUp' />\")}>\n        <Icons {...args} name='chevronUp' />\n        <span>Chevron Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronLeft' />\")}>\n        <Icons {...args} name='chevronLeft' />\n        <span>Chevron Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronRight' />\")}>\n        <Icons {...args} name='chevronRight' />\n        <span>Chevron Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' />\")}>\n        <Icons {...args} name='sort' />\n        <span>Sort Default</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='ascend' />\")}>\n        <Icons {...args} name='sort' status='ascend' />\n        <span>Sort Ascend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='descend' />\")}>\n        <Icons {...args} name='sort' status='descend' />\n        <span>Sort Descend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='collapse' />\")}>\n        <Icons {...args} name='collapse' />\n        <span>Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='extend' />\")}>\n        <Icons {...args} name='extend' />\n        <span>Extend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='spinner' />\")}>\n        <Icons {...args} name='spinner' />\n        <span>Spinner</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='check' />\")}>\n        <Icons {...args} name='check' />\n        <span>Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='remove' />\")}>\n        <Icons {...args} name='remove' />\n        <span>Remove</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pix' />\")}>\n        <Icons {...args} name='pix' />\n        <span>PIX</span>\n      </CopyIconBox>\n      {/* System Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='info' />\")}>\n        <Icons {...args} name='info' />\n        <span>Info</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notifications' />\")}>\n        <Icons {...args} name='notifications' />\n        <span>Notifications</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='favorite' />\")}>\n        <Icons {...args} name='favorite' />\n        <span>Favorite</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transferHistory' />\")}>\n        <Icons {...args} name='transferHistory' />\n        <span>Transfer History</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='support' />\")}>\n        <Icons {...args} name='support' />\n        <span>Support</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='help' />\")}>\n        <Icons {...args} name='help' />\n        <span>Help</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='language' />\")}>\n        <Icons {...args} name='language' />\n        <span>Language</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='share' />\")}>\n        <Icons {...args} name='share' />\n        <span>Share</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='products' />\")}>\n        <Icons {...args} name='products' />\n        <span>Products</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hub' />\")}>\n        <Icons {...args} name='hub' />\n        <span>Hub</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemSecurity' />\")}>\n        <Icons {...args} name='systemSecurity' />\n        <span>System Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fees' />\")}>\n        <Icons {...args} name='fees' />\n        <span>Fees</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='settings' />\")}>\n        <Icons {...args} name='settings' />\n        <span>Settings</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='id' />\")}>\n        <Icons {...args} name='id' />\n        <span>ID</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='viewBalance' />\")}>\n        <Icons {...args} name='viewBalance' />\n        <span>View Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hideBalance' />\")}>\n        <Icons {...args} name='hideBalance' />\n        <span>Hide Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='privacy' />\")}>\n        <Icons {...args} name='privacy' />\n        <span>Privacy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='card' />\")}>\n        <Icons {...args} name='card' />\n        <span>Card</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coin' />\")}>\n        <Icons {...args} name='coin' />\n        <span>Coin</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wallet' />\")}>\n        <Icons {...args} name='wallet' />\n        <span>Wallet</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='email' />\")}>\n        <Icons {...args} name='email' />\n        <span>Email</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='rewards' />\")}>\n        <Icons {...args} name='rewards' />\n        <span>Rewards</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='time' />\")}>\n        <Icons {...args} name='time' />\n        <span>Time</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='location' />\")}>\n        <Icons {...args} name='location' />\n        <span>Location</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='calendar' />\")}>\n        <Icons {...args} name='calendar' />\n        <span>Calendar</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='securityCheck' />\")}>\n        <Icons {...args} name='securityCheck' />\n        <span>Security Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='devices' />\")}>\n        <Icons {...args} name='devices' />\n        <span>Devices</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='images' />\")}>\n        <Icons {...args} name='images' />\n        <span>Images</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='bank' />\")}>\n        <Icons {...args} name='bank' />\n        <span>Bank</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coins' />\")}>\n        <Icons {...args} name='coins' />\n        <span>Coins</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='earn' />\")}>\n        <Icons {...args} name='earn' />\n        <span>Earn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='scan' />\")}>\n        <Icons {...args} name='scan' />\n        <span>Scan</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='search' />\")}>\n        <Icons {...args} name='search' />\n        <span>Search</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='maintenance' />\")}>\n        <Icons {...args} name='maintenance' />\n        <span>Maintenance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='editFile' />\")}>\n        <Icons {...args} name='editFile' />\n        <span>Edit File</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='document' />\")}>\n        <Icons {...args} name='document' />\n        <span>Document</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='upload' />\")}>\n        <Icons {...args} name='upload' />\n        <span>Upload</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gift' />\")}>\n        <Icons {...args} name='gift' />\n        <span>Gift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='filter' />\")}>\n        <Icons {...args} name='filter' />\n        <span>Filter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='expand' />\")}>\n        <Icons {...args} name='expand' />\n        <span>Expand</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemCollapse' />\")}>\n        <Icons {...args} name='systemCollapse' />\n        <span>System Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='refresh' />\")}>\n        <Icons {...args} name='refresh' />\n        <span>Refresh</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transfer' />\")}>\n        <Icons {...args} name='transfer' />\n        <span>Transfer</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='link' />\")}>\n        <Icons {...args} name='link' />\n        <span>Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='save' />\")}>\n        <Icons {...args} name='save' />\n        <span>Save</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='like' />\")}>\n        <Icons {...args} name='like' />\n        <span>Like</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dislike' />\")}>\n        <Icons {...args} name='dislike' />\n        <span>Dislike</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='copy' />\")}>\n        <Icons {...args} name='copy' />\n        <span>Copy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mobile' />\")}>\n        <Icons {...args} name='mobile' />\n        <span>Mobile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chat' />\")}>\n        <Icons {...args} name='chat' />\n        <span>Chat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swap' />\")}>\n        <Icons {...args} name='swap' />\n        <span>Swap</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='clock' />\")}>\n        <Icons {...args} name='clock' />\n        <span>Clock</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='desktop' />\")}>\n        <Icons {...args} name='desktop' />\n        <span>Desktop</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='usd' />\")}>\n        <Icons {...args} name='usd' />\n        <span>USD</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='eur' />\")}>\n        <Icons {...args} name='eur' />\n        <span>EUR</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gbp' />\")}>\n        <Icons {...args} name='gbp' />\n        <span>GBP</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='jpy' />\")}>\n        <Icons {...args} name='jpy' />\n        <span>JPY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cny' />\")}>\n        <Icons {...args} name='cny' />\n        <span>CNY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='google' />\")}>\n        <Icons {...args} name='google' />\n        <span>Google</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apple' />\")}>\n        <Icons {...args} name='apple' />\n        <span>Apple</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='twitter' />\")}>\n        <Icons {...args} name='twitter' />\n        <span>Twitter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedIn' />\")}>\n        <Icons {...args} name='linkedIn' />\n        <span>LinkedIn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='passkey' />\")}>\n        <Icons {...args} name='passkey' />\n        <span>Passkey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='ach' />\")}>\n        <Icons {...args} name='ach' />\n        <span>ACH</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apiKey' />\")}>\n        <Icons {...args} name='apiKey' />\n        <span>APIKey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='brokenLink' />\")}>\n        <Icons {...args} name='brokenLink' />\n        <span>Broken Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pause' />\")}>\n        <Icons {...args} name='pause' />\n        <span>Pause</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='autoConversionRules' />\")}>\n        <Icons {...args} name='autoConversionRules' />\n        <span>Auto Conversion Rules</span>\n      </CopyIconBox>\n    </div>;\n  }",
-      "source": "stories",
-      "compilable": false
-    },
     "25d3c27d4d446cfc5d638fc4025c31ea8026f219ad274ed16cbc32bef414ba5c": {
       "title": "Checked",
       "code": "<Switch {...args} label=\"Label\" defaultChecked />",
@@ -1627,6 +1621,12 @@
       "source": "canonical",
       "compilable": true
     },
+    "b2c3325448f12418ef1b7e0fdabadbd1b6d8eb991cfd3c0b126919566721c209": {
+      "title": "Primary Icons",
+      "code": "{\n    const handleCopy = (el: string) => {\n      copy(el);\n    };\n\n    return <div style={{ display: 'grid', gap: 24, gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))' }}>\n      {/* Primary Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='deposit' />\")}>\n        <Icons {...args} name='deposit' />\n        <span>Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdrawal' />\")}>\n        <Icons {...args} name='withdrawal' />\n        <span>Withdrawal</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='conversion' />\")}>\n        <Icons {...args} name='conversion' />\n        <span>Conversion</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mintToken' />\")}>\n        <Icons {...args} name='mintToken' />\n        <span>MintToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='burnToken' />\")}>\n        <Icons {...args} name='burnToken' />\n        <span>BurnToken</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='accountLocked' />\")}>\n        <Icons {...args} name='accountLocked' />\n        <span>Account Locked</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pending' />\")}>\n        <Icons {...args} name='pending' />\n        <span>Pending</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='success' />\")}>\n        <Icons {...args} name='success' />\n        <span>Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fail' />\")}>\n        <Icons {...args} name='fail' />\n        <span>Fail</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='error' />\")}>\n        <Icons {...args} name='error' />\n        <span>Error</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusSuccess' color='#1F580033' />\")}>\n        <Icons {...args} name='statusSuccess' color='#1F580033' />\n        <span>Status Success</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='statusFail' color='#AE00001A' />\")}>\n        <Icons {...args} name='statusFail' color='#AE00001A' />\n        <span>Status Fail</span>\n      </CopyIconBox>\n      {/* Menu Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dashboard' />\")}>\n        <Icons {...args} name='dashboard' />\n        <span>Dashboard</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='digitalAsset' />\")}>\n        <Icons {...args} name='digitalAsset' />\n        <span>Digital Asset</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='addressBook' />\")}>\n        <Icons {...args} name='addressBook' />\n        <span>Address Book</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedBankAccounts' />\")}>\n        <Icons {...args} name='linkedBankAccounts' />\n        <span>Linked Bank Accounts</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wire' />\")}>\n        <Icons {...args} name='wire' />\n        <span>Wire</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swift' />\")}>\n        <Icons {...args} name='swift' />\n        <span>Swift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='account' />\")}>\n        <Icons {...args} name='account' />\n        <span>Account</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='profile' />\")}>\n        <Icons {...args} name='profile' />\n        <span>Profile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='security' />\")}>\n        <Icons {...args} name='security' />\n        <span>Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='logout' />\")}>\n        <Icons {...args} name='logout' />\n        <span>Logout</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='portfolio' />\")}>\n        <Icons {...args} name='portfolio' />\n        <span>Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='home' />\")}>\n        <Icons {...args} name='home' />\n        <span>Home</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='convert' />\")}>\n        <Icons {...args} name='convert' />\n        <span>Convert</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='withdraw' />\")}>\n        <Icons {...args} name='withdraw' />\n        <span>Withdraw</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='send' />\")}>\n        <Icons {...args} name='send' />\n        <span>Send</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='menuDeposit' />\")}>\n        <Icons {...args} name='menuDeposit' />\n        <span>Menu Deposit</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='company' />\")}>\n        <Icons {...args} name='company' />\n        <span>Company</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='parties' />\")}>\n        <Icons {...args} name='parties' />\n        <span>Parties</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transactions' />\")}>\n        <Icons {...args} name='transactions' />\n        <span>Transactions</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fiat' />\")}>\n        <Icons {...args} name='fiat' />\n        <span>Fiat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='money' />\")}>\n        <Icons {...args} name='money' />\n        <span>Money</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sendCrypto' />\")}>\n        <Icons {...args} name='sendCrypto' />\n        <span>Send Crypto</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='businessAccount' />\")}>\n        <Icons {...args} name='businessAccount' />\n        <span>Business Portfolio</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='individualAccount' />\")}>\n        <Icons {...args} name='individualAccount' />\n        <span>Identity</span>\n      </CopyIconBox>\n\n      {/* Functional Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowUp' />\")}>\n        <Icons {...args} name='arrowUp' />\n        <span>Arrow Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowDown' />\")}>\n        <Icons {...args} name='arrowDown' />\n        <span>Arrow Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowLeft' />\")}>\n        <Icons {...args} name='arrowLeft' />\n        <span>Arrow Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='arrowRight' />\")}>\n        <Icons {...args} name='arrowRight' />\n        <span>Arrow Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='add' />\")}>\n        <Icons {...args} name='add' />\n        <span>Add</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='minus' />\")}>\n        <Icons {...args} name='minus' />\n        <span>Minus</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cross' />\")}>\n        <Icons {...args} name='cross' />\n        <span>Cross</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='more' />\")}>\n        <Icons {...args} name='more' />\n        <span>More</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronDown' />\")}>\n        <Icons {...args} name='chevronDown' />\n        <span>Chevron Down</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronUp' />\")}>\n        <Icons {...args} name='chevronUp' />\n        <span>Chevron Up</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronLeft' />\")}>\n        <Icons {...args} name='chevronLeft' />\n        <span>Chevron Left</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chevronRight' />\")}>\n        <Icons {...args} name='chevronRight' />\n        <span>Chevron Right</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' />\")}>\n        <Icons {...args} name='sort' />\n        <span>Sort Default</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='ascend' />\")}>\n        <Icons {...args} name='sort' status='ascend' />\n        <span>Sort Ascend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='sort' status='descend' />\")}>\n        <Icons {...args} name='sort' status='descend' />\n        <span>Sort Descend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='collapse' />\")}>\n        <Icons {...args} name='collapse' />\n        <span>Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='extend' />\")}>\n        <Icons {...args} name='extend' />\n        <span>Extend</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='spinner' />\")}>\n        <Icons {...args} name='spinner' />\n        <span>Spinner</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='check' />\")}>\n        <Icons {...args} name='check' />\n        <span>Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='remove' />\")}>\n        <Icons {...args} name='remove' />\n        <span>Remove</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pix' />\")}>\n        <Icons {...args} name='pix' />\n        <span>PIX</span>\n      </CopyIconBox>\n      {/* System Icons */}\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='info' />\")}>\n        <Icons {...args} name='info' />\n        <span>Info</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='notifications' />\")}>\n        <Icons {...args} name='notifications' />\n        <span>Notifications</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='favorite' />\")}>\n        <Icons {...args} name='favorite' />\n        <span>Favorite</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transferHistory' />\")}>\n        <Icons {...args} name='transferHistory' />\n        <span>Transfer History</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='support' />\")}>\n        <Icons {...args} name='support' />\n        <span>Support</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='help' />\")}>\n        <Icons {...args} name='help' />\n        <span>Help</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='language' />\")}>\n        <Icons {...args} name='language' />\n        <span>Language</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='share' />\")}>\n        <Icons {...args} name='share' />\n        <span>Share</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='products' />\")}>\n        <Icons {...args} name='products' />\n        <span>Products</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hub' />\")}>\n        <Icons {...args} name='hub' />\n        <span>Hub</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemSecurity' />\")}>\n        <Icons {...args} name='systemSecurity' />\n        <span>System Security</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='fees' />\")}>\n        <Icons {...args} name='fees' />\n        <span>Fees</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='settings' />\")}>\n        <Icons {...args} name='settings' />\n        <span>Settings</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='id' />\")}>\n        <Icons {...args} name='id' />\n        <span>ID</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='viewBalance' />\")}>\n        <Icons {...args} name='viewBalance' />\n        <span>View Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='hideBalance' />\")}>\n        <Icons {...args} name='hideBalance' />\n        <span>Hide Balance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='privacy' />\")}>\n        <Icons {...args} name='privacy' />\n        <span>Privacy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='card' />\")}>\n        <Icons {...args} name='card' />\n        <span>Card</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coin' />\")}>\n        <Icons {...args} name='coin' />\n        <span>Coin</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='wallet' />\")}>\n        <Icons {...args} name='wallet' />\n        <span>Wallet</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='email' />\")}>\n        <Icons {...args} name='email' />\n        <span>Email</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='rewards' />\")}>\n        <Icons {...args} name='rewards' />\n        <span>Rewards</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='time' />\")}>\n        <Icons {...args} name='time' />\n        <span>Time</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='location' />\")}>\n        <Icons {...args} name='location' />\n        <span>Location</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='calendar' />\")}>\n        <Icons {...args} name='calendar' />\n        <span>Calendar</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='securityCheck' />\")}>\n        <Icons {...args} name='securityCheck' />\n        <span>Security Check</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='devices' />\")}>\n        <Icons {...args} name='devices' />\n        <span>Devices</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='images' />\")}>\n        <Icons {...args} name='images' />\n        <span>Images</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='bank' />\")}>\n        <Icons {...args} name='bank' />\n        <span>Bank</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='coins' />\")}>\n        <Icons {...args} name='coins' />\n        <span>Coins</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='earn' />\")}>\n        <Icons {...args} name='earn' />\n        <span>Earn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='scan' />\")}>\n        <Icons {...args} name='scan' />\n        <span>Scan</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='search' />\")}>\n        <Icons {...args} name='search' />\n        <span>Search</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='maintenance' />\")}>\n        <Icons {...args} name='maintenance' />\n        <span>Maintenance</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='editFile' />\")}>\n        <Icons {...args} name='editFile' />\n        <span>Edit File</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='document' />\")}>\n        <Icons {...args} name='document' />\n        <span>Document</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='upload' />\")}>\n        <Icons {...args} name='upload' />\n        <span>Upload</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='downloadReport' />\")}>\n        <Icons {...args} name='downloadReport' />\n        <span>Download Report</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gift' />\")}>\n        <Icons {...args} name='gift' />\n        <span>Gift</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='filter' />\")}>\n        <Icons {...args} name='filter' />\n        <span>Filter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='expand' />\")}>\n        <Icons {...args} name='expand' />\n        <span>Expand</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='systemCollapse' />\")}>\n        <Icons {...args} name='systemCollapse' />\n        <span>System Collapse</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='refresh' />\")}>\n        <Icons {...args} name='refresh' />\n        <span>Refresh</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='transfer' />\")}>\n        <Icons {...args} name='transfer' />\n        <span>Transfer</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='link' />\")}>\n        <Icons {...args} name='link' />\n        <span>Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='save' />\")}>\n        <Icons {...args} name='save' />\n        <span>Save</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='like' />\")}>\n        <Icons {...args} name='like' />\n        <span>Like</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='dislike' />\")}>\n        <Icons {...args} name='dislike' />\n        <span>Dislike</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='copy' />\")}>\n        <Icons {...args} name='copy' />\n        <span>Copy</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='mobile' />\")}>\n        <Icons {...args} name='mobile' />\n        <span>Mobile</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='chat' />\")}>\n        <Icons {...args} name='chat' />\n        <span>Chat</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='swap' />\")}>\n        <Icons {...args} name='swap' />\n        <span>Swap</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='clock' />\")}>\n        <Icons {...args} name='clock' />\n        <span>Clock</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='desktop' />\")}>\n        <Icons {...args} name='desktop' />\n        <span>Desktop</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='usd' />\")}>\n        <Icons {...args} name='usd' />\n        <span>USD</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='eur' />\")}>\n        <Icons {...args} name='eur' />\n        <span>EUR</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='gbp' />\")}>\n        <Icons {...args} name='gbp' />\n        <span>GBP</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='jpy' />\")}>\n        <Icons {...args} name='jpy' />\n        <span>JPY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='cny' />\")}>\n        <Icons {...args} name='cny' />\n        <span>CNY</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='google' />\")}>\n        <Icons {...args} name='google' />\n        <span>Google</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apple' />\")}>\n        <Icons {...args} name='apple' />\n        <span>Apple</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='twitter' />\")}>\n        <Icons {...args} name='twitter' />\n        <span>Twitter</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='linkedIn' />\")}>\n        <Icons {...args} name='linkedIn' />\n        <span>LinkedIn</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='passkey' />\")}>\n        <Icons {...args} name='passkey' />\n        <span>Passkey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='ach' />\")}>\n        <Icons {...args} name='ach' />\n        <span>ACH</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='apiKey' />\")}>\n        <Icons {...args} name='apiKey' />\n        <span>APIKey</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='brokenLink' />\")}>\n        <Icons {...args} name='brokenLink' />\n        <span>Broken Link</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='pause' />\")}>\n        <Icons {...args} name='pause' />\n        <span>Pause</span>\n      </CopyIconBox>\n      <CopyIconBox onClick={() => handleCopy(\"<Icons name='autoConversionRules' />\")}>\n        <Icons {...args} name='autoConversionRules' />\n        <span>Auto Conversion Rules</span>\n      </CopyIconBox>\n    </div>;\n  }",
+      "source": "stories",
+      "compilable": false
+    },
     "b401bcf29ce360237f303ffbc81511ca04225c2399c82206a9313ca93d71ee07": {
       "title": "Full Featured",
       "code": "{\n    const [query, setQuery] = useState('');\n    const [selected, setSelected] = useState<string[]>(['USD', 'USDT', 'SOL']);\n\n    const toggle = (code: string) => {\n      setSelected((prev) =>\n        prev.includes(code) ? prev.filter((v) => v !== code) : [...prev, code],\n      );\n    };\n\n    const filtered = CURRENCIES.filter(\n      (c) =>\n        c.code.toLowerCase().includes(query.toLowerCase()) ||\n        c.name.toLowerCase().includes(query.toLowerCase()),\n    );\n\n    const groups = useMemo(() => {\n      const map = new Map<string, CurrencyItem[]>();\n      filtered.forEach((c) => {\n        const list = map.get(c.group) ?? [];\n        list.push(c);\n        map.set(c.group, list);\n      });\n      return map;\n    }, [filtered]);\n\n    return (\n      <Dropdown\n        {...args}\n        overlayStyle={{ minWidth: 420 }}\n        content={\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>\n            {/* Selected bar */}\n            {selected.length > 0 && (\n              <div style={selectedBarStyle}>\n                <span style={{ fontSize: 14, fontWeight: 500, color: '#131313' }}>\n                  {selected.length} selected\n                </span>\n                <button\n                  type=\"button\"\n                  style={clearAllBtnStyle}\n                  onClick={() => setSelected([])}\n                >\n                  <Icons name=\"cross\" size={16} color=\"#ae0000\" />\n                  Clear all\n                </button>\n              </div>\n            )}\n\n            {/* Search */}\n            <div style={{ padding: '8px 0' }}>\n              <Input.Search\n                size=\"small\"\n                placeholder=\"Search\"\n                value={query}\n                onChange={setQuery}\n                allowClear\n              />\n            </div>\n\n            {/* Grouped items */}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n              {Array.from(groups.entries()).map(([group, items]) => (\n                <div key={group} style={{ display: 'flex', flexDirection: 'column' }}>\n                  <div style={groupHeaderStyle}>{group}</div>\n                  {items.map((item) => (\n                    <DropdownItem\n                      key={item.code}\n                      selected={selected.includes(item.code)}\n                      left={<CurrencyIcon flag={item.flag} />}\n                      title={item.code}\n                      subtitle={item.name}\n                      right={\n                        <p style={itemAmountStyle}>\n                          {item.amount}\n                          {item.amountUsd && (\n                            <>\n                              <br />\n                              {item.amountUsd}\n                            </>\n                          )}\n                        </p>\n                      }\n                      onClick={() => toggle(item.code)}\n                    />\n                  ))}\n                </div>\n              ))}\n              {filtered.length === 0 && (\n                <p style={{ ...itemSubtitleStyle, padding: '8px 12px' }}>\n                  No results found\n                </p>\n              )}\n            </div>\n          </div>\n        }\n      >\n        <Button>\n          {selected.length > 0 ? `${selected.length} currencies selected` : 'Select currencies'}\n        </Button>\n      </Dropdown>\n    );\n  }",

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

@@ -4518,7 +4518,7 @@
           "source": "readme"
         },
         {
-          "hash": "25c5df1e3c4d654a48016148beb792280ff11859280c9f51c6c226b15ab3becf",
+          "hash": "b2c3325448f12418ef1b7e0fdabadbd1b6d8eb991cfd3c0b126919566721c209",
           "source": "stories"
         },
         {
@@ -18588,6 +18588,9 @@
     {
       "name": "document"
     },
+    {
+      "name": "downloadReport"
+    },
     {
       "name": "earn"
     },