globalfy-design-system 0.1.0

package/src/components/atoms/Flag/Flag.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Flag } from ".";
+
+const meta = {
+  title: "Components/Atoms/Flag",
+  component: Flag,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Flag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    country: "usa",
+    shadow: false
+  }
+};
+
+export const Flags = () => (
+  <div className="flex gap-4">
+    <Flag country="usa" />
+    <Flag country="bra" />
+    <Flag country="esp" />
+  </div>
+);
+
+export const WithShadow: Story = {
+  args: {
+    country: "usa",
+    shadow: true
+  }
+};

package/src/components/atoms/Flag/Flag.tsx

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+import { FlagProps } from ".";
+import { classNames } from "@/utils/tailwind/classNames";
+
+import BraFlag from "./images/bra.svg";
+import EspFlag from "./images/esp.svg";
+import UsaFlag from "./images/usa.svg";
+
+const FLAGS_COMPONENTS = {
+  bra: BraFlag,
+  esp: EspFlag,
+  usa: UsaFlag
+};
+
+export const Flag = ({ shadow, country, className, ...props }: FlagProps) => {
+  const flagVariants = cva("rounded-full", {
+    variants: {
+      shadow: {
+        true: "shadow-[4px_4px_6px_0px_rgba(0,0,0,0.17)]",
+        false: ""
+      }
+    }
+  });
+
+  const flag = FLAGS_COMPONENTS[country as keyof typeof FLAGS_COMPONENTS];
+
+  return (
+    <img
+      {...props}
+      src={flag}
+      alt={`${country} flag`}
+      className={classNames(className, flagVariants({ shadow }))}
+    />
+  );
+};

package/src/components/atoms/Flag/Flag.types.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+
+export type FlagProps = {
+  shadow?: boolean;
+  country: "bra" | "esp" | "usa";
+} & HTMLAttributes<HTMLImageElement>;

package/src/components/atoms/Flag/images/bra.svg

@@ -0,0 +1,8 @@
+<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5099" cy="18.5033" r="18.5033" fill="white"/>
+<path d="M18.51 35.1865C27.7239 35.1865 35.1933 27.7171 35.1933 18.5032C35.1933 9.28921 27.7239 1.81982 18.51 1.81982C9.29604 1.81982 1.82666 9.28921 1.82666 18.5032C1.82666 27.7171 9.29604 35.1865 18.51 35.1865Z" fill="#0B9F59"/>
+<path d="M18.5101 8.34828L32.292 18.5033L18.5101 28.6584L4.72824 18.5033L18.5101 8.34828Z" fill="#FFDA44"/>
+<path d="M18.5099 24.3062C21.7148 24.3062 24.3128 21.7081 24.3128 18.5033C24.3128 15.2985 21.7148 12.7004 18.5099 12.7004C15.3051 12.7004 12.707 15.2985 12.707 18.5033C12.707 21.7081 15.3051 24.3062 18.5099 24.3062Z" fill="#F0F0F0"/>
+<path d="M15.6083 18.1397C14.5992 18.1397 13.6254 18.2931 12.7087 18.5779C12.7493 21.7478 15.3303 24.3053 18.5098 24.3053C20.4758 24.3053 22.2122 23.3266 23.2618 21.8309C21.466 19.5828 18.7027 18.1397 15.6083 18.1397Z" fill="#0052B4"/>
+<path d="M24.2051 19.6142C24.275 19.2542 24.3127 18.8828 24.3127 18.5025C24.3127 15.2976 21.7147 12.6996 18.5099 12.6996C16.1185 12.6996 14.0657 14.1464 13.1773 16.2121C13.9626 16.0494 14.7757 15.9637 15.6085 15.9637C18.9788 15.9637 22.0278 17.3647 24.2051 19.6142Z" fill="#0052B4"/>
+</svg>

package/src/components/atoms/Flag/images/esp.svg

@@ -0,0 +1,6 @@
+<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5168" cy="18.5033" r="18.5033" fill="white"/>
+<path d="M1.8335 18.5027C1.8335 20.5434 2.20059 22.4982 2.87119 24.3056L18.5168 25.7563L34.1625 24.3056C34.8331 22.4982 35.2002 20.5434 35.2002 18.5027C35.2002 16.462 34.8331 14.5072 34.1625 12.6998L18.5168 11.2491L2.87119 12.6998C2.20059 14.5072 1.8335 16.462 1.8335 18.5027Z" fill="#FFDA44"/>
+<path d="M34.1628 12.7003C31.8055 6.34735 25.6904 1.81982 18.5171 1.81982C11.3439 1.81982 5.2287 6.34735 2.87146 12.7003H34.1628Z" fill="#D80027"/>
+<path d="M2.87119 24.3056C5.22842 30.6586 11.3439 35.1865 18.5171 35.1865C25.6904 35.1865 31.8052 30.6586 34.1625 24.3056H2.87119Z" fill="#D80027"/>
+</svg>

package/src/components/atoms/Flag/images/usa.svg

@@ -0,0 +1,9 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5033" cy="18.5033" r="18.5033" fill="white"/>
+<path d="M18.5034 35.1865C27.7174 35.1865 35.1867 27.7171 35.1867 18.5032C35.1867 9.28921 27.7174 1.81982 18.5034 1.81982C9.28945 1.81982 1.82007 9.28921 1.82007 18.5032C1.82007 27.7171 9.28945 35.1865 18.5034 35.1865Z" fill="#F0F0F0"/>
+<path d="M17.7779 18.5037H35.1866C35.1866 16.9978 34.9858 15.5391 34.6118 14.1515H17.7779V18.5037Z" fill="#D80027"/>
+<path d="M17.7779 9.79934H32.7379C31.7166 8.13283 30.4108 6.65981 28.8883 5.44714H17.7779V9.79934Z" fill="#D80027"/>
+<path d="M18.5034 35.1865C22.4298 35.1865 26.0384 33.8298 28.8882 31.5601H8.11799C10.9678 33.8298 14.577 35.1865 18.5034 35.1865Z" fill="#D80027"/>
+<path d="M4.26857 27.208H32.7379C33.5578 25.8701 34.1936 24.4077 34.6118 22.8558H2.39463C2.81282 24.4077 3.44867 25.8701 4.26857 27.208Z" fill="#D80027"/>
+<path d="M9.5481 4.42516H11.0684L9.65426 5.45255L10.1944 7.11496L8.78034 6.08756L7.36623 7.11496L7.83285 5.67882C6.58772 6.71599 5.4964 7.93114 4.59706 9.28509H5.0842L4.18402 9.93907C4.04377 10.173 3.90926 10.4107 3.78036 10.6519L4.21022 11.9749L3.40824 11.3922C3.20889 11.8146 3.02655 12.2465 2.86265 12.6873L3.33623 14.145H5.0842L3.67003 15.1724L4.21022 16.8348L2.79611 15.8074L1.94904 16.4229C1.86425 17.1044 1.82007 17.7986 1.82007 18.5032H18.5034C18.5034 9.28927 18.5034 8.20302 18.5034 1.81982C15.2077 1.81982 12.1354 2.77586 9.5481 4.42516ZM10.1944 16.8348L8.78034 15.8074L7.36623 16.8348L7.90642 15.1724L6.49225 14.145H8.24022L8.78034 12.4826L9.32046 14.145H11.0684L9.65426 15.1724L10.1944 16.8348ZM9.65426 10.3125L10.1944 11.9749L8.78034 10.9475L7.36623 11.9749L7.90642 10.3125L6.49225 9.28509H8.24022L8.78034 7.62269L9.32046 9.28509H11.0684L9.65426 10.3125ZM16.1787 16.8348L14.7646 15.8074L13.3505 16.8348L13.8907 15.1724L12.4765 14.145H14.2245L14.7646 12.4826L15.3047 14.145H17.0527L15.6385 15.1724L16.1787 16.8348ZM15.6385 10.3125L16.1787 11.9749L14.7646 10.9475L13.3505 11.9749L13.8907 10.3125L12.4765 9.28509H14.2245L14.7646 7.62269L15.3047 9.28509H17.0527L15.6385 10.3125ZM15.6385 5.45255L16.1787 7.11496L14.7646 6.08756L13.3505 7.11496L13.8907 5.45255L12.4765 4.42516H14.2245L14.7646 2.76276L15.3047 4.42516H17.0527L15.6385 5.45255Z" fill="#0052B4"/>
+</svg>

package/src/components/atoms/Flag/index.ts

@@ -0,0 +1,2 @@
+export * from "./Flag";
+export * from "./Flag.types";

package/src/components/atoms/Icon/Icon.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Icon } from ".";
+
+import iconsSelection from "./assets/selection.json";
+import { Typography } from "..";
+
+const meta = {
+  title: "Components/Atoms/Icon",
+  component: Icon,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    name: "chevron-right"
+  }
+};
+
+export const Icons = () => (
+  <div className="flex gap-4 flex-wrap">
+    {iconsSelection.icons.map((icon) => (
+      <div className="flex flex-col w-32 h gap-4 justify-center items-center p-6 bg-white shadow-md rounded">
+        <Icon className="text-xl" name={icon.properties.name} />
+        <Typography className="text-xs">{icon.properties.name}</Typography>
+      </div>
+    ))}
+  </div>
+);

package/src/components/atoms/Icon/Icon.tsx

@@ -0,0 +1,6 @@
+import { IconProps } from "./icon.types";
+import "./assets/style.css";
+
+export const Icon = ({ name, className, ...props }: IconProps) => {
+  return <span {...props} className={`icon-${name} ${className ?? ""}`} />;
+};

package/src/components/atoms/Icon/assets/fonts/icomoon.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="alert-circle" d="M479.562 943.195l-25.249-2.704c-85.122-9.016-168.126-42.381-241.661-97.025-27.458-20.423-75.563-68.53-96.213-96.124-112.624-150.903-131.877-345.585-50.901-514.566 24.618-51.308 53.156-91.118 96.528-134.446 43.329-43.372 83.138-71.911 134.446-96.528 168.936-80.974 363.753-61.632 514.745 51.083 27.458 20.47 75.698 68.711 96.169 96.169 134.086 179.667 134.086 418.804 0 598.47-20.47 27.413-68.666 75.61-96.033 95.944-71.911 53.472-147.656 84.537-235.214 96.44-19.071 2.616-83.365 4.78-96.62 3.292zM571.537 849.506c115.556-17.447 216.593-82.507 281.336-181.201 13.662-20.875 33.498-61.272 42.020-85.663 15.6-44.769 21.866-83.183 21.866-134.357 0-67.314-11.587-118.17-40.442-177.639-31.786-65.555-79.757-120.244-142.157-161.949-35.573-23.806-92.472-47.612-136.114-57.034-25.62-5.722-55.043-8.998-85.231-8.998-96.674 0-185.496 33.609-255.424 89.779l0.796-0.619c-68.215 54.644-119.387 134.806-139.902 219.072-8.387 34.401-11 57.348-11 97.385 0 67.314 11.587 118.17 40.442 177.639 48.209 97.574 131.699 171.591 233.4 206.28l2.851 0.844c31.786 10.504 57.348 15.69 98.288 19.928 14.519 1.488 70.83-0.676 89.27-3.471zM494.621 671.144c-9.882-2.687-17.931-9.133-22.672-17.667l-0.094-0.187c-4.012-7.484-4.012-7.935-4.508-110.821-0.36-66.771 0.136-105.727 1.352-110.19 4.735-17.674 17.764-27.322 38.638-28.674 21.866-1.397 36.204 4.915 44.365 19.523l4.508 8.025v214.608l-4.012 7.528c-2.526 4.494-5.734 8.293-9.532 11.395l-0.071 0.056c-11.903 8.52-32.507 11.227-47.972 6.403zM494.621 310.547c-17.764-5.816-25.925-17.223-27.277-38.097-1.397-21.687 4.959-36.025 19.523-44.184 6.988-3.923 10.235-4.508 25.158-4.508 14.067 0 18.395 0.721 24.346 3.876 14.698 7.935 20.739 19.611 20.739 40.306 0 28.99-12.939 42.922-41.344 44.365-8.567 0.452-16.455-0.224-21.146-1.759z" />
+<glyph unicode="&#xe901;" glyph-name="chevron-down" d="M86.74 711.961c-13.743-7.271-32.022-25.885-39.226-39.959-3.593-6.962-5.699-15.194-5.699-23.918 0-8.777 2.132-17.053 5.906-24.343l-0.14 0.295c8.339-16.68 423.485-431.822 440.161-440.161 7.050-3.626 15.386-5.753 24.216-5.753s17.166 2.127 24.519 5.894l-0.303-0.141c16.68 8.339 431.822 423.485 440.161 440.161 11.741 23.549 5.737 47.899-17.345 70.981-22.684 22.684-48.099 28.753-71.58 17.012-7.472-3.734-71.38-65.711-193.329-187.392l-182.121-181.854-182.121 181.854c-121.949 121.682-185.858 183.656-193.329 187.392-7.274 3.457-15.806 5.475-24.812 5.475-9.058 0-17.641-2.042-25.313-5.692l0.355 0.152z" />
+<glyph unicode="&#xe902;" glyph-name="chevron-left" d="M696.431 937.701c-16.683-8.519-455.166-447.703-463.259-463.964-3.67-7.465-5.925-16.214-6.192-25.461l-0.002-0.092c0-7.814 2.463-18.021 6.195-25.553 8.798-17.599 446.859-455.657 464.458-464.458 24.848-12.388 50.544-6.053 74.898 18.302 24.426 24.426 30.692 50.050 18.302 74.898-4.434 8.729-63.566 69.902-198.087 204.633l-191.892 192.174 191.892 192.174c134.521 134.733 193.654 195.904 198.087 204.633 12.388 24.848 6.124 50.472-18.302 74.898-23.934 23.934-51.6 30.411-76.097 17.811z" />
+<glyph unicode="&#xe903;" glyph-name="chevron-right" d="M274.397 938.15c-14.506-7.676-33.802-27.323-41.407-42.182-3.793-7.347-6.016-16.037-6.016-25.248 0-9.265 2.25-18.003 6.233-25.699l-0.148 0.312c4.436-8.732 63.589-69.927 198.164-204.713l191.967-192.248-191.967-192.248c-134.573-134.785-193.727-195.98-198.164-204.713-12.393-24.858-6.126-50.492 18.309-74.927 24.366-24.366 50.068-30.704 74.927-18.309 17.606 8.802 455.833 447.031 464.636 464.636 3.671 7.468 5.928 16.22 6.194 25.472l0.002 0.092c-0.268 9.341-2.525 18.096-6.36 25.936l0.164-0.373c-8.522 17.112-446.96 455.833-464.002 464.284-7.679 3.647-16.687 5.779-26.192 5.779-9.563 0-18.623-2.157-26.72-6.009l0.376 0.161z" />
+<glyph unicode="&#xe904;" glyph-name="credit-card" d="M122.87 814.718c-45.789-7.741-83.47-41.162-97.682-86.706l-3.85-12.287v-535.715l3.85-12.287c12.591-40.186 43.612-71.207 82.901-83.554l0.897-0.243 12.287-3.85h781.455l12.287 3.85c40.186 12.591 71.207 43.612 83.554 82.901l0.243 0.897 3.85 12.287v535.715l-3.85 12.287c-12.527 39.881-43.174 70.717-82.042 83.262l-0.897 0.25-13.147 4.136-385.813 0.246c-212.197 0.122-389.54-0.41-394.045-1.187zM893.308 732.067c6.274-1.981 11.613-5.404 15.833-9.892l0.019-0.020c12.122-12.122 12.41-14.212 12.41-87.812v-63.606h-819.135v63.606c0 73.641 0.287 75.688 12.451 87.812 4.087 4.335 9.153 7.7 14.847 9.746l0.265 0.083c6.554 2.006 60.903 2.375 381.308 2.458 329.949 0.122 374.59-0.163 382.004-2.375zM921.568 343.264c0-157.93 0.205-154.324-9.051-166.448-2.499-3.277-7.945-7.986-12.082-10.403l-7.536-4.424h-761.796l-7.536 4.424c-4.601 2.832-8.531 6.217-11.861 10.129l-0.058 0.069c-9.543 12.532-9.216 6.511-9.216 165.793v146.42h819.135v-145.56z" />
+<glyph unicode="&#xe905;" glyph-name="download" d="M492.829 941.381c-10.883-2.958-19.748-10.059-24.973-19.459l-0.104-0.207-4.42-8.292-0.545-247.21-0.497-247.258-85.911 85.614c-55.718 55.57-88.793 87.104-94.207 89.835-17.481 8.74-36.402 4.222-53.286-12.664-17.232-17.232-21.653-35.309-12.863-52.839 3.029-6.107 42.559-47.177 128.818-133.984 68.432-68.879 126.138-127.775 128.223-130.854 5.065-7.649 27.064-17.529 38.934-17.529s33.869 9.884 38.934 17.529c2.085 3.078 59.792 61.975 128.223 130.854 86.261 86.806 125.79 127.875 128.818 133.984 8.789 17.529 4.371 35.607-12.863 52.839-16.886 16.886-35.805 21.404-53.286 12.664-5.414-2.732-38.487-34.265-94.207-89.835l-85.863-85.565-1.092 494.419-4.42 8.292c-2.783 4.951-6.316 9.135-10.5 12.553l-0.078 0.062c-13.111 9.387-35.805 12.366-52.839 7.052zM45.887 345.458c-10.883-2.958-19.748-10.059-24.973-19.459l-0.104-0.207-4.42-8.292v-244.328l4.669-14.899c9.139-29.298 24.583-52.293 49.412-73.547 14.004-12.017 32.33-21.901 52.193-28.058l14.899-4.669h748.876l14.899 4.669c48.726 15.268 86.337 52.879 101.311 100.52l0.294 1.085 4.669 14.899v244.328l-4.519 8.442c-8.194 15.396-27.808 23.838-50.406 21.801-21.603-1.987-36.402-13.060-41.367-30.988-1.242-4.42-2.035-48.816-2.035-114.666 0-116.601-0.15-118.588-10.975-132.792-3.029-3.973-9.634-9.684-14.651-12.614l-9.139-5.363h-725.040l-9.139 5.363c-9.66 5.925-17.262 14.373-22.001 24.433l-0.147 0.346c-1.837 4.172-2.732 34.762-3.477 120.823-0.993 114.418-1.043 115.261-5.414 123.505-2.783 4.951-6.316 9.135-10.5 12.553l-0.078 0.062c-13.111 9.387-35.805 12.366-52.839 7.052z" />
+<glyph unicode="&#xe906;" glyph-name="external-link" d="M794.006 942.339l-151.696-1.040-9.863-5.054c-16.85-8.673-23.837-23.986-22.3-48.666 1.437-22.747 11.943-37.069 31.023-42.371 4.362-1.239 44.353-2.031 101.345-2.031h94.11l-234.158-234.406c-167.702-167.801-235.446-236.884-238.618-243.178-8.721-17.494-4.311-35.583 12.884-52.728 17.147-17.197 35.236-21.607 52.728-12.884 6.293 3.172 75.377 70.917 243.178 238.618l234.406 234.158v-94.11c0-56.992 0.793-96.984 2.031-101.345 5.301-19.080 19.624-29.586 42.371-31.023 24.034-1.536 39.794 5.402 48.764 21.459l4.956 8.822 1.337 156.601c0.743 86.13 1.389 159.525 1.487 163.094 0.199 9.367-10.010 30.676-17.197 35.781-11.101 7.88-24.034 12.29-34.839 11.796-5.65-0.247-78.549-0.942-161.954-1.487zM138.857 791.486c-55.307-9.267-100.999-49.804-118.194-104.912l-4.659-14.867v-598.654l4.659-14.867c15.235-48.626 52.77-86.159 100.311-101.101l1.085-0.293 14.867-4.659h598.654l14.867 4.659c48.626 15.235 86.159 52.77 101.101 100.311l0.293 1.085 4.659 14.867v342.936l-4.51 8.424c-8.177 15.363-27.751 23.787-50.3 21.756-21.557-1.983-36.326-13.034-41.281-30.924-1.288-4.558-2.031-65.068-2.031-163.985 0-170.081 0.149-167.504-10.951-182.074-3.023-3.964-9.614-9.664-14.62-12.587l-9.119-5.353h-574.865l-9.119 5.353c-5.567 3.428-10.323 7.523-14.351 12.254l-0.070 0.086c-11.796 15.463-11.15-1.585-11.15 302.349 0 314.194-1.090 292.092 15.016 308.198 15.61 15.61 8.177 15.016 186.040 15.016 98.917 0 159.377 0.743 163.935 2.031 11.026 3.042 20.021 10.196 25.414 19.667l0.108 0.206c4.311 7.73 4.956 11.2 4.906 27.653-0.050 21.459-4.014 31.964-14.916 39.696-13.925 9.911-13.034 9.863-185.048 9.614-88.411-0.098-165.274-0.991-170.726-1.884z" />
+<glyph unicode="&#xe907;" glyph-name="eye-off" d="M37.011 938.908c-7.44-4.919-15.211-13.392-19.096-20.832-2.893-5.497-2.397-26.205 0.744-32.446 1.488-2.893 43.936-46.623 94.363-97.173l91.676-91.883-22.072-19.881c-55.882-50.302-111.391-120.526-152.394-192.652-19.923-35.091-19.551-40.216 6.572-83.906 22.981-38.439 50.839-77.582 81.963-114.987 17.277-20.832 68.571-72.374 88.204-88.659 77.664-64.52 156.486-101.967 243.863-115.938 29.181-4.671 84.691-4.919 114.905-0.537 64.774 9.256 123.081 30.451 174.918 61.366l-2.146-1.186 14.053 8.391 95.891-95.643c52.74-52.575 98.289-96.801 101.182-98.289 3.431-1.695 9.589-2.645 17.484-2.645 10.871 0 13.061 0.579 19.881 5.084 7.44 4.919 15.211 13.392 19.096 20.832 1.033 1.984 1.901 9.135 1.901 15.872 0 10.788-0.579 13.061-4.877 19.509-6.696 10.003-922.132 924.736-928.745 928.042-3.431 1.695-9.631 2.645-17.484 2.645-10.871 0-13.061-0.579-19.881-5.084zM483.073 819.043c-38.77-3.885-70.679-9.879-81.384-15.335-17.443-8.928-22.651-27.611-14.467-51.748 3.431-9.961 12.565-20.501 19.964-22.94 7.233-2.397 20.584-2.356 31.413 0.083 21.828 4.99 46.894 7.847 72.629 7.847 24.765 0 48.908-2.647 72.168-7.674l-2.239 0.405c112.673-22.94 225.345-110.358 314.128-243.697 27.404-41.126 25.833-34.802 13.681-54.89-18.486-29.629-36.424-54.854-55.698-78.967l1.263 1.635c-15.665-19.427-20.419-28.396-20.419-38.728 0-9.961 3.844-17.897 13.020-26.825 15.789-15.335 32.074-19.179 47.078-10.995 16.285 8.845 62.164 70.431 96.553 129.578 23.188 39.844 23.064 44.267-2.356 87.212-37.302 62.647-79.77 116.755-128.241 164.821l-0.056 0.055c-52.906 52.864-96.015 84.608-154.667 113.789-47.987 23.891-92.875 37.778-142.185 43.978-14.921 1.901-69.067 3.472-80.186 2.397zM363.497 523.722c-7.027-12.235-16.161-40.547-18.6-57.411-2.273-15.748-1.281-38.026 2.439-55.51 13.81-64.070 63.4-113.659 126.385-127.273l1.085-0.197c36.992-7.853 73.986-2.976 109.035 14.467l13.144 6.531 95.767-95.767-18.145-9.093c-55.551-27.859-106.762-40.010-167.562-39.762-34.884 0.124-55.51 2.852-85.146 11.325-108.953 31.041-213.029 116.558-296.355 243.491-23.767 36.207-22.609 30.421-10.209 50.798 36.103 58.15 77.662 108.281 125.123 152.115l22.683 20.74 105.481-105.481-5.125-8.969zM482.99 418.323c28.148-28.189 50.839-51.5 50.426-51.872-2.371-0.956-5.22-1.825-8.155-2.456l-0.358-0.065c-32.694-8.019-71.795 10.664-88.618 42.324-7.068 13.309-10.871 31.165-9.424 44.226s2.645 19.013 3.927 19.013c0.579 0 24.097-23.023 52.203-51.17z" />
+<glyph unicode="&#xe908;" glyph-name="eye" d="M476.812 814.942c-91.938-8.183-178.844-45.99-262.682-114.237-22.013-17.88-73.24-69.23-93.411-93.576-27.898-33.332-54.401-70.307-78.054-109.206l-2.265-4.009c-25.408-43.004-25.408-48.075 0-91.079 26.595-43.828 53.754-81.602 83.511-117.127l-1.187 1.456c17.103-20.621 67.881-71.644 87.316-87.765 95.252-79.132 196.848-119.231 301.963-119.231 101.186 0 199.262 37.274 291.528 110.8 24.55 19.599 77.168 71.317 97.789 96.194 28.531 34.062 55.678 71.838 79.947 111.56l2.335 4.112c25.408 43.004 25.408 48.075 0 91.079-36.927 62.014-78.968 115.578-126.948 163.159l-0.056 0.055c-52.373 52.333-95.049 83.755-153.109 112.642-47.258 23.526-92.471 37.52-140.752 43.534-19.762 2.456-66.611 3.355-85.924 1.636zM542.401 733.070c113.297-11.048 221.112-79.46 315.996-200.613 12.97-16.572 49.221-69.557 54.46-79.622 2.865-5.524 3.109-4.991-18.289-37.602-76.268-116.162-173.648-200.285-270.457-233.633-36.375-12.521-63.503-17.677-100.654-19.107-41.858-1.595-75.777 3.436-118.575 17.634-99.877 33.061-197.545 116.447-275.448 235.106-21.4 32.57-21.154 32.118-18.289 37.561 5.319 10.106 35.598 54.828 49.058 72.503 112.439 147.544 247.339 220.865 382.198 207.772zM485.731 609.544c-46.153-7.2-90.63-37.358-114.115-77.413-14.495-23.907-23.073-52.8-23.073-83.696 0-68.318 41.943-126.839 101.484-151.218l1.089-0.394c18.045-7.475 38.999-11.817 60.968-11.817 68.256 0 126.725 41.91 151.074 101.401l0.393 1.088c7.497 18.004 11.851 38.921 11.851 60.853 0 21.895-4.34 42.775-12.205 61.827l0.393-1.079c-21.587 53.034-68.85 91.572-125.925 100.454l-0.915 0.116c-7.561 1.328-16.266 2.088-25.149 2.088-9.141 0-18.093-0.805-26.792-2.346l0.92 0.135zM533.4 527.22c30.737-8.794 53.801-34.225 59.016-65.681l0.066-0.48c4.092-26.718-3.846-50.859-23.077-70.131-16.407-16.489-35.024-24.386-57.404-24.386-21.072 0-39.361 7.284-55.114 21.891-54.418 50.572-18.985 141.571 55.114 141.571 5.851 0 15.467-1.268 21.4-2.782z" />
+<glyph unicode="&#xe909;" glyph-name="help-circle" d="M481.28 916.352l-23.893-2.56c-80.555-8.533-159.104-40.107-228.693-91.819-25.984-19.328-71.509-64.853-91.051-90.965-106.581-142.805-124.8-327.040-48.171-486.955 23.296-48.555 50.304-86.229 91.349-127.232 41.003-41.045 78.677-68.053 127.232-91.349 159.872-76.629 344.235-58.325 487.125 48.341 25.984 19.371 71.637 65.024 91.008 91.008 126.891 170.027 126.891 396.331 0 566.357-19.371 25.941-64.981 71.552-90.88 90.795-68.053 50.603-139.733 80-222.592 91.264-18.048 2.475-78.891 4.523-91.435 3.115zM568.32 827.691c109.355-16.512 204.971-78.080 266.24-171.477 12.928-19.755 31.701-57.984 39.765-81.067 14.763-42.368 20.693-78.72 20.693-127.147 0-63.701-10.965-111.829-38.272-168.107-30.080-62.037-75.477-113.792-134.528-153.259-33.664-22.528-87.509-45.056-128.811-53.973-24.244-5.414-52.089-8.515-80.658-8.515-91.486 0-175.543 31.805-241.717 84.962l0.754-0.586c-64.555 51.712-112.981 127.573-132.395 207.317-7.936 32.555-10.411 54.272-10.411 92.16 0 63.701 10.965 111.829 38.272 168.107 45.622 92.339 124.633 162.383 220.876 195.211l2.698 0.799c30.080 9.941 54.272 14.848 93.013 18.859 13.739 1.408 67.029-0.64 84.48-3.285zM482.133 702.208c-22.357-3.456-48.768-14.165-70.827-28.715-38.101-25.131-71.424-80-66.261-109.184 2.56-14.72 15.104-25.173 36.309-30.421 9.771-2.389 12.843-2.517 19.499-0.768 11.392 3.029 20.821 12.971 27.563 28.928 6.741 16.085 12.8 25.003 23.509 34.645 26.325 23.68 61.141 28.501 94.208 13.013 14.848-6.955 31.744-24.021 38.997-39.381 6.059-12.843 9.643-32.128 8.021-43.093-4.096-27.221-38.699-56.917-92.288-79.232-31.019-12.885-39.424-24.107-34.944-46.805 5.675-28.8 22.997-43.221 46.421-38.613 24.832 4.907 68.651 26.965 97.451 49.109 49.365 37.973 71.595 80.213 68.949 130.987-2.261 43.136-18.731 79.957-49.749 111.189-21.063 21.482-47.858 37.271-77.909 44.894l-1.152 0.248c-15.317 3.968-51.925 5.675-67.797 3.2zM495.531 274.987c-16.811-5.504-24.533-16.299-25.813-36.053-1.323-20.523 4.693-34.091 18.475-41.813 6.613-3.712 9.685-4.267 23.808-4.267 13.312 0 17.408 0.683 23.040 3.669 13.909 7.509 19.627 18.56 19.627 38.144 0 27.435-12.245 40.619-39.125 41.984-8.107 0.427-15.573-0.213-20.011-1.664z" />
+<glyph unicode="&#xe90a;" glyph-name="user" d="M482.564 942.337c-81.337-9.181-155.775-61.835-192.251-136.024-18.261-37.12-25.11-67.046-25.11-109.922 0-33.25 2.88-51.809 12.307-79.401 28.683-83.917 98.507-145.157 187.19-164.114 23.374-5.012 71.908-5.012 95.282 0 75.829 16.227 138.357 63.372 172.35 129.971 20.099 39.402 27.145 68.93 27.145 113.545s-7.047 74.141-27.145 113.494c-32.642 62.128-88.993 108.070-156.713 126.199l-1.743 0.397c-18.611 4.778-39.977 7.521-61.983 7.521-10.334 0-20.527-0.604-30.544-1.78l1.215 0.116zM555.067 838.867c46.797-13.697 85.506-52.306 99.947-99.748 4.119-13.547 4.864-19.999 4.864-42.728s-0.744-29.179-4.864-42.728c-15.34-48.21-52.677-85.385-99.91-100.201l-1.081-0.291c-21.538-6.7-61.835-6.7-83.371 0-48.313 15.107-85.65 52.282-100.692 99.414l-0.297 1.080c-4.119 13.547-4.864 19.999-4.864 42.728s0.744 29.179 4.864 42.728c16.928 53.725 61.655 93.904 116.887 104.023l0.926 0.141c16.525 2.978 49.676 0.842 67.591-4.417zM284.059 346.825c-81.337-9.181-155.775-61.835-192.251-136.024-8.608-17.253-15.919-37.356-20.903-58.363l-0.388-1.933c-2.778-12.158-3.572-27.938-4.267-86.548-0.545-47.492-0.15-74.389 1.289-79.599 5.309-19.851 19.502-30.42 42.628-31.909 24.069-1.538 39.849 5.41 48.831 21.488l4.963 8.835 1.142 72.453c1.142 69.475 1.391 73.099 6.053 88.383 15.458 48.453 53.168 85.737 100.803 100.307l1.080 0.283 15.979 4.564h446.634l15.979-4.564c48.719-14.864 86.442-52.145 101.633-99.512l0.299-1.080c4.666-15.283 4.913-18.809 6.005-88.383l1.142-72.453 4.963-8.835c8.286-14.788 22.43-21.935 43.672-21.935s35.382 7.147 43.672 21.935l4.963 8.835v74.438c0 64.464-0.497 76.671-3.624 91.312-13.994 65.456-51.809 122.279-104.563 157.117-37.417 24.765-69.675 36.673-111.56 41.24-23.224 2.58-431.598 2.481-454.178-0.050z" />
+</font></defs></svg>

package/src/components/atoms/Icon/assets/selection.json

@@ -0,0 +1,285 @@
+{
+  "IcoMoonType": "selection",
+  "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M482.564 17.663c-81.337 9.181-155.775 61.835-192.251 136.024-18.261 37.12-25.11 67.046-25.11 109.922 0 33.25 2.88 51.809 12.307 79.401 28.683 83.917 98.507 145.157 187.19 164.114 23.374 5.012 71.908 5.012 95.282 0 75.829-16.227 138.357-63.372 172.35-129.971 20.099-39.402 27.145-68.93 27.145-113.545s-7.047-74.141-27.145-113.494c-32.642-62.128-88.993-108.070-156.713-126.199l-1.743-0.397c-18.611-4.778-39.977-7.521-61.983-7.521-10.334 0-20.527 0.604-30.544 1.78l1.215-0.116zM555.067 121.133c46.797 13.697 85.506 52.306 99.947 99.748 4.119 13.547 4.864 19.999 4.864 42.728s-0.744 29.179-4.864 42.728c-15.34 48.21-52.677 85.385-99.91 100.201l-1.081 0.291c-21.538 6.7-61.835 6.7-83.371 0-48.313-15.107-85.65-52.282-100.692-99.414l-0.297-1.080c-4.119-13.547-4.864-19.999-4.864-42.728s0.744-29.179 4.864-42.728c16.928-53.725 61.655-93.904 116.887-104.023l0.926-0.141c16.525-2.978 49.676-0.842 67.591 4.417zM284.059 613.175c-81.337 9.181-155.775 61.835-192.251 136.024-8.608 17.253-15.919 37.356-20.903 58.363l-0.388 1.933c-2.778 12.158-3.572 27.938-4.267 86.548-0.545 47.492-0.15 74.389 1.289 79.599 5.309 19.851 19.502 30.42 42.628 31.909 24.069 1.538 39.849-5.41 48.831-21.488l4.963-8.835 1.142-72.453c1.142-69.475 1.391-73.099 6.053-88.383 15.458-48.453 53.168-85.737 100.803-100.307l1.080-0.283 15.979-4.564h446.634l15.979 4.564c48.719 14.864 86.442 52.145 101.633 99.512l0.299 1.080c4.666 15.283 4.913 18.809 6.005 88.383l1.142 72.453 4.963 8.835c8.286 14.788 22.43 21.935 43.672 21.935s35.382-7.147 43.672-21.935l4.963-8.835v-74.438c0-64.464-0.497-76.671-3.624-91.312-13.994-65.456-51.809-122.279-104.563-157.117-37.417-24.765-69.675-36.673-111.56-41.24-23.224-2.58-431.598-2.481-454.178 0.050z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["user"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 13,
+        "id": 10,
+        "name": "user",
+        "prevSize": 32,
+        "code": 59658
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M479.562 16.805l-25.249 2.704c-85.122 9.016-168.126 42.381-241.661 97.025-27.458 20.423-75.563 68.53-96.213 96.124-112.624 150.903-131.877 345.585-50.901 514.566 24.618 51.308 53.156 91.118 96.528 134.446 43.329 43.372 83.138 71.911 134.446 96.528 168.936 80.974 363.753 61.632 514.745-51.083 27.458-20.47 75.698-68.711 96.169-96.169 134.086-179.667 134.086-418.804 0-598.47-20.47-27.413-68.666-75.61-96.033-95.944-71.911-53.472-147.656-84.537-235.214-96.44-19.071-2.616-83.365-4.78-96.62-3.292zM571.537 110.494c115.556 17.447 216.593 82.507 281.336 181.201 13.662 20.875 33.498 61.272 42.020 85.663 15.6 44.769 21.866 83.183 21.866 134.357 0 67.314-11.587 118.17-40.442 177.639-31.786 65.555-79.757 120.244-142.157 161.949-35.573 23.806-92.472 47.612-136.114 57.034-25.62 5.722-55.043 8.998-85.231 8.998-96.674 0-185.496-33.609-255.424-89.779l0.796 0.619c-68.215-54.644-119.387-134.806-139.902-219.072-8.387-34.401-11-57.348-11-97.385 0-67.314 11.587-118.17 40.442-177.639 48.209-97.574 131.699-171.591 233.4-206.28l2.851-0.844c31.786-10.504 57.348-15.69 98.288-19.928 14.519-1.488 70.83 0.676 89.27 3.471zM494.621 288.856c-9.882 2.687-17.931 9.133-22.672 17.667l-0.094 0.187c-4.012 7.484-4.012 7.935-4.508 110.821-0.36 66.771 0.136 105.727 1.352 110.19 4.735 17.674 17.764 27.322 38.638 28.674 21.866 1.397 36.204-4.915 44.365-19.523l4.508-8.025v-214.608l-4.012-7.528c-2.526-4.494-5.734-8.293-9.532-11.395l-0.071-0.056c-11.903-8.52-32.507-11.227-47.972-6.403zM494.621 649.453c-17.764 5.816-25.925 17.223-27.277 38.097-1.397 21.687 4.959 36.025 19.523 44.184 6.988 3.923 10.235 4.508 25.158 4.508 14.067 0 18.395-0.721 24.346-3.876 14.698-7.935 20.739-19.611 20.739-40.306 0-28.99-12.939-42.922-41.344-44.365-8.567-0.452-16.455 0.224-21.146 1.759z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["alert-circle"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 3,
+        "id": 9,
+        "name": "alert-circle",
+        "prevSize": 32,
+        "code": 59648
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 1
+    },
+    {
+      "icon": {
+        "paths": [
+          "M86.74 248.039c-13.743 7.271-32.022 25.885-39.226 39.959-3.593 6.962-5.699 15.194-5.699 23.918 0 8.777 2.132 17.053 5.906 24.343l-0.14-0.295c8.339 16.68 423.485 431.822 440.161 440.161 7.050 3.626 15.386 5.753 24.216 5.753s17.166-2.127 24.519-5.894l-0.303 0.141c16.68-8.339 431.822-423.485 440.161-440.161 11.741-23.549 5.737-47.899-17.345-70.981-22.684-22.684-48.099-28.753-71.58-17.012-7.472 3.734-71.38 65.711-193.329 187.392l-182.121 181.854-182.121-181.854c-121.949-121.682-185.858-183.656-193.329-187.392-7.274-3.457-15.806-5.475-24.812-5.475-9.058 0-17.641 2.042-25.313 5.692l0.355-0.152z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["chevron-down"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 4,
+        "id": 8,
+        "name": "chevron-down",
+        "prevSize": 32,
+        "code": 59649
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 2
+    },
+    {
+      "icon": {
+        "paths": [
+          "M696.431 22.299c-16.683 8.519-455.166 447.703-463.259 463.964-3.67 7.465-5.925 16.214-6.192 25.461l-0.002 0.092c0 7.814 2.463 18.021 6.195 25.553 8.798 17.599 446.859 455.657 464.458 464.458 24.848 12.388 50.544 6.053 74.898-18.302 24.426-24.426 30.692-50.050 18.302-74.898-4.434-8.729-63.566-69.902-198.087-204.633l-191.892-192.174 191.892-192.174c134.521-134.733 193.654-195.904 198.087-204.633 12.388-24.848 6.124-50.472-18.302-74.898-23.934-23.934-51.6-30.411-76.097-17.811z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["chevron-left"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 5,
+        "id": 7,
+        "name": "chevron-left",
+        "prevSize": 32,
+        "code": 59650
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 3
+    },
+    {
+      "icon": {
+        "paths": [
+          "M274.397 21.85c-14.506 7.676-33.802 27.323-41.407 42.182-3.793 7.347-6.016 16.037-6.016 25.248 0 9.265 2.25 18.003 6.233 25.699l-0.148-0.312c4.436 8.732 63.589 69.927 198.164 204.713l191.967 192.248-191.967 192.248c-134.573 134.785-193.727 195.98-198.164 204.713-12.393 24.858-6.126 50.492 18.309 74.927 24.366 24.366 50.068 30.704 74.927 18.309 17.606-8.802 455.833-447.031 464.636-464.636 3.671-7.468 5.928-16.22 6.194-25.472l0.002-0.092c-0.268-9.341-2.525-18.096-6.36-25.936l0.164 0.373c-8.522-17.112-446.96-455.833-464.002-464.284-7.679-3.647-16.687-5.779-26.192-5.779-9.563 0-18.623 2.157-26.72 6.009l0.376-0.161z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["chevron-right"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 6,
+        "id": 6,
+        "name": "chevron-right",
+        "prevSize": 32,
+        "code": 59651
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 4
+    },
+    {
+      "icon": {
+        "paths": [
+          "M122.87 145.282c-45.789 7.741-83.47 41.162-97.682 86.706l-3.85 12.287v535.715l3.85 12.287c12.591 40.186 43.612 71.207 82.901 83.554l0.897 0.243 12.287 3.85h781.455l12.287-3.85c40.186-12.591 71.207-43.612 83.554-82.901l0.243-0.897 3.85-12.287v-535.715l-3.85-12.287c-12.527-39.881-43.174-70.717-82.042-83.262l-0.897-0.25-13.147-4.136-385.813-0.246c-212.197-0.122-389.54 0.41-394.045 1.187zM893.308 227.933c6.274 1.981 11.613 5.404 15.833 9.892l0.019 0.020c12.122 12.122 12.41 14.212 12.41 87.812v63.606h-819.135v-63.606c0-73.641 0.287-75.688 12.451-87.812 4.087-4.335 9.153-7.7 14.847-9.746l0.265-0.083c6.554-2.006 60.903-2.375 381.308-2.458 329.949-0.122 374.59 0.163 382.004 2.375zM921.568 616.736c0 157.93 0.205 154.324-9.051 166.448-2.499 3.277-7.945 7.986-12.082 10.403l-7.536 4.424h-761.796l-7.536-4.424c-4.601-2.832-8.531-6.217-11.861-10.129l-0.058-0.069c-9.543-12.532-9.216-6.511-9.216-165.793v-146.42h819.135v145.56z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["credit-card"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 7,
+        "id": 5,
+        "name": "credit-card",
+        "prevSize": 32,
+        "code": 59652
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 5
+    },
+    {
+      "icon": {
+        "paths": [
+          "M492.829 18.619c-10.883 2.958-19.748 10.059-24.973 19.459l-0.104 0.207-4.42 8.292-0.545 247.21-0.497 247.258-85.911-85.614c-55.718-55.57-88.793-87.104-94.207-89.835-17.481-8.74-36.402-4.222-53.286 12.664-17.232 17.232-21.653 35.309-12.863 52.839 3.029 6.107 42.559 47.177 128.818 133.984 68.432 68.879 126.138 127.775 128.223 130.854 5.065 7.649 27.064 17.529 38.934 17.529s33.869-9.884 38.934-17.529c2.085-3.078 59.792-61.975 128.223-130.854 86.261-86.806 125.79-127.875 128.818-133.984 8.789-17.529 4.371-35.607-12.863-52.839-16.886-16.886-35.805-21.404-53.286-12.664-5.414 2.732-38.487 34.265-94.207 89.835l-85.863 85.565-1.092-494.419-4.42-8.292c-2.783-4.951-6.316-9.135-10.5-12.553l-0.078-0.062c-13.111-9.387-35.805-12.366-52.839-7.052zM45.887 614.542c-10.883 2.958-19.748 10.059-24.973 19.459l-0.104 0.207-4.42 8.292v244.328l4.669 14.899c9.139 29.298 24.583 52.293 49.412 73.547 14.004 12.017 32.33 21.901 52.193 28.058l14.899 4.669h748.876l14.899-4.669c48.726-15.268 86.337-52.879 101.311-100.52l0.294-1.085 4.669-14.899v-244.328l-4.519-8.442c-8.194-15.396-27.808-23.838-50.406-21.801-21.603 1.987-36.402 13.060-41.367 30.988-1.242 4.42-2.035 48.816-2.035 114.666 0 116.601-0.15 118.588-10.975 132.792-3.029 3.973-9.634 9.684-14.651 12.614l-9.139 5.363h-725.040l-9.139-5.363c-9.66-5.925-17.262-14.373-22.001-24.433l-0.147-0.346c-1.837-4.172-2.732-34.762-3.477-120.823-0.993-114.418-1.043-115.261-5.414-123.505-2.783-4.951-6.316-9.135-10.5-12.553l-0.078-0.062c-13.111-9.387-35.805-12.366-52.839-7.052z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["download"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 8,
+        "id": 4,
+        "name": "download",
+        "prevSize": 32,
+        "code": 59653
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 6
+    },
+    {
+      "icon": {
+        "paths": [
+          "M794.006 17.661l-151.696 1.040-9.863 5.054c-16.85 8.673-23.837 23.986-22.3 48.666 1.437 22.747 11.943 37.069 31.023 42.371 4.362 1.239 44.353 2.031 101.345 2.031h94.11l-234.158 234.406c-167.702 167.801-235.446 236.884-238.618 243.178-8.721 17.494-4.311 35.583 12.884 52.728 17.147 17.197 35.236 21.607 52.728 12.884 6.293-3.172 75.377-70.917 243.178-238.618l234.406-234.158v94.11c0 56.992 0.793 96.984 2.031 101.345 5.301 19.080 19.624 29.586 42.371 31.023 24.034 1.536 39.794-5.402 48.764-21.459l4.956-8.822 1.337-156.601c0.743-86.13 1.389-159.525 1.487-163.094 0.199-9.367-10.010-30.676-17.197-35.781-11.101-7.88-24.034-12.29-34.839-11.796-5.65 0.247-78.549 0.942-161.954 1.487zM138.857 168.514c-55.307 9.267-100.999 49.804-118.194 104.912l-4.659 14.867v598.654l4.659 14.867c15.235 48.626 52.77 86.159 100.311 101.101l1.085 0.293 14.867 4.659h598.654l14.867-4.659c48.626-15.235 86.159-52.77 101.101-100.311l0.293-1.085 4.659-14.867v-342.936l-4.51-8.424c-8.177-15.363-27.751-23.787-50.3-21.756-21.557 1.983-36.326 13.034-41.281 30.924-1.288 4.558-2.031 65.068-2.031 163.985 0 170.081 0.149 167.504-10.951 182.074-3.023 3.964-9.614 9.664-14.62 12.587l-9.119 5.353h-574.865l-9.119-5.353c-5.567-3.428-10.323-7.523-14.351-12.254l-0.070-0.086c-11.796-15.463-11.15 1.585-11.15-302.349 0-314.194-1.090-292.092 15.016-308.198 15.61-15.61 8.177-15.016 186.040-15.016 98.917 0 159.377-0.743 163.935-2.031 11.026-3.042 20.021-10.196 25.414-19.667l0.108-0.206c4.311-7.73 4.956-11.2 4.906-27.653-0.050-21.459-4.014-31.964-14.916-39.696-13.925-9.911-13.034-9.863-185.048-9.614-88.411 0.098-165.274 0.991-170.726 1.884z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["external-link"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 9,
+        "id": 3,
+        "name": "external-link",
+        "prevSize": 32,
+        "code": 59654
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 7
+    },
+    {
+      "icon": {
+        "paths": [
+          "M37.011 21.092c-7.44 4.919-15.211 13.392-19.096 20.832-2.893 5.497-2.397 26.205 0.744 32.446 1.488 2.893 43.936 46.623 94.363 97.173l91.676 91.883-22.072 19.881c-55.882 50.302-111.391 120.526-152.394 192.652-19.923 35.091-19.551 40.216 6.572 83.906 22.981 38.439 50.839 77.582 81.963 114.987 17.277 20.832 68.571 72.374 88.204 88.659 77.664 64.52 156.486 101.967 243.863 115.938 29.181 4.671 84.691 4.919 114.905 0.537 64.774-9.256 123.081-30.451 174.918-61.366l-2.146 1.186 14.053-8.391 95.891 95.643c52.74 52.575 98.289 96.801 101.182 98.289 3.431 1.695 9.589 2.645 17.484 2.645 10.871 0 13.061-0.579 19.881-5.084 7.44-4.919 15.211-13.392 19.096-20.832 1.033-1.984 1.901-9.135 1.901-15.872 0-10.788-0.579-13.061-4.877-19.509-6.696-10.003-922.132-924.736-928.745-928.042-3.431-1.695-9.631-2.645-17.484-2.645-10.871 0-13.061 0.579-19.881 5.084zM483.073 140.957c-38.77 3.885-70.679 9.879-81.384 15.335-17.443 8.928-22.651 27.611-14.467 51.748 3.431 9.961 12.565 20.501 19.964 22.94 7.233 2.397 20.584 2.356 31.413-0.083 21.828-4.99 46.894-7.847 72.629-7.847 24.765 0 48.908 2.647 72.168 7.674l-2.239-0.405c112.673 22.94 225.345 110.358 314.128 243.697 27.404 41.126 25.833 34.802 13.681 54.89-18.486 29.629-36.424 54.854-55.698 78.967l1.263-1.635c-15.665 19.427-20.419 28.396-20.419 38.728 0 9.961 3.844 17.897 13.020 26.825 15.789 15.335 32.074 19.179 47.078 10.995 16.285-8.845 62.164-70.431 96.553-129.578 23.188-39.844 23.064-44.267-2.356-87.212-37.302-62.647-79.77-116.755-128.241-164.821l-0.056-0.055c-52.906-52.864-96.015-84.608-154.667-113.789-47.987-23.891-92.875-37.778-142.185-43.978-14.921-1.901-69.067-3.472-80.186-2.397zM363.497 436.278c-7.027 12.235-16.161 40.547-18.6 57.411-2.273 15.748-1.281 38.026 2.439 55.51 13.81 64.070 63.4 113.659 126.385 127.273l1.085 0.197c36.992 7.853 73.986 2.976 109.035-14.467l13.144-6.531 95.767 95.767-18.145 9.093c-55.551 27.859-106.762 40.010-167.562 39.762-34.884-0.124-55.51-2.852-85.146-11.325-108.953-31.041-213.029-116.558-296.355-243.491-23.767-36.207-22.609-30.421-10.209-50.798 36.103-58.15 77.662-108.281 125.123-152.115l0.487-0.445 22.196-20.295 105.481 105.481-5.125 8.969zM482.99 541.677c28.148 28.189 50.839 51.5 50.426 51.872-2.371 0.956-5.22 1.825-8.155 2.456l-0.358 0.065c-32.694 8.019-71.795-10.664-88.618-42.324-7.068-13.309-10.871-31.165-9.424-44.226s2.645-19.013 3.927-19.013c0.579 0 24.097 23.023 52.203 51.17z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["eye-off"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 10,
+        "id": 2,
+        "name": "eye-off",
+        "prevSize": 32,
+        "code": 59655
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 8
+    },
+    {
+      "icon": {
+        "paths": [
+          "M476.812 145.058c-91.938 8.183-178.844 45.99-262.682 114.237-22.013 17.88-73.24 69.23-93.411 93.576-27.898 33.332-54.401 70.307-78.054 109.206l-2.265 4.009c-25.408 43.004-25.408 48.075 0 91.079 26.595 43.828 53.754 81.602 83.511 117.127l-1.187-1.456c17.103 20.621 67.881 71.644 87.316 87.765 95.252 79.132 196.848 119.231 301.963 119.231 101.186 0 199.262-37.274 291.528-110.8 24.55-19.599 77.168-71.317 97.789-96.194 28.531-34.062 55.678-71.838 79.947-111.56l2.335-4.112c25.408-43.004 25.408-48.075 0-91.079-36.927-62.014-78.968-115.578-126.948-163.159l-0.056-0.055c-52.373-52.333-95.049-83.755-153.109-112.642-47.258-23.526-92.471-37.52-140.752-43.534-19.762-2.456-66.611-3.355-85.924-1.636zM542.401 226.93c113.297 11.048 221.112 79.46 315.996 200.613 12.97 16.572 49.221 69.557 54.46 79.622 2.865 5.524 3.109 4.991-18.289 37.602-76.268 116.162-173.648 200.285-270.457 233.633-36.375 12.521-63.503 17.677-100.654 19.107-41.858 1.595-75.777-3.436-118.575-17.634-99.877-33.061-197.545-116.447-275.448-235.106-21.4-32.57-21.154-32.118-18.289-37.561 5.319-10.106 35.598-54.828 49.058-72.503 112.439-147.544 247.339-220.865 382.198-207.772zM485.731 350.456c-46.153 7.2-90.63 37.358-114.115 77.413-14.495 23.907-23.073 52.8-23.073 83.696 0 68.318 41.943 126.839 101.484 151.218l1.089 0.394c18.045 7.475 38.999 11.817 60.968 11.817 68.256 0 126.725-41.91 151.074-101.401l0.393-1.088c7.497-18.004 11.851-38.921 11.851-60.853 0-21.895-4.34-42.775-12.205-61.827l0.393 1.079c-21.587-53.034-68.85-91.572-125.925-100.454l-0.915-0.116c-7.561-1.328-16.266-2.088-25.149-2.088-9.141 0-18.093 0.805-26.792 2.346l0.92-0.135zM533.4 432.78c30.737 8.794 53.801 34.225 59.016 65.681l0.066 0.48c4.092 26.718-3.846 50.859-23.077 70.131-16.407 16.489-35.024 24.386-57.404 24.386-21.072 0-39.361-7.284-55.114-21.891-54.418-50.572-18.985-141.571 55.114-141.571 5.851 0 15.467 1.268 21.4 2.782z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["eye"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 11,
+        "id": 1,
+        "name": "eye",
+        "prevSize": 32,
+        "code": 59656
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 9
+    },
+    {
+      "icon": {
+        "paths": [
+          "M481.28 43.648l-23.893 2.56c-80.555 8.533-159.104 40.107-228.693 91.819-25.984 19.328-71.509 64.853-91.051 90.965-106.581 142.805-124.8 327.040-48.171 486.955 23.296 48.555 50.304 86.229 91.349 127.232 41.003 41.045 78.677 68.053 127.232 91.349 159.872 76.629 344.235 58.325 487.125-48.341 25.984-19.371 71.637-65.024 91.008-91.008 126.891-170.027 126.891-396.331 0-566.357-19.371-25.941-64.981-71.552-90.88-90.795-68.053-50.603-139.733-80-222.592-91.264-18.048-2.475-78.891-4.523-91.435-3.115zM568.32 132.309c109.355 16.512 204.971 78.080 266.24 171.477 12.928 19.755 31.701 57.984 39.765 81.067 14.763 42.368 20.693 78.72 20.693 127.147 0 63.701-10.965 111.829-38.272 168.107-30.080 62.037-75.477 113.792-134.528 153.259-33.664 22.528-87.509 45.056-128.811 53.973-24.244 5.414-52.089 8.515-80.658 8.515-91.486 0-175.543-31.805-241.717-84.962l0.754 0.586c-64.555-51.712-112.981-127.573-132.395-207.317-7.936-32.555-10.411-54.272-10.411-92.16 0-63.701 10.965-111.829 38.272-168.107 45.622-92.339 124.633-162.383 220.876-195.211l2.698-0.799c30.080-9.941 54.272-14.848 93.013-18.859 13.739-1.408 67.029 0.64 84.48 3.285zM482.133 257.792c-22.357 3.456-48.768 14.165-70.827 28.715-38.101 25.131-71.424 80-66.261 109.184 2.56 14.72 15.104 25.173 36.309 30.421 9.771 2.389 12.843 2.517 19.499 0.768 11.392-3.029 20.821-12.971 27.563-28.928 6.741-16.085 12.8-25.003 23.509-34.645 26.325-23.68 61.141-28.501 94.208-13.013 14.848 6.955 31.744 24.021 38.997 39.381 6.059 12.843 9.643 32.128 8.021 43.093-4.096 27.221-38.699 56.917-92.288 79.232-31.019 12.885-39.424 24.107-34.944 46.805 5.675 28.8 22.997 43.221 46.421 38.613 24.832-4.907 68.651-26.965 97.451-49.109 49.365-37.973 71.595-80.213 68.949-130.987-2.261-43.136-18.731-79.957-49.749-111.189-21.063-21.482-47.858-37.271-77.909-44.894l-1.152-0.248c-15.317-3.968-51.925-5.675-67.797-3.2zM495.531 685.013c-16.811 5.504-24.533 16.299-25.813 36.053-1.323 20.523 4.693 34.091 18.475 41.813 6.613 3.712 9.685 4.267 23.808 4.267 13.312 0 17.408-0.683 23.040-3.669 13.909-7.509 19.627-18.56 19.627-38.144 0-27.435-12.245-40.619-39.125-41.984-8.107-0.427-15.573 0.213-20.011 1.664z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["help-circle"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 12,
+        "id": 0,
+        "name": "help-circle",
+        "prevSize": 32,
+        "code": 59657
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 10
+    }
+  ],
+  "height": 1024,
+  "metadata": { "name": "icomoon" },
+  "preferences": {
+    "showGlyphs": true,
+    "showQuickUse": true,
+    "showQuickUse2": true,
+    "showSVGs": true,
+    "fontPref": {
+      "prefix": "icon-",
+      "metadata": { "fontFamily": "icomoon" },
+      "metrics": { "emSize": 1024, "baseline": 6.25, "whitespace": 50 },
+      "embed": false
+    },
+    "imagePref": {
+      "prefix": "icon-",
+      "png": true,
+      "useClassSelector": true,
+      "color": 0,
+      "bgColor": 16777215,
+      "classSelector": ".icon",
+      "name": "icomoon"
+    },
+    "historySize": 50,
+    "showCodes": true,
+    "gridSize": 16,
+    "showGrid": false
+  }
+}

package/src/components/atoms/Icon/assets/style.css

@@ -0,0 +1,60 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?y8qysc');
+  src:  url('fonts/icomoon.eot?y8qysc#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?y8qysc') format('truetype'),
+    url('fonts/icomoon.woff?y8qysc') format('woff'),
+    url('fonts/icomoon.svg?y8qysc#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-user:before {
+  content: "\e90a";
+}
+.icon-alert-circle:before {
+  content: "\e900";
+}
+.icon-chevron-down:before {
+  content: "\e901";
+}
+.icon-chevron-left:before {
+  content: "\e902";
+}
+.icon-chevron-right:before {
+  content: "\e903";
+}
+.icon-credit-card:before {
+  content: "\e904";
+}
+.icon-download:before {
+  content: "\e905";
+}
+.icon-external-link:before {
+  content: "\e906";
+}
+.icon-eye-off:before {
+  content: "\e907";
+}
+.icon-eye:before {
+  content: "\e908";
+}
+.icon-help-circle:before {
+  content: "\e909";
+}

package/src/components/atoms/Icon/icon.types.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+
+import iconsSelection from "./assets/selection.json";
+
+const iconNamesArray = iconsSelection.icons.map((icon) => icon.properties.name);
+const iconNamesObject = iconNamesArray.reduce(
+  (acc, name) => {
+    acc[name] = name;
+    return acc;
+  },
+  {} as Record<string, string>
+);
+type IconName = keyof typeof iconNamesObject;
+
+export type IconProps = {
+  name: IconName;
+} & HTMLAttributes<HTMLSpanElement>;

package/src/components/atoms/Icon/index.ts

@@ -0,0 +1,2 @@
+export * from "./Icon";
+export * from "./icon.types";

package/src/components/atoms/Logo/Logo.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Logo } from ".";
+
+const meta = {
+  title: "Components/Atoms/Logo",
+  component: Logo,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Mobile: Story = {
+  args: {
+    variant: "mobile"
+  }
+};

package/src/components/atoms/Logo/Logo.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+
+import { Logo } from "./Logo";
+
+describe("Logo Component", () => {
+  test("should render desktop logo", async () => {
+    const { getByAltText } = render(<Logo />);
+
+    expect(getByAltText("Globalfy")).toBeTruthy();
+  });
+});

package/src/components/atoms/Logo/Logo.tsx

@@ -0,0 +1,12 @@
+import { LogoProps } from ".";
+import GlobalfyDesktop from "./images/globalfy_desktop.svg";
+import GlobalfyMobile from "./images/globalfy_mobile.svg";
+
+export function Logo({ variant = "desktop" }: LogoProps) {
+  return (
+    <img
+      src={variant === "desktop" ? GlobalfyDesktop : GlobalfyMobile}
+      alt="Globalfy"
+    />
+  );
+}