@dust-tt/sparkle 0.2.210 → 0.2.211

package/package.json

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

package/src/_index.ts

@@ -252,11 +252,15 @@ import {
   ArrowDown as ArrowDownIcon,
   ArrowDownCircle as ArrowDownCircleIcon,
   ArrowDownOnSquare as ArrowDownOnSquareIcon,
+  ArrowDownS as ArrowDownSIcon,
   ArrowLeft as ArrowLeftIcon,
+  ArrowLeftS as ArrowLeftSIcon,
   ArrowPath as ArrowPathIcon,
   ArrowRight as ArrowRightIcon,
+  ArrowRightS as ArrowRightSIcon,
   ArrowUp as ArrowUpIcon,
   ArrowUpOnSquare as ArrowUpOnSquareIcon,
+  ArrowUpS as ArrowUpSIcon,
   Attachment as AttachmentIcon,
   Backspace as BackspaceIcon,
   Bookmark as BookmarkIcon,
@@ -269,6 +273,8 @@ import {
   ChatBubbleThought as ChatBubbleThoughtIcon,
   Check as CheckIcon,
   CheckCircle as CheckCircleIcon,
+  ChevronDoubleLeft as ChevronDoubleLeftIcon,
+  ChevronDoubleRight as ChevronDoubleRightIcon,
   ChevronDown as ChevronDownIcon,
   ChevronLeft as ChevronLeftIcon,
   ChevronRight as ChevronRightIcon,
@@ -285,6 +291,7 @@ import {
   Cog6Tooth as Cog6ToothIcon,
   Command as CommandIcon,
   CommandLine as CommandLineIcon,
+  Company as CompanyIcon,
   Cube as CubeIcon,
   Dash as DashIcon,
   Document as DocumentIcon,
@@ -299,6 +306,7 @@ import {
   ExternalLink as ExternalLinkIcon,
   Eye as EyeIcon,
   EyeSlash as EyeSlashIcon,
+  Filter as FilterIcon,
   Fire as FireIcon,
   Flag as FlagIcon,
   Folder as FolderIcon,
@@ -309,8 +317,11 @@ import {
   Grab as GrabIcon,
   HandThumbDown as HandThumbDownIcon,
   HandThumbUp as HandThumbUpIcon,
+  Heart as HeartIcon,
   HeartAlt as HeartAltIcon,
   Hexagon as HexagonIcon,
+  History as HistoryIcon,
+  Home as HomeIcon,
   Image as ImageIcon,
   InformationCircle as InformationCircleIcon,
   Key as KeyIcon,
@@ -325,6 +336,7 @@ import {
   Logout as LogoutIcon,
   Magic as MagicIcon,
   MagnifyingGlass as MagnifyingGlassIcon,
+  MarkPen as MarkPenIcon,
   Menu as MenuIcon,
   More as MoreIcon,
   MovingMail as MovingMailIcon,
@@ -357,6 +369,7 @@ import {
   Template as TemplateIcon,
   TestTube as TestTubeIcon,
   Time as TimeIcon,
+  Translate as TranslateIcon,
   Trash as TrashIcon,
   Triangle as TriangleIcon,
   User as UserIcon,
@@ -372,11 +385,15 @@ export {
   ArrowDownCircleIcon,
   ArrowDownIcon,
   ArrowDownOnSquareIcon,
+  ArrowDownSIcon,
   ArrowLeftIcon,
+  ArrowLeftSIcon,
   ArrowPathIcon,
   ArrowRightIcon,
+  ArrowRightSIcon,
   ArrowUpIcon,
   ArrowUpOnSquareIcon,
+  ArrowUpSIcon,
   AttachmentIcon,
   BackspaceIcon,
   BookmarkIcon,
@@ -389,6 +406,8 @@ export {
   ChatBubbleThoughtIcon,
   CheckCircleIcon,
   CheckIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -405,6 +424,7 @@ export {
   Cog6ToothIcon,
   CommandIcon,
   CommandLineIcon,
+  CompanyIcon,
   CubeIcon,
   DashIcon,
   DocumentDuplicateIcon,
@@ -419,6 +439,7 @@ export {
   ExternalLinkIcon,
   EyeIcon,
   EyeSlashIcon,
+  FilterIcon,
   FireIcon,
   FlagIcon,
   FolderIcon,
@@ -430,7 +451,10 @@ export {
   HandThumbDownIcon,
   HandThumbUpIcon,
   HeartAltIcon,
+  HeartIcon,
   HexagonIcon,
+  HistoryIcon,
+  HomeIcon,
   ImageIcon,
   InformationCircleIcon,
   KeyIcon,
@@ -445,6 +469,7 @@ export {
   LogoutIcon,
   MagicIcon,
   MagnifyingGlassIcon,
+  MarkPenIcon,
   MenuIcon,
   MoreIcon,
   MovingMailIcon,
@@ -477,6 +502,7 @@ export {
   TemplateIcon,
   TestTubeIcon,
   TimeIcon,
+  TranslateIcon,
   TrashIcon,
   TriangleIcon,
   UserArrowIcon,
@@ -492,11 +518,15 @@ import {
   ArrowDown as ArrowDownStrokeIcon,
   ArrowDownCircle as ArrowDownCircleStrokeIcon,
   ArrowDownOnSquare as ArrowDownOnSquareStrokeIcon,
+  ArrowDownS as ArrowDownSStrokeIcon,
   ArrowLeft as ArrowLeftStrokeIcon,
+  ArrowLeftS as ArrowLeftSStrokeIcon,
   ArrowPath as ArrowPathStrokeIcon,
   ArrowRight as ArrowRightStrokeIcon,
+  ArrowRightS as ArrowRightSStrokeIcon,
   ArrowUp as ArrowUpStrokeIcon,
   ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon,
+  ArrowUpS as ArrowUpSStrokeIcon,
   Attachment as AttachmentStrokeIcon,
   Backspace as BackspaceStrokeIcon,
   Bookmark as BookmarkStrokeIcon,
@@ -509,6 +539,8 @@ import {
   ChatBubbleThought as ChatBubbleThoughtStrokeIcon,
   Check as CheckStrokeIcon,
   CheckCircle as CheckCircleStrokeIcon,
+  ChevronDoubleLeft as ChevronDoubleLeftStrokeIcon,
+  ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
   ChevronDown as ChevronDownStrokeIcon,
   ChevronLeft as ChevronLeftStrokeIcon,
   ChevronRight as ChevronRightStrokeIcon,
@@ -525,6 +557,7 @@ import {
   Cog6Tooth as Cog6ToothStrokeIcon,
   Command as CommandStrokeIcon,
   CommandLine as CommandLineStrokeIcon,
+  Company as CompanyStrokeIcon,
   Cube as CubeStrokeIcon,
   Dash as DashStrokeIcon,
   Document as DocumentStrokeIcon,
@@ -539,6 +572,7 @@ import {
   ExternalLink as ExternalLinkStrokeIcon,
   Eye as EyeStrokeIcon,
   EyeSlash as EyeSlashStrokeIcon,
+  Filter as FilterStrokeIcon,
   Fire as FireStrokeIcon,
   Flag as FlagStrokeIcon,
   Folder as FolderStrokeIcon,
@@ -549,8 +583,11 @@ import {
   Grab as GrabStrokeIcon,
   HandThumbDown as HandThumbDownStrokeIcon,
   HandThumbUp as HandThumbUpStrokeIcon,
+  Heart as HeartStrokeIcon,
   HeartAlt as HeartAltStrokeIcon,
   Hexagon as HexagonStrokeIcon,
+  History as HistoryStrokeIcon,
+  Home as HomeStrokeIcon,
   Image as ImageStrokeIcon,
   InformationCircle as InformationCircleStrokeIcon,
   Key as KeyStrokeIcon,
@@ -565,6 +602,7 @@ import {
   Logout as LogoutStrokeIcon,
   Magic as MagicStrokeIcon,
   MagnifyingGlass as MagnifyingGlassStrokeIcon,
+  MarkPen as MarkPenStrokeIcon,
   Menu as MenuStrokeIcon,
   More as MoreStrokeIcon,
   MovingMail as MovingMailStrokeIcon,
@@ -597,6 +635,7 @@ import {
   Template as TemplateStrokeIcon,
   TestTube as TestTubeStrokeIcon,
   Time as TimeStrokeIcon,
+  Translate as TranslateStrokeIcon,
   Trash as TrashStrokeIcon,
   Triangle as TriangleStrokeIcon,
   User as UserStrokeIcon,
@@ -611,11 +650,15 @@ import {
 export {
   ArrowDownCircleStrokeIcon,
   ArrowDownOnSquareStrokeIcon,
+  ArrowDownSStrokeIcon,
   ArrowDownStrokeIcon,
+  ArrowLeftSStrokeIcon,
   ArrowLeftStrokeIcon,
   ArrowPathStrokeIcon,
+  ArrowRightSStrokeIcon,
   ArrowRightStrokeIcon,
   ArrowUpOnSquareStrokeIcon,
+  ArrowUpSStrokeIcon,
   ArrowUpStrokeIcon,
   AttachmentStrokeIcon,
   BackspaceStrokeIcon,
@@ -629,6 +672,8 @@ export {
   ChatBubbleThoughtStrokeIcon,
   CheckCircleStrokeIcon,
   CheckStrokeIcon,
+  ChevronDoubleLeftStrokeIcon,
+  ChevronDoubleRightStrokeIcon,
   ChevronDownStrokeIcon,
   ChevronLeftStrokeIcon,
   ChevronRightStrokeIcon,
@@ -645,6 +690,7 @@ export {
   Cog6ToothStrokeIcon,
   CommandLineStrokeIcon,
   CommandStrokeIcon,
+  CompanyStrokeIcon,
   CubeStrokeIcon,
   DashStrokeIcon,
   DocumentDuplicateStrokeIcon,
@@ -659,6 +705,7 @@ export {
   ExternalLinkStrokeIcon,
   EyeSlashStrokeIcon,
   EyeStrokeIcon,
+  FilterStrokeIcon,
   FireStrokeIcon,
   FlagStrokeIcon,
   FolderOpenStrokeIcon,
@@ -670,7 +717,10 @@ export {
   HandThumbDownStrokeIcon,
   HandThumbUpStrokeIcon,
   HeartAltStrokeIcon,
+  HeartStrokeIcon,
   HexagonStrokeIcon,
+  HistoryStrokeIcon,
+  HomeStrokeIcon,
   ImageStrokeIcon,
   InformationCircleStrokeIcon,
   KeyStrokeIcon,
@@ -685,6 +735,7 @@ export {
   LogoutStrokeIcon,
   MagicStrokeIcon,
   MagnifyingGlassStrokeIcon,
+  MarkPenStrokeIcon,
   MenuStrokeIcon,
   MoreStrokeIcon,
   MovingMailStrokeIcon,
@@ -717,6 +768,7 @@ export {
   TemplateStrokeIcon,
   TestTubeStrokeIcon,
   TimeStrokeIcon,
+  TranslateStrokeIcon,
   TrashStrokeIcon,
   TriangleStrokeIcon,
   UserArrowStrokeIcon,

package/src/components/Checkbox.tsx

@@ -7,23 +7,42 @@ import { Icon } from "./Icon";
 
 export interface CheckboxProps {
   variant?: "selectable" | "checkable";
-  checked: boolean;
+  size?: "xs" | "sm";
+  checked?: "checked" | "unchecked" | "partial";
   disabled?: boolean;
-  partialChecked?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
 }
 
 export function Checkbox({
   variant = "selectable",
-  checked,
+  checked = "unchecked",
+  size = "sm",
   onChange,
   className = "",
   disabled,
-  partialChecked,
 }: CheckboxProps) {
+  let isChecked: boolean;
+  let isPartialChecked: boolean;
+  switch (checked) {
+    case "checked":
+      isChecked = true;
+      isPartialChecked = false;
+      break;
+    case "unchecked":
+      isChecked = false;
+      isPartialChecked = false;
+      break;
+    case "partial":
+      isChecked = true;
+      isPartialChecked = true;
+      break;
+    default:
+      throw new Error("Invalid checked prop");
+  }
+
   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",
+    base: "s-border s-justify-center 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:s-text-white/100",
@@ -37,6 +56,11 @@ export function Checkbox({
     },
   };
 
+  const baseSizeClasses = {
+    xs: "s-w-4 s-h-4 s-rounded",
+    sm: "s-w-5 s-h-5 s-rounded-md",
+  };
+
   const checkedIndicatorClasses = {
     base: "s-transition s-duration-300 s-ease-in-out",
     selected: "s-opacity-100 s-bg-action-500 dark:s-bg-action-500-dark",
@@ -45,9 +69,15 @@ export function Checkbox({
     disabled: "s-opacity-100 s-bg-element-500 dark:s-bg-element-500-dark",
   };
 
+  const sizeStyles = {
+    xs: { width: "12px", height: "12px", borderRadius: "2px" },
+    sm: { width: "14px", height: "14px", borderRadius: "3px" },
+  };
+
   const combinedBaseClasses = classNames(
     baseStyleClasses.base,
-    checked || partialChecked ? "s-text-white" : "s-text-white/0",
+    baseSizeClasses[size],
+    isChecked || isPartialChecked ? "s-text-white" : "s-text-white/0",
     disabled ? baseStyleClasses.disabled : baseStyleClasses.idle,
     !disabled ? baseStyleClasses.hover : "",
     disabled ? baseStyleClasses.dark.disabled : baseStyleClasses.dark.base,
@@ -58,18 +88,18 @@ export function Checkbox({
   const combinedCheckedIndicatorClasses = classNames(
     checkedIndicatorClasses.base,
     disabled ? checkedIndicatorClasses.disabled : "",
-    checked && !partialChecked && !disabled
+    isChecked && !isPartialChecked && !disabled
       ? checkedIndicatorClasses.selected
       : "",
-    partialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
-    !checked && !disabled ? checkedIndicatorClasses.unselected : ""
+    isPartialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
+    !isChecked && !disabled ? checkedIndicatorClasses.unselected : ""
   );
 
   return (
     <label>
       <input
         type="checkbox"
-        checked={checked}
+        checked={isChecked}
         onChange={(e) => onChange && onChange(e.target.checked)}
         className="s-hidden"
         disabled={disabled}
@@ -77,11 +107,11 @@ export function Checkbox({
       <div className={classNames(combinedBaseClasses, "s-relative")}>
         <div
           className={combinedCheckedIndicatorClasses}
-          style={{ width: "14px", height: "14px", borderRadius: "3px" }}
+          style={sizeStyles[size]}
         />
         {variant === "checkable" && (
           <div className="s-absolute">
-            <Icon visual={partialChecked ? Dash : Check} size="xs" />
+            <Icon visual={isPartialChecked ? Dash : Check} size="xs" />
           </div>
         )}
       </div>

package/src/components/Item.tsx

@@ -74,7 +74,7 @@ export function Item({
   disabled = false,
   className = "",
   href,
-  target
+  target,
 }: ItemProps) {
   const { components } = React.useContext(SparkleContext);
 

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,40 @@ import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
 
 export interface TreeProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   isBoxed?: boolean;
   isLoading?: boolean;
+  tailwindIconTextColor?: string;
+  variant?: "navigator" | "finder";
 }
 
-export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
+export function Tree({
+  children,
+  isLoading,
+  isBoxed = false,
+  tailwindIconTextColor,
+  variant = "finder",
+}: TreeProps) {
+  const modifiedChildren = React.Children.map(children, (child) => {
+    // /!\ Limitation: This stops on the first invalid element.
+    // Meaning that if Tree.Item is not the first child, it will not work.
+    if (React.isValidElement<TreeItemProps>(child)) {
+      // Clone the child element and pass the necessary props
+      const childProps: Partial<TreeItemProps> = {};
+
+      if (variant === "navigator") {
+        childProps.isNavigatable = true;
+      }
+
+      if (tailwindIconTextColor) {
+        childProps.tailwindIconTextColor = tailwindIconTextColor;
+      }
+
+      return React.cloneElement(child, childProps);
+    }
+    return child;
+  });
+
   return isLoading ? (
     <div className="s-py-2 s-pl-4">
       <Spinner size="xs" variant="dark" />
@@ -29,28 +51,21 @@ export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
       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"
+          ? "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4"
           : ""
       )}
     >
-      {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;
+  tailwindIconTextColor?: string;
+  visual?: ComponentType<{ className?: string }>;
   checkbox?: CheckboxProps;
   onChevronClick?: () => void;
   collapsed?: boolean;
@@ -58,6 +73,7 @@ interface TreeItemProps {
   className?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
+  isNavigatable?: boolean;
   isSelected?: boolean;
   onItemClick?: () => void;
 }
@@ -76,8 +92,8 @@ Tree.Item = function ({
   label,
   type = "node",
   className = "",
-  variant = "file",
   size = "sm",
+  tailwindIconTextColor = "s-text-element-600",
   visual,
   checkbox,
   onChevronClick,
@@ -87,6 +103,7 @@ Tree.Item = function ({
   areActionsFading = true,
   renderTreeItems,
   children,
+  isNavigatable = false,
   isSelected = false,
   onItemClick,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
@@ -111,16 +128,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 +164,10 @@ Tree.Item = function ({
           <IconButton
             icon={
               childrenToRender && !effectiveCollapsed
-                ? ChevronDownIcon
-                : ChevronRightIcon
+                ? ArrowDownSIcon
+                : ArrowRightSIcon
             }
-            size="sm"
+            size="xs"
             variant="secondary"
             onClick={(e) => {
               e.stopPropagation();
@@ -143,50 +178,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={classNames("s-flex-shrink-0", tailwindIconTextColor)}
+        />
+
+        <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

@@ -30,7 +30,6 @@ function getActiveBreakpoint(width: number): keyof typeof breakpoints {
   return "xs";
 }
 
-
 interface WindowSizeState {
   width: number | undefined;
   height: number | undefined;
@@ -42,7 +41,7 @@ export function useWindowSize() {
   const [windowSize, setWindowSize] = useState<WindowSizeState>({
     width: undefined,
     height: undefined,
-    activeBreakpoint: "xs"
+    activeBreakpoint: "xs",
   });
 
   useEffect(() => {

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;