@kushagradhawan/kookie-ui 0.1.9 → 0.1.10

package/components.css

@@ -2337,8 +2337,8 @@
     letter-spacing: var(--letter-spacing-1);
 }
 .rt-Button:where(.rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
 }
 .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -2356,8 +2356,8 @@
     letter-spacing: var(--letter-spacing-2);
 }
 .rt-Button:where(.rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
 }
 .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -2375,8 +2375,8 @@
     letter-spacing: var(--letter-spacing-3);
 }
 .rt-Button:where(.rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
 }
 .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -2394,8 +2394,8 @@
     letter-spacing: var(--letter-spacing-4);
 }
 .rt-Button:where(.rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
 }
 .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -2414,8 +2414,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2433,8 +2433,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2452,8 +2452,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2471,8 +2471,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2492,8 +2492,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2511,8 +2511,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2530,8 +2530,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2549,8 +2549,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2570,8 +2570,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2589,8 +2589,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.md\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2608,8 +2608,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.md\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2627,8 +2627,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.md\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2648,8 +2648,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2667,8 +2667,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2686,8 +2686,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2705,8 +2705,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2726,8 +2726,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2745,8 +2745,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2764,8 +2764,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2783,8 +2783,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -5794,20 +5794,20 @@
     width: var(--base-button-height);
 }
 .rt-IconButton:where(.rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
 }
 .rt-IconButton:where(.rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
 }
 .rt-IconButton:where(.rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
 }
 .rt-IconButton:where(.rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
 }
 .rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -5823,20 +5823,20 @@
 }
 @media (min-width: 520px) {
     .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5853,20 +5853,20 @@
 }
 @media (min-width: 768px) {
     .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5883,20 +5883,20 @@
 }
 @media (min-width: 1024px) {
     .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5913,20 +5913,20 @@
 }
 @media (min-width: 1280px) {
     .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5943,20 +5943,20 @@
 }
 @media (min-width: 1640px) {
     .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "A modern React component library with beautiful design tokens and flexible theming",
   "keywords": [
     "react",

package/src/components/button.css

@@ -31,8 +31,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -53,8 +53,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -75,8 +75,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -97,8 +97,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
       }
 
       &:where(:not(.rt-variant-ghost)) {

package/src/components/icon-button.css

@@ -16,29 +16,29 @@
     &:where(.rt-r-size-1) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
       }
     }
     &:where(.rt-r-size-2) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
       }
     }
     &:where(.rt-r-size-3) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
       }
     }
     &:where(.rt-r-size-4) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
       }
     }
   }

package/styles.css

@@ -7074,8 +7074,8 @@
   letter-spacing: var(--letter-spacing-1);
 }
 .rt-Button:where(.rt-r-size-1) :where(svg) {
-  width: 13px;
-  height: 13px;
+  width: 16px;
+  height: 16px;
 }
 .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
   padding-left: var(--space-2);
@@ -7093,8 +7093,8 @@
   letter-spacing: var(--letter-spacing-2);
 }
 .rt-Button:where(.rt-r-size-2) :where(svg) {
-  width: 15px;
-  height: 15px;
+  width: 18px;
+  height: 18px;
 }
 .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
   padding-left: var(--space-3);
@@ -7112,8 +7112,8 @@
   letter-spacing: var(--letter-spacing-3);
 }
 .rt-Button:where(.rt-r-size-3) :where(svg) {
-  width: 17px;
-  height: 17px;
+  width: 20px;
+  height: 20px;
 }
 .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
   padding-left: var(--space-4);
@@ -7131,8 +7131,8 @@
   letter-spacing: var(--letter-spacing-4);
 }
 .rt-Button:where(.rt-r-size-4) :where(svg) {
-  width: 19px;
-  height: 19px;
+  width: 22px;
+  height: 22px;
 }
 .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
   padding-left: var(--space-5);
@@ -7151,8 +7151,8 @@
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -7170,8 +7170,8 @@
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -7189,8 +7189,8 @@
     letter-spacing: var(--letter-spacing-3);
   }
   .rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -7208,8 +7208,8 @@
     letter-spacing: var(--letter-spacing-4);
   }
   .rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -7229,8 +7229,8 @@
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -7248,8 +7248,8 @@
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -7267,8 +7267,8 @@
     letter-spacing: var(--letter-spacing-3);
   }
   .rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -7286,8 +7286,8 @@
     letter-spacing: var(--letter-spacing-4);
   }
   .rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -7307,8 +7307,8 @@
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -7326,8 +7326,8 @@
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-Button:where(.md\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -7345,8 +7345,8 @@
     letter-spacing: var(--letter-spacing-3);
   }
   .rt-Button:where(.md\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -7364,8 +7364,8 @@
     letter-spacing: var(--letter-spacing-4);
   }
   .rt-Button:where(.md\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -7385,8 +7385,8 @@
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -7404,8 +7404,8 @@
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -7423,8 +7423,8 @@
     letter-spacing: var(--letter-spacing-3);
   }
   .rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -7442,8 +7442,8 @@
     letter-spacing: var(--letter-spacing-4);
   }
   .rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -7463,8 +7463,8 @@
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -7482,8 +7482,8 @@
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -7501,8 +7501,8 @@
     letter-spacing: var(--letter-spacing-3);
   }
   .rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -7520,8 +7520,8 @@
     letter-spacing: var(--letter-spacing-4);
   }
   .rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -10521,20 +10521,20 @@
   width: var(--base-button-height);
 }
 .rt-IconButton:where(.rt-r-size-1) :where(svg) {
-  width: 13px;
-  height: 13px;
+  width: 16px;
+  height: 16px;
 }
 .rt-IconButton:where(.rt-r-size-2) :where(svg) {
-  width: 15px;
-  height: 15px;
+  width: 18px;
+  height: 18px;
 }
 .rt-IconButton:where(.rt-r-size-3) :where(svg) {
-  width: 17px;
-  height: 17px;
+  width: 20px;
+  height: 20px;
 }
 .rt-IconButton:where(.rt-r-size-4) :where(svg) {
-  width: 19px;
-  height: 19px;
+  width: 22px;
+  height: 22px;
 }
 .rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
   --icon-button-ghost-padding: var(--space-1);
@@ -10550,20 +10550,20 @@
 }
 @media (min-width: 520px) {
   .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -10580,20 +10580,20 @@
 }
 @media (min-width: 768px) {
   .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -10610,20 +10610,20 @@
 }
 @media (min-width: 1024px) {
   .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -10640,20 +10640,20 @@
 }
 @media (min-width: 1280px) {
   .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -10670,20 +10670,20 @@
 }
 @media (min-width: 1640px) {
   .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
   }
   .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
   }
   .rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
   }
   .rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
   }
   .rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);