@quen-ui/components 1.0.1 → 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/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);
     }
   }
 `;

package/dist/Layout/types.d.ts

@@ -11,6 +11,8 @@ export interface ILayoutContextProps {
     toggleSidebar: () => void;
     /** Toggles desktop sidebar collapse state */
     toggleSliderCollapse: () => void;
+    setIsFooter: (isFooter: boolean) => void;
+    isFooter: boolean;
 }
 export interface ILayoutHeaderProps {
     /** Custom CSS classes */
@@ -30,6 +32,10 @@ export interface ILayoutHeaderProps {
 export interface ILayoutProps {
     /**	Viewport width (px) for mobile/desktop switch */
     breakpoint?: number;
+    /** Custom CSS classes */
+    className?: string;
+    /**	Inline styles */
+    style?: React.CSSProperties;
 }
 export interface ILayoutSidebarProps {
     /** Desktop collapsed state */

package/dist/Menu/MenuItem.cjs.js

@@ -24,6 +24,7 @@ const MenuItem = ({
   const refMenuItem = React.useRef(null);
   const hasChildren = !!item.children?.length;
   const [visible, setVisible] = React.useState(false);
+  const { key: _, ...otherProps } = item;
   const handleMouseEnter = () => {
     setVisible(true);
   };
@@ -42,13 +43,20 @@ const MenuItem = ({
         className: helpers.cnMerge(getItemClassName(item), className),
         active: activeKeys?.includes(getItemKey(item)),
         onClick: getItemOnClick(item),
+        as: item.as,
+        ...otherProps,
         children: [
           getItemLeftContent(item),
           /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
               size,
-              className: helpers.cnMerge({ "quen-ui--menu__item_group": hasChildren && direction === "vertical" }, "quen-ui--menu__item_label"),
+              className: helpers.cnMerge(
+                {
+                  "quen-ui--menu__item_group": hasChildren && direction === "vertical"
+                },
+                "quen-ui--menu__item_label"
+              ),
               children: getItemLabel(item)
             }
           ),

package/dist/Menu/MenuItem.es.js

@@ -23,6 +23,7 @@ const MenuItem = ({
   const refMenuItem = useRef(null);
   const hasChildren = !!item.children?.length;
   const [visible, setVisible] = useState(false);
+  const { key: _, ...otherProps } = item;
   const handleMouseEnter = () => {
     setVisible(true);
   };
@@ -41,13 +42,20 @@ const MenuItem = ({
         className: cnMerge(getItemClassName(item), className),
         active: activeKeys?.includes(getItemKey(item)),
         onClick: getItemOnClick(item),
+        as: item.as,
+        ...otherProps,
         children: [
           getItemLeftContent(item),
           /* @__PURE__ */ jsx(
             Text,
             {
               size,
-              className: cnMerge({ "quen-ui--menu__item_group": hasChildren && direction === "vertical" }, "quen-ui--menu__item_label"),
+              className: cnMerge(
+                {
+                  "quen-ui--menu__item_group": hasChildren && direction === "vertical"
+                },
+                "quen-ui--menu__item_label"
+              ),
               children: getItemLabel(item)
             }
           ),

package/dist/Menu/styles.cjs.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Flex = require("../Flex/Flex.cjs.js");
 const MenuItemStyled = styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "active", "hover", "leftContent", "label"].includes(prop)
 }).attrs((props) => ({
   className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
 }))`
@@ -18,6 +18,7 @@ const MenuItemStyled = styled.button.withConfig({
   transition: background 0.2s ease;
   background: transparent;
   justify-content: flex-start;
+  text-decoration: none;
 
   color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
 
@@ -44,6 +45,7 @@ const MenuItemStyled = styled.button.withConfig({
 
   .quen-ui--menu__item_label {
     width: 100%;
+    text-align: left;
   }
 
   &:hover {

package/dist/Menu/styles.es.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import Flex from "../Flex/Flex.es.js";
 const MenuItemStyled = styled.button.withConfig({
-  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+  shouldForwardProp: (prop) => !["disabled", "active", "hover", "leftContent", "label"].includes(prop)
 }).attrs((props) => ({
   className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
 }))`
@@ -16,6 +16,7 @@ const MenuItemStyled = styled.button.withConfig({
   transition: background 0.2s ease;
   background: transparent;
   justify-content: flex-start;
+  text-decoration: none;
 
   color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
 
@@ -42,6 +43,7 @@ const MenuItemStyled = styled.button.withConfig({
 
   .quen-ui--menu__item_label {
     width: 100%;
+    text-align: left;
   }
 
   &:hover {

package/dist/Menu/types.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, JSX } from 'react';
 import { TQuenSize } from '../types/size';
 export interface IMenuDefaultItem {
     /** Unique item identifier */
@@ -15,6 +15,9 @@ export interface IMenuDefaultItem {
     disabled?: boolean;
     /** Custom CSS classes */
     className?: string;
+    /** Renders as custom element (e.g., "a" for links) */
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    [key: string]: any;
 }
 export type TMenuPropGetItemKey<Item> = (item: Item) => string;
 export type TMenuPropGetItemIcon<Item> = (item: Item) => React.ReactNode;

package/dist/Modal/Modal.cjs.js

@@ -25,7 +25,6 @@ const Modal = ({
   width,
   ...props
 }) => {
-  console.log(open);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -51,11 +50,12 @@ const Modal = ({
     };
   }, []);
   React.useEffect(() => {
+    const overflow = document.body.style.overflow;
     if (state.isEnter) {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = overflow;
     };
   }, [state]);
   if (state.isEnter && container) {

package/dist/Modal/Modal.es.js

@@ -24,7 +24,6 @@ const Modal = ({
   width,
   ...props
 }) => {
-  console.log(open);
   const [state, toggle] = useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -50,11 +49,12 @@ const Modal = ({
     };
   }, []);
   useEffect(() => {
+    const overflow = document.body.style.overflow;
     if (state.isEnter) {
       document.body.style.overflow = "hidden";
     }
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = overflow;
     };
   }, [state]);
   if (state.isEnter && container) {

package/dist/Modal/styles.cjs.js

@@ -58,7 +58,9 @@ const ModalStyled = styled.div.withConfig({
           }
         `};
 `;
-const ModalContentStyled = styled.div`
+const ModalContentStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["scrollable"].includes(prop)
+})`
   ${({ scrollable }) => scrollable && styled.css`
       overflow-y: auto;
       max-height: 60vh;

package/dist/Modal/styles.es.js

@@ -56,7 +56,9 @@ const ModalStyled = styled.div.withConfig({
           }
         `};
 `;
-const ModalContentStyled = styled.div`
+const ModalContentStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["scrollable"].includes(prop)
+})`
   ${({ scrollable }) => scrollable && css`
       overflow-y: auto;
       max-height: 60vh;

package/dist/typography/Text/Text.cjs.js

@@ -10,7 +10,7 @@ const Text = ({
   type,
   as,
   className,
-  styles: styles$1,
+  style,
   ...props
 }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   styles.TextStyled,
@@ -21,7 +21,7 @@ const Text = ({
     onClick,
     type,
     as,
-    styles: styles$1,
+    style,
     className,
     ...props,
     children

package/dist/typography/Text/Text.es.js

@@ -9,7 +9,7 @@ const Text$1 = ({
   type,
   as,
   className,
-  styles,
+  style,
   ...props
 }, ref) => /* @__PURE__ */ jsx(
   TextStyled,
@@ -20,7 +20,7 @@ const Text$1 = ({
     onClick,
     type,
     as,
-    styles,
+    style,
     className,
     ...props,
     children

package/dist/typography/Text/types.d.ts

@@ -17,6 +17,6 @@ export interface ITextProps {
     /** Custom CSS class */
     className?: string;
     /** Inline styles */
-    styles?: CSSProperties;
+    style?: CSSProperties;
     [key: string]: any;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quen-ui/components",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "homepage": "https://quen-ui.github.io/quen-ui/",
   "repository": {