@dust-tt/sparkle 0.2.469 → 0.2.470

package/dist/sparkle.css

@@ -609,8 +609,15 @@ select {
   font-weight: 600;
 }
 
-.s-heading-sm {
+.s-heading-xs {
   font-size: 12px;
+  line-height: 16px;
+  letter-spacing: normal;
+  font-weight: 600;
+}
+
+.s-heading-sm {
+  font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.28px;
   font-weight: 600;
@@ -2581,11 +2588,6 @@ select {
   border-color: rgb(238 238 239 / var(--tw-border-opacity));
 }
 
-.s-border-sky-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(159 219 255 / var(--tw-border-opacity));
-}
-
 .s-border-success-100 {
   --tw-border-opacity: 1;
   border-color: rgb(240 251 189 / var(--tw-border-opacity));
@@ -3484,11 +3486,6 @@ select {
   background-color: rgb(238 238 239 / var(--tw-bg-opacity));
 }
 
-.s-bg-sky-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 235 255 / var(--tw-bg-opacity));
-}
-
 .s-bg-success-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 251 189 / var(--tw-bg-opacity));
@@ -4740,11 +4737,6 @@ select {
   color: rgb(8 80 146 / var(--tw-text-opacity));
 }
 
-.s-text-sky-900 {
-  --tw-text-opacity: 1;
-  color: rgb(7 53 95 / var(--tw-text-opacity));
-}
-
 .s-text-success-500 {
   --tw-text-opacity: 1;
   color: rgb(106 166 104 / var(--tw-text-opacity));
@@ -5359,21 +5351,46 @@ select {
   padding-left: 0.5rem;
 }
 
+.hover\:s-text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(10 108 198 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-foreground:hover {
   --tw-text-opacity: 1;
   color: rgb(17 20 24 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-golden-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(226 119 22 / var(--tw-text-opacity));
+}
+
+.hover\:s-text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(39 118 68 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-highlight-400:hover {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-highlight-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(10 108 198 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-highlight-light:hover {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-info-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(226 119 22 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-primary:hover {
   --tw-text-opacity: 1;
   color: rgb(42 50 65 / var(--tw-text-opacity));
@@ -5399,11 +5416,26 @@ select {
   color: rgb(28 34 45 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-rose-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(178 46 19 / var(--tw-text-opacity));
+}
+
+.hover\:s-text-success-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(39 118 68 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-warning-400:hover {
   --tw-text-opacity: 1;
   color: rgb(237 117 108 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-warning-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(178 46 19 / var(--tw-text-opacity));
+}
+
 .hover\:s-underline:hover {
   text-decoration-line: underline;
 }
@@ -5541,6 +5573,21 @@ select {
   background-color: rgb(201 57 19 / var(--tw-bg-opacity));
 }
 
+.active\:s-text-blue-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 23 40 / var(--tw-text-opacity));
+}
+
+.active\:s-text-golden-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(51 22 6 / var(--tw-text-opacity));
+}
+
+.active\:s-text-green-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 20 10 / var(--tw-text-opacity));
+}
+
 .active\:s-text-highlight-600:active {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
@@ -5551,21 +5598,51 @@ select {
   color: rgb(10 108 198 / var(--tw-text-opacity));
 }
 
+.active\:s-text-highlight-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 23 40 / var(--tw-text-opacity));
+}
+
 .active\:s-text-highlight-dark:active {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
 }
 
+.active\:s-text-info-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(51 22 6 / var(--tw-text-opacity));
+}
+
 .active\:s-text-primary-200:active {
   --tw-text-opacity: 1;
   color: rgb(211 213 217 / var(--tw-text-opacity));
 }
 
+.active\:s-text-primary-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(17 20 24 / var(--tw-text-opacity));
+}
+
+.active\:s-text-rose-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(34 10 4 / var(--tw-text-opacity));
+}
+
+.active\:s-text-success-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 20 10 / var(--tw-text-opacity));
+}
+
 .active\:s-text-warning-600:active {
   --tw-text-opacity: 1;
   color: rgb(201 57 19 / var(--tw-text-opacity));
 }
 
+.active\:s-text-warning-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(34 10 4 / var(--tw-text-opacity));
+}
+
 .active\:s-brightness-90:active {
   --tw-brightness: brightness(.9);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -6328,11 +6405,6 @@ select {
   border-color: rgb(42 50 65 / var(--tw-border-opacity));
 }
 
-:is(.s-dark .dark\:s-border-sky-200-night) {
-  --tw-border-opacity: 1;
-  border-color: rgb(8 80 146 / var(--tw-border-opacity));
-}
-
 :is(.s-dark .dark\:s-border-success-100-night) {
   --tw-border-opacity: 1;
   border-color: rgb(10 54 26 / var(--tw-border-opacity));
@@ -7181,11 +7253,6 @@ select {
   background-color: rgb(42 50 65 / var(--tw-bg-opacity));
 }
 
-:is(.s-dark .dark\:s-bg-sky-100-night) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(7 53 95 / var(--tw-bg-opacity));
-}
-
 :is(.s-dark .dark\:s-bg-success-100-night) {
   --tw-bg-opacity: 1;
   background-color: rgb(10 54 26 / var(--tw-bg-opacity));
@@ -7897,11 +7964,6 @@ select {
   color: rgb(159 219 255 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .dark\:s-text-sky-900-night) {
-  --tw-text-opacity: 1;
-  color: rgb(202 235 255 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .dark\:s-text-success-400-night) {
   --tw-text-opacity: 1;
   color: rgb(65 139 92 / var(--tw-text-opacity));
@@ -8055,11 +8117,26 @@ select {
   background-color: rgb(34 10 4 / var(--tw-bg-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-blue-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(122 198 255 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-foreground-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(247 247 247 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-golden-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 208 70 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:hover\:s-text-green-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(188 222 129 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-highlight-400-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
@@ -8070,11 +8147,21 @@ select {
   color: rgb(28 145 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-highlight-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(122 198 255 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-highlight-light-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-info-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 208 70 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-primary-100-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(28 34 45 / var(--tw-text-opacity));
@@ -8085,6 +8172,11 @@ select {
   color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-primary-500-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(123 129 141 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-primary-900-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(238 238 239 / var(--tw-text-opacity));
@@ -8095,11 +8187,26 @@ select {
   color: rgb(211 213 217 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-rose-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(248 166 180 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:hover\:s-text-success-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(188 222 129 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-warning-500-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(225 67 34 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-warning-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(248 166 180 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -8183,6 +8290,21 @@ select {
   background-color: rgb(87 22 9 / var(--tw-bg-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-blue-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(233 247 255 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-golden-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 250 224 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-green-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(254 255 240 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-highlight-600-night:active) {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
@@ -8193,21 +8315,51 @@ select {
   color: rgb(122 198 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-highlight-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(233 247 255 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-highlight-dark-night:active) {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-info-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 250 224 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-primary-200-night:active) {
   --tw-text-opacity: 1;
   color: rgb(42 50 65 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-primary-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(238 238 239 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-rose-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 247 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-success-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(254 255 240 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-warning-600-night:active) {
   --tw-text-opacity: 1;
   color: rgb(237 117 108 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-warning-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 247 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:disabled\:s-border-border-night:disabled) {
   --tw-border-opacity: 1;
   border-color: rgb(42 50 65 / var(--tw-border-opacity));
@@ -8294,6 +8446,10 @@ select {
     max-width: 36rem;
   }
 
+  .sm\:s-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:s-flex-row {
     flex-direction: row;
   }
@@ -8309,6 +8465,12 @@ select {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:s-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:s-rotate-90[data-panel-group-direction=vertical]>div {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.469",
+  "version": "0.2.470",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Chip.tsx

@@ -30,8 +30,8 @@ export const CHIP_COLORS = [
 type ChipColorType = (typeof CHIP_COLORS)[number];
 
 const sizeVariants: Record<ChipSizeType, string> = {
-  xs: "s-rounded-lg s-min-h-7 s-text-xs s-font-medium s-px-3 s-gap-1",
-  sm: "s-rounded-xl s-min-h-9 s-text-sm s-font-medium s-px-3 s-gap-1.5",
+  xs: "s-rounded-lg s-min-h-7 s-heading-xs s-px-3 s-gap-1",
+  sm: "s-rounded-xl s-min-h-9 s-heading-sm s-px-4 s-gap-1.5",
 };
 
 const backgroundVariants: Record<ChipColorType, string> = {
@@ -60,8 +60,8 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "dark:s-bg-green-100-night dark:s-border-green-200-night"
   ),
   blue: cn(
-    "s-bg-sky-100 s-border-sky-200",
-    "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
+    "s-bg-blue-100 s-border-blue-200",
+    "dark:s-bg-blue-100-night dark:s-border-blue-200-night"
   ),
   rose: cn(
     "s-bg-rose-100 s-border-rose-200",
@@ -80,11 +80,50 @@ const textVariants: Record<ChipColorType, string> = {
   warning: "s-text-warning-900 dark:s-text-warning-900-night",
   info: "s-text-info-900 dark:s-text-info-900-night",
   green: "s-text-green-900 dark:s-text-green-900-night",
-  blue: "s-text-sky-900 dark:s-text-sky-900-night",
+  blue: "s-text-blue-900 dark:s-text-blue-900-night",
   rose: "s-text-rose-900 dark:s-text-rose-900-night",
   golden: "s-text-golden-900 dark:s-text-golden-900-night",
 };
 
+const closeIconVariants: Record<ChipColorType, string> = {
+  primary: cn(
+    "s-text-primary-700 hover:s-text-primary-500 active:s-text-primary-950",
+    "dark:s-text-primary-700-night dark:hover:s-text-primary-500-night dark:active:s-text-primary-950-night"
+  ),
+  highlight: cn(
+    "s-text-highlight-900 hover:s-text-highlight-700 active:s-text-highlight-950",
+    "dark:s-text-highlight-900-night dark:hover:s-text-highlight-700-night dark:active:s-text-highlight-950-night"
+  ),
+  success: cn(
+    "s-text-success-900 hover:s-text-success-700 active:s-text-success-950",
+    "dark:s-text-success-900-night dark:hover:s-text-success-700-night dark:active:s-text-success-950-night"
+  ),
+  warning: cn(
+    "s-text-warning-900 hover:s-text-warning-700 active:s-text-warning-950",
+    "dark:s-text-warning-900-night dark:hover:s-text-warning-700-night dark:active:s-text-warning-950-night"
+  ),
+  info: cn(
+    "s-text-info-900 hover:s-text-info-700 active:s-text-info-950",
+    "dark:s-text-info-900-night dark:hover:s-text-info-700-night dark:active:s-text-info-950-night"
+  ),
+  green: cn(
+    "s-text-green-900 hover:s-text-green-700 active:s-text-green-950",
+    "dark:s-text-green-900-night dark:hover:s-text-green-700-night dark:active:s-text-green-950-night"
+  ),
+  blue: cn(
+    "s-text-blue-900 hover:s-text-blue-700 active:s-text-blue-950",
+    "dark:s-text-blue-900-night dark:hover:s-text-blue-700-night dark:active:s-text-blue-950-night"
+  ),
+  rose: cn(
+    "s-text-rose-900 hover:s-text-rose-700 active:s-text-rose-950",
+    "dark:s-text-rose-900-night dark:hover:s-text-rose-700-night dark:active:s-text-rose-950-night"
+  ),
+  golden: cn(
+    "s-text-golden-900 hover:s-text-golden-700 active:s-text-golden-950",
+    "dark:s-text-golden-900-night dark:hover:s-text-golden-700-night dark:active:s-text-golden-950-night"
+  ),
+};
+
 const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
   variants: {
     size: sizeVariants,
@@ -171,7 +210,10 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
             <Icon
               visual={XMarkIcon}
               size={size}
-              className="s-text-primary-700 hover:s-text-primary-500"
+              className={cn(
+                "s-transition-color -s-mr-1 s-duration-200",
+                closeIconVariants[color || "primary"]
+              )}
             />
           </div>
         )}

package/src/components/ContentMessage.tsx

@@ -58,15 +58,15 @@ const contentMessageVariants = cva(
 const iconVariants = cva("s-shrink-0", {
   variants: {
     variant: {
-      primary: "s-text-primary-800 dark:s-text-primary-800-night",
-      warning: "s-text-warning-800 dark:s-text-warning-800-night",
-      success: "s-text-success-800 dark:s-text-success-800-night",
-      highlight: "s-text-highlight-800 dark:s-text-highlight-800-night",
-      info: "s-text-info-800 dark:s-text-info-800-night",
-      green: "s-text-green-800 dark:s-text-green-800-night",
-      blue: "s-text-blue-800 dark:s-text-blue-800-night",
-      rose: "s-text-rose-800 dark:s-text-rose-800-night",
-      golden: "s-text-golden-800 dark:s-text-golden-800-night",
+      primary: "s-text-muted-foreground dark:s-text-muted-foreground-night",
+      warning: "s-text-warning-900 dark:s-text-warning-900-night",
+      success: "s-text-success-900 dark:s-text-success-900-night",
+      highlight: "s-text-highlight-900 dark:s-text-highlight-900-night",
+      info: "s-text-info-900 dark:s-text-info-900-night",
+      green: "s-text-green-900 dark:s-text-green-900-night",
+      blue: "s-text-blue-900 dark:s-text-blue-900-night",
+      rose: "s-text-rose-900 dark:s-text-rose-900-night",
+      golden: "s-text-golden-900 dark:s-text-golden-900-night",
     },
   },
 });
@@ -75,14 +75,14 @@ const titleVariants = cva("s-text-sm s-font-semibold", {
   variants: {
     variant: {
       primary: "s-text-foreground dark:s-text-foreground-night",
-      warning: "s-text-warning-800 dark:s-text-warning-800-night",
-      success: "s-text-success-800 dark:s-text-success-800-night",
-      highlight: "s-text-highlight-800 dark:s-text-highlight-800-night",
-      info: "s-text-info-800 dark:s-text-info-800-night",
-      green: "s-text-green-800 dark:s-text-green-800-night",
-      blue: "s-text-blue-800 dark:s-text-blue-800-night",
-      rose: "s-text-rose-800 dark:s-text-rose-800-night",
-      golden: "s-text-golden-800 dark:s-text-golden-800-night",
+      warning: "s-text-warning-900 dark:s-text-warning-900-night",
+      success: "s-text-success-900 dark:s-text-success-900-night",
+      highlight: "s-text-highlight-900 dark:s-text-highlight-900-night",
+      info: "s-text-info-900 dark:s-text-info-900-night",
+      green: "s-text-green-900 dark:s-text-green-900-night",
+      blue: "s-text-blue-900 dark:s-text-blue-900-night",
+      rose: "s-text-rose-900 dark:s-text-rose-900-night",
+      golden: "s-text-golden-900 dark:s-text-golden-900-night",
     },
   },
 });
@@ -91,14 +91,14 @@ const textVariants = cva("s-text-sm", {
   variants: {
     variant: {
       primary: "s-text-muted-foreground dark:s-text-muted-foreground-night",
-      warning: "s-text-warning-950 dark:s-text-warning-950-night",
-      success: "s-text-success-950 dark:s-text-success-950-night",
-      highlight: "s-text-highlight-950 dark:s-text-highlight-950-night",
-      info: "s-text-info-950 dark:s-text-info-950-night",
-      green: "s-text-green-950 dark:s-text-green-950-night",
-      blue: "s-text-blue-950 dark:s-text-blue-950-night",
-      rose: "s-text-rose-950 dark:s-text-rose-950-night",
-      golden: "s-text-golden-950 dark:s-text-golden-950-night",
+      warning: "s-text-warning-900 dark:s-text-warning-900-night",
+      success: "s-text-success-900 dark:s-text-success-900-night",
+      highlight: "s-text-highlight-900 dark:s-text-highlight-900-night",
+      info: "s-text-info-900 dark:s-text-info-900-night",
+      green: "s-text-green-900 dark:s-text-green-900-night",
+      blue: "s-text-blue-900 dark:s-text-blue-900-night",
+      rose: "s-text-rose-900 dark:s-text-rose-900-night",
+      golden: "s-text-golden-900 dark:s-text-golden-900-night",
     },
   },
 });

package/src/icons/actions/Calculator.tsx

@@ -11,7 +11,7 @@ const SvgCalculator = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M4 2h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Zm1 2v16h14V4H5Zm2 2h10v4H7V6Zm0 6h2v2H7v-2Zm0 4h2v2H7v-2Zm4-4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm4-4h2v6h-2v-6Z"
+      d="M21 2v20H3V2h18ZM5 4v16h14V4H5Zm2 2h10v4H7V6Zm0 6h2v2H7v-2Zm0 4h2v2H7v-2Zm4-4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm4-4h2v6h-2v-6Z"
     />
   </svg>
 );

package/src/icons/actions/Camera.tsx

@@ -11,7 +11,7 @@ const SvgCamera = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M2 6c0-.552.455-1 .992-1h18.016c.548 0 .992.445.992 1v14c0 .552-.455 1-.992 1H2.992A.994.994 0 0 1 2 20V6Zm2 1v12h16V7H4Zm10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2a5 5 0 1 1 0-10 5 5 0 0 1 0 10ZM4 2h6v2H4V2Z"
+      d="M2 5c6.667-.012 13.333-.012 20 0v16c-6.667.012-13.333.013-20 0V5Zm2 2v12h16V7H4Zm10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2a5 5 0 1 1 0-10 5 5 0 0 1 0 10ZM5 2h5v2H5V2Z"
     />
   </svg>
 );

package/src/icons/actions/Film.tsx

@@ -11,7 +11,7 @@ const SvgFilm = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993ZM8 5v14h8V5H8ZM4 5v2h2V5H4Zm14 0v2h2V5h-2ZM4 9v2h2V9H4Zm14 0v2h2V9h-2ZM4 13v2h2v-2H4Zm14 0v2h2v-2h-2ZM4 17v2h2v-2H4Zm14 0v2h2v-2h-2Z"
+      d="M2 2.993a681.7 681.7 0 0 0 20 0v18.014a681.7 681.7 0 0 0-20 0V2.993ZM8 5v14h8V5H8ZM4 5v2h2V5H4Zm14 0v2h2V5h-2ZM4 9v2h2V9H4Zm14 0v2h2V9h-2ZM4 13v2h2v-2H4Zm14 0v2h2v-2h-2ZM4 17v2h2v-2H4Zm14 0v2h2v-2h-2Z"
     />
   </svg>
 );

package/src/icons/actions/HandHeart.tsx

@@ -11,7 +11,7 @@ const SvgHandHeart = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M5.005 9.003a1 1 0 0 1 1 1 6.97 6.97 0 0 1 4.33 1.5h2.17c1.332 0 2.529.579 3.353 1.498l3.147.002a5 5 0 0 1 4.516 2.851c-2.365 3.12-6.194 5.149-10.516 5.149-2.79 0-5.15-.604-7.061-1.658a.998.998 0 0 1-.94.658h-3a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h3Zm1 3v5.02l.045.034c1.794 1.26 4.133 1.946 6.955 1.946 3.004 0 5.798-1.156 7.835-3.13l.133-.133-.12-.1a2.994 2.994 0 0 0-1.643-.63l-.205-.007-2.112-.001c.073.322.112.657.112 1v1h-9v-2h6.79l-.034-.079a2.501 2.501 0 0 0-2.092-1.415l-.164-.005h-2.93a4.985 4.985 0 0 0-3.57-1.5Zm-2-1h-1v7h1v-7Zm9.646-7.425.354.354.353-.354a2.5 2.5 0 0 1 3.536 3.536l-3.89 3.889-3.888-3.89a2.5 2.5 0 1 1 3.535-3.535ZM11.53 4.992a.5.5 0 0 0-.059.637l.058.07 2.475 2.475 2.476-2.475a.5.5 0 0 0 .058-.637l-.058-.07a.5.5 0 0 0-.638-.057l-.07.057-1.769 1.77-1.767-1.77-.068-.058a.5.5 0 0 0-.638.058Z"
+      d="M5.944 9.003s.06.447.06 1a6.97 6.97 0 0 1 4.33 1.5h2.17c1.333 0 2.53.579 3.354 1.498l3.147.002a5 5 0 0 1 4.516 2.851c-2.365 3.12-6.194 5.149-10.516 5.149-2.79 0-5.15-.604-7.061-1.658-.138.383 0 .658 0 .658H1s.005-.448.005-1c0-3.333.031-6.668-.005-10h4.944Zm.062 3-.001 5.02.045.034c1.794 1.26 4.133 1.946 6.955 1.946 3.004 0 5.798-1.156 7.835-3.13l.133-.133-.12-.1a2.994 2.994 0 0 0-1.643-.63l-.205-.007-2.112-.001c.073.322.112.657.112 1v1h-9v-2h6.79l-.034-.079a2.501 2.501 0 0 0-2.092-1.415l-.164-.005h-2.93a4.985 4.985 0 0 0-3.57-1.5Zm-2.001-1h-1v7h1v-7Zm9.646-7.425.354.354.353-.354a2.5 2.5 0 0 1 3.536 3.536l-3.89 3.889-3.888-3.89a2.5 2.5 0 1 1 3.535-3.535ZM11.53 4.992a.5.5 0 0 0-.059.637l.058.07 2.475 2.475 2.476-2.475a.5.5 0 0 0 .058-.637l-.058-.07a.5.5 0 0 0-.638-.057l-.07.057-1.769 1.77-1.767-1.77-.068-.058a.5.5 0 0 0-.638.058Z"
     />
   </svg>
 );

package/src/icons/actions/HandThumbDown.tsx

@@ -11,7 +11,7 @@ const SvgHandThumbDown = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M9.4 16H3a2 2 0 0 1-2-2v-2.104a2 2 0 0 1 .15-.762L4.246 3.62A1 1 0 0 1 5.17 3H22a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-3.482a1 1 0 0 0-.817.423l-5.453 7.726a.5.5 0 0 1-.632.159L9.802 22.4a2.5 2.5 0 0 1-1.305-2.853L9.4 16Zm7.6-2.588V5H5.84L3 11.896V14h6.4a2 2 0 0 1 1.938 2.493l-.903 3.548a.5.5 0 0 0 .261.571l.661.33 4.71-6.672c.25-.354.57-.644.933-.857ZM19 13h2V5h-2v8Z"
+      d="M9.4 16H3a2 2 0 0 1-2-2v-2.104a2 2 0 0 1 .15-.762L4.246 3.62A1 1 0 0 1 5.17 3H23v12h-4.482a1 1 0 0 0-.817.423l-5.453 7.726a.5.5 0 0 1-.632.159L9.802 22.4a2.5 2.5 0 0 1-1.305-2.853L9.4 16Zm7.6-2.588V5H5.84L3 11.896V14h6.4a2 2 0 0 1 1.938 2.493l-.903 3.548a.5.5 0 0 0 .261.571l.661.33 4.71-6.672c.25-.354.57-.644.933-.857ZM19 13h2V5h-2v8Z"
     />
   </svg>
 );

package/src/icons/actions/HandThumbUp.tsx

@@ -11,7 +11,7 @@ const SvgHandThumbUp = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M14.6 8H21a2 2 0 0 1 2 2v2.105c0 .26-.051.52-.15.761l-3.095 7.515a1 1 0 0 1-.925.62H2a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h3.482a1 1 0 0 0 .817-.424L11.752.851a.5.5 0 0 1 .632-.159l1.814.908a2.5 2.5 0 0 1 1.305 2.852L14.6 8ZM7 10.588V19h11.16L21 12.105V10h-6.4a2 2 0 0 1-1.938-2.493l.903-3.548a.5.5 0 0 0-.261-.57l-.661-.331-4.71 6.672c-.25.354-.57.645-.933.858ZM5 11H3v8h2v-8Z"
+      d="M14.6 8H21a2 2 0 0 1 2 2v2.105c0 .26-.051.52-.15.761l-3.095 7.515a1 1 0 0 1-.925.62H1V9h4.482a1 1 0 0 0 .817-.424L11.752.851a.5.5 0 0 1 .632-.159l1.814.908a2.5 2.5 0 0 1 1.305 2.852L14.6 8ZM7 10.588V19h11.16L21 12.105V10h-6.4a2 2 0 0 1-1.938-2.493l.903-3.548a.5.5 0 0 0-.261-.57l-.661-.331-4.71 6.672c-.25.354-.57.645-.933.858ZM5 11H3v8h2v-8Z"
     />
   </svg>
 );

package/src/icons/actions/Home.tsx

@@ -12,7 +12,7 @@ const SvgHome = (props: SVGProps<SVGSVGElement>) => (
     <path
       fill="currentColor"
       fillRule="evenodd"
-      d="M4 12v9h16v-9h3L12 2 1 12h3Zm14 0v7H6v-7h12Zm-.173-2L12 4.703 6.173 10h11.654Z"
+      d="M4 21V11l8-8 8 8v10H4Zm14-2v-7.172l-6-6-6 6V19h12Z"
       clipRule="evenodd"
     />
   </svg>

package/src/icons/actions/Movie.tsx

@@ -9,10 +9,8 @@ const SvgMovie = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 24 24"
     {...props}
   >
-    <path
-      fill="currentColor"
-      d="M2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993ZM4 5v14h16V5H4Zm6.622 3.415 4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332Z"
-    />
+    <path fill="currentColor" d="M2 3h20v18H2V3Zm2 2v14h16V5H4Z" />
+    <path fill="currentColor" d="m16 12-7 4V8l7 4Z" />
   </svg>
 );
 export default SvgMovie;