@quen-ui/components 0.0.13

package/README.md

@@ -0,0 +1,43 @@
+# quen-ui/components
+
+A set of UI components for React applications.
+
+## Installation
+
+```bash
+npm install @quen-ui/components @quen-ui/theme
+```
+
+## Quick start
+
+```tsx
+import { Button } from '@quen-ui/components';
+
+export function App() {
+  return (
+    <div>
+      <Button view="primary">Сохранить</Button>
+      <Button view="secondary">Отмена</Button>
+    </div>
+  );
+}
+```
+
+## Theme support
+
+Components use tokens from @quen-ui/theme. Make sure the theme is enabled in your app:
+
+```tsx
+import { QuenUIProvider, QuenUIDarkTheme } from '@quen-ui/theme';
+import { Button } from '@quen-ui/components';
+
+export function App() {
+  return (
+    <QuenUIProvider theme={QuenUIDarkTheme}>
+      <Button variant="primary">Example</Button>
+    </QuenUIProvider>
+  );
+}
+```
+
+## [Documentation](https://quen-ui.github.io/quen-ui/)

package/dist/Alert/Alert.cjs.js

@@ -0,0 +1,54 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Title = require("../typography/Title/Title.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const Alert = ({
+  size = "m",
+  title,
+  icon,
+  description,
+  type = "info",
+  closable,
+  onClose,
+  action,
+  className,
+  style,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const handleClose = (event) => {
+    setIsOpen(false);
+    onClose == null ? void 0 : onClose(event);
+  };
+  if (isOpen) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      styles.AlertWrapper,
+      {
+        size,
+        type,
+        className,
+        style,
+        role: "alert",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "l", children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx(styles.AlertIconWrapper, { type, children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", className: "quen-ui__alert-content", children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx(Title, { type: type !== "info" ? type : void 0, size, children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: description }),
+              action && /* @__PURE__ */ jsxRuntime.jsx(styles.AlertActionWrapper, { children: action })
+            ] })
+          ] }),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 14 }) })
+        ]
+      }
+    );
+  }
+  return null;
+};
+module.exports = Alert;

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IAlertProps } from './types';
+declare const Alert: ({ size, title, icon, description, type, closable, onClose, action, className, style, ...props }: IAlertProps) => React.ReactNode;
+export default Alert;

package/dist/Alert/Alert.es.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertWrapper, AlertIconWrapper, AlertActionWrapper } from "./styles.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Title from "../typography/Title/Title.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Button from "../Button/Button.es.js";
+const Alert = ({
+  size = "m",
+  title,
+  icon,
+  description,
+  type = "info",
+  closable,
+  onClose,
+  action,
+  className,
+  style,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = (event) => {
+    setIsOpen(false);
+    onClose == null ? void 0 : onClose(event);
+  };
+  if (isOpen) {
+    return /* @__PURE__ */ jsxs(
+      AlertWrapper,
+      {
+        size,
+        type,
+        className,
+        style,
+        role: "alert",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: "l", children: [
+            icon && /* @__PURE__ */ jsx(AlertIconWrapper, { type, children: icon }),
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", className: "quen-ui__alert-content", children: [
+              title && /* @__PURE__ */ jsx(Title, { type: type !== "info" ? type : void 0, size, children: title }),
+              description && /* @__PURE__ */ jsx(Text, { size, children: description }),
+              action && /* @__PURE__ */ jsx(AlertActionWrapper, { children: action })
+            ] })
+          ] }),
+          closable && /* @__PURE__ */ jsx(Button, { view: "icon", size, onClick: handleClose, children: /* @__PURE__ */ jsx(SvgIconClose, { width: 14 }) })
+        ]
+      }
+    );
+  }
+  return null;
+};
+export {
+  Alert as default
+};

package/dist/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert';
+export type { IAlertProps } from './types';

package/dist/Alert/styles.cjs.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const getTypeStyles = (theme, type) => {
+  switch (type) {
+    case "success":
+      return styled.css`
+        ${polished.linearGradient({
+        colorStops: [theme.colors.green[1], theme.colors.green[4]],
+        toDirection: "to right"
+      })};
+      `;
+    case "danger":
+      return styled.css`
+        ${polished.linearGradient({
+        colorStops: [theme.colors.red[1], theme.colors.red[4]],
+        toDirection: "to right"
+      })};
+      `;
+    case "warning":
+      return styled.css`
+        ${polished.linearGradient({
+        colorStops: [theme.colors.orange[1], theme.colors.orange[4]],
+        toDirection: "to right"
+      })};
+      `;
+    case "info":
+    default:
+      return styled.css`
+        background: ${polished.rgba(theme.colors.grayViolet["9"], 0.3)};
+      `;
+  }
+};
+const getColorBackgroundIcon = (theme, type) => {
+  switch (type) {
+    case "success":
+      return theme.colors.green[9];
+    case "warning":
+      return theme.colors.orange[9];
+    case "danger":
+      return theme.colors.red[9];
+    case "info":
+    default:
+      return theme.colors.grayViolet[9];
+  }
+};
+const AlertWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "type"].includes(prop)
+})`
+  border-radius: ${({ theme }) => theme.control.radius};
+  padding: ${({ size, theme }) => theme.space[size]};
+  display: flex;
+  gap: ${({ size, theme }) => theme.space[size]};
+  justify-content: space-between;
+  ${({ theme, type }) => getTypeStyles(theme, type)};
+
+  .quen-ui__alert-content {
+    width: 100%;
+  }
+`;
+const AlertIconWrapper = styled.div`
+  border-radius: ${({ theme }) => theme.control.radius};
+  background: ${({ theme, type }) => getColorBackgroundIcon(theme, type)};
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.colors.grayViolet[1]};
+  min-width: 32px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const AlertActionWrapper = styled.div`
+  margin-top: 0.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  button {
+    width: 100%;
+  }
+`;
+exports.AlertActionWrapper = AlertActionWrapper;
+exports.AlertIconWrapper = AlertIconWrapper;
+exports.AlertWrapper = AlertWrapper;

package/dist/Alert/styles.d.ts

@@ -0,0 +1,10 @@
+import { TQuenSize } from '../types/size';
+import { IAlertProps } from './types';
+export declare const AlertWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+    type: IAlertProps["type"];
+}>> & string;
+export declare const AlertIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    type: IAlertProps["type"];
+}>> & string;
+export declare const AlertActionWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Alert/styles.es.js

@@ -0,0 +1,90 @@
+import styled, { css } from "styled-components";
+import { rgba, linearGradient } from "polished";
+const getTypeStyles = (theme, type) => {
+  switch (type) {
+    case "success":
+      return css`
+        ${linearGradient({
+        colorStops: [theme.colors.green[1], theme.colors.green[4]],
+        toDirection: "to right"
+      })};
+      `;
+    case "danger":
+      return css`
+        ${linearGradient({
+        colorStops: [theme.colors.red[1], theme.colors.red[4]],
+        toDirection: "to right"
+      })};
+      `;
+    case "warning":
+      return css`
+        ${linearGradient({
+        colorStops: [theme.colors.orange[1], theme.colors.orange[4]],
+        toDirection: "to right"
+      })};
+      `;
+    case "info":
+    default:
+      return css`
+        background: ${rgba(theme.colors.grayViolet["9"], 0.3)};
+      `;
+  }
+};
+const getColorBackgroundIcon = (theme, type) => {
+  switch (type) {
+    case "success":
+      return theme.colors.green[9];
+    case "warning":
+      return theme.colors.orange[9];
+    case "danger":
+      return theme.colors.red[9];
+    case "info":
+    default:
+      return theme.colors.grayViolet[9];
+  }
+};
+const AlertWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "type"].includes(prop)
+})`
+  border-radius: ${({ theme }) => theme.control.radius};
+  padding: ${({ size, theme }) => theme.space[size]};
+  display: flex;
+  gap: ${({ size, theme }) => theme.space[size]};
+  justify-content: space-between;
+  ${({ theme, type }) => getTypeStyles(theme, type)};
+
+  .quen-ui__alert-content {
+    width: 100%;
+  }
+`;
+const AlertIconWrapper = styled.div`
+  border-radius: ${({ theme }) => theme.control.radius};
+  background: ${({ theme, type }) => getColorBackgroundIcon(theme, type)};
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.colors.grayViolet[1]};
+  min-width: 32px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const AlertActionWrapper = styled.div`
+  margin-top: 0.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  button {
+    width: 100%;
+  }
+`;
+export {
+  AlertActionWrapper,
+  AlertIconWrapper,
+  AlertWrapper
+};

package/dist/Alert/types.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IAlertProps {
+    /** 	Main heading text (supports JSX) */
+    title?: React.ReactNode;
+    /** Custom action button/component (placed bottom) */
+    action?: React.ReactNode;
+    /** Shows close button when true */
+    closable?: boolean;
+    /** Secondary text content */
+    description?: React.ReactNode;
+    /** 	Custom icon component (placed left) */
+    icon?: React.ReactNode;
+    /** Callback when alert is closed */
+    onClose?: React.MouseEventHandler;
+    /** Color scheme and icon (default: "info") */
+    type?: "success" | "warning" | "danger" | "info";
+    /** Controls dimensions */
+    size?: TQuenSize;
+    /** 	Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    [key: string]: any;
+}

package/dist/Avatar/Avatar.cjs.js

@@ -0,0 +1,65 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const AvatarIcon = require("./AvatarIcon.svg.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Title = require("../typography/Title/Title.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Avatar = ({
+  size = "m",
+  className,
+  style,
+  children,
+  src,
+  alt,
+  name,
+  label = false,
+  allowedInitialsColors,
+  description,
+  color,
+  imageProps,
+  status,
+  ...props
+}) => {
+  const [error, setError] = React.useState(!src);
+  const initials = React.useMemo(() => {
+    if (name) {
+      return name.split(" ").map((n) => n[0]).join("");
+    }
+    return null;
+  }, [name]);
+  React.useEffect(() => {
+    if (!src) {
+      setError(true);
+    } else {
+      setError(false);
+    }
+  }, [src]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.AvatarWrapper, { className, style, size, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styles.AvatarStyled,
+      {
+        status,
+        size,
+        color: color || helpers.getInitialsColors(name, allowedInitialsColors),
+        children: error ? children || initials || /* @__PURE__ */ jsxRuntime.jsx(AvatarIcon, { className: "quen-ui-avatar__icon" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: "quen-ui__avatar__icon",
+            src,
+            alt,
+            onError: () => setError(true),
+            ...imageProps
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 4, children: [
+      name && /* @__PURE__ */ jsxRuntime.jsx(Title, { size: "xs", children: name }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", children: description })
+    ] })
+  ] });
+};
+module.exports = Avatar;

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IAvatarProps } from './types';
+declare const Avatar: ({ size, className, style, children, src, alt, name, label, allowedInitialsColors, description, color, imageProps, status, ...props }: IAvatarProps) => React.ReactElement;
+export default Avatar;

package/dist/Avatar/Avatar.es.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { AvatarWrapper, AvatarStyled } from "./styles.es.js";
+import SvgAvatarIcon from "./AvatarIcon.svg.es.js";
+import { getInitialsColors } from "./helpers.es.js";
+import Flex from "../Flex/Flex.es.js";
+import Title from "../typography/Title/Title.es.js";
+import Text from "../typography/Text/Text.es.js";
+const Avatar = ({
+  size = "m",
+  className,
+  style,
+  children,
+  src,
+  alt,
+  name,
+  label = false,
+  allowedInitialsColors,
+  description,
+  color,
+  imageProps,
+  status,
+  ...props
+}) => {
+  const [error, setError] = useState(!src);
+  const initials = useMemo(() => {
+    if (name) {
+      return name.split(" ").map((n) => n[0]).join("");
+    }
+    return null;
+  }, [name]);
+  useEffect(() => {
+    if (!src) {
+      setError(true);
+    } else {
+      setError(false);
+    }
+  }, [src]);
+  return /* @__PURE__ */ jsxs(AvatarWrapper, { className, style, size, ...props, children: [
+    /* @__PURE__ */ jsx(
+      AvatarStyled,
+      {
+        status,
+        size,
+        color: color || getInitialsColors(name, allowedInitialsColors),
+        children: error ? children || initials || /* @__PURE__ */ jsx(SvgAvatarIcon, { className: "quen-ui-avatar__icon" }) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "quen-ui__avatar__icon",
+            src,
+            alt,
+            onError: () => setError(true),
+            ...imageProps
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+      name && /* @__PURE__ */ jsx(Title, { size: "xs", children: name }),
+      description && /* @__PURE__ */ jsx(Text, { size: "xs", children: description })
+    ] })
+  ] });
+};
+export {
+  Avatar as default
+};

package/dist/Avatar/AvatarIcon.svg.cjs.js

@@ -0,0 +1,21 @@
+"use strict";
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SvgAvatarIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { stroke: "black", strokeWidth: 1, fill: "white" }, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 8, cy: 5, r: 3 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3 14c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+module.exports = SvgAvatarIcon;

package/dist/Avatar/AvatarIcon.svg.es.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+const SvgAvatarIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { stroke: "black", strokeWidth: 1, fill: "white" }, /* @__PURE__ */ React.createElement("circle", { cx: 8, cy: 5, r: 3 }), /* @__PURE__ */ React.createElement("path", { d: "M3 14c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+export {
+  SvgAvatarIcon as default
+};

package/dist/Avatar/helpers.cjs.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const theme = require("@quen-ui/theme");
+const hashCode = (text) => {
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charCodeAt(i);
+    hash = (hash << 5 | hash) + char;
+    hash |= 0;
+  }
+  return hash;
+};
+const getInitialsColors = (name = "QuenUIAvatar", colors = theme.QUENUI_COlORS_PALETTE) => {
+  const hash = hashCode(name);
+  const index = Math.abs(hash) % colors.length;
+  return colors[index];
+};
+exports.getInitialsColors = getInitialsColors;

package/dist/Avatar/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getInitialsColors: (name?: string, colors?: string[]) => string;

package/dist/Avatar/helpers.es.js

@@ -0,0 +1,18 @@
+import { QUENUI_COlORS_PALETTE } from "@quen-ui/theme";
+const hashCode = (text) => {
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charCodeAt(i);
+    hash = (hash << 5 | hash) + char;
+    hash |= 0;
+  }
+  return hash;
+};
+const getInitialsColors = (name = "QuenUIAvatar", colors = QUENUI_COlORS_PALETTE) => {
+  const hash = hashCode(name);
+  const index = Math.abs(hash) % colors.length;
+  return colors[index];
+};
+export {
+  getInitialsColors
+};

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { IAvatarProps } from './types';

package/dist/Avatar/styles.cjs.js

@@ -0,0 +1,31 @@
+"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;
+`;
+const AvatarStyled = styled.div`
+  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`)};
+  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 {
+    width: 100%;
+    height: 100%;
+    border-radius: ${({ theme }) => polished.math(`${theme.control.radius} * 4`)};
+  }
+`;
+exports.AvatarStyled = AvatarStyled;
+exports.AvatarWrapper = AvatarWrapper;

package/dist/Avatar/styles.d.ts

@@ -0,0 +1,9 @@
+import { IAvatarProps } from './types';
+export declare const AvatarWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: IAvatarProps["size"];
+}>> & string;
+export declare const AvatarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: IAvatarProps["size"];
+    color: string;
+    status: IAvatarProps["status"];
+}>> & string;

package/dist/Avatar/styles.es.js

@@ -0,0 +1,31 @@
+import styled, { css } from "styled-components";
+import { math } from "polished";
+const AvatarWrapper = styled.div`
+  display: flex;
+  gap: ${({ theme, size }) => theme.space[size ?? "m"]};
+  align-items: center;
+`;
+const AvatarStyled = styled.div`
+  width: ${({ size, theme }) => theme.control.height[size ?? "m"]};
+  height: ${({ size, theme }) => theme.control.height[size ?? "m"]};
+  border-radius: ${({ theme }) => math(`${theme.control.radius} * 4`)};
+  background: ${({ theme, color }) => color in theme.colors ? theme.colors[color]["3"] : color};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ theme, status }) => status && css`
+      border: ${math(`${theme.control.borderWidth} * 2`)} solid
+        ${status === "online" ? theme.colors.green["5"] : theme.colors.grayViolet["5"]};
+    `}
+
+  .quen-ui__avatar__icon {
+    width: 100%;
+    height: 100%;
+    border-radius: ${({ theme }) => math(`${theme.control.radius} * 4`)};
+  }
+`;
+export {
+  AvatarStyled,
+  AvatarWrapper
+};