norma-library 0.4.3 → 0.4.5

package/src/components/icon/defaultIcon.tsx

@@ -1,82 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { colors } from '../../helpers';
-import { IconsProps } from './types';
-import { defaultIcons } from './default';
-import { IconsContainer } from './styles';
-
-export type IconScale =
-  | 'xsmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'xlarge'
-  | '2xlarge'
-  | '3xlarge';
-export type Colors =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'white'
-  | 'black';
-
-const scaleSize: Record<IconScale, number> = {
-  xsmall: 14,
-  small: 20,
-  medium: 24,
-  large: 28,
-  xlarge: 32,
-  '2xlarge': 36,
-  '3xlarge': 40,
-};
-
-const IconsBase: FunctionComponent<IconsProps> = ({
-  icon,
-  scale = '3xlarge',
-  color = 'inherit',
-  width = 0,
-  height = 0,
-  ...props
-}: IconsProps) => {
-  let newWidth = 24;
-  let newHeight = 24;
-
-  if (scale) {
-    width = scaleSize[scale];
-    height = scaleSize[scale];
-  }
-
-  if (width > 0 && height > 0) {
-    newWidth = width;
-    newHeight = height;
-  }
-
-  const newFill = colors[color];
-
-  const iconElement = defaultIcons[icon];
-
-  return (
-    <IconsContainer
-      viewBox="0 0 20 20"
-      width={`${newWidth}px`}
-      height={`${newHeight}px`}
-      fill={newFill}
-      {...props}
-    >
-      {iconElement && React.cloneElement(iconElement, { fill: newFill })}
-    </IconsContainer>
-  );
-};
-
-IconsBase.defaultProps = {
-  icon: 'user',
-  scale: '3xlarge',
-  color: 'inherit',
-};
-
-export const Icons: FunctionComponent<IconsProps> = (props: IconsProps) => (
-  <IconsBase {...props} />
-);

package/src/components/icon/icon.stories.tsx

@@ -1,44 +0,0 @@
-import React from "react"
-import type { StoryDefault, Story } from '@ladle/react'
-import { Icons as DefaultIconSVG } from './defaultIcon'
-import { Icons as NormaIconSVG } from './normaIcon'
-import { Card } from '../card/card'
-
-export default {
-  title: 'Data / Icons',
-  meta: {
-    key: 'icon',
-  },
-} satisfies StoryDefault
-
-export const IconsDefault: Story = () => (
-  <div className="App">
-    <Card>
-      <DefaultIconSVG icon={'user'} scale="xsmall" />
-      <DefaultIconSVG icon={'user'} scale="small" color="secondary" />
-      <DefaultIconSVG icon={'user'} scale="medium" color="error" />
-      <DefaultIconSVG icon={'user'} scale="large" color="warning" />
-      <DefaultIconSVG icon={'user'} scale="xlarge" color="success" />
-      <DefaultIconSVG icon={'user'} scale="2xlarge" color="black" />
-      <DefaultIconSVG icon={'user'} scale="3xlarge" color="primary" />
-    </Card>
-  </div>
-)
-
-IconsDefault.storyName = 'Icon Default'
-
-export const IconsNorma: Story = () => (
-  <div className="App">
-    <Card>
-      <NormaIconSVG icon={'envelopeMail'} scale="xsmall" />
-      <NormaIconSVG icon={'envelopeMail'} scale="small" color="secondary" />
-      <NormaIconSVG icon={'envelopeMail'} scale="medium" color="error" />
-      <NormaIconSVG icon={'envelopeMail'} scale="large" color="warning" />
-      <NormaIconSVG icon={'envelopeMail'} scale="xlarge" color="success" />
-      <NormaIconSVG icon={'envelopeMail'} scale="2xlarge" color="black" />
-      <NormaIconSVG icon={'envelopeMail'} scale="3xlarge" color="primary" />
-    </Card>
-  </div>
-)
-
-IconsNorma.storyName = 'Icon Norma'

package/src/components/icon/icons-ia.tsx

@@ -1,107 +0,0 @@
-export const bag =
-  '<>\r\n  <g id="bag" transform="translate(10 10)">\r\n    <g id="Icon_feather-briefcase" data-name="Icon feather-briefcase">\r\n      <path id="Caminho_1939" data-name="Caminho 1939" d="M26.407,10.5H213.667a23.407,23.407,0,0,1,23.407,23.407V150.944a23.407,23.407,0,0,1-23.407,23.407H26.407A23.407,23.407,0,0,1,3,150.944V33.907A23.407,23.407,0,0,1,26.407,10.5Z" transform="translate(-3 36.315)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      <path id="Caminho_1940" data-name="Caminho 1940" d="M105.63,215.167V27.907A23.407,23.407,0,0,0,82.222,4.5H35.407A23.407,23.407,0,0,0,12,27.907V215.167" transform="translate(58.222 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    </g>\r\n  </g>\r\n</>'
-export const box =
-  '<>\r\n  <g id="box" transform="translate(10.595 10)">\r\n    <path id="Caminho_1932" data-name="Caminho 1932" d="M213.11,162.945V71.536a22.8,22.8,0,0,0-11.589-19.767l-81.126-45.7a23.466,23.466,0,0,0-23.179,0l-81.126,45.7A22.8,22.8,0,0,0,4.5,71.536v91.409a22.8,22.8,0,0,0,11.589,19.767l81.126,45.7a23.466,23.466,0,0,0,23.179,0l81.126-45.7A22.8,22.8,0,0,0,213.11,162.945Z" transform="translate(-4.5 -3.003)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1933" data-name="Caminho 1933" d="M4.905,10.44,106.214,66.471,207.524,10.44" transform="translate(-1.909 46.752)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1934" data-name="Caminho 1934" d="M18,129.84V18" transform="translate(86.305 99.545)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const card =
-  '<>\r\n  <g id="card" transform="translate(10 10)">\r\n    <g id="Icon_feather-credit-card" data-name="Icon feather-credit-card">\r\n      <path id="Caminho_1937" data-name="Caminho 1937" d="M22.875,6H215.249a21.375,21.375,0,0,1,21.375,21.375V155.624A21.375,21.375,0,0,1,215.249,177H22.875A21.375,21.375,0,0,1,1.5,155.624V27.375A21.375,21.375,0,0,1,22.875,6Z" transform="translate(-1.5 -6)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      <path id="Caminho_1938" data-name="Caminho 1938" d="M1.5,15H236.623" transform="translate(-1.5 49.125)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    </g>\r\n  </g>\r\n</>'
-export const chart_bars =
-  '<>\r\n  <path id="Icon_metro-chart-bars" data-name="Icon metro-chart-bars" d="M2.571,179.245H254.877v31.538H2.571Zm31.538-63.077H65.647v47.307H34.109ZM81.416,53.092h31.538V163.476H81.416ZM128.724,100.4h31.538v63.077H128.724ZM176.031,5.784H207.57V163.476H176.031Z" transform="translate(-2.571 -5.784)" fill="#333"/>\r\n</>'
-export const circle_chart =
-  '<>\r\n  <g id="circle_chart" transform="translate(10.077 10)">\r\n    <g id="Icon_feather-pie-chart" data-name="Icon feather-pie-chart">\r\n      <path id="Caminho_1660" data-name="Caminho 1660" d="M218.838,150.977A112.353,112.353,0,1,1,70.421,4.245" transform="translate(-2.999 5.087)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      <path id="Caminho_1661" data-name="Caminho 1661" d="M130.434,115.434A112.434,112.434,0,0,0,18,3V115.434Z" transform="translate(94.288 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    </g>\r\n  </g>\r\n</>'
-export const circle_check =
-  '<>\r\n  <g id="circle_check" transform="translate(10.023 10.135)">\r\n    <g id="Icon" transform="translate(-66.52 -47.533)">\r\n      <g id="Icon_feather-check-circle" data-name="Icon feather-check-circle" transform="translate(66.52 47.533)">\r\n        <path id="Caminho_1935" data-name="Caminho 1935" d="M233.813,107.851v10.617A115.406,115.406,0,1,1,165.377,12.988" transform="translate(-3 -2.991)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n        <path id="Caminho_1936" data-name="Caminho 1936" d="M163.528,6,48.122,121.522,13.5,86.9" transform="translate(67.285 17.153)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</>'
-export const circle_help =
-  '<>\r\n  <g id="circle_help" transform="translate(10 10)">\r\n    <path id="Caminho_1657" data-name="Caminho 1657" d="M226.333,114.667A111.667,111.667,0,1,1,114.667,3,111.667,111.667,0,0,1,226.333,114.667Z" transform="translate(-3 -3)" fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1658" data-name="Caminho 1658" d="M13.635,38.476A41.875,41.875,0,0,1,95.012,52.434c0,27.917-41.875,41.875-41.875,41.875" transform="translate(57.393 39.304)" fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1659" data-name="Caminho 1659" d="M18,25.5h0" transform="translate(93.667 142)" fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const circle_not =
-  '<>\r\n  <g id="Icon" transform="translate(-46.329 -45.793)">\r\n    <path id="Icon_material-block" data-name="Icon material-block" d="M129.169,3C59.524,3,3,58.748,3,127.437S59.524,251.874,129.169,251.874s126.169-55.748,126.169-124.437S198.814,3,129.169,3ZM28.234,127.437c0-55,45.169-99.549,100.935-99.549a100.587,100.587,0,0,1,61.823,21.03L49.556,188.411A97.482,97.482,0,0,1,28.234,127.437Zm100.935,99.549a100.587,100.587,0,0,1-61.823-21.03L208.782,66.463A97.482,97.482,0,0,1,230.1,127.437C230.1,182.438,184.936,226.986,129.169,226.986Z" transform="translate(43.329 42.793)" fill="#333"/>\r\n  </g>\r\n</>'
-export const circle_timer =
-  '<>\r\n  <path id="Caminho_1968" data-name="Caminho 1968" d="M126.771,249.6A122.836,122.836,0,0,1,41.525,38.331a9.86,9.86,0,0,1,13.7,14.187A103.086,103.086,0,1,0,136.6,24.144V62.59a9.888,9.888,0,1,1-19.776,0V13.826a9.882,9.882,0,0,1,9.888-9.888,122.833,122.833,0,0,1,.061,245.667Z" transform="translate(-3.938 -3.938)" fill="#333"/>\r\n  <path id="Caminho_1969" data-name="Caminho 1969" d="M21.13,12.419,83.067,56.926a18.742,18.742,0,0,1-21.787,30.5,18.1,18.1,0,0,1-4.357-4.357L12.416,21.134a6.245,6.245,0,0,1,8.715-8.715Z" transform="translate(70.911 70.913)" fill="#333"/>\r\n</>'
-export const comment =
-  '<>\r\n  <path id="ic_chat_24px" d="M232.4,2H27.6A25.566,25.566,0,0,0,2.128,27.6L2,258l51.2-51.2H232.4A25.675,25.675,0,0,0,258,181.2V27.6A25.675,25.675,0,0,0,232.4,2ZM53.2,91.6H206.8v25.6H53.2Zm102.4,64H53.2V130H155.6Zm51.2-76.8H53.2V53.2H206.8Z" transform="translate(-2 -2)" fill="#333"/>\r\n</>'
-export const edit =
-  '<>\r\n  <g id="edit" transform="translate(10 10)">\r\n    <path id="Caminho_1946" data-name="Caminho 1946" d="M99.584,6H24.463A21.463,21.463,0,0,0,3,27.463V177.705a21.463,21.463,0,0,0,21.463,21.463H174.705a21.463,21.463,0,0,0,21.463-21.463V102.584" transform="translate(-3 16.765)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1947" data-name="Caminho 1947" d="M124.681,9.486A22.765,22.765,0,0,1,156.876,41.68L54.926,143.63,12,154.362l10.732-42.926Z" transform="translate(52.389 -2.818)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const envelop =
-  '<>\r\n  <path id="ic_email_24px" d="M232.4,4H27.6A25.566,25.566,0,0,0,2.128,29.6L2,183.2a25.675,25.675,0,0,0,25.6,25.6H232.4A25.675,25.675,0,0,0,258,183.2V29.6A25.675,25.675,0,0,0,232.4,4Zm0,51.2L130,119.2,27.6,55.2V29.6L130,93.6l102.4-64Z" transform="translate(-2 -4)" fill="#333"/>\r\n</>'
-export const eye =
-  '<>\r\n  <g id="eye" transform="translate(10 10)">\r\n    <path id="Caminho_1948" data-name="Caminho 1948" d="M1.5,84.908S40.954,6,110,6,218.5,84.908,218.5,84.908,179.043,163.816,110,163.816,1.5,84.908,1.5,84.908Z" transform="translate(-1.5 -6)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1949" data-name="Caminho 1949" d="M72.681,43.09A29.59,29.59,0,1,1,43.09,13.5,29.59,29.59,0,0,1,72.681,43.09Z" transform="translate(65.408 35.817)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const female =
-  '<>\r\n  <g id="female" transform="translate(10 10)">\r\n    <path id="female-svgrepo-com" d="M32.481,194.111h76.444M70.7,130.407V232.333m0-101.926A63.7,63.7,0,1,0,7,66.7,63.7,63.7,0,0,0,70.7,130.407Z" transform="translate(-7 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const filter_list =
-  '<>\r\n  <path id="Icon_material-filter-list" data-name="Icon material-filter-list" d="M100.757,174.012h55v-27.5h-55ZM4.5,9V36.5H252.018V9Zm41.253,96.257H210.765v-27.5H45.753Z" transform="translate(-4.5 -9)" fill="#333"/>\r\n</>'
-export const grid =
-  '<>\r\n  <g id="grid" transform="translate(10 10)">\r\n    <path id="Caminho_1664" data-name="Caminho 1664" d="M4.5,4.5H74.781V74.781H4.5Z" transform="translate(-4.5 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1665" data-name="Caminho 1665" d="M21,4.5H91.281V74.781H21Z" transform="translate(103.719 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1666" data-name="Caminho 1666" d="M21,21H91.281V91.281H21Z" transform="translate(103.719 103.719)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1667" data-name="Caminho 1667" d="M4.5,21H74.781V91.281H4.5Z" transform="translate(-4.5 103.719)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const hand =
-  '<>\r\n  <path id="Icon_ionic-md-hand" data-name="Icon ionic-md-hand" d="M228.4,137.569c-8.172-8.168-20.2-8.9-28.374-.735l-23.358,23.345c-6.081,6.072-13.409,6.085-17.686,1.038-2.834-3.344-1.715-13.657-.921-20.2l11.715-96.292c1.046-8.6-5.082-16.913-13.689-17.959s-16.43,5.569-17.477,14.17l-12.922,75.631c-.675,1.882-2.124,2.207-2.287-.326l-4.4-98.3a15.7,15.7,0,0,0-31.395,0L87.3,116.978c.082,1.143-.9,1.47-1.076.165L72.261,39.835c-1.541-8.528-9.707-14.682-18.238-13.141S39.826,36.884,41.365,45.41L53.8,135.878c.013,1.609-.527,2.529-1.293.466l-18.552-49.6c-2.9-8.165-11.877-12.924-20.046-10.024S1.47,89.083,4.371,97.247L36.894,203.5c.17.586.35,1.168.534,1.747l.068.219c.006.017.014.033.02.049a69.19,69.19,0,0,0,65.795,47.763,93.618,93.618,0,0,0,55.672-18.867h0c16.8-10.114,70.641-67.994,70.641-67.994C237.8,158.246,236.577,145.739,228.4,137.569Z" transform="translate(-3.462 -2.25)" fill="#333"/>\r\n</>'
-export const headphone =
-  '<>\r\n  <g id="headphone" transform="translate(10 10)">\r\n    <g id="Icon" transform="translate(-7.004 -13)">\r\n      <g id="Icon_feather-headphones" data-name="Icon feather-headphones" transform="translate(7.004 13)">\r\n        <path id="Caminho_1930" data-name="Caminho 1930" d="M4.5,215.111V130.866C4.5,61.076,56.509,4.5,120.665,4.5S236.829,61.076,236.829,130.866v84.244" transform="translate(-4.5 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n        <path id="Caminho_1931" data-name="Caminho 1931" d="M236.829,57.2c0,8-11.557,14.479-25.814,14.479H198.108c-14.257,0-25.814-6.483-25.814-14.479V35.479c0-8,11.557-14.479,25.814-14.479h38.722ZM4.5,57.2c0,8,11.557,14.479,25.814,14.479H43.222c14.257,0,25.814-6.483,25.814-14.479V35.479c0-8-11.558-14.479-25.814-14.479H4.5Z" transform="translate(-4.5 160.652)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</>'
-export const list_ul =
-  '<>\r\n  <path id="Icon_awesome-list-ul" data-name="Icon awesome-list-ul" d="M22.806,3.375A22.806,22.806,0,1,0,45.612,26.181,22.806,22.806,0,0,0,22.806,3.375Zm0,76.02A22.806,22.806,0,1,0,45.612,102.2,22.806,22.806,0,0,0,22.806,79.395Zm0,76.02A22.806,22.806,0,1,0,45.612,178.22a22.806,22.806,0,0,0-22.806-22.806Zm212.855,7.6H83.621a7.6,7.6,0,0,0-7.6,7.6v15.2a7.6,7.6,0,0,0,7.6,7.6H235.66a7.6,7.6,0,0,0,7.6-7.6v-15.2A7.6,7.6,0,0,0,235.66,163.016Zm0-152.039H83.621a7.6,7.6,0,0,0-7.6,7.6v15.2a7.6,7.6,0,0,0,7.6,7.6H235.66a7.6,7.6,0,0,0,7.6-7.6v-15.2A7.6,7.6,0,0,0,235.66,10.977Zm0,76.019H83.621a7.6,7.6,0,0,0-7.6,7.6v15.2a7.6,7.6,0,0,0,7.6,7.6H235.66a7.6,7.6,0,0,0,7.6-7.6V94.6A7.6,7.6,0,0,0,235.66,87Z" transform="translate(0 -3.375)" fill="#333"/>\r\n</>'
-export const logo_live =
-  '<>\r\n  <text id="olos.live" transform="translate(75 43)" font-size="46" font-family="Ubuntu"><tspan x="0" y="0">olos.</tspan><tspan y="0" font-family="Ubuntu-Bold, Ubuntu" font-weight="700">live</tspan></text>\r\n  <g id="Grupo_474" data-name="Grupo 474">\r\n    <rect id="Retângulo_1912" data-name="Retângulo 1912" width="56" height="56" transform="translate(0)" fill="#fff"/>\r\n    <g id="cloud" transform="translate(0 7)">\r\n      <path id="cloud-2" data-name="cloud" d="M36,44.79q.308.009.619.009A20.4,20.4,0,1,0,20.694,11.65h-3.1a16.575,16.575,0,0,0,0,33.149h17.85Q35.724,44.8,36,44.79Zm4.981-5.8c5.993-1.96,10.938-7.751,10.938-14.588a15.3,15.3,0,0,0-30.6,0h-5.1A20.342,20.342,0,0,1,17.7,16.75h-.109a11.475,11.475,0,0,0,0,22.95h17.85A27.272,27.272,0,0,0,40.982,38.988Z" transform="translate(-1.019 -4)" fill="#fc7f11" fill-rule="evenodd"/>\r\n    </g>\r\n  </g>\r\n</>'
-export const logo_olos =
-  '<>\r\n  <g id="Grupo_1879" data-name="Grupo 1879" transform="translate(-0.001 0.01)">\r\n    <rect id="Retângulo_2535" data-name="Retângulo 2535" width="5.45" height="5.45" transform="translate(230.961 25.794) rotate(90)" fill="none" stroke="#e3e4e8" stroke-miterlimit="10" stroke-width="1"/>\r\n    <path id="Caminho_1999" data-name="Caminho 1999" d="M78.978,36.873H60.447A10.246,10.246,0,0,1,50.21,26.636V18.6A10.246,10.246,0,0,1,60.447,8.36H78.978A10.246,10.246,0,0,1,89.215,18.6v8.039A10.246,10.246,0,0,1,78.978,36.873ZM59.833,13.81A4.187,4.187,0,0,0,55.643,18v9.249a4.187,4.187,0,0,0,4.19,4.19H79.574a4.187,4.187,0,0,0,4.19-4.19V18a4.187,4.187,0,0,0-4.19-4.19H59.833Z" transform="translate(35.31 5.886)" fill="#ff7f11"/>\r\n    <path id="Caminho_2000" data-name="Caminho 2000" d="M109.408,36.873H84.421a9.149,9.149,0,0,1-9.351-8.908V8.36h5.45v20.2a3.106,3.106,0,0,0,3.3,2.861h25.583v5.45Z" transform="translate(52.793 5.886)" fill="#ff7f11"/>\r\n    <path id="Caminho_2001" data-name="Caminho 2001" d="M125.218,36.873H106.687A10.246,10.246,0,0,1,96.45,26.636V18.6A10.246,10.246,0,0,1,106.687,8.36h18.531A10.246,10.246,0,0,1,135.455,18.6v8.039A10.246,10.246,0,0,1,125.218,36.873ZM106.073,13.81a4.187,4.187,0,0,0-4.19,4.19v9.249a4.187,4.187,0,0,0,4.19,4.19h19.741a4.187,4.187,0,0,0,4.19-4.19V18a4.187,4.187,0,0,0-4.19-4.19H106.073Z" transform="translate(67.828 5.886)" fill="#ff7f11"/>\r\n    <g id="Grupo_1879-2" data-name="Grupo 1879" transform="translate(0.001 -0.01)">\r\n      <path id="Caminho_2002" data-name="Caminho 2002" d="M50.614,24.6c.051,5.178-5.28,10.509-11.5,11.65-5.791,1.073-10-1.976-9.743-6.609.238-4.514,4.633-9.3,10.151-10.884,5.91-1.7,11.037.8,11.088,5.842Z" transform="translate(20.648 12.835)" fill="#ff7f11"/>\r\n      <path id="Caminho_2003" data-name="Caminho 2003" d="M29.413,12.083c.2-3.713,4.19-8.448,9.164-10.782,5.28-2.47,9.828-1.38,9.845,2.674.017,4.156-4.718,9.436-10.237,11.565-5.178,1.993-8.976.358-8.772-3.458Z" transform="translate(20.677 0.01)" fill="#ff7f11"/>\r\n      <path id="Caminho_2004" data-name="Caminho 2004" d="M27.627,14.362c4.1-3.475,9.436-4.377,11.872-1.771,2.572,2.742.8,8.125-3.9,11.718-4.514,3.458-9.709,3.713-11.684.852C22.024,22.436,23.659,17.7,27.627,14.362Z" transform="translate(16.263 7.814)" fill="#ff7f11"/>\r\n      <path id="Caminho_2005" data-name="Caminho 2005" d="M33.475,27.807c-.273,4.548-4.531,9.078-9.2,9.93-4.394.818-7.392-1.976-6.949-6.1.426-4.02,4.037-8.159,8.278-9.385C30.1,20.96,33.747,23.361,33.475,27.807Z" transform="translate(12.153 15.421)" fill="#ff7f11"/>\r\n      <path id="Caminho_2006" data-name="Caminho 2006" d="M10.355,32.1c-.562,3.662-3.509,7.137-6.421,7.665C1.157,40.28-.495,37.9.135,34.523c.613-3.3,3.219-6.558,5.944-7.341,2.861-.818,4.837,1.329,4.292,4.905Z" transform="translate(-0.001 19.01)" fill="#ff7f11"/>\r\n      <path id="Caminho_2007" data-name="Caminho 2007" d="M22.691,8.784c3.577-3.3,8.09-4.428,10.049-2.35,2.061,2.2.443,6.949-3.594,10.39-3.866,3.321-8.278,3.935-9.879,1.6-1.533-2.231-.034-6.472,3.424-9.657Z" transform="translate(13.126 3.803)" fill="#ff7f11"/>\r\n      <path id="Caminho_2008" data-name="Caminho 2008" d="M24.808.726c3.134-.238,4.037,2.691,1.874,6.523-2.146,3.8-6.353,6.762-9.249,6.643-2.742-.119-3.321-3-1.4-6.455C17.961,3.962,21.845.964,24.808.743Z" transform="translate(10.481 0.517)" fill="#ff7f11"/>\r\n      <path id="Caminho_2009" data-name="Caminho 2009" d="M13.791,47.692c-3.049-1.857-3.577-6.4-1.346-10.288,2.248-3.9,6.643-6,10-4.582,3.577,1.516,4.548,6.37,1.976,10.731-2.555,4.326-7.392,6.1-10.628,4.122Z" transform="translate(7.787 22.788)" fill="#ff7f11"/>\r\n      <path id="Caminho_2010" data-name="Caminho 2010" d="M19.289,9.763c2.861.187,3.577,3.389,1.465,7.12-2.1,3.7-6.013,6.234-8.653,5.706-2.5-.511-2.913-3.611-1.039-6.983,1.891-3.389,5.519-6.013,8.227-5.842Z" transform="translate(6.956 6.877)" fill="#ff7f11"/>\r\n      <path id="Caminho_2011" data-name="Caminho 2011" d="M20.635,30.227c-.46,4.054-3.952,7.988-7.6,8.653-3.441.63-5.655-1.942-5.093-5.655A10.727,10.727,0,0,1,14.9,24.98c3.543-1.022,6.2,1.26,5.74,5.229Z" transform="translate(5.524 17.413)" fill="#ff7f11"/>\r\n      <path id="Caminho_2012" data-name="Caminho 2012" d="M13.892,18.6c2.589.6,3.134,4.054,1.09,7.682C12.955,29.891,9.276,32,6.909,31.1c-2.265-.869-2.538-4.19-.7-7.477,1.84-3.3,5.246-5.57,7.7-5.008Z" transform="translate(3.513 13.048)" fill="#ff7f11"/>\r\n      <path id="Caminho_2013" data-name="Caminho 2013" d="M2.466,21.217a11.169,11.169,0,0,1,5.6-7.341c2.725-1.277,4.633.1,4.156,3.185a10.985,10.985,0,0,1-6.013,7.7c-2.657,1.022-4.275-.6-3.73-3.526Z" transform="translate(1.67 9.441)" fill="#ff7f11"/>\r\n    </g>\r\n    <path id="Caminho_2014" data-name="Caminho 2014" d="M153.419,19.908H129.812a3.049,3.049,0,1,1,0-6.1h28.734V8.36H129.812a8.482,8.482,0,0,0,0,16.964h23.607a3.049,3.049,0,0,1,0,6.1h-31.6v5.45h31.6a8.482,8.482,0,0,0,0-16.964Z" transform="translate(85.326 5.886)" fill="#ff7f11"/>\r\n  </g>\r\n</>'
-export const notification =
-  '<>\r\n  <path id="Notification_Icon" data-name="Notification Icon" d="M93.379,217.878h62.242a31.121,31.121,0,1,1-62.242,0ZM15.561,202.318C6.233,202.318,0,196.085,0,186.757S6.233,171.2,15.561,171.2h7.787c10.883-10.9,23.334-26.458,23.334-46.7V77.818C46.682,34.245,80.928,0,124.5,0s77.8,34.245,77.8,77.818V124.5c0,20.239,12.453,35.8,23.349,46.7h7.787c9.328,0,15.561,6.219,15.561,15.561s-6.233,15.561-15.561,15.561Z" fill="#333"/>\r\n</>'
-export const olos_cloud =
-  '<>\r\n  <path id="cloud" d="M148.418,175.961q1.3.039,2.607.039a86,86,0,1,0-67.1-139.75H70.858a69.875,69.875,0,0,0,0,139.75H146.07Q147.249,176,148.418,175.961ZM169.405,151.5c25.252-8.265,46.086-32.675,46.086-61.5A64.467,64.467,0,1,0,86.558,90H65.069a85.8,85.8,0,0,1,6.248-32.25h-.459a48.375,48.375,0,0,0,0,96.75H146.07A114.856,114.856,0,0,0,169.405,151.5Z" transform="translate(-1.019 -4)" fill="#333" fill-rule="evenodd"/>\r\n</>'
-export const search =
-  '<>\r\n  <g id="search" transform="translate(10 10)">\r\n    <g id="Grupo_2" data-name="Grupo 2" transform="translate(-8 -10)">\r\n      <g id="Icon_feather-search" data-name="Icon feather-search" transform="translate(13 13)">\r\n        <path id="Caminho_1652" data-name="Caminho 1652" d="M206.377,103.75c0,54.814-45.192,99.25-100.939,99.25S4.5,158.564,4.5,103.75,49.692,4.5,105.439,4.5s100.939,44.436,100.939,99.25Z" transform="translate(-9.5 -7.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n        <path id="Caminho_1653" data-name="Caminho 1653" d="M83.887,82.887,24.975,24.975" transform="translate(143.446 145.779)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</>'
-export const sentiment_happy =
-  '<>\r\n  <g id="Icon" transform="translate(-4.761 -4.76)">\r\n    <path id="ic_sentiment_very_satisfied_24px" d="M125.116,2A123.24,123.24,0,1,0,248.479,125.24,123.1,123.1,0,0,0,125.116,2Zm.123,221.831a98.592,98.592,0,1,1,98.592-98.592A98.564,98.564,0,0,1,125.24,223.831ZM137.563,99.852l13.063,13.063L163.69,99.852l13.063,13.063,13.063-13.063L163.69,73.725Zm-50.775,0,13.063,13.063,13.063-13.063L86.789,73.725,60.662,99.852l13.063,13.063Zm38.451,93.169a67.735,67.735,0,0,0,62.975-43.134H62.264A67.735,67.735,0,0,0,125.24,193.021Z" transform="translate(2.761 2.76)" fill="#333"/>\r\n  </g>\r\n</>'
-export const sentiment_dissatisfied =
-  '<>\r\n  <circle id="Elipse_31" data-name="Elipse 31" cx="28" cy="28" r="28" transform="translate(152.355 72)" fill="#333"/>\r\n  <circle id="Elipse_32" data-name="Elipse 32" cx="28" cy="28" r="28" transform="translate(47.645 72)" fill="#333"/>\r\n  <path id="Caminho_109" data-name="Caminho 109" d="M129.872,2A128,128,0,1,0,258,130,127.937,127.937,0,0,0,129.872,2ZM130,232.4A102.4,102.4,0,1,1,232.4,130,102.372,102.372,0,0,1,130,232.4Zm0-76.8a70.338,70.338,0,0,0-65.536,44.8H85.84a50.888,50.888,0,0,1,88.32,0h21.376A70.338,70.338,0,0,0,130,155.6Z" transform="translate(-2 -2)" fill="#333"/>\r\n</>'
-export const sentiment_neutral =
-  '<>\r\n  <g id="ic_sentiment_neutral_24px">\r\n    <path id="Caminho_107" data-name="Caminho 107" d="M9,14H121.52V39.75H9Z" transform="translate(62.74 150.25)" fill="#333"/>\r\n    <circle id="Elipse_29" data-name="Elipse 29" cx="28" cy="28" r="28" transform="translate(154.956 72.478)" fill="#333"/>\r\n    <circle id="Elipse_30" data-name="Elipse 30" cx="28" cy="28" r="28" transform="translate(50.565 72.478)" fill="#333"/>\r\n    <path id="Caminho_108" data-name="Caminho 108" d="M129.872,2A128,128,0,1,0,258,130,127.937,127.937,0,0,0,129.872,2ZM130,232.4A102.4,102.4,0,1,1,232.4,130,102.372,102.372,0,0,1,130,232.4Z" transform="translate(-2 -2)" fill="#333"/>\r\n  </g>\r\n</>'
-export const settings_ethernet =
-  '<>\r\n  <path id="Icon_material-settings-ethernet" data-name="Icon material-settings-ethernet" d="M80.283,22.779,62.766,8.22,1.23,82.382l61.536,74.162,17.517-14.559L30.8,82.382l49.479-59.6ZM71.524,93.756H94.273V71.007H71.524ZM185.269,71.007H162.52V93.756h22.749ZM117.022,93.756h22.749V71.007H117.022ZM194.027,8.22,176.511,22.779l49.479,59.6-49.479,59.6,17.517,14.559,61.536-74.162L194.027,8.22Z" transform="translate(-1.23 -8.22)" fill="#333"/>\r\n</>'
-export const star_outline =
-  '<>\r\n  <path id="Icon_ionic-ios-star-outline" data-name="Icon ionic-ios-star-outline" d="M245.65,90.952H162.577L137.334,9.822a8.938,8.938,0,0,0-17.168,0L94.923,90.952H11.286c-4.97,0-9.036,4.379-9.036,9.731a7.678,7.678,0,0,0,.169,1.642c.113,2.129,1.017,4.5,3.784,6.872l68.276,51.816-26.2,82.043A10.209,10.209,0,0,0,51.382,254c1.638,1.277,3.162,2.372,5.083,2.372a10.585,10.585,0,0,0,5.647-2.189l66.638-51.147,66.638,51.147a10.12,10.12,0,0,0,5.647,2.189c1.92,0,3.445-1.034,5.026-2.372a10.081,10.081,0,0,0,3.106-10.947l-26.2-82.043,67.711-52.3,1.638-1.52c1.468-1.7,2.937-4.014,2.937-6.507A9.9,9.9,0,0,0,245.65,90.952Zm-71.834,56.256a17.835,17.835,0,0,0-5.76,19.34l17,53.337a2.318,2.318,0,0,1-3.445,2.8L137.9,189.111a15.02,15.02,0,0,0-9.205-3.162,14.746,14.746,0,0,0-9.149,3.162l-43.71,33.51c-1.807,1.4-4.179-.547-3.445-2.8l17-53.337a17.891,17.891,0,0,0-5.817-19.462L37.828,112.3c-1.807-1.338-.9-4.44,1.3-4.44H94.866c6.777,0,12.819-4.683,14.965-11.616L126.548,42.6a2.223,2.223,0,0,1,4.292,0l16.716,53.641c2.146,6.933,8.189,11.616,14.965,11.616h54.948a2.438,2.438,0,0,1,1.3,4.379Z" transform="translate(-2.25 -3.375)" fill="#333"/>\r\n</>'
-export const tag =
-  '<path id="Caminho_1941" data-name="Caminho 1941" d="M219.625,135.958l-83.55,83.55a23.305,23.305,0,0,1-32.977,0L3,119.527V3H119.527l100.1,100.1A23.305,23.305,0,0,1,219.625,135.958Z" transform="translate(-3 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>    <path id="Caminho_1942" data-name="Caminho 1942" d="M10.5,10.5h0" transform="translate(47.764 47.764)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>'
-export const trash =
-  '<>\r\n  <g id="trash" transform="translate(10 10)">\r\n    <path id="Caminho_1950" data-name="Caminho 1950" d="M4.5,9H204.425" transform="translate(-4.5 35.428)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1951" data-name="Caminho 1951" d="M163,47.428v155.5a22.214,22.214,0,0,1-22.214,22.214H29.714A22.214,22.214,0,0,1,7.5,202.925V47.428m33.321,0V25.214A22.214,22.214,0,0,1,63.035,3h44.428a22.214,22.214,0,0,1,22.214,22.214V47.428" transform="translate(14.714 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1952" data-name="Caminho 1952" d="M15,16.5V83.142" transform="translate(62.749 83.463)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1953" data-name="Caminho 1953" d="M21,16.5V83.142" transform="translate(101.176 83.463)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
-export const usd =
-  '<>\r\n  <path id="Icon_metro-money" data-name="Icon metro-money" d="M88.087,117.9c-32.032-8.325-42.333-16.863-42.333-30.268,0-15.381,14.182-26.176,38.1-26.176,25.118,0,34.431,11.995,35.278,29.633h31.185c-.917-24.342-15.8-46.5-45.3-53.763V6.427H62.687v30.48C35.312,42.9,13.3,60.543,13.3,87.848c0,32.6,27.023,48.825,66.322,58.279,35.348,8.467,42.333,20.814,42.333,34.078,0,9.666-6.844,25.188-38.1,25.188-29.069,0-40.57-13.053-42.051-29.633H10.688c1.764,30.9,24.835,48.19,52,54.045v30.621h42.333V230.088c27.446-5.292,49.389-21.167,49.389-50.165,0-39.935-34.29-53.622-66.322-62.018Z" transform="translate(-10.688 -6.427)" fill="#333"/>\r\n</>'
-export const user =
-  '<>\r\n  <path id="Caminho_1941" data-name="Caminho 1941" d="M81.143,131c40.4,0,73.143-28.654,73.143-64S121.539,3,81.143,3,8,31.654,8,67s32.747,64,73.143,64Zm0-96c20.2,0,36.571,14.327,36.571,32S101.341,99,81.143,99,44.571,84.673,44.571,67,60.945,35,81.143,35Z" transform="translate(46.857 -3)" fill="#333"/>\r\n  <path id="Caminho_1942" data-name="Caminho 1942" d="M133,13C62.308,13,5,63.144,5,125c0,8.836,8.187,16,18.286,16s18.286-7.163,18.286-16c0-44.183,40.934-80,91.429-80s91.429,35.817,91.429,80c0,8.837,8.187,16,18.286,16S261,133.837,261,125C261,63.144,203.692,13,133,13Z" transform="translate(-5 115)" fill="#333"/>\r\n</>'
-export const list_check =
-  '<>\r\n  <path id="Icon_material-playlist-add-check" data-name="Icon material-playlist-add-check" d="M145.571,56.524H3V80.286H145.571Zm0-47.524H3V32.762H145.571ZM3,127.81H98.048V104.048H3ZM234.679,74.345,252.5,92.167l-83.048,83.167-53.583-53.464,17.821-17.821,35.762,35.643Z" transform="translate(-3 -9)" fill="#333"/>\r\n</>'
-
-export const icons = {
-  bag,
-  box,
-  card,
-  chart_bars,
-  circle_chart,
-  circle_check,
-  circle_help,
-  circle_not,
-  circle_timer,
-  comment,
-  edit,
-  envelop,
-  eye,
-  female,
-  filter_list,
-  grid,
-  hand,
-  headphone,
-  list_ul,
-  logo_live,
-  logo_olos,
-  notification,
-  olos_cloud,
-  search,
-  sentiment_happy,
-  sentiment_dissatisfied,
-  sentiment_neutral,
-  settings_ethernet,
-  star_outline,
-  tag,
-  trash,
-  usd,
-  user,
-  list_check,
-} as const
-
-export type IconKey = keyof typeof icons

package/src/components/icon/index.ts

@@ -1,11 +0,0 @@
-import { defaultIcons } from './default';
-import { normaIcons } from './norma';
-
-// Combine the icons from both files
-const Icons = { ...defaultIcons, ...normaIcons } as const;
-
-// Export icon types
-export type IconKey = keyof typeof Icons;
-
-// Export icon paths
-export default Icons;

package/src/components/icon/normaIcon.tsx

@@ -1,94 +0,0 @@
-import React, { FunctionComponent, ComponentProps } from 'react'
-import { normaIcons } from './norma'
-import { palette } from '../../helpers/colors'
-import styled from 'styled-components'
-import { Svg } from './svg'
-
-export type IconScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge'
-export type Colors =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'white'
-  | 'black'
-
-const scaleSize: Record<IconScale, number> = {
-  xsmall: 14,
-  small: 20,
-  medium: 24,
-  large: 28,
-  xlarge: 32,
-  '2xlarge': 36,
-  '3xlarge': 40,
-}
-
-// Definindo um objeto com as cores de preenchimento e traço com base no MUI
-const colors: Record<Colors, string> = {
-  default: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  info: palette.info,
-  success: palette.success,
-  warning: palette.warning,
-  white: palette.white,
-  black: palette.black,
-}
-
-export interface IconsProps extends ComponentProps<typeof Svg> {
-  icon: IconType
-  useSymbol?: boolean
-  scale?: IconScale
-  color?: Colors
-}
-
-export const Icons: FunctionComponent<IconsProps> = ({
-  icon,
-  scale,
-  useSymbol,
-  color = 'default', // Define 'default' como valor padrão se a prop não for fornecida
-  ...props
-}: IconsProps) => {
-  let width = 24
-  let height = 24
-  if (scale) {
-    width = scaleSize[scale]
-    height = scaleSize[scale]
-  }
-
-  // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
-  const fill = colors[color]
-  const stroke = colors[color]
-
-  const Svg = styled.svg`
-    display: inline-block;
-    shape-rendering: inherit;
-    vertical-align: middle;
-    fill: ${fill};
-    path {
-      stroke: ${stroke};
-    }
-    circle {
-      stroke: ${stroke};
-    }
-    rect {
-      stroke: ${stroke};
-    }
-  `
-
-  return (
-    <Svg viewBox="0 0 64 64" width={`${width}px`} height={`${height}px`} {...props}>
-      {useSymbol ? (
-        <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
-      ) : (
-        React.cloneElement(normaIcons[icon], { fill, stroke })
-      )}
-    </Svg>
-  )
-}
-
-export type IconType = keyof typeof normaIcons

package/src/components/icon/styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const IconsContainer = styled.svg`
-  display: inline-block;
-  shape-rendering: inherit;
-  vertical-align: middle;
-
-  path {
-    fill: 'inherit';
-  }
-`;

package/src/components/icon/svg.tsx

@@ -1,24 +0,0 @@
-import { styled } from 'styled-components'
-
-interface SvgProps {
-  inline?: boolean
-}
-
-const Svg = styled.svg<SvgProps>(
-  {
-    // Fix rendering bugs in Chrome for hdpi
-    shapeRendering: 'inherit',
-    transform: 'translate3d(0,0,0)',
-  },
-  ({ inline }) =>
-    inline
-      ? {
-          display: 'inline-block',
-        }
-      : {
-          display: 'block',
-        },
-)
-Svg.displayName = 'Svg'
-
-export { Svg }

package/src/components/icon/types.ts

@@ -1,14 +0,0 @@
-import { defaultIcons } from './default'
-import { IconsColors as Colors } from '../../helpers/colors'
-import { IconsSizes as Sizes } from '../../helpers/sizes'
-
-export interface IconsProps {
-  icon: IconType
-  scale?: Sizes
-  color?: Colors
-  width?: number
-  height?: number
-  fill?: string
-}
-
-export type IconType = keyof typeof defaultIcons

package/src/components/modal/index.ts

@@ -1 +0,0 @@
-export * from './modal';

package/src/components/modal/modal.stories.tsx

@@ -1,55 +0,0 @@
-import React from "react"
-import type { StoryDefault, Story } from '@ladle/react'
-import { Modal } from './modal'
-import { Button } from '../button'
-import { useState } from 'react'
-import { StyledModalBody } from './styles'
-
-export default {
-  title: 'Layout / Modal',
-  meta: {
-    key: 'modal',
-  },
-} satisfies StoryDefault
-
-export const ModalSimple: Story = () => {
-  const [open, setOpen] = useState(false)
-  const handleOpen = () => setOpen(true)
-  const handleClose = () => setOpen(false)
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem' }}>
-      <Button variant="text" label="Open modal" onClick={handleOpen} />
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <div
-          style={{
-            background: '#FFFFFF 0% 0% no-repeat padding-box',
-            border: '1px solid #00000033',
-            opacity: 1,
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: 400,
-            height: 298,
-            borderRadius: 4,
-          }}
-        >
-          <StyledModalBody>
-            <h2>Text in a modal</h2>
-            <p id="modal-modal-description" style={{ marginTop: 2 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </p>
-          </StyledModalBody>
-        </div>
-      </Modal>
-    </div>
-  )
-}
-
-ModalSimple.storyName = 'Modal Simple'

package/src/components/modal/modal.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { ModalBaseProps } from './types';
-import { Modal as MuiModal } from '@mui/material';
-import { Box } from '@mui/material';
-import { ModalHeader } from './modalHeader';
-import { ModalFooter } from './modalFooter';
-import { StyledModalBody } from './styles';
-
-const style = {
-  background: '#FFFFFF 0% 0% no-repeat padding-box',
-  border: '1px solid #00000033',
-  opacity: 1,
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  borderRadius: 1,
-  boxShadow: 48,
-  p: 0,
-};
-
-export const Modal: React.FC<ModalBaseProps> = ({
-  title,
-  open = false,
-  onConfirm,
-  children,
-  onClose,
-  onCancel,
-  ...props
-}) => {
-  return (
-    <MuiModal {...props} open={open}>
-      <Box sx={style}>
-        <ModalHeader onClose={onClose} title={title} />
-        <StyledModalBody>{children}</StyledModalBody>
-        {onConfirm && <ModalFooter onCancel={onCancel} onConfirm={onConfirm} />}
-      </Box>
-    </MuiModal>
-  );
-};

package/src/components/modal/modalFooter.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '../button/button';
-import { ModalFooterProps } from './types';
-
-export const ModalFooter: React.FC<ModalFooterProps> = ({
-  onCancel,
-  onConfirm,
-}) => {
-  const StyledModalFooter = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    padding: 16px;
-    align-items: center;
-    height: 50px;
-    padding-top: 10px;
-    margin-top: 10px;
-    border-top: 1px solid #e9ecef;
-  `;
-  return (
-    <StyledModalFooter>
-      <Button
-        onClick={onCancel}
-        label="Cancel"
-        variant="outlined"
-        color="primary"
-        style={{ marginRight: '10px' }}
-      />
-      <Button onClick={onConfirm} label="Confirm" color="primary" />
-    </StyledModalFooter>
-  );
-};

package/src/components/modal/modalHeader.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { ModalHeaderProps } from './types';
-import { IconButton } from '@mui/material';
-import { Icons } from '../icon/defaultIcon';
-import { StyledBoxIcon } from './styles';
-
-export const ModalHeader: React.FC<ModalHeaderProps> = ({ title }) => {
-  const StyledModalHeader = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    text-align: left;
-    font: normal normal 600 16px/24px Source Sans Pro;
-    letter-spacing: 0px;
-    color: #292929;
-    opacity: 1;
-    height: 25px;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: ${title ? '1px solid #e9ecef' : '0'};
-    padding: 10px;
-    }
-  `;
-  return (
-    <StyledModalHeader>
-      {title && <h3>{title}</h3>}
-      <IconButton
-        aria-label="close"
-        sx={{
-          position: 'absolute',
-          right: 8,
-          top: 10,
-          padding: 2,
-          width: 16,
-          height: 16,
-          color: theme => theme.palette.grey[500],
-        }}
-      >
-        <StyledBoxIcon>
-          <Icons icon={'closeAlt'} scale={'small'} />
-        </StyledBoxIcon>
-      </IconButton>
-    </StyledModalHeader>
-  );
-};

package/src/components/modal/styles.tsx

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledModalBody = styled.div`
-  padding: 16px;
-`;
-
-export const StyledBoxIcon = styled.div`
-  position: relative;
-  top: 2px;
-  padding: 0;
-  margin: 0;
-  left: 3px;
-`;