@quen-ui/components 1.0.1 → 1.2.0

package/dist/InputBase/styles.cjs.js

@@ -2,17 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const polished = require("polished");
+const Text = require("../typography/Text/Text.cjs.js");
+const InputBaseAddonWrapper = styled.div`
+  margin-inline-start: -0.0625rem;
+`;
+const InputBaseRightAddonWrapper = styled.div`
+  margin-inline-end: -0.75rem;
+`;
 const InputBaseContainer = styled.div.attrs({
   className: "quen-ui__input-base__container"
 }).withConfig({
-  shouldForwardProp: (prop) => !["size", "error", "disabled"].includes(prop)
+  shouldForwardProp: (prop) => !["size", "error", "disabled", "leftContent"].includes(prop)
 })`
   height: ${({ size, theme }) => theme.control.height[size]};
   border-radius: ${({ theme }) => theme.control.radius};
   border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
   display: flex;
   align-items: center;
-  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  ${({ size, leftContent }) => !leftContent && styled.css`
+      padding-left: ${size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+    `};
   gap: 0.5rem;
 
   svg {
@@ -21,9 +30,18 @@ const InputBaseContainer = styled.div.attrs({
 
   &:hover {
     ${({ theme }) => styled.css`
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.colors[theme.primaryColor][9]};
+    `};
+
+    ${InputBaseAddonWrapper} {
+      ${({ theme, size }) => styled.css`
+        height: ${polished.math(`${theme.control.height[size]} - 0.0625rem`)};
+        border-bottom-left-radius: ${theme.control.radius};
         border-bottom: ${theme.control.borderWidth} solid
           ${theme.colors[theme.primaryColor][9]};
-      `}
+      `};
+    }
   }
 
   ${({ error, theme }) => error && styled.css`
@@ -37,7 +55,18 @@ const InputBaseContainer = styled.div.attrs({
         ${theme.components.Input.disabledColor}!important;
     `};
 `;
-const InputBaseWrapper = styled.div`
+const InputContentText = styled(Text)`
+  background: ${({ theme }) => theme.components.Input.borderColor};
+  border-right: 1px solid ${({ theme }) => theme.components.Input.disabledColor};
+  height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} - 0.0625rem`)};
+  display: flex;
+  align-items: center;
+  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  padding-right: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+`;
+const InputBaseWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -52,10 +81,21 @@ const InputBaseWrapper = styled.div`
   }
 
   &.quen-ui__input-base--focus-input {
+    ${InputContentText} {
+      height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
+    ${InputBaseAddonWrapper} {
+      height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
     ${InputBaseContainer} {
       border-bottom: ${({ theme }) => `${polished.math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
     }
   }
 `;
+exports.InputBaseAddonWrapper = InputBaseAddonWrapper;
 exports.InputBaseContainer = InputBaseContainer;
+exports.InputBaseRightAddonWrapper = InputBaseRightAddonWrapper;
 exports.InputBaseWrapper = InputBaseWrapper;
+exports.InputContentText = InputContentText;

package/dist/InputBase/styles.d.ts

@@ -1,7 +1,13 @@
 import { TQuenSize } from '../types/size';
+export declare const InputBaseAddonWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InputBaseRightAddonWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputBaseContainer: 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>, {
     size: TQuenSize;
     error?: string | boolean;
     disabled?: boolean;
+    leftContent?: boolean;
+}>> & string;
+export declare const InputContentText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').ITextProps, never>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
+export declare const InputBaseWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
 }>> & string;
-export declare const InputBaseWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/InputBase/styles.es.js

@@ -1,16 +1,25 @@
 import styled, { css } from "styled-components";
 import { math } from "polished";
+import Text from "../typography/Text/Text.es.js";
+const InputBaseAddonWrapper = styled.div`
+  margin-inline-start: -0.0625rem;
+`;
+const InputBaseRightAddonWrapper = styled.div`
+  margin-inline-end: -0.75rem;
+`;
 const InputBaseContainer = styled.div.attrs({
   className: "quen-ui__input-base__container"
 }).withConfig({
-  shouldForwardProp: (prop) => !["size", "error", "disabled"].includes(prop)
+  shouldForwardProp: (prop) => !["size", "error", "disabled", "leftContent"].includes(prop)
 })`
   height: ${({ size, theme }) => theme.control.height[size]};
   border-radius: ${({ theme }) => theme.control.radius};
   border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
   display: flex;
   align-items: center;
-  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  ${({ size, leftContent }) => !leftContent && css`
+      padding-left: ${size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+    `};
   gap: 0.5rem;
 
   svg {
@@ -19,9 +28,18 @@ const InputBaseContainer = styled.div.attrs({
 
   &:hover {
     ${({ theme }) => css`
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.colors[theme.primaryColor][9]};
+    `};
+
+    ${InputBaseAddonWrapper} {
+      ${({ theme, size }) => css`
+        height: ${math(`${theme.control.height[size]} - 0.0625rem`)};
+        border-bottom-left-radius: ${theme.control.radius};
         border-bottom: ${theme.control.borderWidth} solid
           ${theme.colors[theme.primaryColor][9]};
-      `}
+      `};
+    }
   }
 
   ${({ error, theme }) => error && css`
@@ -35,7 +53,18 @@ const InputBaseContainer = styled.div.attrs({
         ${theme.components.Input.disabledColor}!important;
     `};
 `;
-const InputBaseWrapper = styled.div`
+const InputContentText = styled(Text)`
+  background: ${({ theme }) => theme.components.Input.borderColor};
+  border-right: 1px solid ${({ theme }) => theme.components.Input.disabledColor};
+  height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} - 0.0625rem`)};
+  display: flex;
+  align-items: center;
+  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  padding-right: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+`;
+const InputBaseWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -50,12 +79,23 @@ const InputBaseWrapper = styled.div`
   }
 
   &.quen-ui__input-base--focus-input {
+    ${InputContentText} {
+      height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
+    ${InputBaseAddonWrapper} {
+      height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
     ${InputBaseContainer} {
       border-bottom: ${({ theme }) => `${math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
     }
   }
 `;
 export {
+  InputBaseAddonWrapper,
   InputBaseContainer,
-  InputBaseWrapper
+  InputBaseRightAddonWrapper,
+  InputBaseWrapper,
+  InputContentText
 };

package/dist/InputBase/types.d.ts

@@ -13,8 +13,12 @@ export interface IInputBaseProps {
     error?: string | boolean;
     /** Left adornment (icon/prefix) */
     leftContent?: ReactNode;
-    /** 	Right adornment (icon/suffix) */
+    /** Determines the visual display mode of leftContent */
+    leftContentVariant?: "icon" | "text" | "addon";
+    /** Right adornment (icon/suffix) */
     rightContent?: ReactNode;
+    /** Determines the visual display mode of rightContent */
+    rightContentVariant?: "icon" | "text" | "addon";
     /** DOM ID for label association */
     id?: string;
     /** Container class name */

package/dist/InputDate/styles.d.ts

@@ -1,5 +1,5 @@
 import { IInputBaseProps } from '../InputBase';
 export declare const InputBaseStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IInputBaseProps & {
     children?: import('react').ReactNode | undefined;
-}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, leftContentVariant, rightContentVariant, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const InputDateStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/InputNumber/styles.d.ts

@@ -1,7 +1,7 @@
 import { IInputBaseProps } from '../InputBase';
 export declare const InputBaseStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IInputBaseProps & {
     children?: import('react').ReactNode | undefined;
-}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, leftContentVariant, rightContentVariant, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const InputNumberStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('rc-input-number').InputNumberProps<import('rc-input-number').ValueType> & {
     children?: React.ReactNode;
 } & {

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 {