@1money/component-ui 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1money/component-ui",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "React Components based on primereact for 1money front-end projects",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -1435,6 +1435,12 @@
1435
1435
  "source": "readme",
1436
1436
  "compilable": true
1437
1437
  },
1438
+ "76923a936a2bcffe92d0795aff7eb2511a341c53ce299eabe13d9a10baf5261c": {
1439
+ "title": "Primary Icons",
1440
+ "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='sepa' />\")}>\n <Icons {...args} name='sepa' />\n <span>SEPA</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 }",
1441
+ "source": "stories",
1442
+ "compilable": false
1443
+ },
1438
1444
  "778ff251f59b7f82e0eb19aad6b18543b96bed2de7792e4ea1f8f899b4c570ac": {
1439
1445
  "title": "Import",
1440
1446
  "code": "import { ActionBar } from '@1money/component-ui';",
@@ -2227,12 +2233,6 @@
2227
2233
  "source": "stories",
2228
2234
  "compilable": true
2229
2235
  },
2230
- "b2c3325448f12418ef1b7e0fdabadbd1b6d8eb991cfd3c0b126919566721c209": {
2231
- "title": "Primary Icons",
2232
- "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 }",
2233
- "source": "stories",
2234
- "compilable": false
2235
- },
2236
2236
  "b401bcf29ce360237f303ffbc81511ca04225c2399c82206a9313ca93d71ee07": {
2237
2237
  "title": "Full Featured",
2238
2238
  "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 }",
@@ -5621,7 +5621,7 @@
5621
5621
  "source": "readme"
5622
5622
  },
5623
5623
  {
5624
- "hash": "b2c3325448f12418ef1b7e0fdabadbd1b6d8eb991cfd3c0b126919566721c209",
5624
+ "hash": "76923a936a2bcffe92d0795aff7eb2511a341c53ce299eabe13d9a10baf5261c",
5625
5625
  "source": "stories"
5626
5626
  },
5627
5627
  {
@@ -24682,6 +24682,9 @@
24682
24682
  {
24683
24683
  "name": "sendCrypto"
24684
24684
  },
24685
+ {
24686
+ "name": "sepa"
24687
+ },
24685
24688
  {
24686
24689
  "name": "settings"
24687
24690
  },