sbwb-ds 1.0.17 → 1.0.19

package/dist/sbwb-ds.js

@@ -3502,8 +3502,6 @@ const HO = X.div`
     width: fit-content;
   }
 `, eV = X.span`
-  display: flex;
-  flex-wrap: wrap;
   color: ${({ error: r }) => r ? S.colors.feedbackColors.colorFeedbackError : S.colors.neutralColors.colorNeutralCloudy};
   font-size: ${({ size: r }) => r === "Small" ? S.fonts.fontSize.fontSizeBodyMd : S.fonts.fontSize.fontSizeBodyLg};
   font-family: ${S.fonts.fontFamily.fontFamilyPrimary};
@@ -58832,6 +58830,7 @@ const Uve = X.aside`
     overflow-x: hidden;
   }
   & > svg {
+    flex-shrink: 0;
     height: ${({ size: r }) => r === "Small" ? S.icons.iconSizeSm : S.icons.iconSizeAnt};
     width: ${({ size: r }) => r === "Small" ? S.icons.iconSizeSm : S.icons.iconSizeAnt};
   }
@@ -58861,9 +58860,7 @@ const Uve = X.aside`
 `, t2e = X.div`
   flex: 1;
   height: ${({ size: r }) => r === "Small" ? "32px" : "40px"};
-  ${({ direction: r }) => r === "horizontal" ? fe`
-          border-bottom: 1px solid ${S.colors.neutralColors.colorNeutralSoft};
-        ` : fe`
+  ${({ direction: r }) => r === "horizontal" ? fe`` : fe`
           border-left: 1px solid ${S.colors.neutralColors.colorNeutralSoft};
         `};
 `, r2e = X.div`
@@ -59025,7 +59022,9 @@ const Uve = X.aside`
   justify-content: ${({ isComponentRendered: r }) => r && "center"};
   width: 100%;
   max-width: ${({ maxWidth: r }) => r};
-  height: ${({ size: r }) => r === "Large" ? "4rem" : "3.2rem"};
+  height: auto;
+  min-height: ${({ size: r }) => r === "Large" ? "4rem" : "3.2rem"};
+
   padding: ${({ hasSubText: r, size: t, isComponentRendered: e }) => t === "Large" ? r || e ? `${e ? "0" : "0.2rem"} ${S.spacings.spacingInline.spacingInlineAnt}` : S.spacings.spacingInset.spacingInsetXs : r ? `0.2rem ${S.spacings.spacingInline.spacingInlineXs}` : S.spacings.spacingInset.spacingInsetNano};
 
   font-family: ${S.fonts.fontFamily.fontFamilyPrimary};
@@ -59245,8 +59244,8 @@ const Uve = X.aside`
                   maxWidth: b.maxWidth,
                   size: e,
                   children: T != null && T.value ? /* @__PURE__ */ xe(qu, { children: [
-                    /* @__PURE__ */ H("p", { children: T == null ? void 0 : T.value }),
-                    (T == null ? void 0 : T.subText) && /* @__PURE__ */ H("p", { children: T == null ? void 0 : T.subText })
+                    /* @__PURE__ */ H("p", { title: T == null ? void 0 : T.value, children: T == null ? void 0 : T.value }),
+                    (T == null ? void 0 : T.subText) && /* @__PURE__ */ H("p", { title: T == null ? void 0 : T.subText, children: T == null ? void 0 : T.subText })
                   ] }) : T
                 },
                 `${m}-${_}`

package/dist/sbwb-ds.umd.cjs

@@ -662,8 +662,6 @@ See https://s-c.sh/2BAXzed for more info.`),window["__styled-components-init__"]
     width: fit-content;
   }
 `,gI=j.span`
-  display: flex;
-  flex-wrap: wrap;
   color: ${({error:r})=>r?S.colors.feedbackColors.colorFeedbackError:S.colors.neutralColors.colorNeutralCloudy};
   font-size: ${({size:r})=>r==="Small"?S.fonts.fontSize.fontSizeBodyMd:S.fonts.fontSize.fontSizeBodyLg};
   font-family: ${S.fonts.fontFamily.fontFamilyPrimary};
@@ -2457,6 +2455,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     overflow-x: hidden;
   }
   & > svg {
+    flex-shrink: 0;
     height: ${({size:r})=>r==="Small"?S.icons.iconSizeSm:S.icons.iconSizeAnt};
     width: ${({size:r})=>r==="Small"?S.icons.iconSizeSm:S.icons.iconSizeAnt};
   }
@@ -2479,9 +2478,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 `,Ife=j.div`
   flex: 1;
   height: ${({size:r})=>r==="Small"?"32px":"40px"};
-  ${({direction:r})=>r==="horizontal"?fe`
-          border-bottom: 1px solid ${S.colors.neutralColors.colorNeutralSoft};
-        `:fe`
+  ${({direction:r})=>r==="horizontal"?fe``:fe`
           border-left: 1px solid ${S.colors.neutralColors.colorNeutralSoft};
         `};
 `,Pfe=j.div`
@@ -2598,7 +2595,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   justify-content: ${({isComponentRendered:r})=>r&&"center"};
   width: 100%;
   max-width: ${({maxWidth:r})=>r};
-  height: ${({size:r})=>r==="Large"?"4rem":"3.2rem"};
+  height: auto;
+  min-height: ${({size:r})=>r==="Large"?"4rem":"3.2rem"};
+
   padding: ${({hasSubText:r,size:t,isComponentRendered:e})=>t==="Large"?r||e?`${e?"0":"0.2rem"} ${S.spacings.spacingInline.spacingInlineAnt}`:S.spacings.spacingInset.spacingInsetXs:r?`0.2rem ${S.spacings.spacingInline.spacingInlineXs}`:S.spacings.spacingInset.spacingInsetNano};
 
   font-family: ${S.fonts.fontFamily.fontFamilyPrimary};
@@ -2655,4 +2654,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     background-color: ${S.colors.backgroundColors.colorBackgroundCarpet};
     cursor: pointer;
   }
-`,wA=R.createContext(void 0),Wfe=({children:r})=>{const[t,e]=R.useState({}),n=R.useMemo(()=>({selectedCheckboxes:t,setSelectedCheckboxes:e}),[t]);return W(wA.Provider,{value:n,children:r})},SA=()=>{const r=R.useContext(wA);if(!r)throw new Error("You cannot access this context outside a provider");return r},Gfe=(r,t)=>{const{selectedCheckboxes:e,setSelectedCheckboxes:n}=SA();R.useEffect(()=>(n(Object.fromEntries(r.map((M,D)=>[D,!1]))),()=>{n({})}),[]);const[a,i]=R.useState(""),[o,s]=R.useState(),[l,u]=R.useState(r),[c,f]=R.useState(!1),[h,d]=R.useState(null),v=R.useMemo(()=>t.filter(M=>!M.isHidden),[t]),p=(M,D)=>{const T=[...l].sort((E,k)=>E.rowData[M].content.toString().localeCompare(k.rowData[M].content.toString(),"en",{numeric:!0})*(D==="asc"?1:-1));u(T),n(Object.fromEntries(r.map((E,k)=>[k,!1]))),f(!1)},g=M=>{const D=M===a&&o==="asc"?"desc":"asc";i(M),s(D),p(M,D)},m=M=>{f(M),n(Object.fromEntries(r.map((D,T)=>[T,M])))},y=M=>{n(D=>({...D,[M]:!D[M]})),c&&f(!1)};function C(M,D){return M.split(".").reduce((T,E)=>T&&T[E],D)}const w=ze.ExpandLessSm,b=ze.ExpandMoreSm,_=ze.UnfoldMoreSm;return{selectedCheckboxes:e,filteredColumns:v,checkedAllCell:c,order:o,dataTable:l,handleSortingChange:g,toggleAllCheckbox:m,toggleCheckbox:y,getValueFromKeyPath:C,getIcon:()=>o?o==="asc"?W(b,{}):W(w,{}):W(_,{}),setHoverRow:d,hoverRow:h}},Zfe=({rows:r,columns:t,size:e="Large",maxHeight:n="40rem",withCheckbox:a=!1})=>{const{selectedCheckboxes:i,filteredColumns:o,checkedAllCell:s,dataTable:l,handleSortingChange:u,toggleAllCheckbox:c,toggleCheckbox:f,getValueFromKeyPath:h,getIcon:d,setHoverRow:v,hoverRow:p}=Gfe(r,t);return W($fe,{maxHeight:n,children:W(Vfe,{items:o.length,"data-testid":"table-component",children:xe("tbody",{children:[W(CA,{topBorderRadius:!0,isHeader:!0,children:o.map((g,m)=>xe(ru,{children:[m===0&&a&&W(Ffe,{onClick:()=>c(!s),size:e,children:W(qh,{name:"allCheck",id:"allcheck","data-testid":"allcheck",size:e==="Large"?"Medium":"Small",checked:s,onChange:y=>c(!y.target.checked)})},`${m}-check`),xe(Bfe,{onClick:()=>(g==null?void 0:g.sortable)&&u(g.path),isSortable:g==null?void 0:g.sortable,maxWidth:g.maxWidth,size:e,children:[W("p",{children:g.label}),W("span",{children:(g==null?void 0:g.sortable)&&d()})]},`${m}-${g.path}`)]}))}),l==null?void 0:l.map((g,m)=>{const{rowData:y,params:C={}}=g,{onClick:w=()=>null}=C;return W(CA,{BottomBorderRadius:l.length-1===m,onClick:()=>w(y),onMouseEnter:()=>v(m),onMouseLeave:()=>v(null),children:o.map((b,_)=>{const x=h(b.path,y),M=typeof(x==null?void 0:x.content)!="object"?x.content:" ",D=typeof(x==null?void 0:x.subText)!="object"?x.subText:" ",T=b!=null&&b.content?b.content(y):{value:M!==""?M:" ",subText:D};return xe(ru,{children:[_===0&&a&&W(zfe,{selected:i[m],isHover:p===m,onClick:()=>f(m),size:e,children:W(qh,{id:`${m}`,"data-testid":`${m}-check`,size:e==="Large"?"Medium":"Small",checked:i[m],onChange:()=>f(m)})},`${m}-check`),W(Hfe,{selected:i[m],isHover:p===m,hasSubText:!!T.subText,isComponentRendered:!(T!=null&&T.value),maxWidth:b.maxWidth,size:e,children:T!=null&&T.value?xe(ru,{children:[W("p",{children:T==null?void 0:T.value}),(T==null?void 0:T.subText)&&W("p",{children:T==null?void 0:T.subText})]}):T},`${m}-${_}`)]})})},m)})]})})})};Ze.Accordion=Ok,Ze.ActionButton=iu,Ze.Actions=Fk,Ze.Autocomplete=J4,Ze.BackgroundSection=_I,Ze.Breadcrumb=lP,Ze.Button=eo,Ze.ChartPie=Vae,Ze.Checkbox=qh,Ze.Column=Gae,Ze.Container=Yae,Ze.DatePicker=yA,Ze.Divider=Doe,Ze.GridArea=jae,Ze.Icon=Kae,Ze.Input=L5,Ze.ItemList=lie,Ze.MenuSelect=Ec,Ze.Modal=Tie,Ze.Pagination=Iie,Ze.Radio=kL,Ze.Row=Vie,Ze.Select=Xd,Ze.Sidebar=Efe,Ze.SkeletonLoading=Hie,Ze.Status=Wie,Ze.Stepper=jie,Ze.Switch=toe,Ze.TabBar=Rfe,Ze.Table=Zfe,Ze.TableProvider=Wfe,Ze.Tag=ioe,Ze.Textarea=NL,Ze.TokenArea=woe,Ze.Tooltip=boe,Ze.useTableContext=SA,Object.defineProperty(Ze,Symbol.toStringTag,{value:"Module"})});
+`,wA=R.createContext(void 0),Wfe=({children:r})=>{const[t,e]=R.useState({}),n=R.useMemo(()=>({selectedCheckboxes:t,setSelectedCheckboxes:e}),[t]);return W(wA.Provider,{value:n,children:r})},SA=()=>{const r=R.useContext(wA);if(!r)throw new Error("You cannot access this context outside a provider");return r},Gfe=(r,t)=>{const{selectedCheckboxes:e,setSelectedCheckboxes:n}=SA();R.useEffect(()=>(n(Object.fromEntries(r.map((M,D)=>[D,!1]))),()=>{n({})}),[]);const[a,i]=R.useState(""),[o,s]=R.useState(),[l,u]=R.useState(r),[c,f]=R.useState(!1),[h,d]=R.useState(null),v=R.useMemo(()=>t.filter(M=>!M.isHidden),[t]),p=(M,D)=>{const T=[...l].sort((E,k)=>E.rowData[M].content.toString().localeCompare(k.rowData[M].content.toString(),"en",{numeric:!0})*(D==="asc"?1:-1));u(T),n(Object.fromEntries(r.map((E,k)=>[k,!1]))),f(!1)},g=M=>{const D=M===a&&o==="asc"?"desc":"asc";i(M),s(D),p(M,D)},m=M=>{f(M),n(Object.fromEntries(r.map((D,T)=>[T,M])))},y=M=>{n(D=>({...D,[M]:!D[M]})),c&&f(!1)};function C(M,D){return M.split(".").reduce((T,E)=>T&&T[E],D)}const w=ze.ExpandLessSm,b=ze.ExpandMoreSm,_=ze.UnfoldMoreSm;return{selectedCheckboxes:e,filteredColumns:v,checkedAllCell:c,order:o,dataTable:l,handleSortingChange:g,toggleAllCheckbox:m,toggleCheckbox:y,getValueFromKeyPath:C,getIcon:()=>o?o==="asc"?W(b,{}):W(w,{}):W(_,{}),setHoverRow:d,hoverRow:h}},Zfe=({rows:r,columns:t,size:e="Large",maxHeight:n="40rem",withCheckbox:a=!1})=>{const{selectedCheckboxes:i,filteredColumns:o,checkedAllCell:s,dataTable:l,handleSortingChange:u,toggleAllCheckbox:c,toggleCheckbox:f,getValueFromKeyPath:h,getIcon:d,setHoverRow:v,hoverRow:p}=Gfe(r,t);return W($fe,{maxHeight:n,children:W(Vfe,{items:o.length,"data-testid":"table-component",children:xe("tbody",{children:[W(CA,{topBorderRadius:!0,isHeader:!0,children:o.map((g,m)=>xe(ru,{children:[m===0&&a&&W(Ffe,{onClick:()=>c(!s),size:e,children:W(qh,{name:"allCheck",id:"allcheck","data-testid":"allcheck",size:e==="Large"?"Medium":"Small",checked:s,onChange:y=>c(!y.target.checked)})},`${m}-check`),xe(Bfe,{onClick:()=>(g==null?void 0:g.sortable)&&u(g.path),isSortable:g==null?void 0:g.sortable,maxWidth:g.maxWidth,size:e,children:[W("p",{children:g.label}),W("span",{children:(g==null?void 0:g.sortable)&&d()})]},`${m}-${g.path}`)]}))}),l==null?void 0:l.map((g,m)=>{const{rowData:y,params:C={}}=g,{onClick:w=()=>null}=C;return W(CA,{BottomBorderRadius:l.length-1===m,onClick:()=>w(y),onMouseEnter:()=>v(m),onMouseLeave:()=>v(null),children:o.map((b,_)=>{const x=h(b.path,y),M=typeof(x==null?void 0:x.content)!="object"?x.content:" ",D=typeof(x==null?void 0:x.subText)!="object"?x.subText:" ",T=b!=null&&b.content?b.content(y):{value:M!==""?M:" ",subText:D};return xe(ru,{children:[_===0&&a&&W(zfe,{selected:i[m],isHover:p===m,onClick:()=>f(m),size:e,children:W(qh,{id:`${m}`,"data-testid":`${m}-check`,size:e==="Large"?"Medium":"Small",checked:i[m],onChange:()=>f(m)})},`${m}-check`),W(Hfe,{selected:i[m],isHover:p===m,hasSubText:!!T.subText,isComponentRendered:!(T!=null&&T.value),maxWidth:b.maxWidth,size:e,children:T!=null&&T.value?xe(ru,{children:[W("p",{title:T==null?void 0:T.value,children:T==null?void 0:T.value}),(T==null?void 0:T.subText)&&W("p",{title:T==null?void 0:T.subText,children:T==null?void 0:T.subText})]}):T},`${m}-${_}`)]})})},m)})]})})})};Ze.Accordion=Ok,Ze.ActionButton=iu,Ze.Actions=Fk,Ze.Autocomplete=J4,Ze.BackgroundSection=_I,Ze.Breadcrumb=lP,Ze.Button=eo,Ze.ChartPie=Vae,Ze.Checkbox=qh,Ze.Column=Gae,Ze.Container=Yae,Ze.DatePicker=yA,Ze.Divider=Doe,Ze.GridArea=jae,Ze.Icon=Kae,Ze.Input=L5,Ze.ItemList=lie,Ze.MenuSelect=Ec,Ze.Modal=Tie,Ze.Pagination=Iie,Ze.Radio=kL,Ze.Row=Vie,Ze.Select=Xd,Ze.Sidebar=Efe,Ze.SkeletonLoading=Hie,Ze.Status=Wie,Ze.Stepper=jie,Ze.Switch=toe,Ze.TabBar=Rfe,Ze.Table=Zfe,Ze.TableProvider=Wfe,Ze.Tag=ioe,Ze.Textarea=NL,Ze.TokenArea=woe,Ze.Tooltip=boe,Ze.useTableContext=SA,Object.defineProperty(Ze,Symbol.toStringTag,{value:"Module"})});

package/dist/src/data/mocks/mock-data.d.ts

@@ -0,0 +1,6 @@
+export interface TreeItem {
+    code: string;
+    content: string;
+    children?: TreeItem[];
+}
+export declare const mockData: TreeItem[];

package/dist/src/presentation/components/atoms/Tree/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TreeItem } from 'data/mocks/mock-data';
+interface Props {
+    title: string;
+    content: string;
+    children?: TreeItem[];
+    onClickTitle: (titulo: string) => void;
+    onClickContent: (content: string) => void;
+}
+declare const Tree: React.FC<Props>;
+export default Tree;

package/dist/src/presentation/components/atoms/Tree/index.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/src/presentation/components/atoms/Tree/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const TreeWrapper: any;
+export declare const Header: any;
+export declare const Content: any;
+export declare const Title: any;
+export declare const TreeItem: any;
+export declare const TreeItemTitle: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/data/mocks/mock-data.ts

@@ -0,0 +1,31 @@
+export interface TreeItem {
+  code: string;
+  content: string;
+  children?: TreeItem[];
+}
+
+const generateRandomItem = (depth: number): TreeItem => {
+  const code = `Código (P-${Math.floor(Math.random() * 100)})`;
+  const content = 'Balcão de Riser';
+
+  const item: TreeItem = {
+    code,
+    content,
+  };
+
+  if (depth > 1 && Math.random() > 0.5) {
+    const numChildren = Math.floor(Math.random() * 3) + 1;
+    item.children = [];
+    for (let i = 1; i <= numChildren; i++) {
+      item.children.push(generateRandomItem(depth - 1));
+    }
+  }
+  return item;
+};
+
+export const mockData: TreeItem[] = [];
+
+for (let i = 1; i <= 5; i++) {
+  // Altere o valor de i para gerar mais itens
+  mockData.push(generateRandomItem(5));
+}

package/src/presentation/components/atoms/Select/styles.ts

@@ -125,8 +125,6 @@ export const Value = styled.span`
 `;
 
 export const Placeholder = styled.span`
-  display: flex;
-  flex-wrap: wrap;
   color: ${({ error }) =>
     error
       ? sg.colors.feedbackColors.colorFeedbackError

package/src/presentation/components/atoms/Tree/Tree.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Tree from './';
+import { mockData } from '../../../../data/mocks/mock-data';
+
+interface TreeProps {
+  title: string;
+  content: string;
+  children?: any;
+}
+
+export default {
+  title: 'Components/Tree',
+  component: Tree,
+  args: {
+    title: 'Sample Title',
+    content: 'Sample Content',
+    children: [],
+  },
+  tags: ['autodocs'],
+};
+
+const Template = (args: TreeProps) => <Tree {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: mockData[0]?.code,
+  content: mockData[0]?.content,
+  onClickContent: () => {},
+  onClickTitle: () => {},
+};

package/src/presentation/components/atoms/Tree/index.spec.tsx

@@ -0,0 +1,71 @@
+import { render, fireEvent } from '@testing-library/react';
+import Tree from './';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('<Tree />', () => {
+  const mockData = {
+    title: 'TestTitle',
+    content: 'TestContent',
+    children: [
+      {
+        code: 'Child1',
+        content: 'ChildContent1',
+      },
+      {
+        code: 'Child2',
+        content: 'ChildContent2',
+      },
+    ],
+  };
+
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <Tree
+        title={mockData.title}
+        content={mockData.content}
+        onClickTitle={() => {}}
+        onClickContent={() => {}}
+      />
+    );
+    expect(getByText(mockData.title)).toBeInTheDocument();
+  });
+
+  it('calls onClickTitle and onClickContent correctly', () => {
+    const onClickTitleMock = jest.fn();
+    const onClickContentMock = jest.fn();
+
+    const { getByText } = render(
+      <Tree
+        title={mockData.title}
+        content={mockData.content}
+        onClickTitle={onClickTitleMock}
+        onClickContent={onClickContentMock}
+      />
+    );
+
+    fireEvent.click(getByText(mockData.title));
+    expect(onClickTitleMock).toHaveBeenCalledWith(mockData.title);
+
+    fireEvent.click(getByText(mockData.content));
+    expect(onClickContentMock).toHaveBeenCalledWith(mockData.content);
+  });
+
+  it('shows children correctly when header is clicked', () => {
+    const { getByText, queryByText } = render(
+      <Tree
+        title={mockData.title}
+        content={mockData.content}
+        children={mockData.children}
+        onClickTitle={() => {}}
+        onClickContent={() => {}}
+      />
+    );
+
+    expect(queryByText(mockData.children[0].code)).toBeNull();
+
+    fireEvent.click(getByText(mockData.title));
+
+    expect(getByText(mockData.children[0].code)).toBeInTheDocument();
+    expect(getByText(mockData.children[1].code)).toBeInTheDocument();
+  });
+});

package/src/presentation/components/atoms/Tree/index.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import * as C from './styles';
+import Icon from '../Icon';
+import { TreeItem } from 'data/mocks/mock-data';
+
+interface Props {
+  title: string;
+  content: string;
+  children?: TreeItem[];
+  onClickTitle: (titulo: string) => void;
+  onClickContent: (content: string) => void;
+}
+
+const Tree: React.FC<Props> = ({
+  title,
+  content,
+  children,
+  onClickTitle,
+  onClickContent,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <C.TreeWrapper>
+      <C.Header onClick={() => setIsOpen(!isOpen)}>
+        <Icon
+          iconName={isOpen ? 'DoNotDisturbOnSm' : 'AddCircleSm'}
+          width="16px"
+          height="16px"
+        />
+        <C.Title onClick={() => onClickTitle(title)}>{title}</C.Title>
+      </C.Header>
+      {isOpen && (
+        <C.Content>
+          <C.TreeItem>
+            <Icon
+              iconName="FiberManualRecordFill1Sm"
+              color="#4E5666"
+              width="16px"
+              height="16px"
+            />
+            <C.TreeItemTitle onClick={() => onClickContent(content)}>
+              {content}
+            </C.TreeItemTitle>
+          </C.TreeItem>
+          {children?.map((item, index) => (
+            <Tree
+              key={index}
+              title={item.code}
+              content={item.content}
+              children={item.children}
+              onClickTitle={onClickTitle}
+              onClickContent={onClickContent}
+            />
+          ))}
+        </C.Content>
+      )}
+    </C.TreeWrapper>
+  );
+};
+
+export default Tree;

package/src/presentation/components/atoms/Tree/styles.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+export const TreeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 8px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+  border-top: none;
+  background-color: #fff;
+  cursor: pointer;
+`;
+
+export const Title = styled.h5`
+  font-size: 10px;
+  font-weight: 600;
+  color: #4e5666;
+  margin-left: 8px;
+`;
+
+export const TreeItem = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 8px;
+`;
+
+export const TreeItemTitle = styled.p`
+  margin-left: 8px;
+`;

package/src/presentation/components/molecules/TabBar/styles.ts

@@ -67,6 +67,7 @@ export const TabHeader = styled.div<{
     overflow-x: hidden;
   }
   & > svg {
+    flex-shrink: 0;
     height: ${({ size }) =>
       size === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt};
     width: ${({ size }) =>
@@ -107,9 +108,7 @@ export const EmptySpace = styled.div`
   height: ${({ size }) => (size === 'Small' ? '32px' : '40px')};
   ${({ direction }) =>
     direction === 'horizontal'
-      ? css`
-          border-bottom: 1px solid ${sg.colors.neutralColors.colorNeutralSoft};
-        `
+      ? css``
       : css`
           border-left: 1px solid ${sg.colors.neutralColors.colorNeutralSoft};
         `};

package/src/presentation/components/molecules/Table/index.tsx

@@ -141,9 +141,11 @@ const Table: React.FC<TableProps> = ({
                           renderData
                         ) : (
                           <>
-                            <p>{renderData?.value}</p>
+                            <p title={renderData?.value}>{renderData?.value}</p>
                             {renderData?.subText && (
-                              <p>{renderData?.subText}</p>
+                              <p title={renderData?.subText}>
+                                {renderData?.subText}
+                              </p>
                             )}
                           </>
                         )}

package/src/presentation/components/molecules/Table/styles.ts

@@ -137,7 +137,9 @@ export const DynamicTableTd = styled.td<{ DynamicTableProps }>`
     isComponentRendered && 'center'};
   width: 100%;
   max-width: ${({ maxWidth }) => maxWidth};
-  height: ${({ size }) => (size === 'Large' ? '4rem' : '3.2rem')};
+  height: auto;
+  min-height: ${({ size }) => (size === 'Large' ? '4rem' : '3.2rem')};
+
   padding: ${({ hasSubText, size, isComponentRendered }) => {
     if (size === 'Large') {
       return hasSubText || isComponentRendered