@dust-tt/sparkle 0.2.207 → 0.2.210-rc

package/src/components/Tree.tsx

@@ -1,12 +1,6 @@
-import React, { useState } from "react";
-
-import {
-  ChatBubbleBottomCenterText,
-  DocumentText,
-  Folder,
-  Square3Stack3D,
-} from "@sparkle/icons/stroke";
-import { ChevronDownIcon, ChevronRightIcon, Spinner } from "@sparkle/index";
+import React, { ComponentType, ReactNode, useState } from "react";
+
+import { ArrowDownSIcon, ArrowRightSIcon, Spinner } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Checkbox, CheckboxProps } from "./Checkbox";
@@ -14,12 +8,25 @@ import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
 
 export interface TreeProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   isBoxed?: boolean;
   isLoading?: boolean;
+  variant?: "navigator" | "finder";
 }
 
-export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
+export function Tree({
+  children,
+  isLoading,
+  isBoxed = false,
+  variant = "finder",
+}: TreeProps) {
+  const modifiedChildren = React.Children.map(children, (child) => {
+    if (React.isValidElement<TreeItemProps>(child) && variant === "navigator") {
+      return React.cloneElement(child, { isNavigatable: true });
+    }
+    return child;
+  });
+
   return isLoading ? (
     <div className="s-py-2 s-pl-4">
       <Spinner size="xs" variant="dark" />
@@ -33,24 +40,16 @@ export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
           : ""
       )}
     >
-      {children}
+      {modifiedChildren}
     </div>
   );
 }
 
-const visualTable = {
-  file: DocumentText,
-  folder: Folder,
-  database: Square3Stack3D,
-  channel: ChatBubbleBottomCenterText,
-};
-
 interface TreeItemProps {
   label?: string;
   type?: "node" | "item" | "leaf";
-  variant?: "file" | "folder" | "database" | "channel";
   size?: "sm" | "md";
-  visual?: React.ReactNode;
+  visual?: ComponentType<{ className?: string }>;
   checkbox?: CheckboxProps;
   onChevronClick?: () => void;
   collapsed?: boolean;
@@ -58,6 +57,7 @@ interface TreeItemProps {
   className?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
+  isNavigatable?: boolean;
   isSelected?: boolean;
   onItemClick?: () => void;
 }
@@ -76,7 +76,6 @@ Tree.Item = function ({
   label,
   type = "node",
   className = "",
-  variant = "file",
   size = "sm",
   visual,
   checkbox,
@@ -87,6 +86,7 @@ Tree.Item = function ({
   areActionsFading = true,
   renderTreeItems,
   children,
+  isNavigatable = false,
   isSelected = false,
   onItemClick,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
@@ -111,16 +111,34 @@ Tree.Item = function ({
 
   const childrenToRender = getChildren();
 
+  const treeItemStyleClasses = {
+    base: "s-group s-flex s-cursor-default s-flex-row s-items-center",
+    isNavigatableBase:
+      "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+    isNavigatableUnselected:
+      "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
+    isNavigatableSelected: "s-border-structure-200 s-bg-white",
+  };
+
   return (
     <>
       <div
         className={classNames(
           className ? className : "",
-          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
-          size === "sm" ? "s-py-1" : "s-py-2",
+          treeItemStyleClasses.base,
           onItemClick ? "s-cursor-pointer" : "",
-          isSelected
-            ? "s-rounded-md s-border s-border-neutral-200 s-bg-white"
+          isNavigatable ? treeItemStyleClasses.isNavigatableBase : "",
+          isNavigatable
+            ? size === "sm"
+              ? "s-gap-1 s-rounded-lg s-py-1 s-pl-1.5 s-pr-3"
+              : "s-gap-2 s-rounded-lg s-py-2 s-pl-2.5 s-pr-4"
+            : size === "sm"
+              ? "s-gap-1 s-py-1"
+              : "s-gap-2 s-py-2",
+          isNavigatable
+            ? isSelected
+              ? treeItemStyleClasses.isNavigatableSelected
+              : treeItemStyleClasses.isNavigatableUnselected
             : ""
         )}
         onClick={onItemClick ? onItemClick : undefined}
@@ -129,10 +147,10 @@ Tree.Item = function ({
           <IconButton
             icon={
               childrenToRender && !effectiveCollapsed
-                ? ChevronDownIcon
-                : ChevronRightIcon
+                ? ArrowDownSIcon
+                : ArrowRightSIcon
             }
-            size="sm"
+            size="xs"
             variant="secondary"
             onClick={(e) => {
               e.stopPropagation();
@@ -143,50 +161,37 @@ Tree.Item = function ({
           />
         )}
         {type === "leaf" && <div className="s-w-5"></div>}
-        {checkbox && <Checkbox {...checkbox} />}
-
-        <div className="s-flex s-w-full s-items-center">
+        {checkbox && <Checkbox {...checkbox} size="xs" />}
+        <Icon
+          visual={visual}
+          size={size === "sm" ? "sm" : "md"}
+          className="s-flex-shrink-0 s-text-element-600"
+        />
+
+        <div
+          className={classNames(
+            "s-truncate s-font-medium s-text-element-900",
+            size === "sm" ? "s-ml-1 s-text-sm" : "s-ml-1 s-text-base"
+          )}
+        >
+          {label}
+        </div>
+        <div className="s-grow" />
+        {actions && (
           <div
             className={classNames(
-              "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center",
-              size === "sm" ? "s-gap-1.5" : "s-gap-2"
+              "s-flex s-gap-2 s-pl-4",
+              areActionsFading
+                ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                : ""
             )}
           >
-            {visual ? (
-              visual
-            ) : (
-              <Icon
-                visual={visualTable[variant]}
-                size="sm"
-                className="s-flex-shrink-0 s-text-element-700"
-              />
-            )}
-
-            <div
-              className={classNames(
-                "s-truncate s-font-medium s-text-element-900",
-                size === "sm" ? "s-text-sm" : "s-text-base"
-              )}
-            >
-              {label}
-            </div>
-            {actions && (
-              <div
-                className={classNames(
-                  "s-inline-block s-pl-5",
-                  areActionsFading
-                    ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
-                    : ""
-                )}
-              >
-                {actions}
-              </div>
-            )}
+            {actions}
           </div>
-        </div>
+        )}
       </div>
       {React.Children.count(childrenToRender) > 0 && (
-        <div className="s-pl-5">{childrenToRender}</div>
+        <div className="s-pl-2.5">{childrenToRender}</div>
       )}
     </>
   );

package/src/components/WindowUtility.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+
+// Define breakpoints
+export const breakpoints = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+};
+
+// Helper function to determine active breakpoint
+function getActiveBreakpoint(width: number): keyof typeof breakpoints {
+  if (width >= breakpoints.xxl) {
+    return "xxl";
+  }
+  if (width >= breakpoints.xl) {
+    return "xl";
+  }
+  if (width >= breakpoints.lg) {
+    return "lg";
+  }
+  if (width >= breakpoints.md) {
+    return "md";
+  }
+  if (width >= breakpoints.sm) {
+    return "sm";
+  }
+  return "xs";
+}
+
+
+interface WindowSizeState {
+  width: number | undefined;
+  height: number | undefined;
+  activeBreakpoint: keyof typeof breakpoints;
+}
+
+// Custom hook to get window size and active breakpoint
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSizeState>({
+    width: undefined,
+    height: undefined,
+    activeBreakpoint: "xs"
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      const width = window.innerWidth;
+      setWindowSize({
+        width,
+        height: window.innerHeight,
+        activeBreakpoint: getActiveBreakpoint(width),
+      });
+    }
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowSize;
+}
+
+export default useWindowSize;

package/src/icons/solid/ArrowDownS.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgArrowDownS = (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 16-6-6h12l-6 6Z" />
+  </svg>
+);
+export default SvgArrowDownS;

package/src/icons/solid/ArrowLeftS.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgArrowLeftS = (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="m8 12 6-6v12l-6-6Z" />
+  </svg>
+);
+export default SvgArrowLeftS;

package/src/icons/solid/ArrowRightS.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgArrowRightS = (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="m16 12-6 6V6l6 6Z" />
+  </svg>
+);
+export default SvgArrowRightS;

package/src/icons/solid/ArrowUpS.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgArrowUpS = (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 8 6 6H6l6-6Z" />
+  </svg>
+);
+export default SvgArrowUpS;

package/src/icons/solid/ChevronDoubleLeft.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgChevronDoubleLeft = (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 16.5 7.5 12 12 7.5l-2-2L3.5 12l6.5 6.5 2-2Z"
+    />
+    <path
+      fill="currentColor"
+      d="M19.5 16.5 15 12l4.5-4.5-2-2L11 12l6.5 6.5 2-2Z"
+    />
+  </svg>
+);
+export default SvgChevronDoubleLeft;

package/src/icons/solid/ChevronDoubleRight.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgChevronDoubleRight = (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 7.5 4.5 4.5-4.5 4.5 2 2 6.5-6.5L14 5.5l-2 2Z"
+    />
+    <path
+      fill="currentColor"
+      d="M4.5 7.5 9 12l-4.5 4.5 2 2L13 12 6.5 5.5l-2 2Z"
+    />
+  </svg>
+);
+export default SvgChevronDoubleRight;

package/src/icons/solid/Company.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgCompany = (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="M23 21h-3V2H4v19H1v2h22v-2ZM8 6h3v2H8V6Zm0 4h3v2H8v-2Zm0 4h3v2H8v-2Zm5 0h3v2h-3v-2Zm0-4h3v2h-3v-2Zm0-4h3v2h-3V6Zm-1 12h4v3h-4v-3Zm-4 0h2v3H8v-3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgCompany;

package/src/icons/solid/Filter.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgFilter = (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="M3 4h18v3H3V4Zm3 6.5h12v3H6v-3ZM9 17h6v3H9v-3Z"
+    />
+  </svg>
+);
+export default SvgFilter;

package/src/icons/solid/Heart.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgHeart = (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="M20.243 4.757a6 6 0 0 1 .236 8.236l-8.48 8.492-8.478-8.492a6 6 0 0 1 8.48-8.464 5.998 5.998 0 0 1 8.242.228Z"
+    />
+  </svg>
+);
+export default SvgHeart;

package/src/icons/solid/History.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgHistory = (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 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12h2a8 8 0 1 0 1.865-5.135L8 9H2V3l2.447 2.446A9.977 9.977 0 0 1 12 2Zm1 5v4.585l3.243 3.243-1.415 1.415L11 12.413V7h2Z"
+    />
+  </svg>
+);
+export default SvgHistory;

package/src/icons/solid/Home.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgHome = (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="M4 12v9h16v-9h3L12 2 1 12h3Zm14 7v-7H6v7h12Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgHome;

package/src/icons/solid/MarkPen.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgMarkPen = (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.95 2.39 5.657 5.657a1 1 0 0 1 0 1.414l-7.778 7.778-2.122.707-1.414 1.415a1 1 0 0 1-1.414 0l-4.243-4.243a1 1 0 0 1 0-1.414L6.05 12.29l.707-2.122 7.779-7.778a1 1 0 0 1 1.414 0Zm.707 3.536-6.364 6.364 1.414 1.414 6.364-6.364-1.414-1.414ZM4.283 16.886l2.828 2.828-1.414 1.415-4.243-1.415 2.829-2.828Z"
+    />
+  </svg>
+);
+export default SvgMarkPen;

package/src/icons/solid/Translate.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgTranslate = (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="m18.5 10 4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2ZM10 2v2h6v2h-1.968a18.221 18.221 0 0 1-3.62 6.301 14.865 14.865 0 0 0 2.335 1.707l-.75 1.878A17.016 17.016 0 0 1 9 13.725a16.677 16.677 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.031 16.031 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2Zm7.5 10.885L16.253 16h2.492L17.5 12.885Z"
+    />
+  </svg>
+);
+export default SvgTranslate;

package/src/icons/solid/index.ts

@@ -1,11 +1,15 @@
 export { default as ArrowDown } from "./ArrowDown";
 export { default as ArrowDownCircle } from "./ArrowDownCircle";
 export { default as ArrowDownOnSquare } from "./ArrowDownOnSquare";
+export { default as ArrowDownS } from "./ArrowDownS";
 export { default as ArrowLeft } from "./ArrowLeft";
+export { default as ArrowLeftS } from "./ArrowLeftS";
 export { default as ArrowPath } from "./ArrowPath";
 export { default as ArrowRight } from "./ArrowRight";
+export { default as ArrowRightS } from "./ArrowRightS";
 export { default as ArrowUp } from "./ArrowUp";
 export { default as ArrowUpOnSquare } from "./ArrowUpOnSquare";
+export { default as ArrowUpS } from "./ArrowUpS";
 export { default as Attachment } from "./Attachment";
 export { default as Backspace } from "./Backspace";
 export { default as Bookmark } from "./Bookmark";
@@ -18,6 +22,8 @@ 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 ChevronDoubleLeft } from "./ChevronDoubleLeft";
+export { default as ChevronDoubleRight } from "./ChevronDoubleRight";
 export { default as ChevronDown } from "./ChevronDown";
 export { default as ChevronLeft } from "./ChevronLeft";
 export { default as ChevronRight } from "./ChevronRight";
@@ -34,6 +40,7 @@ export { default as CloudX } from "./CloudX";
 export { default as Cog6Tooth } from "./Cog6Tooth";
 export { default as Command } from "./Command";
 export { default as CommandLine } from "./CommandLine";
+export { default as Company } from "./Company";
 export { default as Cube } from "./Cube";
 export { default as Dash } from "./Dash";
 export { default as Document } from "./Document";
@@ -48,6 +55,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 Filter } from "./Filter";
 export { default as Fire } from "./Fire";
 export { default as Flag } from "./Flag";
 export { default as Folder } from "./Folder";
@@ -58,8 +66,11 @@ export { default as GlobeAlt } from "./GlobeAlt";
 export { default as Grab } from "./Grab";
 export { default as HandThumbDown } from "./HandThumbDown";
 export { default as HandThumbUp } from "./HandThumbUp";
+export { default as Heart } from "./Heart";
 export { default as HeartAlt } from "./HeartAlt";
 export { default as Hexagon } from "./Hexagon";
+export { default as History } from "./History";
+export { default as Home } from "./Home";
 export { default as Image } from "./Image";
 export { default as InformationCircle } from "./InformationCircle";
 export { default as Key } from "./Key";
@@ -74,6 +85,7 @@ export { default as Login } from "./Login";
 export { default as Logout } from "./Logout";
 export { default as Magic } from "./Magic";
 export { default as MagnifyingGlass } from "./MagnifyingGlass";
+export { default as MarkPen } from "./MarkPen";
 export { default as Menu } from "./Menu";
 export { default as More } from "./More";
 export { default as MovingMail } from "./MovingMail";
@@ -106,6 +118,7 @@ export { default as Tag } from "./Tag";
 export { default as Template } from "./Template";
 export { default as TestTube } from "./TestTube";
 export { default as Time } from "./Time";
+export { default as Translate } from "./Translate";
 export { default as Trash } from "./Trash";
 export { default as Triangle } from "./Triangle";
 export { default as User } from "./User";
@@ -115,3 +128,4 @@ export { default as UserPlus } from "./UserPlus";
 export { default as Wrench } from "./Wrench";
 export { default as XCircle } from "./XCircle";
 export { default as XMark } from "./XMark";
+

package/src/icons/src/solid/arrow-down-s.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 16L6 10H18L12 16Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/arrow-left-s.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="M8 12L14 6V18L8 12Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/arrow-right-s.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="M16 12L10 18V6L16 12Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/arrow-up-s.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 8L18 14H6L12 8Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/chevron-double-left.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="M11.9999 16.5L7.4999 12L11.9999 7.5L9.9999 5.5L3.5 11.9997L9.9999 18.5L11.9999 16.5Z" fill="#020617"/>
+<path d="M19.4999 16.5L14.9999 12L19.4999 7.5L17.4999 5.5L11 11.9997L17.4999 18.5L19.4999 16.5Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/chevron-double-right.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="M12 7.5L16.5 12L12 16.5L14 18.5L20.4999 12.0003L14 5.5L12 7.5Z" fill="#020617"/>
+<path d="M4.49998 7.5L8.99998 12L4.49998 16.5L6.49998 18.5L12.9999 12.0003L6.49998 5.5L4.49998 7.5Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/company.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="M23 21H20V2H4V21H1V23H23V21ZM8 6H11V8H8V6ZM8 10H11V12H8V10ZM8 14H11V16H8V14ZM13 14H16V16H13V14ZM13 10H16V12H13V10ZM13 6H16V8H13V6ZM12 18H16V21H12V18ZM8 18H10V21H8V18Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/filter.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="M3 4H21V7H3V4ZM6 10.5H18V13.5H6V10.5ZM9 17H15V20H9V17Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/heart.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="M20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736Z" fill="#020617"/>
+</svg>

package/src/icons/src/solid/history.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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.53614 4 7.33243 5.11383 5.86492 6.86543L8 9H2V3L4.44656 5.44648C6.28002 3.33509 8.9841 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z" fill="#020617"/>
+</svg>