pge-front-common 2.0.0 → 3.0.0

package/package.json

@@ -2,6 +2,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -29,21 +31,25 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "files": [
+    "lib"
+  ],
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "rollup -c"
+    "build": "rollup -c rollup.config.cjs"
   },
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
   "name": "pge-front-common",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "",
   "keywords": [],
   "author": "sturmer cesar",
   "license": "ISC",
   "dependencies": {
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "tslib": "^2.3.1"
   }
 }

package/.storybook/main.ts

@@ -1,22 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: [
-    // "../stories/**/*.mdx",
-    // "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../src/**/*.stories.tsx",
-  ],
-  addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    "@storybook/addon-themes",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,25 +0,0 @@
-// .storybook/preview.jsx
-import { createGlobalStyle, ThemeProvider } from "styled-components";
-import { withThemeFromJSXProvider } from "@storybook/addon-themes";
-
-import theme from "../src/components/theme";
-
-const GlobalStyle = createGlobalStyle`
-  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
-  body {
-    font-family: 'Open Sans', sans-serif !;
-  }
-`;
-
-/* snipped for brevity */
-
-export const decorators = [
-  withThemeFromJSXProvider({
-    themes: {
-      default: theme,
-    },
-    defaultTheme: "default",
-    Provider: ThemeProvider,
-    GlobalStyles: GlobalStyle,
-  }),
-];

package/rollup.config.mjs

@@ -1,46 +0,0 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import postcss from "rollup-plugin-postcss";
-import dts from "rollup-plugin-dts";
-
-// This is required to read package.json file when
-// using Native ES modules in Node.js
-// https://rollupjs.org/command-line-interface/#importing-package-json
-import { createRequire } from "node:module";
-const requireFile = createRequire(import.meta.url);
-const packageJson = requireFile("./package.json");
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript(),
-      postcss({
-        extensions: [".css"],
-      }),
-    ],
-  },
-  {
-    input: "lib/index.d.ts",
-    output: [{ file: "lib/index.d.ts", format: "es" }],
-    plugins: [dts()],
-    external: [/\.css$/],
-  },
-];

package/src/components/Button/Button.stories.tsx

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { Button } from "./Button";
-
-const meta: Meta<typeof Button> = {
-  title: "Example/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["primary", "secondary"],
-    },
-    text: { control: "text" },
-    leftIcon: { control: "text" },
-    onClick: { action: "clicked" },
-  },
-  args: {
-    onClick: fn(),
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    text: "Primary Button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    text: "Secondary Button",
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    variant: "primary",
-    text: "Button with Icon",
-    leftIcon: "⭐", // You can use any ReactNode, here we use a simple star emoji for demonstration
-  },
-};

package/src/components/Button/Button.tsx

@@ -1,28 +0,0 @@
-import React, { ButtonHTMLAttributes } from "react";
-import styled from "styled-components";
-import * as s from "./styles";
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant: "primary" | "secondary";
-  text: string;
-  leftIcon?: React.ReactNode;
-}
-
-const StyledButton = styled(s.BaseButton)<{ variant: "primary" | "secondary" }>`
-  ${({ variant }) =>
-    variant === "primary" ? s.PrimaryButton : s.SecondaryButton}
-`;
-
-export function Button({
-  variant,
-  text = "",
-  leftIcon,
-  ...props
-}: ButtonProps) {
-  return (
-    <StyledButton variant={variant} {...props}>
-      {leftIcon}
-      {text}
-    </StyledButton>
-  );
-}

package/src/components/Button/styles.tsx

@@ -1,39 +0,0 @@
-import styled, { css } from "styled-components";
-
-// Estilos base compartilhados
-export const BaseButton = styled.button`
-  all: unset;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-
-// Estilos do botão primário
-export const PrimaryButton = css`
-  width: fit-content;
-  height: fit-content;
-  padding: 12px 16px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-  color: #fff;
-  font-weight: 700;
-  background: ${({ theme }) => theme.colors.primary};
-`;
-
-// Estilos do botão secundário
-export const SecondaryButton = css`
-  width: fit-content;
-  height: fit-content;
-  padding: 12px 8px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-  font-weight: 700;
-  color: ${({ theme }) => theme.colors.primary};
-  background: transparent;
-`;

package/src/components/Modal/Modal.stories.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Modal } from "./Modal";
-import { fn } from "@storybook/test";
-
-const meta = {
-  title: "Example/Modal",
-  component: Modal,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    isModalOpen: { control: "boolean" },
-    onOpenChange: { action: "onOpenChange" },
-    children: { control: "text" },
-  },
-  args: {
-    isModalOpen: false,
-    onOpenChange: fn(),
-    children: "This is the modal content.",
-    title: "Title",
-  },
-} satisfies Meta<typeof Modal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: Story = {
-  render: (args) => {
-    const [isModalOpen, setIsModalOpen] = useState(args.isModalOpen);
-
-    return (
-      <Modal
-        {...args}
-        isModalOpen={isModalOpen}
-        onOpenChange={(open) => {
-          setIsModalOpen(open);
-          args.onOpenChange(open);
-        }}
-      >
-        {args.children}
-      </Modal>
-    );
-  },
-};
-
-export const Default: Story = {
-  ...Template,
-  args: {
-    isModalOpen: true,
-    children: "This is the modal content.",
-  },
-};
-
-export const Closed: Story = {
-  ...Template,
-  args: {
-    isModalOpen: false,
-    children: "This is the modal content.",
-  },
-};

package/src/components/Modal/Modal.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import * as Alert from "@radix-ui/react-alert-dialog";
-import {
-  AlertOverlay,
-  ContentContainer,
-  ModalHeaderContainer,
-  ModalHeaderText,
-  CloseBtn,
-  ContentChildren,
-} from "./styles";
-import { IconCLose } from "../../icons/close-icon";
-export interface ModalProps {
-  isModalOpen: boolean;
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
-  children: React.ReactNode;
-  title: string;
-}
-
-export const Modal = ({
-  isModalOpen,
-  onOpenChange,
-  children,
-  title,
-}: ModalProps) => {
-  return (
-    <Alert.Root open={isModalOpen} onOpenChange={onOpenChange}>
-      <Alert.Portal>
-        <AlertOverlay />
-        <ContentContainer>
-          <ModalHeaderContainer>
-            <ModalHeaderText>{title}</ModalHeaderText>
-            <CloseBtn onClick={() => onOpenChange(!isModalOpen)}>
-              <IconCLose />
-            </CloseBtn>
-          </ModalHeaderContainer>
-
-          <ContentChildren>{children}</ContentChildren>
-        </ContentContainer>
-      </Alert.Portal>
-    </Alert.Root>
-  );
-};

package/src/components/Modal/ModalConfirm/ModalConfirm.stories.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import ModalConfirm from "./index";
-import { fn } from "@storybook/test";
-
-const meta = {
-  title: "Example/ModalConfirm",
-  component: ModalConfirm,
-  parameters: {
-    layout: "centered",
-  },
-
-  args: {
-    isModalOpen: false,
-    onOpenChange: fn(),
-    children: "conteúdo",
-  },
-} satisfies Meta<typeof ModalConfirm>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: Story = {
-  render: (args) => {
-    const [isModalOpen, setIsModalOpen] = useState(args.isModalOpen);
-
-    return (
-      <ModalConfirm
-        {...args}
-        isModalOpen={isModalOpen}
-        onOpenChange={(open) => {
-          setIsModalOpen(open);
-          args.onOpenChange(open);
-        }}
-      >
-        {args.children}
-      </ModalConfirm>
-    );
-  },
-};
-
-export const Default: Story = {
-  ...Template,
-  args: {
-    isModalOpen: true,
-    children: "conteúdo",
-  },
-};

package/src/components/Modal/ModalConfirm/index.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Modal } from "../Modal";
-import { Button } from "../../Button/Button";
-import * as S from "./styles";
-
-export interface ModalProps {
-  isModalOpen: boolean;
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
-  children: React.ReactNode;
-}
-
-const ModalConfirm: React.FC<ModalProps> = ({
-  isModalOpen,
-  onOpenChange,
-  children,
-}) => {
-  return (
-    <Modal
-      isModalOpen={isModalOpen}
-      onOpenChange={onOpenChange}
-      title="Título (Resumo do conteúdo)"
-    >
-      {children}
-      <S.ContainerModalConfirm>
-        <Button variant="secondary" text="Cancelar" />
-        <Button variant="primary" text="Ação" />
-      </S.ContainerModalConfirm>
-    </Modal>
-  );
-};
-
-export default ModalConfirm;

package/src/components/Modal/ModalConfirm/styles.tsx

@@ -1,9 +0,0 @@
-import styled from "styled-components";
-
-export const ContainerModalConfirm = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: 5px;
-
-  margin-top: 10%;
-`;

package/src/components/Modal/styles.tsx

@@ -1,75 +0,0 @@
-import styled, { keyframes } from "styled-components";
-
-const overlayShow = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-const AlertOverlay = styled.div`
-  background: rgb(61 62 63 / 0.5);
-  position: fixed;
-  inset: 0;
-  animation: ${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1);
-`;
-
-const ModalHeaderContainer = styled.div`
-  width: 410px;
-  height: 56px;
-  border-radius: 6px 6px 0 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background: ${({ theme }) => theme.colors.primary};
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-const ModalHeaderText = styled.div`
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 24px;
-  text-align: left;
-  color: ${({ theme }) => theme.colors.base.white};
-`;
-
-const CloseBtn = styled.button`
-  all: unset;
-  cursor: pointer;
-`;
-
-const CustomIcon = styled.div`
-  color: ${({ theme }) => theme.colors.base.white};
-`;
-
-const ContentContainer = styled.div`
-  border-radius: 6px;
-  box-shadow:
-    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 500px;
-  height: auto;
-  background: ${({ theme }) => theme.colors.base.white};
-`;
-
-const ContentChildren = styled.div`
-  padding: 20px;
-`;
-
-export {
-  AlertOverlay,
-  ModalHeaderContainer,
-  ModalHeaderText,
-  CloseBtn,
-  CustomIcon,
-  ContentContainer,
-  ContentChildren,
-};

package/src/components/theme.ts

@@ -1,24 +0,0 @@
-import { DefaultTheme } from "styled-components";
-
-const theme: DefaultTheme = {
-  colors: {
-    primary: "#005a92",
-    secondary: "",
-    hover: "#005A92",
-    textSecondary: "",
-    iconColor: "#4A4A4B",
-    success: "#198754",
-    warning: "#CB8700",
-    alert: "#CB0A0A",
-    information: "#1A95B0",
-    border: "#D9D9D9",
-    lightGrey: "#C3C3C3",
-    grey: "#A0A0A0",
-    base: {
-      white: "#FFFFFF",
-      black: "#303030",
-    },
-  },
-};
-
-export default theme;

package/src/icons/add-cell-icon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGProps } from "react";
-
-export const IconAddCell = (props?: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="21"
-    height="21"
-    viewBox="0 0 21 21"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M9.6665 15.5H11.6665V11.5H15.6665V9.5H11.6665V5.5H9.6665V9.5H5.6665V11.5H9.6665V15.5ZM10.6665 20.5C9.28317 20.5 7.98317 20.2375 6.7665 19.7125C5.54984 19.1875 4.4915 18.475 3.5915 17.575C2.6915 16.675 1.979 15.6167 1.454 14.4C0.929004 13.1833 0.666504 11.8833 0.666504 10.5C0.666504 9.11667 0.929004 7.81667 1.454 6.6C1.979 5.38333 2.6915 4.325 3.5915 3.425C4.4915 2.525 5.54984 1.8125 6.7665 1.2875C7.98317 0.7625 9.28317 0.5 10.6665 0.5C12.0498 0.5 13.3498 0.7625 14.5665 1.2875C15.7832 1.8125 16.8415 2.525 17.7415 3.425C18.6415 4.325 19.354 5.38333 19.879 6.6C20.404 7.81667 20.6665 9.11667 20.6665 10.5C20.6665 11.8833 20.404 13.1833 19.879 14.4C19.354 15.6167 18.6415 16.675 17.7415 17.575C16.8415 18.475 15.7832 19.1875 14.5665 19.7125C13.3498 20.2375 12.0498 20.5 10.6665 20.5ZM10.6665 18.5C12.8998 18.5 14.7915 17.725 16.3415 16.175C17.8915 14.625 18.6665 12.7333 18.6665 10.5C18.6665 8.26667 17.8915 6.375 16.3415 4.825C14.7915 3.275 12.8998 2.5 10.6665 2.5C8.43317 2.5 6.5415 3.275 4.9915 4.825C3.4415 6.375 2.6665 8.26667 2.6665 10.5C2.6665 12.7333 3.4415 14.625 4.9915 16.175C6.5415 17.725 8.43317 18.5 10.6665 18.5Z"
-      fill="#4A4A4B"
-    />
-  </svg>
-);

package/src/icons/add-icon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGProps } from "react";
-
-export const IconAdd = (props?: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="15"
-    height="15"
-    viewBox="0 0 15 15"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M6.6665 8.5H0.666504V6.5H6.6665V0.5H8.6665V6.5H14.6665V8.5H8.6665V14.5H6.6665V8.5Z"
-      fill="black"
-    />
-  </svg>
-);

package/src/icons/arrow-expland-icon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGProps } from "react";
-
-export const IconArrowExpland = (props?: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="13"
-    height="8"
-    viewBox="0 0 13 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M2.0665 7.87498L0.666504 6.47498L6.6665 0.474976L12.6665 6.47498L11.2665 7.87498L6.6665 3.27498L2.0665 7.87498Z"
-      fill="black"
-    />
-  </svg>
-);

package/src/icons/arrow-to-recall-icon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGProps } from "react";
-
-export const IconArrowRecall = (props?: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="13"
-    height="8"
-    viewBox="0 0 13 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M6.6665 7.87498L0.666504 1.87498L2.0665 0.474976L6.6665 5.07498L11.2665 0.474976L12.6665 1.87498L6.6665 7.87498Z"
-      fill="#4A4A4B"
-    />
-  </svg>
-);

package/src/icons/calendar-icon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGProps } from "react";
-
-export const IconCalendar = (props?: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="19"
-    height="21"
-    viewBox="0 0 19 21"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M2.6665 20.5C2.1165 20.5 1.64567 20.3042 1.254 19.9125C0.862337 19.5208 0.666504 19.05 0.666504 18.5V4.5C0.666504 3.95 0.862337 3.47917 1.254 3.0875C1.64567 2.69583 2.1165 2.5 2.6665 2.5H3.6665V0.5H5.6665V2.5H13.6665V0.5H15.6665V2.5H16.6665C17.2165 2.5 17.6873 2.69583 18.079 3.0875C18.4707 3.47917 18.6665 3.95 18.6665 4.5V18.5C18.6665 19.05 18.4707 19.5208 18.079 19.9125C17.6873 20.3042 17.2165 20.5 16.6665 20.5H2.6665ZM2.6665 18.5H16.6665V8.5H2.6665V18.5ZM2.6665 6.5H16.6665V4.5H2.6665V6.5ZM9.6665 12.5C9.38317 12.5 9.14567 12.4042 8.954 12.2125C8.76234 12.0208 8.6665 11.7833 8.6665 11.5C8.6665 11.2167 8.76234 10.9792 8.954 10.7875C9.14567 10.5958 9.38317 10.5 9.6665 10.5C9.94984 10.5 10.1873 10.5958 10.379 10.7875C10.5707 10.9792 10.6665 11.2167 10.6665 11.5C10.6665 11.7833 10.5707 12.0208 10.379 12.2125C10.1873 12.4042 9.94984 12.5 9.6665 12.5ZM5.6665 12.5C5.38317 12.5 5.14567 12.4042 4.954 12.2125C4.76234 12.0208 4.6665 11.7833 4.6665 11.5C4.6665 11.2167 4.76234 10.9792 4.954 10.7875C5.14567 10.5958 5.38317 10.5 5.6665 10.5C5.94984 10.5 6.18734 10.5958 6.379 10.7875C6.57067 10.9792 6.6665 11.2167 6.6665 11.5C6.6665 11.7833 6.57067 12.0208 6.379 12.2125C6.18734 12.4042 5.94984 12.5 5.6665 12.5ZM13.6665 12.5C13.3832 12.5 13.1457 12.4042 12.954 12.2125C12.7623 12.0208 12.6665 11.7833 12.6665 11.5C12.6665 11.2167 12.7623 10.9792 12.954 10.7875C13.1457 10.5958 13.3832 10.5 13.6665 10.5C13.9498 10.5 14.1873 10.5958 14.379 10.7875C14.5707 10.9792 14.6665 11.2167 14.6665 11.5C14.6665 11.7833 14.5707 12.0208 14.379 12.2125C14.1873 12.4042 13.9498 12.5 13.6665 12.5ZM9.6665 16.5C9.38317 16.5 9.14567 16.4042 8.954 16.2125C8.76234 16.0208 8.6665 15.7833 8.6665 15.5C8.6665 15.2167 8.76234 14.9792 8.954 14.7875C9.14567 14.5958 9.38317 14.5 9.6665 14.5C9.94984 14.5 10.1873 14.5958 10.379 14.7875C10.5707 14.9792 10.6665 15.2167 10.6665 15.5C10.6665 15.7833 10.5707 16.0208 10.379 16.2125C10.1873 16.4042 9.94984 16.5 9.6665 16.5ZM5.6665 16.5C5.38317 16.5 5.14567 16.4042 4.954 16.2125C4.76234 16.0208 4.6665 15.7833 4.6665 15.5C4.6665 15.2167 4.76234 14.9792 4.954 14.7875C5.14567 14.5958 5.38317 14.5 5.6665 14.5C5.94984 14.5 6.18734 14.5958 6.379 14.7875C6.57067 14.9792 6.6665 15.2167 6.6665 15.5C6.6665 15.7833 6.57067 16.0208 6.379 16.2125C6.18734 16.4042 5.94984 16.5 5.6665 16.5ZM13.6665 16.5C13.3832 16.5 13.1457 16.4042 12.954 16.2125C12.7623 16.0208 12.6665 15.7833 12.6665 15.5C12.6665 15.2167 12.7623 14.9792 12.954 14.7875C13.1457 14.5958 13.3832 14.5 13.6665 14.5C13.9498 14.5 14.1873 14.5958 14.379 14.7875C14.5707 14.9792 14.6665 15.2167 14.6665 15.5C14.6665 15.7833 14.5707 16.0208 14.379 16.2125C14.1873 16.4042 13.9498 16.5 13.6665 16.5Z"
-      fill="#4A4A4B"
-    />
-  </svg>
-);

package/src/icons/check-circle-icon.tsx

@@ -1,17 +0,0 @@
-import React, { SVGProps } from "react";
-
-export const IconCheckCircle = (props?: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="21"
-    height="21"
-    viewBox="0 0 21 21"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M9.2665 15.1L16.3165 8.05L14.9165 6.65L9.2665 12.3L6.4165 9.45L5.0165 10.85L9.2665 15.1ZM10.6665 20.5C9.28317 20.5 7.98317 20.2375 6.7665 19.7125C5.54984 19.1875 4.4915 18.475 3.5915 17.575C2.6915 16.675 1.979 15.6167 1.454 14.4C0.929004 13.1833 0.666504 11.8833 0.666504 10.5C0.666504 9.11667 0.929004 7.81667 1.454 6.6C1.979 5.38333 2.6915 4.325 3.5915 3.425C4.4915 2.525 5.54984 1.8125 6.7665 1.2875C7.98317 0.7625 9.28317 0.5 10.6665 0.5C12.0498 0.5 13.3498 0.7625 14.5665 1.2875C15.7832 1.8125 16.8415 2.525 17.7415 3.425C18.6415 4.325 19.354 5.38333 19.879 6.6C20.404 7.81667 20.6665 9.11667 20.6665 10.5C20.6665 11.8833 20.404 13.1833 19.879 14.4C19.354 15.6167 18.6415 16.675 17.7415 17.575C16.8415 18.475 15.7832 19.1875 14.5665 19.7125C13.3498 20.2375 12.0498 20.5 10.6665 20.5ZM10.6665 18.5C12.8998 18.5 14.7915 17.725 16.3415 16.175C17.8915 14.625 18.6665 12.7333 18.6665 10.5C18.6665 8.26667 17.8915 6.375 16.3415 4.825C14.7915 3.275 12.8998 2.5 10.6665 2.5C8.43317 2.5 6.5415 3.275 4.9915 4.825C3.4415 6.375 2.6665 8.26667 2.6665 10.5C2.6665 12.7333 3.4415 14.625 4.9915 16.175C6.5415 17.725 8.43317 18.5 10.6665 18.5Z"
-      fill="black"
-    />
-  </svg>
-);