@kivid/native-components 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/typescript/styles/mixins/shadows/elevation-down-200.d.ts

@@ -0,0 +1 @@
+export declare const elevationDown200 = "2px 2px 4px 0 rgba(119, 128, 128, 0.08), 4px 4px 6px 0 rgba(119, 128, 128, 0.06), 6px 6px 8px 0 rgba(119, 128, 128, 0.04), 8px 8px 24px 0 rgba(119, 128, 128, 0.08)";

package/dist/typescript/styles/mixins/shadows/elevation-down-300.d.ts

@@ -0,0 +1 @@
+export declare const elevation300 = "4px 4px 4px 0 rgba(119, 128, 128, 0.08), 12px 12px 6px 0 rgba(119, 128, 128, 0.06), 18px 18px 16px 0 rgba(119, 128, 128, 0.04), 12px 12px 40px 0 rgba(119, 128, 128, 0.24)";

package/dist/typescript/styles/mixins/shadows/elevation-up-100.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp100 = "0 -2px 2px 0 rgba(119, 128, 128, 0.02), 0 -4px 4px 0 rgba(119, 128, 128, 0.02), 0 -8px 16px 0 rgba(119, 128, 128, 0.02), 0 -8px 32px 0 rgba(119, 128, 128, 0.08)";

package/dist/typescript/styles/mixins/shadows/elevation-up-200.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp200 = "0 -2px 2px 0 rgba(119, 128, 128, 0.04), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.06), 0 -12px 32px 0 rgba(119, 128, 128, 0.12)";

package/dist/typescript/styles/mixins/shadows/elevation-up-300.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp300 = "0 -2px 2px 0 rgba(119, 128, 128, 0.06), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.12), 0 -16px 48px 0 rgba(119, 128, 128, 0.24)";

package/dist/typescript/styles/mixins/shadows/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./elevation-down-100";
+export * from "./elevation-down-200";
+export * from "./elevation-down-300";
+export * from "./elevation-up-100";
+export * from "./elevation-up-200";
+export * from "./elevation-up-300";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.7",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -12,20 +12,29 @@
   },
   "homepage": "https://github.com/kivid-saude/butterfly/tree/main/packages/native-components#readme",
   "license": "MIT",
-  "main": "index.js",
-  "files": [
-    "dist",
-    "src"
-  ],
+  "main": "./dist/module/index.js",
+  "types": "./dist/typescript/index.d.ts",
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
-      "import": "./dist/module/index.js",
+      "source": "./src/index.ts",
+      "types": "./dist/typescript/index.d.ts",
+      "default": "./dist/module/index.js",
       "require": "./dist/commonjs/index.js",
-      "types": "./dist/typescript/index.d.ts"
+      "import": "./dist/module/index.js"
     },
-    "./styles": "./dist/styles.css"
+    "./package.json": "./package.json"
   },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.test.js",
+    "!**/*.test.tsx",
+    "!**/*.spec.tsx",
+    "!**/*.spec.js",
+    "!**/*.stories.tsx",
+    "!**/*.stories.js"
+  ],
   "react-native-builder-bob": {
     "source": "src",
     "output": "dist",
@@ -44,66 +53,44 @@
       ]
     ]
   },
-  "dependencies": {
-    "@gorhom/bottom-sheet": "^5.1.2",
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.4.1",
-    "@react-native-community/slider": "4.5.6",
-    "expo-constants": "~17.1.6",
-    "expo-font": "~13.3.2",
-    "expo-splash-screen": "^0.30.10",
-    "expo-status-bar": "~2.2.3",
-    "expo": "~53.0.9",
-    "nativewind": "^4.1.23",
-    "react-dom": "19.0.0",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-reanimated": "~3.17.5",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-svg": "^15.11.2",
-    "react-native-web": "^0.20.0",
-    "react-native": "0.79.5",
-    "react": "19.0.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.5",
-    "@kivid/icons": "1.0.0-alpha.5"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.25.4",
-    "@chromatic-com/storybook": "^4.0.0",
-    "@expo/metro-runtime": "~5.0.4",
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "@react-native-community/cli": "^15.1.3",
-    "@storybook/addon-docs": "^9",
-    "@storybook/addon-ondevice-actions": "^9",
-    "@storybook/addon-ondevice-backgrounds": "^9",
-    "@storybook/addon-ondevice-controls": "^9",
-    "@storybook/addon-ondevice-notes": "^9",
-    "@storybook/react": "^9",
-    "@storybook/react-native": "^9",
-    "@storybook/react-native-web-vite": "^9",
+    "@react-native/babel-preset": "^0.77.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.12",
     "@types/node": "^24.1.0",
     "@types/react": "19.0.14",
-    "autoprefixer": "^10.4.19",
+    "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "babel-plugin-react-docgen-typescript": "^1.5.1",
     "class-variance-authority": "^0.7.1",
     "cross-env": "^7.0.3",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^29.7.0",
     "lottie-react-native": "^7.2.2",
-    "postcss": "^8.4.40",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "react-native-builder-bob": "^0.40.13",
-    "storybook": "^9",
-    "tailwindcss": "^3.4.17",
+    "react-native-svg": "^15.12.0",
+    "react-native": "0.79.5",
+    "react": "19.0.0",
+    "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5"
+    "@kivid/tailwind-preset": "1.0.0-alpha.7",
+    "@kivid/icons": "1.0.0-alpha.7"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "class-variance-authority": "^0.7.1",
     "lottie-react-native": "^7.2.4",
-    "react": "19.0.0",
+    "nativewind": "4.1.23",
+    "react-native-svg": "^15.12.0",
     "react-native": "0.79.5",
-    "@kivid/icons": "1.0.0-alpha.5"
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.7",
+    "@kivid/icons": "1.0.0-alpha.7"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -111,16 +98,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && bob build && node postbuild.js",
-    "start": "expo start",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
-    "development-build": "cross-env EXPO_USE_COMMUNITY_AUTOLINKING=0 expo prebuild --clean",
-    "storybook:web": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "storybook-generate": "sb-rn-get-stories",
-    "storybook": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start",
-    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start:ios",
-    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo  start:android"
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
 }

package/src/components/Avatar/assets/class-variants.ts

@@ -1,20 +1,21 @@
 import { cva } from "class-variance-authority";
-import { AvatarSizeEnum } from "../enums";
+import { SizeEnum } from "../../../enums";
 
 const avatarVariants = cva(
-  "border-[1px] border-chia-400 rounded-full items-center justify-center",
+  "border-[1px] border-chia-400 flex items-center justify-center bg-chia-300",
   {
     variants: {
       size: {
-        [AvatarSizeEnum.XSMALL]: "w-[32px] h-[32px]",
-        [AvatarSizeEnum.SMALL]: "w-[40px] h-[40px]",
-        [AvatarSizeEnum.MEDIUM]: "w-[56px] h-[56px]",
-        [AvatarSizeEnum.LARGE]: "w-[72px] h-[72px]",
-        [AvatarSizeEnum.XLARGE]: "w-[96px] h-[96px]",
+        [SizeEnum.XLARGE]: "w-[96px] h-[96px] rounded-1000",
+        [SizeEnum.LARGE]: "w-[72px] h-[72px] rounded-900",
+        [SizeEnum.MEDIUM]: "w-[56px] h-[56px] rounded-800",
+        [SizeEnum.SMALL]: "w-[40px] h-[40px] rounded-700",
+        [SizeEnum.XSMALL]: "w-[32px] h-[32px] rounded-600",
+        [SizeEnum.XXSMALL]: "w-[24px] h-[24px] rounded-600",
       },
     },
     defaultVariants: {
-      size: AvatarSizeEnum.MEDIUM,
+      size: SizeEnum.MEDIUM,
     },
   }
 );

package/src/components/Avatar/index.tsx

@@ -1,48 +1,66 @@
 import type { AvatarProps } from "./types";
 import { Person } from "@kivid/icons/native";
 import { View, Image } from "react-native";
-import { AvatarSizeEnum } from "./enums";
+import { SizeEnum } from "../../enums";
 import { avatarVariants } from "./assets/class-variants";
 import { merge } from "@kivid/tailwind-preset";
 import Typography from "../Typography";
 
 export function Avatar(props: AvatarProps) {
-  const { src, name, size = AvatarSizeEnum.MEDIUM } = props;
+  const { src, name, size = SizeEnum.MEDIUM } = props;
 
-  const mappedSize = {
-    [AvatarSizeEnum.XLARGE]: 96,
-    [AvatarSizeEnum.LARGE]: 72,
-    [AvatarSizeEnum.MEDIUM]: 56,
-    [AvatarSizeEnum.SMALL]: 40,
-    [AvatarSizeEnum.XSMALL]: 32,
+  const personMappedSize = {
+    [SizeEnum.XLARGE]: 56,
+    [SizeEnum.LARGE]: 48,
+    [SizeEnum.MEDIUM]: 40,
+    [SizeEnum.SMALL]: 32,
+    [SizeEnum.XSMALL]: 24,
+    [SizeEnum.XXSMALL]: 16,
+  }[size];
+
+  const personMappedStrokeWidth = {
+    [SizeEnum.XLARGE]: 1.6,
+    [SizeEnum.LARGE]: 1.6,
+    [SizeEnum.MEDIUM]: 1.6,
+    [SizeEnum.SMALL]: 1.6,
+    [SizeEnum.XSMALL]: 1.5,
+    [SizeEnum.XXSMALL]: 1.125,
   }[size];
 
   const avatarStyle = avatarVariants({ size });
 
   const avatarTextStyleMap = {
-    [AvatarSizeEnum.XSMALL]: {
-      variant: "body_small" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.XXSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[15px]",
     },
-    [AvatarSizeEnum.SMALL]: {
-      variant: "title_small" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.XSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[16px]",
     },
-    [AvatarSizeEnum.MEDIUM]: {
-      variant: "title_large" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.SMALL]: {
+      variant: "title_small",
+      fontWeight: "700",
+      className: "h-[18px]",
     },
-    [AvatarSizeEnum.LARGE]: {
-      variant: "headline_small" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.MEDIUM]: {
+      variant: "title_large",
+      fontWeight: "700",
+      className: "h-[18px]",
     },
-    [AvatarSizeEnum.XLARGE]: {
-      variant: "headline_medium" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.LARGE]: {
+      variant: "headline_small",
+      fontWeight: "700",
+      className: "h-[29px]",
     },
-  };
-
-  const calulatedInsideImageContainerSize = mappedSize - 1;
+    [SizeEnum.XLARGE]: {
+      variant: "headline_medium",
+      fontWeight: "700",
+      className: "h-[30px]",
+    },
+  } as const;
 
   function renderFallbackType() {
     if (name && !!name.trim()) {
@@ -57,10 +75,14 @@ export function Avatar(props: AvatarProps) {
       const firstLetters =
         `${firstLetterOfFirstName}${firstLetterOfSurname}`.toUpperCase();
 
+      //TODO: line height add spaces on font, and element cant be centered
       return (
         <View className={avatarStyle}>
           <Typography
-            className={"text-chia-600"}
+            className={merge(
+              avatarTextStyleMap[size].className,
+              "text-chia-600"
+            )}
             variant={avatarTextStyleMap[size].variant}
             weight={avatarTextStyleMap[size].fontWeight}
           >
@@ -71,10 +93,12 @@ export function Avatar(props: AvatarProps) {
     }
 
     return (
-      <View
-        className={merge(avatarStyle, "bg-chia-300 border-chia-400 max-h-fit")}
-      >
-        <Person color="#B6C2C2" size={mappedSize} />
+      <View className={avatarStyle}>
+        <Person
+          color="#B6C2C2"
+          size={personMappedSize}
+          strokeWidth={personMappedStrokeWidth}
+        />
       </View>
     );
   }
@@ -84,14 +108,11 @@ export function Avatar(props: AvatarProps) {
   }
 
   return (
-    <View className={merge(avatarStyle, "border-chia-100 relative")}>
+    <View className={merge(avatarStyle, "overflow-hidden")}>
       <Image
         source={{ uri: src }}
-        className="rounded-full"
-        style={{
-          width: calulatedInsideImageContainerSize,
-          height: calulatedInsideImageContainerSize,
-        }}
+        className={"object-cover w-full h-full"}
+        accessibilityLabel="Profile Avatar"
       />
     </View>
   );

package/src/components/Avatar/types.ts

@@ -1,7 +1,15 @@
-import type { AvatarSizeEnum } from "./enums";
+import { SizeEnum } from "../../enums";
+
+export type AvatarSize =
+  | SizeEnum.XXSMALL
+  | SizeEnum.XSMALL
+  | SizeEnum.SMALL
+  | SizeEnum.MEDIUM
+  | SizeEnum.LARGE
+  | SizeEnum.XLARGE;
 
 export interface AvatarProps {
   src?: string | null;
   name?: string;
-  size?: AvatarSizeEnum;
+  size?: AvatarSize;
 }

package/src/components/Button/assets/class-variants.ts

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { SizeEnum, CornersEnum } from "../../../enums";
 
 const buttonVariants = cva(
   [
@@ -32,13 +33,13 @@ const buttonVariants = cva(
         ghost: ["bg-transparent", "disabled:opacity-30"],
       },
       size: {
-        small: ["px-400 h-800"],
-        medium: ["px-600 h-900"],
-        large: ["px-600 h-1000"],
+        [SizeEnum.SMALL]: ["px-400 h-800"],
+        [SizeEnum.MEDIUM]: ["px-600 h-900"],
+        [SizeEnum.LARGE]: ["px-600 h-1000"],
       },
       corners: {
-        small: "rounded-500",
-        medium: "rounded-700",
+        [CornersEnum.SMALL]: "rounded-500",
+        [CornersEnum.MEDIUM]: "rounded-700",
       },
       fullWidth: {
         true: "w-full",
@@ -49,8 +50,8 @@ const buttonVariants = cva(
     },
     defaultVariants: {
       variant: "grape",
-      size: "medium",
-      corners: "medium",
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
       fullWidth: false,
     },
   }

package/src/components/Button/index.tsx

@@ -15,12 +15,13 @@ import {
   buttonVariants,
   selectedVariants,
 } from "./assets/class-variants";
+import { SizeEnum, CornersEnum } from "../../enums";
 
 export function Button(props: ButtonProps) {
   const {
     variant = "grape",
-    size = "large",
-    corners = "medium",
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
     fullWidth = false,
     loading = false,
     selected = false,
@@ -50,12 +51,12 @@ export function Button(props: ButtonProps) {
   };
 
   const typographyVariantMap = {
-    small: "label_small" as const,
-    medium: "label_medium" as const,
-    large: "label_large" as const,
-  };
+    small: "label_small",
+    medium: "label_medium",
+    large: "label_large",
+  } as const;
 
-  const typographyVariant = typographyVariantMap[size ?? "medium"];
+  const typographyVariant = typographyVariantMap[size ?? SizeEnum.MEDIUM];
 
   function renderContent() {
     const textStyle = merge(

package/src/components/Button/types.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import { buttonVariants } from "./assets/class-variants";
 import { PressableProps, View } from "react-native";
+import { SizeEnum, CornersEnum } from "../../enums";
 
 export type ButtonVariant =
   | "grape"
@@ -13,9 +14,9 @@ export type ButtonVariant =
   | "glass"
   | "ghost";
 
-export type ButtonSize = "small" | "medium" | "large";
+export type ButtonSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
 
-export type ButtonCorners = "small" | "medium";
+export type ButtonCorners = CornersEnum.SMALL | CornersEnum.MEDIUM;
 
 export interface ButtonProps
   extends VariantProps<typeof buttonVariants>,

package/src/components/ChatBubble/assets/class-variants.ts

@@ -0,0 +1,75 @@
+import { cva } from "class-variance-authority";
+
+export const chatBubbleBoxVariants = cva(
+  "flex-row gap-400 px-600 py-500 min-h-1000",
+  {
+    variants: {
+      contentType: {
+        check: "",
+        alert: "",
+        error: "",
+        custom: "",
+      },
+      colorState: {
+        fill: "",
+        outline: "border border-chia-400",
+      },
+      hasEar: {
+        true: "",
+        false: "",
+      },
+      messageType: {
+        initial: "",
+        followUp: "",
+      },
+    },
+    compoundVariants: [
+      {
+        contentType: "check",
+        colorState: "fill",
+        className: "bg-pear-500",
+      },
+      {
+        contentType: "alert",
+        colorState: "fill",
+        className: "bg-tangerine-500",
+      },
+      {
+        contentType: "error",
+        colorState: "fill",
+        className: "bg-blackberry-500",
+      },
+      {
+        contentType: "custom",
+        colorState: "fill",
+        className: "bg-chia-100",
+      },
+      {
+        contentType: "custom",
+        colorState: "outline",
+        className: "bg-chia-100",
+      },
+      {
+        colorState: "outline",
+        className: "bg-chia-100",
+      },
+      {
+        hasEar: true,
+        className: "rounded-700 rounded-bl-100",
+      },
+      {
+        hasEar: false,
+        className: "rounded-700 rounded-bl-300",
+      },
+      { messageType: "followUp", className: "rounded-tl-300" },
+    ],
+    defaultVariants: {
+      colorState: "fill",
+      messageType: "initial",
+    },
+  }
+);
+
+export const chatBubbleTimeVariants = cva(
+  "flex-row items-center gap-400 pt-400 pl-400"
+);

package/src/components/ChatBubble/components/ChatBubbleContent/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { ChatBubbleContentProps } from "./types";
+
+/**
+ * Content container for the main bubble content (seal + text)
+ */
+export const ChatBubbleContent: React.FC<ChatBubbleContentProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className={merge("flex-row items-center gap-2", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+ChatBubbleContent.displayName = "ChatBubble.Content";

package/src/components/ChatBubble/components/ChatBubbleContent/types.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from "react-native";
+
+export interface ChatBubbleContentProps extends Omit<ViewProps, "children"> {
+  className?: string;
+  children: React.ReactNode;
+}

package/src/components/ChatBubble/components/ChatBubbleEar/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+
+interface ChatBubbleEarProps extends SvgProps {
+  type: "fill" | "outline";
+  color?: string;
+}
+
+export const ChatBubbleEar: React.FC<ChatBubbleEarProps> = ({
+  type = "fill",
+  color = "#F2F7F7",
+  ...props
+}) => {
+  if (type === "outline") {
+    return (
+      <Svg width={12} height={10} viewBox="0 0 12 10" fill="none" {...props}>
+        <Path
+          d="M11.5 0.5V9.5H7.75098C2.95557 9.34303 1.06326 5.41102 0.511719 3.91016C0.476256 3.80748 0.523736 3.72138 0.575195 3.69141L0.576172 3.69043C0.597192 3.67831 0.616459 3.67593 0.632812 3.67773C0.649308 3.67957 0.669032 3.68628 0.688477 3.7041C1.18665 4.17051 2.2435 4.93738 3.79004 4.9375C6.23009 4.9375 8.23446 2.96737 8.47559 0.5H11.5Z"
+          fill={color}
+          stroke="#DEE7E7"
+          strokeMiterlimit={10}
+        />
+        <Path
+          d="M8 3.15144V9H12V0H9C9 1.47424 8.5 2.46333 8 3.15144Z"
+          fill={color}
+        />
+      </Svg>
+    );
+  }
+
+  return (
+    <Svg width={12} height={10} viewBox="0 0 12 10" fill="none" {...props}>
+      <Path
+        d="M12 10V3.55405e-05L8 0C8 2.4436 6.09369 4.43749 3.79039 4.43749C2.41431 4.43749 1.47239 3.75438 1.02718 3.3367C0.832174 3.15714 0.552541 3.12591 0.324419 3.25863C0.0484661 3.41867 -0.0692741 3.76609 0.0411073 4.07837C0.604052 5.61245 2.60563 9.83215 7.73469 10H12Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/components/ChatBubble/components/ChatBubbleLoading/index.tsx

@@ -0,0 +1,25 @@
+import { ViewProps } from "react-native";
+import { LoadingDots } from "../../../LoadingDots";
+import { LoadingDotsProps } from "../../../LoadingDots/types";
+
+export interface ChatBubbleLoadingProps extends ViewProps {
+  loadingDotsProps?: LoadingDotsProps;
+}
+
+export const ChatBubbleLoading = (props: ChatBubbleLoadingProps) => {
+  const { loadingDotsProps, className, ...rest } = props;
+
+  return (
+    <LoadingDots
+      lottieViewStyle={{
+        width: 32,
+        height: 32,
+        marginTop: -5,
+        marginBottom: -5,
+      }}
+      {...loadingDotsProps}
+    />
+  );
+};
+
+ChatBubbleLoading.displayName = "ChatBubbleLoading";