frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/form-elements/table/parts/TableBody/index.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { WrapperDataRow, TableDataRowItem, TableDataChildrenItem, TableDataChildrenControlExpand, WrapperExpandButton } from './tableStyle.js';
+import { ArrrowExpandDropdown } from '../../../../../shared/icons.js';
+
+function TableBody({ data, expandedRows, handleExpandClick, columns }) {
+    return (jsx("tbody", { children: data.map((row, index) => (jsxs(Fragment, { children: [jsx(TableRow, { row: row, index: index, columns: columns, handleExpandClick: handleExpandClick, isExpanded: !!expandedRows?.[row?.id] }), jsx(ExpandableRow, { index: index, row: row, columns: columns, isExpanded: !!expandedRows?.[row?.id] })] }, row.id))) }));
+}
+function TableRow({ row, index, handleExpandClick, isExpanded, columns }) {
+    return (jsxs(WrapperDataRow, { index: index, onClick: () => row.showButtonExpanded && handleExpandClick(row.id), style: { cursor: row.showButtonExpanded ? 'pointer' : 'auto' }, children: [row.value.map((cell, index) => (jsx(TableDataRowItem, { children: cell }, index))), row.showButtonExpanded ? (jsx("td", { children: jsx(ExpandButton, { isExpanded: isExpanded, onClick: (event) => {
+                        handleExpandClick(row.id);
+                        event.stopPropagation();
+                    } }) })) : (jsx("td", {}))] }));
+}
+function ExpandableRow({ index, row, columns, isExpanded }) {
+    return (jsx(TableDataChildrenItem, { index: index, children: jsx("td", { colSpan: columns.length + 1, children: jsx(TableDataChildrenControlExpand, { index: index, isExpanded: isExpanded, children: row.children }) }) }));
+}
+function ExpandButton({ isExpanded, onClick }) {
+    return (jsx(WrapperExpandButton, { onClick: onClick, isExpanded: isExpanded, children: jsx(ArrrowExpandDropdown, {}) }));
+}
+
+export { TableBody as default };

package/dist/esm/src/components/form-elements/table/parts/TableBody/tableStyle.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+const WrapperDataRow = styled.tr `
+  min-height: 54px;
+  min-width: fit-content;
+  background-color: ${({ index }) => index % 2 === 0 ? '#FFFFFF' : '#F3F3F3'};
+`;
+const TableDataRowItem = styled.td `
+  padding: 10px;
+  
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 400;
+`;
+const TableDataChildrenItem = styled.tr `
+  padding: 10px;
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 400;
+  background-color: ${({ index }) => (index % 2 === 0 ? '#FFFFFF' : '#F3F3F3')};
+`;
+const TableDataChildrenControlExpand = styled.div `
+  max-height: ${({ isExpanded }) => (isExpanded ? '1000px' : '0px')};
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+`;
+styled.div `
+  display: flex;
+  width: ${({ width }) => width};
+  justify-content: ${({ align }) => align};
+  align-items: center;
+  padding: 10px;
+  
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 400;
+`;
+const WrapperExpandButton = styled.div `
+  display: flex;
+  cursor: pointer;
+  min-width: 40px;
+  min-height: 40px;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  transition: transform 0.3s ease-in-out;
+  transform: ${({ isExpanded }) => (isExpanded ? 'rotate(180deg)' : 'rotate(0deg)')} ;
+`;
+
+export { TableDataChildrenControlExpand, TableDataChildrenItem, TableDataRowItem, WrapperDataRow, WrapperExpandButton };

package/dist/esm/src/components/form-elements/table/parts/TableHead/index.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { THeadColumn, TRowColumn, THColumnTitleItem } from './tableStyle.js';
+
+function TableHead({ columns }) {
+    return (jsx(THeadColumn, { children: jsxs(TRowColumn, { children: [columns.map((column, index) => (jsx(THColumnTitleItem, { style: {
+                        width: column.width,
+                        textAlign: column.align
+                    }, children: column.title }, index))), jsx("th", {})] }) }));
+}
+
+export { TableHead as default };

package/dist/esm/src/components/form-elements/table/parts/TableHead/tableStyle.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const THeadColumn = styled.thead `
+  width: 100%;
+  height: 56px;
+`;
+const TRowColumn = styled.tr `
+  background-color: #BEDCDC;
+`;
+const THColumnTitleItem = styled.th `
+  display: table-cell;
+  padding: 10px;
+  width: ${({ width }) => width};
+  text-align: ${({ align }) => align};
+  white-space: nowrap;
+  min-height: 56px;
+  
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.borderSecondary4};
+`;
+
+export { THColumnTitleItem, THeadColumn, TRowColumn };

package/dist/esm/src/components/form-elements/table/tableStyle.js

@@ -0,0 +1,49 @@
+import styled, { keyframes } from 'styled-components';
+import { Skeleton } from '@mui/material';
+
+const ContainerTable = styled.div `
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${({ theme }) => theme.colors.neutralsGrey7};
+  border-radius: 8px;
+  overflow: hidden;
+`;
+const WrapperTable = styled.div `
+  display: block;
+  min-width: 100%;
+  height: 100%;
+  overflow: hidden;
+  overflow-x: auto;
+`;
+const TableHtml = styled.table `
+  width: 100%; 
+  border-collapse: collapse;
+`;
+const WrapperLoading = styled.div `
+  width: 100%;
+`;
+const SkeletonHeader = styled(Skeleton) `
+  width: 100% !important;
+  height: 44px !important;
+  margin: 0 !important;
+  background: linear-gradient(90deg, ${({ theme }) => theme.colors.neutralsGrey5}, ${({ theme }) => theme.colors.neutralsGrey6});
+`;
+const skeletonAnimation = keyframes `
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: calc(200% + 100%) 0;
+  }
+`;
+const SkeletonRow = styled(Skeleton) `
+  width: 100% !important;
+  height: 44px !important;
+  background: linear-gradient(90deg, ${({ theme }) => theme.colors.neutralsGrey8}, ${({ theme }) => theme.colors.neutralsGrey6}, ${({ theme }) => theme.colors.neutralsGrey8});
+  
+  background-size: 200% 100%;
+  animation: ${skeletonAnimation} ease-in-out ${({ isAlter }) => isAlter ? '4s' : '3s'} infinite !important;
+`;
+
+export { ContainerTable, SkeletonHeader, SkeletonRow, TableHtml, WrapperLoading, WrapperTable };

package/dist/esm/src/components/form-elements/table-actions/index.js

@@ -0,0 +1,82 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { useState, useEffect } from 'react';
+import Table from '../table/index.js';
+import CollaboratorAvatar from './parts/CollaboratorAvatar/index.js';
+import DateLimit from './parts/DateLimit/index.js';
+import TableBody from './parts/TagStatus/index.js';
+import EmptyState from './parts/EmptyState/index.js';
+import { WrapperCellButtonInbox, ButtonActionInbox, WrapperEmptyState, WrapperEmptyStateCaseButton, WrapperButtonEmpty, ButtonEmpty } from './tableActionsStyle.js';
+import { BallonChatgRondedTips, AddIcon } from '../../../shared/icons.js';
+
+function TableActions({ columns, data, isLoading, lengthElSkeleton = 3, onPressAvatar, labelStatus, labelTextVisitProfile, buttonBottomCreateAction, showButtonInbox, emptyState, expandItemId, hiddeExpandItemId, customImageEmptyState }) {
+    const [adaptedColumns, setAdaptedColumns] = useState([]);
+    const [adaptedData, setAdaptedData] = useState([]);
+    useEffect(() => {
+        const newColumns = columns.map((column, index) => {
+            if (typeof column !== 'string' && column?.alignHeader) {
+                return {
+                    title: column?.title,
+                    width: column?.width,
+                    align: column?.alignHeader
+                };
+            }
+            else {
+                if (showButtonInbox) {
+                    let width = '15%';
+                    let align = 'center';
+                    if (index === 1) {
+                        width = '45%';
+                        align = 'left';
+                    }
+                    if (index === columns.length - 1) {
+                        width = '5%';
+                        align = 'center';
+                    }
+                    return { title: column, width: width, align: align };
+                }
+                else {
+                    let width = '20%';
+                    let align = 'center';
+                    if (index === 1) {
+                        width = '40%';
+                        align = 'left';
+                    }
+                    if (index === columns.length - 1) {
+                        width = '0%';
+                        align = 'center';
+                    }
+                    return { title: column, width: width, align: align };
+                }
+            }
+        });
+        setAdaptedColumns(newColumns);
+    }, [columns]);
+    useEffect(() => {
+        const newData = data.map((item) => ({
+            id: item.id,
+            value: [
+                jsx(CollaboratorAvatar, { src: item?.value?.[0]?.id ? item?.value?.[0]?.src : item?.value?.[0], onPressAvatar: onPressAvatar, uuid: item?.value?.[0]?.id, labelTextVisitProfile: labelTextVisitProfile, align: typeof columns?.[0] !== 'string' && columns?.[0]?.alignContent, isResponsible: item?.value?.[0]?.isResponsible, userName: item?.value?.[0]?.name }),
+                // @ts-ignore
+                jsx("p", { style: { color: '#222', textAlign: columns?.[1]?.alignContent }, children: item.value[1] }),
+                jsx(DateLimit, { date: item?.value?.[2], status: item?.value?.[3] }),
+                jsx(TableBody, { status: item?.value?.[3], label: labelStatus?.[item?.value?.[3]] }),
+                item?.actionButtonInbox ? (jsx(WrapperCellButtonInbox, { children: jsx(ButtonActionInbox, { enable: item?.enableButtonInbox, onClick: (e) => {
+                            e?.stopPropagation();
+                            return item?.enableButtonInbox ? item?.actionButtonInbox?.(item?.value?.[0]?.id) : {};
+                        }, children: jsx(BallonChatgRondedTips, {}) }) })) : (jsx(Fragment, {}))
+            ],
+            showButtonExpanded: item.showButtonExpanded,
+            children: item.children
+        }));
+        setAdaptedData(newData);
+    }, [data]);
+    const customStyleBorderTable = buttonBottomCreateAction?.mode == 'button' || buttonBottomCreateAction?.mode == 'children' || data?.length == 0
+        ? { borderTopRightRadius: '8px', borderTopLeftRadius: '8px', borderBottomLeftRadius: '0px', borderBottomRightRadius: '0px' }
+        : { borderRadius: '8px' };
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsx(Table, { columns: adaptedColumns, data: adaptedData, isLoading: isLoading, lengthElSkeleton: lengthElSkeleton, containerStyles: customStyleBorderTable, expandItemId: expandItemId, hiddeExpandItemId: hiddeExpandItemId }), !isLoading && data?.length == 0 && jsx(EmptyState, { emptyState: emptyState, customImage: customImageEmptyState }), !isLoading && data?.length !== 0 && buttonBottomCreateAction?.mode && buttonBottomCreateAction?.mode != 'hidden' && (jsxs(WrapperEmptyState, { children: [buttonBottomCreateAction?.mode == 'button' && (jsx(WrapperEmptyStateCaseButton, { children: jsx(WrapperButtonEmpty, { children: jsxs(ButtonEmpty, { onClick: () => buttonBottomCreateAction?.handleClickButtonCreate?.(), children: [jsx(AddIcon, { fill: FRSTTheme?.colors?.primary1, width: '14', height: '14' }), buttonBottomCreateAction?.labelButtonAddAction] }) }) })), buttonBottomCreateAction?.mode == 'children' && jsx("div", { children: buttonBottomCreateAction?.children })] }))] }));
+}
+
+export { TableActions as default };

package/dist/esm/src/components/form-elements/table-actions/parts/CollaboratorAvatar/collaboratorAvatarStyle.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const WrapperCollaboratorAvatar = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: ${({ align }) => align && align != 'center' ?
+    (align == 'left' ? 'flex-start' : 'flex-end') :
+    'center'};
+  align-items: center;
+`;
+
+export { WrapperCollaboratorAvatar };

package/dist/esm/src/components/form-elements/table-actions/parts/CollaboratorAvatar/index.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import Tooltip from '../../../../DS/tooltip/index.js';
+import { WrapperCollaboratorAvatar } from './collaboratorAvatarStyle.js';
+import Avatar from '../../../../avatar/index.js';
+
+function CollaboratorAvatar({ src, onPressAvatar, labelTextVisitProfile, uuid, align, isResponsible, userName }) {
+    return (jsx(WrapperCollaboratorAvatar, { align: align, children: onPressAvatar && uuid ? (jsx(Tooltip, { direction: "right", content: userName ? userName : labelTextVisitProfile ? labelTextVisitProfile : 'Visitar perfil', trigger: "hover", width: "fit-content", height: "32px", style: {
+                textAlign: 'center',
+                whiteSpace: 'nowrap'
+            }, children: jsx("div", { onClick: (event) => {
+                    event.stopPropagation();
+                    onPressAvatar?.(uuid);
+                }, children: jsx(Avatar, { size: "32px", src: src ? src : 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', isActiveClick: !!(onPressAvatar && uuid), style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        overflow: 'hidden',
+                        borderRadius: '50%',
+                        border: isResponsible ? '2px solid #31AAAA' : '2px solid transparent'
+                    } }) }) })) : (jsx(Avatar, { size: "32px", src: src ? src : 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: null, isActiveClick: !!(onPressAvatar && uuid) })) }));
+}
+
+export { CollaboratorAvatar as default };

package/dist/esm/src/components/form-elements/table-actions/parts/DateLimit/dateLimitStyle.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const WrapperDateLimit = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  font-family: PT Sans;
+  font-size: 16px;
+  line-height: 17.6px;
+  text-align: center;
+  
+  ${({ status }) => {
+    if (status == 'completed')
+        return `font-weight: 700; color: #1BA853; `;
+    else if (status == 'not_completed')
+        return `font-weight: 700; color: #A50000;`;
+    else if (status == 'in_progress')
+        return `font-weight: 400; color: #222222;`;
+    else if (status == 'deprioritized')
+        return `font-weight: 400; color: #9C9C9C;`;
+    else
+        return `font-weight: 400; color: #222222;`;
+}}
+`;
+
+export { WrapperDateLimit };

package/dist/esm/src/components/form-elements/table-actions/parts/DateLimit/index.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { WrapperDateLimit } from './dateLimitStyle.js';
+
+function DateLimit({ date, status }) {
+    return jsx(WrapperDateLimit, { status: status, children: date });
+}
+
+export { DateLimit as default };

package/dist/esm/src/components/form-elements/table-actions/parts/EmptyState/emptyStateStyle.js

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+const WrapperEmptyState = styled.div `
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 8px;
+  min-height: fit-content;
+  background-color: ${({ theme }) => theme?.colors.shadeWhite};
+  overflow: hidden;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  transition: min-height 0.5s ease-in-out;
+  transition: background-color 0.5s ease-in-out;
+`;
+const ImageEmptyState = styled.img `
+  width: 150px;
+`;
+const LabelEmptyState = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  font-family: PT Sans;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20.7px;
+  text-align: center;
+  color: #444;
+`;
+const ButtonCreateAction = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  height: 34px;
+  width: 150px;
+  cursor: pointer;
+  border-radius: 8px;
+  white-space: nowrap;
+  padding-left: 2px;
+  padding-right: 2px;
+  margin: 2px;
+
+  font-family: PT Sans;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 17.6px;
+  text-align: left;
+  gap: 8px;
+
+  background-color: ${({ theme }) => theme.colors.primary1};
+  color:  ${({ theme }) => theme?.colors.shadeWhite}
+`;
+
+export { ButtonCreateAction, ImageEmptyState, LabelEmptyState, WrapperEmptyState };

package/dist/esm/src/components/form-elements/table-actions/parts/EmptyState/index.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { WrapperEmptyState, ImageEmptyState, LabelEmptyState, ButtonCreateAction } from './emptyStateStyle.js';
+import imgEmptyState from '../../../../../../public/img/Nonotification.png.js';
+
+function EmptyState({ emptyState, customImage }) {
+    const imgEmpty = imgEmptyState;
+    return (jsxs(WrapperEmptyState, { style: {
+            height: '280px',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '20px',
+            border: '1.5px solid #ebebeb',
+            borderTopWidth: '0px'
+        }, children: [jsx(ImageEmptyState, { src: customImage ? customImage : imgEmpty, alt: "Empty" }), jsx(LabelEmptyState, { children: emptyState?.labels &&
+                    emptyState?.labels?.map((label, index) => {
+                        return jsx("p", { children: label }, index);
+                    }) }), emptyState?.handleClickButtonCreate && jsx(ButtonCreateAction, { onClick: () => emptyState?.handleClickButtonCreate?.(), children: emptyState?.labelButtonCreate })] }));
+}
+
+export { EmptyState as default };

package/dist/esm/src/components/form-elements/table-actions/parts/TagStatus/index.js

@@ -0,0 +1,8 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ContainerTag, WrapperTag, CicleTag } from './tagStatusStyle.js';
+
+function TableBody({ status, label }) {
+    return (jsx(ContainerTag, { children: jsxs(WrapperTag, { status: status, children: [jsx(CicleTag, { status: status }), label] }) }));
+}
+
+export { TableBody as default };

package/dist/esm/src/components/form-elements/table-actions/parts/TagStatus/tagStatusStyle.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+const ContainerTag = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const WrapperTag = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 150px;
+  height: 26px;
+  padding: 4px 12px 4px 8px;
+  gap: 8px;
+  border-radius: 30px;
+  white-space: nowrap;
+  min-width: fit-content;
+  color: #222;
+  
+  ${({ status }) => {
+    if (status == 'not_started')
+        return `background-color: #FAE28D;`;
+    else if (status == 'completed')
+        return `background-color: #B9E7B8; `;
+    else if (status == 'not_completed')
+        return `background-color: #F2B0B0;`;
+    else if (status == 'in_progress')
+        return `background-color: #B9D5FF;`;
+    else if (status == 'deprioritized')
+        return `background-color: #D8D8D8;`;
+    else
+        return `background-color: #FAE28D;`;
+}}
+`;
+const CicleTag = styled.div `
+  width: 12px;
+  height: 12px;
+  border-radius: 100px;
+    
+  ${({ status }) => {
+    if (status == 'not_started')
+        return `background-color: #FDAE15;`;
+    else if (status == 'completed')
+        return `background-color: #1BA853; `;
+    else if (status == 'not_completed')
+        return `background-color: #A50000;`;
+    else if (status == 'in_progress')
+        return `background-color: #3881FA;`;
+    else if (status == 'deprioritized')
+        return `background-color: #222222;`;
+    else
+        return `background-color: #FDAE15;`;
+}}
+`;
+
+export { CicleTag, ContainerTag, WrapperTag };

package/dist/esm/src/components/form-elements/table-actions/tableActionsStyle.js

@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+
+styled.div `
+  min-height: 16px;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  width: fit-content;
+  align-items: center;
+`;
+styled.button `
+  min-height: 16px;
+  min-width: 16px;
+  padding: 0.3rem;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border-width: 0px;
+  cursor:pointer;
+  /* :focus {
+    background-color: ${({ theme }) => theme.colors.selectItens};
+  } */
+`;
+styled.div `
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: ${({ isChecked }) => (isChecked ? 700 : 400)};
+  font-size: 16px;
+  line-height: 21px;
+
+  padding-left: 8px;
+`;
+const WrapperCellButtonInbox = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ButtonActionInbox = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 35px;
+  height: 35px;
+  border-radius: 20px;
+  background-color: ${({ theme, enable }) => enable ? theme.colors.primary1 : theme.colors.neutralsGrey5};
+
+  font-family: Work Sans;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16.42px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.shadeWhite};
+
+  cursor: ${({ enable }) => enable ? "pointer" : "auto"} ;
+`;
+const WrapperEmptyState = styled.div `
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 8px;
+  min-height: fit-content;
+  background-color: ${({ theme }) => theme?.colors.shadeWhite};
+  overflow: hidden;
+  border: 1px solid #ebebeb;
+  border-top-width: 0px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  transition: min-height 0.5s ease-in-out;
+  transition: background-color 0.5s ease-in-out;
+`;
+const WrapperEmptyStateCaseButton = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;     
+`;
+const WrapperButtonEmpty = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 15%;
+`;
+const ButtonEmpty = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 34px;
+  width: 150px;
+  cursor: pointer;
+  border-radius: 12px;
+  white-space: nowrap;
+  padding-left: 2px;
+  padding-right: 2px;
+  margin: 2px;
+
+  font-family: PT Sans;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 17.6px;
+  text-align: left;
+  gap: 8px;
+
+  color:  ${({ theme }) => theme?.colors.primary1}
+`;
+
+export { ButtonActionInbox, ButtonEmpty, WrapperButtonEmpty, WrapperCellButtonInbox, WrapperEmptyState, WrapperEmptyStateCaseButton };

package/dist/esm/src/components/form-elements/textarea/index.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import TextField from '../textfield/index.js';
+
+function Textarea(props) {
+    return jsx(TextField, { ...props, multiline: true });
+}
+
+export { Textarea as default };

package/dist/esm/src/components/form-elements/textfield/index.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import HelperTextBox from '../helperTextBox/helperTextBox.js';
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ThemeProvider } from 'styled-components';
+import '../../../shared/global.css.js';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Label, TextFieldContainer, StartIcon, TextField as TextField$1, InputIconButton, HelperText } from './textFieldStyle.js';
+
+function TextField(props) {
+    const [focus, setFocus] = useState(false);
+    const [hover, setHover] = useState(false);
+    const [click, setClick] = useState(false);
+    const [inputType, setInputType] = useState(props.type);
+    const [endIconState, setEndIcon] = useState(props?.endIcon);
+    const { t } = useTranslation();
+    useEffect(() => {
+        setInputType(props.type);
+    }, [props.type]);
+    useEffect(() => {
+        setEndIcon(props?.endIcon);
+    }, [props?.endIcon]);
+    const showBorderAfterClick = () => {
+        setClick(true);
+        setTimeout(() => {
+            setClick(false);
+        }, 1000);
+    };
+    return (jsx(ThemeProvider, { theme: {
+            ...FRSTTheme,
+            focused: focus,
+            disabled: props.disabled,
+            hovered: hover,
+            error: props.error,
+            multiline: props.multiline,
+            width: props.width,
+            height: props.height,
+            isValue: !!props?.value
+        }, children: jsxs("div", { style: props.style, className: props.className, children: [jsx(Label, { htmlFor: props.id, isClicked: click, children: props.label }), jsxs(TextFieldContainer, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: () => showBorderAfterClick(), isClicked: click, isHelpTextBox: props.isHelperTextBox, inputBackground: props.inputBackground, style: props?.containerTextFieldStyle, children: [props.startIcon && !props.multiline && jsx(StartIcon, { children: props.startIcon }), jsx(TextField$1, { ref: props.textRef, onFocus: () => setFocus(true), onBlur: () => setFocus(false), id: props.id, placeholder: props.placeholder || `${t('globals.typeHere')}...`, as: props.multiline ? 'textarea' : 'input', type: inputType, value: props.value, disabled: props.disabled, onChange: props.onChange, name: props.name, required: props.required, defaultValue: props.defaultValue, maxLength: props.maxLength, style: props?.textFieldStyle }), props.endIcon && !props.multiline && !!props.endIcon && (jsx(InputIconButton, { onClick: props.handleClickEndIcon, children: endIconState }))] }), props.helperText && jsx(HelperText, { children: props.helperText }), props.helperTextBox && jsx(HelperTextBox, { helperTextBox: props.helperTextBox })] }) }));
+}
+
+export { TextField as default };