@ftdata/ui 0.0.1

package/dist/assets/RefreshIcon.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+const RefreshIcon = (props)=>/*#__PURE__*/ jsx("svg", {
+        ...props,
+        stroke: "currentColor",
+        fill: "currentColor",
+        strokeWidth: "0",
+        viewBox: "0 0 512 512",
+        height: "20",
+        width: "20",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M433 288.8c-7.7 0-14.3 5.9-14.9 13.6-6.9 83.1-76.8 147.9-161.8 147.9-89.5 0-162.4-72.4-162.4-161.4 0-87.6 70.6-159.2 158.2-161.4 2.3-.1 4.1 1.7 4.1 4v50.3c0 12.6 13.9 20.2 24.6 13.5L377 128c10-6.3 10-20.8 0-27.1l-96.1-66.4c-10.7-6.7-24.6.9-24.6 13.5v45.7c0 2.2-1.7 4-3.9 4C148 99.8 64 184.6 64 288.9 64 394.5 150.1 480 256.3 480c100.8 0 183.4-76.7 191.6-175.1.8-8.7-6.2-16.1-14.9-16.1z"
+        })
+    });
+const assets_RefreshIcon = RefreshIcon;
+export { assets_RefreshIcon as default };

package/dist/assets/SearchIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const SearchIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SearchIcon;

package/dist/assets/SearchIcon.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SearchIcon_SearchIcon = (props)=>/*#__PURE__*/ jsxs("svg", {
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M11.0585 18.12C14.9587 18.12 18.1205 14.9582 18.1205 11.058C18.1205 7.15783 14.9587 3.99609 11.0585 3.99609C7.15832 3.99609 3.99658 7.15783 3.99658 11.058C3.99658 14.9582 7.15832 18.12 11.0585 18.12Z",
+                stroke: "#6B757C",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M20.001 20.0005L16.0493 16.0488",
+                stroke: "#6B757C",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+const SearchIcon = SearchIcon_SearchIcon;
+export { SearchIcon as default };

package/dist/assets/SendIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const Send: FC;
+export default Send;

package/dist/assets/SendIcon.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const Send = ()=>/*#__PURE__*/ jsx("svg", {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.8452 18.313L17.9072 7.35396C18.2052 6.54996 17.4222 5.76696 16.6182 6.06496L5.65419 10.13C4.73019 10.473 4.80319 11.803 5.75819 12.043L10.6982 13.284L11.9312 18.208C12.1712 19.164 13.5022 19.237 13.8452 18.313V18.313Z",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+const SendIcon = Send;
+export { SendIcon as default };

package/dist/assets/StreetView.d.ts

@@ -0,0 +1,2 @@
+declare const StreetView: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default StreetView;

package/dist/assets/StreetView.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const StreetView = (props)=>/*#__PURE__*/ jsxs("svg", {
+        ...props,
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M11.7003 4.9971C12.5291 4.9971 13.201 4.32525 13.201 3.49647C13.201 2.6677 12.5291 1.99585 11.7003 1.99585C10.8716 1.99585 10.1997 2.6677 10.1997 3.49647C10.1997 4.32525 10.8716 4.9971 11.7003 4.9971Z",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M10.9997 16.0017H12.6004C13.2007 16.0017 13.6008 15.6015 13.6008 15.0013V12.2501L14.6012 11.0496C14.7013 10.8495 14.8013 10.6495 14.8013 10.4494V8.24846C14.8013 7.64821 14.4012 7.24805 13.8009 7.24805H9.79924C9.19899 7.24805 8.79883 7.64821 8.79883 8.24846V10.4494C8.79883 10.6495 8.89887 10.8495 8.99891 11.0496L9.99933 12.2501V15.0013C9.99933 15.6015 10.3995 16.0017 10.9997 16.0017Z",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M10.7998 21.0038L12.0003 19.8033L10.7998 18.6028",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M18.0027 13.7048C19.8394 14.3441 21.0039 15.2675 21.0039 16.3019C21.0039 17.7745 18.6629 19.0331 15.3516 19.5503",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M5.99783 13.7048C4.16107 14.3441 2.99658 15.2675 2.99658 16.3019C2.99658 18.2357 7.02726 19.8034 12.0003 19.8034",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+const assets_StreetView = StreetView;
+export { assets_StreetView as default };

package/dist/assets/SwitchCheckMarkIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC, SVGProps } from "react";
+declare const SwitchCheckMark: FC<SVGProps<SVGSVGElement>>;
+export default SwitchCheckMark;

package/dist/assets/SwitchCheckMarkIcon.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SwitchCheckMark = (props)=>/*#__PURE__*/ jsxs("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs("g", {
+                clipPath: "url(#switch-check)",
+                children: [
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M-15.5 -15.5H31.5V31.5H-15.5V-15.5Z",
+                        stroke: "#CF1C26"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M13.606 5.204L6.604 12.206L2.398 8.004",
+                        stroke: "#CF1C26",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("clipPath", {
+                    id: "switch-check",
+                    children: /*#__PURE__*/ jsx("rect", {
+                        width: "16",
+                        height: "16",
+                        fill: "white"
+                    })
+                })
+            })
+        ]
+    });
+const SwitchCheckMarkIcon = SwitchCheckMark;
+export { SwitchCheckMarkIcon as default };

package/dist/assets/WarningIcon.d.ts

@@ -0,0 +1,2 @@
+declare const WarningIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default WarningIcon;

package/dist/assets/WarningIcon.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const WarningIcon_WarningIcon = (props)=>/*#__PURE__*/ jsxs("svg", {
+        ...props,
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M8 2V2C11.314 2 14 4.686 14 8V8C14 11.314 11.314 14 8 14V14C4.686 14 2 11.314 2 8V8C2 4.686 4.686 2 8 2Z",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M7.99996 8.33333V5",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M7.9993 10.6667C7.9073 10.6667 7.83263 10.7413 7.8333 10.8333C7.8333 10.9253 7.90796 11 7.99996 11C8.09196 11 8.16663 10.9253 8.16663 10.8333C8.16663 10.7413 8.09196 10.6667 7.9993 10.6667",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+const WarningIcon = WarningIcon_WarningIcon;
+export { WarningIcon as default };

package/dist/assets/gif/how-to-use.js

@@ -0,0 +1,2 @@
+import how_to_use_namespaceObject from "../../static/image/how-to-use.gif";
+export { how_to_use_namespaceObject as default };

package/dist/assets/iconMenu/SettingsIcon.d.ts

@@ -0,0 +1,2 @@
+declare const SettingsIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SettingsIcon;

package/dist/assets/iconMenu/SettingsIcon.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const SettingsIcon = (props)=>/*#__PURE__*/ jsxs("svg", {
+        ...props,
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12.8005 2.99658C13.2226 2.99658 13.5992 3.26161 13.7419 3.65886L14.2501 5.07445C14.3308 5.29705 14.4874 5.48409 14.6923 5.60267L16.1999 6.47303C16.4046 6.59115 16.6446 6.63297 16.8772 6.59108L18.3578 6.32397C18.7736 6.24837 19.192 6.44217 19.4033 6.80817L20.2036 8.18874C20.4154 8.55375 20.3754 9.01241 20.1035 9.33522L19.1321 10.4837C18.9791 10.6643 18.8951 10.8933 18.895 11.13V12.8707C18.8951 13.1074 18.9791 13.3364 19.1321 13.517L20.1035 14.6654C20.3754 14.9882 20.4154 15.4469 20.2036 15.8119L19.4033 17.1925C19.1922 17.5581 18.7743 17.7518 18.3588 17.6767L16.8782 17.4096C16.6456 17.3677 16.4056 17.4095 16.2009 17.5276L14.6933 18.398C14.4884 18.5166 14.3318 18.7036 14.2511 18.9262L13.7429 20.3418C13.6001 20.7394 13.223 21.0044 12.8005 21.0041H11.1998C10.7777 21.0041 10.4011 20.7391 10.2584 20.3418L9.75023 18.9262C9.66959 18.7039 9.51345 18.517 9.30905 18.398L7.80042 17.5276C7.59569 17.4095 7.35576 17.3677 7.12314 17.4096L5.64252 17.6767C5.22675 17.7523 4.80832 17.5585 4.59709 17.1925L3.79675 15.8119C3.58495 15.4469 3.62498 14.9882 3.8968 14.6654L4.8682 13.517C5.02119 13.3364 5.1052 13.1074 5.1053 12.8707V11.13C5.1052 10.8933 5.02119 10.6643 4.8682 10.4837L3.9068 9.33522C3.63498 9.01241 3.59496 8.55375 3.80676 8.18874L4.60709 6.80817C4.81819 6.44256 5.23609 6.24882 5.65153 6.32397L7.13214 6.59108C7.36476 6.63297 7.6047 6.59115 7.80942 6.47303L9.31805 5.60267C9.52245 5.48371 9.67859 5.29677 9.75924 5.07445L10.2674 3.65886C10.409 3.2647 10.7811 3.00042 11.1998 2.99658H12.8005Z",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12.0002 14.7513C13.5196 14.7513 14.7513 13.5196 14.7513 12.0002C14.7513 10.4808 13.5196 9.24902 12.0002 9.24902C10.4808 9.24902 9.24902 10.4808 9.24902 12.0002C9.24902 13.5196 10.4808 14.7513 12.0002 14.7513Z",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+const iconMenu_SettingsIcon = SettingsIcon;
+export { iconMenu_SettingsIcon as default };

package/dist/assets/img/cover.js

@@ -0,0 +1,2 @@
+import cover_namespaceObject from "../../static/image/cover.png";
+export { cover_namespaceObject as default };

package/dist/assets/img/map-sample.js

@@ -0,0 +1,2 @@
+import map_sample_namespaceObject from "../../static/image/map-sample.png";
+export { map_sample_namespaceObject as default };

package/dist/assets/img/photo-goes-here.js

@@ -0,0 +1,2 @@
+import photo_goes_here_namespaceObject from "../../static/image/photo-goes-here.png";
+export { photo_goes_here_namespaceObject as default };

package/dist/assets/svg/chat.js

@@ -0,0 +1,2 @@
+import chat_namespaceObject from "../../static/svg/chat.svg";
+export { chat_namespaceObject as default };

package/dist/assets/svg/colored-item.js

@@ -0,0 +1,2 @@
+import colored_item_namespaceObject from "../../static/svg/colored-item.svg";
+export { colored_item_namespaceObject as default };

package/dist/assets/svg/mailbox-bro.js

@@ -0,0 +1,2 @@
+import mailbox_bro_namespaceObject from "../../static/svg/mailbox-bro.svg";
+export { mailbox_bro_namespaceObject as default };

package/dist/assets/svg/star-favorite.js

@@ -0,0 +1,2 @@
+import star_favorite_namespaceObject from "../../static/svg/star-favorite.svg";
+export { star_favorite_namespaceObject as default };

package/dist/assets/travolta.js

@@ -0,0 +1,2 @@
+import travolta_namespaceObject from "../static/image/travolta.jpg";
+export { travolta_namespaceObject as default };

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Avatar from ".";
+/**
+ * Avatares são usados para mostrar a imagem de perfil dos usuários.
+ * Este componente também funciona com os atributos nativos de um HTML image element.
+ */
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Avatar quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Todas as variações padrão de tamanho do Avatar.
+ */
+export declare const Sizes: Story;
+/**
+ * Variante do Avatar com nome de usuário.
+ */
+export declare const Alt: Story;
+/**
+ * Variação do Avatar quando o usuário está online.
+ */
+export declare const Active: Story;
+/**
+ * Variação do Avatar com imagem de usuário personalizada.
+ */
+export declare const CustomImage: Story;
+/**
+ * Todas as variações de cores baseadas no index do avatar.
+ */
+export declare const Index: Story;

package/dist/components/Avatar/Avatar.stories.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import index from "./index.js";
+const meta = {
+    title: "UI/Avatar",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        size: {
+            control: {
+                type: "inline-radio"
+            },
+            description: "Define o tamanho do avatar.",
+            table: {
+                type: {
+                    summary: '"large" | "medium" | "small" | "mini"'
+                }
+            }
+        },
+        active: {
+            description: "Define se o usu\xe1rio est\xe1 online ou offline (Pontinho verde no canto inferior direito).",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        alt: {
+            description: "Define a propriedade alt da imagem. Representa tamb\xe9m o nome de usu\xe1rio.",
+            table: {
+                defaultValue: {
+                    summary: '"Jhon Doe"'
+                }
+            }
+        },
+        src: {
+            control: {
+                type: "text"
+            },
+            description: `Define a fonte da imagem do avatar. Se n\xe3o for definida, 
+                          a imagem ser\xe1 composta pelas iniciais do texto descritivo (alt) do avatar.`,
+            type: "string"
+        },
+        index: {
+            description: "Define a cor do avatar baseado em um index"
+        }
+    }
+};
+const Avatar_stories = meta;
+const Default = {
+    args: {
+        size: "large"
+    }
+};
+const Sizes = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "2.5rem",
+                width: "100%"
+            },
+            children: [
+                /*#__PURE__*/ jsx(index, {
+                    size: "large"
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "medium"
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "small"
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "mini"
+                })
+            ]
+        }),
+    argTypes: {
+        src: {
+            control: false
+        },
+        alt: {
+            control: false
+        },
+        active: {
+            control: false
+        }
+    }
+};
+const Alt = {
+    args: {
+        alt: "Alt Name",
+        size: "large"
+    }
+};
+const Active = {
+    args: {
+        active: true,
+        size: "large"
+    }
+};
+const CustomImage = {
+    args: {
+        src: "",
+        size: "large"
+    }
+};
+const Index = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "2.5rem",
+                width: "100%"
+            },
+            children: [
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "0",
+                    index: 0
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "1",
+                    index: 1
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "2",
+                    index: 2
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "3",
+                    index: 3
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "4",
+                    index: 4
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "5",
+                    index: 5
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "6",
+                    index: 6
+                }),
+                /*#__PURE__*/ jsx(index, {
+                    size: "large",
+                    alt: "7",
+                    index: 7
+                })
+            ]
+        }),
+    argTypes: {
+        src: {
+            control: false
+        },
+        alt: {
+            control: false
+        },
+        active: {
+            control: false
+        }
+    }
+};
+export { Active, Alt, CustomImage, Default, Index, Sizes, Avatar_stories as default };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,7 @@
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    alt?: string;
+    active?: boolean;
+    size?: "large" | "medium" | "small" | "mini";
+    index?: number;
+}
+export default function Avatar({ alt, src, active, size, index, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/index.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Image, StatusDot, Wrapper } from "./styles.js";
+import { getAvatarColors } from "./utils/getAvatarColors.js";
+function Avatar({ alt, src, active, size = "medium", index, ...rest }) {
+    const imageSource = ()=>{
+        if (src) return src;
+        const { background, fontColor } = getAvatarColors(index);
+        const name = alt?.length ? alt.split(" ").join("+") : "John Doe";
+        return `https://ui-avatars.com/api/
+			?name=${name}
+			&length=2
+			&size=40
+			&bold=true
+			&background=${background.replace("#", "")}
+			&color=${fontColor.replace("#", "")}`;
+    };
+    return /*#__PURE__*/ jsxs(Wrapper, {
+        size: size,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Image, {
+                src: imageSource()
+            }),
+            active && "mini" !== size && /*#__PURE__*/ jsx(StatusDot, {})
+        ]
+    });
+}
+export { Avatar as default };

package/dist/components/Avatar/styles.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from ".";
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AvatarProps>> & string;
+export declare const Image: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const StatusDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/Avatar/styles.js

@@ -0,0 +1,37 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DAY, COLOR_SUCCESS_MEDIUM } from "@ftdata/f-tokens";
+const AVATAR_SIZES = {
+    large: "height: 2.5rem; width: 2.5rem;",
+    medium: "height: 2rem; width: 2rem;",
+    small: "height: 1.5rem; width: 1.5rem;",
+    mini: "height: 1rem; width: 1rem;"
+};
+const Wrapper = styled_components.div`
+  border-radius: 50%;
+  background-color: ${COLOR_NEUTRAL_DAY};
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  ${({ size })=>AVATAR_SIZES[size ? size : "medium"]};
+`;
+const Image = styled_components.img`
+  border-radius: 50%;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
+const StatusDot = styled_components.span`
+  background-color: ${COLOR_SUCCESS_MEDIUM};
+  border-color: ${COLOR_NEUTRAL_DAY};
+  border-style: solid;
+  border-width: 0.125rem;
+  border-radius: 50%;
+  bottom: -0.125rem;
+  display: block;
+  height: 0.5rem;
+  position: absolute;
+  right: -0.125rem;
+  width: 0.5rem;
+`;
+export { Image, StatusDot, Wrapper };

package/dist/components/Avatar/utils/getAvatarColors.d.ts

@@ -0,0 +1,6 @@
+interface AvatarColors {
+    background: string;
+    fontColor: string;
+}
+export declare const getAvatarColors: (index?: number) => AvatarColors;
+export {};

package/dist/components/Avatar/utils/getAvatarColors.js

@@ -0,0 +1,48 @@
+import { COLOR_VISUAL_BLUE, COLOR_VISUAL_CYAN, COLOR_VISUAL_GREEN, COLOR_VISUAL_ORANGE, COLOR_VISUAL_PURPLE, COLOR_VISUAL_RED, COLOR_VISUAL_VIOLET, COLOR_VISUAL_YELLOW } from "@ftdata/f-tokens";
+const AVATAR_COLORS = [
+    {
+        background: `${COLOR_VISUAL_BLUE}2d`,
+        fontColor: COLOR_VISUAL_BLUE
+    },
+    {
+        background: `${COLOR_VISUAL_CYAN}2d`,
+        fontColor: COLOR_VISUAL_CYAN
+    },
+    {
+        background: `${COLOR_VISUAL_GREEN}2d`,
+        fontColor: COLOR_VISUAL_GREEN
+    },
+    {
+        background: `${COLOR_VISUAL_YELLOW}2d`,
+        fontColor: COLOR_VISUAL_YELLOW
+    },
+    {
+        background: `${COLOR_VISUAL_ORANGE}2d`,
+        fontColor: COLOR_VISUAL_ORANGE
+    },
+    {
+        background: `${COLOR_VISUAL_RED}2d`,
+        fontColor: COLOR_VISUAL_RED
+    },
+    {
+        background: `${COLOR_VISUAL_VIOLET}2d`,
+        fontColor: COLOR_VISUAL_VIOLET
+    },
+    {
+        background: `${COLOR_VISUAL_PURPLE}2d`,
+        fontColor: COLOR_VISUAL_PURPLE
+    }
+];
+const getAvatarColors = (index)=>{
+    if (void 0 === index) {
+        const random = Math.floor(Math.random() * AVATAR_COLORS.length);
+        return AVATAR_COLORS[random];
+    }
+    if (index >= 0) {
+        const wrapped = index % AVATAR_COLORS.length;
+        return AVATAR_COLORS[wrapped];
+    }
+    const random = Math.floor(Math.random() * AVATAR_COLORS.length);
+    return AVATAR_COLORS[random];
+};
+export { getAvatarColors };