venice-ui 1.0.1 → 1.0.3

package/src/components/Aligment/Aligment.styles.ts

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-
-export interface IAligmentProps {
-  direction?: string
-  justify?: string
-  align?: string
-  width?: string
-  wrap?: string 
-  vPadding?: string
-  hPadding?: string
-  backgroundColor? :string 
-}
-export const Aligment = styled.div<IAligmentProps>`
-  box-sizing: border-box;
-  display: flex;
-  width: ${p => p.width ? p.width : '100%'};
-  flex-direction: ${p => p.direction ? p.direction : 'row'};
-  justify-content: ${p => p.justify ? p.justify : 'space-between'};
-  align-items: ${p => p.align ? p.align : 'center'};
-  flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
-  padding: ${p=> p.vPadding ? p.vPadding : '0'} ${p=> p.hPadding ? p.hPadding : '0'};
-  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'}
-`;

package/src/components/Aligment/index.ts

@@ -1 +0,0 @@
-export { Aligment } from './Aligment.styles'

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

@@ -1,53 +0,0 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-import { Button } from './Button'
-
-export default {
-  title: 'Elements/Button',
-  component: Button,
-  argTypes: {
-    text: { control: 'text' },
-    mode: {
-      options: ['primary', 'inverse', 'ghost'],
-      control: 'select',
-    },
-    size: {
-      options: ['regular', 'small', 'flat'],
-      control: 'select',
-    },
-    right: { control: 'boolean' },
-    left: { control: 'boolean' },
-
-
-  },
-  args: {
-    text: 'Click me',
-  },
-} as ComponentMeta<typeof Button>
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args}/>
-
-export const Default = Template.bind({})
-Default.args = {
-  size: 'regular',
-  mode: 'primary',
-  left: false,
-  right: false,
-}
-
-export const Inverse = Template.bind({})
-Inverse.args = {
-  size: 'regular',
-  mode: 'inverse',
-  left: false,
-  right: false,
-}
-
-export const Ghost = Template.bind({})
-Ghost.args = {
-  size: 'regular',
-  mode: 'ghost',
-  left: false,
-  right: false,
-}

package/src/components/Button/Button.styles.tsx

@@ -1,76 +0,0 @@
-import { lighten } from 'polished'
-import styled from 'styled-components'
-import { Theme } from '../../Theme/Theme'
-
-interface IButtonElement {
-  mode: string
-  size: string
-  right: boolean
-  left: boolean
-}
-
-export const ButtonElement = styled.button<IButtonElement>`
-  transition: 300ms;
-  border-radius: ${Theme.borderRadius.s};
-  overflow: hidden;
-  cursor: pointer;
-  box-sizing: border-box;
-  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
-  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-
-  ${(p) =>
-    p.mode === 'primary' &&
-    `background-color: ${Theme.colors.primary};
-    color: ${Theme.colors.white};
-    border: 1px solid rgba(0,0,0,0.15);`}
-  ${(p) =>
-    p.mode === 'inverse' &&
-    `background-color: ${Theme.colors.white};
-    color: ${Theme.colors.primary};
-    border: 1px solid ${Theme.colors.primary};
-    `}
-  ${(p) =>
-    p.mode === 'ghost' &&
-    `background-color:transparent;
-    color: ${Theme.colors.primary};
-    border:none;`}
-  ${(p) =>
-    p.size === 'regular' &&
-    `font-size: ${Theme.fontSize.m};
-    line-height: ${Theme.lineHeight.m};
-    padding: ${Theme.padding.m} ${Theme.padding.l};`}
-  ${(p) =>
-    p.size === 'small' &&
-    `font-size: ${Theme.fontSize.s};
-    line-height: ${Theme.lineHeight.s};
-    padding: ${Theme.padding.s} ${Theme.padding.m};`}
-  ${(p) =>
-    p.size === 'flat' &&
-    `font-size: ${Theme.fontSize.m};
-    line-height: ${Theme.lineHeight.m};
-    padding: ${Theme.padding.s} ${Theme.padding.s};`}
-  &:hover {
-    transition: 300ms;
-    ${(p) =>
-      p.mode === 'primary' &&
-      `background-color: ${lighten(0.1, Theme.colors.primary)};`}
-    ${(p) =>
-      p.mode === 'inverse' &&
-      `background-color: ${lighten(0.4, Theme.colors.primary)}`};
-    ${(p) =>
-      p.mode === 'ghost' && `color: ${lighten(0.2, Theme.colors.primary)};`}
-  }
-
-  &.disable,
-  button[disabled] {
-    color: ${Theme.colors.disableText};
-    cursor: default;
-    &:hover {
-      color: ${Theme.colors.disableBackground};
-    }
-  }
-`

package/src/components/Button/Button.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from 'react'
-import { ButtonElement } from './Button.styles'
-
-export interface IButtonProps {
-  text: string
-  mode?: string
-  size?: string
-  right?: boolean
-  left?: boolean
-  onClick: () => void
-}
-export const Button: FC<IButtonProps> = ({
-  text,
-  mode = 'primary',
-  size = 'regular',
-  right = false,
-  left = false,
-  onClick,
-}) => {
-  return (
-    <ButtonElement
-      mode={mode}
-      size={size}
-      right={right}
-      left={left}
-      onClick={onClick}
-    >
-      {text}
-    </ButtonElement>
-  )
-}

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export {Button} from './Button'

package/src/components/Icons/Icon.stories.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-import { Icon } from './Icon'
-import { Theme } from '../../Theme/Theme'
-import { Aligment } from '../Aligment'
-
-export default {
-  title: 'Elements/Icon',
-
-  component: Icon,
-  argTypes: {
-    name: {
-      options: ['person', 'menu', 'remove', 'add', 'close'],
-      control: 'select',
-    },
-    size: { control: 'number' },
-    color: { control: { type: 'color' } },
-    bgColor: { control: 'boolean' },
-  },
-  args: {
-    onClick: undefined
-  }
-} as ComponentMeta<typeof Icon>
-
-const Template: ComponentStory<typeof Icon> = (args) => (
-  <Icon {...args}/>
-)
-
-export const Default = Template.bind({})
-Default.args ={
-  name: 'person',
-  size: 48
-}
-export const Size = Template.bind({})
-Size.args ={
-  name: 'person',
-  size: 24
-}
-export const Color = Template.bind({})
-Color.args ={
-  name: 'person',
-  size: 48,
-  color: Theme.colors.primary
-}
-export const ActionDefault = Template.bind({})
-ActionDefault.args ={
-  name: 'person',
-  size: 48,
-  onClick: ()=>console.log('click')
-}
-const DarkTemplate: ComponentStory<typeof Icon> = (args) => (
-  <Aligment backgroundColor={Theme.colors.black}><Icon {...args}/></Aligment>
-)
-export const ActionColor = DarkTemplate.bind({})
-ActionColor.args ={
-  name: 'person',
-  size: 48,
-  bgColor: true,
-  color:Theme.colors.white,
-  onClick: ()=>console.log('click')
-}

package/src/components/Icons/Icon.styles.ts

@@ -1,29 +0,0 @@
-import { lighten } from "polished";
-import styled from "styled-components";
-import { Theme } from "../../Theme/Theme";
-
-
-interface IIconElementProps {
-  bgColor?: boolean
-  onClick?: ()=>void
-}
-export const IconElement = styled.div<IIconElementProps>`
-  transition: 300ms;
-  box-sizing: border-box;
-  width:auto;
-  display:inline-flex;
-  border-radius: ${Theme.borderRadius.s};
-  ${p => p.onClick !== undefined && 
-  `
-    padding: ${Theme.padding.s};
-    cursor:pointer;
-    &:hover{
-      background-color: ${p.bgColor ?  `rgba(255,255,255,0.2)` : lighten(0.4, Theme.colors.primary)  };
-      transition: 300ms;
-    }
-    svg{
-      cursor:pointer;
-    }
-  `
-  }
-`

package/src/components/Icons/Icon.tsx

@@ -1,35 +0,0 @@
-import React, { FC } from 'react'
-import { Theme } from '../../Theme/Theme'
-import { IconElement } from './Icon.styles'
-import { iconsPath } from './IconsPath'
-
-export interface IIconActionProps {
-  name: string
-  size?: number
-  color?: string
-  bgColor?: boolean
-  onClick?: () => void
-}
-export const Icon: FC<IIconActionProps> = ({
-  size = 24,
-  name,
-  color = Theme.colors.text,
-  bgColor,
-  onClick,
-}) => {
-  return (
-    <IconElement onClick={onClick} bgColor={bgColor}>
-      <svg
-        width={size}
-        height={size}
-        viewBox={'0 0 48 48'}
-        preserveAspectRatio="xMidYMid meet"
-        x="0"
-        y="0"
-        name={name}
-      >
-        <path d={iconsPath[name]} fill={color} />
-      </svg>
-    </IconElement>
-  )
-}

package/src/components/Icons/Icons.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { ExampleTable, ExampleTableRow, ExampleTableHeader,ExampleTableCell , StoryWrapper } from '../../example'
-import { Icon } from '../Icons'
-
-<Meta title="Basic/Icons" />
-
-<StoryWrapper>
-
-  <h2>Size</h2>
-  <ExampleTable>
-    <ExampleTableRow>
-      <ExampleTableHeader>Size</ExampleTableHeader>
-      <ExampleTableHeader>Sample</ExampleTableHeader>
-    </ExampleTableRow>
-    <ExampleTableRow>
-      <ExampleTableCell>14px</ExampleTableCell>
-      <ExampleTableCell><Icon name="delete" size={14} /></ExampleTableCell>
-    </ExampleTableRow>
-    <ExampleTableRow>
-      <ExampleTableCell>16px</ExampleTableCell>
-      <ExampleTableCell><Icon name="delete" size={16} /></ExampleTableCell>
-    </ExampleTableRow>
-    <ExampleTableRow>
-      <ExampleTableCell>24px</ExampleTableCell>
-      <ExampleTableCell><Icon name="delete" size={24} /></ExampleTableCell>
-    </ExampleTableRow>
-    <ExampleTableRow>
-      <ExampleTableCell>32px</ExampleTableCell>
-      <ExampleTableCell><Icon name="delete" size={32} /></ExampleTableCell>
-    </ExampleTableRow>
-    <ExampleTableRow>
-      <ExampleTableCell>42px</ExampleTableCell>
-      <ExampleTableCell><Icon name="delete" size={42} /></ExampleTableCell>
-    </ExampleTableRow>
-  </ExampleTable>
-
-  <h2>Icons</h2>
-</StoryWrapper>

package/src/components/Icons/IconsPath.ts

@@ -1,13 +0,0 @@
-export const iconsPath = {
-  close: "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z",
-  add: "M22.5 38V25.5H10v-3h12.5V10h3v12.5H38v3H25.5V38Z",
-  back: "M24 40 8 24 24 8l2.1 2.1-12.4 12.4H40v3H13.7l12.4 12.4Z",
-  delete: "M13.05 42q-1.25 0-2.125-.875T10.05 39V10.5H8v-3h9.4V6h13.2v1.5H40v3h-2.05V39q0 1.2-.9 2.1-.9.9-2.1.9Zm21.9-31.5h-21.9V39h21.9Zm-16.6 24.2h3V14.75h-3Zm8.3 0h3V14.75h-3Zm-13.6-24.2V39Z",
-  remove: "M10 25.5v-3h28v3Z",
-  person: "M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Zm3-3h26v-1.7q0-.8-.475-1.525-.475-.725-1.175-1.075-3.2-1.55-5.85-2.125Q26.85 30 24 30t-5.55.575q-2.7.575-5.85 2.125-.7.35-1.15 1.075Q11 34.5 11 35.3Zm13-16.05q1.95 0 3.225-1.275Q28.5 18.4 28.5 16.45q0-1.95-1.275-3.225Q25.95 11.95 24 11.95q-1.95 0-3.225 1.275Q19.5 14.5 19.5 16.45q0 1.95 1.275 3.225Q22.05 20.95 24 20.95Zm0-4.5ZM24 37Z",
-  menu: "M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z",
-  expand_more: "m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z",
-  expand_less: "M14.15 30.75 12 28.6l12-12 12 11.95-2.15 2.15L24 20.85Z",
-  
-}
-

package/src/components/Icons/index.ts

@@ -1 +0,0 @@
-export { Icon } from './Icon'

package/src/components/InputText/InputText.stories.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { InputText } from "./InputText";
-
-export default {
-  title: "Form/InputText",
-  component: InputText,
-  args: {
-    type: "text",
-  },
-} as ComponentMeta<typeof InputText>;
-
-const Template: ComponentStory<typeof InputText> = (args) => (
-  <InputText {...args} />
-);
-
-export const Primary = Template.bind({});

package/src/components/InputText/InputText.styles.ts

@@ -1,19 +0,0 @@
-import styled from "styled-components";
-import { Theme } from "../../Theme/Theme";
-
-export const InputTextField = styled.input`
-  background-color: ${Theme.colors.white};
-  border: 1px solid ${Theme.colors.gray_1};
-  width: 100%;
-  border-radius: 2px;
-  box-sizing: border-box;
-  outline: 0;
-  font-family: "Lato", sans-serif;
-  padding: ${Theme.padding.s};
-  margin: 0;
-  font-size: ${Theme.fontSize.m};
-
-  :focus {
-    border-color: ${Theme.colors.primary};
-  }
-`;

package/src/components/InputText/InputText.tsx

@@ -1,24 +0,0 @@
-import React, { FC } from "react";
-import { InputTextField } from "./InputText.styles";
-
-export interface IInputTextProps {
-  label: string;
-  value: string | number;
-  name: string;
-  read?: boolean;
-  disable?: boolean;
-  size?: string;
-  onChange: any;
-}
-
-export const InputText: FC<IInputTextProps> = ({
-  label,
-  value,
-  name,
-  read = false,
-  disable = false,
-  size = "normal",
-  onChange,
-}) => {
-  return <InputTextField />;
-};

package/src/components/InputText/index.ts

@@ -1 +0,0 @@
-export { InputText } from "./InputText";

package/src/components/Modal/Modal.stories.tsx

@@ -1,183 +0,0 @@
-import React, { useState } from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { Text } from '../Typography'
-
-import { Modal } from './Modal'
-import { Button } from '../Button'
-
-export default {
-  title: 'Elements/Modal',
-  component: Modal,
-  argTypes: {
-    title: { control: 'text' },
-    labelClose: { control: 'text' },
-    size: {
-      options: ['small', 'medium', 'large'],
-      control: 'select',
-    },
-  },
-} as ComponentMeta<typeof Modal>
-
-const Template: ComponentStory<typeof Modal> = (args) => {
-  const [modal, toogleModal] = useState(false)
-  return (
-    <>
-      <Button text="Show Modal" onClick={() => toogleModal(true)} />
-      {modal && (
-        <Modal
-          {...args}
-          handleClose={() => toogleModal(false)}
-          handleConfirm={() => toogleModal(false)}
-        >
-          <Text>One ring to rule them all, one ring to find them</Text>
-        </Modal>
-      )}
-    </>
-  )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  title: 'Modal Title',
-  labelClose: 'Cancel',
-  labelConfirm: 'Save',
-  size: 'small',
-}
-
-export const Size = Template.bind({})
-Size.args = {
-  title: 'Modal Title',
-  labelClose: 'Cancel',
-  labelConfirm: 'Save',
-  size: 'medium',
-}
-
-export const OneAction = Template.bind({})
-OneAction.args = {
-  title: 'Modal Title',
-  labelClose: 'OK',
-  size: 'medium',
-}
-
-const LongTemplate: ComponentStory<typeof Modal> = (args) => {
-  const [modal, toogleModal] = useState(false)
-  return (
-    <>
-      <Button text="Show Modal" onClick={() => toogleModal(true)} />
-      {modal && (
-        <Modal
-          {...args}
-          handleClose={() => toogleModal(false)}
-          handleConfirm={() => toogleModal(false)}
-        >
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at
-            ultricies nulla. Aliquam suscipit, ante sollicitudin egestas
-            lacinia, odio ex mattis arcu, vitae molestie neque nunc a eros.
-            Morbi dictum nisl placerat quam fermentum mollis. Etiam efficitur,
-            metus nec tincidunt tempus, magna enim interdum lacus, eu lacinia
-            lorem quam eu est. Vestibulum sapien lorem, tempor nec ultricies sit
-            amet, tristique sed tellus. Proin felis dui, porta ut placerat vel,
-            gravida eget ipsum. Etiam neque elit, sodales nec erat pretium,
-            auctor volutpat sem. Aliquam imperdiet venenatis magna. Cras metus
-            ligula, suscipit ac quam sit amet, porttitor feugiat nibh. Aenean eu
-            libero convallis, fermentum eros sit amet, pellentesque ligula.
-            Fusce scelerisque justo sit amet nunc sollicitudin, vel varius odio
-            aliquam. Quisque euismod scelerisque urna at maximus. Aenean
-            elementum venenatis tellus, id posuere arcu pharetra nec. Proin
-            posuere mi id gravida maximus. Cras interdum, risus at tincidunt
-            convallis, felis dolor congue urna, vitae accumsan magna enim ut
-            elit. Ut dapibus enim ipsum, imperdiet ultrices arcu tempor quis.
-            Praesent eget facilisis dolor. Vestibulum ante mi, blandit at
-            sodales a, tristique sed odio. Pellentesque nec rhoncus sapien.
-            Quisque nec malesuada nisl. In facilisis felis ut velit ullamcorper,
-            a posuere odio interdum. Curabitur porttitor nunc nec mauris
-            suscipit, ac semper diam accumsan. Curabitur rhoncus varius dolor id
-            vulputate. Fusce sagittis urna et sapien suscipit porttitor.
-            Maecenas eget facilisis velit. In molestie, ligula nec pellentesque
-            rhoncus, sem libero dictum sem, in luctus massa est eget velit. Ut
-            aliquet velit velit, ut feugiat tellus ultrices vel. Quisque est
-            lacus, egestas feugiat lectus at, dignissim rhoncus nulla. Integer
-            quis orci sagittis erat aliquet porta quis id felis. Cras sapien
-            eros, vestibulum sed dui eu, commodo scelerisque nisi. Sed vel augue
-            arcu. Ut consequat pellentesque neque, consequat vestibulum urna
-            pulvinar sed. Sed pulvinar, metus a porttitor commodo, felis leo
-            dictum ante, in congue elit ante et justo. Nulla rhoncus dui eget
-            facilisis interdum. Nam pretium pellentesque aliquam. In euismod
-            dapibus rhoncus. Quisque purus diam, fringilla ac malesuada at,
-            euismod et dui. Nulla gravida libero molestie lacus feugiat, at
-            laoreet diam auctor. Nullam at sapien molestie, aliquam massa eget,
-            dapibus ipsum. Aliquam erat volutpat. Sed hendrerit convallis
-            fringilla. Mauris feugiat metus in sem vestibulum tempor. Cras vitae
-            faucibus enim, nec blandit ante. Aenean pharetra felis et aliquam
-            sodales. Integer at urna dictum, laoreet diam et, faucibus mi.
-            Phasellus eleifend aliquam dui, ut fermentum mauris. Aenean porta
-            risus vitae odio mollis pretium. Nam consequat lectus id dui
-            consequat ultricies. Pellentesque non diam a sem viverra pulvinar.
-            Ut maximus molestie risus, sed lacinia mauris blandit ultrices.
-            Suspendisse ac nisi ut nibh consequat faucibus. Lorem ipsum dolor
-            sit amet, consectetur adipiscing elit. Aliquam auctor interdum
-            mollis. Phasellus vitae molestie nibh. Vivamus in dignissim lacus.
-            Vivamus vel dui ac lacus porta sodales. Ut malesuada placerat ex ut
-            pretium. Fusce in volutpat ipsum, sed ornare lacus. In erat arcu,
-            sagittis vitae turpis in, blandit suscipit odio. Cras sed arcu
-            cursus, facilisis orci nec, egestas mauris. Donec ut mollis dolor.
-            Nulla ac laoreet lacus, mattis hendrerit ligula. Sed bibendum elit
-            id nisi luctus, eget volutpat ipsum egestas. Aliquam dignissim, ante
-            non cursus gravida, enim odio euismod ipsum, nec tempus quam nisl
-            vitae justo. Integer fringilla sagittis porttitor. Donec ut vehicula
-            dolor. Etiam nec tellus urna. Aliquam efficitur volutpat tortor eget
-            varius. Maecenas at posuere augue. Nam ac rhoncus ipsum. Donec
-            maximus pharetra elit sit amet auctor. Pellentesque habitant morbi
-            tristique senectus et netus et malesuada fames ac turpis egestas.
-            Maecenas nisi enim, efficitur id purus at, auctor sollicitudin nisl.
-            Aliquam eu fermentum ipsum. Vestibulum ante ipsum primis in faucibus
-            orci luctus et ultrices posuere cubilia curae; Phasellus varius
-            lacinia orci sit amet rutrum. Etiam lacinia justo non ultricies
-            fermentum. Praesent tellus orci, rutrum at iaculis hendrerit,
-            gravida id urna. Ut massa sem, lobortis non massa eu, sodales mattis
-            ante. Proin in quam non purus placerat ornare. Duis iaculis ipsum
-            odio. Nam commodo facilisis massa ut rutrum. Duis porta rhoncus urna
-            sit amet bibendum. Duis ornare dignissim turpis ac suscipit. Vivamus
-            faucibus risus et enim accumsan vehicula. Aenean ut ultrices risus,
-            quis vehicula nibh. Vestibulum accumsan tempor lectus, eu luctus
-            massa volutpat vitae. Pellentesque dictum vulputate augue, id
-            venenatis justo tempus id. Aenean non nibh eu elit sagittis
-            ultrices. Pellentesque nibh nisi, sollicitudin et varius in, aliquam
-            in sem. In ultrices sem odio, et laoreet risus aliquam ut. Donec nec
-            odio egestas, mattis ante eu, dictum sapien. Phasellus sed vulputate
-            mauris. Vestibulum vel imperdiet nisl, ac malesuada sapien.
-            Phasellus urna arcu, fringilla id lectus id, tristique elementum
-            sapien. Nunc pharetra massa vitae placerat convallis. Morbi euismod
-            arcu sem, a euismod est iaculis sed. Ut at ipsum a ipsum aliquam
-            feugiat eleifend sed lacus. Aenean nec tortor ante. Morbi eu ante
-            eget tortor tincidunt efficitur. Vivamus et ultricies enim. Proin a
-            magna eget justo ultrices consectetur vel id est. Proin quis sem
-            quis sapien malesuada finibus. Pellentesque vel ex augue. Sed
-            ullamcorper tellus id nulla viverra, pharetra tincidunt ante
-            tincidunt. Sed sagittis mauris id felis convallis pulvinar. Aliquam
-            erat volutpat. Maecenas rutrum est sed orci egestas, non dictum
-            purus pharetra. Proin non enim dictum, condimentum metus eget,
-            lacinia purus. In a lacus ante. Nam vel auctor libero, et venenatis
-            urna. Nunc euismod, tortor ac vestibulum consequat, diam orci
-            finibus eros, eu lacinia ex enim sit amet elit. Interdum et
-            malesuada fames ac ante ipsum primis in faucibus. Vivamus tincidunt
-            id nunc ut facilisis. Phasellus iaculis mauris nisi, ac ullamcorper
-            eros lacinia sit amet. Donec ultricies semper nisi, ut vehicula
-            risus euismod at. Praesent non mauris eros. Nam aliquam tellus eget
-            neque aliquam, sit amet accumsan tellus luctus. Morbi id ultrices
-            nisl. Ut euismod pulvinar augue in posuere. Vivamus in risus iaculis
-            quam hendrerit ornare sit amet eu enim. Ut id leo urna.
-          </Text>
-        </Modal>
-      )}
-    </>
-  )
-}
-
-export const LongText = LongTemplate.bind({})
-LongText.args = {
-  title: 'Lorer long text',
-  labelClose: 'Go to caffee',
-  size: 'small',
-}

package/src/components/Modal/Modal.styles.ts

@@ -1,38 +0,0 @@
-import  styled from 'styled-components'
-import { Theme } from '../../Theme/Theme';
- 
-export const ModalOverlayer = styled.div`
-  box-sizing: border-box;
-  align-items: center;
-  background-color: ${Theme.colors.overlayer};
-  display: flex;
-  justify-content: center;
-  height: 100vh;
-  left: 0;
-  top: 0;
-  padding: ${Theme.padding.l};
-  width: 100%;
-  position: fixed;
-  z-index: ${Theme.zIndex.modalOverlayer};
-`;
-
-interface IModalElementProp {
-  size:string
-}
-export const ModalElement = styled.div<IModalElementProp>`
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  background-color: ${Theme.colors.white};
-  border-radius: ${Theme.borderRadius.m};
-  max-height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  position: relative;
-  max-width: 60rem;
-  box-shadow: ${Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px`}
-  ${p => p.size === 'medium' && `max-width:750px`}
-  ${p => p.size === 'large' && `max-width:100%`}
-
-`;