w-design-system 0.0.2 → 0.0.4

package/src/components/Modal/index.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { closeSVG } from '../../assets/icon'
-import { theme } from '../Themes'
-import { Title } from '../Title'
-import { IconWrapper } from '../IconWrapper'
-import { ModalTypes } from '../Types'
-import { ModalContainer, Overlay } from './styles'
-const {
-  colors: { cyan50, shade30 },
-} = theme
-
-export const Modal: React.FC<ModalTypes> = ({ children, onClose, footer, ...props }) => {
-  return ReactDOM.createPortal(
-    <>
-      <Overlay onClick={onClose} />
-      <ModalContainer {...props}>
-        <div className={'modalHeader'}>
-          <Title size={'medium'} bold color={cyan50}>
-            Enviar
-          </Title>
-          <IconWrapper src={closeSVG} width={'14px'} height={'14px'} color={shade30} onClick={onClose} />
-        </div>
-        <div className={'modalContainer'}>{children}</div>
-        <div className={'modalFooter'}>{footer}</div>
-      </ModalContainer>
-    </>,
-    document.body,
-  )
-}

package/src/components/Modal/stories.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
-import { Modal } from './index'
-import { Paragraph } from '../Paragraph'
-import { Button } from '../Button'
-
-const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
-  component: Modal,
-} satisfies Meta<typeof Modal>
-
-export default meta
-
-type Story = StoryObj<typeof Modal>
-
-export const Playground: Story = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isOpen, setIsOpen] = useState(false)
-
-    return (
-      <>
-        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-        {isOpen && (
-          <Modal
-            onClose={() => setIsOpen(false)}
-            footer={
-              <>
-                <Button onClick={() => setIsOpen(true)} variant={'gray'}>
-                  Cancelar
-                </Button>
-                <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-              </>
-            }
-          >
-            <Paragraph size={'medium'} weight={800}>
-              Modal Title
-            </Paragraph>
-            <Paragraph>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-              industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
-              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-              like Aldus PageMaker including versions of Lorem Ipsum.
-            </Paragraph>
-          </Modal>
-        )}
-      </>
-    )
-  },
-}

package/src/components/Modal/styles.ts

@@ -1,51 +0,0 @@
-import styled from 'styled-components'
-import { theme } from '../Themes'
-const {
-  colors: { shade20 },
-  zIndex: { z8, z9 },
-} = theme
-
-export const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: ${z8};
-`
-export const ModalContainer = styled.div`
-  display: flex;
-  min-width: 360px;
-  width: auto;
-  height: auto;
-  padding: 30px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 24px;
-  flex-shrink: 0;
-  border-radius: 24px;
-  border: 1px solid ${shade20};
-  background: white;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: ${z9};
-
-  .modalContainer {
-    min-height: 100px;
-  }
-  .modalHeader {
-    display: inline-flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-  .modalFooter {
-    display: inline-flex;
-    justify-content: flex-end;
-    width: 100%;
-    gap: 0 24px;
-  }
-`

package/src/components/Paragraph/index.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-interface ParagraphProps {
-  size?: 'x-small' | 'small' | 'medium' | 'large'
-  weight?: 400 | 600 | 700 | 800
-  as?: 'span' | 'div' | 'label' | 'p'
-  color?: string // Adicionando a propriedade color
-  children: React.ReactNode
-}
-
-const sizes = {
-  'x-small': '12px',
-  small: '14px',
-  medium: '16px',
-  large: '18px',
-}
-
-const weights = {
-  400: 400,
-  600: 600,
-  700: 700,
-  800: 800,
-}
-
-const ParagraphStyled = styled.p<ParagraphProps>`
-  margin: 0;
-  padding: 0;
-  font-size: ${props => sizes[props.size || 'small']};
-  font-weight: ${props => (props.weight ? weights[props.weight] : 400)};
-  line-height: 140%;
-  font-family: 'Nunito Sans', sans-serif;
-  color: ${props => props.color || 'inherit'}; // Aplicando a cor
-`
-
-export const Paragraph: React.FC<ParagraphProps> = ({ size = 'small', weight, as = 'p', color, children }) => {
-  return (
-    <ParagraphStyled as={as} size={size} weight={weight} color={color}>
-      {children}
-    </ParagraphStyled>
-  )
-}

package/src/components/Paragraph/stories.tsx

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Paragraph } from './index'
-
-const meta: Meta<typeof Paragraph> = {
-  title: 'Components/Paragraph',
-  component: Paragraph,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: { type: 'select', options: ['x-small', 'small', 'medium', 'large'] },
-      description: 'Select the size of the paragraph',
-    },
-    weight: {
-      control: { type: 'select', options: [400, 600, 700, 800] },
-      description: 'Select the font weight of the paragraph',
-    },
-    as: {
-      control: { type: 'select', options: ['span', 'div', 'label', 'p'] },
-      description: 'Select the HTML element to render',
-    },
-    color: {
-      control: 'color', // Adicionando o controle de cor
-      description: 'Select the color of the text',
-    },
-    children: {
-      control: 'text',
-      description: 'Content of the paragraph',
-    },
-  },
-} satisfies Meta<typeof Paragraph>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Define different stories for the Paragraph component
-
-export const XSmall: Story = {
-  args: {
-    size: 'x-small',
-    color: '#000000', // Definindo a cor para XSmall
-    children: 'This is an X-small paragraph.',
-  },
-}
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    weight: 600,
-    color: '#333333', // Definindo a cor para Small
-    children: 'This is a small paragraph with weight 600.',
-  },
-}
-
-export const Medium: Story = {
-  args: {
-    size: 'medium',
-    weight: 700,
-    color: '#666666', // Definindo a cor para Medium
-    children: 'This is a medium paragraph with weight 700.',
-  },
-}
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    color: '#999999', // Definindo a cor para Large
-    children: 'This is a large paragraph.',
-  },
-}
-
-export const CustomElement: Story = {
-  args: {
-    size: 'medium',
-    as: 'label',
-    color: '#CC0000', // Definindo a cor para CustomElement
-    children: 'This is a medium paragraph rendered as a label.',
-  },
-}
-
-export const AllSizes: Story = {
-  args: {
-    size: 'medium',
-    color: '#000000',
-    children: 'This paragraph can be adjusted to any size using the controls.',
-  },
-}
-
-export const AllWeights: Story = {
-  args: {
-    size: 'medium',
-    weight: 400,
-    color: '#000000',
-    children: 'This paragraph weight can be adjusted to 400, 600, 700, or 800.',
-  },
-}
-
-export const AllElements: Story = {
-  args: {
-    size: 'medium',
-    as: 'div',
-    color: '#000000',
-    children: 'This paragraph can be rendered as different HTML elements.',
-  },
-}

package/src/components/Tabs/index.tsx

@@ -1,24 +0,0 @@
-import React, { useState } from 'react'
-import { TabsTypes } from '../Types'
-import { TabsContainerStyled, TabStyled } from './styles'
-
-export const Tabs: React.FC<TabsTypes> = ({ tabs, defaultActiveTab, onTabChange }) => {
-  const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0])
-
-  const handleTabClick = (tab: string) => {
-    setActiveTab(tab)
-    if (onTabChange) {
-      onTabChange(tab)
-    }
-  }
-
-  return (
-    <TabsContainerStyled>
-      {tabs.map(tab => (
-        <TabStyled key={tab} active={tab === activeTab} onClick={() => handleTabClick(tab)}>
-          {tab}
-        </TabStyled>
-      ))}
-    </TabsContainerStyled>
-  )
-}

package/src/components/Tabs/stories.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { Paragraph } from '../Paragraph'
-import { Tabs } from './index'
-import { useState } from 'react'
-
-const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
-  component: Tabs,
-} satisfies Meta<typeof Tabs>
-
-export default meta
-
-type Story = StoryObj<typeof Tabs>
-
-export const Playground: Story = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [activeTab, setActiveTab] = useState('Tab 1')
-    const handleTabChange = (activeTab: string) => {
-      setActiveTab(activeTab)
-    }
-
-    return (
-      <div style={{ background: '#e0dede', padding: '50px', height: '100vh' }}>
-        <Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} defaultActiveTab="Tab 1" onTabChange={handleTabChange} />
-        <div style={{ background: 'white', padding: '50px 20px', borderRadius: '8px', marginTop: '-5px' }}>
-          {activeTab === 'Tab 1' && (
-            <>
-              <Paragraph size={'medium'} weight={800}>
-                Tab 1
-              </Paragraph>
-              <Paragraph>
-                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
-                into electronic
-              </Paragraph>
-            </>
-          )}
-          {activeTab === 'Tab 2' && (
-            <>
-              <Paragraph size={'medium'} weight={800}>
-                Tab 2
-              </Paragraph>
-              <Paragraph>
-                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
-                into electronic Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-                has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
-                of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
-                the leap into electronic
-              </Paragraph>
-            </>
-          )}
-          {activeTab === 'Tab 3' && (
-            <>
-              <Paragraph size={'medium'} weight={800}>
-                Tab 3
-              </Paragraph>
-              <Paragraph>
-                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
-                into electronic
-              </Paragraph>
-            </>
-          )}
-        </div>
-      </div>
-    )
-  },
-}

package/src/components/Tabs/styles.ts

@@ -1,23 +0,0 @@
-import styled from 'styled-components'
-
-export const TabsContainerStyled = styled.div`
-  display: flex;
-  align-items: flex-end;
-`
-
-export const TabStyled = styled.div<{ active: boolean }>`
-  padding: 8px 16px;
-  cursor: pointer;
-  border-radius: 24px 24px 0 0;
-  background: white;
-  opacity: ${props => (props.active ? 1 : 0.8)};
-  height: ${props => (props.active ? '45px' : '40px')};
-  min-width: 95px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-family: 'Nunito Sans', sans-serif;
-  font-weight: ${props => (props.active ? 'bold' : 'normal')};
-  color: ${props => (props.active ? 'var(--PrimaryColor, #000)' : 'var(--SecondaryColor, #666)')};
-  transition: opacity 0.3s;
-`

package/src/components/Themes/index.ts

@@ -1,99 +0,0 @@
-const cyan = {
-  cyan50: '#001640',
-  cyan40: '#1A3D7F',
-  cyan30: '#025FDE',
-  cyan20: '#217EFD',
-  cyan10: '#EEF5FF',
-}
-
-const shades = {
-  shade50: '#333333',
-  shade40: '#666666',
-  shade30: '#999999',
-  shade20: '#EEEEEE',
-  shade10: '#EFF1F3',
-  shade05: '#FAFAFA',
-}
-
-const red = {
-  red40: '#981010',
-  red30: '#B41313',
-  red20: '#F3D9D9',
-  red10: '#F9EDED',
-}
-
-const honey = {
-  honey40: '#F77202',
-  honey30: '#F77202',
-  honey20: '#FCCEA7',
-  honey10: '#FDE3CC',
-}
-
-const yellow = {
-  yellow30: '#D08007',
-  yellow20: '#EFD3A8',
-  yellow10: '#FAF2E6',
-}
-
-const mint = {
-  mint40: '#059D2F',
-  mint30: '#06B737',
-  mint20: '#D7EFDE',
-  mint10: '#EBF8EF',
-}
-
-const white = '#FFFFFF'
-const black = '#333333'
-const transparent = 'transparent'
-
-export const spacing = {
-  space1: '4px',
-  space2: '8px',
-  space3: '16px',
-  space4: '24px',
-  space5: '32px',
-  space6: '40px',
-  space7: '48px',
-  space8: '56px',
-  space9: '64px',
-}
-
-const zIndex = {
-  z1: 1,
-  z2: 2,
-  z3: 3,
-  z4: 4,
-  z5: 5,
-  z6: 6,
-  z7: 7,
-  z8: 8,
-  z9: 9,
-  full: 10000,
-}
-
-export const theme = {
-  zIndex,
-  spacing,
-  colors: {
-    ...yellow,
-    ...shades,
-    ...red,
-    ...honey,
-    ...mint,
-    ...cyan,
-    white,
-    black,
-    transparent,
-  },
-  fonts: ['Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
-  title: {
-    medium: '24px',
-    large: '34px',
-  },
-  paragraph: {
-    'x-small': '12px',
-    small: '14px',
-    medium: '16px',
-    large: '18px',
-  },
-}

package/src/components/Title/index.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { theme } from '../Themes'
-
-interface ParagraphProps {
-  size: 'medium' | 'large'
-  bold?: boolean
-  as?: 'h1' | 'h2' | 'h3'
-  color?: string // Adicionando a propriedade color
-  children: React.ReactNode
-}
-
-const sizes = {
-  ...theme.title,
-}
-
-const TitleStyled = styled.p<ParagraphProps>`
-  margin: 0;
-  padding: 0;
-  font-size: ${props => sizes[props.size]};
-  font-weight: ${props => (props.bold ? 800 : 400)};
-  line-height: 130%;
-  font-family: 'Nunito Sans', sans-serif;
-  color: ${props => props.color || 'inherit'}; // Aplicando a cor
-`
-
-export const Title: React.FC<ParagraphProps> = ({ size = 'medium', bold, as = 'h2', color, children }) => {
-  return (
-    <TitleStyled as={as} size={size} bold={bold} color={color}>
-      {children}
-    </TitleStyled>
-  )
-}

package/src/components/Title/stories.tsx

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { theme } from '../Themes'
-import { Title } from './index'
-
-const sizes = theme.title
-
-const meta: Meta<typeof Title> = {
-  title: 'Components/Title',
-  component: Title,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    size: {
-      control: { type: 'select', options: ['medium', 'large'] },
-      description: 'Font size of the title',
-    },
-    bold: {
-      control: 'boolean',
-      description: 'Apply bold font weight',
-    },
-    as: {
-      control: { type: 'select', options: ['h1', 'h2', 'h3'] },
-      description: 'HTML element to render',
-    },
-    color: {
-      control: 'color',
-      description: 'Font color of the title',
-    },
-    children: {
-      control: 'text',
-      description: 'Content of the title',
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const LargeBoldTitle: Story = {
-  args: {
-    size: 'large',
-    bold: true,
-    as: 'h1',
-    color: '#1A3D7F', // Example color
-    children: 'Large Bold Title',
-  },
-}
-
-export const MediumTitle: Story = {
-  args: {
-    size: 'medium',
-    bold: false,
-    as: 'h2',
-    color: '#025FDE', // Example color
-    children: 'Medium Title',
-  },
-}
-
-export const CustomColorTitle: Story = {
-  args: {
-    size: 'large',
-    bold: true,
-    as: 'h3',
-    color: '#FF5733', // Custom color
-    children: 'Custom Color Title',
-  },
-}

package/src/components/Types/index.ts

@@ -1,45 +0,0 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
-
-type ColorsVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'gray' | 'warning' | 'yellow'
-type ColorsVariantBanner = 'notice' | 'success' | 'danger' | 'warning'
-export interface ButtonTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ColorsVariant
-  icon?: string
-  radius?: boolean
-  outline?: boolean
-  halfLeft?: boolean
-  halfRight?: boolean
-  fullWidth?: boolean
-}
-
-export interface ButtonRadiusIconTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ColorsVariant
-  icon?: string
-  subTitle?: string
-}
-
-export interface ButtonRoundTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ColorsVariant
-  icon?: string
-  outline?: boolean
-  badge?: number
-}
-
-export interface BannerTypes extends HTMLAttributes<HTMLDivElement> {
-  variant?: ColorsVariantBanner
-  title?: string
-  subTitle?: string
-  onClick?: () => void
-}
-
-export interface ModalTypes extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode
-  onClose: () => void
-  footer?: ReactNode | ReactNode[]
-}
-
-export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {
-  tabs: string[]
-  defaultActiveTab?: string
-  onTabChange?: (activeTab: string) => void
-}

package/src/index.tsx

@@ -1,10 +0,0 @@
-export { Banner } from './components/Banner/index'
-export { Button } from './components/Button/index'
-export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index'
-export { ButtonRound } from './components/ButtonRound/index'
-export { IconWrapper } from './components/IconWrapper/index'
-export { Modal } from './components/Modal/index'
-export { Paragraph } from './components/Paragraph/index'
-export { Tabs } from './components/Tabs/index'
-export { theme } from './components/Themes/index'
-export { Title } from './components/Title/index'

package/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/src/prettier.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  semi: false,
-  tabWidth: 2,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-  printWidth: 120,
-  jsxSingleQuote: false,
-  jsxBracketSameLine: false,
-  bracketSpacing: true,
-}