@addev-be/ui 0.16.3 → 0.16.7

package/dist/services/requests/generic.d.ts

@@ -0,0 +1,29 @@
+import * as t from 'io-ts';
+export declare const useGenericGetRequestHandler: <C extends t.Mixed>(name: string, codec: C) => (data: {
+    id: string;
+}) => Promise<{
+    status: number;
+    data: t.TypeOf<C>;
+}>;
+export declare const useGenericGetAllRequestHandler: <C extends t.Mixed>(name: string, codec: C) => (data: {}) => Promise<{
+    status: number;
+    data: t.TypeOf<C>[];
+}>;
+export declare const useGenericSaveRequestHandler: <C extends t.Mixed>(name: string, codec: C) => (data: {
+    data: t.TypeOf<C>;
+}) => Promise<{
+    status: number;
+    data: t.TypeOf<C>;
+}>;
+export declare const useGenericDeleteRequestHandler: (name: string) => (data: {
+    ids: string[];
+}) => Promise<{
+    status: number[];
+}>;
+export declare const useGenericArchiveRequestHandler: (name: string) => (data: {
+    ids: string[];
+} & {
+    archived?: boolean | undefined;
+}) => Promise<{
+    status: number[];
+}>;

package/dist/services/requests/generic.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGenericArchiveRequestHandler = exports.useGenericDeleteRequestHandler = exports.useGenericSaveRequestHandler = exports.useGenericGetAllRequestHandler = exports.useGenericGetRequestHandler = void 0;
+var generic_1 = require("../types/generic");
+var hooks_1 = require("../hooks");
+var useGenericGetRequestHandler = function (name, codec) {
+    var responseCodec = (0, generic_1.getGenericGetResponseDtoCodec)(codec);
+    return (0, hooks_1.useLoadingRequestHandler)(name);
+};
+exports.useGenericGetRequestHandler = useGenericGetRequestHandler;
+var useGenericGetAllRequestHandler = function (name, codec) {
+    var responseCodec = (0, generic_1.getGenericGetAllResponseDtoCodec)(codec);
+    return (0, hooks_1.useLoadingRequestHandler)(name);
+};
+exports.useGenericGetAllRequestHandler = useGenericGetAllRequestHandler;
+var useGenericSaveRequestHandler = function (name, codec) {
+    var requestCodec = (0, generic_1.getGenericSaveRequestDtoCodec)(codec);
+    var responseCodec = (0, generic_1.getGenericSaveResponseDtoCodec)(codec);
+    return (0, hooks_1.useLoadingRequestHandler)(name);
+};
+exports.useGenericSaveRequestHandler = useGenericSaveRequestHandler;
+var useGenericDeleteRequestHandler = function (name) {
+    return (0, hooks_1.useLoadingRequestHandler)(name);
+};
+exports.useGenericDeleteRequestHandler = useGenericDeleteRequestHandler;
+var useGenericArchiveRequestHandler = function (name) {
+    return (0, hooks_1.useLoadingRequestHandler)(name);
+};
+exports.useGenericArchiveRequestHandler = useGenericArchiveRequestHandler;

package/dist/services/requests/tracking.d.ts

@@ -0,0 +1,18 @@
+export declare const useSendTrackingEventRequestHandler: () => (data: {
+    data: {
+        name: string;
+        details: {
+            [x: string]: string | number | boolean | null;
+        };
+        id: string | null;
+    };
+}) => Promise<{
+    status: number;
+    data: {
+        name: string;
+        details: {
+            [x: string]: string | number | boolean | null;
+        };
+        id: string | null;
+    };
+}>;

package/dist/services/requests/tracking.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSendTrackingEventRequestHandler = void 0;
+var hooks_1 = require("../hooks");
+var useSendTrackingEventRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('SendTrackingEvent');
+};
+exports.useSendTrackingEventRequestHandler = useSendTrackingEventRequestHandler;

package/dist/services/smartQueries.d.ts

@@ -0,0 +1,51 @@
+export type FieldDTO<T extends string = string> = {
+    fieldName?: T;
+    fieldAlias?: string;
+    operator?: 'add' | 'avg' | 'concat' | 'count' | 'divide' | 'groupConcat' | 'if' | 'ifNull' | 'jsonObject' | 'length' | 'max' | 'min' | 'modulo' | 'multiply' | 'subtract' | 'sum' | 'trim';
+    operands?: FieldDTO[];
+    constantValue?: string | number | boolean | null;
+    groupBy?: boolean;
+};
+export type ConditionOperator = 'lessThan' | 'lessThanOrEqual' | 'lessThanOrEquals' | 'equals' | 'notEquals' | 'greaterThanOrEqual' | 'greaterThanOrEquals' | 'greaterThan' | 'like' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'notLike' | 'inRange' | 'between' | 'isNull' | 'isNotNull' | 'inArray' | 'in' | 'not' | 'and' | 'or';
+export type HavingDTO = {
+    operator: ConditionOperator;
+    value?: string | number | boolean | null | (string | number | boolean | null)[];
+};
+export type ConditionDTO = HavingDTO & {
+    field: string | FieldDTO;
+    children?: boolean;
+};
+export type OrderByDirection = 'ascending' | 'descending';
+export type FooterFunction = 'sum' | 'avg' | 'count' | 'max' | 'min';
+export type ColumnDTO = {
+    key: string;
+    field: FieldDTO;
+    having?: HavingDTO;
+    orderBy?: OrderByDirection;
+    groupBy?: boolean;
+    footer?: FooterFunction;
+};
+export type ColumnWithHavingDTO = ColumnDTO & Required<Pick<ColumnDTO, 'having'>>;
+export type ColumnWithFooterDTO = ColumnDTO & Required<Pick<ColumnDTO, 'footer'>>;
+export type QueryDTO = {
+    type: string;
+    columns?: ColumnDTO[];
+    filterColumn?: ColumnDTO;
+    where?: ConditionDTO[];
+    offset?: number;
+    limit?: number;
+    getCount?: boolean;
+    unique?: boolean;
+};
+export type RequestRow<R> = {
+    [K in keyof R]: R[K] extends string | number | null | undefined ? R[K] : string | number | null | undefined;
+};
+export type ResponseDTO<T = unknown> = {
+    data: RequestRow<T>[];
+    count?: number;
+    totals?: Record<string, string | number | null | undefined>;
+};
+export type RequestHandler<T> = (request: QueryDTO) => Promise<ResponseDTO<T>>;
+export declare const useSmartQueryHandler: <T = unknown>(name: string) => [RequestHandler<T>, RequestHandler<{
+    id: string;
+}>, RequestHandler<Partial<T>>];

package/dist/services/smartQueries.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSmartQueryHandler = void 0;
+var hooks_1 = require("./hooks");
+var useSmartQueryHandler = function (name) { return [
+    (0, hooks_1.useWebSocketRequestHandler)(name),
+    (0, hooks_1.useWebSocketRequestHandler)(name),
+    (0, hooks_1.useWebSocketRequestHandler)(name),
+]; };
+exports.useSmartQueryHandler = useSmartQueryHandler;

package/dist/services/smartRequests.js

@@ -0,0 +1 @@
+"use strict";

package/dist/services/types/generic.d.ts

@@ -0,0 +1,44 @@
+import * as t from 'io-ts';
+export declare const genericGetRequestDtoCodec: t.TypeC<{
+    id: t.StringC;
+}>;
+export declare const getGenericGetResponseDtoCodec: <C extends t.Mixed>(codec: C) => t.TypeC<{
+    status: t.NumberC;
+    data: C;
+}>;
+export type GenericGetRequestDTO = t.TypeOf<typeof genericGetRequestDtoCodec>;
+/*****/
+export declare const genericGetAllRequestDtoCodec: t.TypeC<{}>;
+export declare const getGenericGetAllResponseDtoCodec: <C extends t.Mixed>(codec: C) => t.TypeC<{
+    status: t.NumberC;
+    data: t.ArrayC<C>;
+}>;
+export type GenericGetAllRequestDTO = t.TypeOf<typeof genericGetAllRequestDtoCodec>;
+/*****/
+export declare const getGenericSaveRequestDtoCodec: <C extends t.Mixed>(codec: C) => t.TypeC<{
+    data: C;
+}>;
+export declare const getGenericSaveResponseDtoCodec: <C extends t.Mixed>(codec: C) => t.TypeC<{
+    status: t.NumberC;
+    data: C;
+}>;
+/*****/
+export declare const genericArchiveRequestDtoCodec: t.IntersectionC<[t.TypeC<{
+    ids: t.ArrayC<t.StringC>;
+}>, t.PartialC<{
+    archived: t.BooleanC;
+}>]>;
+export declare const genericArchiveResponseDtoCodec: t.TypeC<{
+    status: t.ArrayC<t.NumberC>;
+}>;
+export type GenericArchiveRequestDTO = t.TypeOf<typeof genericArchiveRequestDtoCodec>;
+export type GenericArchiveResponseDTO = t.TypeOf<typeof genericArchiveResponseDtoCodec>;
+/*****/
+export declare const genericDeleteRequestDtoCodec: t.TypeC<{
+    ids: t.ArrayC<t.StringC>;
+}>;
+export declare const genericDeleteResponseDtoCodec: t.TypeC<{
+    status: t.ArrayC<t.NumberC>;
+}>;
+export type GenericDeleteRequestDTO = t.TypeOf<typeof genericDeleteRequestDtoCodec>;
+export type GenericDeleteResponseDTO = t.TypeOf<typeof genericDeleteResponseDtoCodec>;

package/dist/services/types/generic.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genericDeleteResponseDtoCodec = exports.genericDeleteRequestDtoCodec = exports.genericArchiveResponseDtoCodec = exports.genericArchiveRequestDtoCodec = exports.getGenericSaveResponseDtoCodec = exports.getGenericSaveRequestDtoCodec = exports.getGenericGetAllResponseDtoCodec = exports.genericGetAllRequestDtoCodec = exports.getGenericGetResponseDtoCodec = exports.genericGetRequestDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
+exports.genericGetRequestDtoCodec = t.type({
+    id: t.string,
+}, 'GenericGetRequestDTO');
+var getGenericGetResponseDtoCodec = function (codec) {
+    return t.type({
+        status: t.number,
+        data: codec,
+    });
+};
+exports.getGenericGetResponseDtoCodec = getGenericGetResponseDtoCodec;
+/*****/
+exports.genericGetAllRequestDtoCodec = t.type({}, 'GenericGetAllRequestDTO');
+var getGenericGetAllResponseDtoCodec = function (codec) {
+    return t.type({
+        status: t.number,
+        data: t.array(codec),
+    });
+};
+exports.getGenericGetAllResponseDtoCodec = getGenericGetAllResponseDtoCodec;
+/*****/
+var getGenericSaveRequestDtoCodec = function (codec) {
+    return t.type({
+        data: codec,
+    });
+};
+exports.getGenericSaveRequestDtoCodec = getGenericSaveRequestDtoCodec;
+var getGenericSaveResponseDtoCodec = function (codec) {
+    return t.type({
+        status: t.number,
+        data: codec,
+    });
+};
+exports.getGenericSaveResponseDtoCodec = getGenericSaveResponseDtoCodec;
+/*****/
+exports.genericArchiveRequestDtoCodec = t.intersection([
+    t.type({
+        ids: t.array(t.string),
+    }),
+    t.partial({
+        archived: t.boolean,
+    }),
+], 'GenericArchiveRequestDTO');
+exports.genericArchiveResponseDtoCodec = t.type({
+    status: t.array(t.number),
+}, 'GenericArchiveResponseDTO');
+/*****/
+exports.genericDeleteRequestDtoCodec = t.type({
+    ids: t.array(t.string),
+}, 'GenericDeleteRequestDTO');
+exports.genericDeleteResponseDtoCodec = t.type({
+    status: t.array(t.number),
+}, 'GenericDeleteResponseDTO');

package/dist/services/types/tracking.d.ts

@@ -0,0 +1,24 @@
+import * as t from 'io-ts';
+export declare const trackingEventDtoCodec: t.TypeC<{
+    name: t.StringC;
+    details: t.RecordC<t.StringC, t.UnionC<[t.StringC, t.NumberC, t.BooleanC, t.NullC]>>;
+    id: t.UnionC<[t.StringC, t.NullC]>;
+}>;
+export type TrackingEventDTO = t.TypeOf<typeof trackingEventDtoCodec>;
+export declare const sendTrackingEventRequestDtoCodec: t.TypeC<{
+    data: t.TypeC<{
+        name: t.StringC;
+        details: t.RecordC<t.StringC, t.UnionC<[t.StringC, t.NumberC, t.BooleanC, t.NullC]>>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>;
+}>;
+export declare const sendTrackingEventResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.TypeC<{
+        name: t.StringC;
+        details: t.RecordC<t.StringC, t.UnionC<[t.StringC, t.NumberC, t.BooleanC, t.NullC]>>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>;
+}>;
+export type SendTrackingEventRequestDTO = t.TypeOf<typeof sendTrackingEventRequestDtoCodec>;
+export type SendTrackingEventResponseDTO = t.TypeOf<typeof sendTrackingEventResponseDtoCodec>;

package/dist/services/types/tracking.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendTrackingEventResponseDtoCodec = exports.sendTrackingEventRequestDtoCodec = exports.trackingEventDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
+var base_1 = require("./base");
+exports.trackingEventDtoCodec = t.type(__assign(__assign({}, base_1.baseModelDtoCodec.props), { name: t.string, details: t.record(t.string, t.union([t.string, t.number, t.boolean, t.null])) }), 'TrackingEventDTO');
+exports.sendTrackingEventRequestDtoCodec = t.type({
+    data: exports.trackingEventDtoCodec,
+}, 'SendTrackingEventRequestDTO');
+exports.sendTrackingEventResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.trackingEventDtoCodec,
+}, 'SendTrackingEventResponseDTO');

package/dist/services/updateSqlRequests.d.ts

@@ -0,0 +1,24 @@
+export type UpdateSqlRequestDTO = {
+    type: string;
+    added: {
+        [id: string]: {
+            [field: string]: string | number | boolean | null | undefined;
+        };
+    };
+    updated: {
+        [id: string]: {
+            [field: string]: string | number | boolean | null | undefined;
+        };
+    };
+};
+export type UpdateSqlResponseDTO = {
+    results: {
+        [id: string]: {
+            status: number;
+            error?: string;
+        };
+    };
+};
+type UpdateSqlRequestHandler = (request: UpdateSqlRequestDTO) => Promise<UpdateSqlResponseDTO>;
+export declare const useUpdateSqlRequestHandler: (name: string) => UpdateSqlRequestHandler;
+export {};

package/dist/services/updateSqlRequests.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateSqlRequestHandler = void 0;
+var hooks_1 = require("./hooks");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var useUpdateSqlRequestHandler = function (name) { return (0, hooks_1.useWebSocketRequestHandler)(name); };
+exports.useUpdateSqlRequestHandler = useUpdateSqlRequestHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.16.3",
+  "version": "0.16.7",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/styles.ts

@@ -1,3 +1,4 @@
+import styled, { css } from 'styled-components';
 import {
   DEFAULT_FOOTER_ROW_HEIGHT,
   DEFAULT_HEADER_ROW_HEIGHT,
@@ -5,11 +6,10 @@ import {
   SELECTION_CELL_WIDTH,
   TOOLBAR_HEIGHT,
 } from './constants';
-import styled, { css } from 'styled-components';
 
-import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
+import { DataGridCellFCProps } from './types';
 
 export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
   position: absolute;
@@ -304,6 +304,10 @@ type DataGridRowProps = {
 export const DataGridRow = styled.div<DataGridRowProps>`
   display: contents;
 
+  &:hover > ${DataGridCell} {
+    background-color: var(--color-blue-100);
+  }
+
   ${({ $edited }) =>
     $edited &&
     css`
@@ -311,6 +315,9 @@ export const DataGridRow = styled.div<DataGridRowProps>`
         background-color: var(--color-warning-100);
         color: var(--color-warning-900);
       }
+      &:hover > ${DataGridCell}, &:hover > ${SelectionCell} {
+        background-color: var(--color-blue-100);
+      }
     `}
 `;
 DataGridRow.displayName = 'DataGridRow';

package/src/components/forms/NumberInput.tsx

@@ -0,0 +1,53 @@
+import { HTMLProps, Ref, forwardRef, useEffect, useState } from 'react';
+import { decimalSeparator, parseNumber } from '../../helpers';
+
+import { NumericFormat } from 'react-number-format';
+
+const NumberInputInner = (
+  {
+    value,
+    onChange,
+    decimals = 0,
+    prefix,
+    suffix,
+    multiplicator = 1,
+    ...props
+  }: Omit<
+    HTMLProps<HTMLInputElement>,
+    'type' | 'value' | 'onChange' | 'defaultValue'
+  > & {
+    value?: number;
+    onChange?: (value: number) => void;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    multiplicator?: number;
+  },
+  ref: Ref<HTMLInputElement>
+) => {
+  const [displayedValue, setDisplayedValue] = useState<number>(
+    Number(value) ?? 0
+  );
+
+  useEffect(() => {
+    setDisplayedValue((value ?? 0) * multiplicator);
+  }, [multiplicator, value]);
+
+  return (
+    <NumericFormat
+      getInputRef={ref}
+      value={displayedValue}
+      onChange={(e) => {
+        onChange?.(parseNumber(e.target.value) / multiplicator);
+      }}
+      decimalSeparator={decimalSeparator}
+      decimalScale={decimals}
+      fixedDecimalScale={!!decimals}
+      prefix={prefix ? prefix + ' ' : undefined}
+      suffix={suffix ? ' ' + suffix : undefined}
+      {...props}
+    />
+  );
+};
+
+export const NumberInput = forwardRef(NumberInputInner);

package/src/components/forms/index.ts

@@ -6,3 +6,4 @@ export * from './IndeterminateCheckbox';
 export * from './Form';
 export * from './Form/Row';
 export * from './styles';
+export * from './NumberInput';

package/src/components/ui/Avatar/styles.ts

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components';
-
-export type AvatarContainerProps = {
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const stylesMap: Record<
-  AvatarContainerProps['size'],
-  ReturnType<typeof css>
-> = {
-  xs: css`
-    width: var(--size-6);
-    height: var(--size-6);
-    min-width: var(--size-6);
-    min-height: var(--size-6);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs);
-  `,
-  sm: css`
-    width: var(--size-8);
-    height: var(--size-8);
-    min-width: var(--size-8);
-    min-height: var(--size-8);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm);
-  `,
-  md: css`
-    width: var(--size-10);
-    height: var(--size-10);
-    min-width: var(--size-10);
-    min-height: var(--size-10);
-    font-size: var(--text-md);
-    line-height: var(--text-md);
-  `,
-  lg: css`
-    width: var(--size-12);
-    height: var(--size-12);
-    min-width: var(--size-12);
-    min-height: var(--size-12);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg);
-  `,
-  xl: css`
-    width: var(--size-14);
-    height: var(--size-14);
-    min-width: var(--size-14);
-    min-height: var(--size-14);
-    font-size: var(--text-2xl);
-    line-height: var(--text-2xl);
-  `,
-};
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-full);
-  user-select: none;
-
-  ${({ size }) => stylesMap[size]}
-`;
+import styled, { css } from 'styled-components';
+
+export type AvatarContainerProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const stylesMap: Record<
+  AvatarContainerProps['size'],
+  ReturnType<typeof css>
+> = {
+  xs: css`
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs);
+  `,
+  sm: css`
+    width: var(--size-8);
+    height: var(--size-8);
+    min-width: var(--size-8);
+    min-height: var(--size-8);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  `,
+  md: css`
+    width: var(--size-10);
+    height: var(--size-10);
+    min-width: var(--size-10);
+    min-height: var(--size-10);
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  `,
+  lg: css`
+    width: var(--size-12);
+    height: var(--size-12);
+    min-width: var(--size-12);
+    min-height: var(--size-12);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  `,
+  xl: css`
+    width: var(--size-14);
+    height: var(--size-14);
+    min-width: var(--size-14);
+    min-height: var(--size-14);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl);
+  `,
+};
+
+export const AvatarContainer = styled.div<AvatarContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rounded-full);
+  user-select: none;
+
+  ${({ size }) => stylesMap[size]}
+`;