norma-library 0.5.3 → 0.5.9

package/src/components/Table/index.tsx

@@ -0,0 +1,318 @@
+import React, { useState, useMemo } from 'react'
+import * as S from "./styles"
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  ColumnFiltersState,
+  getPaginationRowModel
+} from '@tanstack/react-table'
+import { format, isAfter, isBefore } from "date-fns"
+import { Button } from "@mui/material";
+import { TablePropos } from './interface';
+import { Pagination, Header, TBody } from "./components"
+
+const Table:React.FC<TablePropos> = ({ data, columns, onClick, onMouseOver, onMouseOut, showTotalResults, showSettings, pagination, rowCount, onChangePage, customTotalResult }) => {
+  const [openFilterDialog, setOpenFilterDialog] = useState('')
+  const [sorting, setSorting] = useState<any>([])
+  const [openFilterOptions, setOpenFilterOptions] = useState(false)
+  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([])
+  const [filterInputSelected, setFilterInputSelected] = useState<any>()
+  const [globalFilters, setGlobalFilters] = useState<any>([])
+  const [value, setValue] = useState<any>()
+  const [orderSmallest, setOrderSmallest] = useState(false)
+  const [orderLargest, setOrderLargest] = useState(false)
+
+  const customFilterText = (row: any, value: string) => {
+    const itensFinded = globalFilters.map((item: any) => {
+      if (item.type === 'Horario Igual a') {
+        return item.value === row.original[item.acessor]
+      }
+      if (item.type === 'Horario maior que') {
+        const date = new Date()
+        const rowDate = new Date()
+        const hourSplited = item?.value?.split(':')
+        const rowDateSplited = row.original[item.acessor].split(':')
+
+        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0)
+        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0 ,0)
+        
+        return isAfter(rowDate, date)
+      }
+      if (item.type === 'Horario menor que') {
+        const date = new Date()
+        const rowDate = new Date()
+        const hourSplited = item?.value?.split(':')
+        const rowDateSplited = row.original[item.acessor].split(':')
+
+        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0)
+        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0 ,0)
+        
+        return isBefore(rowDate, date)
+      }
+      if (item.type === 'Data Igual a') {
+        const dateSplited = item?.value?.split('-')
+        return row.original[item.acessor] === format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0 , 0), "dd/MM/yyyy")
+      }
+      if (item.type === 'Data maior que') {
+        const dateSplited = item?.value?.split('-')
+        const rowDateSplited = row.original[item.acessor].split('/')
+        return isAfter(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]))
+      }
+      if (item.type === 'Data menor que') {
+        const dateSplited = item?.value?.split('-')
+        const rowDateSplited = row.original[item.acessor].split('/')
+        return isBefore(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]))
+      }
+      if (item.type === 'Igual a' && typeof value === 'number') {
+        return row.original[item.acessor] === item.value
+      }
+      if (item.type === 'Igual a') {
+        return row.original[item.acessor] === item.value
+      }
+      if (item.type === 'Contém') {
+        return !!row.original[item.acessor].includes(item.value)
+      }
+      if (item.type === 'Não é igual a') {
+        return row.original[item.acessor] !== item.value
+      }
+      if (item.type === 'Maior que') {
+        return row.original[item.acessor] > item.value
+      }
+      if (item.type === 'Menor que') {
+        return row.original[item.acessor] < item.value
+      }
+    })
+
+    const result = itensFinded.every((item: any) => item)
+
+    return result
+  }
+
+  const reactTableConfig = useMemo(() => {
+    const config:any = {
+      data,
+      columns,
+      filterFns:{
+        'customFilterText': customFilterText
+      },
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+      },
+      rowCount: rowCount || 10,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn
+    }
+    config.rowCount = rowCount || 10
+
+    if(!pagination) {
+      config.getPaginationRowModel = getPaginationRowModel()
+    } else {
+      config.state.pagination = pagination
+      config.manualPagination = true
+      config.pageCount = pagination.totalPages
+    }
+    return config
+  }, [data, sorting, filterByColumn, columns, pagination])
+
+  const table = useReactTable(reactTableConfig)
+
+  return (
+    <S.Container>
+      <Header 
+        table={table} 
+        customTotalResult={customTotalResult}
+        globalFilters={globalFilters} 
+        orderSmallest={orderSmallest}
+        orderLargest={orderLargest}
+        showTotalResults={showTotalResults}
+        showSettings={showSettings}
+        setGlobalFilters={setGlobalFilters}
+        setOrderLargest={setOrderLargest}
+        setOrderSmallest={setOrderSmallest}
+      />
+      <S.Content>
+        <S.Table>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <th key={header.id}>
+                    <div>
+                      <S.ColumnContent>
+                        <S.TextColumn>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                          )}
+                        </S.TextColumn>
+                        <S.IconFilterDialog onClick={() => {
+                          setOpenFilterDialog(header.column.columnDef.accessorKey)
+                        }}>
+                          <svg fill='#666' focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowDropDownIcon"><path d="m7 10 5 5 5-5z"></path></svg>
+                        </S.IconFilterDialog>
+                      </S.ColumnContent>
+                      { openFilterDialog === header.column.columnDef.accessorKey
+                        ? (
+                          <>
+                            <S.backgroundDialog onClick={() => {
+                              setOpenFilterDialog('')
+                              setOpenFilterOptions(false)
+                            }}></S.backgroundDialog>
+                            <S.FilterDialog>
+                              {  
+                                openFilterOptions 
+                                  ? (
+                                    <S.ListFilterDialog>
+                                      <p className='label'>Selecione um filtro</p>
+                                      <select className='select' value={filterInputSelected} onChange={(event) => {
+                                        setFilterInputSelected(event.target.value)
+                                      }}>
+                                        <option>Selecione...</option>
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'text' ? <option>Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'text' ? <option>Não é igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'text' ? <option>Contém</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'number' ? <option>Maior que</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'number' ? <option>Menor que</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'number' ? <option>Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'date' ? <option>Data Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'date' ? <option>Data maior que</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'date' ? <option>Data menor que</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'time' ? <option>Horario Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'time' ? <option>Horario maior que</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'time' ? <option>Horario menor que</option> : null }
+                                      </select>
+                                      <div>
+                                        { header.column.getCanFilter()
+                                          ? filterInputSelected === 'Igual a' || 
+                                            filterInputSelected === 'Não é igual a' || 
+                                            filterInputSelected === 'Contém' || 
+                                            filterInputSelected === 'Maior que' ||
+                                            filterInputSelected === 'Menor que' ||
+                                            filterInputSelected === 'Data Igual a' ||
+                                            filterInputSelected === 'Data maior que' ||
+                                            filterInputSelected === 'Data menor que' ||
+                                            filterInputSelected === 'Horario Igual a' ||
+                                            filterInputSelected === 'Horario maior que' ||
+                                            filterInputSelected === 'Horario menor que'
+                                              ?  (
+                                                <div>
+                                                  <p className='label' style={{ marginTop: '10px' }}>Valor</p>
+                                                  <input 
+                                                    type={header?.headerGroup?.headers[header.index].column.columnDef.type}
+                                                    className='select'
+                                                    style={{ width: '100%' }}
+                                                    value={value as any}
+                                                    onChange={event => {
+                                                      if (header?.headerGroup?.headers[header.index].column.columnDef.type === 'number') {
+                                                        setValue(Number(event.target.value))
+                                                        return 
+                                                      } 
+                                                      if (header?.headerGroup?.headers[header.index].column.columnDef.type === 'date') {
+                                                        setValue(event.target.value)
+                                                        return 
+                                                      }
+                                                      setValue(event.target.value)
+                                                    }} 
+                                                  />
+                                                  <Button
+                                                    color="primary"
+                                                    type={"submit"}
+                                                    disableElevation
+                                                    style={{
+                                                      marginTop: 8,
+                                                      width: '100%'
+                                                    }}
+                                                    variant="contained"
+                                                    onClick={() => {
+                                                      setGlobalFilters((current: any) => [...current, 
+                                                        {
+                                                          acessor: header.column.columnDef.accessorKey,
+                                                          type: filterInputSelected,
+                                                          value: value
+                                                        }
+                                                      ])
+                                                      header.column.setFilterValue(value)
+                                                      setOpenFilterOptions(false)
+                                                      setOpenFilterDialog('')
+                                                      setFilterInputSelected(false)
+                                                      setValue(null)
+                                                    }}
+                                                  >
+                                                    Buscar
+                                                  </Button>
+                                                </div>
+                                              )
+                                              : null
+                                          : null 
+                                        }
+                                      </div>
+                                    </S.ListFilterDialog>
+                                  )
+                                  : (
+                                    <S.ListFilterDialog>
+                                      <S.OptionFilterDialog style={{
+                                        background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : ''
+                                      }}>
+                                        <div className='icon'>
+                                          <svg fill="#666" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"></path></svg>
+                                        </div>
+                                        <p onClick={() => {
+                                          header.column.toggleSorting()
+                                          setOrderSmallest(true)
+                                          setOrderLargest(false)
+                                        }}>Menor primeiro</p>
+                                      </S.OptionFilterDialog>
+                                      <S.OptionFilterDialog style={{
+                                        background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : ''
+                                      }}>
+                                        <div className='icon rotate'>
+                                          <svg fill="#666" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"></path></svg>
+                                        </div>
+                                        <p onClick={() => {
+                                          header.column.toggleSorting()
+                                          setOrderLargest(true)
+                                          setOrderSmallest(false)
+                                        }}>Maior primeiro</p>
+                                      </S.OptionFilterDialog>
+                                      <S.OptionFilterDialog>
+                                        <div className='icon'>
+                                          <svg fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16"><path strokeLinecap="round" strokeLinejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"></path></svg>
+                                        </div>
+                                        <p onClick={() => setOpenFilterOptions(true)}>Filtrar por</p>
+                                      </S.OptionFilterDialog>
+                                    </S.ListFilterDialog>
+                                  )
+                              }
+                            </S.FilterDialog>
+                          </>
+                        ) : null
+                      }
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <TBody 
+            table={table} 
+            onClick={onClick} 
+            onMouseOver={onMouseOver} 
+            onMouseOut={onMouseOut}
+          />
+        </S.Table>
+      </S.Content>
+      <Pagination table={table} onChangePage={onChangePage} />
+    </S.Container>
+  )
+}
+
+export default Table

package/src/components/Table/interface.ts

@@ -0,0 +1,24 @@
+import { ColumnDef } from '@tanstack/react-table'
+
+export interface TablePropos {
+  data: any
+  columns: ColumnDef<ColumnsTable>[]
+  onClick: any
+  onMouseOver: any
+  onMouseOut: any
+  showTotalResults: boolean
+  showSettings: boolean
+  minHeight: string
+  rowCount: number
+  onChangePage?: (page:number) => void
+  pagination?: {pageIndex:number, pageSize:number, totalPages:number}
+  customTotalResult?: string
+}
+
+export interface ColumnsTable {
+  header: string,
+  accessorKey: string,
+  type: string,
+  enableColumnFilter: boolean,
+  filterFn: string
+}

package/src/components/Table/styles.tsx

@@ -0,0 +1,118 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+  box-shadow: 0px 2px 6px #0000000A;
+  padding: 24px 0;
+`
+
+export const Content = styled.div<any>`
+  min-height: ${props => props.minHeight ? props.minHeight : 'auto'};
+`
+
+export const Table = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    tr {
+      border-bottom: 1px solid #E0E0E0;
+      th {
+        padding: 12px 24px;
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        padding: 16px 24px;
+        color: #666666;
+        font-size: 14px;
+      }
+    }
+    tr:nth-child(even) {
+      background: #FAFAFA;
+      border-bottom: 1px solid #f1f1f1;
+      border-top: 1px solid #f1f1f1;
+    }
+  }
+`
+
+export const TextColumn = styled.span`
+  color: #666666;
+  font-size: 14px;
+`
+
+export const ColumnContent = styled.div`
+  gap: 2px;
+  align-items: center;
+  display: flex;
+`
+
+export const IconFilterDialog = styled.div`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+`
+
+export const backgroundDialog = styled.div`
+  width: 100%;
+  position: absolute;
+  height: 100vh;
+  background: transparent;
+  top: 0;
+  left: 0;
+`
+
+export const FilterDialog = styled.div`
+  padding: 8px;
+  margin: 6px 0px 0 0;
+  position: absolute;
+  width: 302px;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #E0E0E0;
+`
+
+export const ListFilterDialog = styled.div`
+  display: flex;
+  flex-direction: column;
+  .label {
+    margin: 0 0 8px 0;
+    color: #666666;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: left;
+  }
+  .select {
+    border: 1px solid #E0E0E0;
+    padding: 8px 12px;
+  }
+`
+
+export const OptionFilterDialog = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 6px 8px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .icon {
+    color: #666;
+  }
+  .rotate {
+    rotate: 180deg;
+  }
+  div {
+    width: 20px;
+    height: 20px;
+  }
+  p {
+    margin: 0;
+    color: #666666;
+    font-size: 16px;
+    font-weight: 400;
+  }
+`

package/src/components/Tabs.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { Box, Tabs as MuiTabs, Tab, ThemeProvider, Typography, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
 import { TabPanelProps, TabsBaseProps } from '../interfaces';
-import { palette, themes } from '../helpers';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 
@@ -66,7 +66,7 @@ function CustomTabPanel(props: TabPanelProps) {
     >
       {value === index && (
         <Box sx={{ p: 3 }}>
-          <Typography>{children}</Typography>
+          {children}
         </Box>
       )}
     </div>
@@ -80,32 +80,27 @@ function a11yProps(index: number) {
   };
 }
 
-export const Tabs = ({ data = [], color = 'primary', ...props }: TabsBaseProps) => {
+export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsBaseProps) => {
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
-    console.log(event);
+    if(!!onChange) onChange(event, newValue)
   };
 
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <Box sx={{ width: '100%' }}>
-        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
-            {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
-          </TabsStyled>
-        </Box>
-        {data &&
-          data.map((item, key) => (
-            <CustomTabPanel value={value} index={key}>
-              {item.children}
-            </CustomTabPanel>
-          ))}
+    <Box sx={{ width: '100%' }}>
+      <Box>
+        <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
+          {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
+        </TabsStyled>
       </Box>
-    </ThemeProvider>
+      {data &&
+        data.map((item, key) => (
+          <CustomTabPanel value={value} index={key}>
+            {item.children}
+          </CustomTabPanel>
+        ))}
+    </Box>
   );
 };

package/src/components/Tag.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { Chip as MuiTag, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Chip as MuiTag } from '@mui/material';
 import { TagBaseProps } from '../interfaces';
-import { palette, themes } from '../helpers';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 
@@ -18,20 +18,16 @@ const colorMap: Record<ColorVariant, string> = {
 const TagStyled = styled(MuiTag)({});
 
 export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <TagStyled
-        label={label}
-        sx={{
-          color: outlined !== true ? '#FFFF' : colorMap[color],
-          backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
-          border: `1px solid ${colorMap[color]}`,
-        }}
-        {...props}
-      />
-    </ThemeProvider>
+    <TagStyled
+      label={label}
+      sx={{
+        color: outlined !== true ? '#FFFF' : colorMap[color],
+        backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
+        border: `1px solid ${colorMap[color]}`,
+      }}
+      {...props}
+    />
   );
 };

package/src/components/TextField.tsx

@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { FormControl, ThemeProvider, useMediaQuery, TextField as MuiTextField } from '@mui/material';
+import { FormControl, TextField as MuiTextField } from '@mui/material';
 
 import { TextFieldBaseProps } from '../interfaces';
 import { styled } from '@mui/material/styles';
-import { themes } from '../helpers';
 
 const TextFieldStyled = styled(MuiTextField)({
   textTransform: 'none',
@@ -12,13 +11,9 @@ const TextFieldStyled = styled(MuiTextField)({
 });
 
 export const TextField: React.FC<TextFieldBaseProps> = ({ label, ...props }) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
   return (
-    <ThemeProvider theme={theme}>
-      <FormControl sx={{ width: '100%' }}>
-        <TextFieldStyled {...props} label={label} />
-      </FormControl>
-    </ThemeProvider>
+    <FormControl sx={{ width: '100%' }}>
+      <TextFieldStyled {...props} label={label} />
+    </FormControl>
   );
 };

package/src/components/TextInput/index.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react"
+import * as S from "./styles"
+import { TextInputProps } from "./interface"
+
+const TextInput:React.FC<TextInputProps> = ({ 
+  label, 
+  className,
+  onChange,
+  disabled,
+  placeholder,
+  name,
+  type,
+  value
+}) => {
+  const [valueSelected, setValueSelected] = useState(value)
+
+  const changeValue = (event: any) => {
+    const { value } = event.target
+    setValueSelected(value)
+    onChange(event)
+  }
+
+  return (
+    <S.Container className={className}>
+      <S.Label>{label}</S.Label>
+      <S.Input 
+        type={type}
+        name={name}
+        value={valueSelected}
+        placeholder={placeholder} 
+        disabled={disabled} 
+        onChange={(event) => changeValue(event)} 
+      />
+    </S.Container>
+  )
+}
+
+export default TextInput

package/src/components/TextInput/interface.ts

@@ -0,0 +1,10 @@
+export interface TextInputProps {
+  className?: string
+  label: string 
+  onChange: Function
+  disabled?: boolean
+  placeholder?: string
+  name?: string
+  type?: string
+  value: string
+}

package/src/components/TextInput/styles.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components"
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`
+
+export const Input = styled.input`
+  border: none;
+  color: #4D4F5C;
+  border-bottom: 1px solid #00000033;
+  outline: none;
+  font-size: 18px;
+  padding: 8px;
+  width: 100%;
+  font-size: 16px;
+`