w-design-system 0.0.34 → 0.0.36

package/dist/components/Sidebar/stories.js

@@ -6,11 +6,69 @@ const meta = {
     title: 'Components/Sidebar',
     tags: ['autodocs'],
     component: Sidebar,
+    argTypes: {
+        layout: {
+            control: 'object',
+            description: 'Array of sidebar layout',
+        },
+        currentItemId: {
+            control: 'text',
+            description: 'Current item id',
+        },
+        currentGroupId: {
+            control: 'text',
+            description: 'Current group id',
+        },
+        setLink: {
+            action: 'setLink',
+            description: 'Function to set link',
+        },
+        items: {
+            control: 'object',
+            description: 'Items data',
+        },
+        groups: {
+            control: 'object',
+            description: 'Groups data',
+        },
+        logoUrl: {
+            control: 'text',
+            description: 'Logo url',
+        },
+    },
+    args: {
+        layout: [
+            {
+                type: 'item',
+                id: 'DASHBOARD',
+            },
+            { type: 'group', id: 'group1' },
+        ],
+        currentItemId: 'DASHBOARD',
+        currentGroupId: 'DASHBOARD',
+        items: {
+            DASHBOARD: {
+                menuTitle: 'Dashboard',
+                icon: dashboardSVG,
+                link: '/dashboard',
+                disabled: true,
+            },
+        },
+        groups: {
+            group1: {
+                name: 'Group 1',
+                icon: dashboardSVG,
+                itemIds: ['DASHBOARD'],
+            },
+        },
+        logoUrl: '',
+        baseColor: '',
+    },
 };
 export default meta;
 export const Playground = {
-    render: () => {
-        return (React.createElement(Sidebar, { layout: [
+    render: args => {
+        return (React.createElement(Sidebar, Object.assign({}, args, { layout: [
                 {
                     type: 'item',
                     id: 'DASHBOARD',
@@ -29,7 +87,7 @@ export const Playground = {
                     icon: dashboardSVG,
                     itemIds: ['DASHBOARD'],
                 },
-            }, logoUrl: '' }));
+            }, logoUrl: '' })));
     },
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/Sidebar/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,SAAS,EAAE,OAAO;CACY,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,OAAO,CACH,oBAAC,OAAO,IACN,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;aAChC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,KAAK;iBAChB;aACF,EACD,aAAa,EAAE,EAAE,EACjB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1B,MAAM,EAAE;gBACN,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;iBACvB;aACF,EACD,OAAO,EAAE,EAAE,GACX,CACL,CAAA;IACH,CAAC;CACF,CAAA"}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,YAAY;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,aAAa;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,UAAU;SACxB;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,WAAW;aAChB;YACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;SAChC;QACD,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,IAAI;aACf;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;aACvB;SACF;QACD,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;KACd;CAC6B,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,oBACF,IAAI,IACR,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;aAChC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,KAAK;iBAChB;aACF,EACD,aAAa,EAAE,EAAE,EACjB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1B,MAAM,EAAE;gBACN,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;iBACvB;aACF,EACD,OAAO,EAAE,EAAE,IACX,CACH,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/components/Sidebar/styles.d.ts

@@ -1,5 +1,6 @@
 interface SidebarContainerProps {
     sidebarOpen: boolean;
+    baseColor?: string;
 }
 export declare const SidebarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SidebarContainerProps>> & string;
 export declare const SidebarScrollContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Sidebar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC7B,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,gBAAgB,0PA4B5B,CAAA;AAED,eAAO,MAAM,sBAAsB,6NAMlC,CAAA;AAED,eAAO,MAAM,6BAA6B,6NA8BzC,CAAA;AAED,eAAO,MAAM,aAAa,6NAEzB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,gBAAgB,0PA2B5B,CAAA;AAED,eAAO,MAAM,sBAAsB,6NAMlC,CAAA;AAED,eAAO,MAAM,6BAA6B,6NA8BzC,CAAA;AAED,eAAO,MAAM,aAAa,6NAEzB,CAAA"}

package/dist/components/Sidebar/styles.js

@@ -7,13 +7,12 @@ export const SidebarContainer = styled.div `
   position: relative;
   box-sizing: border-box;
   color: white;
-  background: ${theme.colors.cyan50};
   height: 100vh;
   height: 100dvh;
   padding: 16px 16px 0 16px;
   width: min-content;
   border-radius: ${({ sidebarOpen }) => sidebarOpen && '0 60px 0px 0;'};
-
+  background: ${({ baseColor }) => baseColor || theme.colors.cyan50};
   /* Mantenha o estilo do container ao passar o mouse */
   &:hover {
     &::-webkit-scrollbar {

package/dist/components/Sidebar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAMjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;;gBAOjD,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;mBAKhB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,eAAe;;;;;;;;;;;;;;;;CAgBrE,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM/C,CAAA;AAED,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BtD,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAOjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;;;;;;mBAW9C,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,eAAe;gBACtD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;CAelE,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM/C,CAAA;AAED,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BtD,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/Paginate/index.tsx

@@ -10,6 +10,7 @@ export type PaginateProps = {
   onChangePage: (page: number) => void
   onChangeItemsPerPage: (itemsPerPage: number) => void
   dropDownTop?: boolean
+  itemPerPageOptions?: number[]
 }
 
 export const Paginate = ({
@@ -18,7 +19,8 @@ export const Paginate = ({
   onChangePage,
   itemsPerPage,
   onChangeItemsPerPage,
-  dropDownTop
+  itemPerPageOptions = [],
+  dropDownTop,
 }: PaginateProps) => {
   // Se itemsPerPage for undefined, o valor default e 20
   let itemsPerPageValue = itemsPerPage || 20
@@ -58,10 +60,10 @@ export const Paginate = ({
   const minItem = (currentPage - 1) * itemsPerPageValue + 1
   const maxItem = Math.min(currentPage * itemsPerPageValue, itemCount)
 
-  const itemPerPageOptions = [10, 20, 50, 100]
-  if (itemsPerPage) itemPerPageOptions.push(itemsPerPage)
+  const itemPerPageOptionsCopy = Array.from(itemPerPageOptions)
+  if (itemsPerPage) itemPerPageOptionsCopy.push(itemsPerPage)
 
-  const itemPerPageOptionsSorted = Array.from(new Set(itemPerPageOptions)).sort((a, b) => a - b)
+  const itemPerPageOptionsSorted = Array.from(new Set(itemPerPageOptionsCopy)).sort((a, b) => a - b)
 
   return (
     <Container>
@@ -70,7 +72,7 @@ export const Paginate = ({
           className={currentPage === 1 ? 'icon-disabled' : 'icon'}
           src={chevronLeftSVG}
           width="14px"
-          onClick={() => onChangePage(currentPage - 1)}
+          onClick={() => currentPage !== 1 && onChangePage(currentPage - 1)}
         />
         {pages.map((page, index) => {
           if (page === 'elipsis') {
@@ -86,17 +88,19 @@ export const Paginate = ({
           className={currentPage === pageCount ? 'icon-disabled' : 'icon'}
           src={chevronRightSVG}
           width="14px"
-          onClick={() => onChangePage(currentPage + 1)}
+          onClick={() => currentPage !== pageCount && onChangePage(currentPage + 1)}
         />
       </ul>
       <div className="items-per-page-wrapper">
         <div className="item-per-page">Itens por página</div>
         <Select
+          className="select"
           dropDownTop={dropDownTop !== false}
           value={itemsPerPageValue.toString()}
           onOptionChange={option => {
             option && onChangeItemsPerPage(option.id)
           }}
+          disabled={itemPerPageOptions.length <= 1}
           options={itemPerPageOptionsSorted.map(count => ({
             id: count,
             text: count?.toString(),

package/src/components/Paginate/stories.tsx

@@ -15,14 +15,14 @@ const meta: Meta<PaginateProps> = {
     itemsPerPage: 10,
     onChangePage: fn(),
     onChangeItemsPerPage: fn(),
+    dropDownTop: true,
   },
-}
+} satisfies Meta<PaginateProps>
 
 export default meta
 
 const NewPaginate = (args: PaginateProps) => {
   const [currentPage, setCurrentPage] = useState(args.currentPage)
-  const [itemCount, setItemCount] = useState(args.itemCount)
   const [itemsPerPage, setItemsPerPage] = useState(args.itemsPerPage)
 
   const handleChangePage = (page: number) => {
@@ -40,7 +40,7 @@ const NewPaginate = (args: PaginateProps) => {
       <Paginate
         {...args}
         currentPage={currentPage}
-        itemCount={itemCount}
+        itemCount={args.itemCount}
         itemsPerPage={itemsPerPage}
         onChangePage={handleChangePage}
         onChangeItemsPerPage={handleChangeItemsPerPage}
@@ -54,3 +54,9 @@ export const Default: StoryObj<PaginateProps> = {
     return <NewPaginate {...args} />
   },
 }
+
+export const Bottom: StoryObj<PaginateProps> = {
+  render: args => {
+    return <NewPaginate {...args} itemPerPageOptions={[10, 50, 100]} />
+  },
+}

package/src/components/Paginate/styles.ts

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 import { theme } from '../Themes'
-import { chevronDownSVG } from '../../assets/icon'
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
@@ -51,46 +50,14 @@ export const Container = styled.div`
   .items-per-page-wrapper {
     display: flex;
     align-items: center;
-
+    width: min-content;
+    text-wrap: nowrap;
     gap: 1rem;
     font-family: 'Nunito Sans', sans-serif;
     color: ${theme.colors.shade40};
+  }
 
-    select {
-      /* styling */
-      cursor: pointer;
-      background-color: ${theme.colors.shade05};
-      background-image: url(${chevronDownSVG});
-      background-repeat: no-repeat;
-      background-size: 1rem;
-      background-position: right 1rem top calc(50% + 1px);
-      border: 1px solid ${theme.colors.shade20};
-      color: ${theme.colors.shade40};
-      border-radius: 4px;
-      display: inline-block;
-      font: inherit;
-      outline: 0;
-
-      padding: 18px 48px 14px 16px;
-
-      margin: 0;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-      -webkit-appearance: none;
-      -moz-appearance: none; /* Firefox */
-      -webkit-appearance: none; /* Safari and Chrome */
-      appearance: none;
-    }
-
-    select:hover {
-      background-color: ${theme.colors.shade10};
-      border: 1px solid ${theme.colors.shade20};
-    }
-
-    select:focus {
-      background-color: ${theme.colors.shade10};
-      border: 1px solid ${theme.colors.shade30};
-    }
+  .select {
+    min-width: 100px;
   }
 `

package/src/components/Select/index.tsx

@@ -6,7 +6,7 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState
+  useState,
 } from 'react'
 import { chevronDownSVG } from '../../assets/icon'
 import { IconWrapper } from '../IconWrapper'
@@ -46,6 +46,7 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
     selectedOption,
     value,
     dropDownWidth,
+    disabled,
     ...props
   }: PropsWithChildren<SelectProps<T>>,
   ref: React.ForwardedRef<SelectRef>,
@@ -87,11 +88,12 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
       return selectedOption.text
     }
     return ''
-  }, [value, selectedOption, options])
+  }, [value, selectedOption])
 
   return (
     <SelectWrapper {...props} ref={wrapperRef}>
       <Input
+        disabled={disabled}
         leftIcon={leftIcon}
         rightIcon={
           <>
@@ -108,7 +110,7 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
         label={label}
         value={valueComputed}
         readonly
-        onClick={() => setOpen(!open)}
+        onClick={() => !disabled && setOpen(!open)}
       />
       {open && (
         <DropdownWrapper>

package/src/components/Select/stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof Select> = {
     disabled: { control: 'boolean' },
     selectedOption: { control: 'number' },
     onOptionChange: { action: 'selectedOptionChange' },
-    
+    dropDownTop: { control: 'boolean' },
   },
 } satisfies Meta<typeof Select>
 

package/src/components/Sidebar/SidebarGroup/index.tsx

@@ -62,7 +62,7 @@ const SidebarGroup = ({
         groupOpen={groupOpen}
         onClick={onClickHandler}
       >
-        <IconWrapper src={icon} color={color} />
+        <IconWrapper src={icon} color={color} width="20px" />
         {sidebarOpen && (
           <span className="title">
             <Paragraph size="medium" heavyBod={isCurrentGroup} color={disabled ? theme.colors.shade40 : 'white'}>
@@ -75,11 +75,11 @@ const SidebarGroup = ({
             <IconWrapper
               className={`icon ${groupOpen ? 'icon-rotate' : ''}`}
               src={chevronDownSVG}
-              width="16px"
+              width="20px"
               color={theme.colors.shade30}
             />
           ) : (
-            <IconWrapper src={lockSVG} width="14px" color="white" />
+            <IconWrapper src={lockSVG} width="20px" color="white" />
           ))}
       </SidebarGroupHeaderContainer>
       {children}

package/src/components/Sidebar/SidebarGroup/styles.ts

@@ -17,7 +17,7 @@ export const SidebarGroupContainer = styled.div<SidebarGroupContainerProps>`
   border-radius: 4px;
 
   &:hover {
-    background-color: #192d53;
+    background-color: rgba(255, 255, 255, 0.1);
   }
 
   .wrapperTitle {
@@ -50,10 +50,10 @@ export const SidebarGroupHeaderContainer = styled.div<SidebarGroupContainerHeade
   align-items: center;
   min-height: ${({ groupOpen, sidebarOpen }) => (groupOpen && sidebarOpen ? '40px' : '40px')};
   ${({ groupOpen, sidebarOpen }) => groupOpen && sidebarOpen && 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)'};
-  justify-content: ${sidebarOpen => (sidebarOpen ? 'space-between' : 'center')};
+  justify-content: ${({ sidebarOpen }) => (sidebarOpen ? 'space-between' : 'center')};
   text-wrap: nowrap;
 
-  padding: 8px 12px;
+  padding: 8px 8px;
   cursor: pointer;
   height: 100%;
   gap: 24px;
@@ -64,9 +64,7 @@ export const SidebarGroupHeaderContainer = styled.div<SidebarGroupContainerHeade
     width: 100%;
   }
 
-  svg {
-    width: 20px;
-  }
+ 
 `
 
 export const LockedModal = styled.div`

package/src/components/Sidebar/SidebarItem/index.tsx

@@ -3,6 +3,7 @@ import { IconWrapper } from '../../IconWrapper'
 import { Paragraph } from '../../Paragraph'
 import { Bullet, Container } from './styles'
 import { theme } from '../../Themes'
+import { lockSVG } from '../../../assets/icon'
 
 export interface SidebarItemProps {
   disabled?: boolean
@@ -46,21 +47,24 @@ const SidebarItem = ({
       ) : (
         icon && (
           <div className="icon">
-            <IconWrapper src={icon} color={color} />
+            <IconWrapper src={icon} color={color} width='20px' />
           </div>
         )
       )}
       {sidebarOpen && (
-        <span className="title">
-          <Paragraph
-            size={!isInsideGroup ? 'medium' : 'small'}
-            /* eslint-disable-next-line no-nested-ternary */
-            color={disabled ? theme.colors.shade40 : !isInsideGroup ? 'white' : theme.colors.shade10}
-            heavyBod={isCurrentItem}
-          >
-            {title}
-          </Paragraph>
-        </span>
+        <>
+          <span className="title">
+            <Paragraph
+              size={!isInsideGroup ? 'medium' : 'small'}
+              /* eslint-disable-next-line no-nested-ternary */
+              color={disabled ? theme.colors.shade40 : !isInsideGroup ? 'white' : theme.colors.shade10}
+              heavyBod={isCurrentItem}
+            >
+              {title}
+            </Paragraph>
+          </span>
+          {disabled && <IconWrapper src={lockSVG} width="20px" color="white" />}
+        </>
       )}
     </Container>
   )

package/src/components/Sidebar/SidebarItem/styles.ts

@@ -18,9 +18,11 @@ export const Container = styled.div<SidebarItemContainerProps>`
   color: ${({ disabled }) => (disabled ? 'rgba(255,255,255,0.4)' : '#fff')};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   border-radius: ${({ isInsideGroup }) => !isInsideGroup && '4px'};
+
   &:hover {
-    background-color: #192d53;
+    background-color: rgba(255, 255, 255, 0.1);
   }
+
   &:not(:last-child) {
     border-bottom: ${({ isInsideGroup }) => isInsideGroup && '1px solid rgba(255, 255, 255, 0.1)'};
   }

package/src/components/Sidebar/SidebarLogo/index.tsx

@@ -8,11 +8,12 @@ export interface SidebarLogoProps {
   logoOpacity?: number
   setSidebarOpen: (value: boolean) => void
   logoUrl: string
+  baseColor?: string
 }
 
-const SidebarLogo = ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl }: SidebarLogoProps) => {
+const SidebarLogo = ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl, baseColor }: SidebarLogoProps) => {
   return (
-    <SidebarLogoContainer logoUrl={logoUrl} logoOpacity={logoOpacity} sidebarOpen={sidebarOpen}>
+    <SidebarLogoContainer logoUrl={logoUrl} logoOpacity={logoOpacity} sidebarOpen={sidebarOpen} baseColor={baseColor}>
       <button type="button" onClick={() => setSidebarOpen(!sidebarOpen)} className="close" aria-label="Fechar menu">
         <IconWrapper src={sidebarOpen ? chevronRightSVG : chevronLeftSVG} color="#fff" width="12px" height="12px" />
       </button>

package/src/components/Sidebar/SidebarLogo/styles.ts

@@ -1,9 +1,11 @@
 import styled from 'styled-components'
+import { theme } from '../../Themes'
 
 interface SidebarLogoContainerProps {
   logoOpacity?: number
   sidebarOpen: boolean
   logoUrl: string
+  baseColor?: string
 }
 
 export const SidebarLogoContainer = styled.div<SidebarLogoContainerProps>`
@@ -18,7 +20,7 @@ export const SidebarLogoContainer = styled.div<SidebarLogoContainerProps>`
     height: 40px;
 
     background: url(${({ logoUrl }) => logoUrl});
-    background-size: ${({ sidebarOpen: open }) => (open ? `202px 40px` : '141px 28px')};
+    background-size: ${({ sidebarOpen }) => (sidebarOpen ? `202px 40px` : '141px 28px')};
     background-repeat: no-repeat;
     background-position: -8px 0px;
 
@@ -37,7 +39,7 @@ export const SidebarLogoContainer = styled.div<SidebarLogoContainerProps>`
     height: var(--height);
     width: var(--width);
 
-    background: #001640;
+    background: ${({ baseColor }) => baseColor || theme.colors.cyan50};
     color: #fff;
 
     border-radius: 0 var(--width) var(--width) 0;

package/src/components/Sidebar/index.tsx

@@ -44,6 +44,7 @@ export interface SidebarProps {
   groups: Record<string, SidebarGroupData>
   logoUrl: string
   logoOpacity?: number
+  baseColor?: string
 }
 
 export const Sidebar = ({
@@ -55,22 +56,23 @@ export const Sidebar = ({
   items,
   logoOpacity,
   groups,
+  baseColor,
 }: SidebarProps) => {
   const [sidebarOpen, setSidebarOpen] = useState(true)
-
   const sidebarItemClickHandler = (itemId: string) => {
     const item = items[itemId]
     const link = item?.link
     if (link) setLink(link)
   }
-
+  console.log(baseColor)
   return (
-    <SidebarContainer sidebarOpen={sidebarOpen}>
+    <SidebarContainer sidebarOpen={sidebarOpen} baseColor={baseColor}>
       <SidebarLogo
         logoUrl={logoUrl}
         sidebarOpen={sidebarOpen}
         setSidebarOpen={setSidebarOpen}
         logoOpacity={logoOpacity}
+        baseColor={baseColor}
       />
       <SidebarScrollWrapperContainer>
         <SidebarScrollContainer>