@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/src/components/SearchModal.tsx

@@ -1,320 +0,0 @@
-import { Dialog, DialogBody } from "@material-tailwind/react";
-import { useEffect, useRef, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
-import { useMediaQuery } from "@uidotdev/usehooks";
-import { cn } from "../utils/cn";
-
-export const formatDateReport = (date: string | Date) => {
-  const formattedDate = new Date(date);
-  return formattedDate.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
-};
-
-const highlightText = (text: string, searchTerm: string) => {
-  if (!searchTerm) return text;
-
-  const regex = new RegExp(`(\\b${searchTerm}\\b)`, "gi");
-  const parts = text.split(regex);
-  const firstMatchIndex = parts.findIndex((part) => regex.test(part));
-
-  if (firstMatchIndex === -1) return text;
-
-  if (firstMatchIndex === 0) {
-    return parts.map((part, i) =>
-      regex.test(part) ? (
-        <span key={i} className="text-gray-900 font-medium">
-          {part}
-        </span>
-      ) : (
-        part
-      ),
-    );
-  }
-
-  const matchedPart = parts[firstMatchIndex];
-  const beforeMatch = parts.slice(0, firstMatchIndex).join("");
-  const afterMatch = parts.slice(firstMatchIndex + 1).join("");
-
-  return (
-    <>
-      <span key="match" className="text-gray-900 font-medium">
-        {beforeMatch && <>...</>}
-        {matchedPart}
-      </span>
-      {afterMatch && <span key="after"> {afterMatch}</span>}
-    </>
-  );
-};
-
-export interface SearchItem {
-  id: string;
-  title: string;
-  subtitle?: string;
-  icon?: React.ReactNode;
-  metadata?: Record<string, any>;
-}
-
-export interface SearchModalProps {
-  open: boolean;
-  onClose: () => void;
-  items?: SearchItem[];
-  loading?: boolean;
-  placeholder?: string;
-  onSearch?: (query: string) => void;
-  onSelect?: (item: SearchItem) => void;
-  filterOptions?: string[];
-  selectedFilter?: string;
-  onFilterChange?: (filter: string) => void;
-  recentlyViewedLabel?: string;
-  noResultsText?: string;
-}
-
-const SearchFilters = ({
-  filters,
-  selected,
-  onChange,
-}: {
-  filters: string[];
-  selected: string;
-  onChange: (filter: string) => void;
-}) => {
-  return (
-    <div className="flex gap-2 px-2">
-      {filters.map((filter) => (
-        <button
-          key={filter}
-          onClick={() => onChange(filter)}
-          className={cn(
-            "px-3 py-1 text-sm rounded-full transition-colors",
-            selected === filter
-              ? "bg-brand-600 text-white"
-              : "bg-gray-100 text-gray-600 hover:bg-gray-200",
-          )}
-        >
-          {filter}
-        </button>
-      ))}
-    </div>
-  );
-};
-
-const SearchSkeleton = () => {
-  return (
-    <div className="p-4 flex flex-col gap-[6px]">
-      {[...Array(8)].map((_, i) => (
-        <div key={i} className="flex items-center gap-3 animate-pulse py-2">
-          <div className="size-3 bg-gray-100 rounded-full" />
-          <div className={cn(i % 2 === 0 ? "w-[250px]" : "w-[320px]","h-3 bg-gray-100 rounded-full")} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const SearchItemComponent = ({
-  item,
-  isActive,
-  onClick,
-  searchTerm,
-}: {
-  item: SearchItem;
-  isActive: boolean;
-  onClick: () => void;
-  searchTerm: string;
-}) => {
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        "flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors",
-        isActive ? "bg-gray-100" : "hover:bg-gray-50",
-      )}
-    >
-      {item.icon && <div className="shrink-0 text-gray-600">{item.icon}</div>}
-      <div className="flex-1 min-w-0">
-        <div className="text-sm font-medium text-gray-900 truncate">
-          {item.title}
-        </div>
-        {item.subtitle && (
-          <div className="text-sm text-gray-600 truncate">
-            {typeof item.subtitle === "string"
-              ? highlightText(item.subtitle, searchTerm)
-              : item.subtitle}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const SearchModal = ({
-  open,
-  onClose,
-  items = [],
-  loading = false,
-  placeholder = "Search...",
-  onSearch,
-  onSelect,
-  filterOptions = [],
-  selectedFilter = "All",
-  onFilterChange,
-  recentlyViewedLabel = "Recently viewed",
-  noResultsText = "No results found.",
-}: SearchModalProps) => {
-  const [searchValue, setSearchValue] = useState("");
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const isMobile = useMediaQuery("only screen and (max-width: 768px)");
-  const itemRefs = useRef<HTMLDivElement[]>([]);
-
-  useEffect(() => {
-    itemRefs.current = itemRefs.current.slice(0, items.length);
-  }, [items]);
-
-  useEffect(() => {
-    if (activeIndex > items.length) {
-      setActiveIndex(-1);
-    }
-  }, [items, activeIndex]);
-
-  useEffect(() => {
-    const currentItem = itemRefs.current[activeIndex];
-    currentItem?.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-    });
-  }, [activeIndex]);
-
-  useHotkeys(
-    "ArrowUp",
-    () => {
-      if (items.length === 0) return;
-      setActiveIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));
-    },
-    {
-      preventDefault: true,
-      enableOnFormTags: true,
-      enabled: open,
-    },
-  );
-
-  useHotkeys(
-    "ArrowDown",
-    () => {
-      if (items.length === 0) return;
-      setActiveIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));
-    },
-    {
-      preventDefault: true,
-      enableOnFormTags: true,
-      enabled: open,
-    },
-  );
-
-  useHotkeys(
-    "Enter",
-    () => {
-      if (activeIndex >= 0 && activeIndex < items.length) {
-        handleItemSelect(items[activeIndex]);
-      }
-    },
-    {
-      enableOnFormTags: true,
-      preventDefault: true,
-      enabled: open,
-    },
-  );
-
-  const handleSearchChange = (value: string) => {
-    setSearchValue(value);
-    onSearch?.(value);
-  };
-
-  const handleItemSelect = (item: SearchItem) => {
-    onSelect?.(item);
-    handleClose();
-  };
-
-  const handleClose = () => {
-    setSearchValue("");
-    setActiveIndex(-1);
-    onClose();
-  };
-
-  const showFilters = filterOptions.length > 0 && searchValue;
-  const showRecentlyViewed = !searchValue && items.length > 0;
-
-  return (
-    <Dialog
-      open={open}
-      size="lg"
-      handler={handleClose}
-      className={cn(
-        isMobile && "w-screen m-0",
-        "focus:outline-none 2xl:min-w-px",
-      )}
-    >
-      <DialogBody className="relative px-0 py-2">
-        <div>
-          <div className="border-b border-b-gray-100 px-6 pb-2">
-            <input
-              type="text"
-              placeholder={placeholder}
-              value={searchValue}
-              onChange={(e) => handleSearchChange(e.target.value)}
-              className="w-full bg-transparent p-2 px-0 text-sm font-medium text-gray-600 placeholder-gray-400 outline-none focus:outline-none"
-            />
-          </div>
-
-          {loading ? (
-            <SearchSkeleton />
-          ) : (
-            <div className="p-4 flex flex-col gap-2">
-              {showRecentlyViewed && (
-                <p className="text-sm font-normal text-gray-600 px-2">
-                  {recentlyViewedLabel}
-                </p>
-              )}
-
-              {showFilters && (
-                <SearchFilters
-                  filters={filterOptions}
-                  selected={selectedFilter}
-                  onChange={(filter) => onFilterChange?.(filter)}
-                />
-              )}
-
-              <div className="overflow-y-auto max-h-[320px]" tabIndex={0}>
-                {items.map((item, index) => (
-                  <div
-                    key={item.id}
-                    ref={(el) => {
-                      if (el) itemRefs.current[index] = el;
-                    }}
-                  >
-                    <SearchItemComponent
-                      item={item}
-                      isActive={activeIndex === index}
-                      onClick={() => handleItemSelect(item)}
-                      searchTerm={searchValue}
-                    />
-                  </div>
-                ))}
-
-                {!loading && items.length === 0 && (
-                  <div className="text-sm text-gray-900 font-medium">
-                    {noResultsText}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </DialogBody>
-    </Dialog>
-  );
-};
-
-export default SearchModal;

package/src/components/Sidebar/Button.tsx

@@ -1,20 +0,0 @@
-import { useContext, type ReactNode } from "react";
-import { collapsedContext } from "./Provider";
-
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode;
-  icon?: ReactNode;
-}
-
-export const Button = ({ icon, children, ...props }: ButtonProps) => {
-  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
-
-  return (
-    <button
-      className="flex items-center gap-2 w-full hover:bg-gray-100 text-caption-1-em text-gray-600 hover:text-gray-900 h-[38px] rounded-lg px-2"
-      {...props}
-    >
-      {icon} {(!isCollapsed || isHovered) && children}
-    </button>
-  );
-};

package/src/components/Sidebar/Container.tsx

@@ -1,31 +0,0 @@
-import { useContext, type ReactNode } from "react"
-import { cn } from "../../utils/cn"
-import { collapsedContext } from "./Provider"
-
-export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode
-}
-
-export const Container = ({
-  className,
-  children,
-  ...props
-}: ContainerProps) => {
-  const { isCollapsed, isHovered, setIsHovered } = useContext(collapsedContext)!
-
-  return (
-    <div
-      className={cn(
-        className,
-        isCollapsed && "shadow-lg rounded-lg",
-        isCollapsed && !isHovered ? "w-auto" : "w-[280px]",
-        "bg-gray-50 p-2 flex flex-col justify-between items-center rounded-tr-lg rounded-br-lg"
-      )}
-      onMouseEnter={() => isCollapsed && setIsHovered(true)}
-      onMouseLeave={() => isCollapsed && setIsHovered(false)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/Sidebar/Item.tsx

@@ -1,39 +0,0 @@
-import { useContext, type ReactNode } from "react";
-import { cn } from "../../utils/cn";
-import { collapsedContext } from "./Provider";
-
-interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  icon?: ReactNode;
-  isActive?: boolean;
-  trailing?: ReactNode;
-}
-
-export const Item = ({
-  children,
-  className,
-  icon,
-  isActive,
-  trailing,
-  ...props
-}: ItemProps) => {
-  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
-
-  return (
-    <div
-      className={cn(
-        isActive ? "!text-gray-900" : "!text-gray-600",
-        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg px-2 cursor-pointer group",
-        className,
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2">
-        {icon}
-        {(!isCollapsed || isHovered) && children}
-      </div>
-
-      {(!isCollapsed || isHovered) && trailing}
-    </div>
-  );
-};

package/src/components/Sidebar/Layout.tsx

@@ -1,32 +0,0 @@
-import { Provider } from "./Provider"
-import { Container, type ContainerProps } from "./Container"
-import { ReactNode } from "react"
-import { SideContainer } from "./SideContainer"
-
-interface LayoutProps extends ContainerProps {
-  isCollapsed?: boolean
-  sideContainer?: ReactNode
-  sideClassName?: string
-  onSwitchLayout?: (isCollapsed: boolean) => void
-}
-
-export const Layout = ({
-  className,
-  children,
-  isCollapsed,
-  sideContainer,
-  sideClassName,
-  onSwitchLayout,
-  ...props
-}: LayoutProps) => {
-  return (
-    <Provider isCollapsed={isCollapsed} onSwitchLayout={onSwitchLayout}>
-      {sideContainer && (
-        <SideContainer className={sideClassName}>{sideContainer}</SideContainer>
-      )}
-      <Container className={className} {...props}>
-        {children}
-      </Container>
-    </Provider>
-  )
-}

package/src/components/Sidebar/Provider.tsx

@@ -1,47 +0,0 @@
-import { createContext, useState, type ReactNode } from "react";
-
-export const collapsedContext = createContext<
-  | {
-      isCollapsed: boolean;
-      toggleCollapsed: () => void;
-      isHovered: boolean;
-      setIsHovered: (value: boolean) => void;
-    }
-  | undefined
->(undefined);
-
-interface ProviderProps {
-  children: ReactNode;
-  isCollapsed?: boolean;
-  onSwitchLayout?: (isCollapsed: boolean) => void;
-}
-
-export const Provider = ({
-  children,
-  isCollapsed: controlledIsCollapsed,
-  onSwitchLayout,
-}: ProviderProps) => {
-  const [internalIsCollapsed, setInternalIsCollapsed] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const isCollapsed =
-    controlledIsCollapsed !== undefined
-      ? controlledIsCollapsed
-      : internalIsCollapsed;
-
-  const toggleCollapsed = (value?: boolean) => {
-    const newValue = value ?? !isCollapsed;
-    if (controlledIsCollapsed === undefined) {
-      setInternalIsCollapsed(newValue);
-    }
-    onSwitchLayout?.(newValue);
-  };
-
-  return (
-    <collapsedContext.Provider
-      value={{ isCollapsed, toggleCollapsed, isHovered, setIsHovered }}
-    >
-      {children}
-    </collapsedContext.Provider>
-  );
-};

package/src/components/Sidebar/SecondaryItem.tsx

@@ -1,39 +0,0 @@
-import { useContext, type ReactNode } from "react";
-import { cn } from "../../utils/cn";
-import { collapsedContext } from "./Provider";
-
-interface SecondaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  icon?: ReactNode;
-  isActive?: boolean;
-  trailing?: ReactNode;
-}
-
-export const SecondaryItem = ({
-  children,
-  className,
-  isActive,
-  trailing,
-  icon,
-  ...props
-}: SecondaryItemProps) => {
-  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
-
-  return (
-    <div
-      className={cn(
-        isActive ? "!text-gray-900" : "!text-gray-600",
-        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg pr-2 pl-3 cursor-pointer group text-sm",
-        className,
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2 overflow-auto">
-        {(!isCollapsed || isHovered) && icon}{" "}
-        {(!isCollapsed || isHovered) && children}
-      </div>
-
-      {(!isCollapsed || isHovered) && trailing}
-    </div>
-  );
-};

package/src/components/Sidebar/SideContainer.tsx

@@ -1,31 +0,0 @@
-import { useContext, type ReactNode } from "react"
-import { cn } from "../../utils/cn"
-import { collapsedContext } from "./Provider"
-
-export interface SideContainerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode
-}
-
-export const SideContainer = ({
-  className,
-  children,
-  ...props
-}: SideContainerProps) => {
-  const { isCollapsed, setIsHovered } = useContext(collapsedContext)!
-
-  return (
-    <div
-      className={cn(
-        className,
-        isCollapsed && "!hidden",
-        "p-2 flex flex-col gap-2 items-center rounded-tl-lg rounded-bl-lg w-16"
-      )}
-      onMouseEnter={() => isCollapsed && setIsHovered(true)}
-      onMouseLeave={() => isCollapsed && setIsHovered(false)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/Sidebar/ToggleCollapseButton.tsx

@@ -1,24 +0,0 @@
-import { useContext } from "react";
-import { IconButton } from "@material-tailwind/react";
-import { collapsedContext } from "./Provider";
-import CloseSidebarIcon from "../icons/CloseSidebarIcon";
-import CloseSidebarMidIcon from "../icons/CloseSidebarMidIcon";
-
-export const ToggleCollapseButton = () => {
-  const { isCollapsed, isHovered, toggleCollapsed } =
-    useContext(collapsedContext)!;
-
-  if (isCollapsed && !isHovered) {
-    return null;
-  }
-
-  return (
-    <IconButton variant="text" color="gray" onClick={() => toggleCollapsed()}>
-      {isCollapsed ? (
-        <CloseSidebarIcon className="size-4" />
-      ) : (
-        <CloseSidebarMidIcon className="size-4" />
-      )}
-    </IconButton>
-  );
-};

package/src/components/Sidebar/index.ts

@@ -1,8 +0,0 @@
-export { Provider } from "./Provider"
-export { Container } from "./Container"
-export { SideContainer } from "./SideContainer"
-export { Layout } from "./Layout"
-export { Button } from "./Button"
-export { ToggleCollapseButton } from "./ToggleCollapseButton"
-export { Item } from "./Item"
-export { SecondaryItem } from "./SecondaryItem"

package/src/components/icons/CloseSidebarIcon.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-
-export default function CloseSidebarIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M13 1C14.6569 1 16 2.34315 16 4V12L15.9961 12.1543C15.9158 13.7394 14.6051 15 13 15H3L2.8457 14.9961C1.31166 14.9184 0.0816253 13.6883 0.00390625 12.1543L0 12V4C1.28853e-07 2.34315 1.34315 1 3 1H13ZM3 2.5C2.17157 2.5 1.5 3.17157 1.5 4V12C1.5 12.8284 2.17157 13.5 3 13.5H13C13.8284 13.5 14.5 12.8284 14.5 12V4C14.5 3.17157 13.8284 2.5 13 2.5H3ZM3.75 3.5C4.16421 3.5 4.5 3.83579 4.5 4.25V11.75C4.5 12.1642 4.16421 12.5 3.75 12.5C3.33579 12.5 3 12.1642 3 11.75V4.25C3 3.83579 3.33579 3.5 3.75 3.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}

package/src/components/icons/CloseSidebarMidIcon.tsx

@@ -1,19 +0,0 @@
-export default function CloseSidebarMidIcon(
-  props: React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M13 1C14.6569 1 16 2.34315 16 4V12L15.9961 12.1543C15.9158 13.7394 14.6051 15 13 15H3L2.8457 14.9961C1.31166 14.9184 0.0816253 13.6883 0.00390625 12.1543L0 12V4C1.28853e-07 2.34315 1.34315 1 3 1H13ZM3 2.5C2.17157 2.5 1.5 3.17157 1.5 4V12C1.5 12.8284 2.17157 13.5 3 13.5H13C13.8284 13.5 14.5 12.8284 14.5 12V4C14.5 3.17157 13.8284 2.5 13 2.5H3ZM7.5 4C7.77614 4 8 4.22386 8 4.5V11.5C8 11.7761 7.77614 12 7.5 12H3.5C3.22386 12 3 11.7761 3 11.5V4.5C3 4.22386 3.22386 4 3.5 4H7.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}

package/src/components/icons/ExpandIcon.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-const ExpandIcon = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M2.25 5.5C2.66421 5.5 3 5.83579 3 6.25C3 6.66421 2.66421 7 2.25 7H2C1.72386 7 1.5 7.22386 1.5 7.5V13.5C1.5 13.7761 1.72386 14 2 14H8C8.27614 14 8.5 13.7761 8.5 13.5V13.25C8.5 12.8358 8.83579 12.5 9.25 12.5C9.66421 12.5 10 12.8358 10 13.25V13.5C10 14.5357 9.21278 15.387 8.2041 15.4893L8 15.5H2L1.7959 15.4893C0.854346 15.3938 0.1062 14.6457 0.0107422 13.7041L0 13.5V7.5C0 6.39543 0.895431 5.5 2 5.5H2.25ZM13.75 0C14.7165 1.28853e-07 15.5 0.783502 15.5 1.75V9.75C15.5 10.7165 14.7165 11.5 13.75 11.5H5.75C4.7835 11.5 4 10.7165 4 9.75V1.75C4 0.783502 4.7835 8.0532e-09 5.75 0H13.75ZM5.75 1.5C5.61193 1.5 5.5 1.61193 5.5 1.75V9.75C5.5 9.88807 5.61193 10 5.75 10H13.75C13.8881 10 14 9.88807 14 9.75V1.75C14 1.61193 13.8881 1.5 13.75 1.5H5.75ZM11.75 3C11.795 3 11.839 3.00413 11.8818 3.01172C11.8874 3.0127 11.8929 3.01354 11.8984 3.01465C11.9118 3.01733 11.9244 3.02298 11.9375 3.02637C11.9707 3.03495 12.0041 3.04344 12.0361 3.05664C12.0653 3.06868 12.092 3.08512 12.1191 3.10059C12.1763 3.1331 12.2316 3.171 12.2803 3.21973C12.3287 3.26812 12.366 3.3232 12.3984 3.37988C12.414 3.40703 12.4303 3.43375 12.4424 3.46289C12.4631 3.51289 12.4779 3.56459 12.4873 3.61719C12.495 3.66035 12.5 3.70462 12.5 3.75V7.75C12.5 8.16421 12.1642 8.5 11.75 8.5C11.3358 8.5 11 8.16421 11 7.75V5.56055L8.28027 8.28027C7.98738 8.57317 7.51262 8.57317 7.21973 8.28027C6.92683 7.98738 6.92683 7.51262 7.21973 7.21973L9.93945 4.5H7.75C7.33579 4.5 7 4.16421 7 3.75C7 3.33579 7.33579 3 7.75 3H11.75Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default ExpandIcon;

package/src/components/icons/SendArrowIcon.tsx

@@ -1,23 +0,0 @@
-export default function SendArrowIcon({ className = "", size = "1em" }) {
-  return (
-    <svg
-      width="24"
-      height="25"
-      viewBox="0 0 24 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        d="M12.001 7.7395C12.2367 7.73978 12.4591 7.85076 12.6006 8.03931L15.376 11.7395C15.5459 11.9666 15.5731 12.2708 15.4463 12.5247C15.3193 12.7785 15.0592 12.9395 14.7754 12.9397H12.75V17.2766C12.7499 17.6907 12.4142 18.0266 12 18.0266C11.5858 18.0266 11.2501 17.6907 11.25 17.2766V12.9397H9.22559C8.94169 12.9397 8.68182 12.7785 8.55469 12.5247C8.42778 12.2706 8.45558 11.9667 8.62598 11.7395L11.4004 8.03931L11.457 7.97192C11.5977 7.82422 11.7945 7.7395 12.001 7.7395Z"
-        fill="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M12 2.65161C17.5228 2.65161 22 7.12876 22 12.6516C22 18.1744 17.5228 22.6516 12 22.6516C6.47715 22.6516 2 18.1744 2 12.6516C2 7.12876 6.47715 2.65161 12 2.65161ZM12 4.15161C7.30558 4.15161 3.5 7.95719 3.5 12.6516C3.5 17.346 7.30558 21.1516 12 21.1516C16.6944 21.1516 20.5 17.346 20.5 12.6516C20.5 7.95719 16.6944 4.15161 12 4.15161Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}