@quen-ui/components 1.0.0 → 1.1.0

package/dist/Button/styles.cjs.js

@@ -6,21 +6,17 @@ const getBackground = (theme, view = "primary", isDisabled) => {
   switch (view) {
     case "secondary":
       return styled.css`
-        background: ${theme.components.Button.secondaryBackground};
-        color: ${theme.components.Button.color};
+        background: transparent;
+        border: 1px solid ${theme.components.Button.secondaryBackground};
 
         &:hover {
-          background: ${polished.darken(
-        0.1,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][7]};
+          border: 1px solid ${theme.colors[theme.primaryColor][7]};
         }
 
         &:active {
-          background: ${polished.darken(
-        0.2,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][9]};
+          border: 1px solid ${theme.colors[theme.primaryColor][9]};
         }
       `;
     case "danger":

package/dist/Button/styles.es.js

@@ -4,21 +4,17 @@ const getBackground = (theme, view = "primary", isDisabled) => {
   switch (view) {
     case "secondary":
       return css`
-        background: ${theme.components.Button.secondaryBackground};
-        color: ${theme.components.Button.color};
+        background: transparent;
+        border: 1px solid ${theme.components.Button.secondaryBackground};
 
         &:hover {
-          background: ${darken(
-        0.1,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][7]};
+          border: 1px solid ${theme.colors[theme.primaryColor][7]};
         }
 
         &:active {
-          background: ${darken(
-        0.2,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][9]};
+          border: 1px solid ${theme.colors[theme.primaryColor][9]};
         }
       `;
     case "danger":

package/dist/Calendar/Calendar.cjs.js

@@ -48,9 +48,11 @@ const Calendar = ({
     }
   }, [level]);
   React.useEffect(() => {
-    setInternalSingleDate(null);
-    setInternalEndDate(null);
-    setInternalStartDate(null);
+    if (typeof range !== "undefined") {
+      setInternalSingleDate(null);
+      setInternalEndDate(null);
+      setInternalStartDate(null);
+    }
   }, [range]);
   const [currentMonth, setCurrentMonth] = React.useState(/* @__PURE__ */ new Date());
   const levelTitle = React.useMemo(() => {

package/dist/Calendar/Calendar.es.js

@@ -47,9 +47,11 @@ const Calendar$1 = ({
     }
   }, [level]);
   useEffect(() => {
-    setInternalSingleDate(null);
-    setInternalEndDate(null);
-    setInternalStartDate(null);
+    if (typeof range !== "undefined") {
+      setInternalSingleDate(null);
+      setInternalEndDate(null);
+      setInternalStartDate(null);
+    }
   }, [range]);
   const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
   const levelTitle = useMemo(() => {

package/dist/Calendar/styles.cjs.js

@@ -59,7 +59,6 @@ const DayStyled = styled(Button).attrs({ view: "icon" }).withConfig({
 
   ${({ theme, isSelected, isCurrentMonth }) => {
   const { secondaryColor } = theme.components.Calendar;
-  console.log(secondaryColor);
   return styled.css`
       color: ${isSelected ? "#fff" : isCurrentMonth ? theme.textColor : secondaryColor};
     `;

package/dist/Calendar/styles.es.js

@@ -57,7 +57,6 @@ const DayStyled = styled(Button).attrs({ view: "icon" }).withConfig({
 
   ${({ theme, isSelected, isCurrentMonth }) => {
   const { secondaryColor } = theme.components.Calendar;
-  console.log(secondaryColor);
   return css`
       color: ${isSelected ? "#fff" : isCurrentMonth ? theme.textColor : secondaryColor};
     `;

package/dist/Card/Card.cjs.js

@@ -4,6 +4,7 @@ const Title = require("../typography/Title/Title.cjs.js");
 const styles = require("./styles.cjs.js");
 const Button = require("../Button/Button.cjs.js");
 const Divider = require("../Divider/Divider.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
 const Card = ({
   title,
   children,
@@ -18,14 +19,17 @@ const Card = ({
   leftContent,
   style,
   onClickExtra,
+  shadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, style, shadow, children: [
     cover,
     title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(styles.CardHeaderStyled, { size, className: classNameHeader, children: [
-        leftContent,
-        /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs(styles.CardHeaderStyled, { size, className: classNameHeader, "data-testid": "card-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "m", align: "center", children: [
+          leftContent,
+          /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title })
+        ] }),
         extra && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "link", size: "s", onClick: onClickExtra, children: extra })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })

package/dist/Card/Card.d.ts

@@ -1,3 +1,3 @@
 import { ICardProps } from './types';
-declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, style, onClickExtra, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, style, onClickExtra, shadow, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/Card/Card.es.js

@@ -3,6 +3,7 @@ import Title from "../typography/Title/Title.es.js";
 import { CardStyled, CardHeaderStyled, CardContentStyled, CardActionsStyled } from "./styles.es.js";
 import Button from "../Button/Button.es.js";
 import Divider from "../Divider/Divider.es.js";
+import Flex from "../Flex/Flex.es.js";
 const Card = ({
   title,
   children,
@@ -17,14 +18,17 @@ const Card = ({
   leftContent,
   style,
   onClickExtra,
+  shadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, style, children: [
+  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, style, shadow, children: [
     cover,
     title && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(CardHeaderStyled, { size, className: classNameHeader, children: [
-        leftContent,
-        /* @__PURE__ */ jsx(Title, { size, children: title }),
+      /* @__PURE__ */ jsxs(CardHeaderStyled, { size, className: classNameHeader, "data-testid": "card-header", children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: "m", align: "center", children: [
+          leftContent,
+          /* @__PURE__ */ jsx(Title, { size, children: title })
+        ] }),
         extra && /* @__PURE__ */ jsx(Button, { view: "link", size: "s", onClick: onClickExtra, children: extra })
       ] }),
       /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })

package/dist/Card/styles.cjs.js

@@ -26,10 +26,16 @@ const getSizing = (size) => {
       `;
   }
 };
-const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
+const CardStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["shadow"].includes(prop)
+}).attrs({ className: "quen-ui__card" })`
   border-radius: ${({ theme }) => theme.components.Card.radius};
   border: 1px solid ${({ theme }) => theme.components.Card.borderColor};
-  max-width: 350px;
+  width: 350px;
+  
+  ${({ shadow, theme }) => shadow && styled.css`
+    box-shadow: ${theme.components.Card.shadow};
+  `};
 `;
 const CardHeaderStyled = styled.div`
   ${({ size }) => getSizing(size)};
@@ -46,7 +52,7 @@ const CardContentStyled = styled.div`
 const CardActionsStyled = styled.div`
   ${({ size }) => getSizing(size)};
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 exports.CardActionsStyled = CardActionsStyled;

package/dist/Card/styles.d.ts

@@ -1,5 +1,7 @@
 import { TQuenSize } from '../types/size';
-export declare const CardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const CardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
+    shadow?: boolean;
+}>> & string;
 export declare const CardHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size: TQuenSize;
 }>> & string;

package/dist/Card/styles.es.js

@@ -24,10 +24,16 @@ const getSizing = (size) => {
       `;
   }
 };
-const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
+const CardStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["shadow"].includes(prop)
+}).attrs({ className: "quen-ui__card" })`
   border-radius: ${({ theme }) => theme.components.Card.radius};
   border: 1px solid ${({ theme }) => theme.components.Card.borderColor};
-  max-width: 350px;
+  width: 350px;
+  
+  ${({ shadow, theme }) => shadow && css`
+    box-shadow: ${theme.components.Card.shadow};
+  `};
 `;
 const CardHeaderStyled = styled.div`
   ${({ size }) => getSizing(size)};
@@ -44,7 +50,7 @@ const CardContentStyled = styled.div`
 const CardActionsStyled = styled.div`
   ${({ size }) => getSizing(size)};
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 export {

package/dist/Card/types.d.ts

@@ -24,5 +24,7 @@ export interface ICardProps {
     leftContent?: React.ReactNode;
     style?: React.CSSProperties;
     onClickExtra?: () => void;
+    /** Show shadow */
+    shadow?: boolean;
     [key: string]: any;
 }

package/dist/Drawer/Drawer.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const require$$2 = require("react-dom");
+const reactDom = require("react-dom");
 const reactTransitionState = require("react-transition-state");
 const hooks = require("@quen-ui/hooks");
 const styles = require("./styles.cjs.js");
@@ -41,7 +41,7 @@ const Drawer = ({
     setContainer(container2);
   }, []);
   if (state.isEnter && container) {
-    return require$$2.createPortal(
+    return reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(styles.DrawerWrapper, { zIndex, children: /* @__PURE__ */ jsxRuntime.jsxs(
         styles.DrawerStyled,
         {

package/dist/Dropdown/Dropdown.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const require$$2 = require("react-dom");
+const reactDom = require("react-dom");
 const reactTransitionState = require("react-transition-state");
 const hooks = require("@quen-ui/hooks");
 const styles = require("./styles.cjs.js");
@@ -75,7 +75,7 @@ const Dropdown = ({
   if (disabled) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && require$$2.createPortal(
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownPortal,
       {

package/dist/Form/Form.cjs.js

@@ -40,7 +40,7 @@ const Form = ({
   };
   React.useEffect(() => {
     form.setSubmitCallback(() => handleSubmit);
-  }, []);
+  }, [form.getFieldsValue, form.getFieldsError]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormContext.Provider,
     {

package/dist/Form/Form.es.js

@@ -38,7 +38,7 @@ const Form = ({
   };
   useEffect(() => {
     form.setSubmitCallback(() => handleSubmit);
-  }, []);
+  }, [form.getFieldsValue, form.getFieldsError]);
   return /* @__PURE__ */ jsx(
     FormContext.Provider,
     {

package/dist/Image/styles.cjs.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Button = require("../Button/Button.cjs.js");
-const ImageContainer = styled.div`
+const ImageContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "height", "preview"].includes(prop)
+})`
   position: relative;
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
   height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};

package/dist/Image/styles.es.js

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import Button from "../Button/Button.es.js";
-const ImageContainer = styled.div`
+const ImageContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "height", "preview"].includes(prop)
+})`
   position: relative;
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
   height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};

package/dist/Layout/Footer.cjs.js

@@ -1,7 +1,16 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const styles = require("./styles.cjs.js");
+const Layout = require("./Layout.cjs.js");
 const Footer = ({ children }) => {
+  const { setIsFooter } = Layout.useLayout();
+  React.useEffect(() => {
+    setIsFooter(true);
+    return () => {
+      setIsFooter(false);
+    };
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(styles.FooterStyled, { children });
 };
 module.exports = Footer;

package/dist/Layout/Footer.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { ILayoutFooterProps } from './types';
-declare const Footer: ({ children }: ILayoutFooterProps) => React.ReactElement;
+declare const Footer: ({ children }: ILayoutFooterProps) => import("react/jsx-runtime").JSX.Element;
 export default Footer;

package/dist/Layout/Footer.es.js

@@ -1,6 +1,15 @@
 import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { FooterStyled } from "./styles.es.js";
+import { useLayout } from "./Layout.es.js";
 const Footer = ({ children }) => {
+  const { setIsFooter } = useLayout();
+  useEffect(() => {
+    setIsFooter(true);
+    return () => {
+      setIsFooter(false);
+    };
+  }, []);
   return /* @__PURE__ */ jsx(FooterStyled, { children });
 };
 export {

package/dist/Layout/Header.cjs.js

@@ -19,10 +19,18 @@ const Header = ({
 }) => {
   const { mobile, toggleSidebar, sidebarOpen } = Layout.useLayout();
   return /* @__PURE__ */ jsxRuntime.jsxs(styles.HeaderStyled, { className, style, height, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "s", align: "center", className: "quen-ui__layout-header__logo-wrapper", children: [
-      mobile && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconClose, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconLines, {}) }),
-      logo
-    ] }),
+    (logo || mobile) && /* @__PURE__ */ jsxRuntime.jsxs(
+      Flex,
+      {
+        gap: "s",
+        align: "center",
+        className: "quen-ui__layout-header__logo-wrapper",
+        children: [
+          mobile && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconClose, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconLines, {}) }),
+          logo
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Flex,
       {

package/dist/Layout/Header.es.js

@@ -18,10 +18,18 @@ const Header = ({
 }) => {
   const { mobile, toggleSidebar, sidebarOpen } = useLayout();
   return /* @__PURE__ */ jsxs(HeaderStyled, { className, style, height, children: [
-    /* @__PURE__ */ jsxs(Flex, { gap: "s", align: "center", className: "quen-ui__layout-header__logo-wrapper", children: [
-      mobile && /* @__PURE__ */ jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsx(SvgIconClose, {}) : /* @__PURE__ */ jsx(SvgIconLines, {}) }),
-      logo
-    ] }),
+    (logo || mobile) && /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: "s",
+        align: "center",
+        className: "quen-ui__layout-header__logo-wrapper",
+        children: [
+          mobile && /* @__PURE__ */ jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsx(SvgIconClose, {}) : /* @__PURE__ */ jsx(SvgIconLines, {}) }),
+          logo
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Flex,
       {

package/dist/Layout/Layout.cjs.js

@@ -6,11 +6,14 @@ const styles = require("./styles.cjs.js");
 const LayoutContext = React.createContext(null);
 const Layout = ({
   children,
-  breakpoint = 768
+  breakpoint = 768,
+  className,
+  style
 }) => {
   const [mobile, setMobile] = React.useState(false);
   const [sidebarOpen, setSidebarOpen] = React.useState(false);
   const [sliderCollapsed, setSliderCollapsed] = React.useState(false);
+  const [isFooter, setIsFooter] = React.useState(false);
   React.useEffect(() => {
     const checkScreenSize = () => {
       setMobile(window.innerWidth <= breakpoint);
@@ -32,9 +35,11 @@ const Layout = ({
         sidebarOpen,
         sliderCollapsed,
         toggleSidebar,
-        toggleSliderCollapse
+        toggleSliderCollapse,
+        setIsFooter,
+        isFooter
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(styles.LayoutStyled, { breakpoint, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(styles.LayoutStyled, { breakpoint, isFooter, className, style, children })
     }
   );
 };

package/dist/Layout/Layout.d.ts

@@ -1,5 +1,5 @@
 import { default as React, PropsWithChildren } from 'react';
 import { ILayoutProps, ILayoutContextProps } from './types';
-declare const Layout: ({ children, breakpoint }: PropsWithChildren<ILayoutProps>) => React.ReactNode;
+declare const Layout: ({ children, breakpoint, className, style }: PropsWithChildren<ILayoutProps>) => React.ReactNode;
 export declare const useLayout: () => ILayoutContextProps;
 export default Layout;

package/dist/Layout/Layout.es.js

@@ -4,11 +4,14 @@ import { LayoutStyled } from "./styles.es.js";
 const LayoutContext = createContext(null);
 const Layout = ({
   children,
-  breakpoint = 768
+  breakpoint = 768,
+  className,
+  style
 }) => {
   const [mobile, setMobile] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sliderCollapsed, setSliderCollapsed] = useState(false);
+  const [isFooter, setIsFooter] = useState(false);
   useEffect(() => {
     const checkScreenSize = () => {
       setMobile(window.innerWidth <= breakpoint);
@@ -30,9 +33,11 @@ const Layout = ({
         sidebarOpen,
         sliderCollapsed,
         toggleSidebar,
-        toggleSliderCollapse
+        toggleSliderCollapse,
+        setIsFooter,
+        isFooter
       },
-      children: /* @__PURE__ */ jsx(LayoutStyled, { breakpoint, children })
+      children: /* @__PURE__ */ jsx(LayoutStyled, { breakpoint, isFooter, className, style, children })
     }
   );
 };

package/dist/Layout/Sidebar.cjs.js

@@ -14,7 +14,7 @@ const Sidebar = ({
   classNameMenuItem,
   activeMenuKeys
 }) => {
-  const { mobile, toggleSidebar, sidebarOpen } = Layout.useLayout();
+  const { mobile, toggleSidebar, sidebarOpen, isFooter } = Layout.useLayout();
   if (mobile) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open: sidebarOpen, onClose: toggleSidebar, title: titleDrawer, children: [
       children,
@@ -33,6 +33,7 @@ const Sidebar = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.SidebarStyled,
     {
+      isFooter,
       collapsed,
       collapsible,
       className,

package/dist/Layout/Sidebar.es.js

@@ -13,7 +13,7 @@ const Sidebar = ({
   classNameMenuItem,
   activeMenuKeys
 }) => {
-  const { mobile, toggleSidebar, sidebarOpen } = useLayout();
+  const { mobile, toggleSidebar, sidebarOpen, isFooter } = useLayout();
   if (mobile) {
     return /* @__PURE__ */ jsxs(Drawer, { open: sidebarOpen, onClose: toggleSidebar, title: titleDrawer, children: [
       children,
@@ -32,6 +32,7 @@ const Sidebar = ({
   return /* @__PURE__ */ jsxs(
     SidebarStyled,
     {
+      isFooter,
       collapsed,
       collapsible,
       className,

package/dist/Layout/styles.cjs.js

@@ -18,6 +18,7 @@ const HeaderStyled = styled.styled.header.withConfig({
 
   display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 
   background: ${({ theme }) => theme.components.Layout.headerBackground};
 
@@ -34,18 +35,19 @@ const FooterStyled = styled.styled.footer`
   grid-area: footer;
 `;
 const SidebarStyled = styled.styled.aside.withConfig({
-  shouldForwardProp: (prop) => !["isMobile", "isOpen", "isCollapsed", "collapsedWidth"].includes(prop)
+  shouldForwardProp: (prop) => !["isMobile", "isOpen", "isCollapsed", "collapsedWidth", "isFooter"].includes(prop)
 })`
   grid-area: slider;
   min-width: ${({ collapsible, collapsed, collapsedWidth }) => collapsible && collapsed ? collapsedWidth : "250px"};
   background: ${({ theme }) => theme.components.Layout.sidebarBackground};
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-right: 1px solid ${({ theme }) => theme.components.Layout.borderColor};
   position: relative;
   overflow: auto;
   padding: ${({ theme }) => theme.space.xs};
   flex-direction: column;
   display: flex;
-  height: calc(100vh - 87px);
+  height: calc(100vh - ${({ isFooter }) => isFooter ? 87 : 53}px);
 
   ${({ mobile }) => mobile && styled.css`
       position: fixed;
@@ -68,7 +70,7 @@ const ContentStyled = styled.styled.main`
   height: 100vh;
 `;
 const LayoutStyled = styled.styled.div.withConfig({
-  shouldForwardProp: (prop) => !["breakpoint"].includes(prop)
+  shouldForwardProp: (prop) => !["breakpoint", "isFooter"].includes(prop)
 })`
   display: grid;
   min-height: 100vh;
@@ -87,7 +89,7 @@ const LayoutStyled = styled.styled.div.withConfig({
 
   &:has(${HeaderStyled}) {
     ${ContentStyled} {
-      height: calc(100vh - 71px);
+      height: calc(100vh - ${({ isFooter }) => isFooter ? 71 : 56}px);
     }
   }
 `;

package/dist/Layout/styles.d.ts

@@ -10,10 +10,12 @@ export declare const SidebarStyled: import('styled-components/dist/types').IStyl
     collapsible?: boolean;
     collapsed?: boolean;
     collapsedWidth?: number;
+    isFooter: boolean;
 }>> & string;
 export declare const ContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const LayoutStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     breakpoint: number;
+    isFooter: boolean;
 }>> & string;
 export declare const OverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SidebarMenuStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').IMenuProps<Record<string, any>>, never>> & string & Omit<(<Item extends Record<string, any> = import('..').IMenuDefaultItem>(props: import('..').IMenuProps<Item>) => import("react/jsx-runtime").JSX.Element), keyof import('react').Component<any, {}, any>>;

package/dist/Layout/styles.es.js

@@ -16,6 +16,7 @@ const HeaderStyled = styled.header.withConfig({
 
   display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 
   background: ${({ theme }) => theme.components.Layout.headerBackground};
 
@@ -32,18 +33,19 @@ const FooterStyled = styled.footer`
   grid-area: footer;
 `;
 const SidebarStyled = styled.aside.withConfig({
-  shouldForwardProp: (prop) => !["isMobile", "isOpen", "isCollapsed", "collapsedWidth"].includes(prop)
+  shouldForwardProp: (prop) => !["isMobile", "isOpen", "isCollapsed", "collapsedWidth", "isFooter"].includes(prop)
 })`
   grid-area: slider;
   min-width: ${({ collapsible, collapsed, collapsedWidth }) => collapsible && collapsed ? collapsedWidth : "250px"};
   background: ${({ theme }) => theme.components.Layout.sidebarBackground};
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-right: 1px solid ${({ theme }) => theme.components.Layout.borderColor};
   position: relative;
   overflow: auto;
   padding: ${({ theme }) => theme.space.xs};
   flex-direction: column;
   display: flex;
-  height: calc(100vh - 87px);
+  height: calc(100vh - ${({ isFooter }) => isFooter ? 87 : 53}px);
 
   ${({ mobile }) => mobile && css`
       position: fixed;
@@ -66,7 +68,7 @@ const ContentStyled = styled.main`
   height: 100vh;
 `;
 const LayoutStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["breakpoint"].includes(prop)
+  shouldForwardProp: (prop) => !["breakpoint", "isFooter"].includes(prop)
 })`
   display: grid;
   min-height: 100vh;
@@ -85,7 +87,7 @@ const LayoutStyled = styled.div.withConfig({
 
   &:has(${HeaderStyled}) {
     ${ContentStyled} {
-      height: calc(100vh - 71px);
+      height: calc(100vh - ${({ isFooter }) => isFooter ? 71 : 56}px);
     }
   }
 `;