wex-ui-lib 1.0.2 → 1.0.4

package/src/components/Button/index.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import Button from '.'
-import { ButtonProps } from './index.types'
-import { Meta, StoryObj } from '@storybook/react/*'
-
-type StoryProps = ButtonProps & { buttonText: string }
-
-const meta: Meta<StoryProps> = {
-  title: 'Components/Button',
-  component: Button,
-  argTypes: { onClick: { action: 'Button clicked!' } },
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<StoryProps>
-
-export const Default: Story = {
-  args: {
-    buttonText: 'Button',
-    type: 'default',
-  },
-  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
-}
-
-export const Rounded: Story = {
-  args: {
-    buttonText: 'Button',
-    type: 'rounded',
-    arrow: 'arrow-caret'
-  },
-  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
-}
-
-export const Pill: Story = {
-  args: {
-    buttonText: 'Button',
-    type: 'pill',
-  },
-  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
-}
-
-export const Underlined: Story = {
-  args: {
-    buttonText: 'Button',
-    type: 'underlined',
-    arrow: 'arrow-long'
-  },
-  render: ({ buttonText, ...args }) => <Button {...args}>{buttonText}</Button>,
-}

package/src/components/Button/index.tsx

@@ -1,157 +0,0 @@
-import React from "react"
-import styled from '@emotion/styled';
-import Icon from '../../shared/components/Icon';
-import { theme } from '../../shared/styles/theme';
-import { ButtonProps } from './index.types';
-import { formatText } from "../../shared/utils/formatters";
-
-export default function Button(props: ButtonProps) {
-  const {
-    children,
-    onClick,
-    type,
-    colors,
-    arrow,
-    font = {
-      size: '16px',
-      casing: 'uppercase',
-      weight: '600'
-    },
-  } = props
-
-  switch (type) {
-    default:
-      return (
-        <DefaultButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
-          {font.casing ? formatText(children as string, font.casing) : children}
-          {arrow &&
-            <Icon icon={arrow} color={colors?.text || theme.white} />
-          }
-        </DefaultButton>
-      )
-    case "rounded":
-      return (
-        <RoundedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
-          {font.casing ? formatText(children as string, font.casing) : children}
-          {arrow &&
-            <Icon icon={arrow} color={colors?.text || theme.white} />
-          }
-        </RoundedButton>
-      )
-    case "pill":
-      return (
-        <PillButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
-          {font.casing ? formatText(children as string, font.casing) : children}
-          {arrow &&
-            <Icon icon={arrow} color={colors?.text || theme.white} />
-          }
-        </PillButton>
-      )
-    case "underlined":
-      return (
-        <UnderlinedButton onClick={onClick} colors={colors} font={font} hasArrow={arrow !== undefined}>
-          {font.casing ? formatText(children as string, font.casing) : children}
-          {arrow &&
-            <Icon icon={arrow} color={colors?.text || theme.primary} />
-          }
-        </UnderlinedButton>
-      )
-  }
-}
-
-const DefaultButton = styled.button<{ colors?: ButtonProps['colors'], font?: ButtonProps['font'], hasArrow?: boolean }>`
-  all: unset; 
-  display: flex;
-  align-items: center;
-  padding: 10px 14px;
-  letter-spacing: 1px;
-  font-size: ${props => props.font?.size};
-  font-weight: ${props => props.font?.weight};
-  cursor: pointer;
-  width: fit-content;
-  grid-area: button;
-  transition: filter 0.3s, background-color 0.3s;
-  gap: 11px;
-  background-color: ${props => props.colors?.background || theme.primary};
-  color: ${props => props.colors?.text || theme.white};
-  position: relative;
-  svg {
-    fill: ${props => props.colors?.text || theme.white};
-    transition: all 0.3s;
-  }
-  &:hover{
-    ${props => props.colors?.backgroundHover ? `background-color: ${props.colors?.backgroundHover}` : `filter: brightness(1.4)`};
-    color: ${props => props.colors?.textHover || theme.white};
-    svg {
-      fill: ${props => props.colors?.textHover || theme.white};
-      transform: translateX(5px);
-    }
-    &::after{
-      transform: translateX(4px);
-    }
-  }
-  &::after{
-    display: ${props => props.hasArrow ? "unset" : "none"};
-    content: "";
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    transition: all 0.3s;
-    background-color: ${props => props.colors?.background || theme.primary};
-    left: 0;
-    top: 0;
-    z-index: -1;
-    border-radius: inherit;
-    transform-origin: left;
-  }
-`
-
-const UnderlinedButton = styled(DefaultButton)`
-  background-color: ${props => props.colors?.background || 'transparent'};
-  color: ${props => props.color || theme.black};
-  padding: 10px 0px;
-  letter-spacing: 2px;
-  &::before{
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 99%;
-    height: 2.5px;
-    background-color: ${props => props.colors?.border || theme.primary};
-    transition: 0.2s;
-  }
-  svg{
-    fill: ${props => props.colors?.border || theme.primary};
-    path {
-      fill: ${props => props.colors?.border || theme.primary};
-    }
-  }
-  &::after{
-    display: none;
-  }
-  &:hover{
-    color: ${props => props.colors?.textHover || theme.black};
-    transform: translateY(-1px);
-    svg{
-      transform: translateX(6px);
-      fill: ${props => props.colors?.borderHover || theme.primary};
-      path {
-        fill: ${props => props.colors?.borderHover || theme.primary};
-      }
-    }
-    &::before{
-      transform: translateY(4px);
-    }
-  }
-`
-
-const PillButton = styled(DefaultButton)`
-  border-radius: 30px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  `
-
-const RoundedButton = styled(DefaultButton)`
-  border-radius: 4px;
-`

package/src/components/Button/index.types.ts

@@ -1,11 +0,0 @@
-import { ArrowIcon } from "../../shared/components/Icon"
-import { ComponentColors, ComponentFont } from "../../shared/types"
-
-export type ButtonProps = {
-  children?: React.ReactNode | string,
-  onClick?: () => void,
-  type?: "default" | "rounded" | "pill" | "underlined",
-  colors?: ComponentColors
-  font?: ComponentFont
-  arrow?: ArrowIcon
-}

package/src/components/Hero/index.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react';
-import Hero from '.';
-import Button from '../Button';
-
-const meta = {
-  title: 'Components/Hero',
-  component: Hero,
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Hero>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () =>
-    <Hero
-      height='100vh'
-      imageUrls={['https://images.unsplash.com/photo-1628745277862-bc0b2d68c50c']}
-      overlay={{
-        color: "black",
-        opacity: "50%"
-      }}>
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
-        <h2>Donde el lujo se transforma en el arte de vivir</h2>
-        <h2>60 años creando espacios únicos que inspiran.</h2>
-        <Button
-          arrow='arrow-caret'
-          font={{ casing: 'first-capitalized' }}
-          colors={{ background: 'black' }}
-        >
-          Transformá tu espacio
-        </Button>
-      </div>
-    </Hero>
-};

package/src/components/Hero/index.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
-import { HeroProps } from './index.types'
-import { theme } from '../../shared/styles/theme'
-import { Opacity } from '../../shared/types'
-
-export default function Hero(props: HeroProps) {
-  const {
-    children,
-    imageUrls=[""],
-    overlay,
-    marginTop,
-    height
-  } = props
-
-  const [activeBackgroundUrl, setActiveBackgroundUrl] = useState<string>(imageUrls && imageUrls[0] ? imageUrls[0] : "")
-
-  return (
-    <>
-      <Container 
-        backgroundUrl={activeBackgroundUrl}
-        marginTop={marginTop}
-        height={height}
-      >
-        {overlay && (
-          <Overlay color={overlay.color} opacity={overlay.opacity}/>
-        )}
-        <HeroContent>
-          {children}
-        </HeroContent>
-      </Container>
-    </>
-  )
-}
-
-const Container = styled.div<{backgroundUrl: string, marginTop: HeroProps['marginTop'], height: HeroProps['height']}>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  height: ${props => `calc(${props.height} - ${props.marginTop})`};
-  margin-top: ${props => props.marginTop};
-  background-image: url(${props => props.backgroundUrl});
-  /* background-color:  rgba(76, 88, 97, 0.7);
-  background-blend-mode: luminosity; */
-  background-position-y: 69%;
-  background-size: cover;
-  padding: 0 8vw;
-  @media only screen and (max-width: 800px) {
-    padding: 80px 10px;
-    svg {
-      max-height: 300px;
-      transform: translateX(20px);
-    }
-  }
-`
-
-const Overlay = styled.div<{color: string, opacity: Opacity}>`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  background-color: ${props => props.color};
-  opacity: ${props => props.opacity};
-`
-
-const HeroContent = styled.div`
-  width: 100%;
-  z-index: 2;
-`

package/src/components/Hero/index.types.ts

@@ -1,13 +0,0 @@
-import React from "react"
-import { Opacity } from "../../shared/types"
-
-export type HeroProps = {
-  children?: React.ReactNode
-  imageUrls?: string[]
-  marginTop?: string
-  height?: string
-  overlay?: {
-    color: string
-    opacity: Opacity
-  }
-}

package/src/components/Navbar/index.stories.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import Navbar from '.'
-import { NavbarProps } from './index.types'
-import { Meta, StoryObj } from '@storybook/react/*'
-
-type StoryProps = NavbarProps
-
-const meta: Meta<StoryProps> = {
-  title: 'Components/Navbar',
-  component: Navbar,
-  parameters: {
-    layout: '',
-  },
-  tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<StoryProps>
-
-export const Default: Story = {
-  render: () =>
-    <Navbar
-      config={{ centeredItems: true }}
-      logo={{ url: 'https://kgo.googleusercontent.com/profile_vrt_raw_bytes_1587515400_10885.png' }}
-      button={{
-        label: "Agendá una reunión",
-        type: "rounded",
-        arrow: 'arrow-long',
-        font: {
-          size: '14px',
-          weight: '500',
-          casing: 'first-capitalized'
-        }
-      }}
-      items={[
-        {
-          label: "Sobre Nosotros",
-          subitems: [
-            {
-              label: 'Quiénes somos',
-            },
-            {
-              label: 'Por qué elegirnos',
-            },
-            {
-              label: 'Testimonios y Opiniones',
-            }
-          ],
-        },
-        {
-          label: "Productos",
-        },
-        {
-          label: "Nuestros proyectos",
-        },
-      ]}
-    />,
-}

package/src/components/Navbar/index.tsx

@@ -1,196 +0,0 @@
-import React from 'react'
-import styled from '@emotion/styled';
-import { theme } from '../../shared/styles/theme';
-import Icon from '../../shared/components/Icon';
-import Button from '../Button';
-import { NavbarProps } from './index.types';
-import { appearAnimation, disappearAnimation } from '../../shared/styles/animations';
-
-export default function Navbar(props: NavbarProps) {
-  const {
-    logo,
-    items,
-    button,
-    config
-  } = props
-
-  return (
-    <>
-      <NavbarContainer height={config.height} colors={config.colors} centeredItems={config.centeredItems}>
-        <Logo src={logo?.url} onClick={logo?.onClick} />
-        <div>
-          {items?.map(item => {
-            return (
-              <a
-                key={item.label}
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault();
-                  item.onClick && item.onClick()
-                }}
-              >
-                {item.label}
-                {item.subitems && (
-                  <>
-                    <Icon icon='arrow-caret' size='8px' />
-                    <div>
-                      {item.subitems?.map(subitem => {
-                        return (
-                          <ControlledNavItem key={subitem.label}>
-                            <a href="#" onClick={(e) => {
-                              e.preventDefault();
-                              subitem.onClick && subitem.onClick()
-                            }}>
-                              {subitem.label}
-                            </a>
-                          </ControlledNavItem>
-                        )
-                      })}
-                    </div>
-                  </>
-                )}
-              </a>
-            )
-          })}
-        </div>
-        {button &&
-          <Button
-            colors={button.colors}
-            type={button.type}
-            font={button.font}
-            onClick={button.onClick}
-            arrow={button.arrow}
-          >
-            {button.label}
-          </Button>
-        }
-      </NavbarContainer>
-    </>
-  )
-}
-
-const NavbarContainer = styled.div<NavbarProps['config']>`
-  background-color: ${props => props.colors?.background || theme.black};
-  width: 100vw;
-  height: ${props => props.height || '80px'};
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 4vw;
-  z-index: 99;
-  backdrop-filter: blur(4px);
-  * {
-    -webkit-user-drag: none;
-    -khtml-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-  }
-  @media only screen and (max-width: 800px) {
-    height: 80px;
-    padding: 0 6vw;
-  }
-  & > div {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    margin-left: ${props => props.centeredItems ? 'unset' : 'auto'};
-    & > a {
-      color: ${props => props.colors?.text || theme.white};
-      position: relative;
-      display: flex;
-      gap: 5px;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      font-size: 12px;
-      letter-spacing: 2px;
-      font-weight: 500;
-      text-transform: uppercase;
-      text-decoration: none;
-      padding: 6px 22px 0;
-      transition: 0.3s;
-      border-bottom: 4px solid transparent;
-      svg {
-        margin-bottom: 1px;
-        transform: rotateZ(90deg);
-      }
-      & > div {
-        z-index: 10;
-        position: absolute;
-        display: none;
-        flex-direction: column;
-        align-items: flex-start;
-        width: max-content;
-        gap: 12px;
-        top: 88%;
-        left: 0;
-        background-color: black;
-        padding: 16px 14px;
-        animation-name: ${disappearAnimation};
-        animation-duration: 0.3s;
-        animation-fill-mode: forwards;
-        a {
-          color: ${props => props.colors?.text || theme.white};
-          padding: 0;
-        }
-        &:hover {
-          animation-name: ${appearAnimation};
-          display: flex;
-        }
-      }
-      &:hover {
-        border-color: white;
-        svg {
-          transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);
-        }
-        & > div{
-          animation-name: ${appearAnimation};
-          display: flex;
-        }
-      }
-    }
-    @media only screen and (max-width: 800px) {
-      display: none;
-    }
-  }
-`
-
-const Logo = styled.img`
-  cursor: pointer;
-  height: 56%;
-  transition: all 0.2s;
-  &:hover {
-    filter: brightness(1.2);
-  }
-`
-
-const ControlledNavItem = styled.div`
-    cursor: pointer;
-    height: 100%;
-    max-height: 90px;
-    text-transform: uppercase;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: 0.3s;
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      padding: 0 22px;
-      font-size: 12px;
-      letter-spacing: 2px;
-      font-weight: 500;
-      text-decoration: none;
-    }
-    &:hover {
-      & > div{
-        display: flex;
-      }
-    }
-  `

package/src/components/Navbar/index.types.ts

@@ -1,27 +0,0 @@
-import React from "react"
-import { ButtonProps } from "../Button/index.types"
-import { ComponentColors } from "../../shared/types"
-
-export type NavbarProps = {
-  config: {
-    colors?: ComponentColors
-    height?: string
-    centeredItems?: boolean
-  }
-  logo?: {
-    url: string
-    onClick?: () => void
-  }
-  items?: {
-    label: string
-    onClick?: () => void
-    subitems?: {
-      label: string
-      onClick?: () => void
-    }[]
-  }[]
-  button?: ButtonProps & {
-    label: string
-    onClick?: () => void
-  }
-}

package/src/components/Showcase/index.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react/*'
-import { ShowcaseProps } from './index.types'
-import Showcase from '.'
-import { theme } from '../../shared/styles/theme'
-
-type StoryProps = ShowcaseProps
-
-const meta: Meta<StoryProps> = {
-  title: 'Components/Showcase',
-  component: Showcase,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: [],
-}
-
-export default meta
-
-type Story = StoryObj<StoryProps>
-
-export const Default: Story = {
-  render: () => (
-    <Showcase 
-      backgroundColor={theme.black}
-      items={[
-        {
-          label: "Cocinas",
-          imageUrl: "https://s3-alpha-sig.figma.com/img/3a0e/23d7/0d060ffe0c746222fe8ba3ef5c0e9ea8?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=e9PCWO9nXQiYEdTdaAUw~Mj2gt82gQoixJw4F-e205zHZqaov1DB3CITGEADHwNn2hdlLIBF5cReOI6LVdCbAVJva1V1l-s5USJlxhLZSYnYMuU7VR6MFLMOHAUtaQ097MRubuo94qKxWVyRR4lPNR8IGPQ0WTsy84KS1sYXE1PQbMuhfdI9MqICMHbp8VgbogVa3oXUZ~ciFH3VsGRAVC-xLPCMkhkgP-N-sFjsyYeK9pS61-hhnne9tmzgmlz4tDVb57tM5a0Deue7giFf-bTfyo-GA1C26Qx88oCtE6bupgBeoiq988RtV5bGkTxJMugdTprr-kbMOs7bds7uiw__"
-        },
-        {
-          label: "Mesadas",
-          imageUrl: "https://s3-alpha-sig.figma.com/img/f785/86dc/82fe2f6e1e6adf5f9279a1703e3ba495?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=o630MkLw7YCQAQA4v9kSerLB4UTkDcmPyoQY0h-VFnJDHVnUprbCFed3mVoX-6ltkaSQP7-Qk7QooxbErRo-rWXzWD-Fvmk~iQQ-RBYAJZHpCjF-AGh5KWko1zcHSzNiZngeBzIDsNtyzuZUnl~0LWlPJrLb68hKmB2loyUfvEa0DXaFbruHYazBbJv3a4ia8hPO3rzPYdLzuloyomTW1N4IMAhOB8r32Q-94G3eoflbiSlAaedwtQTJDSMX8X0NZ8~qXcJaPk2HlkvOhgvFmTmFqfg1FIxjDMmF263bXyAd0dPwunRQ6HQFzA-9OrWr3ZOfT-zGmJQivhziUBFM8Q__"
-        },
-        {
-          label: "Accesorios",
-          imageUrl: "https://s3-alpha-sig.figma.com/img/2cd6/2a3c/7ae476c8ada93abdcc116a1d2aa5e948?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=nSe9I6uq8bKHOgaqwwZdcyU2VSsorHQtkY6YTpDUTpdh9LiaJdToSmXOzy2qirgnm8C7qTfrF80KP40eZrhFSJUomLj8J90r1SXC-FUVDJrYxNxkdmTApSKBbghWpumwfA~-vbJATZsFtyBywXfTaZzu-Djkiv8xqPSNlwhc2WSKpXX-bpeHcGAvdoINxTsJM2PhzCSIbTybITSi7f59GobTFXzRSZC7A6wu8eTckG7AylzDDa0-LRTkSvmGx86GnZJc-HIE2-US~nyxqG9aO8Knv79JP8K4YcUnNoRS1gL~OXN6HE4eHu3WwmXZmAJ4Xj9B6d5lbYTkOcoGQYtWjg__"
-        },
-        {
-          label: "Placares y Vestidores",
-          imageUrl: "https://s3-alpha-sig.figma.com/img/9493/7851/c8d2abc918e08ea500deab12830ea3bb?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=MYdXcluyFxyH7z73JP3hj3HQaYJLh5068mHGljV4uQUc8pMYgpxjMsmP1j77FP7m8V~4K4pZ9PmE5x8Ry8unEgYwSfzA-JYw~TS-s5xQgbFRJuGdNVldICnRrw4CfX7K1YSS~0vATXi6gE4LPAmxrSeoMgXHgipZL9E4lCMVwFUpOvyIKxaMS2iO7MCuo-G59L-qt4hhOXGFdc9CEM82kBOIBxzGPqvZBSYr77ronVc5Mwwd7RI5GEqH7RZm9tYz~SkXql4dN7dPnfBCVuiaEOmQIfoqPjDvPLGKvxLcA-~ataXpE-b3~eJn0Pk9CODn1ReACRF5LPAD8Suc0Y-juA__"
-        },
-        {
-          label: "Dormitorios",
-          imageUrl: "https://s3-alpha-sig.figma.com/img/ed05/0f1a/1db80154708d1df2cf70585589f89eac?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=KpAKwg9aheibfNvLhs2ol7Sp3fWNvOKS1K0augX0uxqjve5F~7SgoyITuCWokfmIDBh15hh8eus8KejFmWZJ5Kmis4cth9rBnODw038MIQWjDsWH01uXawmpWXZJT1gvZSxP-WIhzfDsaQVkYq1g9nkBxY6JKY5fR6oBLXlMW8BIFaqqPazW~t9gsFbMyDnBu9MAFlXhyIf1XXmFQdVsl2yJhxW7gw9d2lg1juek-FGYzwsJqNdFJnwKrvdb-i6zmqO~9CXZcRwAkonVhqyZysSulwRpJ3r9TwAZNLjWFAsH-wkSGDk44HN-pvJndTrmV~CcWZk4KxUUgRukx~RY2w__"
-        },
-        {
-          label: "Living",
-          imageUrl: "https://s3-alpha-sig.figma.com/img/7792/4024/34e4dce3c316cdce310593312054b966?Expires=1739145600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=kqCpcW8oe~SV4UaLnDyWfYUGHDJLJEiok1J94xZOELWaytzco6eFkuzMNPsn-rt7VHe8c1Wg3FmLrdMpzIHTbmOFuuKX7uh7hNjjE7rRW7GiwDnIT8iXmWnbc3Oc83lc8X8hCq79v9LxPAr67BqrGbjo3FjKMlVTpV-wi-ExSoPg1UrgQ5FCa~~sScWoQx-NutdmMGSHPDwfAmP811BekiltHmzW6de52C-srViEAhrzGw3XE5l1WoGVvy8G~qHY75sTMN5R6SHg4ed2m7OXhFKbgxYlPst85FRmJSe2ecZboTMJTQMT2MLjzxDG436Zm5LXDFaMqqAtdS3b73gBkg__"
-        },
-      ]}
-    />
-  ),
-}