feat: demo examples list

src/pageComponents/home/Examples/Item/Badge.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+const Badge = styled.div.attrs({ children: <>Demo</> })`
+  [data-theme='light'] & {
+    --theme-examples-badge-background-color: #2e3048;
+  }
+
+  [data-theme='dark'] & {
+    --theme-examples-badge-background-color: #4b4d60;
+  }
+
+  align-items: center;
+  background-color: var(--theme-examples-badge-background-color);
+  border-radius: var(--base-border-radius-sm);
+  color: #fff;
+  display: flex;
+  font-size: 1.2rem;
+  font-weight: 500;
+  height: 20px;
+  line-height: 1;
+  padding: 0 var(--base-gap);
+`
+
+export default Badge

src/pageComponents/home/Examples/Item/DocumentationButton.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components'
+
+import { ThemedButton } from 'db-ui-toolkit'
+
+const Icon = () => (
+  <svg fill="none" height="18" viewBox="0 0 16 18" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M15.875 12.6562V0.84375C15.875 0.376172 15.4988 0 15.0312 0H3.5C1.63672 0 0.125 1.51172 0.125 3.375V14.625C0.125 16.4883 1.63672 18 3.5 18H15.0312C15.4988 18 15.875 17.6238 15.875 17.1562V16.5938C15.875 16.3301 15.752 16.091 15.5621 15.9363C15.4145 15.3949 15.4145 13.8516 15.5621 13.3102C15.752 13.159 15.875 12.9199 15.875 12.6562ZM4.625 4.71094C4.625 4.59492 4.71992 4.5 4.83594 4.5H12.2891C12.4051 4.5 12.5 4.59492 12.5 4.71094V5.41406C12.5 5.53008 12.4051 5.625 12.2891 5.625H4.83594C4.71992 5.625 4.625 5.53008 4.625 5.41406V4.71094ZM4.625 6.96094C4.625 6.84492 4.71992 6.75 4.83594 6.75H12.2891C12.4051 6.75 12.5 6.84492 12.5 6.96094V7.66406C12.5 7.78008 12.4051 7.875 12.2891 7.875H4.83594C4.71992 7.875 4.625 7.78008 4.625 7.66406V6.96094ZM13.5336 15.75H3.5C2.87773 15.75 2.375 15.2473 2.375 14.625C2.375 14.0063 2.88125 13.5 3.5 13.5H13.5336C13.4668 14.1012 13.4668 15.1488 13.5336 15.75Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const DocumentationButton = styled(ThemedButton).attrs({
+  $cssVarRoot: '--theme-button-documentation',
+  children: (
+    <>
+      <Icon /> Documentation
+    </>
+  ),
+})`
+  [data-theme='light'] & {
+    --theme-button-documentation-background-color: transparent;
+    --theme-button-documentation-background-color-hover: transparent;
+
+    --theme-button-documentation-border-color: #e2e0e7;
+    --theme-button-documentation-border-color-hover: #4b4d60;
+
+    --theme-button-documentation-color: #4b4d60;
+    --theme-button-documentation-color-hover: #4b4d60;
+
+    --theme-button-documentation-background-color-disabled: transparent;
+    --theme-button-documentation-border-color-disabled: #e2e0e7;
+    --theme-button-documentation-color-disabled: #4b4d60;
+  }
+
+  [data-theme='dark'] & {
+    --theme-button-documentation-background-color: transparent;
+    --theme-button-documentation-background-color-hover: transparent;
+
+    --theme-button-documentation-border-color: #c5c2cb;
+    --theme-button-documentation-border-color-hover: #fff;
+
+    --theme-button-documentation-color: #c5c2cb;
+    --theme-button-documentation-color-hover: #fff;
+
+    --theme-button-documentation-background-color-disabled: transparent;
+    --theme-button-documentation-border-color-disabled: #c5c2cb;
+    --theme-button-documentation-color-disabled: #c5c2cb;
+  }
+
+  --base-button-height: 43px;
+  --base-button-font-size: 1.4rem;
+
+  font-weight: 500;
+  max-width: fit-content;
+`
+
+export default DocumentationButton

src/pageComponents/home/Examples/Item/index.tsx

@@ -0,0 +1,108 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+import BaseBadge from '@/src/pageComponents/home/Examples/Item/Badge'
+import DocumentationButton from '@/src/pageComponents/home/Examples/Item/DocumentationButton'
+
+const Wrapper = styled.div`
+  [data-theme='light'] & {
+    --theme-examples-item-background-color: #f7f7f7;
+  }
+
+  [data-theme='dark'] & {
+    --theme-examples-item-background-color: #2e3048;
+  }
+
+  background-color: var(--theme-examples-item-background-color);
+  border-radius: var(--base-border-radius);
+  display: flex;
+  gap: calc(var(--base-gap) * 2);
+  max-width: 100%;
+  padding: calc(var(--base-gap) * 2) calc(var(--base-gap) * 2) calc(var(--base-gap) * 2)
+    calc(var(--base-gap) * 4);
+`
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: calc(var(--base-gap) * 2) 0 0;
+  row-gap: calc(var(--base-gap) * 2);
+`
+
+const Icon = styled.div`
+  --icon-size: 40px;
+
+  align-items: center;
+  background-color: var(--theme-color-primary);
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  height: var(--icon-size);
+  justify-content: center;
+  width: var(--icon-size);
+`
+
+const Title = styled.h2`
+  color: var(--theme-color-text-primary);
+  font-size: 2.4rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+`
+
+const Text = styled.p`
+  color: var(--theme-color-text-primary);
+  font-size: 1.6rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+`
+
+const Demo = styled.div`
+  align-items: center;
+  background-color: var(--theme-examples-list-background-color);
+  border-radius: var(--base-border-radius);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  min-height: 205px;
+  padding: calc(var(--base-gap) * 5) calc(var(--base-gap) * 3) calc(var(--base-gap) * 3);
+  position: relative;
+`
+
+const Badge = styled(BaseBadge)`
+  --badge-gap: calc(var(--base-gap) + var(--base-gap-sm));
+
+  left: var(--badge-gap);
+  position: absolute;
+  top: var(--badge-gap);
+`
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  demo: React.ReactNode
+  href: string
+  icon: React.ReactNode
+  text: string
+  title: string
+}
+
+const Item: React.FC<Props> = ({ demo, href, icon, text, title, ...restProps }) => {
+  return (
+    <Wrapper {...restProps}>
+      <Info>
+        <Icon>{icon}</Icon>
+        <Title>{title}</Title>
+        <Text>{text}</Text>
+        <DocumentationButton as="a" href={href} target="_blank" />
+      </Info>
+      <Demo>
+        <Badge />
+        {demo}
+      </Demo>
+    </Wrapper>
+  )
+}
+
+export default Item

src/pageComponents/home/Examples/List.tsx

@@ -0,0 +1,59 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+import Item, { Props as ItemProps } from '@/src/pageComponents/home/Examples/Item'
+
+const Wrapper = styled.div`
+  [data-theme='light'] & {
+    --theme-examples-list-background-color: #e2e0e766;
+  }
+
+  [data-theme='dark'] & {
+    --theme-examples-list-background-color: #292b43;
+  }
+
+  align-items: center;
+  background-color: var(--theme-examples-list-background-color);
+  border-radius: var(--base-border-radius-xl);
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  padding: calc(var(--base-gap) * 7);
+  row-gap: calc(var(--base-gap) * 5);
+  width: 1066px;
+`
+
+const Title = styled.h2`
+  color: var(--theme-color-text-primary);
+  font-size: 3.6rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+`
+
+const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  row-gap: calc(var(--base-gap) * 2);
+  width: 100%;
+`
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  items: ItemProps[]
+}
+
+const List: React.FC<Props> = ({ items, ...restProps }) => {
+  return (
+    <Wrapper {...restProps}>
+      <Title>Built-in Features</Title>
+      <Items>
+        {items.map((item) => (
+          <Item key={item.title} {...item} />
+        ))}
+      </Items>
+    </Wrapper>
+  )
+}
+
+export default List

src/pageComponents/home/Examples/assets/Avatar.tsx

@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="20"
+    viewBox="0 0 21 20"
+    width="21"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M20.0236 17.8751C18.5958 15.4067 16.3955 13.6367 13.8277 12.7976C15.0979 12.0415 16.0847 10.8893 16.6367 9.51804C17.1886 8.14678 17.2752 6.63224 16.8831 5.20701C16.491 3.78178 15.6418 2.52467 14.4661 1.62873C13.2904 0.732786 11.8531 0.247559 10.3749 0.247559C8.8967 0.247559 7.45938 0.732786 6.28366 1.62873C5.10794 2.52467 4.25882 3.78178 3.86671 5.20701C3.47459 6.63224 3.56116 8.14678 4.11313 9.51804C4.66509 10.8893 5.65192 12.0415 6.92208 12.7976C4.35426 13.6357 2.15395 15.4057 0.726138 17.8751C0.673777 17.9605 0.639047 18.0555 0.623996 18.1545C0.608945 18.2535 0.613878 18.3545 0.638504 18.4516C0.66313 18.5487 0.706951 18.6399 0.76738 18.7197C0.827809 18.7996 0.903623 18.8666 0.990348 18.9167C1.07707 18.9667 1.17295 18.999 1.27233 19.0114C1.37171 19.0238 1.47257 19.0163 1.56897 18.9891C1.66537 18.9619 1.75534 18.9157 1.83359 18.8532C1.91184 18.7907 1.97678 18.7131 2.02458 18.6251C3.79083 15.5726 6.9127 13.7501 10.3749 13.7501C13.8371 13.7501 16.959 15.5726 18.7252 18.6251C18.773 18.7131 18.8379 18.7907 18.9162 18.8532C18.9944 18.9157 19.0844 18.9619 19.1808 18.9891C19.2772 19.0163 19.3781 19.0238 19.4774 19.0114C19.5768 18.999 19.6727 18.9667 19.7594 18.9167C19.8462 18.8666 19.922 18.7996 19.9824 18.7197C20.0428 18.6399 20.0866 18.5487 20.1113 18.4516C20.1359 18.3545 20.1408 18.2535 20.1258 18.1545C20.1107 18.0555 20.076 17.9605 20.0236 17.8751ZM5.12489 7.00011C5.12489 5.96176 5.43279 4.94672 6.00967 4.08337C6.58655 3.22001 7.40649 2.5471 8.3658 2.14974C9.32511 1.75238 10.3807 1.64841 11.3991 1.85099C12.4175 2.05356 13.353 2.55357 14.0872 3.2878C14.8214 4.02202 15.3214 4.95748 15.524 5.97589C15.7266 6.99429 15.6226 8.04989 15.2253 9.0092C14.8279 9.96851 14.155 10.7884 13.2916 11.3653C12.4283 11.9422 11.4132 12.2501 10.3749 12.2501C8.98296 12.2486 7.64847 11.695 6.66422 10.7108C5.67998 9.72653 5.12638 8.39204 5.12489 7.00011Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon

src/pageComponents/home/Examples/assets/Hash.tsx

@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="16"
+    viewBox="0 0 23 16"
+    width="23"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M22.4365 8.04098C22.4037 7.96691 21.6096 6.20535 19.8443 4.44004C17.4921 2.08785 14.5212 0.844727 11.2512 0.844727C7.98121 0.844727 5.01027 2.08785 2.65809 4.44004C0.892774 6.20535 0.0949617 7.96973 0.0658992 8.04098C0.0232553 8.13689 0.0012207 8.24069 0.0012207 8.34566C0.0012207 8.45063 0.0232553 8.55443 0.0658992 8.65035C0.0987117 8.72441 0.892774 10.485 2.65809 12.2504C5.01027 14.6016 7.98121 15.8447 11.2512 15.8447C14.5212 15.8447 17.4921 14.6016 19.8443 12.2504C21.6096 10.485 22.4037 8.72441 22.4365 8.65035C22.4792 8.55443 22.5012 8.45063 22.5012 8.34566C22.5012 8.24069 22.4792 8.13689 22.4365 8.04098ZM11.2512 14.3447C8.36559 14.3447 5.84465 13.2957 3.75777 11.2275C2.9015 10.376 2.17301 9.405 1.59496 8.34473C2.17286 7.28436 2.90136 6.31333 3.75777 5.46191C5.84465 3.39379 8.36559 2.34473 11.2512 2.34473C14.1368 2.34473 16.6578 3.39379 18.7446 5.46191C19.6026 6.31313 20.3327 7.28415 20.9121 8.34473C20.2362 9.6066 17.2915 14.3447 11.2512 14.3447ZM11.2512 3.84473C10.3612 3.84473 9.49117 4.10865 8.75115 4.60311C8.01112 5.09758 7.43435 5.80038 7.09375 6.62265C6.75316 7.44492 6.66404 8.34972 6.83768 9.22263C7.01131 10.0955 7.43989 10.8974 8.06923 11.5267C8.69857 12.156 9.50039 12.5846 10.3733 12.7583C11.2462 12.9319 12.151 12.8428 12.9733 12.5022C13.7956 12.1616 14.4984 11.5848 14.9928 10.8448C15.4873 10.1048 15.7512 9.23474 15.7512 8.34473C15.75 7.15163 15.2755 6.00776 14.4318 5.16412C13.5882 4.32047 12.4443 3.84597 11.2512 3.84473ZM11.2512 11.3447C10.6579 11.3447 10.0778 11.1688 9.5845 10.8391C9.09115 10.5095 8.70664 10.041 8.47957 9.49278C8.25251 8.9446 8.1931 8.3414 8.30886 7.75946C8.42461 7.17751 8.71033 6.64296 9.12989 6.22341C9.54945 5.80385 10.084 5.51813 10.6659 5.40237C11.2479 5.28661 11.8511 5.34602 12.3993 5.57309C12.9474 5.80015 13.416 6.18467 13.7456 6.67802C14.0753 7.17136 14.2512 7.75138 14.2512 8.34473C14.2512 9.14038 13.9351 9.90344 13.3725 10.466C12.8099 11.0287 12.0469 11.3447 11.2512 11.3447Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon

src/pageComponents/home/Examples/assets/IPFSImage.tsx

@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="20"
+    viewBox="0 0 18 20"
+    width="18"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M17.0306 5.71938L11.7806 0.469375C11.7109 0.399749 11.6282 0.344539 11.5371 0.306898C11.4461 0.269257 11.3485 0.249923 11.25 0.25H2.25C1.85218 0.25 1.47064 0.408035 1.18934 0.68934C0.908035 0.970645 0.75 1.35218 0.75 1.75V18.25C0.75 18.6478 0.908035 19.0294 1.18934 19.3107C1.47064 19.592 1.85218 19.75 2.25 19.75H15.75C16.1478 19.75 16.5294 19.592 16.8107 19.3107C17.092 19.0294 17.25 18.6478 17.25 18.25V6.25C17.2501 6.15148 17.2307 6.05391 17.1931 5.96286C17.1555 5.87182 17.1003 5.78908 17.0306 5.71938ZM12 2.81031L14.6897 5.5H12V2.81031ZM15.75 18.25H2.25V1.75H10.5V6.25C10.5 6.44891 10.579 6.63968 10.7197 6.78033C10.8603 6.92098 11.0511 7 11.25 7H15.75V18.25Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon

src/pageComponents/home/Examples/assets/InputAddress.tsx

@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="18"
+    viewBox="0 0 24 18"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M10.5 0.75C10.3011 0.75 10.1103 0.829018 9.96967 0.96967C9.82902 1.11032 9.75 1.30109 9.75 1.5V3H2.25C1.85218 3 1.47064 3.15804 1.18934 3.43934C0.908035 3.72064 0.75 4.10218 0.75 4.5V13.5C0.75 13.8978 0.908035 14.2794 1.18934 14.5607C1.47064 14.842 1.85218 15 2.25 15H9.75V16.5C9.75 16.6989 9.82902 16.8897 9.96967 17.0303C10.1103 17.171 10.3011 17.25 10.5 17.25C10.6989 17.25 10.8897 17.171 11.0303 17.0303C11.171 16.8897 11.25 16.6989 11.25 16.5V1.5C11.25 1.30109 11.171 1.11032 11.0303 0.96967C10.8897 0.829018 10.6989 0.75 10.5 0.75ZM2.25 13.5V4.5H9.75V13.5H2.25ZM23.25 4.5V13.5C23.25 13.8978 23.092 14.2794 22.8107 14.5607C22.5294 14.842 22.1478 15 21.75 15H13.5C13.3011 15 13.1103 14.921 12.9697 14.7803C12.829 14.6397 12.75 14.4489 12.75 14.25C12.75 14.0511 12.829 13.8603 12.9697 13.7197C13.1103 13.579 13.3011 13.5 13.5 13.5H21.75V4.5H13.5C13.3011 4.5 13.1103 4.42098 12.9697 4.28033C12.829 4.13968 12.75 3.94891 12.75 3.75C12.75 3.55109 12.829 3.36032 12.9697 3.21967C13.1103 3.07902 13.3011 3 13.5 3H21.75C22.1478 3 22.5294 3.15804 22.8107 3.43934C23.092 3.72064 23.25 4.10218 23.25 4.5ZM8.25 7.5C8.25 7.69891 8.17098 7.88968 8.03033 8.03033C7.88968 8.17098 7.69891 8.25 7.5 8.25H6.75V10.5C6.75 10.6989 6.67098 10.8897 6.53033 11.0303C6.38968 11.171 6.19891 11.25 6 11.25C5.80109 11.25 5.61032 11.171 5.46967 11.0303C5.32902 10.8897 5.25 10.6989 5.25 10.5V8.25H4.5C4.30109 8.25 4.11032 8.17098 3.96967 8.03033C3.82902 7.88968 3.75 7.69891 3.75 7.5C3.75 7.30109 3.82902 7.11032 3.96967 6.96967C4.11032 6.82902 4.30109 6.75 4.5 6.75H7.5C7.69891 6.75 7.88968 6.82902 8.03033 6.96967C8.17098 7.11032 8.25 7.30109 8.25 7.5Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon

src/pageComponents/home/Examples/assets/Subgraph.tsx

@@ -0,0 +1,25 @@
+import React, { HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`
+
+const Icon: React.FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
+  <Wrapper
+    fill="none"
+    height="19"
+    viewBox="0 0 22 19"
+    width="22"
+    xmlns="http://www.w3.org/2000/svg"
+    {...restProps}
+  >
+    <path
+      d="M15.1249 8.04004H19.6249C20.0227 8.04004 20.4042 7.882 20.6855 7.6007C20.9668 7.31939 21.1249 6.93786 21.1249 6.54004V2.04004C21.1249 1.64221 20.9668 1.26068 20.6855 0.979379C20.4042 0.698074 20.0227 0.540039 19.6249 0.540039H15.1249C14.7271 0.540039 14.3455 0.698074 14.0642 0.979379C13.7829 1.26068 13.6249 1.64221 13.6249 2.04004V3.54004H12.8749C12.0792 3.54004 11.3162 3.85611 10.7536 4.41872C10.1909 4.98133 9.87488 5.74439 9.87488 6.54004V8.79004H6.87488V8.04004C6.87488 7.64221 6.71684 7.26068 6.43554 6.97938C6.15423 6.69807 5.7727 6.54004 5.37488 6.54004H2.37488C1.97705 6.54004 1.59552 6.69807 1.31422 6.97938C1.03291 7.26068 0.874878 7.64221 0.874878 8.04004V11.04C0.874878 11.4379 1.03291 11.8194 1.31422 12.1007C1.59552 12.382 1.97705 12.54 2.37488 12.54H5.37488C5.7727 12.54 6.15423 12.382 6.43554 12.1007C6.71684 11.8194 6.87488 11.4379 6.87488 11.04V10.29H9.87488V12.54C9.87488 13.3357 10.1909 14.0988 10.7536 14.6614C11.3162 15.224 12.0792 15.54 12.8749 15.54H13.6249V17.04C13.6249 17.4379 13.7829 17.8194 14.0642 18.1007C14.3455 18.382 14.7271 18.54 15.1249 18.54H19.6249C20.0227 18.54 20.4042 18.382 20.6855 18.1007C20.9668 17.8194 21.1249 17.4379 21.1249 17.04V12.54C21.1249 12.1422 20.9668 11.7607 20.6855 11.4794C20.4042 11.1981 20.0227 11.04 19.6249 11.04H15.1249C14.7271 11.04 14.3455 11.1981 14.0642 11.4794C13.7829 11.7607 13.6249 12.1422 13.6249 12.54V14.04H12.8749C12.4771 14.04 12.0955 13.882 11.8142 13.6007C11.5329 13.3194 11.3749 12.9379 11.3749 12.54V6.54004C11.3749 6.14221 11.5329 5.76068 11.8142 5.47938C12.0955 5.19807 12.4771 5.04004 12.8749 5.04004H13.6249V6.54004C13.6249 6.93786 13.7829 7.31939 14.0642 7.6007C14.3455 7.882 14.7271 8.04004 15.1249 8.04004ZM5.37488 11.04H2.37488V8.04004H5.37488V11.04ZM15.1249 12.54H19.6249V17.04H15.1249V12.54ZM15.1249 2.04004H19.6249V6.54004H15.1249V2.04004Z"
+      fill="currentColor"
+    />
+  </Wrapper>
+)
+
+export default Icon