@dust-tt/sparkle 0.3.5 → 0.3.7

package/dist/esm/stories/Avatar.stories.js

@@ -1,349 +1,425 @@
 import React from "react";
+import { AVATAR_SIZES } from "../components/Avatar";
 import { ActionBeerIcon, ActionFlagIcon, ActionImageIcon, ActionMagnifyingGlassIcon, ActionScanIcon, ActionShirtIcon, ActionTableIcon, ActionUmbrellaIcon, } from "../icons/actions";
 import SvgHome from "../icons/actions/Home";
 import { StarStrokeIcon } from "../icons/app";
 import { Avatar, DriveLogo, NotionLogo, SlackLogo, } from "../index_with_tw_base";
+var ICONS = {
+    none: null,
+    ActionBeerIcon: ActionBeerIcon,
+    StarStrokeIcon: StarStrokeIcon,
+};
 var meta = {
     title: "Components/Avatar",
     component: Avatar,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            options: AVATAR_SIZES,
+            control: { type: "select" },
+            description: "Size of the avatar",
+        },
+        name: {
+            control: "text",
+            description: "Name to display (shows first letter or full name for special characters)",
+        },
+        visual: {
+            control: "text",
+            description: "URL to an image or emoji URL",
+        },
+        emoji: {
+            control: "text",
+            description: "Emoji to display in the avatar",
+        },
+        icon: {
+            options: Object.keys(ICONS),
+            mapping: ICONS,
+            control: { type: "select" },
+            description: "Icon component to display",
+        },
+        backgroundColor: {
+            control: "text",
+            description: "Tailwind background color class (e.g., 's-bg-blue-200')",
+        },
+        iconColor: {
+            control: "text",
+            description: "Tailwind text color class for icon (e.g., 's-text-gray-50')",
+        },
+        clickable: {
+            control: "boolean",
+            description: "Whether the avatar has hover effects",
+        },
+        busy: {
+            control: "boolean",
+            description: "Whether to show breathing animation",
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the avatar is disabled (reduced opacity)",
+        },
+        isRounded: {
+            control: "boolean",
+            description: "Whether to use fully rounded (circle) style",
+        },
+    },
 };
 export default meta;
+export var Playground = {
+    args: {
+        size: "md",
+        name: "John Doe",
+        clickable: false,
+        busy: false,
+        disabled: false,
+        isRounded: false,
+    },
+};
 var gridStyle = {
     display: "grid",
     gridTemplateColumns: "repeat(auto-fill, minmax(60px, 1fr))",
     gap: "48px 16px",
 };
-export var AvatarExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4 s-text-foreground dark:s-text-foreground-night" },
-    React.createElement("div", null, "With nothing"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs" }),
-        React.createElement(Avatar, { size: "sm" }),
-        React.createElement(Avatar, { size: "md" }),
-        React.createElement(Avatar, { size: "lg" }),
-        React.createElement(Avatar, { size: "xl" }),
-        React.createElement(Avatar, { size: "2xl" })),
-    React.createElement("div", null, "With name"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", name: "Isabelle Doe" }),
-        React.createElement(Avatar, { size: "sm", name: "Rafael Doe" }),
-        React.createElement(Avatar, { size: "md", name: "Aria Doe" }),
-        React.createElement(Avatar, { size: "lg", name: "Omar Doe" }),
-        React.createElement(Avatar, { size: "xl", name: "Omar Doe" }),
-        React.createElement(Avatar, { size: "2xl", name: "Omar Doe" })),
-    React.createElement("div", null, "With emoji url"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", visual: "https://dust.tt/static/emojis/bg-cyan-100/lotus/1fab7" })),
-    React.createElement("div", null, "With emoji"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", emoji: "\u2764\uFE0F", backgroundColor: "s-bg-red-100" }),
-        React.createElement(Avatar, { size: "sm", emoji: "\uD83D\uDC80", backgroundColor: "s-bg-gray-800" }),
-        React.createElement(Avatar, { size: "md", emoji: "\uD83D\uDE02", backgroundColor: "s-bg-info-200" }),
-        React.createElement(Avatar, { size: "lg", emoji: "\uD83E\uDDD1\u200D\uD83D\uDE80", backgroundColor: "s-bg-gray-200" }),
-        React.createElement(Avatar, { size: "xl", emoji: "\uD83D\uDC55", backgroundColor: "s-bg-blue-200" }),
-        React.createElement(Avatar, { size: "2xl", emoji: "\uD83D\uDC55", backgroundColor: "s-bg-blue-200" })),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "sm", name: "Eleanor Wright" }),
-        React.createElement(Avatar, { size: "sm", name: "Mason Johnson" }),
-        React.createElement(Avatar, { size: "sm", name: "Oliver Bennett" }),
-        React.createElement(Avatar, { size: "sm", name: "Sophia Garcia" }),
-        React.createElement(Avatar, { size: "sm", name: "Lucas Adams" }),
-        React.createElement(Avatar, { size: "sm", name: "Ava Torres" }),
-        React.createElement(Avatar, { size: "sm", name: "Liam White" }),
-        React.createElement(Avatar, { size: "sm", name: "Emma Jenkins" }),
-        React.createElement(Avatar, { size: "sm", name: "Noah Martinez" }),
-        React.createElement(Avatar, { size: "sm", name: "Isabella Thompson" }),
-        React.createElement(Avatar, { size: "sm", name: "Ethan Roberts" }),
-        React.createElement(Avatar, { size: "sm", name: "Charlotte Turner" }),
-        React.createElement(Avatar, { size: "sm", name: "Benjamin Foster" }),
-        React.createElement(Avatar, { size: "sm", name: "Mia Evans" }),
-        React.createElement(Avatar, { size: "sm", name: "Alexander Perry" }),
-        React.createElement(Avatar, { size: "sm", name: "Harper Sanchez" }),
-        React.createElement(Avatar, { size: "sm", name: "William Murphy" }),
-        React.createElement(Avatar, { size: "sm", name: "Lily Phillips" }),
-        React.createElement(Avatar, { size: "sm", name: "James Coleman" }),
-        React.createElement(Avatar, { size: "sm", name: "Aria Mitchell" })),
-    React.createElement("div", null, "With image"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
-        React.createElement(Avatar, { size: "sm", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
-        React.createElement(Avatar, { size: "md", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
-        React.createElement(Avatar, { size: "lg", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" })),
-    React.createElement("div", null, "With icon"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", icon: SvgHome }),
-        React.createElement(Avatar, { size: "xs", icon: DriveLogo }),
-        React.createElement(Avatar, { size: "sm", icon: ActionBeerIcon }),
-        React.createElement(Avatar, { size: "sm", icon: NotionLogo, backgroundColor: "s-bg-blue-50" }),
-        React.createElement(Avatar, { size: "md", icon: ActionUmbrellaIcon }),
-        React.createElement(Avatar, { size: "lg", icon: ActionFlagIcon }),
-        React.createElement(Avatar, { size: "lg", icon: SlackLogo, hexBgColor: "#421D51" }),
-        React.createElement(Avatar, { size: "xl", icon: ActionShirtIcon }),
-        React.createElement(Avatar, { size: "2xl", icon: StarStrokeIcon })),
-    React.createElement("div", { className: "heading-2xl" }, "Tools example"),
-    React.createElement("div", null, "Remote MCP Servers"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "md", icon: SvgHome }),
-        React.createElement(Avatar, { size: "md", icon: ActionBeerIcon }),
-        React.createElement(Avatar, { size: "md", icon: ActionUmbrellaIcon }),
-        React.createElement(Avatar, { size: "md", icon: ActionFlagIcon }),
-        React.createElement(Avatar, { size: "md", icon: ActionShirtIcon }),
-        React.createElement(Avatar, { size: "md", icon: StarStrokeIcon })),
-    React.createElement("div", null, "Internal Tools Servers"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "md", icon: ActionTableIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }),
-        React.createElement(Avatar, { size: "md", icon: ActionMagnifyingGlassIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }),
-        React.createElement(Avatar, { size: "md", icon: ActionImageIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }),
-        React.createElement(Avatar, { size: "md", icon: ActionScanIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" })),
-    React.createElement("div", null, "Platforms integrations"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "md", icon: DriveLogo, backgroundColor: "s-bg-gray-900" }),
-        React.createElement(Avatar, { size: "md", icon: NotionLogo, backgroundColor: "s-bg-white" }),
-        React.createElement(Avatar, { size: "md", icon: SlackLogo, hexBgColor: "#421D51" })))); };
-export var AvatarStackExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-6" },
-    React.createElement("div", { className: "s-flex s-flex-row s-gap-2" },
-        React.createElement(Avatar.Stack, { size: "xs", nbVisibleItems: 3, isRounded: true, avatars: [
-                {
-                    name: "Isabelle Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-                },
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                {
-                    name: "Aria Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
-                },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-            ] }),
-        React.createElement(Avatar.Stack, { size: "xs", nbVisibleItems: 6, avatars: [
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                { name: "Mason Johnson" },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-                { name: "Eleanor Wright" },
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                { name: "Mason Johnson" },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-                { name: "Eleanor Wright" },
-            ] }),
-        React.createElement(Avatar.Stack, { size: "xs", nbVisibleItems: 1, avatars: [
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-            ] })),
-    React.createElement("div", { className: "s-flex s-flex-row s-gap-2" },
-        React.createElement(Avatar.Stack, { size: "sm", nbVisibleItems: 4, isRounded: true, avatars: [
-                {
-                    name: "Isabelle Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-                },
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                {
-                    name: "Aria Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
-                },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-            ] }),
-        React.createElement(Avatar.Stack, { size: "sm", nbVisibleItems: 3, avatars: [
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                { name: "Mason Johnson" },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-                { name: "Eleanor Wright" },
-            ] }),
-        React.createElement(Avatar.Stack, { nbVisibleItems: 1, avatars: [
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-            ] })),
-    React.createElement("div", { className: "s-flex s-flex-row s-gap-4" },
-        React.createElement(Avatar.Stack, { nbVisibleItems: 4, size: "md", avatars: [
-                {
-                    name: "Isabelle Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-                },
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                {
-                    name: "Aria Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
-                },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-            ] }),
-        React.createElement(Avatar.Stack, { size: "md", nbVisibleItems: 3, avatars: [
-                {
-                    name: "Isabelle Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-                },
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-                {
-                    name: "Aria Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
-                },
-                {
-                    name: "Omar Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
-                },
-            ] }),
-        React.createElement(Avatar.Stack, { size: "md", avatars: [
-                {
-                    name: "Rafael Doe",
-                    visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
-                },
-            ] })))); };
-export var AvatarGridExample = function () { return (React.createElement("div", { style: gridStyle },
-    React.createElement(Avatar, { size: "auto" }),
-    React.createElement(Avatar, { size: "auto" }),
-    React.createElement(Avatar, { size: "auto" }),
-    React.createElement(Avatar, { size: "auto" }),
-    React.createElement(Avatar, { size: "auto" }),
-    React.createElement(Avatar, { size: "auto", name: "Isabelle Doe" }),
-    React.createElement(Avatar, { size: "auto", name: "Rafael Doe" }),
-    React.createElement(Avatar, { size: "auto", name: "Aria Doe" }),
-    React.createElement(Avatar, { size: "auto", name: "Omar Doe" }),
-    React.createElement(Avatar, { size: "auto", name: "Omar Doe" }),
-    React.createElement(Avatar, { size: "auto", name: "Eleanor Wright" }),
-    React.createElement(Avatar, { size: "auto", name: "Mason Johnson" }),
-    React.createElement(Avatar, { size: "auto", name: "Oliver Bennett" }),
-    React.createElement(Avatar, { size: "auto", name: "Sophia Garcia" }),
-    React.createElement(Avatar, { size: "auto", name: "Lucas Adams" }),
-    React.createElement(Avatar, { size: "auto", name: "Ava Torres" }),
-    React.createElement(Avatar, { size: "auto", name: "Liam White" }),
-    React.createElement(Avatar, { size: "auto", name: "Emma Jenkins" }),
-    React.createElement(Avatar, { size: "auto", name: "Noah Martinez" }),
-    React.createElement(Avatar, { size: "auto", name: "Isabella Thompson" }),
-    React.createElement(Avatar, { size: "auto", name: "Ethan Roberts" }),
-    React.createElement(Avatar, { size: "auto", name: "Charlotte Turner" }),
-    React.createElement(Avatar, { size: "auto", name: "Benjamin Foster" }),
-    React.createElement(Avatar, { size: "auto", name: "Mia Evans" }),
-    React.createElement(Avatar, { size: "auto", name: "Alexander Perry" }),
-    React.createElement(Avatar, { size: "auto", name: "Harper Sanchez" }),
-    React.createElement(Avatar, { size: "auto", name: "William Murphy" }),
-    React.createElement(Avatar, { size: "auto", name: "Lily Phillips" }),
-    React.createElement(Avatar, { size: "auto", name: "James Coleman" }),
-    React.createElement(Avatar, { size: "auto", name: "Aria Mitchell" }),
-    React.createElement(Avatar, { size: "auto", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
-    React.createElement(Avatar, { size: "auto", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg" }),
-    React.createElement(Avatar, { size: "auto", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg" }),
-    React.createElement(Avatar, { size: "auto", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg" }))); };
-export var AvatarBusyExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-    React.createElement("div", null, "With nothing"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { busy: true, size: "xs" }),
-        React.createElement(Avatar, { busy: true, size: "sm" }),
-        React.createElement(Avatar, { busy: true, size: "md" }),
-        React.createElement(Avatar, { busy: true, size: "lg" }),
-        React.createElement(Avatar, { busy: true, size: "xl" })),
-    React.createElement("div", null, "With name"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { busy: true, size: "xs", name: "Isabelle Doe" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Rafael Doe" }),
-        React.createElement(Avatar, { busy: true, size: "md", name: "Aria Doe" }),
-        React.createElement(Avatar, { busy: true, size: "lg", name: "Omar Doe" }),
-        React.createElement(Avatar, { busy: true, size: "xl", name: "Eleanor Doe" })),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Eleanor Wright" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Mason Johnson" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Oliver Bennett" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Sophia Garcia" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Lucas Adams" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Ava Torres" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Liam White" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Emma Jenkins" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Noah Martinez" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Isabella Thompson" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Ethan Roberts" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Charlotte Turner" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Benjamin Foster" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Mia Evans" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Alexander Perry" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Harper Sanchez" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "William Murphy" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Lily Phillips" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "James Coleman" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Aria Mitchell" })),
-    React.createElement("div", null, "With image"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { busy: true, size: "xs", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
-        React.createElement(Avatar, { busy: true, size: "sm", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg" }),
-        React.createElement(Avatar, { busy: true, size: "md", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg" }),
-        React.createElement(Avatar, { busy: true, size: "lg", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg" })))); };
-export var AvatarClickableExample = function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-    React.createElement("div", null, "With nothing"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", clickable: true }),
-        React.createElement(Avatar, { size: "sm", clickable: true }),
-        React.createElement(Avatar, { size: "md", clickable: true }),
-        React.createElement(Avatar, { size: "lg", clickable: true })),
-    React.createElement("div", null, "With name"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", name: "Isabelle Doe", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Rafael Doe", clickable: true }),
-        React.createElement(Avatar, { size: "md", name: "Aria Doe", clickable: true }),
-        React.createElement(Avatar, { size: "lg", name: "Omar Doe", clickable: true })),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "sm", name: "Eleanor Wright", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Mason Johnson", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Oliver Bennett", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Sophia Garcia", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Lucas Adams", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Ava Torres", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Liam White", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Emma Jenkins", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Noah Martinez", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Isabella Thompson", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Ethan Roberts", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Charlotte Turner", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Benjamin Foster", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Mia Evans", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Alexander Perry", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Harper Sanchez", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "William Murphy", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Lily Phillips", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "James Coleman", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Aria Mitchell", clickable: true })),
-    React.createElement("div", null, "With image"),
-    React.createElement("div", { className: "s-flex s-gap-4" },
-        React.createElement(Avatar, { size: "xs", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", clickable: true }),
-        React.createElement(Avatar, { size: "sm", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg", clickable: true }),
-        React.createElement(Avatar, { size: "md", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg", clickable: true }),
-        React.createElement(Avatar, { size: "lg", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg", clickable: true })))); };
+export var AvatarExample = {
+    render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4 s-text-foreground dark:s-text-foreground-night" },
+        React.createElement("div", null, "With nothing"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs" }),
+            React.createElement(Avatar, { size: "sm" }),
+            React.createElement(Avatar, { size: "md" }),
+            React.createElement(Avatar, { size: "lg" }),
+            React.createElement(Avatar, { size: "xl" }),
+            React.createElement(Avatar, { size: "2xl" })),
+        React.createElement("div", null, "With name"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", name: "Isabelle Doe" }),
+            React.createElement(Avatar, { size: "sm", name: "Rafael Doe" }),
+            React.createElement(Avatar, { size: "md", name: "Aria Doe" }),
+            React.createElement(Avatar, { size: "lg", name: "Omar Doe" }),
+            React.createElement(Avatar, { size: "xl", name: "Omar Doe" }),
+            React.createElement(Avatar, { size: "2xl", name: "Omar Doe" })),
+        React.createElement("div", null, "With emoji url"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", visual: "https://dust.tt/static/emojis/bg-cyan-100/lotus/1fab7" })),
+        React.createElement("div", null, "With emoji"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", emoji: "\u2764\uFE0F", backgroundColor: "s-bg-red-100" }),
+            React.createElement(Avatar, { size: "sm", emoji: "\uD83D\uDC80", backgroundColor: "s-bg-gray-800" }),
+            React.createElement(Avatar, { size: "md", emoji: "\uD83D\uDE02", backgroundColor: "s-bg-info-200" }),
+            React.createElement(Avatar, { size: "lg", emoji: "\uD83E\uDDD1\u200D\uD83D\uDE80", backgroundColor: "s-bg-gray-200" }),
+            React.createElement(Avatar, { size: "xl", emoji: "\uD83D\uDC55", backgroundColor: "s-bg-blue-200" }),
+            React.createElement(Avatar, { size: "2xl", emoji: "\uD83D\uDC55", backgroundColor: "s-bg-blue-200" })),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "sm", name: "Eleanor Wright" }),
+            React.createElement(Avatar, { size: "sm", name: "Mason Johnson" }),
+            React.createElement(Avatar, { size: "sm", name: "Oliver Bennett" }),
+            React.createElement(Avatar, { size: "sm", name: "Sophia Garcia" }),
+            React.createElement(Avatar, { size: "sm", name: "Lucas Adams" }),
+            React.createElement(Avatar, { size: "sm", name: "Ava Torres" }),
+            React.createElement(Avatar, { size: "sm", name: "Liam White" }),
+            React.createElement(Avatar, { size: "sm", name: "Emma Jenkins" }),
+            React.createElement(Avatar, { size: "sm", name: "Noah Martinez" }),
+            React.createElement(Avatar, { size: "sm", name: "Isabella Thompson" }),
+            React.createElement(Avatar, { size: "sm", name: "Ethan Roberts" }),
+            React.createElement(Avatar, { size: "sm", name: "Charlotte Turner" }),
+            React.createElement(Avatar, { size: "sm", name: "Benjamin Foster" }),
+            React.createElement(Avatar, { size: "sm", name: "Mia Evans" }),
+            React.createElement(Avatar, { size: "sm", name: "Alexander Perry" }),
+            React.createElement(Avatar, { size: "sm", name: "Harper Sanchez" }),
+            React.createElement(Avatar, { size: "sm", name: "William Murphy" }),
+            React.createElement(Avatar, { size: "sm", name: "Lily Phillips" }),
+            React.createElement(Avatar, { size: "sm", name: "James Coleman" }),
+            React.createElement(Avatar, { size: "sm", name: "Aria Mitchell" })),
+        React.createElement("div", null, "With image"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
+            React.createElement(Avatar, { size: "sm", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
+            React.createElement(Avatar, { size: "md", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
+            React.createElement(Avatar, { size: "lg", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" })),
+        React.createElement("div", null, "With icon"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", icon: SvgHome }),
+            React.createElement(Avatar, { size: "xs", icon: DriveLogo }),
+            React.createElement(Avatar, { size: "sm", icon: ActionBeerIcon }),
+            React.createElement(Avatar, { size: "sm", icon: NotionLogo, backgroundColor: "s-bg-blue-50" }),
+            React.createElement(Avatar, { size: "md", icon: ActionUmbrellaIcon }),
+            React.createElement(Avatar, { size: "lg", icon: ActionFlagIcon }),
+            React.createElement(Avatar, { size: "lg", icon: SlackLogo, hexBgColor: "#421D51" }),
+            React.createElement(Avatar, { size: "xl", icon: ActionShirtIcon }),
+            React.createElement(Avatar, { size: "2xl", icon: StarStrokeIcon })),
+        React.createElement("div", { className: "heading-2xl" }, "Tools example"),
+        React.createElement("div", null, "Remote MCP Servers"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "md", icon: SvgHome }),
+            React.createElement(Avatar, { size: "md", icon: ActionBeerIcon }),
+            React.createElement(Avatar, { size: "md", icon: ActionUmbrellaIcon }),
+            React.createElement(Avatar, { size: "md", icon: ActionFlagIcon }),
+            React.createElement(Avatar, { size: "md", icon: ActionShirtIcon }),
+            React.createElement(Avatar, { size: "md", icon: StarStrokeIcon })),
+        React.createElement("div", null, "Internal Tools Servers"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "md", icon: ActionTableIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }),
+            React.createElement(Avatar, { size: "md", icon: ActionMagnifyingGlassIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }),
+            React.createElement(Avatar, { size: "md", icon: ActionImageIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" }),
+            React.createElement(Avatar, { size: "md", icon: ActionScanIcon, backgroundColor: "s-bg-gray-700", iconColor: "s-text-gray-50" })),
+        React.createElement("div", null, "Platforms integrations"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "md", icon: DriveLogo, backgroundColor: "s-bg-gray-900" }),
+            React.createElement(Avatar, { size: "md", icon: NotionLogo, backgroundColor: "s-bg-white" }),
+            React.createElement(Avatar, { size: "md", icon: SlackLogo, hexBgColor: "#421D51" })))); },
+};
+export var AvatarStackExample = {
+    render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-6" },
+        React.createElement("div", { className: "s-flex s-flex-row s-gap-2" },
+            React.createElement(Avatar.Stack, { size: "xs", nbVisibleItems: 3, isRounded: true, avatars: [
+                    {
+                        name: "Isabelle Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+                    },
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    {
+                        name: "Aria Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+                    },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                ] }),
+            React.createElement(Avatar.Stack, { size: "xs", nbVisibleItems: 6, avatars: [
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    { name: "Mason Johnson" },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                    { name: "Eleanor Wright" },
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    { name: "Mason Johnson" },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                    { name: "Eleanor Wright" },
+                ] }),
+            React.createElement(Avatar.Stack, { size: "xs", nbVisibleItems: 1, avatars: [
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                ] })),
+        React.createElement("div", { className: "s-flex s-flex-row s-gap-2" },
+            React.createElement(Avatar.Stack, { size: "sm", nbVisibleItems: 4, isRounded: true, avatars: [
+                    {
+                        name: "Isabelle Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+                    },
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    {
+                        name: "Aria Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+                    },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                ] }),
+            React.createElement(Avatar.Stack, { size: "sm", nbVisibleItems: 3, avatars: [
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    { name: "Mason Johnson" },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                    { name: "Eleanor Wright" },
+                ] }),
+            React.createElement(Avatar.Stack, { nbVisibleItems: 1, avatars: [
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                ] })),
+        React.createElement("div", { className: "s-flex s-flex-row s-gap-4" },
+            React.createElement(Avatar.Stack, { nbVisibleItems: 4, size: "md", avatars: [
+                    {
+                        name: "Isabelle Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+                    },
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    {
+                        name: "Aria Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+                    },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                ] }),
+            React.createElement(Avatar.Stack, { size: "md", nbVisibleItems: 3, avatars: [
+                    {
+                        name: "Isabelle Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
+                    },
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                    {
+                        name: "Aria Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg",
+                    },
+                    {
+                        name: "Omar Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg",
+                    },
+                ] }),
+            React.createElement(Avatar.Stack, { size: "md", avatars: [
+                    {
+                        name: "Rafael Doe",
+                        visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg",
+                    },
+                ] })))); },
+};
+export var AvatarGridExample = {
+    render: function () { return (React.createElement("div", { style: gridStyle },
+        React.createElement(Avatar, { size: "auto" }),
+        React.createElement(Avatar, { size: "auto" }),
+        React.createElement(Avatar, { size: "auto" }),
+        React.createElement(Avatar, { size: "auto" }),
+        React.createElement(Avatar, { size: "auto" }),
+        React.createElement(Avatar, { size: "auto", name: "Isabelle Doe" }),
+        React.createElement(Avatar, { size: "auto", name: "Rafael Doe" }),
+        React.createElement(Avatar, { size: "auto", name: "Aria Doe" }),
+        React.createElement(Avatar, { size: "auto", name: "Omar Doe" }),
+        React.createElement(Avatar, { size: "auto", name: "Omar Doe" }),
+        React.createElement(Avatar, { size: "auto", name: "Eleanor Wright" }),
+        React.createElement(Avatar, { size: "auto", name: "Mason Johnson" }),
+        React.createElement(Avatar, { size: "auto", name: "Oliver Bennett" }),
+        React.createElement(Avatar, { size: "auto", name: "Sophia Garcia" }),
+        React.createElement(Avatar, { size: "auto", name: "Lucas Adams" }),
+        React.createElement(Avatar, { size: "auto", name: "Ava Torres" }),
+        React.createElement(Avatar, { size: "auto", name: "Liam White" }),
+        React.createElement(Avatar, { size: "auto", name: "Emma Jenkins" }),
+        React.createElement(Avatar, { size: "auto", name: "Noah Martinez" }),
+        React.createElement(Avatar, { size: "auto", name: "Isabella Thompson" }),
+        React.createElement(Avatar, { size: "auto", name: "Ethan Roberts" }),
+        React.createElement(Avatar, { size: "auto", name: "Charlotte Turner" }),
+        React.createElement(Avatar, { size: "auto", name: "Benjamin Foster" }),
+        React.createElement(Avatar, { size: "auto", name: "Mia Evans" }),
+        React.createElement(Avatar, { size: "auto", name: "Alexander Perry" }),
+        React.createElement(Avatar, { size: "auto", name: "Harper Sanchez" }),
+        React.createElement(Avatar, { size: "auto", name: "William Murphy" }),
+        React.createElement(Avatar, { size: "auto", name: "Lily Phillips" }),
+        React.createElement(Avatar, { size: "auto", name: "James Coleman" }),
+        React.createElement(Avatar, { size: "auto", name: "Aria Mitchell" }),
+        React.createElement(Avatar, { size: "auto", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
+        React.createElement(Avatar, { size: "auto", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg" }),
+        React.createElement(Avatar, { size: "auto", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg" }),
+        React.createElement(Avatar, { size: "auto", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg" }))); },
+};
+export var AvatarBusyExample = {
+    render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
+        React.createElement("div", null, "With nothing"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { busy: true, size: "xs" }),
+            React.createElement(Avatar, { busy: true, size: "sm" }),
+            React.createElement(Avatar, { busy: true, size: "md" }),
+            React.createElement(Avatar, { busy: true, size: "lg" }),
+            React.createElement(Avatar, { busy: true, size: "xl" })),
+        React.createElement("div", null, "With name"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { busy: true, size: "xs", name: "Isabelle Doe" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Rafael Doe" }),
+            React.createElement(Avatar, { busy: true, size: "md", name: "Aria Doe" }),
+            React.createElement(Avatar, { busy: true, size: "lg", name: "Omar Doe" }),
+            React.createElement(Avatar, { busy: true, size: "xl", name: "Eleanor Doe" })),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Eleanor Wright" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Mason Johnson" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Oliver Bennett" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Sophia Garcia" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Lucas Adams" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Ava Torres" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Liam White" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Emma Jenkins" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Noah Martinez" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Isabella Thompson" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Ethan Roberts" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Charlotte Turner" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Benjamin Foster" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Mia Evans" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Alexander Perry" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Harper Sanchez" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "William Murphy" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Lily Phillips" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "James Coleman" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Aria Mitchell" })),
+        React.createElement("div", null, "With image"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { busy: true, size: "xs", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" }),
+            React.createElement(Avatar, { busy: true, size: "sm", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg" }),
+            React.createElement(Avatar, { busy: true, size: "md", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg" }),
+            React.createElement(Avatar, { busy: true, size: "lg", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg" })))); },
+};
+export var AvatarClickableExample = {
+    render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
+        React.createElement("div", null, "With nothing"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", clickable: true }),
+            React.createElement(Avatar, { size: "sm", clickable: true }),
+            React.createElement(Avatar, { size: "md", clickable: true }),
+            React.createElement(Avatar, { size: "lg", clickable: true })),
+        React.createElement("div", null, "With name"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", name: "Isabelle Doe", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Rafael Doe", clickable: true }),
+            React.createElement(Avatar, { size: "md", name: "Aria Doe", clickable: true }),
+            React.createElement(Avatar, { size: "lg", name: "Omar Doe", clickable: true })),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "sm", name: "Eleanor Wright", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Mason Johnson", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Oliver Bennett", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Sophia Garcia", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Lucas Adams", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Ava Torres", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Liam White", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Emma Jenkins", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Noah Martinez", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Isabella Thompson", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Ethan Roberts", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Charlotte Turner", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Benjamin Foster", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Mia Evans", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Alexander Perry", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Harper Sanchez", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "William Murphy", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Lily Phillips", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "James Coleman", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Aria Mitchell", clickable: true })),
+        React.createElement("div", null, "With image"),
+        React.createElement("div", { className: "s-flex s-gap-4" },
+            React.createElement(Avatar, { size: "xs", name: "Isabelle Doe", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg", clickable: true }),
+            React.createElement(Avatar, { size: "sm", name: "Rafael Doe", visual: "https://dust.tt/static/droidavatar/Droid_Yellow_3.jpg", clickable: true }),
+            React.createElement(Avatar, { size: "md", name: "Aria Doe", visual: "https://dust.tt/static/droidavatar/Droid_Red_3.jpg", clickable: true }),
+            React.createElement(Avatar, { size: "lg", name: "Omar Doe", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg", clickable: true })))); },
+};
 export var AvatarWithImage = {
     args: {
         size: "md",