@quen-ui/components 0.0.14 → 1.0.0

package/dist/Accordion/styles.cjs.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Flex = require("../Flex/Flex.cjs.js");
+const AccordionContainer = styled(Flex)`
+  border-radius: ${({ theme }) => theme.components.Accordion.radius};
+  ${({ variant, theme }) => styled.css`
+    ${variant === "bordered" && `border: 1px solid ${theme.components.Accordion.borderColor}`};
+  `};
+`;
+const AccordionItemStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["open", "variant", "lastItem"].includes(prop)
+})`
+  ${({ open, theme, lastItem, variant }) => open && !lastItem && variant !== "ghost" && styled.css`
+      border-bottom: 1px solid ${theme.components.Accordion.borderColor};
+    `};
+`;
+const itemContentOpenAnimation = styled.keyframes`
+  from {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+`;
+const itemContentCloseAnimation = styled.keyframes`
+  from {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+`;
+const AccordionItemHeader = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["open", "size", "lastItem", "disabled", "variant"].includes(prop)
+})`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: ${({ theme, size }) => theme.components.Accordion.padding[size]};
+
+  &:hover {
+    background: ${({ theme, disabled, variant }) => !disabled && variant !== "ghost" && theme.components.Accordion.hoverHeaderBackground};
+  }
+
+  ${({ disabled, theme }) => disabled && styled.css`
+      &,
+      .quen-ui__title {
+        color: ${theme.components.Accordion.disabledColor};
+      }
+      cursor: not-allowed;
+    `};
+  ${({ lastItem, theme, open }) => !lastItem && !open && styled.css`
+      border-bottom: 1px solid ${theme.components.Accordion.borderColor};
+    `};
+  
+  .quen-ui__accordion--arrow-icon {
+    color: ${({ theme }) => theme.textColor};
+  }
+
+  ${({ open }) => open && styled.css`
+      .quen-ui__accordion--arrow-icon {
+        transform: rotate(180deg);
+        transition: all 0.2s ease-in-out;
+      }
+    `};
+`;
+const AccordionItemRightContentStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  margin-right: 0;
+`;
+const AccordionItemContent = styled.div`
+  animation: ${({ open }) => open ? itemContentOpenAnimation : itemContentCloseAnimation}
+    0.2s ease-in-out;
+  padding: ${({ theme, size }) => theme.components.Accordion.padding[size]};
+  ${({ hidden }) => hidden && styled.css`
+      display: none;
+    `};
+`;
+exports.AccordionContainer = AccordionContainer;
+exports.AccordionItemContent = AccordionItemContent;
+exports.AccordionItemHeader = AccordionItemHeader;
+exports.AccordionItemRightContentStyled = AccordionItemRightContentStyled;
+exports.AccordionItemStyled = AccordionItemStyled;

package/dist/Accordion/styles.d.ts

@@ -0,0 +1,23 @@
+import { TQuenSize } from '../types/size';
+import { TAccordionVariants } from './types';
+export declare const AccordionContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('..').IFlexProps, "ref"> & import('react').RefAttributes<unknown>, {
+    variant?: TAccordionVariants;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<Omit<import('..').IFlexProps, "ref"> & import('react').RefAttributes<unknown>>, keyof import('react').Component<any, {}, any>>;
+export declare const AccordionItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    open?: boolean;
+    lastItem?: boolean;
+    variant?: TAccordionVariants;
+}>> & string;
+export declare const AccordionItemHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+    size: TQuenSize;
+    lastItem?: boolean;
+    open?: boolean;
+    variant?: TAccordionVariants;
+}>> & string;
+export declare const AccordionItemRightContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AccordionItemContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+    hidden?: boolean;
+    open?: boolean;
+}>> & string;

package/dist/Accordion/styles.es.js

@@ -0,0 +1,97 @@
+import styled, { css, keyframes } from "styled-components";
+import Flex from "../Flex/Flex.es.js";
+const AccordionContainer = styled(Flex)`
+  border-radius: ${({ theme }) => theme.components.Accordion.radius};
+  ${({ variant, theme }) => css`
+    ${variant === "bordered" && `border: 1px solid ${theme.components.Accordion.borderColor}`};
+  `};
+`;
+const AccordionItemStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["open", "variant", "lastItem"].includes(prop)
+})`
+  ${({ open, theme, lastItem, variant }) => open && !lastItem && variant !== "ghost" && css`
+      border-bottom: 1px solid ${theme.components.Accordion.borderColor};
+    `};
+`;
+const itemContentOpenAnimation = keyframes`
+  from {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+`;
+const itemContentCloseAnimation = keyframes`
+  from {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+`;
+const AccordionItemHeader = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["open", "size", "lastItem", "disabled", "variant"].includes(prop)
+})`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: ${({ theme, size }) => theme.components.Accordion.padding[size]};
+
+  &:hover {
+    background: ${({ theme, disabled, variant }) => !disabled && variant !== "ghost" && theme.components.Accordion.hoverHeaderBackground};
+  }
+
+  ${({ disabled, theme }) => disabled && css`
+      &,
+      .quen-ui__title {
+        color: ${theme.components.Accordion.disabledColor};
+      }
+      cursor: not-allowed;
+    `};
+  ${({ lastItem, theme, open }) => !lastItem && !open && css`
+      border-bottom: 1px solid ${theme.components.Accordion.borderColor};
+    `};
+  
+  .quen-ui__accordion--arrow-icon {
+    color: ${({ theme }) => theme.textColor};
+  }
+
+  ${({ open }) => open && css`
+      .quen-ui__accordion--arrow-icon {
+        transform: rotate(180deg);
+        transition: all 0.2s ease-in-out;
+      }
+    `};
+`;
+const AccordionItemRightContentStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  margin-right: 0;
+`;
+const AccordionItemContent = styled.div`
+  animation: ${({ open }) => open ? itemContentOpenAnimation : itemContentCloseAnimation}
+    0.2s ease-in-out;
+  padding: ${({ theme, size }) => theme.components.Accordion.padding[size]};
+  ${({ hidden }) => hidden && css`
+      display: none;
+    `};
+`;
+export {
+  AccordionContainer,
+  AccordionItemContent,
+  AccordionItemHeader,
+  AccordionItemRightContentStyled,
+  AccordionItemStyled
+};

package/dist/Accordion/types.d.ts

@@ -0,0 +1,142 @@
+import { ReactNode, CSSProperties } from 'react';
+import { TQuenSize } from '../types/size';
+export declare const ACCORDION_VARIANTS: readonly ["bordered", "ghost"];
+export type TAccordionVariants = (typeof ACCORDION_VARIANTS)[number];
+export interface IAccordionDefaultItem {
+    /** The unique identifier of the panel */
+    key: string;
+    /** Additional className */
+    className?: string;
+    /** Icon displayed before label */
+    leftContent?: ReactNode;
+    /** Icon displayed after label */
+    rightContent?: ReactNode;
+    /** Title of the panel */
+    label: ReactNode;
+    /** Body area content */
+    children: ReactNode;
+    /** If false, panel will not show arrow icon. If false, collapsible can't be set as icon */
+    showArrow?: boolean;
+    /** Inline panel styles */
+    style?: CSSProperties;
+    /** Disables interaction */
+    disabled?: boolean;
+}
+export type TAccordionGetItemKey<Item> = (item: Item) => string;
+export type TAccordionGetItemClassName<Item> = (item: Item) => string | undefined;
+export type TAccordionGetItemLeftContent<Item> = (item: Item) => ReactNode;
+export type TAccordionGetItemRightContent<Item> = (item: Item) => ReactNode;
+export type TAccordionGetItemLabel<Item> = (item: Item) => ReactNode;
+export type TAccordionGetItemChildren<Item> = (item: Item) => ReactNode;
+export type TAccordionGetItemShowArrow<Item> = (item: Item) => boolean | undefined;
+export type TAccordionGetItemStyle<Item> = (item: Item) => CSSProperties | undefined;
+export type TAccordionGetItemDisabled<Item> = (item: Item) => boolean | undefined;
+export interface IAccordionProps<Item = IAccordionDefaultItem> {
+    /** Set the size of accordion */
+    size?: TQuenSize;
+    /** Callback function executed when active panel is changed */
+    onChange?: (keys: (string | number)[]) => void;
+    /** Key of the active panel */
+    activeKeys?: (string | number)[];
+    /** Key of the initial active panel */
+    defaultActiveKeys?: (string | number)[];
+    /** Accordion items content */
+    items: Item[];
+    /** Visual design option */
+    variant?: TAccordionVariants;
+    /** Additional className */
+    className?: string;
+    /** Additional style */
+    style?: CSSProperties;
+    /** Unique key extractor */
+    getItemKey?: TAccordionGetItemKey<Item>;
+    /** Label text extractor */
+    getItemClassName?: TAccordionGetItemClassName<Item>;
+    /** Extracts content shown before the label */
+    getItemLeftContent?: TAccordionGetItemLeftContent<Item>;
+    /** Extracts content shown after the label */
+    getItemRightContent?: TAccordionGetItemRightContent<Item>;
+    /** Extracts the section header */
+    getItemLabel?: TAccordionGetItemLabel<Item>;
+    /** Retrieves the contents of the section */
+    getItemChildren?: TAccordionGetItemChildren<Item>;
+    /** Determines whether to display the disclosure arrow */
+    getItemShowArrow?: TAccordionGetItemShowArrow<Item>;
+    /** Returns inline styles for a specific element */
+    getItemStyle?: TAccordionGetItemStyle<Item>;
+    /** Disabled state extractor */
+    getItemDisabled?: TAccordionGetItemDisabled<Item>;
+    /** The callback that is called when the accordion element is clicked */
+    onClickItem?: (item: Item) => void;
+    /** If true, the contents of the hidden panels will be deleted from the DOM */
+    destroyOnHidden?: boolean;
+    /** Allows simultaneous opening of multiple panels */
+    multiple?: boolean;
+    /** Custom rendering of the panel title. Allows you to completely redefine its appearance. */
+    renderItemHeader?: (item: Item, open: boolean, toggle: () => void) => ReactNode;
+    /** Custom icon for the disclosure arrow */
+    chevronIcon?: ReactNode;
+    [key: string]: any;
+}
+export interface IAccordionItemProps {
+    /** Header label of the accordion item */
+    label: ReactNode;
+    /** Defines the size of the item */
+    size?: TQuenSize;
+    /** Additional CSS class for the accordion item */
+    className?: string;
+    /** Inline styles applied to the item container */
+    style?: CSSProperties;
+    /** Content of the accordion section (shown when expanded) */
+    children: ReactNode;
+    /** Determines whether the toggle arrow icon is visible */
+    showArrow?: boolean;
+    /** Optional content displayed before the label (e.g., an icon) */
+    leftContent?: ReactNode;
+    /** Optional content displayed after the label (e.g., status indicator) */
+    rightContent?: ReactNode;
+    /** Disables user interaction for the item */
+    disabled?: boolean;
+    /** Triggered when the accordion header is clicked */
+    onClick: () => void;
+    /** Indicates whether the item is currently expanded */
+    open?: boolean;
+    /** If true, the content will be removed from the DOM when the item is collapsed */
+    destroyOnHidden?: boolean;
+    /** Marks the item as the last in the group (useful for styling) */
+    lastItem?: boolean;
+    /** Defines the visual variant: "bordered" or "ghost" */
+    variant?: TAccordionVariants;
+    /** Unique identifier for the item */
+    id: string;
+    /** Custom renderer for the header section */
+    renderHeader?: () => ReactNode;
+    /** Custom icon for the expand/collapse chevron */
+    chevronIcon?: ReactNode;
+}
+export interface IAccordionGroupProps {
+    /** Accordion item elements contained within the group */
+    children: ReactNode;
+    /** Controlled list of active (expanded) item keys */
+    activeKeys?: (string | number)[];
+    /** Uncontrolled initial list of active item keys */
+    defaultActiveKeys?: (string | number)[];
+    /** Called whenever the open items change */
+    onChange?: (keys: (string | number)[]) => void;
+    /** If true, multiple accordion items can be expanded at once */
+    multiple?: boolean;
+    /** Inline styles for the accordion group container */
+    style?: CSSProperties;
+    /** Additional CSS class for the accordion group */
+    className?: string;
+}
+export interface IAccordionGroupApi {
+    /** Opens all accordion items */
+    openAll: () => void;
+    /** Collapses all accordion items */
+    closeAll: () => void;
+    /** Returns a list of currently opened item keys */
+    getOpenedKeys: () => (string | number)[];
+    /** Manually sets the currently opened items by keys */
+    setOpenedKeys: (keys: (string | number)[]) => void;
+}

package/dist/Accordion/useAccordionState.cjs.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useAccordionState = ({
+  activeKeys,
+  defaultActiveKeys,
+  multiple = true,
+  onChange
+}) => {
+  const [openedKeys, setOpenedKeys] = React.useState(
+    defaultActiveKeys ?? []
+  );
+  const isControlled = activeKeys !== void 0;
+  const currentKeys = isControlled ? activeKeys : openedKeys;
+  const toggleKey = (key) => {
+    let nextKeys;
+    if (multiple) {
+      nextKeys = currentKeys.includes(key) ? currentKeys.filter((k) => k !== key) : [...currentKeys, key];
+    } else {
+      nextKeys = currentKeys.includes(key) ? [] : [key];
+    }
+    if (!isControlled) {
+      setOpenedKeys(nextKeys);
+    }
+    onChange?.(nextKeys);
+  };
+  React.useEffect(() => {
+    if (isControlled) {
+      setOpenedKeys(activeKeys);
+    }
+  }, [activeKeys]);
+  return { openedKeys: currentKeys, toggleKey, setOpenedKeys };
+};
+exports.useAccordionState = useAccordionState;

package/dist/Accordion/useAccordionState.d.ts

@@ -0,0 +1,12 @@
+interface IUseAccordionStateParams {
+    activeKeys?: (string | number)[];
+    defaultActiveKeys?: (string | number)[];
+    multiple?: boolean;
+    onChange?: (keys: (string | number)[]) => void;
+}
+export declare const useAccordionState: ({ activeKeys, defaultActiveKeys, multiple, onChange }: IUseAccordionStateParams) => {
+    openedKeys: (string | number)[];
+    toggleKey: (key: string | number) => void;
+    setOpenedKeys: import('react').Dispatch<import('react').SetStateAction<(string | number)[]>>;
+};
+export {};

package/dist/Accordion/useAccordionState.es.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+const useAccordionState = ({
+  activeKeys,
+  defaultActiveKeys,
+  multiple = true,
+  onChange
+}) => {
+  const [openedKeys, setOpenedKeys] = useState(
+    defaultActiveKeys ?? []
+  );
+  const isControlled = activeKeys !== void 0;
+  const currentKeys = isControlled ? activeKeys : openedKeys;
+  const toggleKey = (key) => {
+    let nextKeys;
+    if (multiple) {
+      nextKeys = currentKeys.includes(key) ? currentKeys.filter((k) => k !== key) : [...currentKeys, key];
+    } else {
+      nextKeys = currentKeys.includes(key) ? [] : [key];
+    }
+    if (!isControlled) {
+      setOpenedKeys(nextKeys);
+    }
+    onChange?.(nextKeys);
+  };
+  useEffect(() => {
+    if (isControlled) {
+      setOpenedKeys(activeKeys);
+    }
+  }, [activeKeys]);
+  return { openedKeys: currentKeys, toggleKey, setOpenedKeys };
+};
+export {
+  useAccordionState
+};

package/dist/Alert/Alert.cjs.js

@@ -23,7 +23,7 @@ const Alert = ({
   const [isOpen, setIsOpen] = React.useState(true);
   const handleClose = (event) => {
     setIsOpen(false);
-    onClose == null ? void 0 : onClose(event);
+    onClose?.(event);
   };
   if (isOpen) {
     return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/Alert/Alert.es.js

@@ -22,7 +22,7 @@ const Alert = ({
   const [isOpen, setIsOpen] = useState(true);
   const handleClose = (event) => {
     setIsOpen(false);
-    onClose == null ? void 0 : onClose(event);
+    onClose?.(event);
   };
   if (isOpen) {
     return /* @__PURE__ */ jsxs(

package/dist/Alert/styles.cjs.js

@@ -7,48 +7,48 @@ const getTypeStyles = (theme, type) => {
     case "success":
       return styled.css`
         ${polished.linearGradient({
-        colorStops: [theme.colors.green[1], theme.colors.green[4]],
+        colorStops: theme.components.Alert.successBackground,
         toDirection: "to right"
       })};
       `;
     case "danger":
       return styled.css`
         ${polished.linearGradient({
-        colorStops: [theme.colors.red[1], theme.colors.red[4]],
+        colorStops: theme.components.Alert.dangerBackground,
         toDirection: "to right"
       })};
       `;
     case "warning":
       return styled.css`
         ${polished.linearGradient({
-        colorStops: [theme.colors.orange[1], theme.colors.orange[4]],
+        colorStops: theme.components.Alert.warningBackground,
         toDirection: "to right"
       })};
       `;
     case "info":
     default:
       return styled.css`
-        background: ${polished.rgba(theme.colors.grayViolet["9"], 0.3)};
+        background: ${polished.rgba(theme.components.Alert.infoBackground, 0.3)};
       `;
   }
 };
 const getColorBackgroundIcon = (theme, type) => {
   switch (type) {
     case "success":
-      return theme.colors.green[9];
+      return theme.components.Alert.colorSuccessIcon;
     case "warning":
-      return theme.colors.orange[9];
+      return theme.components.Alert.colorWarningIcon;
     case "danger":
-      return theme.colors.red[9];
+      return theme.components.Alert.colorDangerIcon;
     case "info":
     default:
-      return theme.colors.grayViolet[9];
+      return theme.components.Alert.colorInfoIcon;
   }
 };
 const AlertWrapper = styled.div.withConfig({
   shouldForwardProp: (prop) => !["size", "type"].includes(prop)
 })`
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Alert.radius};
   padding: ${({ size, theme }) => theme.space[size]};
   display: flex;
   gap: ${({ size, theme }) => theme.space[size]};
@@ -58,6 +58,10 @@ const AlertWrapper = styled.div.withConfig({
   .quen-ui__alert-content {
     width: 100%;
   }
+  
+  .quen-ui__text {
+    color: ${({ theme }) => theme.components.Alert.colorText}; 
+  }
 `;
 const AlertIconWrapper = styled.div`
   border-radius: ${({ theme }) => theme.control.radius};
@@ -67,7 +71,7 @@ const AlertIconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme }) => theme.colors.grayViolet[1]};
+  color: ${({ theme }) => theme.components.Alert.colorIcon};
   min-width: 32px;
 
   svg {

package/dist/Alert/styles.es.js

@@ -5,48 +5,48 @@ const getTypeStyles = (theme, type) => {
     case "success":
       return css`
         ${linearGradient({
-        colorStops: [theme.colors.green[1], theme.colors.green[4]],
+        colorStops: theme.components.Alert.successBackground,
         toDirection: "to right"
       })};
       `;
     case "danger":
       return css`
         ${linearGradient({
-        colorStops: [theme.colors.red[1], theme.colors.red[4]],
+        colorStops: theme.components.Alert.dangerBackground,
         toDirection: "to right"
       })};
       `;
     case "warning":
       return css`
         ${linearGradient({
-        colorStops: [theme.colors.orange[1], theme.colors.orange[4]],
+        colorStops: theme.components.Alert.warningBackground,
         toDirection: "to right"
       })};
       `;
     case "info":
     default:
       return css`
-        background: ${rgba(theme.colors.grayViolet["9"], 0.3)};
+        background: ${rgba(theme.components.Alert.infoBackground, 0.3)};
       `;
   }
 };
 const getColorBackgroundIcon = (theme, type) => {
   switch (type) {
     case "success":
-      return theme.colors.green[9];
+      return theme.components.Alert.colorSuccessIcon;
     case "warning":
-      return theme.colors.orange[9];
+      return theme.components.Alert.colorWarningIcon;
     case "danger":
-      return theme.colors.red[9];
+      return theme.components.Alert.colorDangerIcon;
     case "info":
     default:
-      return theme.colors.grayViolet[9];
+      return theme.components.Alert.colorInfoIcon;
   }
 };
 const AlertWrapper = styled.div.withConfig({
   shouldForwardProp: (prop) => !["size", "type"].includes(prop)
 })`
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Alert.radius};
   padding: ${({ size, theme }) => theme.space[size]};
   display: flex;
   gap: ${({ size, theme }) => theme.space[size]};
@@ -56,6 +56,10 @@ const AlertWrapper = styled.div.withConfig({
   .quen-ui__alert-content {
     width: 100%;
   }
+  
+  .quen-ui__text {
+    color: ${({ theme }) => theme.components.Alert.colorText}; 
+  }
 `;
 const AlertIconWrapper = styled.div`
   border-radius: ${({ theme }) => theme.control.radius};
@@ -65,7 +69,7 @@ const AlertIconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme }) => theme.colors.grayViolet[1]};
+  color: ${({ theme }) => theme.components.Alert.colorIcon};
   min-width: 32px;
 
   svg {

package/dist/Avatar/styles.cjs.js

@@ -1,30 +1,35 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
-const polished = require("polished");
 const AvatarWrapper = styled.div`
   display: flex;
   gap: ${({ theme, size }) => theme.space[size ?? "m"]};
   align-items: center;
+
+  .quen-ui__title,
+  .quen-ui__text {
+    color: ${({ theme }) => theme.components.Avatar.color};
+  }
 `;
-const AvatarStyled = styled.div`
+const AvatarStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "color", "status"].includes(prop)
+})`
   width: ${({ size, theme }) => theme.control.height[size ?? "m"]};
   height: ${({ size, theme }) => theme.control.height[size ?? "m"]};
-  border-radius: ${({ theme }) => polished.math(`${theme.control.radius} * 4`)};
+  border-radius: ${({ theme }) => theme.components.Avatar.radius};
   background: ${({ theme, color }) => color in theme.colors ? theme.colors[color]["3"] : color};
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${({ theme, status }) => status && styled.css`
-      border: ${polished.math(`${theme.control.borderWidth} * 2`)} solid
-        ${status === "online" ? theme.colors.green["5"] : theme.colors.grayViolet["5"]};
-    `}
-
-  .quen-ui__avatar__icon {
+  color: ${({ theme }) => theme.components.Avatar.color};
+    ${({ theme, status }) => status && styled.css`
+        border: ${theme.components.Avatar.borderWidth} solid
+          ${status === "online" ? theme.components.Avatar.borderColorOnline : theme.components.Avatar.borderColorDefault};
+      `}
+    .quen-ui__avatar__icon {
     width: 100%;
     height: 100%;
-    border-radius: ${({ theme }) => polished.math(`${theme.control.radius} * 4`)};
+    border-radius: ${({ theme }) => theme.components.Avatar.radius};
   }
 `;
 exports.AvatarStyled = AvatarStyled;