am-shared-assets 0.0.2

package/src/components/Tooltip.tsx

@@ -0,0 +1,111 @@
+import clsx from "clsx";
+
+const sizes = {
+  sm: "min-h-6 text-xs",
+  md: "min-h-7 text-sm",
+  lg: "min-h-8 text-base",
+};
+
+const bgColors: { [key: string]: string } = {
+  default: "bg-content-1",
+  primary: "bg-layout-focus",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+};
+
+const textColors = {
+  white: "text-content-1",
+  black: "text-default-900",
+};
+
+const radiuses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+const setArrowPosition = (direction: string, position: string) => {
+  let arrowPosition = "";
+
+  const horizontalSpace: { [key: string]: string } = {
+    start: "left-4",
+    center: "left-1/2 -translate-x-1/2",
+    end: "right-4",
+  };
+  const verticalSpace: { [key: string]: string } = {
+    start: "top-[5px]",
+    center: "top-1/2 -translate-y-1/2",
+    end: "bottom-[5px]",
+  };
+
+  switch (direction) {
+    case "top":
+      arrowPosition = "top-[-3px] " + horizontalSpace[position];
+      break;
+    case "right":
+      arrowPosition = "right-[-3px] " + verticalSpace[position];
+      break;
+    case "bottom":
+      arrowPosition = "bottom-[-3px] " + horizontalSpace[position];
+      break;
+    case "left":
+      arrowPosition = "left-[-3px] " + verticalSpace[position];
+      break;
+    default:
+      break;
+  }
+
+  return arrowPosition;
+};
+
+interface ITooltipProps {
+  label?: string;
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  textColor?: "black" | "white";
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  direction?: "top" | "right" | "left" | "bottom";
+  position?: "start" | "center" | "end";
+}
+
+const Tooltip = ({
+  label,
+  color = "default",
+  textColor = "black",
+  size = "md",
+  rounded = "md",
+  direction = "bottom",
+  position = "center",
+}: ITooltipProps) => {
+  const cls = clsx(
+    sizes[size],
+    bgColors[color],
+    textColors[textColor],
+    radiuses[rounded],
+  );
+
+  return (
+    <div className="relative">
+      <div
+        className={`max-w-[180px] relative z-10 py-1 px-3 shadow-[0px_1px_2px_0px_#0000000F,0px_1px_3px_0px_#0000001A] ${cls}`}
+      >
+        <p>{label}</p>
+      </div>
+      <div
+        className={`absolute size-2.5 rotate-45 rounded-[2px] shadow-[0px_0px_1px_0px_#0000004D,0px_2px_10px_0px_#0000000F,0px_0px_5px_0px_#00000005] ${setArrowPosition(direction, position)} ${bgColors[color]}`}
+      ></div>
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/icons/components/AddIcon.tsx

@@ -0,0 +1,27 @@
+const AddIcon = ({ color, size = 24 }: { color?: string; size?: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M4 8H12"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 12V4"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AddIcon;

package/src/icons/components/ArrowDownIcon.tsx

@@ -0,0 +1,25 @@
+const ArrowDownIcon = ({
+  color,
+  size = 24,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M11.9467 5.45312H7.79341H4.05341C3.41341 5.45312 3.09341 6.22646 3.54674 6.67979L7.00008 10.1331C7.55341 10.6865 8.45341 10.6865 9.00674 10.1331L10.3201 8.81979L12.4601 6.67979C12.9067 6.22646 12.5867 5.45312 11.9467 5.45312Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDownIcon;

package/src/icons/components/ArrowRightIcon.tsx

@@ -0,0 +1,37 @@
+const ArrowRightIcon = ({
+  color,
+  size = 24,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M14.4299 5.92999L20.4999 12L14.4299 18.07"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 12H20.33"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRightIcon;

package/src/icons/components/BagIcon.tsx

@@ -0,0 +1,25 @@
+const BagIcon = ({
+  color,
+  size = 24,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M16.6333 7.4665C16.075 6.84983 15.2333 6.4915 14.0666 6.3665V5.73317C14.0666 4.5915 13.5833 3.4915 12.7333 2.72484C11.875 1.9415 10.7583 1.57484 9.59995 1.68317C7.60828 1.87484 5.93328 3.79984 5.93328 5.88317V6.3665C4.76662 6.4915 3.92495 6.84983 3.36662 7.4665C2.55828 8.3665 2.58328 9.5665 2.67495 10.3998L3.25828 15.0415C3.43328 16.6665 4.09162 18.3332 7.67495 18.3332H12.325C15.9083 18.3332 16.5666 16.6665 16.7416 15.0498L17.325 10.3915C17.4166 9.5665 17.4333 8.3665 16.6333 7.4665ZM9.71662 2.8415C10.55 2.7665 11.3416 3.02484 11.9583 3.58317C12.5666 4.13317 12.9083 4.9165 12.9083 5.73317V6.3165H7.09162V5.88317C7.09162 4.39984 8.31662 2.97484 9.71662 2.8415ZM7.01662 10.9582H7.00828C6.54995 10.9582 6.17495 10.5832 6.17495 10.1248C6.17495 9.6665 6.54995 9.2915 7.00828 9.2915C7.47495 9.2915 7.84995 9.6665 7.84995 10.1248C7.84995 10.5832 7.47495 10.9582 7.01662 10.9582ZM12.85 10.9582H12.8416C12.3833 10.9582 12.0083 10.5832 12.0083 10.1248C12.0083 9.6665 12.3833 9.2915 12.8416 9.2915C13.3083 9.2915 13.6833 9.6665 13.6833 10.1248C13.6833 10.5832 13.3083 10.9582 12.85 10.9582Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default BagIcon;

package/src/icons/components/BoxIcon.tsx

@@ -0,0 +1,43 @@
+const BoxIcon = ({ color, size = 20 }: { color?: string; size?: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M2.6416 6.20001L9.99992 10.4583L17.3082 6.22499"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 18.0083V10.45"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8.27501 2.06667L3.82502 4.5417C2.81668 5.10003 1.9917 6.50002 1.9917 7.65002V12.3584C1.9917 13.5084 2.81668 14.9084 3.82502 15.4667L8.27501 17.9417C9.22501 18.4667 10.7833 18.4667 11.7333 17.9417L16.1834 15.4667C17.1917 14.9084 18.0167 13.5084 18.0167 12.3584V7.65002C18.0167 6.50002 17.1917 5.10003 16.1834 4.5417L11.7333 2.06667C10.775 1.53334 9.22501 1.53334 8.27501 2.06667Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14.1666 11.0333V7.98334L6.2583 3.41664"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BoxIcon;

package/src/icons/components/BoxTimeIcon.tsx

@@ -0,0 +1,47 @@
+const BoxTimeIcon = ({ color, size = 20 }: { color?: string; size?: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M2.11328 4.95996L7.99994 8.36662L13.8466 4.97994"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 14.407V8.36035"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14.4066 6.11301V9.88637C14.4066 9.9197 14.4066 9.94633 14.3999 9.97967C13.9333 9.573 13.3333 9.33302 12.6666 9.33302C12.0399 9.33302 11.4599 9.55302 10.9999 9.91969C10.3866 10.4064 9.99992 11.1597 9.99992 11.9997C9.99992 12.4997 10.1399 12.973 10.3866 13.373C10.4466 13.4797 10.5199 13.5797 10.5999 13.673L9.37992 14.3464C8.61992 14.773 7.37991 14.773 6.61991 14.3464L3.05992 12.373C2.25325 11.9264 1.59326 10.8064 1.59326 9.88637V6.11301C1.59326 5.19301 2.25325 4.07302 3.05992 3.62636L6.61991 1.65301C7.37991 1.22634 8.61992 1.22634 9.37992 1.65301L12.9399 3.62636C13.7466 4.07302 14.4066 5.19301 14.4066 6.11301Z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15.3333 11.9997C15.3333 12.7997 14.98 13.513 14.4267 13.9997C13.9533 14.413 13.34 14.6663 12.6667 14.6663C11.1933 14.6663 10 13.473 10 11.9997C10 11.1597 10.3867 10.4063 11 9.91968C11.46 9.55301 12.04 9.33301 12.6667 9.33301C14.14 9.33301 15.3333 10.5263 15.3333 11.9997Z"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.8333 11.166V12.166L12 12.666"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BoxTimeIcon;

package/src/icons/components/CardTickIcon.tsx

@@ -0,0 +1,54 @@
+const CardTickIcon = ({
+  color,
+  size = 20,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M1.33325 6.66667H14.6666"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7.69877 13.6665H4.29211C1.92545 13.6665 1.32544 13.0798 1.32544 10.7398V5.25985C1.32544 3.13985 1.81879 2.45985 3.67879 2.35318C3.86546 2.34651 4.07211 2.33984 4.29211 2.33984H11.6988C14.0654 2.33984 14.6654 2.92651 14.6654 5.26651V8.20651"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M4 10.6667H6.66667"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14.6666 12C14.6666 12.5 14.5266 12.9733 14.2799 13.3733C13.8199 14.1467 12.9733 14.6667 11.9999 14.6667C11.0266 14.6667 10.1799 14.1467 9.71993 13.3733C9.47326 12.9733 9.33325 12.5 9.33325 12C9.33325 10.5267 10.5266 9.33333 11.9999 9.33333C13.4733 9.33333 14.6666 10.5267 14.6666 12Z"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.9609 11.9997L11.6209 12.6597L13.0409 11.3464"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CardTickIcon;

package/src/icons/components/CardsIcon.tsx

@@ -0,0 +1,48 @@
+const CardsIcon = ({ color, size = 20 }: { color?: string; size?: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M1.33325 8.40667H12.6666"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.6666 6.85334V11.62C12.6466 13.52 12.1266 14 10.1466 14H3.85327C1.83994 14 1.33325 13.5 1.33325 11.5133V6.85334C1.33325 5.05334 1.75325 4.47334 3.33325 4.38C3.49325 4.37334 3.6666 4.36667 3.85327 4.36667H10.1466C12.1599 4.36667 12.6666 4.86667 12.6666 6.85334Z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M14.6666 4.48667V9.14667C14.6666 10.9467 14.2466 11.5267 12.6666 11.62V6.85333C12.6666 4.86667 12.1599 4.36667 10.1466 4.36667H3.85327C3.6666 4.36667 3.49325 4.37333 3.33325 4.38C3.35325 2.48 3.87327 2 5.85327 2H12.1466C14.1599 2 14.6666 2.5 14.6666 4.48667Z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 11.8733H4.64665"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.07324 11.8733H8.36658"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CardsIcon;

package/src/icons/components/CategoryIcon.tsx

@@ -0,0 +1,37 @@
+const CategoryIcon = ({
+  color,
+  size = 24,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M6.03341 1.6665H4.45008C2.62508 1.6665 1.66675 2.62484 1.66675 4.4415V6.02484C1.66675 7.8415 2.62508 8.79984 4.44175 8.79984H6.02508C7.84175 8.79984 8.80008 7.8415 8.80008 6.02484V4.4415C8.80841 2.62484 7.85008 1.6665 6.03341 1.6665Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.5583 1.6665H13.975C12.1583 1.6665 11.2 2.62484 11.2 4.4415V6.02484C11.2 7.8415 12.1583 8.79984 13.975 8.79984H15.5583C17.375 8.79984 18.3333 7.8415 18.3333 6.02484V4.4415C18.3333 2.62484 17.375 1.6665 15.5583 1.6665Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.5583 11.1919H13.975C12.1583 11.1919 11.2 12.1502 11.2 13.9669V15.5502C11.2 17.3669 12.1583 18.3252 13.975 18.3252H15.5583C17.375 18.3252 18.3333 17.3669 18.3333 15.5502V13.9669C18.3333 12.1502 17.375 11.1919 15.5583 11.1919Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.03341 11.1919H4.45008C2.62508 11.1919 1.66675 12.1502 1.66675 13.9669V15.5502C1.66675 17.3752 2.62508 18.3336 4.44175 18.3336H6.02508C7.84175 18.3336 8.80008 17.3752 8.80008 15.5586V13.9752C8.80841 12.1502 7.85008 11.1919 6.03341 11.1919Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CategoryIcon;

package/src/icons/components/ChevronBottomIcon.tsx

@@ -0,0 +1,22 @@
+const ChevronBottomIcon = ({ color, size = 20 }: { color?: string; size?: number }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M13.2797 5.96667L8.93306 10.3133C8.41973 10.8267 7.57973 10.8267 7.06639 10.3133L2.71973 5.96667"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChevronBottomIcon;

package/src/icons/components/ChevronLeftIcon.tsx

@@ -0,0 +1,29 @@
+const ChevronLeftIcon = ({
+  color,
+  size = 12,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M7.49992 9.95998L4.23992 6.69998C3.85492 6.31498 3.85492 5.68498 4.23992 5.29998L7.49992 2.03998"
+        stroke="currentColor"
+        stroke-width="0.75"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChevronLeftIcon;

package/src/icons/components/ChevronRightIcon.tsx

@@ -0,0 +1,29 @@
+const ChevronRightIcon = ({
+  color,
+  size = 12,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M8.91016 19.92L15.4302 13.4C16.2002 12.63 16.2002 11.37 15.4302 10.6L8.91016 4.07996"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChevronRightIcon;

package/src/icons/components/ChevronTopIcon.tsx

@@ -0,0 +1,29 @@
+const ChevronTopIcon = ({
+  color,
+  size = 12,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M16.5984 12.5417L11.1651 7.10833C10.5234 6.46666 9.47344 6.46666 8.83177 7.10833L3.39844 12.5417"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChevronTopIcon;

package/src/icons/components/CloseCircleIcon.tsx

@@ -0,0 +1,25 @@
+const CloseCircleIcon = ({
+  color,
+  size = 24,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M10 0C4.49 0 0 4.49 0 10C0 15.51 4.49 20 10 20C15.51 20 20 15.51 20 10C20 4.49 15.51 0 10 0ZM13.36 12.3C13.65 12.59 13.65 13.07 13.36 13.36C13.21 13.51 13.02 13.58 12.83 13.58C12.64 13.58 12.45 13.51 12.3 13.36L10 11.06L7.7 13.36C7.55 13.51 7.36 13.58 7.17 13.58C6.98 13.58 6.79 13.51 6.64 13.36C6.35 13.07 6.35 12.59 6.64 12.3L8.94 10L6.64 7.7C6.35 7.41 6.35 6.93 6.64 6.64C6.93 6.35 7.41 6.35 7.7 6.64L10 8.94L12.3 6.64C12.59 6.35 13.07 6.35 13.36 6.64C13.65 6.93 13.65 7.41 13.36 7.7L11.06 10L13.36 12.3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CloseCircleIcon;

package/src/icons/components/CloseIcon.tsx

@@ -0,0 +1,29 @@
+const CloseIcon = ({
+  color,
+  size = 24,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M7.25367 18C6.93501 18 6.61635 17.8826 6.36478 17.6312C5.87841 17.145 5.87841 16.3402 6.36478 15.854L15.8574 6.36465C16.3438 5.87845 17.1488 5.87845 17.6352 6.36465C18.1216 6.85086 18.1216 7.65561 17.6352 8.14181L8.14256 17.6312C7.90776 17.8826 7.57233 18 7.25367 18Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.7463 18C16.4277 18 16.109 17.8826 15.8574 17.6312L6.36478 8.14181C5.87841 7.65561 5.87841 6.85086 6.36478 6.36465C6.85115 5.87845 7.65618 5.87845 8.14256 6.36465L17.6352 15.854C18.1216 16.3402 18.1216 17.145 17.6352 17.6312C17.3836 17.8826 17.065 18 16.7463 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;

package/src/icons/components/DislikeIcon.tsx

@@ -0,0 +1,32 @@
+const DislikeIcon = ({
+  color,
+  size = 20,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{color}}
+    >
+      <path
+        d="M4.98619 3.76666L7.05286 2.16666C7.31953 1.9 7.91953 1.76666 8.31953 1.76666H10.8529C11.6529 1.76666 12.5195 2.36666 12.7195 3.16666L14.3195 8.03333C14.6529 8.96666 14.0529 9.76666 13.0529 9.76666H10.3862C9.98619 9.76666 9.65286 10.1 9.71953 10.5667L10.0529 12.7C10.1862 13.3 9.78619 13.9667 9.18619 14.1667C8.65286 14.3667 7.98619 14.1 7.71953 13.7L4.98619 9.63333"
+        stroke="currentColor"
+        stroke-miterlimit="10"
+      />
+      <path
+        d="M1.58659 3.76667V10.3C1.58659 11.2333 1.98659 11.5667 2.91992 11.5667H3.58659C4.51992 11.5667 4.91992 11.2333 4.91992 10.3V3.76667C4.91992 2.83333 4.51992 2.5 3.58659 2.5H2.91992C1.98659 2.5 1.58659 2.83333 1.58659 3.76667Z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default DislikeIcon;