@dust-tt/sparkle 0.2.646 → 0.2.648

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.646",
+  "version": "0.2.648",
   "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/AssistantCard.tsx

@@ -19,6 +19,7 @@ interface BaseAssistantCardProps {
   onClick?: () => void;
   onContextMenu?: (event: React.MouseEvent) => void;
   variant?: CardVariantType;
+  dataAnalytics?: string;
 }
 
 type AssistantCardMore = Omit<MiniButtonProps, "icon" | "size">;
@@ -50,6 +51,7 @@ export const AssistantCard = React.forwardRef<
       subtitle,
       action,
       variant = "primary",
+      dataAnalytics,
     },
     ref
   ) => {
@@ -62,6 +64,7 @@ export const AssistantCard = React.forwardRef<
         onContextMenu={onContextMenu}
         action={action}
         variant={variant}
+        dataAnalytics={dataAnalytics}
       >
         <div className="s-flex s-gap-3">
           <Avatar visual={pictureUrl} size="md" />
@@ -102,35 +105,41 @@ interface LargeAssistantCardProps extends BaseAssistantCardProps {}
 export const LargeAssistantCard = React.forwardRef<
   HTMLDivElement,
   LargeAssistantCardProps
->(({ className, onClick, title, description, pictureUrl }, ref) => {
-  return (
-    <Card
-      ref={ref}
-      size="lg"
-      className={className}
-      onClick={onClick}
-      variant="tertiary"
-    >
-      <div className="s-flex s-gap-3">
-        <Avatar visual={pictureUrl} size="lg" />
-        <div
-          className={cn(
-            "s-flex s-flex-col s-gap-2 s-text-base",
-            "s-text-foreground dark:s-text-foreground-night"
-          )}
-        >
-          <h3 className="s-font-semibold">{title}</h3>
-          <p
+>(
+  (
+    { className, onClick, title, description, pictureUrl, dataAnalytics },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        size="lg"
+        className={className}
+        onClick={onClick}
+        variant="tertiary"
+        dataAnalytics={dataAnalytics}
+      >
+        <div className="s-flex s-gap-3">
+          <Avatar visual={pictureUrl} size="lg" />
+          <div
             className={cn(
-              "s-line-clamp-5 s-overflow-hidden s-text-ellipsis",
-              "s-text-muted-foreground dark:s-text-muted-foreground-night"
+              "s-flex s-flex-col s-gap-2 s-text-base",
+              "s-text-foreground dark:s-text-foreground-night"
             )}
           >
-            {description}
-          </p>
+            <h3 className="s-heading-base">{title}</h3>
+            <p
+              className={cn(
+                "s-line-clamp-5 s-overflow-hidden s-text-ellipsis",
+                "s-text-muted-foreground dark:s-text-muted-foreground-night"
+              )}
+            >
+              {description}
+            </p>
+          </div>
         </div>
-      </div>
-    </Card>
-  );
-});
+      </Card>
+    );
+  }
+);
 LargeAssistantCard.displayName = "LargeAssistantCard";

package/src/components/AttachmentChip.tsx

@@ -8,7 +8,7 @@ import { LinkWrapper, LinkWrapperProps } from "./LinkWrapper";
 
 const attachmentChipVariants = cva(
   cn(
-    "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-text-sm s-font-semibold",
+    "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-heading-sm",
     "s-border-border s-bg-background",
     "dark:s-border-border-night dark:s-bg-background-night",
     "s-text-foreground dark:s-text-foreground-night",

package/src/components/Button.tsx

@@ -225,6 +225,7 @@ type CommonButtonProps = Omit<MetaButtonProps, "children"> &
     isCounter?: boolean;
     counterValue?: string;
     isRounded?: boolean;
+    dataAnalytics?: string;
   };
 
 export type MiniButtonProps = CommonButtonProps & {
@@ -263,6 +264,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       replace,
       shallow,
       "aria-label": ariaLabel,
+      dataAnalytics,
       ...props
     },
     ref
@@ -372,6 +374,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           className
         )}
         aria-label={ariaLabel || tooltip || label}
+        data-analytics={dataAnalytics}
         style={
           {
             "--pulse-color": "#93C5FD",

package/src/components/Card.tsx

@@ -78,6 +78,7 @@ interface CommonProps {
   variant?: CardVariantType;
   size?: CardSizeType;
   className?: string;
+  dataAnalytics?: string;
 }
 
 interface CardLinkProps extends CommonProps, LinkWrapperProps {
@@ -109,6 +110,7 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
       rel = "",
       replace,
       shallow,
+      dataAnalytics,
       ...props
     },
     ref
@@ -135,6 +137,7 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
           shallow={shallow}
           target={target}
           rel={rel}
+          data-analytics={dataAnalytics}
         >
           {children}
         </Link>
@@ -146,6 +149,7 @@ const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
         ref={ref}
         className={cardButtonClassNames}
         onClick={onClick}
+        data-analytics={dataAnalytics}
         {...props}
       >
         {children}

package/src/components/Citation.tsx

@@ -85,7 +85,7 @@ const CitationIndex = React.forwardRef<
       ref={ref}
       className={cn(
         "s-z-10",
-        "s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full s-text-xs s-font-semibold",
+        "s-heading-xs s-flex s-h-4 s-w-4 s-items-center s-justify-center s-rounded-full",
         "s-text-primary-200 dark:s-text-primary-200-night",
         "s-bg-primary-600 dark:s-bg-primary-600-night",
         className
@@ -247,7 +247,7 @@ const CitationTitle = React.forwardRef<HTMLDivElement, CitationTitleProps>(
         className={cn(
           "s-z-10",
           "s-line-clamp-1 s-overflow-hidden s-text-ellipsis s-break-all",
-          "s-text-sm s-font-semibold",
+          "s-heading-sm",
           "s-text-foreground dark:s-text-foreground-night",
           className
         )}

package/src/components/ContentMessage.tsx

@@ -86,7 +86,7 @@ const iconVariants = cva("s-shrink-0", {
   },
 });
 
-const titleVariants = cva("s-text-sm s-font-semibold", {
+const titleVariants = cva("s-heading-sm", {
   variants: {
     variant: {
       primary: "s-text-foreground dark:s-text-foreground-night",

package/src/components/Counter.tsx

@@ -10,9 +10,9 @@ const counterVariants = cva(
   {
     variants: {
       size: {
-        xs: "s-h-5 s-min-w-[20px] s-px-1 s-text-xs",
-        sm: "s-h-6 s-min-w-[24px] s-px-1.5 s-text-sm",
-        md: "s-h-7 s-min-w-[28px] s-px-2 s-text-base",
+        xs: "s-h-5 s-min-w-[20px] s-px-1 s-heading-xs",
+        sm: "s-h-6 s-min-w-[24px] s-px-1.5 s-heading-sm",
+        md: "s-h-7 s-min-w-[28px] s-px-2 s-heading-base",
       },
       variant: {
         primary: "",
@@ -32,55 +32,55 @@ const counterVariants = cva(
         isInButton: false,
         variant: "primary",
         className:
-          "s-bg-primary dark:s-bg-primary-night s-text-primary-50 dark:s-text-primary-800 s-font-medium",
+          "s-bg-primary dark:s-bg-primary-night s-text-primary-50 dark:s-text-primary-800",
       },
       {
         isInButton: false,
         variant: "highlight",
-        className: "s-bg-highlight s-text-white s-font-medium",
+        className: "s-bg-highlight s-text-white",
       },
       {
         isInButton: false,
         variant: "warning",
-        className: "s-bg-warning s-text-white s-font-medium",
+        className: "s-bg-warning s-text-white",
       },
       {
         isInButton: false,
         variant: "outline",
-        className: "s-bg-primary-200 s-text-primary-900 s-font-medium",
+        className: "s-bg-primary-150 s-text-primary-900",
       },
       {
         isInButton: false,
         variant: ["ghost", "ghost-secondary"],
-        className: "s-text-primary dark:s-text-primary-night s-font-medium",
+        className: "s-text-primary dark:s-text-primary-night",
       },
       {
         isInButton: true,
         variant: "primary",
         className:
-          "s-bg-primary-600 dark:s-bg-primary-400 s-text-white dark:s-text-primary-900 s-font-semibold",
+          "s-bg-primary-600 dark:s-bg-primary-400 s-text-white dark:s-text-primary-900",
       },
       {
         isInButton: true,
         variant: "highlight",
-        className: "s-bg-highlight-400 s-text-white s-font-semibold",
+        className: "s-bg-highlight-400 s-text-white",
       },
       {
         isInButton: true,
         variant: "warning",
-        className: "s-bg-warning-400 s-text-white s-font-semibold",
+        className: "s-bg-warning-400 s-text-white",
       },
       {
         isInButton: true,
         variant: "outline",
         className:
-          "s-bg-primary-200 dark:s-bg-primary-700 s-text-primary-700 dark:s-text-primary-300 s-font-semibold",
+          "s-bg-primary-150 dark:s-bg-primary-800 s-text-primary-700 dark:s-text-primary-300",
       },
       {
         isInButton: true,
         variant: ["ghost", "ghost-secondary"],
         className:
-          "s-bg-primary-200 dark:s-bg-primary-700 s-text-primary-700 dark:s-text-primary-300 s-font-semibold",
+          "s-bg-primary-150 dark:s-bg-primary-800 s-text-primary-700 dark:s-text-primary-300",
       },
     ],
     defaultVariants: {

package/src/components/DataTable.tsx

@@ -753,7 +753,7 @@ DataTable.Head = function Head({
   return (
     <th
       className={cn(
-        "s-py-2 s-pl-2 s-pr-3 s-text-left s-text-xs s-font-semibold s-capitalize",
+        "s-heading-xs s-py-2 s-pl-2 s-pr-3 s-text-left s-capitalize",
         "s-text-foreground dark:s-text-foreground-night",
         column.columnDef.meta?.className,
         className

package/src/components/Dialog.tsx

@@ -80,6 +80,7 @@ interface DialogContentProps
   isAlertDialog?: boolean;
   preventAutoFocusOnClose?: boolean;
   mountPortalContainer?: HTMLElement;
+  dataAnalytics?: string;
 }
 
 const DialogContent = React.forwardRef<
@@ -97,6 +98,7 @@ const DialogContent = React.forwardRef<
       preventAutoFocusOnClose = true,
       onCloseAutoFocus,
       mountPortalContainer,
+      dataAnalytics,
       ...props
     },
     ref
@@ -124,6 +126,7 @@ const DialogContent = React.forwardRef<
                 : props.onInteractOutside
             }
             onCloseAutoFocus={handleCloseAutoFocus}
+            data-analytics={dataAnalytics}
             {...props}
           >
             {children}

package/src/components/Dropdown.tsx

@@ -27,7 +27,7 @@ export const menuStyleClasses = {
   ),
   item: cva(
     cn(
-      "s-relative s-flex s-gap-2 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-md s-text-sm s-font-semibold s-transition-colors s-duration-300 data-[disabled]:s-pointer-events-none",
+      "s-relative s-flex s-gap-2 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-md s-heading-sm s-transition-colors s-duration-300 data-[disabled]:s-pointer-events-none",
       "data-[disabled]:s-text-primary-400 dark:data-[disabled]:s-text-primary-400-night"
     ),
     {
@@ -67,7 +67,7 @@ export const menuStyleClasses = {
     span: "s-absolute s-left-2 s-flex s-h-3.5 s-w-3.5 s-items-center s-justify-center",
   },
   label: cn(
-    "s-font-semibold s-px-2 s-py-2 s-text-xs",
+    "s-px-2 s-py-2 s-heading-xs",
     "s-text-muted-foreground dark:s-text-muted-foreground-night"
   ),
   description: cn(
@@ -698,7 +698,7 @@ const DropdownMenuStaticItem = React.forwardRef<
       className
     )}
   >
-    <span className="s-grow s-font-semibold">{label}</span>
+    <span className="s-grow s-font-medium">{label}</span>
     {value && (
       <span
         className={cn(

package/src/components/EmptyCTA.tsx

@@ -42,14 +42,24 @@ EmptyCTA.displayName = "EmptyCTA";
 interface EmptyCTAButtonProps extends RegularButtonProps {
   icon: React.ComponentType;
   label: string;
+  dataAnalytics?: string;
 }
 
 const EmptyCTAButton: React.FC<EmptyCTAButtonProps> = ({
   icon,
   label,
   variant = "highlight",
+  dataAnalytics,
   ...props
-}) => <Button icon={icon} label={label} variant={variant} {...props} />;
+}) => (
+  <Button
+    icon={icon}
+    label={label}
+    variant={variant}
+    dataAnalytics={dataAnalytics}
+    {...props}
+  />
+);
 
 EmptyCTAButton.displayName = "EmptyCTAButton";
 

package/src/components/LinkWrapper.tsx

@@ -10,29 +10,36 @@ export interface LinkWrapperProps {
   shallow?: boolean;
   target?: string;
   prefetch?: boolean;
+  dataAnalytics?: string;
 }
 
 export const LinkWrapper = React.forwardRef<
   HTMLAnchorElement,
   LinkWrapperProps
->(({ children, href, rel, replace, shallow, target, prefetch }, ref) => {
-  const { components } = React.useContext(SparkleContext);
+>(
+  (
+    { children, href, rel, replace, shallow, target, prefetch, dataAnalytics },
+    ref
+  ) => {
+    const { components } = React.useContext(SparkleContext);
 
-  if (href) {
-    return (
-      <components.link
-        ref={ref}
-        href={href}
-        target={target}
-        rel={rel}
-        replace={replace}
-        shallow={shallow}
-        prefetch={prefetch}
-      >
-        {children}
-      </components.link>
-    );
-  }
+    if (href) {
+      return (
+        <components.link
+          ref={ref}
+          href={href}
+          target={target}
+          rel={rel}
+          replace={replace}
+          shallow={shallow}
+          prefetch={prefetch}
+          data-analytics={dataAnalytics}
+        >
+          {children}
+        </components.link>
+      );
+    }
 
-  return children;
-});
+    return children;
+  }
+);

package/src/components/MultiPageDialog.tsx

@@ -99,6 +99,7 @@ interface MultiPageDialogProps {
   footerContent?: React.ReactNode;
   addFooterSeparator?: boolean;
   hideCloseButton?: boolean;
+  dataAnalytics?: string;
 }
 
 interface MultiPageDialogContentProps extends MultiPageDialogProps {
@@ -129,6 +130,7 @@ const MultiPageDialogContent = React.forwardRef<
       rightButton,
       footerContent,
       hideCloseButton,
+      dataAnalytics,
       ...props
     },
     ref
@@ -188,6 +190,7 @@ const MultiPageDialogContent = React.forwardRef<
         isAlertDialog={isAlertDialog}
         preventAutoFocusOnClose={preventAutoFocusOnClose}
         className={className}
+        dataAnalytics={dataAnalytics}
         {...props}
       >
         <div className={cn(multiPageDialogLayoutVariants())}>
@@ -259,7 +262,7 @@ const MultiPageDialogContent = React.forwardRef<
               {showNavigation && pages.length > 1 && (
                 <div
                   className={cn(
-                    "s-text-xs s-font-semibold s-text-muted-foreground-night",
+                    "s-heading-xs s-text-muted-foreground-night",
                     !hideCloseButton && "s-pr-8"
                   )}
                 >

package/src/components/NavigationList.tsx

@@ -71,6 +71,7 @@ interface NavigationListItemProps
   icon?: React.ComponentType;
   moreMenu?: React.ReactNode;
   status?: "idle" | "unread" | "blocked";
+  dataAnalytics?: string;
 }
 
 const NavigationListItem = React.forwardRef<
@@ -90,6 +91,7 @@ const NavigationListItem = React.forwardRef<
       shallow,
       moreMenu,
       status = "idle",
+      dataAnalytics,
       ...props
     },
     ref
@@ -129,6 +131,7 @@ const NavigationListItem = React.forwardRef<
           rel={rel}
           replace={replace}
           shallow={shallow}
+          dataAnalytics={dataAnalytics}
         >
           <div
             className={cn(
@@ -216,7 +219,7 @@ const variantStyles = cva("", {
 });
 
 const labelStyles = cva(
-  "s-font-semibold s-pt-4 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+  "s-pt-4 s-pb-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
 interface NavigationListLabelProps

package/src/components/Notification.tsx

@@ -71,7 +71,7 @@ function NotificationContent({
       <div className="s-flex s-min-w-0 s-flex-grow s-flex-col">
         <div
           className={cn(
-            "s-text-md s-line-clamp-1 s-h-6 s-grow s-font-semibold",
+            "s-heading-md s-line-clamp-1 s-h-6 s-grow",
             variantClassName({ type })
           )}
         >

package/src/components/PriceTable.tsx

@@ -14,6 +14,7 @@ interface PriceTableProps {
   className?: string;
   children: ReactNode;
   magnified?: boolean;
+  dataAnalytics?: string;
 }
 
 const colorTable = {
@@ -45,6 +46,7 @@ export function PriceTable({
   priceLabel = "",
   className = "",
   magnified = true,
+  dataAnalytics,
   children, // Use children instead of tableItems
 }: PriceTableProps) {
   // Pass size prop to all PriceTable.Item children
@@ -73,6 +75,7 @@ export function PriceTable({
         colorTable[color],
         className
       )}
+      data-analytics={dataAnalytics}
     >
       <div
         className={classNames(

package/src/components/Sheet.tsx

@@ -89,6 +89,7 @@ interface SheetContentProps
   side?: SheetSideType;
   preventAutoFocusOnClose?: boolean;
   preventAutoFocusOnOpen?: boolean;
+  dataAnalytics?: string;
 }
 
 const SheetContent = React.forwardRef<
@@ -106,6 +107,7 @@ const SheetContent = React.forwardRef<
       preventAutoFocusOnOpen = true,
       onCloseAutoFocus,
       onOpenAutoFocus,
+      dataAnalytics,
       ...props
     },
     ref
@@ -160,6 +162,7 @@ const SheetContent = React.forwardRef<
             onCloseAutoFocus={handleCloseAutoFocus}
             onOpenAutoFocus={handleOpenAutoFocus}
             onKeyDownCapture={onKeyDownCapture}
+            data-analytics={dataAnalytics}
             {...props}
           >
             {children}

package/src/components/Tabs.tsx

@@ -52,6 +52,7 @@ const TabsTrigger = React.forwardRef<
       >
     > & {
       isLoading?: boolean;
+      dataAnalytics?: string;
     } & Omit<LinkWrapperProps, "children" | "className">
 >(
   (
@@ -69,6 +70,7 @@ const TabsTrigger = React.forwardRef<
       variant = "ghost",
       isCounter = false,
       counterValue,
+      dataAnalytics,
       ...props
     },
     ref
@@ -95,6 +97,7 @@ const TabsTrigger = React.forwardRef<
           shallow={shallow}
           isCounter={isCounter}
           counterValue={counterValue}
+          dataAnalytics={dataAnalytics}
           className={cn(
             "s-relative",
             "after:s-absolute after:s-bottom-[-9px] after:s-left-1/2 after:s-h-[2px] after:s-w-full after:s--translate-x-1/2",

package/src/components/ToolCard.tsx

@@ -100,7 +100,7 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
                   e.stopPropagation();
                   toolInfo.onClick();
                 }}
-                className="s-cursor-pointer s-text-sm s-font-semibold s-text-muted-foreground hover:s-text-highlight-light hover:s-underline hover:s-underline-offset-2 dark:s-text-muted-foreground-night dark:hover:s-text-highlight-light-night"
+                className="s-heading-sm s-cursor-pointer s-text-muted-foreground hover:s-text-highlight-light hover:s-underline hover:s-underline-offset-2 dark:s-text-muted-foreground-night dark:hover:s-text-highlight-light-night"
               >
                 {toolInfo.label}
               </a>

package/src/components/ValueCard.tsx

@@ -30,7 +30,7 @@ interface CardTitleProps {
 const Title = ({ className, children }: CardTitleProps) => (
   <div
     className={cn(
-      "s-text-sm s-font-semibold",
+      "s-heading-sm",
       "s-text-foreground dark:s-text-foreground-night",
       className
     )}

package/src/icons/actions/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="currentColor"
+      fill="#000"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/icons/app/ArrowDownDash.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgArrowDownDash = (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="m13.5 17.5 5-5 2 2L12 23l-8.5-8.5 2-2 5 5V7h3v10.5ZM16 5H8V2h8v3Z"
+    />
+  </svg>
+);
+export default SvgArrowDownDash;

package/src/icons/app/Atom.tsx

@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="currentColor"
+      fill="#000"
       fillRule="evenodd"
       d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
       clipRule="evenodd"

package/src/icons/app/index.ts

@@ -1,6 +1,7 @@
 export { default as ArrowCircleIcon } from "./ArrowCircle";
 export { default as ArrowDownIcon } from "./ArrowDown";
 export { default as ArrowDownCircleIcon } from "./ArrowDownCircle";
+export { default as ArrowDownDashIcon } from "./ArrowDownDash";
 export { default as ArrowDownOnSquareIcon } from "./ArrowDownOnSquare";
 export { default as ArrowDownSIcon } from "./ArrowDownS";
 export { default as ArrowGoBackIcon } from "./ArrowGoBack";

package/src/icons/src/app/arrow-down-dash.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="M13.5 17.5L18.5 12.5L20.5 14.5L12 23L3.5 14.5L5.5 12.5L10.5 17.5V7H13.5V17.5ZM16 5H8V2H16V5Z" fill="#111418"/>
+</svg>