jamespot-react-components 1.0.3 → 1.0.65

package/.history/src/components/JRCAvatar/JRCAvatar_20211215111145.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    &&& {
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'white'}}
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-            vertical-align: middle;
-        }
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211215111233.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    &&& {
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'white'}}
-                       vertical-align: middle;
-
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211215111240.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    &&& {
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'white'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211220162840.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'white'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211220162848.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211220164211.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'white'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211220164215.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-           background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221115746.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-{
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-        background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221115750.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    {
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-        background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221120044.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-        background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;