w-design-system 0.0.35 → 0.0.36

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

@@ -11,7 +11,7 @@ export const SidebarGroupContainer = styled.div `
   border-radius: 4px;
 
   &:hover {
-    background-color: #192d53;
+    background-color: rgba(255, 255, 255, 0.1);
   }
 
   .wrapperTitle {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/styles.ts"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,eAAO,MAAM,SAAS,8PAyCrB,CAAA;AAED,eAAO,MAAM,MAAM,6NAiBlB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/styles.ts"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,eAAO,MAAM,SAAS,8PA2CrB,CAAA;AAED,eAAO,MAAM,MAAM,6NAiBlB,CAAA"}

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

@@ -10,9 +10,11 @@ export const Container = styled.div `
   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/dist/components/Sidebar/SidebarItem/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAStC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA2B;;qBAEzC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;;WAMzE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC;YAC9D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;mBAC7C,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,IAAI,KAAK;;;;;qBAK5C,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,oCAAoC;;;;;cAKnF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBjE,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB/B,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAStC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA2B;;qBAEzC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;;WAMzE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC;YAC9D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;mBAC7C,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,IAAI,KAAK;;;;;;;qBAO5C,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,oCAAoC;;;;;cAKnF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBjE,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB/B,CAAA"}

package/dist/components/Sidebar/SidebarLogo/index.d.ts

@@ -4,7 +4,8 @@ export interface SidebarLogoProps {
     logoOpacity?: number;
     setSidebarOpen: (value: boolean) => void;
     logoUrl: string;
+    baseColor?: string;
 }
-declare const SidebarLogo: ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl }: SidebarLogoProps) => React.JSX.Element;
+declare const SidebarLogo: ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl, baseColor }: SidebarLogoProps) => React.JSX.Element;
 export default SidebarLogo;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/SidebarLogo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,WAAW,0DAA2D,gBAAgB,sBAS3F,CAAA;AACD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,qEAAsE,gBAAgB,sBAStG,CAAA;AACD,eAAe,WAAW,CAAA"}

package/dist/components/Sidebar/SidebarLogo/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { chevronLeftSVG, chevronRightSVG } from '../../../assets/icon';
 import { IconWrapper } from '../../IconWrapper';
 import { SidebarLogoContainer } from './styles';
-const SidebarLogo = ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl }) => {
-    return (React.createElement(SidebarLogoContainer, { logoUrl: logoUrl, logoOpacity: logoOpacity, sidebarOpen: sidebarOpen },
+const SidebarLogo = ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl, baseColor }) => {
+    return (React.createElement(SidebarLogoContainer, { logoUrl: logoUrl, logoOpacity: logoOpacity, sidebarOpen: sidebarOpen, baseColor: baseColor },
         React.createElement("button", { type: "button", onClick: () => setSidebarOpen(!sidebarOpen), className: "close", "aria-label": "Fechar menu" },
             React.createElement(IconWrapper, { src: sidebarOpen ? chevronRightSVG : chevronLeftSVG, color: "#fff", width: "12px", height: "12px" })),
         React.createElement("div", { className: "logo" })));

package/dist/components/Sidebar/SidebarLogo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAS/C,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAoB,EAAE,EAAE;IAC9F,OAAO,CACL,oBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;QACxF,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,EAAC,OAAO,gBAAY,aAAa;YAC3G,oBAAC,WAAW,IAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CACrG;QACT,6BAAK,SAAS,EAAC,MAAM,GAAG,CACH,CACxB,CAAA;AACH,CAAC,CAAA;AACD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAU/C,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAoB,EAAE,EAAE;IACzG,OAAO,CACL,oBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS;QAC9G,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,EAAC,OAAO,gBAAY,aAAa;YAC3G,oBAAC,WAAW,IAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CACrG;QACT,6BAAK,SAAS,EAAC,MAAM,GAAG,CACH,CACxB,CAAA;AACH,CAAC,CAAA;AACD,eAAe,WAAW,CAAA"}

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

@@ -2,6 +2,7 @@ interface SidebarLogoContainerProps {
     logoOpacity?: number;
     sidebarOpen: boolean;
     logoUrl: string;
+    baseColor?: string;
 }
 export declare const SidebarLogoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SidebarLogoContainerProps>> & string;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/styles.ts"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,oBAAoB,8PA4ChC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/styles.ts"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,oBAAoB,8PA4ChC,CAAA"}

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { theme } from '../../Themes';
 export const SidebarLogoContainer = styled.div `
   position: relative;
 
@@ -11,7 +12,7 @@ export const SidebarLogoContainer = styled.div `
     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;
 
@@ -30,7 +31,7 @@ export const SidebarLogoContainer = styled.div `
     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/dist/components/Sidebar/SidebarLogo/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAQtC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;;;;;;;;sBAWnD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;uBACvB,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;;;;eAIvE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnD,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarLogo/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AASpC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;;;;;;;;sBAWnD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;uBACvB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;;;;eAIxE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,CAAC;;;;;;;;;;;;;;;kBAelC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;CAapE,CAAA"}

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

@@ -32,6 +32,7 @@ export interface SidebarProps {
     groups: Record<string, SidebarGroupData>;
     logoUrl: string;
     logoOpacity?: number;
+    baseColor?: string;
 }
-export declare const Sidebar: ({ logoUrl, layout, currentItemId, currentGroupId, setLink, items, logoOpacity, groups, }: SidebarProps) => React.JSX.Element;
+export declare const Sidebar: ({ logoUrl, layout, currentItemId, currentGroupId, setLink, items, logoOpacity, groups, baseColor, }: SidebarProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,2BAA2B,CAAC,EAAE,CAAA;IAChG,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,OAAO,6FASjB,YAAY,sBAqEd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,2BAA2B,CAAC,EAAE,CAAA;IAChG,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,OAAO,wGAUjB,YAAY,sBAqEd,CAAA"}

package/dist/components/Sidebar/index.js

@@ -4,7 +4,7 @@ import SidebarItem from './SidebarItem';
 import SidebarLogo from './SidebarLogo';
 import React from 'react';
 import { SidebarContainer, SidebarScrollContainer, SidebarScrollWrapperContainer, SidebarSpacer } from './styles';
-export const Sidebar = ({ logoUrl, layout, currentItemId, currentGroupId, setLink, items, logoOpacity, groups, }) => {
+export const Sidebar = ({ logoUrl, layout, currentItemId, currentGroupId, setLink, items, logoOpacity, groups, baseColor, }) => {
     const [sidebarOpen, setSidebarOpen] = useState(true);
     const sidebarItemClickHandler = (itemId) => {
         const item = items[itemId];
@@ -12,8 +12,9 @@ export const Sidebar = ({ logoUrl, layout, currentItemId, currentGroupId, setLin
         if (link)
             setLink(link);
     };
-    return (React.createElement(SidebarContainer, { sidebarOpen: sidebarOpen },
-        React.createElement(SidebarLogo, { logoUrl: logoUrl, sidebarOpen: sidebarOpen, setSidebarOpen: setSidebarOpen, logoOpacity: logoOpacity }),
+    console.log(baseColor);
+    return (React.createElement(SidebarContainer, { sidebarOpen: sidebarOpen, baseColor: baseColor },
+        React.createElement(SidebarLogo, { logoUrl: logoUrl, sidebarOpen: sidebarOpen, setSidebarOpen: setSidebarOpen, logoOpacity: logoOpacity, baseColor: baseColor }),
         React.createElement(SidebarScrollWrapperContainer, null,
             React.createElement(SidebarScrollContainer, null, layout
                 .map((item, index) => (Object.assign({ id: index, disabled: undefined }, item)))

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAKC,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAiCxB,CAAA"}
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CA8DC,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAkCxB,CAAA"}

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',
@@ -21,7 +79,7 @@ export const Playground = {
                     menuTitle: 'Dashboard',
                     icon: dashboardSVG,
                     link: '/dashboard',
-                    disabled: true,
+                    disabled: false,
                 },
             }, currentItemId: '', currentGroupId: '', setLink: action('setLink'), groups: {
                 group1: {
@@ -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,IAAI;iBACf;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.35",
+  "version": "0.0.36",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

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 {

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>

package/src/components/Sidebar/stories.tsx

@@ -7,8 +7,65 @@ import { dashboardSVG } from '../../assets/icon'
 const meta: Meta<typeof Sidebar> = {
   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: '',
+  },
 } satisfies Meta<typeof Sidebar>
 
 export default meta
@@ -16,36 +73,37 @@ export default meta
 type Story = StoryObj<typeof Sidebar>
 
 export const Playground: Story = {
-  render: () => {
+  render: args => {
     return (
-        <Sidebar
-          layout={[
-            {
-              type: 'item',
-              id: 'DASHBOARD',
-            },
-            { type: 'group', id: 'group1' },
-          ]}
-          items={{
-            DASHBOARD: {
-              menuTitle: 'Dashboard',
-              icon: dashboardSVG,
-              link: '/dashboard',
-              disabled: true,
-            },
-          }}
-          currentItemId={''}
-          currentGroupId={''}
-          setLink={action('setLink')}
-          groups={{
-            group1: {
-              name: 'Group 1',
-              icon: dashboardSVG,
-              itemIds: ['DASHBOARD'],
-            },
-          }}
-          logoUrl={''}
-        />
+      <Sidebar
+        {...args}
+        layout={[
+          {
+            type: 'item',
+            id: 'DASHBOARD',
+          },
+          { type: 'group', id: 'group1' },
+        ]}
+        items={{
+          DASHBOARD: {
+            menuTitle: 'Dashboard',
+            icon: dashboardSVG,
+            link: '/dashboard',
+            disabled: false,
+          },
+        }}
+        currentItemId={''}
+        currentGroupId={''}
+        setLink={action('setLink')}
+        groups={{
+          group1: {
+            name: 'Group 1',
+            icon: dashboardSVG,
+            itemIds: ['DASHBOARD'],
+          },
+        }}
+        logoUrl={''}
+      />
     )
   },
 }

package/src/components/Sidebar/styles.ts

@@ -3,6 +3,7 @@ import { theme } from '../Themes'
 
 interface SidebarContainerProps {
   sidebarOpen: boolean
+  baseColor?: string
 }
 
 export const SidebarContainer = styled.div<SidebarContainerProps>`
@@ -12,13 +13,12 @@ export const SidebarContainer = styled.div<SidebarContainerProps>`
   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 {