@clickhouse/click-ui 0.0.1 → 0.0.2

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,67 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import styled from "styled-components";
+
+export const TooltipProvider = ({
+  children,
+  ...props
+}: RadixTooltip.TooltipProviderProps) => {
+  return <RadixTooltip.Provider {...props}>{children}</RadixTooltip.Provider>;
+};
+
+export const Tooltip = ({ children, ...props }: RadixTooltip.TooltipProps) => {
+  return <RadixTooltip.Root {...props}>{children}</RadixTooltip.Root>;
+};
+
+const Trigger = styled(RadixTooltip.Trigger)`
+  width: fit-content;
+`;
+const TooltipTrigger = (props: RadixTooltip.TooltipTriggerProps) => {
+  return (
+    <Trigger
+      asChild
+      {...props}
+    />
+  );
+};
+TooltipTrigger.displayName = "TooltipTrigger";
+Tooltip.Trigger = TooltipTrigger;
+interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
+  showArrow?: boolean;
+}
+
+const RadixTooltipContent = styled(RadixTooltip.Content)`
+  display: flex;
+  align-items: flex-start;
+  ${({ theme }) => `
+    padding: ${theme.click.tooltip.space.y} ${theme.click.tooltip.space.x};
+    color: ${theme.click.tooltip.color.label.default};
+    background: ${theme.click.tooltip.color.background.default};
+    border-radius: ${theme.click.tooltip.radii.all};
+    font: ${theme.click.tooltip.typography.label.default};
+  `}
+`;
+
+const Arrow = styled.svg`
+  ${({ theme }) => `
+    fill: ${theme.click.tooltip.color.background.default};
+  `};
+`;
+
+const TooltipContent = ({ showArrow, children, ...props }: TooltipContentProps) => {
+  return (
+    <RadixTooltip.Portal>
+      <RadixTooltipContent {...props}>
+        {showArrow && (
+          <Arrow
+            as={RadixTooltip.Arrow}
+            width={20}
+            height={8}
+          />
+        )}
+        {children}
+      </RadixTooltipContent>
+    </RadixTooltip.Portal>
+  );
+};
+TooltipContent.displayName = "TooltipContent";
+Tooltip.Content = TooltipContent;

package/src/components/Typography/Text/Text.stories.tsx

@@ -0,0 +1,22 @@
+import { Text } from "./Text";
+
+export default {
+  component: Text,
+  title: "Typography/Text",
+  tags: ["text", "autodocs"],
+  argTypes: {
+    size: {
+      options: ["lg", "md", "sm", "xs"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    size: "md",
+    weight: "normal",
+    color: "default",
+    children: "Query billions of rows in milliseconds",
+  },
+};

package/src/components/Typography/Text/Text.test.tsx

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { Text } from "./Text";
+import { ThemeProvider } from "@/theme";
+
+describe("Text", () => {
+  test("given a text, should render it", () => {
+    const text = "text to render";
+    const rendered = render(
+      <ThemeProvider theme="light">
+        <Text color="default">{text}</Text>
+      </ThemeProvider>
+    );
+
+    expect(rendered.getByText(text).textContent).toEqual(text);
+  });
+});

package/src/components/Typography/Text/Text.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export type TextColor = "default" | "muted";
+export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+
+export interface TextProps {
+  color?: TextColor;
+  size?: TextSize;
+  weight?: TextWeight;
+  children?: React.ReactNode;
+}
+
+/** Component for writing blocks of body copy */
+export const Text = ({ color, size, weight, children }: TextProps) => (
+  <CuiText
+    color={color}
+    size={size}
+    weight={weight}
+  >
+    {children}
+  </CuiText>
+);
+
+const CuiText = styled.p<Pick<TextProps, "color" | "size" | "weight">>`
+  font: ${({ size = "md", weight = "normal", theme }) =>
+    theme.typography.styles.product.text[weight][size]};
+  color: ${({ color = "default", theme }) => theme.click.global.color.text[color]};
+  margin: 0;
+`;

package/src/components/Typography/Title/Title.stories.tsx

@@ -0,0 +1,31 @@
+import { Title } from "./Title";
+
+export default {
+  component: Title,
+  title: "Typography/Title",
+  tags: ["title", "autodocs"],
+  argTypes: {
+    size: {
+      options: ["2xl", "xl", "lg", "md", "sm", "xs"],
+      control: { type: "radio" },
+    },
+    type: {
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      control: { type: "select" },
+    },
+    family: {
+      options: ["product", "brand"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    size: "md",
+    type: "h1",
+    family: "product",
+    color: "default",
+    children: "Query billions of rows in milliseconds",
+  },
+};

package/src/components/Typography/Title/Title.test.tsx

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { Title } from "./Title";
+import { ThemeProvider } from "@/theme";
+
+describe("Title", () => {
+  test("given a text, should render it", () => {
+    const text = "text to render";
+    const rendered = render(
+      <ThemeProvider theme="light">
+        <Title type="h1">{text}</Title>
+      </ThemeProvider>
+    );
+
+    expect(rendered.getByRole("heading", { level: 1 }).textContent).toEqual(text);
+  });
+});

package/src/components/Typography/Title/Title.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+export type TitleColor = "default" | "muted";
+export type TitleSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type TitleFamily = "product" | "brand";
+export type TitleType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export interface TitleProps {
+  color?: TitleColor;
+  size?: TitleSize;
+  family?: TitleFamily;
+  type: TitleType;
+  children?: React.ReactNode;
+}
+
+/** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */
+export const Title = ({ size, family, type, color, children }: TitleProps) => (
+  <CuiTitle
+    color={color}
+    size={size}
+    family={family}
+    as={type}
+  >
+    {children}
+  </CuiTitle>
+);
+
+const CuiTitle = styled.div<Omit<TitleProps, "type">>`
+  font: ${({ size = "md", family = "product", theme }) =>
+    theme.typography.styles[family].titles[size]};
+  color: ${({ color = "default", theme }) => theme.click.global.color.text[color]};
+  margin: 0;
+  padding: 0;
+  font-style: inherit;
+  line-height: 1;
+`;

package/src/components/icons/Activity.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Activity = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M6 12h1.85l2.168 5 3.964-10 2.168 5H18"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M17.5 21.5h-11a4 4 0 0 1-4-4v-11a4 4 0 0 1 4-4h11a4 4 0 0 1 4 4v11a4 4 0 0 1-4 4Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default Activity;

package/src/components/icons/ArrowDown.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const ArrowDown = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12.02 4.48v14.99M18.012 13.483 12 19.52l-6.012-6.037"
+    />
+  </svg>
+);
+
+export default ArrowDown;

package/src/components/icons/ArrowRight.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const ArrowRight = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M4.48 11.98h14.99M13.483 5.988 19.52 12l-6.037 6.012"
+    />
+  </svg>
+);
+
+export default ArrowRight;

package/src/components/icons/ArrowTriangle.tsx

@@ -0,0 +1,36 @@
+import { SVGAttributes } from "react";
+
+const ArrowTriangle = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m15.612 21-2.064-2.05 2.064-2.048"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m18.45 12.297 2.306 3.965c.695 1.195-.174 2.689-1.564 2.689h-5.644M13.565 7.998l2.82.75.755-2.798M6.066 11.41l-2.822 4.852c-.695 1.195.174 2.689 1.564 2.689H9.42"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m8.13 7.86 2.306-3.964c.695-1.195 2.433-1.195 3.128 0l2.822 4.852M3.247 12.16l2.82-.75.755 2.799"
+    />
+  </svg>
+);
+
+export default ArrowTriangle;

package/src/components/icons/ArrowUp.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const ArrowUp = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M11.98 19.52V4.53M5.988 10.517 12 4.48l6.012 6.037"
+    />
+  </svg>
+);
+
+export default ArrowUp;

package/src/components/icons/Backups.tsx

@@ -0,0 +1,29 @@
+import { SVGAttributes } from "react";
+
+const BackUps = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M3.997 13A8.003 8.003 0 1 0 12 4.997H4.997M7.998 1.996l-3 3.001M7.998 7.998l-3-3"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m14.235 11.851-2.792 2.791-1.678-1.672"
+    />
+  </svg>
+);
+
+export default BackUps;

package/src/components/icons/Blog.tsx

@@ -0,0 +1,38 @@
+import { SVGAttributes } from "react";
+
+const Blog = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m9.332 10.318 2.142-2.157a3.084 3.084 0 0 1 4.377 0v0a3.097 3.097 0 0 1 0 4.364l-2.12 2.135c-.375.378-.885.59-1.416.59H8.75v-3.52c0-.53.209-1.037.582-1.412v0Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m13.75 10.25-6 6"
+    />
+  </svg>
+);
+
+export default Blog;

package/src/components/icons/Book.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Book = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 16.37a6.368 6.368 0 0 0-7.495-1.12c-.684.364-1.509-.085-1.509-.86V5.295c0-.637.294-1.249.812-1.618A6.367 6.367 0 0 1 12 4.364a6.367 6.367 0 0 1 8.191-.687c.518.37.813.981.813 1.618v9.095c0 .775-.826 1.225-1.509.86A6.368 6.368 0 0 0 12 16.37Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M4.505 19.387A6.368 6.368 0 0 1 12 20.507a6.368 6.368 0 0 1 7.495-1.12M12 16.37V4.363"
+    />
+  </svg>
+);
+
+export default Book;

package/src/components/icons/Brackets.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const Brackets = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M18.574 20.003a2.287 2.287 0 0 0 2.287-2.287v-4.573L22.005 12l-1.144-1.144V6.284a2.286 2.286 0 0 0-2.287-2.287M5.427 3.997A2.286 2.286 0 0 0 3.14 6.284v4.572L1.996 12l1.144 1.143v4.573a2.286 2.286 0 0 0 2.287 2.287M9.285 12.533l1.833 1.833 4-4.002"
+    />
+  </svg>
+);
+
+export default Brackets;

package/src/components/icons/Briefcase.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Briefcase = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M19 20.5H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M16.174 7.5v-2a2 2 0 0 0-2-2H9.826a2 2 0 0 0-2 2v2M3 9.5l6.351 4.191c.327.216.71.331 1.102.331h3.094c.392 0 .775-.115 1.102-.331L21 9.5"
+    />
+  </svg>
+);
+
+export default Briefcase;

package/src/components/icons/Building.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Building = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M3.997 3.997H14a1 1 0 0 1 1 1v15.006H3.997a1 1 0 0 1-1-1V4.997a1 1 0 0 1 1-1ZM15.001 7.999h5.002a1 1 0 0 1 1 1v10.004a1 1 0 0 1-1 1h-5.002V8Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M6.998 7.873a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M11 7.873a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M6.998 11.875a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M11 11.875a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M6.998 15.877a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M11 15.877a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M18.002 11.875a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25M18.002 15.877a.125.125 0 1 0 0 .25.125.125 0 0 0 0-.25"
+    />
+  </svg>
+);
+
+export default Building;

package/src/components/icons/BurgerMenu.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const BurgerMenu = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M3.75 7.25h16.5M3.75 12.5h16.5m-16.5 5.25H12"
+    />
+  </svg>
+);
+
+export default BurgerMenu;

package/src/components/icons/Cards.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Cards = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M17.882 21.004H6.117a2.401 2.401 0 0 1-2.389-2.162l-.72-7.203A2.4 2.4 0 0 1 5.397 9h13.205a2.401 2.401 0 0 1 2.39 2.64l-.72 7.203a2.4 2.4 0 0 1-2.39 2.162v0Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M5.998 5.998h12.005M7.998 2.996h8.003M9.499 12.75h5.002"
+    />
+  </svg>
+);
+
+export default Cards;

package/src/components/icons/CellTower.tsx

@@ -0,0 +1,21 @@
+import { SVGAttributes } from "react";
+
+const CellTower = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#161517"
+      stroke="#161517"
+      strokeWidth={0.312}
+      d="M9.046 6.657a1.623 1.623 0 0 1 0-2.293.24.24 0 1 1 .34.34 1.142 1.142 0 0 0 0 1.613.24.24 0 1 1-.34.34Zm-1.304.995a.32.32 0 0 0 .453 0 .32.32 0 0 0 0-.454 2.39 2.39 0 0 1 0-3.375.32.32 0 0 0-.453-.453 3.031 3.031 0 0 0 0 4.282Zm-1.053 1.37a.4.4 0 0 0 .283-.685 4.002 4.002 0 0 1 0-5.653.4.4 0 1 0-.566-.567A4.768 4.768 0 0 0 5 5.511c0 1.282.5 2.487 1.406 3.393a.4.4 0 0 0 .283.117Zm7.79-2.365a.24.24 0 0 0 .34 0 1.623 1.623 0 0 0 0-2.293.24.24 0 0 0-.34.34 1.142 1.142 0 0 1 0 1.613.24.24 0 0 0 0 .34Zm1.19.995a.32.32 0 0 0 .454 0 3.031 3.031 0 0 0 0-4.282.32.32 0 0 0-.453.453c.93.93.93 2.445 0 3.375a.32.32 0 0 0 0 .454Zm1.223.685a.4.4 0 1 0 .567.567 4.767 4.767 0 0 0 1.406-3.393c0-1.282-.5-2.487-1.406-3.394a.4.4 0 1 0-.567.567 4.002 4.002 0 0 1 0 5.653Zm.749 13.24a.32.32 0 0 1-.608.205l-1.092-3.233-3.874 1.792a.32.32 0 0 1-.27 0l-3.873-1.792-1.092 3.233a.32.32 0 1 1-.608-.205l4.938-14.614a1.658 1.658 0 0 1-.538-.457 1.646 1.646 0 0 1 .69-2.519l.514-.89c.058-.099.151-.099.208 0l.514.89a1.646 1.646 0 0 1 .69 2.52c-.143.188-.329.344-.537.456l4.938 14.614Zm-3.02-6.934-.247-.73-2.442-1.13-2.441 1.13-.247.73 2.688 1.244 2.689-1.244Zm-4.264-3.295 1.575.73 1.576-.73-.66-1.95-.916-.424-.916.424-.659 1.95Zm1.44-3.018a.32.32 0 0 1 .27 0l.498.23-.633-1.873L11.3 8.56l.499-.23Zm.9 4.1 1.394.646-.377-1.116-1.018.47Zm-2.546-.47-.377 1.116 1.395-.646-1.018-.47Zm1.221-5.618.257-.76a.32.32 0 0 1 .607 0l.257.76a1.004 1.004 0 1 0-1.563-.83c0 .336.172.646.442.83Zm-3.124 11.25 2.92-1.352-2.13-.986-.79 2.337Zm7.039.553-3.355-1.552-3.354 1.552 3.354 1.552 3.355-1.552Zm.33-.554-.79-2.337-2.13.986 2.92 1.351Z"
+    />
+  </svg>
+);
+
+export default CellTower;

package/src/components/icons/CheckIcon.tsx

@@ -0,0 +1,21 @@
+import { SVGAttributes } from "react";
+
+const CheckIcon = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M20 6.5L9 17.5L4 12.5"
+      stroke="#161517"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default CheckIcon;