aural-ui 2.1.20 → 2.1.22

package/dist/icons/{coin-icon-toons/CoinIconToons.stories.tsx → coin-toons-icon/CoinToonsIcon.stories.tsx}

@@ -1,11 +1,11 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
-import { CoinIconToons } from "."
+import { CoinToonsIcon } from "."
 
-const meta: Meta<typeof CoinIconToons> = {
-  title: "Icons/CoinIconToons",
-  component: CoinIconToons,
+const meta: Meta<typeof CoinToonsIcon> = {
+  title: "Icons/CoinToonsIcon",
+  component: CoinToonsIcon,
   parameters: {
     layout: "fullscreen",
     backgrounds: {
@@ -87,10 +87,10 @@ const meta: Meta<typeof CoinIconToons> = {
               <div className="relative !mx-auto max-w-7xl px-6 py-16">
                 <div className="!space-y-6 text-center">
                   <div className="!mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-yellow-500/30 bg-gradient-to-br from-yellow-500/20 to-amber-500/20">
-                    <CoinIconToons className="h-12 w-12" />
+                    <CoinToonsIcon className="h-12 w-12" />
                   </div>
                   <h1 className="text-5xl font-bold !text-white">
-                    CoinIcon Toons
+                    Coin Toons Icon
                   </h1>
                   <p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white/70">
                     A golden coin icon with authentic metallic shine and
@@ -147,12 +147,12 @@ const meta: Meta<typeof CoinIconToons> = {
                     </h3>
                     <div className="rounded-lg bg-black/40 p-4">
                       <pre className="overflow-x-auto text-sm !text-green-300">
-                        {`import { CoinIconToons } from "@icons/coin-icon"
+                        {`import { CoinToonsIcon } from "@icons/coin-icon"
 
 function WalletBalance() {
   return (
     <div className="flex items-center gap-2">
-      <CoinIconToons className="h-5 w-5" />
+      <CoinToonsIcon className="h-5 w-5" />
       <span className="text-yellow-400">{balance} coins</span>
     </div>
   )
@@ -167,7 +167,7 @@ function WalletBalance() {
                     </h3>
                     <div className="flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
                       <div className="flex items-center gap-3 rounded-lg border border-yellow-500/20 bg-yellow-500/10 px-4 py-2">
-                        <CoinIconToons className="h-5 w-5" />
+                        <CoinToonsIcon className="h-5 w-5" />
                         <span className="font-medium text-yellow-300">
                           1,247 coins
                         </span>
@@ -283,9 +283,9 @@ function WalletBalance() {
 
                 <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
                   <div className="flex items-center gap-2 text-sm text-yellow-200">
-                    <CoinIconToons className="h-4 w-4" />
+                    <CoinToonsIcon className="h-4 w-4" />
                     <span>
-                      <strong>Note:</strong> CoinIconToons uses predefined fill
+                      <strong>Note:</strong> CoinToonsIcon uses predefined fill
                       colors for authentic golden appearance. Avoid overriding
                       fill colors to maintain visual consistency.
                     </span>
@@ -307,27 +307,27 @@ function WalletBalance() {
                         </h3>
                         <div className="flex items-end gap-6 rounded-lg bg-black/20 p-6">
                           <div className="text-center">
-                            <CoinIconToons className="!mx-auto mb-2 h-3 w-3" />
+                            <CoinToonsIcon className="!mx-auto mb-2 h-3 w-3" />
                             <span className="text-xs text-white/60">12px</span>
                           </div>
                           <div className="text-center">
-                            <CoinIconToons className="!mx-auto mb-2 h-4 w-4" />
+                            <CoinToonsIcon className="!mx-auto mb-2 h-4 w-4" />
                             <span className="text-xs text-white/60">16px</span>
                           </div>
                           <div className="text-center">
-                            <CoinIconToons className="!mx-auto mb-2 h-5 w-5" />
+                            <CoinToonsIcon className="!mx-auto mb-2 h-5 w-5" />
                             <span className="text-xs text-white/60">20px</span>
                           </div>
                           <div className="text-center">
-                            <CoinIconToons className="!mx-auto mb-2 h-6 w-6" />
+                            <CoinToonsIcon className="!mx-auto mb-2 h-6 w-6" />
                             <span className="text-xs text-white/60">24px</span>
                           </div>
                           <div className="text-center">
-                            <CoinIconToons className="!mx-auto mb-2 h-8 w-8" />
+                            <CoinToonsIcon className="!mx-auto mb-2 h-8 w-8" />
                             <span className="text-xs text-white/60">32px</span>
                           </div>
                           <div className="text-center">
-                            <CoinIconToons className="!mx-auto mb-2 h-12 w-12" />
+                            <CoinToonsIcon className="!mx-auto mb-2 h-12 w-12" />
                             <span className="text-xs text-white/60">48px</span>
                           </div>
                         </div>
@@ -340,16 +340,16 @@ function WalletBalance() {
                         <div className="rounded-lg bg-black/40 p-4">
                           <pre className="overflow-x-auto text-sm !text-cyan-300">
                             {`// Small (16px) - inline currency
-<CoinIconToons className="h-4 w-4" />
+<CoinToonsIcon className="h-4 w-4" />
 
 // Medium (24px) - standard interface
-<CoinIconToons className="h-6 w-6" />
+<CoinToonsIcon className="h-6 w-6" />
 
 // Large (32px) - prominent displays
-<CoinIconToons className="h-8 w-8" />
+<CoinToonsIcon className="h-8 w-8" />
 
 // Custom size
-<CoinIconToons width={40} height={40} />`}
+<CoinToonsIcon width={40} height={40} />`}
                           </pre>
                         </div>
                       </div>
@@ -371,7 +371,7 @@ function WalletBalance() {
                     <div className="!space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
                       <div className="flex items-center gap-4">
                         <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-black/30">
-                          <CoinIconToons className="h-8 w-8" />
+                          <CoinToonsIcon className="h-8 w-8" />
                         </div>
                         <div>
                           <div className="text-sm font-medium text-white">
@@ -384,7 +384,7 @@ function WalletBalance() {
                       </div>
                       <div className="flex items-center gap-4">
                         <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-white/5">
-                          <CoinIconToons className="h-8 w-8" />
+                          <CoinToonsIcon className="h-8 w-8" />
                         </div>
                         <div>
                           <div className="text-sm font-medium text-white">
@@ -397,7 +397,7 @@ function WalletBalance() {
                       </div>
                       <div className="flex items-center gap-4">
                         <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-yellow-500/10">
-                          <CoinIconToons className="h-8 w-8" />
+                          <CoinToonsIcon className="h-8 w-8" />
                         </div>
                         <div>
                           <div className="text-sm font-medium text-white">
@@ -418,11 +418,11 @@ function WalletBalance() {
                     <div className="rounded-lg bg-black/40 p-4">
                       <pre className="overflow-x-auto text-sm !text-green-300">
                         {`// Recommended usage
-<CoinIconToons className="h-5 w-5" />
+<CoinToonsIcon className="h-5 w-5" />
 
 // With balance display
 <div className="flex items-center gap-2">
-  <CoinIconToons className="h-4 w-4" />
+  <CoinToonsIcon className="h-4 w-4" />
   <span className="text-yellow-400">1,247</span>
 </div>
 
@@ -431,16 +431,16 @@ function WalletBalance() {
   className="flex items-center gap-2 p-2 rounded-lg
              hover:bg-yellow-500/10 transition-colors"
 >
-  <CoinIconToons className="h-5 w-5" />
+  <CoinToonsIcon className="h-5 w-5" />
   <span>Earn Coins</span>
 </button>
 
 // Avoid overriding colors
 // ❌ Don't do this:
-<CoinIconToons style={{ fill: 'red' }} />
+<CoinToonsIcon style={{ fill: 'red' }} />
 
 // ✅ Use as designed:
-<CoinIconToons className="h-6 w-6" />`}
+<CoinToonsIcon className="h-6 w-6" />`}
                       </pre>
                     </div>
                   </div>
@@ -473,7 +473,7 @@ function WalletBalance() {
                                 </p>
                               </div>
                               <div className="flex items-center gap-2">
-                                <CoinIconToons className="h-6 w-6" />
+                                <CoinToonsIcon className="h-6 w-6" />
                                 <span className="text-xl font-bold text-yellow-300">
                                   2,847
                                 </span>
@@ -498,7 +498,7 @@ function WalletBalance() {
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-green-400">
                                   +50
                                 </span>
@@ -521,7 +521,7 @@ function WalletBalance() {
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-blue-400">
                                   +125
                                 </span>
@@ -544,7 +544,7 @@ function WalletBalance() {
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-red-400">
                                   -75
                                 </span>
@@ -562,7 +562,7 @@ function WalletBalance() {
     <p>Digital currency balance</p>
   </div>
   <div className="balance-display">
-    <CoinIconToons className="h-6 w-6" />
+    <CoinToonsIcon className="h-6 w-6" />
     <span className="balance">{balance}</span>
   </div>
 </div>
@@ -572,7 +572,7 @@ function WalletBalance() {
       <TransactionIcon type={transaction.type} />
       <TransactionDetails transaction={transaction} />
       <div className="coin-amount">
-        <CoinIconToons className="h-4 w-4" />
+        <CoinToonsIcon className="h-4 w-4" />
         <span className={transaction.type === 'earned' ? 'text-green' : 'text-red'}>
           {transaction.type === 'earned' ? '+' : '-'}{transaction.amount}
         </span>
@@ -599,7 +599,7 @@ function WalletBalance() {
                                 Item Shop
                               </h4>
                               <div className="flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/20 px-3 py-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-yellow-300">
                                   2,847
                                 </span>
@@ -616,7 +616,7 @@ function WalletBalance() {
                               </div>
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-1">
-                                  <CoinIconToons className="h-3 w-3" />
+                                  <CoinToonsIcon className="h-3 w-3" />
                                   <span className="text-xs text-yellow-400">
                                     500
                                   </span>
@@ -635,7 +635,7 @@ function WalletBalance() {
                               </div>
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-1">
-                                  <CoinIconToons className="h-3 w-3" />
+                                  <CoinToonsIcon className="h-3 w-3" />
                                   <span className="text-xs text-yellow-400">
                                     350
                                   </span>
@@ -654,7 +654,7 @@ function WalletBalance() {
                               </div>
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-1">
-                                  <CoinIconToons className="h-3 w-3" />
+                                  <CoinToonsIcon className="h-3 w-3" />
                                   <span className="text-xs text-yellow-400">
                                     25
                                   </span>
@@ -673,7 +673,7 @@ function WalletBalance() {
                               </div>
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-1">
-                                  <CoinIconToons className="h-3 w-3" />
+                                  <CoinToonsIcon className="h-3 w-3" />
                                   <span className="text-xs text-yellow-400">
                                     1,200
                                   </span>
@@ -692,7 +692,7 @@ function WalletBalance() {
 <div className="store-header">
   <h3>Item Shop</h3>
   <div className="player-balance">
-    <CoinIconToons className="h-4 w-4" />
+    <CoinToonsIcon className="h-4 w-4" />
     <span>{playerCoins}</span>
   </div>
 </div>
@@ -703,7 +703,7 @@ function WalletBalance() {
       <div className="item-name">{item.name}</div>
       <div className="item-footer">
         <div className="item-price">
-          <CoinIconToons className="h-3 w-3" />
+          <CoinToonsIcon className="h-3 w-3" />
           <span>{item.price}</span>
         </div>
         <button 
@@ -756,7 +756,7 @@ function WalletBalance() {
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-green-400">
                                   +10
                                 </span>
@@ -779,7 +779,7 @@ function WalletBalance() {
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-yellow-400">
                                   25
                                 </span>
@@ -802,7 +802,7 @@ function WalletBalance() {
                                 </div>
                               </div>
                               <div className="flex items-center gap-1">
-                                <CoinIconToons className="h-4 w-4" />
+                                <CoinToonsIcon className="h-4 w-4" />
                                 <span className="font-medium text-yellow-400">
                                   100
                                 </span>
@@ -837,7 +837,7 @@ function WalletBalance() {
           </div>
         </div>
         <div className="challenge-reward">
-          <CoinIconToons className="h-4 w-4" />
+          <CoinToonsIcon className="h-4 w-4" />
           <span className="reward-amount">{challenge.reward}</span>
         </div>
       </div>
@@ -872,7 +872,7 @@ function WalletBalance() {
                                   Basic
                                 </div>
                                 <div className="mb-2 flex items-center justify-center gap-1">
-                                  <CoinIconToons className="h-4 w-4" />
+                                  <CoinToonsIcon className="h-4 w-4" />
                                   <span className="font-medium text-yellow-400">
                                     Free
                                   </span>
@@ -887,7 +887,7 @@ function WalletBalance() {
                                   Pro
                                 </div>
                                 <div className="mb-2 flex items-center justify-center gap-1">
-                                  <CoinIconToons className="h-4 w-4" />
+                                  <CoinToonsIcon className="h-4 w-4" />
                                   <span className="font-medium text-yellow-400">
                                     299/mo
                                   </span>
@@ -902,7 +902,7 @@ function WalletBalance() {
                                   Enterprise
                                 </div>
                                 <div className="mb-2 flex items-center justify-center gap-1">
-                                  <CoinIconToons className="h-4 w-4" />
+                                  <CoinToonsIcon className="h-4 w-4" />
                                   <span className="font-medium text-yellow-400">
                                     999/mo
                                   </span>
@@ -937,7 +937,7 @@ function WalletBalance() {
       >
         <div className="plan-name">{plan.name}</div>
         <div className="plan-price">
-          <CoinIconToons className="h-4 w-4" />
+          <CoinToonsIcon className="h-4 w-4" />
           <span className="price-amount">
             {plan.price === 0 ? 'Free' : plan.price + '/mo'}
           </span>
@@ -1026,7 +1026,7 @@ function WalletBalance() {
                       <pre className="overflow-x-auto text-sm !text-cyan-300">
                         {`// Wallet balance display
 <div className="balance-display">
-  <CoinIconToons 
+  <CoinToonsIcon 
     className="h-5 w-5" 
     aria-hidden="true" 
   />
@@ -1045,7 +1045,7 @@ function WalletBalance() {
   onClick={handlePurchase}
   disabled={balance < price}
 >
-  <CoinIconToons className="h-4 w-4" />
+  <CoinToonsIcon className="h-4 w-4" />
   <span>{price}</span>
 </button>
 <div id="coin-balance" className="sr-only">
@@ -1058,7 +1058,7 @@ function WalletBalance() {
   aria-live="polite"
   className="reward-notification"
 >
-  <CoinIconToons className="h-4 w-4" />
+  <CoinToonsIcon className="h-4 w-4" />
   <span>You earned {rewardAmount} coins!</span>
 </div>
 
@@ -1071,7 +1071,7 @@ function WalletBalance() {
       className="item-price"
       aria-label={"Price: " + item.price + " coins"}
     >
-      <CoinIconToons className="h-3 w-3" />
+      <CoinToonsIcon className="h-3 w-3" />
       <span>{item.price}</span>
     </div>
   </div>
@@ -1080,14 +1080,14 @@ function WalletBalance() {
                     </div>
                     <div className="!space-y-4">
                       <p className="text-sm !text-white/70">
-                        When using CoinIconToons for financial displays, always
+                        When using CoinToonsIcon for financial displays, always
                         provide clear context about the currency value and
                         ensure users understand the monetary implications of
                         their actions.
                       </p>
                       <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
                         <div className="flex items-center gap-2 text-sm text-yellow-200">
-                          <CoinIconToons className="h-4 w-4" />
+                          <CoinToonsIcon className="h-4 w-4" />
                           <span>
                             Always announce balance changes and transaction
                             results to screen readers
@@ -1160,7 +1160,7 @@ function WalletBalance() {
               <div className="!mx-auto max-w-7xl px-6 py-8">
                 <div className="!space-y-4 text-center">
                   <p className="!text-white/60">
-                    CoinIconToons is part of the Aural UI icon library, built
+                    CoinToonsIcon is part of the Aural UI icon library, built
                     with accessibility and financial interface best practices in
                     mind.
                   </p>
@@ -1199,7 +1199,7 @@ function WalletBalance() {
 }
 
 export default meta
-type Story = StoryObj<typeof CoinIconToons>
+type Story = StoryObj<typeof CoinToonsIcon>
 
 // Story parameters for consistent dark theme
 const storyParameters = {
@@ -1219,7 +1219,7 @@ export const Default: Story = {
   parameters: storyParameters,
   render: (args) => (
     <div className="flex h-32 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
-      <CoinIconToons {...args} />
+      <CoinToonsIcon {...args} />
     </div>
   ),
 }
@@ -1230,34 +1230,34 @@ export const SizeVariations: Story = {
     docs: {
       description: {
         story:
-          "CoinIconToons in different sizes, from small inline currency displays to large wallet interfaces.",
+          "CoinToonsIcon in different sizes, from small inline currency displays to large wallet interfaces.",
       },
     },
   },
   render: () => (
     <div className="flex h-64 min-h-dvh items-center justify-center gap-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8">
       <div className="text-center">
-        <CoinIconToons className="!mx-auto mb-2 h-3 w-3" />
+        <CoinToonsIcon className="!mx-auto mb-2 h-3 w-3" />
         <span className="text-xs text-white/60">12px</span>
       </div>
       <div className="text-center">
-        <CoinIconToons className="!mx-auto mb-2 h-4 w-4" />
+        <CoinToonsIcon className="!mx-auto mb-2 h-4 w-4" />
         <span className="text-xs text-white/60">16px</span>
       </div>
       <div className="text-center">
-        <CoinIconToons className="!mx-auto mb-2 h-5 w-5" />
+        <CoinToonsIcon className="!mx-auto mb-2 h-5 w-5" />
         <span className="text-xs text-white/60">20px</span>
       </div>
       <div className="text-center">
-        <CoinIconToons className="!mx-auto mb-2 h-6 w-6" />
+        <CoinToonsIcon className="!mx-auto mb-2 h-6 w-6" />
         <span className="text-xs text-white/60">24px</span>
       </div>
       <div className="text-center">
-        <CoinIconToons className="!mx-auto mb-2 h-8 w-8" />
+        <CoinToonsIcon className="!mx-auto mb-2 h-8 w-8" />
         <span className="text-xs text-white/60">32px</span>
       </div>
       <div className="text-center">
-        <CoinIconToons className="!mx-auto mb-2 h-12 w-12" />
+        <CoinToonsIcon className="!mx-auto mb-2 h-12 w-12" />
         <span className="text-xs text-white/60">48px</span>
       </div>
     </div>
@@ -1270,7 +1270,7 @@ export const ContextualUsage: Story = {
     docs: {
       description: {
         story:
-          "CoinIconToons in different contextual applications showing its built-in golden design.",
+          "CoinToonsIcon in different contextual applications showing its built-in golden design.",
       },
     },
   },
@@ -1278,21 +1278,21 @@ export const ContextualUsage: Story = {
     <div className="grid min-h-dvh grid-cols-1 items-center justify-center gap-6 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:grid-cols-3">
       <div className="text-center">
         <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-yellow-500/30 bg-yellow-500/20">
-          <CoinIconToons className="h-8 w-8" />
+          <CoinToonsIcon className="h-8 w-8" />
         </div>
         <div className="text-sm font-medium text-white">Wallet Balance</div>
         <div className="text-xs text-yellow-400">Currency display</div>
       </div>
       <div className="text-center">
         <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-amber-500/30 bg-amber-500/20">
-          <CoinIconToons className="h-8 w-8" />
+          <CoinToonsIcon className="h-8 w-8" />
         </div>
         <div className="text-sm font-medium text-white">Store Pricing</div>
         <div className="text-xs text-amber-400">E-commerce value</div>
       </div>
       <div className="text-center">
         <div className="!mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-lg border border-orange-500/30 bg-orange-500/20">
-          <CoinIconToons className="h-8 w-8" />
+          <CoinToonsIcon className="h-8 w-8" />
         </div>
         <div className="text-sm font-medium text-white">Game Rewards</div>
         <div className="text-xs text-orange-400">Achievement system</div>
@@ -1307,7 +1307,7 @@ export const UsageExamples: Story = {
     docs: {
       description: {
         story:
-          "Real-world usage examples showing CoinIconToons in different financial and gaming contexts.",
+          "Real-world usage examples showing CoinToonsIcon in different financial and gaming contexts.",
       },
     },
   },
@@ -1322,7 +1322,7 @@ export const UsageExamples: Story = {
           <div className="flex items-center justify-between rounded border border-yellow-500/30 bg-gradient-to-r from-yellow-500/20 to-amber-500/20 p-3">
             <span className="font-medium text-white">Current Balance</span>
             <div className="flex items-center gap-2">
-              <CoinIconToons className="h-5 w-5" />
+              <CoinToonsIcon className="h-5 w-5" />
               <span className="text-lg font-bold text-yellow-300">2,847</span>
             </div>
           </div>
@@ -1345,7 +1345,7 @@ export const UsageExamples: Story = {
             </div>
             <div className="flex items-center gap-2">
               <div className="flex items-center gap-1">
-                <CoinIconToons className="h-4 w-4" />
+                <CoinToonsIcon className="h-4 w-4" />
                 <span className="font-medium text-yellow-400">500</span>
               </div>
               <button className="rounded border border-yellow-500/30 bg-yellow-500/20 px-3 py-1 text-sm text-yellow-300 transition-colors hover:bg-yellow-500/30">
@@ -1365,7 +1365,7 @@ export const Playground: Story = {
     docs: {
       description: {
         story:
-          "Interactive playground to experiment with different CoinIconToons configurations.",
+          "Interactive playground to experiment with different CoinToonsIcon configurations.",
       },
     },
   },
@@ -1377,7 +1377,7 @@ export const Playground: Story = {
   render: (args) => (
     <div className="flex h-64 min-h-dvh items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800">
       <div className="rounded-lg border border-white/10 bg-white/5 p-8">
-        <CoinIconToons {...args} />
+        <CoinToonsIcon {...args} />
       </div>
     </div>
   ),

package/dist/icons/{coin-icon-toons → coin-toons-icon}/index.tsx

@@ -1,17 +1,19 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const CoinIconToons = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Coin icon toons">
+export interface CoinToonsIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+export const CoinToonsIcon = (props: CoinToonsIconProps) => {
+  const { withAccessibility, ...svgProps } = props
+  const svg = (
     <svg
       width="16"
       height="16"
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <g clipPath="url(#clip0_4049_2590)">
         <circle cx="8.00321" cy="8.0037" r="8.0037" fill="#FFB340" />
@@ -140,5 +142,11 @@ export const CoinIconToons = (
         </clipPath>
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Coin Toons icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/coin-toons-icon/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}

package/dist/icons/index.ts

@@ -20,12 +20,13 @@ export * from "./chevron-double-left-icon"
 export * from "./chevron-double-right-icon"
 export * from "./chevron-down-icon"
 export * from "./chevron-left-icon"
+export * from "./circular-play-icon"
 export * from "./chevron-right-icon"
 export * from "./chevron-up-icon"
 export * from "./circle-tick-icon"
 export * from "./column-wide-add-icon"
 export * from "./coin-icon"
-export * from "./coin-icon-toons"
+export * from "./coin-toons-icon"
 export * from "./command-icon"
 export * from "./copy-icon"
 export * from "./cross-circle-icon"
@@ -79,6 +80,7 @@ export * from "./pencil-icon"
 export * from "./plus-icon"
 export * from "./pocket-studio-icon"
 export * from "./phone-icon"
+export * from "./scroll-down-icon"
 export * from "./search-icon"
 export * from "./setting-icon"
 export * from "./share-icon"