@kivid/native-components 1.0.0-alpha.4 → 1.0.0-alpha.6

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

@@ -0,0 +1 @@
+export * from "./shadows";

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

@@ -0,0 +1 @@
+export declare const elevationDown100 = "1px 1px 2px 0 rgba(119, 128, 128, 0.02), 1px 1px 4px 0 rgba(119, 128, 128, 0.02), 2px 2px 6px 0 rgba(119, 128, 128, 0.02), 2px 2px 16px 0 rgba(119, 128, 128, 0.06)";

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.4",
+  "version": "1.0.0-alpha.6",
   "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.4",
-    "@kivid/icons": "1.0.0-alpha.4"
-  },
+  "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.6",
+    "@kivid/icons": "1.0.0-alpha.6"
   },
   "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.4"
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.6",
+    "@kivid/icons": "1.0.0-alpha.6"
   },
   "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 run",
-    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo run:ios",
-    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo  run:android"
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
 }

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

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
+
+const avatarVariants = cva(
+  "border-[1px] border-chia-400 flex items-center justify-center bg-chia-300",
+  {
+    variants: {
+      size: {
+        [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: SizeEnum.MEDIUM,
+    },
+  }
+);
+
+export { avatarVariants };

package/src/components/Avatar/index.tsx

@@ -0,0 +1,119 @@
+import type { AvatarProps } from "./types";
+import { Person } from "@kivid/icons/native";
+import { View, Image } from "react-native";
+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 = SizeEnum.MEDIUM } = props;
+
+  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 = {
+    [SizeEnum.XXSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[15px]",
+    },
+    [SizeEnum.XSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[16px]",
+    },
+    [SizeEnum.SMALL]: {
+      variant: "title_small",
+      fontWeight: "700",
+      className: "h-[18px]",
+    },
+    [SizeEnum.MEDIUM]: {
+      variant: "title_large",
+      fontWeight: "700",
+      className: "h-[18px]",
+    },
+    [SizeEnum.LARGE]: {
+      variant: "headline_small",
+      fontWeight: "700",
+      className: "h-[29px]",
+    },
+    [SizeEnum.XLARGE]: {
+      variant: "headline_medium",
+      fontWeight: "700",
+      className: "h-[30px]",
+    },
+  } as const;
+
+  function renderFallbackType() {
+    if (name && !!name.trim()) {
+      const [firstName, surname] = name.split(" ");
+
+      const hasSurname = !!surname;
+      const hasName = !!firstName;
+
+      const firstLetterOfFirstName = hasName ? firstName?.at(0) : "";
+      const firstLetterOfSurname = hasSurname ? surname?.at(0) : "";
+
+      const firstLetters =
+        `${firstLetterOfFirstName}${firstLetterOfSurname}`.toUpperCase();
+
+      //TODO: line height add spaces on font, and element cant be centered
+      return (
+        <View className={avatarStyle}>
+          <Typography
+            className={merge(
+              avatarTextStyleMap[size].className,
+              "text-chia-600"
+            )}
+            variant={avatarTextStyleMap[size].variant}
+            weight={avatarTextStyleMap[size].fontWeight}
+          >
+            {firstLetters}
+          </Typography>
+        </View>
+      );
+    }
+
+    return (
+      <View className={avatarStyle}>
+        <Person
+          color="#B6C2C2"
+          size={personMappedSize}
+          strokeWidth={personMappedStrokeWidth}
+        />
+      </View>
+    );
+  }
+
+  if (!src) {
+    return renderFallbackType();
+  }
+
+  return (
+    <View className={merge(avatarStyle, "overflow-hidden")}>
+      <Image
+        source={{ uri: src }}
+        className={"object-cover w-full h-full"}
+        accessibilityLabel="Profile Avatar"
+      />
+    </View>
+  );
+}

package/src/components/Avatar/types.ts

@@ -0,0 +1,15 @@
+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?: 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";

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../../../Seal";
+import { useChatBubbleContext } from "../../context";
+import type { ChatBubbleSealProps } from "./types";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { SizeEnum } from "../../../../enums";
+
+export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
+  className,
+  ...props
+}) => {
+  const { contentType, colorState } = useChatBubbleContext();
+
+  if (!contentType || contentType === "custom") {
+    return null;
+  }
+
+  const sealVariantMap = {
+    check: SealVariantEnum.SUCCESS,
+    alert: SealVariantEnum.ALERT,
+    error: SealVariantEnum.ERROR,
+  };
+
+  return (
+    <Seal
+      variant={sealVariantMap[contentType]}
+      size={SizeEnum.MEDIUM}
+      inverted={colorState === "fill"}
+      className={merge("ml-[-6px]", className)}
+      {...props}
+    />
+  );
+};
+
+ChatBubbleSeal.displayName = "ChatBubble.Seal";

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

@@ -0,0 +1,5 @@
+import { SealProps } from "../../..";
+
+export interface ChatBubbleSealProps extends Omit<SealProps, "variant"> {
+  className?: string;
+}