@dust-tt/sparkle 0.2.190 → 0.2.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.190",
+  "version": "0.2.192",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/_index.ts

@@ -264,6 +264,7 @@ import {
   ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusIcon,
   ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextIcon,
   ChatBubbleLeftRight as ChatBubbleLeftRightIcon,
+  ChatBubbleThought as ChatBubbleThoughtIcon,
   Check as CheckIcon,
   CheckCircle as CheckCircleIcon,
   ChevronDown as ChevronDownIcon,
@@ -296,6 +297,7 @@ import {
   ExternalLink as ExternalLinkIcon,
   Eye as EyeIcon,
   EyeSlash as EyeSlashIcon,
+  Fire as FireIcon,
   Flag as FlagIcon,
   Folder as FolderIcon,
   FolderOpen as FolderOpenIcon,
@@ -303,7 +305,6 @@ import {
   FullscreenExit as FullscreenExitIcon,
   GlobeAlt as GlobeAltIcon,
   Grab as GrabIcon,
-  HandHeart as HandHeartIcon,
   HandThumbDown as HandThumbDownIcon,
   HandThumbUp as HandThumbUpIcon,
   HeartAlt as HeartAltIcon,
@@ -350,6 +351,7 @@ import {
   Star as StarIcon,
   Stop as StopIcon,
   Table as TableIcon,
+  Tag as TagIcon,
   Template as TemplateIcon,
   TestTube as TestTubeIcon,
   Time as TimeIcon,
@@ -382,6 +384,7 @@ export {
   ChatBubbleBottomCenterPlusIcon,
   ChatBubbleBottomCenterTextIcon,
   ChatBubbleLeftRightIcon,
+  ChatBubbleThoughtIcon,
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
@@ -414,6 +417,7 @@ export {
   ExternalLinkIcon,
   EyeIcon,
   EyeSlashIcon,
+  FireIcon,
   FlagIcon,
   FolderIcon,
   FolderOpenIcon,
@@ -421,7 +425,6 @@ export {
   FullscreenIcon,
   GlobeAltIcon,
   GrabIcon,
-  HandHeartIcon,
   HandThumbDownIcon,
   HandThumbUpIcon,
   HeartAltIcon,
@@ -468,6 +471,7 @@ export {
   StarIcon,
   StopIcon,
   TableIcon,
+  TagIcon,
   TemplateIcon,
   TestTubeIcon,
   TimeIcon,
@@ -500,6 +504,7 @@ import {
   ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusStrokeIcon,
   ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextStrokeIcon,
   ChatBubbleLeftRight as ChatBubbleLeftRightStrokeIcon,
+  ChatBubbleThought as ChatBubbleThoughtStrokeIcon,
   Check as CheckStrokeIcon,
   CheckCircle as CheckCircleStrokeIcon,
   ChevronDown as ChevronDownStrokeIcon,
@@ -532,6 +537,7 @@ import {
   ExternalLink as ExternalLinkStrokeIcon,
   Eye as EyeStrokeIcon,
   EyeSlash as EyeSlashStrokeIcon,
+  Fire as FireStrokeIcon,
   Flag as FlagStrokeIcon,
   Folder as FolderStrokeIcon,
   FolderOpen as FolderOpenStrokeIcon,
@@ -539,7 +545,6 @@ import {
   FullscreenExit as FullscreenExitStrokeIcon,
   GlobeAlt as GlobeAltStrokeIcon,
   Grab as GrabStrokeIcon,
-  HandHeart as HandHeartStrokeIcon,
   HandThumbDown as HandThumbDownStrokeIcon,
   HandThumbUp as HandThumbUpStrokeIcon,
   HeartAlt as HeartAltStrokeIcon,
@@ -586,6 +591,7 @@ import {
   Star as StarStrokeIcon,
   Stop as StopStrokeIcon,
   Table as TableStrokeIcon,
+  Tag as TagStrokeIcon,
   Template as TemplateStrokeIcon,
   TestTube as TestTubeStrokeIcon,
   Time as TimeStrokeIcon,
@@ -618,6 +624,7 @@ export {
   ChatBubbleBottomCenterPlusStrokeIcon,
   ChatBubbleBottomCenterTextStrokeIcon,
   ChatBubbleLeftRightStrokeIcon,
+  ChatBubbleThoughtStrokeIcon,
   CheckCircleStrokeIcon,
   CheckStrokeIcon,
   ChevronDownStrokeIcon,
@@ -650,6 +657,7 @@ export {
   ExternalLinkStrokeIcon,
   EyeSlashStrokeIcon,
   EyeStrokeIcon,
+  FireStrokeIcon,
   FlagStrokeIcon,
   FolderOpenStrokeIcon,
   FolderStrokeIcon,
@@ -657,7 +665,6 @@ export {
   FullscreenStrokeIcon,
   GlobeAltStrokeIcon,
   GrabStrokeIcon,
-  HandHeartStrokeIcon,
   HandThumbDownStrokeIcon,
   HandThumbUpStrokeIcon,
   HeartAltStrokeIcon,
@@ -704,6 +711,7 @@ export {
   StarStrokeIcon,
   StopStrokeIcon,
   TableStrokeIcon,
+  TagStrokeIcon,
   TemplateStrokeIcon,
   TestTubeStrokeIcon,
   TimeStrokeIcon,

package/src/components/Checkbox.tsx

@@ -25,7 +25,8 @@ export function Checkbox({
   const baseStyleClasses = {
     base: "s-border s-justify-center s-w-5 s-h-5 s-rounded-md s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
     idle: "s-bg-structure-50 s-border-element-600 s-cursor-pointer",
-    hover: "hover:s-border-action-500 hover:s-bg-action-200",
+    hover:
+      "hover:s-border-action-500 hover:s-bg-action-200 hover:s-text-white/100",
     disabled: "s-bg-structure-0 s-border-structure-300 s-cursor-default",
     dark: {
       base: "dark:s-bg-structure-50-dark dark:s-border-element-500-dark",
@@ -46,6 +47,7 @@ export function Checkbox({
 
   const combinedBaseClasses = classNames(
     baseStyleClasses.base,
+    checked || partialChecked ? "s-text-white" : "s-text-white/0",
     disabled ? baseStyleClasses.disabled : baseStyleClasses.idle,
     !disabled ? baseStyleClasses.hover : "",
     disabled ? baseStyleClasses.dark.disabled : baseStyleClasses.dark.base,
@@ -72,13 +74,11 @@ export function Checkbox({
         className="s-hidden"
         disabled={disabled}
       />
-      <div
-        className={classNames(combinedBaseClasses, "s-relative s-text-white")}
-      >
+      <div className={classNames(combinedBaseClasses, "s-relative")}>
         <div
           className={combinedCheckedIndicatorClasses}
           style={{ width: "14px", height: "14px", borderRadius: "3px" }}
-        ></div>
+        />
         {variant === "checkable" && (
           <div className="s-absolute">
             <Icon visual={partialChecked ? Dash : Check} size="xs" />

package/src/components/Hoverable.tsx

@@ -7,19 +7,25 @@ interface HoverableProps {
   children: ReactNode;
   className?: string;
   onClick: (e: SyntheticEvent) => void;
+  variant?: "primary" | "invisible";
 }
 
 export function Hoverable({
   children,
   className = "",
   onClick,
+  variant = "invisible",
 }: HoverableProps) {
+  const baseClasses = "s-cursor-pointer s-duration-300";
+
+  const variantClasses = {
+    invisible: "hover:s-text-action-500 active:s-text-action-600",
+    primary: "s-font-bold s-text-blue-500 hover:active:s-text-action-600",
+  };
+
   return (
     <span
-      className={classNames(
-        "s-cursor-pointer s-duration-300 hover:s-text-action-500 active:s-text-action-600",
-        className
-      )}
+      className={classNames(baseClasses, variantClasses[variant], className)}
       onClick={onClick}
     >
       {children}

package/src/components/Input.tsx

@@ -50,8 +50,8 @@ export function Input({
         id={name}
         className={classNames(
           "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
-          "s-bg-structure-50 s-text-element-900 s-placeholder-element-600",
-          "dark:s-bg-structure-50-dark dark:s-text-element-800-dark dark:s-placeholder-element-600-dark",
+          "s-bg-structure-50 s-text-element-900 s-placeholder-element-700",
+          "dark:s-bg-structure-50-dark dark:s-text-element-800-dark dark:s-placeholder-element-700-dark",
           sizeInputClasses[size],
           "s-transition-all s-duration-300 s-ease-out",
           className ?? "",

package/src/components/Modal.tsx

@@ -128,7 +128,12 @@ export function Modal({
       <Dialog
         as="div"
         className="s-fixed s-absolute s-inset-0 s-z-50 s-overflow-hidden"
-        onClose={onClose}
+        onClose={() => {
+          // We allow closing the modal by clicking outside of it only if there are no changes
+          if (!hasChanged) {
+            onClose();
+          }
+        }}
       >
         {/* Smoke screen and transition */}
         <Transition.Child

package/src/components/TextArea.tsx

@@ -32,7 +32,7 @@ export function TextArea({
       <textarea
         ref={textareaRef}
         className={classNames(
-          "overflow-y-auto s-block s-min-h-60 s-w-full s-min-w-0 s-rounded-xl s-text-sm s-transition-all s-duration-200 s-scrollbar-hide",
+          "overflow-y-auto s-block s-min-h-60 s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-duration-200 s-scrollbar-hide",
           !error
             ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
             : "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500",

package/src/components/Tree.tsx

@@ -15,16 +15,24 @@ import { IconButton } from "./IconButton";
 
 export interface TreeProps {
   children?: React.ReactNode;
+  isBoxed?: boolean;
   isLoading?: boolean;
 }
 
-export function Tree({ children, isLoading }: TreeProps) {
+export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
   return isLoading ? (
     <div className="s-py-2 s-pl-4">
       <Spinner size="xs" variant="dark" />
     </div>
   ) : (
-    <div className="s-flex s-flex-col s-gap-1 s-overflow-hidden">
+    <div
+      className={classNames(
+        "s-flex s-flex-col s-gap-1 s-overflow-hidden",
+        isBoxed
+          ? "s- s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4"
+          : ""
+      )}
+    >
       {children}
     </div>
   );

package/src/icons/solid/ChatBubbleThought.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgChatBubbleThought = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14 3h-4a8 8 0 0 0-8 8c0 6.5 7 9.5 12 11.5V19a8 8 0 1 0 0-16Zm-8 8c0-.825.675-1.5 1.5-1.5S9 10.175 9 11s-.675 1.5-1.5 1.5S6 11.825 6 11Zm9 0c0-.825.675-1.5 1.5-1.5s1.5.675 1.5 1.5-.675 1.5-1.5 1.5S15 11.825 15 11Zm-4.5 0c0-.825.675-1.5 1.5-1.5s1.5.675 1.5 1.5-.675 1.5-1.5 1.5-1.5-.675-1.5-1.5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgChatBubbleThought;

package/src/icons/solid/ExternalLink.tsx

@@ -10,10 +10,10 @@ const SvgExternalLink = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       d="M19 11h3V3h-8v3h2.983C15.49 8.777 12.24 10.5 9 10.5v3c3.748 0 7.737-1.796 10-5.05V11Z"
     />
-    <path fill="#000" d="M7 7h4V5H5v14h14v-5h-2v3H7V7Z" />
+    <path fill="currentColor" d="M7 7h4V5H5v14h14v-5h-2v3H7V7Z" />
   </svg>
 );
 export default SvgExternalLink;

package/src/icons/solid/Fire.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgFire = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12 23a7.5 7.5 0 0 1-5.138-12.963C8.204 8.774 11.5 6.5 11 1.5c6 4 9 8 3 14 1 0 2.5 0 5-2.47.27.773.5 1.604.5 2.47A7.5 7.5 0 0 1 12 23Z"
+    />
+  </svg>
+);
+export default SvgFire;

package/src/icons/solid/Tag.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTag = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M1 12 11 2l7.558.756a3 3 0 0 1 2.686 2.686L22 13 12 23 1 12Zm14-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgTag;

package/src/icons/solid/index.ts

@@ -15,6 +15,7 @@ export { default as Card } from "./Card";
 export { default as ChatBubbleBottomCenterPlus } from "./ChatBubbleBottomCenterPlus";
 export { default as ChatBubbleBottomCenterText } from "./ChatBubbleBottomCenterText";
 export { default as ChatBubbleLeftRight } from "./ChatBubbleLeftRight";
+export { default as ChatBubbleThought } from "./ChatBubbleThought";
 export { default as Check } from "./Check";
 export { default as CheckCircle } from "./CheckCircle";
 export { default as ChevronDown } from "./ChevronDown";
@@ -47,6 +48,7 @@ export { default as ExclamationCircle } from "./ExclamationCircle";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as Eye } from "./Eye";
 export { default as EyeSlash } from "./EyeSlash";
+export { default as Fire } from "./Fire";
 export { default as Flag } from "./Flag";
 export { default as Folder } from "./Folder";
 export { default as FolderOpen } from "./FolderOpen";
@@ -54,7 +56,6 @@ export { default as Fullscreen } from "./Fullscreen";
 export { default as FullscreenExit } from "./FullscreenExit";
 export { default as GlobeAlt } from "./GlobeAlt";
 export { default as Grab } from "./Grab";
-export { default as HandHeart } from "./HandHeart";
 export { default as HandThumbDown } from "./HandThumbDown";
 export { default as HandThumbUp } from "./HandThumbUp";
 export { default as HeartAlt } from "./HeartAlt";
@@ -101,6 +102,7 @@ export { default as Square3Stack3D } from "./Square3Stack3D";
 export { default as Star } from "./Star";
 export { default as Stop } from "./Stop";
 export { default as Table } from "./Table";
+export { default as Tag } from "./Tag";
 export { default as Template } from "./Template";
 export { default as TestTube } from "./TestTube";
 export { default as Time } from "./Time";

package/src/icons/src/solid/chat-bubble-thought.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C5.58172 3 2 6.58172 2 11C2 17.5 9 20.5 14 22.5V19C18.4183 19 22 15.4183 22 11C22 6.58172 18.4183 3 14 3ZM6 11C6 10.175 6.675 9.5 7.5 9.5C8.325 9.5 9 10.175 9 11C9 11.825 8.325 12.5 7.5 12.5C6.675 12.5 6 11.825 6 11ZM15 11C15 10.175 15.675 9.5 16.5 9.5C17.325 9.5 18 10.175 18 11C18 11.825 17.325 12.5 16.5 12.5C15.675 12.5 15 11.825 15 11ZM10.5 11C10.5 10.175 11.175 9.5 12 9.5C12.825 9.5 13.5 10.175 13.5 11C13.5 11.825 12.825 12.5 12 12.5C11.175 12.5 10.5 11.825 10.5 11Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/chevron-right.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5001 12L8.00009 7.5L10.0001 5.5L16.5 12.0003L10.0001 18.5L8.00009 16.5L12.5001 12Z" fill="#020617"/>
+<path d="M12.5001 12L8.00012 7.5L10.0001 5.5L16.5 12.0003L10.0001 18.5L8.00012 16.5L12.5001 12Z" fill="#020617"/>
 </svg>

package/src/icons/src/solid/external-link.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 11H22V3H14V6H16.983C15.49 8.77714 12.2396 10.5 9.00001 10.5V13.5C12.7482 13.5 16.7374 11.7035 19 8.4493V11Z" fill="black"/>
-<path d="M7 7H11V5H5V19H19V14H17V17H7V7Z" fill="black"/>
+<path d="M19 11H22V3H14V6H16.983C15.49 8.77714 12.2396 10.5 9.00001 10.5V13.5C12.7482 13.5 16.7374 11.7035 19 8.4493V11Z" fill="#020617"/>
+<path d="M7 7H11V5H5V19H19V14H17V17H7V7Z" fill="#020617"/>
 </svg>

package/src/icons/src/solid/fire.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 23C7.85786 23 4.5 19.6421 4.5 15.5C4.5 13.3462 5.40786 11.4045 6.86179 10.0366C8.20403 8.77375 11.5 6.49951 11 1.5C17 5.5 20 9.5 14 15.5C15 15.5 16.5 15.5 19 13.0296C19.2697 13.8032 19.5 14.6345 19.5 15.5C19.5 19.6421 16.1421 23 12 23Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/tag.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12L11 2L18.5576 2.75576C19.9784 2.89784 21.1022 4.0216 21.2442 5.44236L22 13L12 23L1 12ZM15 11C16.1046 11 17 10.1046 17 9C17 7.89543 16.1046 7 15 7C13.8954 7 13 7.89543 13 9C13 10.1046 13.8954 11 15 11Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/triangle.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3L22.3923 21H1.6077L12 3Z" fill="#020617"/>
+<path d="M12 3L22.3923 21H1.60767L12 3Z" fill="#020617"/>
 </svg>

package/src/icons/src/stroke/arrow-left.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.8284 12.9998L13.1924 18.3638L11.7782 19.778L4 11.9998L11.7782 4.22168L13.1924 5.63588L7.8284 10.9998L20 10.9998L20 12.9998L7.8284 12.9998Z" fill="#020617"/>
+<path d="M7.8284 12.9998L13.1924 18.3638L11.7782 19.778L4 11.9998L11.7782 4.22169L13.1924 5.63589L7.8284 10.9998L20 10.9998L20 12.9998L7.8284 12.9998Z" fill="#020617"/>
 </svg>

package/src/icons/src/stroke/chat-bubble-thought.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 11C6 10.175 6.675 9.5 7.5 9.5C8.325 9.5 9 10.175 9 11C9 11.825 8.325 12.5 7.5 12.5C6.675 12.5 6 11.825 6 11Z" fill="#020617"/>
+<path d="M15 11C15 10.175 15.675 9.5 16.5 9.5C17.325 9.5 18 10.175 18 11C18 11.825 17.325 12.5 16.5 12.5C15.675 12.5 15 11.825 15 11Z" fill="#020617"/>
+<path d="M10.5 11C10.5 10.175 11.175 9.5 12 9.5C12.825 9.5 13.5 10.175 13.5 11C13.5 11.825 12.825 12.5 12 12.5C11.175 12.5 10.5 11.825 10.5 11Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C5.58172 3 2 6.58172 2 11C2 17.5 9 20.5 14 22.5V19C18.4183 19 22 15.4183 22 11C22 6.58172 18.4183 3 14 3ZM14 17H12V19.4798C6.46208 16.9656 4 14.61 4 11C4 7.68629 6.68629 5 10 5H14C17.3137 5 20 7.68629 20 11C20 14.3137 17.3137 17 14 17Z" fill="#020617"/>
+</svg>

package/src/icons/src/stroke/chevron-right.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 12L8.00003 6.99995L9.50003 5.49995L15.9999 12.0003L9.50003 18.5L8.00003 17L13 12Z" fill="#020617"/>
+<path d="M13 12L8 6.99995L9.5 5.49995L15.9999 12.0003L9.5 18.5L8 17L13 12Z" fill="#020617"/>
 </svg>

package/src/icons/src/stroke/external-link.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 11H22V3H14V5H18.564C17.8869 6.4713 16.8101 7.81497 15.5075 8.8609C13.8341 10.2046 11.861 11 10 11V13C12.4121 13 14.8139 11.9829 16.7598 10.4204C18.0594 9.37677 19.1879 8.06456 20 6.59044V11Z" fill="black"/>
-<path d="M7 7H11V5H5V19H19V14H17V17H7V7Z" fill="black"/>
+<path d="M20 11H22V3H14V5H18.564C17.8869 6.4713 16.8101 7.81497 15.5075 8.8609C13.8341 10.2046 11.861 11 10 11V13C12.4121 13 14.8139 11.9829 16.7598 10.4204C18.0594 9.37677 19.1879 8.06456 20 6.59044V11Z" fill="#020617"/>
+<path d="M7 7H11V5H5V19H19V14H17V17H7V7Z" fill="#020617"/>
 </svg>

package/src/icons/src/stroke/fire.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 23C16.1421 23 19.5 19.6421 19.5 15.5C19.5 14.6345 19.2697 13.8032 19 13.0296C17.3333 14.6765 16.0667 15.5 15.2 15.5C19.1954 8.5 17 5.5 11 1.5C11.5 6.49951 8.20403 8.77375 6.86179 10.0366C5.40786 11.4045 4.5 13.3462 4.5 15.5C4.5 19.6421 7.85786 23 12 23ZM12.7094 5.23498C15.9511 7.98528 15.9666 10.1223 13.463 14.5086C12.702 15.8419 13.6648 17.5 15.2 17.5C15.8884 17.5 16.5841 17.2992 17.3189 16.9051C16.6979 19.262 14.5519 21 12 21C8.96243 21 6.5 18.5376 6.5 15.5C6.5 13.9608 7.13279 12.5276 8.23225 11.4932C8.35826 11.3747 8.99749 10.8081 9.02477 10.7836C9.44862 10.4021 9.7978 10.0663 10.1429 9.69677C11.3733 8.37932 12.2571 6.91631 12.7094 5.23498Z" fill="#020617"/>
+</svg>

package/src/icons/src/stroke/list-check.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00003 11V4H10.0001V11H3.00003ZM8.00003 9V6H5.00003V9H8.00003Z" fill="#020617"/>
-<path d="M21 7H13.0001V9H21V7Z" fill="#020617"/>
-<path d="M21 17H13.0001V19H21V17Z" fill="#020617"/>
-<path d="M5.99995 20.4142L10.7071 15.7071L9.29285 14.2929L5.99995 17.5858L4.20706 15.7929L2.79285 17.2071L5.99995 20.4142Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00009 11V4H10.0001V11H3.00009ZM8.00009 9V6H5.00009V9H8.00009Z" fill="#020617"/>
+<path d="M21.0001 7H13.0001V9H21.0001V7Z" fill="#020617"/>
+<path d="M21.0001 17H13.0001V19H21.0001V17Z" fill="#020617"/>
+<path d="M6.00001 20.4142L10.7071 15.7071L9.29291 14.2929L6.00001 17.5858L4.20712 15.7929L2.79291 17.2071L6.00001 20.4142Z" fill="#020617"/>
 </svg>

package/src/icons/src/stroke/tag.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 11C16.1046 11 17 10.1046 17 9C17 7.89543 16.1046 7 15 7C13.8954 7 13 7.89543 13 9C13 10.1046 13.8954 11 15 11Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2L1 12L12 23L22 13L21.2442 5.44236C21.1022 4.0216 19.9784 2.89784 18.5576 2.75576L11 2ZM19.9156 12.256L12 20.1716L3.82843 12L11.744 4.08438L18.3586 4.74584C18.8322 4.7932 19.2068 5.16778 19.2542 5.64137L19.9156 12.256Z" fill="#020617"/>
+</svg>

package/src/icons/src/stroke/triangle.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3L1.6077 21H22.3923L12 3ZM12 7L5.0718 19H18.9282L12 7Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3L1.60767 21H22.3923L12 3ZM12 7L5.07177 19H18.9282L12 7Z" fill="#020617"/>
 </svg>

package/src/icons/stroke/ChatBubbleThought.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgChatBubbleThought = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6 11c0-.825.675-1.5 1.5-1.5S9 10.175 9 11s-.675 1.5-1.5 1.5S6 11.825 6 11ZM15 11c0-.825.675-1.5 1.5-1.5s1.5.675 1.5 1.5-.675 1.5-1.5 1.5S15 11.825 15 11ZM10.5 11c0-.825.675-1.5 1.5-1.5s1.5.675 1.5 1.5-.675 1.5-1.5 1.5-1.5-.675-1.5-1.5Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14 3h-4a8 8 0 0 0-8 8c0 6.5 7 9.5 12 11.5V19a8 8 0 1 0 0-16Zm0 14h-2v2.48C6.462 16.966 4 14.61 4 11a6 6 0 0 1 6-6h4a6 6 0 0 1 0 12Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgChatBubbleThought;

package/src/icons/stroke/ExternalLink.tsx

@@ -10,10 +10,10 @@ const SvgExternalLink = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="currentColor"
       d="M20 11h2V3h-8v2h4.564c-.677 1.471-1.754 2.815-3.056 3.86C13.834 10.206 11.86 11 10 11v2c2.412 0 4.814-1.017 6.76-2.58A13.024 13.024 0 0 0 20 6.59V11Z"
     />
-    <path fill="#000" d="M7 7h4V5H5v14h14v-5h-2v3H7V7Z" />
+    <path fill="currentColor" d="M7 7h4V5H5v14h14v-5h-2v3H7V7Z" />
   </svg>
 );
 export default SvgExternalLink;

package/src/icons/stroke/Fire.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgFire = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12 23a7.5 7.5 0 0 0 7.5-7.5c0-.866-.23-1.697-.5-2.47-1.667 1.647-2.933 2.47-3.8 2.47 3.995-7 1.8-10-4.2-14 .5 5-2.796 7.274-4.138 8.537A7.5 7.5 0 0 0 12 23Zm.71-17.765c3.241 2.75 3.257 4.887.753 9.274-.761 1.333.202 2.991 1.737 2.991.688 0 1.384-.2 2.119-.595a5.5 5.5 0 1 1-9.087-5.412c.126-.118.765-.685.793-.71.424-.38.773-.717 1.118-1.086 1.23-1.318 2.114-2.78 2.566-4.462Z"
+    />
+  </svg>
+);
+export default SvgFire;

package/src/icons/stroke/Tag.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTag = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M15 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M11 2 1 12l11 11 10-10-.756-7.558a3 3 0 0 0-2.686-2.686L11 2Zm8.916 10.256L12 20.172 3.828 12l7.916-7.916 6.615.662a1 1 0 0 1 .895.895l.662 6.615Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgTag;

package/src/icons/stroke/index.ts

@@ -15,6 +15,7 @@ export { default as Card } from "./Card";
 export { default as ChatBubbleBottomCenterPlus } from "./ChatBubbleBottomCenterPlus";
 export { default as ChatBubbleBottomCenterText } from "./ChatBubbleBottomCenterText";
 export { default as ChatBubbleLeftRight } from "./ChatBubbleLeftRight";
+export { default as ChatBubbleThought } from "./ChatBubbleThought";
 export { default as Check } from "./Check";
 export { default as CheckCircle } from "./CheckCircle";
 export { default as ChevronDown } from "./ChevronDown";
@@ -47,6 +48,7 @@ export { default as ExclamationCircle } from "./ExclamationCircle";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as Eye } from "./Eye";
 export { default as EyeSlash } from "./EyeSlash";
+export { default as Fire } from "./Fire";
 export { default as Flag } from "./Flag";
 export { default as Folder } from "./Folder";
 export { default as FolderOpen } from "./FolderOpen";
@@ -54,7 +56,6 @@ export { default as Fullscreen } from "./Fullscreen";
 export { default as FullscreenExit } from "./FullscreenExit";
 export { default as GlobeAlt } from "./GlobeAlt";
 export { default as Grab } from "./Grab";
-export { default as HandHeart } from "./HandHeart";
 export { default as HandThumbDown } from "./HandThumbDown";
 export { default as HandThumbUp } from "./HandThumbUp";
 export { default as HeartAlt } from "./HeartAlt";
@@ -101,6 +102,7 @@ export { default as Square3Stack3D } from "./Square3Stack3D";
 export { default as Star } from "./Star";
 export { default as Stop } from "./Stop";
 export { default as Table } from "./Table";
+export { default as Tag } from "./Tag";
 export { default as Template } from "./Template";
 export { default as TestTube } from "./TestTube";
 export { default as Time } from "./Time";

package/src/logo/platforms/Gpt3.tsx

@@ -9,7 +9,7 @@ const SvgGpt3 = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 24 24"
     {...props}
   >
-    <g clipPath="url(#gpt3_svg__a)">
+    <g clipPath="url(#Gpt3_svg__a)">
       <path
         fill="#6DB9A6"
         d="M0 4a4 4 0 0 1 4-4h16a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z"
@@ -20,7 +20,7 @@ const SvgGpt3 = (props: SVGProps<SVGSVGElement>) => (
       />
     </g>
     <defs>
-      <clipPath id="gpt3_svg__a">
+      <clipPath id="Gpt3_svg__a">
         <path fill="#fff" d="M0 0h24v24H0z" />
       </clipPath>
     </defs>

package/src/logo/platforms/Gpt4.tsx

@@ -9,7 +9,7 @@ const SvgGpt4 = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 24 24"
     {...props}
   >
-    <g clipPath="url(#gpt4_svg__a)">
+    <g clipPath="url(#Gpt4_svg__a)">
       <path
         fill="#A26BF7"
         d="M0 4a4 4 0 0 1 4-4h16a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z"
@@ -20,7 +20,7 @@ const SvgGpt4 = (props: SVGProps<SVGSVGElement>) => (
       />
     </g>
     <defs>
-      <clipPath id="gpt4_svg__a">
+      <clipPath id="Gpt4_svg__a">
         <path fill="#fff" d="M0 0h24v24H0z" />
       </clipPath>
     </defs>

package/src/stories/Hoverable.stories.tsx

@@ -19,7 +19,17 @@ export const HoverableExample = () => {
             alert("Clicked!");
           }}
         >
-          You can hover me.
+          I am invisible but you can hover me.
+        </Hoverable>
+      </div>
+      <div>
+        <Hoverable
+          variant="primary"
+          onClick={() => {
+            alert("Soupinou!");
+          }}
+        >
+          I am primary, you can hover me.
         </Hoverable>
       </div>
     </div>