norma-library 0.4.2 → 0.4.5

package/src/components/Svgs.tsx

@@ -0,0 +1,522 @@
+import React from "react";
+
+// Icon paths
+export const iconsSVG = {
+  menuBar: (
+    <>
+      <path
+        id="menu-bar"
+        d="M57.286,7c0,2.209-1.4,4-3.127,4H4.127C2.4,11,1,9.209,1,7S2.4,3,4.127,3H54.159C55.886,3,57.286,4.791,57.286,7Zm0,24c0,2.209-1.4,4-3.127,4H4.127C2.4,35,1,33.209,1,31s1.4-4,3.127-4H54.159C55.886,27,57.286,28.791,57.286,31ZM54.159,59c1.727,0,3.127-1.791,3.127-4s-1.4-4-3.127-4H4.127C2.4,51,1,52.791,1,55s1.4,4,3.127,4Z"
+        transform="translate(-1 -3)"
+        fill-rule="evenodd"
+      />
+    </>
+  ),
+  faceHappy: (
+    <>
+      <g id="face-happy" transform="translate(-16 -16)">
+        <path
+          id="FaceHappy_1"
+          data-name="FaceHappy 1"
+          d="M43.833,16A27.833,27.833,0,1,0,71.667,43.833,27.833,27.833,0,0,0,43.833,16ZM60.89,60.89a24.036,24.036,0,1,1,5.171-7.669A24.036,24.036,0,0,1,60.89,60.89Z"
+          transform="translate(0 0)"
+        />
+        <path
+          id="FaceHappy_2"
+          data-name="FaceHappy 2"
+          d="M164.061,292.061A12.061,12.061,0,0,0,176.122,280H152a12.061,12.061,0,0,0,12.061,12.061Z"
+          transform="translate(-120.228 -233.383)"
+        />
+        <path
+          id="FaceHappy_3"
+          data-name="FaceHappy 3"
+          d="M120.89,163.653l2.376-2.851-6.755-5.629-6.755,5.629,2.376,2.851L116.512,160Z"
+          transform="translate(-82.884 -123.033)"
+        />
+        <path
+          id="FaceHappy_4"
+          data-name="FaceHappy 4"
+          d="M285.757,160.8l2.376,2.851L292.512,160l4.379,3.649,2.376-2.851-6.755-5.629Z"
+          transform="translate(-238.473 -123.033)"
+        />
+      </g>
+    </>
+  ),
+  faceNeutral: (
+    <>
+      <g id="face-neutral" transform="translate(0.75 0.75)">
+        <circle
+          id="Elipse_1"
+          data-name="Elipse 1"
+          cx="25.5"
+          cy="25.5"
+          r="25.5"
+          transform="translate(1.75 1.75)"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="5"
+        />
+        <path
+          id="FaceNeutral_1"
+          data-name="FaceNeutral 1"
+          d="M22.177,7.8V5.75M7.8,7.8V5.75M5.75,24.23H24.23"
+          transform="translate(12.427 12.427)"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="5"
+        />
+      </g>
+    </>
+  ),
+  faceAngry: (
+    <>
+      <g id="face-angry" transform="translate(-1 -1)">
+        <path
+          id="FaceAngry_2"
+          data-name="FaceAngry 2"
+          d="M10.818,15.636A3.818,3.818,0,1,0,7,11.818,3.818,3.818,0,0,0,10.818,15.636Z"
+          transform="translate(9.273 10.818)"
+        />
+        <path
+          id="FaceAngry_3"
+          data-name="FaceAngry 3"
+          d="M21.636,11.818A3.818,3.818,0,1,1,17.818,8,3.818,3.818,0,0,1,21.636,11.818Z"
+          transform="translate(20.091 10.818)"
+        />
+        <path
+          id="FaceAngry_4"
+          data-name="FaceAngry 4"
+          d="M27.641,21.8A2.545,2.545,0,0,0,32.18,19.5a7.923,7.923,0,0,0-.758-1.184,12.316,12.316,0,0,0-2.157-2.21A14.9,14.9,0,0,0,19.721,13a14.9,14.9,0,0,0-9.545,3.1,12.323,12.323,0,0,0-2.156,2.21A8.913,8.913,0,0,0,7.264,19.5,2.545,2.545,0,0,0,11.8,21.8a6.56,6.56,0,0,1,1.556-1.726,9.84,9.84,0,0,1,6.365-1.988,9.84,9.84,0,0,1,6.364,1.988A6.556,6.556,0,0,1,27.641,21.8Z"
+          transform="translate(9.273 18.545)"
+        />
+        <path
+          id="FaceAngry_5"
+          data-name="FaceAngry 5"
+          d="M29,57A28,28,0,1,0,1,29,28,28,0,0,0,29,57Zm0-5.108A22.892,22.892,0,1,1,51.892,29,22.892,22.892,0,0,1,29,51.892Z"
+        />
+      </g>
+    </>
+  ),
+  pieChart: (
+    <>
+      <g id="pie-chart" transform="translate(-1.25 -1.25)">
+        <path
+          id="PieChart_1"
+          data-name="PieChart 1"
+          d="M20.68,1.549a7.725,7.725,0,0,0-7.428,1.81,9.575,9.575,0,0,0-3,7.035V27.831a5.977,5.977,0,0,0,5.977,5.977H33.664a9.575,9.575,0,0,0,7.035-3,7.725,7.725,0,0,0,1.81-7.428A31.52,31.52,0,0,0,20.68,1.549Zm-6.523,8.846A5.671,5.671,0,0,1,15.9,6.236a3.821,3.821,0,0,1,3.734-.924A27.613,27.613,0,0,1,38.746,24.429a3.82,3.82,0,0,1-.924,3.734A5.671,5.671,0,0,1,33.664,29.9H16.227a2.07,2.07,0,0,1-2.07-2.07Z"
+          transform="translate(14.442)"
+          fill-rule="evenodd"
+        />
+        <path
+          id="PieChart_2"
+          data-name="PieChart 2"
+          d="M20.582,7.068A1.953,1.953,0,0,0,19.412,3.34,25.948,25.948,0,1,0,51.95,35.879a1.953,1.953,0,1,0-3.727-1.171A22.041,22.041,0,1,1,20.582,7.068Z"
+          transform="translate(0 3.209)"
+        />
+      </g>
+    </>
+  ),
+
+  sort: (
+    <>
+      <g id="sort" transform="translate(1.5 -3.5)">
+        <path
+          id="Sort_1"
+          data-name="Sort 1"
+          d="M49,7H2"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-width="7"
+        />
+        <path
+          id="Sort_2"
+          data-name="Sort 2"
+          d="M37.9,12H5"
+          transform="translate(4.05 12.588)"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-width="7"
+        />
+        <path
+          id="Sort_3"
+          data-name="Sort 3"
+          d="M26.8,17H8"
+          transform="translate(8.1 25.176)"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-width="7"
+        />
+      </g>
+    </>
+  ),
+  timerClock: (
+    <>
+      <g
+        id="time-clock"
+        data-name="TimeClock 1880"
+        transform="translate(96 44)"
+      >
+        <path
+          id="TimeClock_1968"
+          data-name="TimeClock 1968"
+          d="M32.029,60.079A28.109,28.109,0,0,1,3.938,32.008a27.826,27.826,0,0,1,8.6-20.211,2.254,2.254,0,1,1,3.132,3.242,23.578,23.578,0,1,0,18.61-6.484v8.786a2.261,2.261,0,0,1-4.523,0V6.2a2.259,2.259,0,0,1,2.261-2.26,28.071,28.071,0,1,1,.014,56.142Z"
+          transform="translate(-99.938 -47.938)"
+        />
+        <path
+          id="TimeClock_1969"
+          data-name="TimeClock 1969"
+          d="M12.754,11.429,22.173,18.2a2.85,2.85,0,0,1-3.313,4.638,2.752,2.752,0,0,1-.663-.663l-6.768-9.419a.95.95,0,0,1,1.325-1.325Z"
+          transform="translate(-85.226 -33.239)"
+        />
+      </g>
+    </>
+  ),
+  tag: (
+    <>
+      <g id="tag" transform="translate(-0.66 -0.66)">
+        <path
+          id="Tag_1"
+          data-name="Tag 1"
+          d="M55.236,25.551l-23.6-23.6A4.757,4.757,0,0,0,28.291.661H5.457a4.757,4.757,0,0,0-4.8,4.757V28.253A4.757,4.757,0,0,0,1.955,31.64l23.6,23.6a4.719,4.719,0,0,0,3.349,1.37,4.871,4.871,0,0,0,3.5-1.37L55.236,32.4a4.833,4.833,0,0,0,0-6.85ZM28.976,51.772,5.418,28.291V5.456H28.253L51.735,28.938Z"
+          transform="translate(0 0)"
+        />
+        <ellipse
+          id="Elipse_1"
+          data-name="Elipse 1"
+          cx="5.366"
+          cy="5.709"
+          rx="5.366"
+          ry="5.709"
+          transform="translate(11.622 11.279)"
+        />
+      </g>
+    </>
+  ),
+  listCheck: (
+    <>
+      <path
+        id="list-check"
+        d="M4,7H40.862v6.7H4ZM4,20.4H40.862v6.7H4Zm0,13.4H27.458v6.7H4Zm51.268-9.075-14.41,14.38-4.33-4.326-4.738,4.742,9.068,9.061L60,29.479Z"
+        transform="translate(-4 -7)"
+      />
+    </>
+  ),
+  starOutlined: (
+    <>
+      <path
+        id="star-outlined"
+        d="M56.125,22.76H37.737L32.15,4.8a1.978,1.978,0,0,0-3.8,0L22.763,22.76H4.25a2.087,2.087,0,0,0-2,2.154,1.7,1.7,0,0,0,.037.363A2.11,2.11,0,0,0,3.125,26.8L18.238,38.267l-5.8,18.16a2.26,2.26,0,0,0,.687,2.423,1.868,1.868,0,0,0,1.125.525,2.343,2.343,0,0,0,1.25-.485L30.25,47.569,45,58.89a2.24,2.24,0,0,0,1.25.485,1.737,1.737,0,0,0,1.113-.525,2.231,2.231,0,0,0,.688-2.423l-5.8-18.16L57.238,26.69l.362-.337a2.329,2.329,0,0,0,.65-1.44A2.192,2.192,0,0,0,56.125,22.76Zm-15.9,12.452a3.948,3.948,0,0,0-1.275,4.281L42.712,51.3a.513.513,0,0,1-.762.619l-9.675-7.431a3.325,3.325,0,0,0-2.037-.7,3.264,3.264,0,0,0-2.025.7L18.537,51.9a.511.511,0,0,1-.762-.619l3.763-11.806a3.96,3.96,0,0,0-1.287-4.308L10.125,27.485a.549.549,0,0,1,.287-.983H22.75a3.528,3.528,0,0,0,3.313-2.571l3.7-11.873a.492.492,0,0,1,.95,0l3.7,11.873A3.528,3.528,0,0,0,37.725,26.5H49.887a.54.54,0,0,1,.288.969Z"
+        transform="translate(-2.25 -3.375)"
+      />
+    </>
+  ),
+
+  edit: (
+    <>
+      <g
+        id="Edit_1880"
+        data-name="Edit 1880"
+        transform="translate(75.5 -366.5)"
+      >
+        <g id="edit" transform="translate(-73 369)">
+          <path
+            id="Edit_1946"
+            data-name="Edit 1946"
+            d="M27.959,6H8.546A5.546,5.546,0,0,0,3,11.546V50.371a5.546,5.546,0,0,0,5.546,5.546H47.371a5.546,5.546,0,0,0,5.546-5.546V30.959"
+            transform="translate(-3 -0.117)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
+          />
+          <path
+            id="Edit_1947"
+            data-name="Edit 1947"
+            d="M41.118,4.541a5.883,5.883,0,0,1,8.32,8.32L23.093,39.206,12,41.979l2.773-11.093Z"
+            transform="translate(4.639 -2.818)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
+          />
+        </g>
+      </g>
+    </>
+  ),
+  chartBar: (
+    <>
+      <g id="chart-bar" data-name="icons Q2" transform="translate(4.625 4.625)">
+        <path
+          id="ChartBar_1"
+          data-name="ChartBar 1"
+          d="M4,47.938H4a2.313,2.313,0,0,1,2.313-2.312H47.938a2.313,2.313,0,0,1,2.313,2.313h0a2.313,2.313,0,0,1-2.312,2.313H6.313A2.313,2.313,0,0,1,4,47.938ZM15.563,22.5a2.312,2.312,0,0,0-2.312-2.312h0A2.313,2.313,0,0,0,10.938,22.5V41h4.625ZM43.313,6.313A2.313,2.313,0,0,0,41,4h0a2.313,2.313,0,0,0-2.312,2.313V41h4.625Zm-18.5,9.25A2.313,2.313,0,0,0,22.5,13.25h0a2.312,2.312,0,0,0-2.312,2.313V41h4.625Zm9.25,10.406a2.313,2.313,0,0,0-2.312-2.312h0a2.313,2.313,0,0,0-2.312,2.313V41h4.625Z"
+          transform="translate(-4 -4)"
+        />
+      </g>
+    </>
+  ),
+  settingEthernet: (
+    <>
+      <g
+        id="SettingsEthernet_1881"
+        data-name="SettingsEthernet 1881"
+        transform="translate(146 -54.196)"
+      >
+        <g id="settings_ethernet" transform="translate(-146 54.196)">
+          <path
+            id="SettingsEthernet"
+            data-name="IconSettingsEthernet"
+            d="M18.612,11.421,14.76,8.22,1.23,24.527,14.76,40.833l3.852-3.2L7.733,24.527,18.612,11.421ZM16.686,27.027h5v-5h-5Zm25.01-5h-5v5h5Zm-15.006,5h5v-5h-5ZM43.622,8.22l-3.852,3.2L50.65,24.527,39.77,37.632l3.852,3.2,13.53-16.307L43.622,8.22Z"
+            transform="translate(-1.23 -8.22)"
+          />
+        </g>
+      </g>
+    </>
+  ),
+
+  usd: (
+    <>
+      <g id="Usd_1880" data-name="Usd 1880" transform="translate(36 -177)">
+        <g id="Usd" transform="translate(-36 177)">
+          <path
+            id="IconUsd"
+            data-name="IconUsd"
+            d="M27.686,30.909c-7.035-1.828-9.3-3.7-9.3-6.647,0-3.378,3.114-5.749,8.367-5.749,5.516,0,7.562,2.634,7.748,6.508h6.849c-.2-5.346-3.471-10.211-9.948-11.807V6.427h-9.3v6.694C16.1,14.438,11.261,18.311,11.261,24.308c0,7.159,5.935,10.723,14.565,12.8,7.763,1.859,9.3,4.571,9.3,7.484,0,2.123-1.5,5.532-8.367,5.532-6.384,0-8.91-2.867-9.235-6.508H10.688c.387,6.787,5.454,10.583,11.42,11.869v6.725h9.3V55.546c6.028-1.162,10.846-4.649,10.846-11.017,0-8.77-7.531-11.776-14.565-13.62Z"
+            transform="translate(-10.688 -6.427)"
+          />
+        </g>
+      </g>
+    </>
+  ),
+
+  user: (
+    <>
+      <path
+        id="User_1941"
+        data-name="User 1941"
+        d="M23.977,30.96c8.824,0,15.977-6.259,15.977-13.98S32.8,3,23.977,3,8,9.259,8,16.98s7.153,13.98,15.977,13.98Zm0-20.97c4.412,0,7.989,3.13,7.989,6.99s-3.577,6.99-7.989,6.99-7.989-3.13-7.989-6.99S19.565,9.99,23.977,9.99Z"
+        transform="translate(3.983 -3)"
+      />
+      <path
+        id="User_1942"
+        data-name="User 1942"
+        d="M32.96,13C17.518,13,5,23.953,5,37.465a3.77,3.77,0,0,0,3.994,3.5,3.77,3.77,0,0,0,3.994-3.5c0-9.651,8.942-17.475,19.972-17.475s19.972,7.824,19.972,17.475a4.03,4.03,0,0,0,7.989,0C60.921,23.953,48.4,13,32.96,13Z"
+        transform="translate(-5 14.96)"
+      />
+    </>
+  ),
+  notication: (
+    <>
+      <path
+        id="Notification_Icon"
+        data-name="Notification Icon"
+        d="M21,49H35a7,7,0,1,1-14,0ZM3.5,45.5a3.5,3.5,0,0,1,0-7H5.251C7.7,36.051,10.5,32.552,10.5,28V17.5A17.333,17.333,0,0,1,28,0,17.33,17.33,0,0,1,45.5,17.5V28c0,4.552,2.8,8.051,5.251,10.5H52.5a3.5,3.5,0,0,1,0,7Z"
+      />
+    </>
+  ),
+  card: (
+    <>
+      <path
+        id="Card_1937"
+        data-name="Card 1937"
+        d="M6.157,6H48.067a4.657,4.657,0,0,1,4.657,4.657V38.6a4.657,4.657,0,0,1-4.657,4.657H6.157A4.657,4.657,0,0,1,1.5,38.6V10.657A4.657,4.657,0,0,1,6.157,6Z"
+        transform="translate(1 -3.5)"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="5"
+      />
+      <path
+        id="Card_1938"
+        data-name="Card 1938"
+        d="M1.5,15H52.724"
+        transform="translate(1 1.47)"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="5"
+      />
+    </>
+  ),
+  briefcase: (
+    <>
+      <g id="briefcase" transform="translate(2.5 2.5)">
+        <g id="Briefcase" data-name="IconBriefcase">
+          <path
+            id="Briefcase_1939"
+            data-name="IconBriefcase 1939"
+            d="M8.148,10.5H49.332a4.943,4.943,0,0,1,5.148,4.707V38.744a4.943,4.943,0,0,1-5.148,4.707H8.148A4.943,4.943,0,0,1,3,38.744V15.207A4.943,4.943,0,0,1,8.148,10.5Z"
+            transform="translate(-3 -1.085)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
+          />
+          <path
+            id="Briefcase_1940"
+            data-name="IconBriefcase 1940"
+            d="M31.122,46.867V9.207A4.744,4.744,0,0,0,26.341,4.5H16.78A4.744,4.744,0,0,0,12,9.207V46.867"
+            transform="translate(4.179 -4.5)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
+          />
+        </g>
+      </g>
+    </>
+  ),
+  checkCircle: (
+    <>
+      <g id="Icon" transform="translate(2.505 2.53)">
+        <g id="check-circle" data-name="IconCheckCircle">
+          <g id="CheckCircle_1881" data-name="CheckCircle 1881">
+            <path
+              id="CheckCircle_1935"
+              data-name="Icon CheckCircle 1935"
+              d="M53.347,25.863v2.316A25.174,25.174,0,1,1,38.419,5.171"
+              transform="translate(-3 -2.991)"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="5"
+            />
+            <path
+              id="CheckCircle_1936"
+              data-name="Icon CheckCircle 1936"
+              d="M49.688,6,21.851,33.865,13.5,25.514"
+              transform="translate(0.66 -0.415)"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="5"
+            />
+          </g>
+        </g>
+      </g>
+    </>
+  ),
+  hand: (
+    <>
+      <path
+        id="hand"
+        data-name="Icon Hand"
+        d="M57.824,32.437a4.988,4.988,0,0,0-6.857-.164l-5.645,5.208c-1.47,1.355-3.241,1.357-4.274.231-.685-.746-.415-3.047-.223-4.506l2.831-21.481a3.67,3.67,0,0,0-3.308-4.006,3.82,3.82,0,0,0-4.224,3.161L33,27.753c-.163.42-.513.492-.553-.073L31.386,5.75a3.656,3.656,0,0,0-3.794-3.5A3.656,3.656,0,0,0,23.8,5.75l-.075,22.094c.02.255-.217.328-.26.037L20.089,10.635A3.854,3.854,0,0,0,15.681,7.7a3.635,3.635,0,0,0-3.059,4.175L15.627,32.06c0,.359-.127.564-.313.1L10.831,21.1a3.94,3.94,0,0,0-4.845-2.236,3.548,3.548,0,0,0-2.305,4.579l7.86,23.7c.041.131.084.261.129.39l.016.049,0,.011c2.177,6.184,8.472,10.655,15.9,10.655a23.877,23.877,0,0,0,13.455-4.209h0c4.061-2.256,17.072-15.168,17.072-15.168C60.095,37.05,59.8,34.26,57.824,32.437Z"
+        transform="translate(-3.462 -2.25)"
+      />
+    </>
+  ),
+  female: (
+    <>
+      <g
+        id="Female_1880"
+        data-name="Female 1880"
+        transform="translate(65.5 -276.5)"
+      >
+        <g id="female" transform="translate(-63 279)">
+          <path
+            id="Female"
+            d="M13.222,49.667H31.889M22.556,34.111V59m0-24.889A15.556,15.556,0,1,0,7,18.556,15.556,15.556,0,0,0,22.556,34.111Z"
+            transform="translate(-7 -3)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
+          />
+        </g>
+      </g>
+    </>
+  ),
+  male: (
+    <>
+      <g
+        id="Male_1880"
+        data-name="Male 1880"
+        transform="translate(1.5 -255.464)"
+      >
+        <g id="male" transform="translate(1 259)">
+          <path
+            id="Male"
+            d="M22.556,27.889A15.556,15.556,0,1,0,38.111,43.444,15.556,15.556,0,0,0,22.556,27.889Zm0,0V3m0,0L35,15.444M22.556,3,10.111,15.444"
+            transform="translate(-7 -3)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
+          />
+        </g>
+      </g>
+    </>
+  ),
+  headphone: (
+    <>
+      <g
+        id="HeadPhone_1880"
+        data-name="HeadPhone 1880"
+        transform="translate(68.5 -344.5)"
+      >
+        <g id="headphone" transform="translate(-66 347)">
+          <g id="Icon">
+            <g id="headphone" data-name="Icon HeadPhone">
+              <path
+                id="HeadPhone_1880_1930"
+                data-name="HeadPhone_1880 1930"
+                d="M4.5,38.111V24.666C4.5,13.529,16.886,4.5,32.165,4.5S59.83,13.529,59.83,24.666V38.111"
+                transform="translate(-4.5 -4.5)"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="5"
+              />
+              <path
+                id="HeadPhone_1880_1931"
+                data-name="HeadPhone_1880 1931"
+                d="M59.83,36.513a6.177,6.177,0,0,1-6.148,6.205H50.608a6.177,6.177,0,0,1-6.148-6.205V27.205A6.177,6.177,0,0,1,50.608,21H59.83Zm-55.33,0a6.177,6.177,0,0,0,6.148,6.205h3.074a6.177,6.177,0,0,0,6.148-6.205V27.205A6.177,6.177,0,0,0,13.722,21H4.5Z"
+                transform="translate(-4.5 12.611)"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="5"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </>
+  ),
+  envelopeMail: (
+    <>
+      <path
+        id="email"
+        d="M52.4,4H7.6A5.593,5.593,0,0,0,2.028,9.6L2,43.2a5.616,5.616,0,0,0,5.6,5.6H52.4A5.616,5.616,0,0,0,58,43.2V9.6A5.616,5.616,0,0,0,52.4,4Zm0,11.2L30,29.2,7.6,15.2V9.6L30,23.6l22.4-14Z"
+        transform="translate(-2 -4)"
+      />
+    </>
+  ),
+  comment: (
+    <>
+      <path
+        id="comment"
+        d="M52.4,2H7.6A5.593,5.593,0,0,0,2.028,7.6L2,58,13.2,46.8H52.4A5.616,5.616,0,0,0,58,41.2V7.6A5.616,5.616,0,0,0,52.4,2ZM13.2,21.6H46.8v5.6H13.2Zm22.4,14H13.2V30H35.6ZM46.8,18.8H13.2V13.2H46.8Z"
+        transform="translate(-2 -2)"
+      />
+    </>
+  ),
+  olosCloud: (
+    <>
+      <path
+        id="olos-cloud"
+        d="M35.977,44.991q.308.009.618.009a20.5,20.5,0,0,0,0-41,20.305,20.305,0,0,0-15.914,7.688h-3.1a16.657,16.657,0,0,0,0,33.313H35.42Q35.7,45,35.977,44.991Zm4.977-5.831c5.989-1.97,10.93-7.789,10.93-14.66a15.289,15.289,0,1,0-30.578,0h-5.1a20.543,20.543,0,0,1,1.482-7.687h-.109a11.531,11.531,0,0,0,0,23.063H35.42A27.108,27.108,0,0,0,40.954,39.16Z"
+        transform="translate(-1.019 -4)"
+        fill-rule="evenodd"
+      />
+    </>
+  ),
+} as const;

package/src/components/Tabs.tsx

@@ -0,0 +1,140 @@
+import React, { useMemo } from "react";
+import {
+  Box,
+  Tabs as MuiTabs,
+  Tab,
+  ThemeProvider,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import { TabPanelProps, TabsBaseProps } from "../interfaces";
+import { palette, themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+import { ColorVariant } from "@/types";
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const TabsStyled = styled(MuiTabs)<{
+  color: ColorVariant;
+}>(({ color }) => ({
+  borderBottom: "1px solid #e8e8e8",
+  "& .Mui-selected": {
+    color: colorMap[color],
+  },
+  "& .MuiTabs-indicator": {
+    backgroundColor: colorMap[color],
+  },
+  "& .MuiButtonBase-root": {
+    textTransform: "none",
+  },
+}));
+
+interface StyledTabProps {
+  label: string;
+  color: ColorVariant;
+}
+
+const TabStyled = styled((props: StyledTabProps) => (
+  <Tab disableRipple {...props} />
+))(({ theme, color }) => ({
+  textTransform: "none",
+  fontWeight: theme.typography.fontWeightRegular,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  font: "normal normal normal 15px/25px Source Sans Pro",
+  color: "#666666",
+  padding: "5px 15px",
+  top: "5px",
+  minWidth: "60px",
+  "&.Mui-selected": {
+    color: colorMap[color],
+  },
+  "&.Mui-focusVisible": {
+    backgroundColor: "rgba(100, 95, 228, 0.32)",
+  },
+}));
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+export const Tabs = ({
+  data = [],
+  color = "primary",
+  ...props
+}: TabsBaseProps) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+    console.log(event);
+  };
+
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ width: "100%" }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <TabsStyled
+            value={value}
+            color={color}
+            onChange={handleChange}
+            aria-label="basic tabs example"
+            {...props}
+          >
+            {data &&
+              data.map((item, key) => (
+                <TabStyled
+                  label={item.label}
+                  color={color}
+                  {...a11yProps(key)}
+                />
+              ))}
+          </TabsStyled>
+        </Box>
+        {data &&
+          data.map((item, key) => (
+            <CustomTabPanel value={value} index={key}>
+              {item.children}
+            </CustomTabPanel>
+          ))}
+      </Box>
+    </ThemeProvider>
+  );
+};