w-design-system 0.0.3 → 0.0.4

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "w-design-system",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "types": "dist/types/index.d.ts",
   "dependencies": {
     "@svgr/webpack": "^8.1.0",

package/.storybook/main.ts

@@ -1,19 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ['../src/components/**/stories.tsx', '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-  staticDirs: ["../public"],
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/assets/icon/alert.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M11.6437 3.95156C11.7188 3.825 11.8547 3.75 12 3.75C12.1453 3.75 12.2812 3.825 12.3563 3.95156L21.6516 19.2188C21.7172 19.3266 21.75 19.4484 21.75 19.5703C21.75 19.9453 21.4453 20.25 21.0703 20.25H2.92969C2.55469 20.25 2.25 19.9453 2.25 19.5703C2.25 19.4438 2.28281 19.3219 2.34844 19.2188L11.6437 3.95156ZM9.72187 2.77969L0.426563 18.0469C0.145313 18.5063 0 19.0312 0 19.5703C0 21.1875 1.3125 22.5 2.92969 22.5H21.0703C22.6875 22.5 24 21.1875 24 19.5703C24 19.0312 23.85 18.5063 23.5734 18.0469L14.2781 2.77969C13.7953 1.9875 12.9328 1.5 12 1.5C11.0672 1.5 10.2047 1.9875 9.72187 2.77969ZM13.5 17.25C13.5 16.8522 13.342 16.4706 13.0607 16.1893C12.7794 15.908 12.3978 15.75 12 15.75C11.6022 15.75 11.2206 15.908 10.9393 16.1893C10.658 16.4706 10.5 16.8522 10.5 17.25C10.5 17.6478 10.658 18.0294 10.9393 18.3107C11.2206 18.592 11.6022 18.75 12 18.75C12.3978 18.75 12.7794 18.592 13.0607 18.3107C13.342 18.0294 13.5 17.6478 13.5 17.25ZM13.125 8.625C13.125 8.00156 12.6234 7.5 12 7.5C11.3766 7.5 10.875 8.00156 10.875 8.625V13.125C10.875 13.7484 11.3766 14.25 12 14.25C12.6234 14.25 13.125 13.7484 13.125 13.125V8.625Z" fill="black"/>
-</svg>

package/src/assets/icon/close.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <g clip-path="url(#clip0_125_9544)">
-        <path d="M23.6483 23.6483C23.1793 24.1172 22.4206 24.1172 21.9511 23.6483L12.0011 13.6961L2.04892 23.6483C1.57996 24.1172 0.821207 24.1172 0.351721 23.6483C-0.11724 23.1793 -0.11724 22.4206 0.351721 21.9511L10.3062 12.0011L0.353221 2.04892C-0.11574 1.57996 -0.11574 0.821207 0.353221 0.351721C0.822182 -0.11724 1.58093 -0.11724 2.05042 0.351721L12.0011 10.3062L21.9533 0.353971C22.4223 -0.11499 23.181 -0.11499 23.6505 0.353971C24.1195 0.822932 24.1195 1.58168 23.6505 2.05117L13.6961 12.0011L23.6483 21.9533C24.1208 22.4183 24.1208 23.1833 23.6483 23.6483Z" fill="black"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_125_9544">
-            <rect width="24" height="24" fill="white" transform="matrix(0 -1 1 0 0 24)"/>
-        </clipPath>
-    </defs>
-</svg>

package/src/assets/icon/comment.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <g clip-path="url(#clip0_125_9497)">
-        <path d="M9.75 19.5C9.75 18.2578 8.74219 17.25 7.5 17.25H3C2.5875 17.25 2.25 16.9125 2.25 16.5V3C2.25 2.5875 2.5875 2.25 3 2.25H21C21.4125 2.25 21.75 2.5875 21.75 3V16.5C21.75 16.9125 21.4125 17.25 21 17.25H14.4984C14.0109 17.25 13.5375 17.4094 13.1484 17.7L9.75 20.25V19.5ZM9.74063 23.0719L9.75 23.0625L14.4984 19.5H21C22.6547 19.5 24 18.1547 24 16.5V3C24 1.34531 22.6547 0 21 0H3C1.34531 0 0 1.34531 0 3V16.5C0 18.1547 1.34531 19.5 3 19.5H5.25H7.5V21.75V21.9375V21.9516V22.2516V23.25C7.5 23.5359 7.65938 23.7937 7.9125 23.9203C8.16563 24.0469 8.47031 24.0187 8.7 23.85L9.50156 23.25L9.74063 23.0719ZM5.625 9C5.00156 9 4.5 9.50156 4.5 10.125C4.5 10.7484 5.00156 11.25 5.625 11.25H12.375C12.9984 11.25 13.5 10.7484 13.5 10.125C13.5 9.50156 12.9984 9 12.375 9H5.625ZM16.125 9C15.5016 9 15 9.50156 15 10.125C15 10.7484 15.5016 11.25 16.125 11.25H18.375C18.9984 11.25 19.5 10.7484 19.5 10.125C19.5 9.50156 18.9984 9 18.375 9H16.125ZM5.625 12.75C5.00156 12.75 4.5 13.2516 4.5 13.875C4.5 14.4984 5.00156 15 5.625 15H7.875C8.49844 15 9 14.4984 9 13.875C9 13.2516 8.49844 12.75 7.875 12.75H5.625ZM11.625 12.75C11.0016 12.75 10.5 13.2516 10.5 13.875C10.5 14.4984 11.0016 15 11.625 15H18.375C18.9984 15 19.5 14.4984 19.5 13.875C19.5 13.2516 18.9984 12.75 18.375 12.75H11.625Z" fill="black"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_125_9497">
-            <rect width="24" height="24" fill="white"/>
-        </clipPath>
-    </defs>
-</svg>

package/src/assets/icon/doc-check.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24" fill="none">
-    <g clip-path="url(#clip0_118_7931)">
-        <path d="M3 21.75C2.5875 21.75 2.25 21.4125 2.25 21V3C2.25 2.5875 2.5875 2.25 3 2.25H10.5V6C10.5 6.82969 11.1703 7.5 12 7.5H15.75V21C15.75 21.4125 15.4125 21.75 15 21.75H3ZM3 0C1.34531 0 0 1.34531 0 3V21C0 22.6547 1.34531 24 3 24H15C16.6547 24 18 22.6547 18 21V7.24219C18 6.44531 17.6859 5.68125 17.1234 5.11875L12.8766 0.876563C12.3141 0.314063 11.5547 0 10.7578 0H3ZM13.5469 12.5438C13.9875 12.1031 13.9875 11.3906 13.5469 10.9547C13.1062 10.5188 12.3938 10.5141 11.9578 10.9547L7.75312 15.1594L6.04688 13.4531C5.60625 13.0125 4.89375 13.0125 4.45781 13.4531C4.02187 13.8938 4.01719 14.6062 4.45781 15.0422L6.95625 17.5406C7.16719 17.7516 7.45312 17.8688 7.75312 17.8688C8.05312 17.8688 8.33906 17.7516 8.55 17.5406L13.5469 12.5438Z" fill="black"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_118_7931">
-            <rect width="18" height="24" fill="white"/>
-        </clipPath>
-    </defs>
-</svg>

package/src/assets/icon/image.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M21.4286 18V20.5714C21.4286 21.0429 21.0429 21.4286 20.5714 21.4286H3.42857C2.95714 21.4286 2.57143 21.0429 2.57143 20.5714V18H21.4286ZM4.03393 15.4286H2.57143V3.42857C2.57143 2.95714 2.95714 2.57143 3.42857 2.57143H20.5714C21.0429 2.57143 21.4286 2.95714 21.4286 3.42857V15.4286H20.1643L15.2196 7.86964C14.9839 7.50536 14.5768 7.28571 14.1429 7.28571C13.7089 7.28571 13.3018 7.50536 13.0661 7.86964L10.0661 12.4554L9.17679 11.2446C8.93571 10.9125 8.55 10.7196 8.1375 10.7196C7.725 10.7196 7.34464 10.9125 7.09821 11.2446L4.03393 15.4286ZM24 15.4286V3.42857C24 1.5375 22.4625 0 20.5714 0H3.42857C1.5375 0 0 1.5375 0 3.42857V15.4286V16.7143V18V20.5714C0 22.4625 1.5375 24 3.42857 24H20.5714C22.4625 24 24 22.4625 24 20.5714V18V16.7143V15.4286ZM7.71429 6C7.71429 5.54534 7.53367 5.10931 7.21218 4.78782C6.89069 4.46633 6.45466 4.28571 6 4.28571C5.54534 4.28571 5.10931 4.46633 4.78782 4.78782C4.46633 5.10931 4.28571 5.54534 4.28571 6C4.28571 6.45466 4.46633 6.89069 4.78782 7.21218C5.10931 7.53367 5.54534 7.71429 6 7.71429C6.45466 7.71429 6.89069 7.53367 7.21218 7.21218C7.53367 6.89069 7.71429 6.45466 7.71429 6Z" fill="black"/>
-</svg>

package/src/assets/icon/index.ts

@@ -1,6 +0,0 @@
-import docCheckSVG from './doc-check.svg'
-import alertSVG from './alert.svg'
-import commentSVG from './comment.svg'
-import imageSVG from './image.svg'
-import closeSVG from './close.svg'
-export { docCheckSVG, alertSVG, commentSVG, imageSVG, closeSVG }

package/src/assets/icon/svg.d.ts

@@ -1 +0,0 @@
-declare module '*.svg'

package/src/components/Banner/index.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { BannerStyled } from './styles'
-import { BannerTypes } from '../Types'
-import { docCheckSVG, alertSVG, commentSVG, closeSVG } from '../../assets/icon'
-import { IconWrapper } from '../IconWrapper'
-import { Paragraph } from '../Paragraph'
-import { theme } from '../Themes'
-const {
-  colors: { cyan40, mint40, honey40, red40, shade40, shade30 },
-} = theme
-export const Banner: React.FC<BannerTypes> = ({ title, onClick, variant, subTitle }) => {
-  const searchIcon = () => {
-    switch (variant) {
-      case 'notice':
-        return { icon: commentSVG, color: cyan40 }
-      case 'success':
-        return { icon: docCheckSVG, color: mint40 }
-      case 'warning':
-        return { icon: alertSVG, color: honey40 }
-      case 'danger':
-        return { icon: alertSVG, color: red40 }
-      default:
-        return { icon: commentSVG, color: cyan40 }
-    }
-  }
-
-  const { icon, color } = searchIcon()
-
-  return (
-    <BannerStyled variant={variant}>
-      <div className={'bannerWrapper'}>
-        <IconWrapper src={icon} className={'buttonRadiusWrapperIcon'} />
-        <span>
-          <Paragraph size={'medium'} color={color}>
-            {title}
-          </Paragraph>
-          {subTitle && (
-            <Paragraph size={'small'} color={shade40}>
-              {subTitle}
-            </Paragraph>
-          )}
-        </span>
-      </div>
-      <IconWrapper src={closeSVG} width={'14px'} height={'14px'} color={shade30} onClick={onClick} />
-    </BannerStyled>
-  )
-}

package/src/components/Banner/stories.tsx

@@ -1,31 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { VARIANTS_TYPES_BANNER } from '../../utils/constanst'
-
-import { Banner } from './index'
-
-const meta: Meta<typeof Banner> = {
-  title: 'Components/Banner',
-  component: Banner,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: VARIANTS_TYPES_BANNER,
-      },
-    },
-
-    onClick: { action: 'clicked' },
-  },
-} satisfies Meta<typeof Banner>
-
-export default meta
-type Story = StoryObj<typeof Banner>
-
-export const Playground: Story = {
-  args: {
-    variant: 'success',
-    title: 'Sucesso!',
-    subTitle: 'Mensagem de sucesso.',
-  },
-}

package/src/components/Banner/styles.ts

@@ -1,58 +0,0 @@
-import styled, { css } from 'styled-components'
-import { theme } from '../Themes'
-
-import { BannerTypes } from '../Types'
-
-const { colors } = theme
-const buttonRadiusWrapperIconStyles = (color: string) => css`
-  .buttonRadiusWrapperIcon {
-    svg {
-      fill: ${color};
-      path {
-        fill: ${color};
-      }
-    }
-  }
-`
-const colorScheme = {
-  notice: css`
-    background: ${colors.cyan10};
-    border-color: ${colors.cyan40};
-    ${buttonRadiusWrapperIconStyles(colors.cyan40)};
-  `,
-  danger: css`
-    background: ${colors.red10};
-    border-color: ${colors.red40};
-    ${buttonRadiusWrapperIconStyles(colors.red40)};
-  `,
-  warning: css`
-    background: ${colors.honey10};
-    border-color: ${colors.honey40};
-    ${buttonRadiusWrapperIconStyles(colors.honey40)};
-  `,
-  success: css`
-    background: ${colors.mint10};
-    border-color: ${colors.mint40};
-    ${buttonRadiusWrapperIconStyles(colors.mint40)};
-  `,
-} as const
-
-export const BannerStyled = styled.div<BannerTypes>`
-  display: flex;
-  box-sizing: border-box;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 56px;
-  padding: 12px 24px;
-  border-radius: 16px;
-  border: 1px dashed;
-  ${({ variant = 'notice' }) => colorScheme[variant]};
-
-  .bannerWrapper {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-`

package/src/components/Button/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { IconWrapper } from '../IconWrapper'
-import { ButtonStyled } from './styles'
-import { ButtonTypes } from '../Types'
-
-export const Button: React.FC<ButtonTypes> = ({
-  variant = 'primary',
-  children,
-  disabled = false,
-  icon,
-  radius,
-  outline,
-  halfLeft,
-  halfRight,
-  fullWidth,
-  ...props
-}) => (
-  <ButtonStyled
-    variant={variant}
-    disabled={disabled}
-    radius={radius}
-    outline={outline}
-    halfLeft={halfLeft}
-    halfRight={halfRight}
-    fullWidth={fullWidth}
-    {...props}
-  >
-    {icon && <IconWrapper src={icon} color={'white'} className={'buttonRadiusWrapperIcon'} />}
-    {children}
-  </ButtonStyled>
-)

package/src/components/Button/stories.tsx

@@ -1,98 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import exampleIcon from '../../assets/icon/image.svg'
-import { Button } from './index'
-import { VARIANTS_TYPES } from '../../utils/constanst'
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: VARIANTS_TYPES,
-      },
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    icon: {
-      control: 'object',
-      options: [exampleIcon],
-      description: exampleIcon,
-    },
-
-    onClick: { action: 'clicked' },
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof Button>
-
-export const Playground: Story = {
-  args: {
-    variant: 'primary',
-    children: 'ButtonPlayground',
-    disabled: false,
-  },
-}
-
-export const ButtonDefault: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'ButtonPlayground',
-    disabled: false,
-  },
-}
-
-export const ButtonOutilne: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'ButtonPlayground',
-    disabled: false,
-    outline: true,
-  },
-}
-export const ButtonRadius: Story = {
-  args: {
-    variant: 'success',
-    children: 'ButtonPlayground',
-    disabled: false,
-    radius: true,
-  },
-}
-
-export const ButtonDisabled: Story = {
-  args: {
-    variant: 'danger',
-    children: 'ButtonPlayground',
-    disabled: true,
-  },
-}
-
-export const ButtonIcon: Story = {
-  args: {
-    variant: 'primary',
-    children: 'ButtonPlayground',
-    icon: exampleIcon,
-  },
-}
-
-export const ButtonIconHalfRightOutiline: Story = {
-  args: {
-    variant: 'success',
-    children: 'ButtonPlayground',
-    icon: exampleIcon,
-    halfRight: true,
-    outline: true,
-  },
-}
-export const ButtonIconHalfLeft: Story = {
-  args: {
-    variant: 'success',
-    children: 'ButtonPlayground',
-    icon: exampleIcon,
-    halfLeft: true,
-  },
-}

package/src/components/Button/styles.ts

@@ -1,198 +0,0 @@
-import styled, { css } from 'styled-components'
-import { theme } from '../Themes'
-import { ButtonTypes } from '../Types'
-
-const { colors } = theme
-const buttonRadiusWrapperIconStyles = (color: string) => css`
-  .buttonRadiusWrapperIcon {
-    margin-top: 4px;
-    svg {
-      fill: ${color};
-      path {
-        fill: ${color};
-      }
-    }
-  }
-`
-const colorScheme = {
-  primary: css`
-    background: ${colors.cyan50};
-    &:hover {
-      background-color: ${colors.cyan40};
-    }
-    &:active {
-      background-color: ${colors.cyan50};
-    }
-  `,
-  secondary: css`
-    background: ${colors.cyan30};
-    &:hover {
-      background-color: ${colors.cyan40};
-    }
-    &:active {
-      background-color: ${colors.cyan30};
-    }
-  `,
-  danger: css`
-    background: ${colors.red40};
-    &:hover {
-      background-color: ${colors.red30};
-    }
-    &:active {
-      background-color: ${colors.red40};
-    }
-  `,
-  warning: css`
-    background: ${colors.honey10};
-    color: ${colors.honey30};
-    &:hover {
-      background-color: ${colors.honey20};
-    }
-    &:active {
-      background-color: ${colors.honey10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.honey30)};
-  `,
-  success: css`
-    background: ${colors.mint40};
-    &:hover {
-      background-color: ${colors.mint30};
-    }
-    &:active {
-      background-color: ${colors.mint40};
-    }
-  `,
-  gray: css`
-    background: ${colors.shade10};
-    color: ${colors.shade40};
-    &:hover {
-      background-color: ${colors.shade20};
-    }
-    &:active {
-      background-color: ${colors.shade10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.shade40)};
-  `,
-  yellow: css`
-    background: ${colors.yellow10};
-    color: ${colors.yellow30};
-    &:hover {
-      background-color: ${colors.yellow20};
-    }
-    &:active {
-      background-color: ${colors.yellow10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
-  `,
-} as const
-
-const colorSchemeOutilne = {
-  primary: css`
-    color: ${colors.cyan50};
-    border: 2px solid ${colors.cyan50};
-    &:hover {
-      background-color: ${colors.cyan10};
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan50)};
-  `,
-  secondary: css`
-    color: ${colors.cyan40};
-    border: 2px solid ${colors.cyan40};
-    &:hover {
-      background-color: ${colors.cyan10};
-    }
-    &:active {
-      background-color: ${colors.cyan10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.cyan40)};
-  `,
-  danger: css`
-    color: ${colors.red40};
-    border: 2px solid ${colors.red40};
-    &:hover {
-      background-color: ${colors.red10};
-    }
-    &:active {
-      background-color: ${colors.red10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.red40)};
-  `,
-  warning: css`
-    color: ${colors.honey40};
-    border: 2px solid ${colors.honey40};
-    &:hover {
-      background-color: ${colors.honey10};
-    }
-    &:active {
-      background-color: ${colors.honey10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.honey40)};
-  `,
-  success: css`
-    color: ${colors.mint40};
-    border: 2px solid ${colors.mint40};
-    &:hover {
-      background-color: ${colors.mint10};
-    }
-    &:active {
-      background-color: ${colors.mint10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.mint40)};
-  `,
-  gray: css`
-    color: ${colors.shade40};
-    border: 2px solid ${colors.shade40};
-    &:hover {
-      background-color: ${colors.shade20};
-    }
-    &:active {
-      background-color: ${colors.shade10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.shade40)};
-  `,
-  yellow: css`
-    color: ${colors.yellow30};
-    border: 2px solid ${colors.yellow30};
-    &:hover {
-      background-color: ${colors.yellow10};
-    }
-    &:active {
-      background-color: ${colors.yellow10};
-    }
-    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
-  `,
-} as const
-
-export const ButtonStyled = styled.button<ButtonTypes>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 48px;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-  padding: 12px 24px;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 140%;
-  border: none;
-  border-radius: ${({ radius }) => (radius ? '24px' : '5px')};
-  font-family: 'Nunito Sans', sans-serif;
-  transition:
-    background-color 0.3s,
-    opacity 0.3s;
-  color: white;
-  gap: 12px;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  ${({ variant = 'primary', outline }) => (!outline ? colorScheme[variant] : colorSchemeOutilne[variant])};
-  background: ${({ outline }) => outline && 'white'};
-  border-radius: ${({ halfLeft, halfRight, radius }) =>
-    !halfLeft && !halfRight ? (radius ? '24px' : '5px') : halfLeft ? '24px 0 0 24px' : '0 24px 24px 0'};
-
-  .buttonRadiusWrapperIcon {
-    margin-top: 4px;
-  }
-`