@memori.ai/ui 1.0.0-alpha

package/src/icons/Image.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+export const ImageIcon: React.FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle
+        cx="8.5"
+        cy="8.5"
+        r="1.5"
+        fill="currentColor"
+      />
+      <path
+        d="M21 15L16 10L5 21"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/icons/Info.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+const Info = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M12 17V11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="1"
+      cy="1"
+      r="1"
+      transform="matrix(1 0 0 -1 11 9)"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default Info

package/src/icons/Link.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Link = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z" />
+  </svg>
+)
+
+export default Link

package/src/icons/Linkedin.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const LinkedIn = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M847.7 112H176.3c-35.5 0-64.3 28.8-64.3 64.3v671.4c0 35.5 28.8 64.3 64.3 64.3h671.4c35.5 0 64.3-28.8 64.3-64.3V176.3c0-35.5-28.8-64.3-64.3-64.3zm0 736c-447.8-.1-671.7-.2-671.7-.3.1-447.8.2-671.7.3-671.7 447.8.1 671.7.2 671.7.3-.1 447.8-.2 671.7-.3 671.7zM230.6 411.9h118.7v381.8H230.6zm59.4-52.2c37.9 0 68.8-30.8 68.8-68.8a68.8 68.8 0 1 0-137.6 0c-.1 38 30.7 68.8 68.8 68.8zm252.3 245.1c0-49.8 9.5-98 71.2-98 60.8 0 61.7 56.9 61.7 101.2v185.7h118.6V584.3c0-102.8-22.2-181.9-142.3-181.9-57.7 0-96.4 31.7-112.3 61.7h-1.6v-52.2H423.7v381.8h118.6V604.8z" />
+  </svg>
+)
+
+export default LinkedIn

package/src/icons/Loading.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import cx from 'classnames'
+
+const Loading = ({
+  className,
+  title,
+  loading = true,
+}: {
+  className?: string
+  title?: string
+  loading?: boolean
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    focusable="false"
+    role="img"
+    className={cx(className, {
+      'memori-loading-icon': loading,
+    })}
+    aria-label={title}
+  >
+    <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+  </svg>
+)
+
+export default Loading

package/src/icons/Logout.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+const Logout = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M15 12L2 12M2 12L5.5 9M2 12L5.5 15"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.3531 21.8897 19.1752 21.9862 17 21.9983M9.00195 17C9.01406 19.175 9.11051 20.3529 9.87889 21.1213C10.5202 21.7626 11.4467 21.9359 13 21.9827"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+    />
+  </svg>
+)
+export default Logout

package/src/icons/Mail.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Mail = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z" />
+  </svg>
+)
+
+export default Mail

package/src/icons/MapMarker.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const MapMarker = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 384 512"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      fill="currentColor"
+      d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
+    ></path>
+  </svg>
+)
+
+export default MapMarker

package/src/icons/MenuHorizontal.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+const MenuHorizontal = ({
+  className,
+  title,
+  stroke,
+}: {
+  className?: string
+  title?: string
+  stroke?: string
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke={stroke}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+    />
+  </svg>
+)
+export default MenuHorizontal

package/src/icons/MenuVertical.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+const MenuVertical = ({
+  className,
+  title,
+  bold = false,
+}: {
+  className?: string
+  title?: string
+  bold?: boolean
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={bold ? 3 : 2}
+      d="M13 5a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 12a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 19a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
+    />
+  </svg>
+)
+export default MenuVertical

package/src/icons/Message.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Message = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
+  </svg>
+)
+
+export default Message

package/src/icons/Microphone.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Microphone = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"></path>
+  </svg>
+)
+
+export default Microphone

package/src/icons/Minus.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Minus = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" />
+  </svg>
+)
+
+export default Minus

package/src/icons/MinusCircle.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const MinusCircle = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" />
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
+  </svg>
+)
+
+export default MinusCircle

package/src/icons/PaperClip.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const PaperClip = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0 0 12.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 0 0 174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z" />
+  </svg>
+)
+
+export default PaperClip

package/src/icons/Picture.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Picture = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2zM304 456a88 88 0 1 0 0-176 88 88 0 0 0 0 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z" />
+  </svg>
+)
+
+export default Picture

package/src/icons/Plus.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Plus = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
+    <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
+  </svg>
+)
+
+export default Plus

package/src/icons/Preview.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export const PreviewIcon: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/icons/Print.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+const PrintIcon: React.FC<{ className?: string; title?: string }> = ({
+  className,
+  title,
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    aria-label={title}
+    className={className}
+    viewBox="0 -2 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>{title}</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="Icon-Set"
+        transform="translate(-100.000000, -205.000000)"
+        fill="#000000"
+      >
+        <path
+          d="M130,226 C130,227.104 129.104,228 128,228 L125.858,228 C125.413,226.278 123.862,225 122,225 L110,225 C108.138,225 106.587,226.278 106.142,228 L104,228 C102.896,228 102,227.104 102,226 L102,224 C102,222.896 102.896,222 104,222 L128,222 C129.104,222 130,222.896 130,224 L130,226 L130,226 Z M122,231 L110,231 C108.896,231 108,230.104 108,229 C108,227.896 108.896,227 110,227 L122,227 C123.104,227 124,227.896 124,229 C124,230.104 123.104,231 122,231 L122,231 Z M108,209 C108,207.896 108.896,207 110,207 L122,207 C123.104,207 124,207.896 124,209 L124,220 L108,220 L108,209 L108,209 Z M128,220 L126,220 L126,209 C126,206.791 124.209,205 122,205 L110,205 C107.791,205 106,206.791 106,209 L106,220 L104,220 C101.791,220 100,221.791 100,224 L100,226 C100,228.209 101.791,230 104,230 L106.142,230 C106.587,231.723 108.138,233 110,233 L122,233 C123.862,233 125.413,231.723 125.858,230 L128,230 C130.209,230 132,228.209 132,226 L132,224 C132,221.791 130.209,220 128,220 L128,220 Z"
+          id="print"
+        ></path>
+      </g>
+    </g>
+  </svg>
+)
+export default PrintIcon

package/src/icons/QuestionHelp.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+const QuestionHelp = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    ></circle>
+    <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path>
+    <path d="M12 17L12.01 17"></path>
+  </svg>
+)
+
+export default QuestionHelp

package/src/icons/Refresh.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const Refresh = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    focusable="false"
+    role="img"
+    className={className}
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    aria-label={title}
+  >
+    <path d="M23 4L23 10 17 10"></path>
+    <path d="M1 20L1 14 7 14"></path>
+    <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"></path>
+  </svg>
+)
+
+export default Refresh

package/src/icons/SelectIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const SelectIcon = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    focusable="false"
+    role="img"
+    className={className}
+    fill="currentColor"
+    aria-label={title}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+)
+
+export default SelectIcon

package/src/icons/Send.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Send = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2-8.5 2.1-13.8 10.7-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"></path>
+  </svg>
+)
+
+export default Send

package/src/icons/Setting.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Setting = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path>
+  </svg>
+)
+
+export default Setting