@kushagradhawan/kookie-ui 0.1.8 → 0.1.10

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);
@@ -10702,7 +10702,66 @@
   display: block;
   object-fit: var(--object-fit);
   box-shadow: var(--box-shadow);
-  border-radius: max(var(--radius-3), var(--radius-full));
+  border-radius: max(var(--radius-4), var(--radius-full));
+  transition: var(--transition-button);
+}
+.rt-Image:where(:any-link, button, label) {
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .rt-Image:where(:any-link, button, label):where(:hover) {
+    transform: scale(1.02);
+    box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
+  }
+}
+.rt-Image:where(:any-link, button, label):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.rt-Image:where(:any-link, button, label):where(:active) {
+  transform: scale(0.98);
+}
+.rt-variant-blur {
+  position: relative;
+  display: inline-block;
+  --blur-filter: blur(16px) saturate(1.5);
+  --blur-opacity: 0.5;
+  --blur-offset-y: 8px;
+  --blur-offset-x: 0;
+}
+.rt-variant-blur:where(:any-link, button, label) {
+  cursor: pointer;
+  transition: var(--transition-button);
+}
+@media (hover: hover) {
+  .rt-variant-blur:where(:any-link, button, label):where(:hover) {
+    transform: scale(1.02);
+  }
+}
+.rt-variant-blur:where(:any-link, button, label):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.rt-variant-blur:where(:any-link, button, label):where(:active) {
+  transform: scale(0.98);
+}
+.rt-variant-blur:where(:any-link, button, label) .rt-Image {
+  cursor: inherit;
+  transform: none !important;
+  outline: none !important;
+  box-shadow: var(--box-shadow) !important;
+}
+.rt-Image--blur-bg {
+  position: absolute;
+  top: var(--blur-offset-y, 8px);
+  left: var(--blur-offset-x, 0);
+  filter: var(--blur-filter);
+  opacity: var(--blur-opacity);
+  z-index: -1;
+}
+.rt-Image--blur {
+  position: relative;
+  z-index: 1;
 }
 .rt-r-fit-cover {
   --object-fit: cover;