@soul-refiner/design-system 0.0.26 → 0.1.2

package/src/components/surfaces/modal/modal.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from 'components';
+import { Close } from 'icons';
+
+const callAll =
+  (...fns: ((...args: unknown[]) => unknown)[]) =>
+  (...args: any) =>
+    fns.forEach((fn) => fn && fn(...args));
+
+const ModalContext = React.createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+>([false, (() => undefined) as React.Dispatch<React.SetStateAction<boolean>>]);
+
+export interface ModalProps extends React.PropsWithChildren {
+  /**
+   * This is to make the Modal a controlled component,
+   * instead of it managing its own state
+   */
+  controlledOpen?: boolean;
+}
+
+const Modal = ({ controlledOpen, ...props }: ModalProps) => {
+  const [open, setOpen] = React.useState(controlledOpen || false);
+
+  React.useEffect(() => {
+    if (controlledOpen !== undefined) {
+      setOpen(controlledOpen);
+    }
+  }, [controlledOpen]);
+
+  return <ModalContext.Provider value={[open, setOpen]} {...props} />;
+};
+
+const ModalTrigger = ({
+  children: child,
+}: {
+  children: React.ReactElement;
+}) => {
+  const [, setOpen] = React.useContext(ModalContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(() => setOpen(true), child.props.onClick),
+    })
+  );
+};
+
+ModalTrigger.displayName = 'Modal.Trigger';
+Modal.Trigger = ModalTrigger;
+
+const ModalDismiss = ({
+  children: child,
+  setClosed,
+}: {
+  children: React.ReactElement;
+  setClosed?: () => void;
+}) => {
+  const [, setOpen] = React.useContext(ModalContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(
+        () => setOpen(false),
+        child.props.onClick,
+        () => setClosed && setClosed()
+      ),
+    })
+  );
+};
+
+ModalDismiss.displayName = 'Modal.Dismiss';
+Modal.Dismiss = ModalDismiss;
+
+export interface ModalContentProps extends React.PropsWithChildren {
+  backgroundDark?: boolean;
+  footer?: React.ReactElement;
+  header?: React.ReactElement;
+  setClosed?: () => void;
+}
+
+const ModalContent = ({
+  backgroundDark = true,
+  children,
+  footer,
+  header,
+  setClosed,
+  ...props
+}: ModalContentProps) => {
+  const [open, setOpen] = React.useContext(ModalContext);
+
+  const handleOutsideClick = (event: React.MouseEvent) => {
+    if (event.currentTarget != event.target) return;
+    setClosed ? setClosed() : setOpen(false);
+  };
+
+  return (
+    <Wrapper
+      $backgroundDark={backgroundDark}
+      $open={open}
+      onClick={handleOutsideClick}
+    >
+      <Content {...props}>
+        {header && (
+          <div className="header">
+            <div>{header}</div>
+            <Modal.Dismiss setClosed={setClosed}>
+              <Button icon={<Close />} type="special" />
+            </Modal.Dismiss>
+          </div>
+        )}
+        {children}
+        {footer && <div className="footer">{footer}</div>}
+      </Content>
+    </Wrapper>
+  );
+};
+
+ModalContent.displayName = 'Modal.Content';
+Modal.Content = ModalContent;
+
+export { Modal };
+
+const Wrapper = styled.div<{
+  $open: boolean;
+  $backgroundDark: boolean;
+}>`
+  ${({ $open }) =>
+    $open
+      ? `display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;`
+      : 'display: none;'}
+  ${({ $backgroundDark }) =>
+    $backgroundDark
+      ? `background: radial-gradient(
+      79.02% 79.02% at 50% 0%,
+      rgba(0, 27, 58, 0.8) 0%,
+      rgba(0, 0, 0, 0.8) 100%
+    );
+    backdrop-filter: blur(5px);
+    cursor: pointer;`
+      : ''}
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+`;
+
+const Content = styled.div`
+  position: absolute;
+  z-index: 101;
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+  cursor: initial;
+
+  [class~='header'] {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid var(--color-grey-8);
+    > *:first-child {
+      flex: 1;
+      display: block;
+    }
+  }
+
+  [class~='footer'] {
+    padding: 16px;
+    border-top: 1px solid var(--color-grey-8);
+  }
+`;

package/src/icons/arrow/arrow_all.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowAll = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.0573 8.66671H8.66677V13.0572L10.1954 11.5286L11.1382 12.4714L8.0001 15.6095L4.86203 12.4714L5.80484 11.5286L7.33343 13.0572V8.66671H2.94291L4.47151 10.1953L3.5287 11.1381L0.390625 8.00004L3.5287 4.86197L4.47151 5.80478L2.94291 7.33337H7.33343V2.94285L5.80484 4.47144L4.86203 3.52864L8.0001 0.390564L11.1382 3.52864L10.1954 4.47144L8.66677 2.94285V7.33337H13.0573L11.5287 5.80478L12.4715 4.86197L15.6096 8.00004L12.4715 11.1381L11.5287 10.1953L13.0573 8.66671Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_all_diagonal.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowAllDiagonal = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.94281 8L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L8 8.94281L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L7.05719 8L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614L8 7.05719L11.7239 3.33333H9.33333V2H14V6.66667H12.6667V4.27614L8.94281 8Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_both_downwards.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowBothDownwards = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.27614 3.33333L12.6667 11.7239V9.33333H14V14H9.33333V12.6667H11.7239L3.33333 4.27614V6.66667H2V2H6.66667V3.33333H4.27614Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_both_upwards.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowBothUpwards = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.33333 3.33333V2H14V6.66667H12.6667V4.27614L4.27614 12.6667H6.66667V14H2V9.33333H3.33333V11.7239L11.7239 3.33333H9.33333Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_circle_left.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowCircleLeft = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.12936 4.66671H6.66732V6.00004H2.00065V1.33337H3.33398V3.51361C4.48406 2.12172 6.13116 1.33337 8.00065 1.33337C11.6825 1.33337 14.6673 4.31814 14.6673 8.00004C14.6673 11.6819 11.6825 14.6667 8.00065 14.6667C4.31875 14.6667 1.33398 11.6819 1.33398 8.00004H2.66732C2.66732 10.9456 5.05513 13.3334 8.00065 13.3334C10.9462 13.3334 13.334 10.9456 13.334 8.00004C13.334 5.05452 10.9462 2.66671 8.00065 2.66671C6.4049 2.66671 5.03634 3.38584 4.12936 4.66671Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_circle_left_double.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowCircleLeftDouble = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.66732 4.66671H4.12936C5.03634 3.38584 6.4049 2.66671 8.00065 2.66671C10.9462 2.66671 13.334 5.05452 13.334 8.00004H14.6673C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C6.13116 1.33337 4.48406 2.12172 3.33398 3.51361V1.33337H2.00065V6.00004H6.66732V4.66671ZM9.33398 11.3334H11.8719C10.965 12.6142 9.5964 13.3334 8.00065 13.3334C5.05513 13.3334 2.66732 10.9456 2.66732 8.00004H1.33398C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667C9.87014 14.6667 11.5172 13.8784 12.6673 12.4865V14.6667H14.0007V10H9.33398V11.3334Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_circle_left_double_alert.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowCircleLeftDoubleAlert = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33398 4.66671H4.12936C5.03634 3.38584 6.4049 2.66671 8.00065 2.66671C10.9462 2.66671 13.334 5.05452 13.334 8.00004H14.6673C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C6.13116 1.33337 4.48406 2.12172 3.33398 3.51361V2.66671H2.00065V6.00004H5.33398V4.66671ZM10.6673 11.3334H11.8719C10.965 12.6142 9.5964 13.3334 8.00065 13.3334C5.05513 13.3334 2.66732 10.9456 2.66732 8.00004H1.33398C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667C9.87014 14.6667 11.5172 13.8784 12.6673 12.4865V13.3334H14.0007V10H10.6673V11.3334ZM8.00087 10.6656C8.36918 10.6656 8.66776 10.3671 8.66776 9.99894C8.66776 9.63075 8.36918 9.33227 8.00087 9.33227C7.63256 9.33227 7.33398 9.63075 7.33398 9.99894C7.33398 10.3671 7.63256 10.6656 8.00087 10.6656ZM8.66972 4.6656H7.33595V8.66561H8.66972V4.6656Z"
+      />
+    </Icon>
+  );
+};
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="" fill="#4A4F55" />
+</svg>;

package/src/icons/arrow/arrow_circle_right.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowCircleRight = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.8719 4.66671C10.965 3.38584 9.5964 2.66671 8.00065 2.66671C5.05513 2.66671 2.66732 5.05452 2.66732 8.00004C2.66732 10.9456 5.05513 13.3334 8.00065 13.3334C10.9462 13.3334 13.334 10.9456 13.334 8.00004H14.6673C14.6673 11.6819 11.6825 14.6667 8.00065 14.6667C4.31875 14.6667 1.33398 11.6819 1.33398 8.00004C1.33398 4.31814 4.31875 1.33337 8.00065 1.33337C9.87014 1.33337 11.5172 2.12172 12.6673 3.51361V1.33337H14.0007V6.00004H9.33398V4.66671H11.8719Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_circle_right_double.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowCircleRightDouble = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.00065 2.66671C9.5964 2.66671 10.965 3.38584 11.8719 4.66671H9.33398V6.00004H14.0007V1.33337H12.6673V3.51361C11.5172 2.12172 9.87014 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004H2.66732C2.66732 5.05452 5.05513 2.66671 8.00065 2.66671ZM8.00065 13.3334C6.4049 13.3334 5.03634 12.6142 4.12936 11.3334H6.66732V10H2.00065V14.6667H3.33398V12.4865C4.48406 13.8784 6.13116 14.6667 8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004H13.334C13.334 10.9456 10.9462 13.3334 8.00065 13.3334Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_circle_right_double_alert.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowCircleRightDoubleAlert = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.00065 2.66671C9.5964 2.66671 10.965 3.38584 11.8719 4.66671H10.6673V6.00004H14.0007V2.66671H12.6673V3.51361C11.5172 2.12172 9.87014 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004H2.66732C2.66732 5.05452 5.05513 2.66671 8.00065 2.66671ZM8.00065 13.3334C6.4049 13.3334 5.03634 12.6142 4.12936 11.3334H5.33398V10H2.00065V13.3334H3.33398V12.4865C4.48406 13.8784 6.13116 14.6667 8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004H13.334C13.334 10.9456 10.9462 13.3334 8.00065 13.3334ZM8.00087 10.6656C8.36918 10.6656 8.66776 10.3671 8.66776 9.99894C8.66776 9.63075 8.36918 9.33227 8.00087 9.33227C7.63256 9.33227 7.33398 9.63075 7.33398 9.99894C7.33398 10.3671 7.63256 10.6656 8.00087 10.6656ZM8.66972 4.6656H7.33595V8.66561H8.66972V4.6656Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_down_left.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalDownLeft = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.33333 12.6667V14H2V6.66668H3.33333V11.7239L12.1953 2.86194L13.1381 3.80475L4.27614 12.6667H9.33333Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_down_left_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalDownLeftCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM9.99935 10.6666V9.33329H7.60883L11.1374 5.8047L10.1946 4.86189L6.66602 8.39048V5.99996H5.33268V10.6666H9.99935Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_down_right.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalDownRight = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.6661 11.7239V6.66668H13.9994V14H6.66607V12.6667H11.7233L2.86133 3.80475L3.80414 2.86194L12.6661 11.7239Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_down_right_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalDownRightCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM9.33268 5.99996V8.39048L5.80409 4.86189L4.86128 5.8047L8.38987 9.33329H5.99935V10.6666H10.666V5.99996H9.33268Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_up_left.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalUpLeft = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.27614 3.33333L13.1381 12.1953L12.1953 13.1381L3.33333 4.27614V9.33333H2V2H9.33333V3.33333H4.27614Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_up_left_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalUpLeftCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM11.1374 10.1952L7.60883 6.66663H9.99935V5.33329H5.33268V9.99996H6.66602V7.60944L10.1946 11.138L11.1374 10.1952Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_up_right.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalUpRight = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.6661 4.27614L3.80414 13.1381L2.86133 12.1953L11.7233 3.33333H6.66607V2H13.9994V9.33333H12.6661V4.27614Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_diagonal_up_right_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDiagonalUpRightCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM5.80409 11.138L9.33268 7.60944V9.99996H10.666V5.33329H5.99935V6.66663H8.38987L4.86128 10.1952L5.80409 11.138Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_down.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDown = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.33338 12.3905V2H8.66672V12.3905L12.862 8.19526L13.8048 9.13807L8.00005 14.9428L2.19531 9.13807L3.13812 8.19526L7.33338 12.3905Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_down_bold.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDownBold = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.135 7.99998H10.5457L9.21233 1.33331H6.78592L5.45259 7.99998H1.86328L7.99913 15.0124L14.135 7.99998ZM11.1966 9.33331L7.99913 12.9876L4.80164 9.33331H6.54566L7.879 2.66665H8.11926L9.45259 9.33331H11.1966Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_down_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowDownCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM7.33268 4.66663V9.05715L5.80409 7.52855L4.86128 8.47136L7.99935 11.6094L11.1374 8.47136L10.1946 7.52855L8.66602 9.05715V4.66663H7.33268Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_left.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowLeft = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.27689 8.66666L8.47216 12.8619L7.52935 13.8047L1.72461 7.99999L7.52935 2.19525L8.47216 3.13806L4.27689 7.33332H14.0008V8.66666H4.27689Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_left_bold.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowLeftBold = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.00068 14.1358V10.5465L14.6673 9.21318V6.78678L8.00068 5.45345V1.86414L0.988281 7.99998L8.00068 14.1358ZM6.66734 11.1975L3.01307 7.99998L6.66734 4.80249V6.54652L13.334 7.87985V8.12011L6.66734 9.45345V11.1975Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_left_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowLeftCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM11.3327 7.33329H6.94216L8.47075 5.8047L7.52794 4.86189L4.38987 7.99996L7.52794 11.138L8.47075 10.1952L6.94216 8.66663H11.3327V7.33329Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_left_curved.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowLeftCurved = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.60893 6.66668H10.6661C12.8753 6.66668 14.6661 8.45754 14.6661 10.6667C14.6661 12.8758 12.8753 14.6667 10.6661 14.6667H8.99945V13.3333H10.6661C12.1389 13.3333 13.3328 12.1394 13.3328 10.6667C13.3328 9.19392 12.1389 8.00001 10.6661 8.00001H3.60893L6.47085 10.8619L5.52805 11.8047L1.05664 7.33334L5.52805 2.86194L6.47085 3.80475L3.60893 6.66668Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_left_curved_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowLeftCurvedCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM7.80409 8.86189L6.27549 7.33329H9.33268C10.0691 7.33329 10.666 7.93025 10.666 8.66663C10.666 9.40301 10.0691 9.99996 9.33268 9.99996V11.3333C10.8054 11.3333 11.9993 10.1394 11.9993 8.66663C11.9993 7.19387 10.8054 5.99996 9.33268 5.99996H6.27549L7.80409 4.47136L6.86128 3.52855L3.72321 6.66663L6.86128 9.8047L7.80409 8.86189Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_right.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowRight = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.7239 8.66666H2V7.33332H11.7239L7.5286 3.13806L8.4714 2.19525L14.2761 7.99999L8.4714 13.8047L7.5286 12.8619L11.7239 8.66666Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_right_bold.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowRightBold = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.33398 9.21318L8.00065 10.5465V14.1358L15.013 7.99998L8.00065 1.86414V5.45345L1.33398 6.78678V9.21318ZM9.33398 4.80249L12.9883 7.99998L9.33398 11.1975V9.45345L2.66732 8.12011V7.87985L9.33398 6.54652V4.80249Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_right_circle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowRightCircle = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM4.66602 8.66663H9.05654L7.52794 10.1952L8.47075 11.138L11.6088 7.99996L8.47075 4.86189L7.52794 5.8047L9.05654 7.33329H4.66602V8.66663Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/arrow/arrow_right_curved.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ArrowRightCurved = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.3912 6.66668L9.52925 3.80475L10.4721 2.86194L14.9435 7.33334L10.4721 11.8047L9.52925 10.8619L12.3912 8.00001H5.33398C3.86123 8.00001 2.66732 9.19392 2.66732 10.6667C2.66732 12.1394 3.86123 13.3333 5.33398 13.3333H7.00065V14.6667H5.33398C3.12485 14.6667 1.33398 12.8758 1.33398 10.6667C1.33398 8.45754 3.12485 6.66668 5.33398 6.66668H12.3912Z"
+      />
+    </Icon>
+  );
+};