@krrli/cm-designsystem 1.32.0 → 1.32.2

package/dist/components/typography/styles.js

@@ -1,52 +1,59 @@
 import { tv } from "tailwind-variants";
-export const headingStyles = tv({
-    base: ["tracking-normal"],
-    variants: {
-        size: {
-            "1": ["font-bold", "text-[48px]/[125%]"],
-            "2": ["font-bold", "text-[40px]/[125%]"],
-            "3": ["font-semibold", "text-[32px]/[125%]"],
-            "4": ["font-semibold", "text-[24px]/[125%]"],
-        },
-    },
+const headingStyles = tv({
+  base: ["tracking-normal"],
+  variants: {
+    size: {
+      "1": ["font-bold", "text-[48px]/[125%]"],
+      "2": ["font-bold", "text-[40px]/[125%]"],
+      "3": ["font-semibold", "text-[32px]/[125%]"],
+      "4": ["font-semibold", "text-[24px]/[125%]"]
+    }
+  }
 });
-export const paragraphStyles = tv({
-    base: ["font-medium", "tracking-normal"],
-    variants: {
-        size: {
-            lg: ["text-[24px]/[145%]"],
-            md: ["text-[18px]/[140%]"],
-        },
-    },
+const paragraphStyles = tv({
+  base: ["font-medium", "tracking-normal"],
+  variants: {
+    size: {
+      lg: ["text-[24px]/[145%]"],
+      md: ["text-[18px]/[140%]"]
+    }
+  }
 });
-export const labelStyles = tv({
-    base: ["font-semibold", "tracking-normal"],
-    variants: {
-        size: {
-            xl: ["text-[24px]/[100%]"],
-            lg: ["text-[20px]/[100%]"],
-            md: ["text-[16px]/[100%]"],
-            sm: ["text-[14px]/[100%]"],
-        },
-    },
+const labelStyles = tv({
+  base: ["font-semibold", "tracking-normal"],
+  variants: {
+    size: {
+      xl: ["text-[24px]/[100%]"],
+      lg: ["text-[20px]/[100%]"],
+      md: ["text-[16px]/[100%]"],
+      sm: ["text-[14px]/[100%]"]
+    }
+  }
 });
-export const placeholderStyles = tv({
-    base: [
-        "font-medium",
-        "text-slate-500",
-        "text-[16px]/[100%]",
-        "tracking-normal",
-        "placeholder:font-medium",
-        "placeholder:text-slate-300",
-        "placeholder:text-[16px]/[100%]",
-        "placeholder:tracking-normal",
-    ],
+const placeholderStyles = tv({
+  base: [
+    "font-medium",
+    "text-slate-500",
+    "text-[16px]/[100%]",
+    "tracking-normal",
+    "placeholder:font-medium",
+    "placeholder:text-slate-300",
+    "placeholder:text-[16px]/[100%]",
+    "placeholder:tracking-normal"
+  ]
 });
-export const validationMessageStyles = tv({
-    base: ["font-medium", "text-[14px]/[100%]", "tracking-normal"],
-    variants: {
-        type: {
-            error: ["text-error"],
-        },
-    },
+const validationMessageStyles = tv({
+  base: ["font-medium", "text-[14px]/[100%]", "tracking-normal"],
+  variants: {
+    type: {
+      error: ["text-error"]
+    }
+  }
 });
+export {
+  headingStyles,
+  labelStyles,
+  paragraphStyles,
+  placeholderStyles,
+  validationMessageStyles
+};

package/dist/compositions/image-banner/ImageBanner.js

@@ -1,50 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as AspectRatio from "@radix-ui/react-aspect-ratio";
 import { useState } from "react";
-import { cn, tv } from "tailwind-variants";
-import { Fullscreen } from "../../components/icons/generated";
+import { tv, cn } from "tailwind-variants";
+import { Fullscreen } from "../../components/icons/generated/Fullscreen.js";
 const ImageBannerStyles = tv({
-    slots: {
-        base: ["w-148", "h-80"],
-        image: ["h-full", "w-full", "cursor-pointer", "rounded-lg", "object-cover"],
-        overlay: [
-            "group",
-            "absolute",
-            "flex",
-            "items-center",
-            "justify-center",
-            "text-white",
-            "inset-0",
-            "bg-violet-600/0",
-            "hover:bg-violet-600/50",
-            "transition",
-            "duration-500",
-            "ease-in-out",
-        ],
-        icon: [
-            "w-8",
-            "h-8",
-            "opacity-0",
-            "group-hover:opacity-100",
-            "transition",
-            "duration-500",
-            "group-hover:rotate-0",
-        ],
-    },
-    variants: {
-        isFallback: {
-            true: { image: ["bg-violet-200"] },
-        },
-    },
+  slots: {
+    base: ["w-148", "h-80"],
+    image: ["h-full", "w-full", "cursor-pointer", "rounded-lg", "object-cover"],
+    overlay: [
+      "group",
+      "absolute",
+      "flex",
+      "items-center",
+      "justify-center",
+      "text-white",
+      "inset-0",
+      "bg-violet-600/0",
+      "hover:bg-violet-600/50",
+      "transition",
+      "duration-500",
+      "ease-in-out"
+    ],
+    icon: [
+      "w-8",
+      "h-8",
+      "opacity-0",
+      "group-hover:opacity-100",
+      "transition",
+      "duration-500",
+      "group-hover:rotate-0"
+    ]
+  },
+  variants: {
+    isFallback: {
+      true: { image: ["bg-violet-200"] }
+    }
+  }
 });
-/**
- * ImageBanner component
- *
- * Displays a banner image with a fixed aspect ratio (17:8) and an optional overlay icon.
- * If the image fails to load, a fallback element is displayed instead.
- */
-export const ImageBanner = (props) => {
-    const { base, image, overlay, icon } = ImageBannerStyles(props);
-    const [src, setSrc] = useState(props.src);
-    return (_jsx("div", { className: base(), children: src ? (_jsxs(AspectRatio.Root, { ratio: 37 / 20, children: [_jsx("img", { className: image(), src: src, alt: props.alt, onError: () => setSrc("") }), _jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: _jsx(Fullscreen, { className: icon() }) })] })) : (_jsx("div", { className: image({ isFallback: true }) })) }));
+const ImageBanner = (props) => {
+  const { base, image, overlay, icon } = ImageBannerStyles(props);
+  const [src, setSrc] = useState(props.src);
+  return /* @__PURE__ */ jsx("div", { className: base(), children: src ? /* @__PURE__ */ jsxs(AspectRatio.Root, { ratio: 37 / 20, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: image(),
+        src,
+        alt: props.alt,
+        onError: () => setSrc("")
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: /* @__PURE__ */ jsx(Fullscreen, { className: icon() }) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: image({ isFallback: true }) }) });
+};
+export {
+  ImageBanner
 };

package/dist/compositions/image-upload-modal/ImageUploadModal.js

@@ -1,21 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, forwardRef, useImperativeHandle } from "react";
-import { Button, FileUpload, Modal } from "../../components";
-import { Cancel, Checkmark } from "../../components/icons/generated";
-/**
- * ImageUploadModal component
- *
- * Renders a post creation component.
- */
-export const ImageUploadModal = forwardRef((props, ref) => {
-    const [open, setOpen] = useState(false);
-    const [file, setFile] = useState(null);
-    // Pass the ref to the useImperativeHandle hook
-    useImperativeHandle(ref, () => ({
-        openModal: setOpen,
-    }));
-    return (_jsxs(Modal, { open: open, onOpenChange: setOpen, title: "Image upload", children: [_jsx(Modal.Body, { children: _jsx(FileUpload, { onFileSelect: setFile }) }), _jsxs(Modal.Actions, { children: [_jsx(Button, { intent: "primary", size: "md", icon: Cancel, onClick: () => setOpen(false), children: "Cancel" }), _jsx(Button, { intent: "secondary", size: "md", icon: Checkmark, onClick: () => {
-                            setOpen(false);
-                            props.onFileChange(file);
-                        }, children: "Save" })] })] }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useImperativeHandle } from "react";
+import { Modal } from "../../components/modal/Modal.js";
+import { FileUpload } from "../../components/file-upload/FileUpload.js";
+import { Button } from "../../components/button/Button.js";
+import { Checkmark } from "../../components/icons/generated/Checkmark.js";
+import { Cancel } from "../../components/icons/generated/Cancel.js";
+const ImageUploadModal = forwardRef((props, ref) => {
+  const [open, setOpen] = useState(false);
+  const [file, setFile] = useState(null);
+  useImperativeHandle(ref, () => ({
+    openModal: setOpen
+  }));
+  return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange: setOpen, title: "Image upload", children: [
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(FileUpload, { onFileSelect: setFile }) }),
+    /* @__PURE__ */ jsxs(Modal.Actions, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          intent: "primary",
+          size: "md",
+          icon: Cancel,
+          onClick: () => setOpen(false),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          intent: "secondary",
+          size: "md",
+          icon: Checkmark,
+          onClick: () => {
+            setOpen(false);
+            props.onFileChange(file);
+          },
+          children: "Save"
+        }
+      )
+    ] })
+  ] });
 });
+export {
+  ImageUploadModal
+};

package/dist/compositions/post/Post.js

@@ -1,30 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Avatar, LikeToggle, Paragraph, TimedButton, Toggle, } from "../../components";
-import { Share } from "../../components/icons/generated";
-import { ImageBanner } from "../image-banner/ImageBanner";
-import { PostBase } from "../post-base/PostBase";
-import { UserInfo } from "../user-info/UserInfo";
+import { ImageBanner } from "../image-banner/ImageBanner.js";
+import { PostBase } from "../post-base/PostBase.js";
+import { UserInfo } from "../user-info/UserInfo.js";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Paragraph } from "../../components/typography/Paragraph.js";
+import { Toggle } from "../../components/toggle/Toggle.js";
+import { LikeToggle } from "../../components/like-toggle/LikeToggle.js";
+import { TimedButton } from "../../components/timed-button/TimedButton.js";
+import { Share } from "../../components/icons/generated/Share.js";
 const PostStyles = tv({
-    slots: {
-        base: [],
-        avatar: ["absolute", "-left-8", "top-6"],
-        content: ["flex", "flex-col", "gap-6"],
-        text: ["text-slate-900"],
-        action: ["flex", "gap-10", "justify-start", "-ml-3"],
-    },
-    variants: {
-        size: {
-            lg: { base: ["rounded-b-none"] },
-            md: {},
-        },
-    },
+  slots: {
+    base: [],
+    avatar: ["absolute", "-left-8", "top-6"],
+    content: ["flex", "flex-col", "gap-6"],
+    text: ["text-slate-900"],
+    action: ["flex", "gap-10", "justify-start", "-ml-3"]
+  },
+  variants: {
+    size: {
+      lg: { base: ["rounded-b-none"] },
+      md: {}
+    }
+  }
 });
-/**
- * Detailed post component displaying user info, text content,
- * optional image, and action buttons (comment, like, share).
- */
-export const Post = (props) => {
-    const { base, avatar, content, text, action } = PostStyles(props);
-    return (_jsxs(PostBase, { className: base(), children: [_jsx("div", { className: avatar(), children: _jsx(Avatar, { alt: "Profile", size: "md", src: props.src, onAvatarClick: props.onAvatarClick }) }), _jsxs("div", { className: content(), children: [_jsx(UserInfo, { size: props.size, displayName: props.displayName, userName: props.userName, timestamp: props.timestamp, onClick: props.onAvatarClick }), _jsx(Paragraph, { size: props.size, className: text(), children: props.text }), props.imageSrc && (_jsx(ImageBanner, { src: props.imageSrc, alt: props.imageAlt ?? "", onClick: () => { } })), _jsxs("div", { className: action(), children: [_jsx(Toggle, { ariaLabel: "Comment", labelText: "Comment", onToggle: props.onCommentClick }), _jsx(LikeToggle, { onLikeChange: props.onLikeClick }), _jsx(TimedButton, { icon: Share, label: "Copy Link", labelActive: "Link copied", onClick: props.onShareClick })] })] })] }));
+const Post = (props) => {
+  const { base, avatar, content, text, action } = PostStyles(props);
+  return /* @__PURE__ */ jsxs(PostBase, { className: base(), children: [
+    /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: "Profile",
+        size: "md",
+        src: props.src,
+        onAvatarClick: props.onAvatarClick
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: content(), children: [
+      /* @__PURE__ */ jsx(
+        UserInfo,
+        {
+          size: props.size,
+          displayName: props.displayName,
+          userName: props.userName,
+          timestamp: props.timestamp,
+          onClick: props.onAvatarClick
+        }
+      ),
+      /* @__PURE__ */ jsx(Paragraph, { size: props.size, className: text(), children: props.text }),
+      props.imageSrc && /* @__PURE__ */ jsx(
+        ImageBanner,
+        {
+          src: props.imageSrc,
+          alt: props.imageAlt ?? "",
+          onClick: () => {
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: action(), children: [
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            ariaLabel: "Comment",
+            labelText: "Comment",
+            onToggle: props.onCommentClick
+          }
+        ),
+        /* @__PURE__ */ jsx(LikeToggle, { onLikeChange: props.onLikeClick }),
+        /* @__PURE__ */ jsx(
+          TimedButton,
+          {
+            icon: Share,
+            label: "Copy Link",
+            labelActive: "Link copied",
+            onClick: props.onShareClick
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  Post
 };

package/dist/compositions/post-base/PostBase.js

@@ -1,27 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+import { tv, cn } from "tailwind-variants";
 const PostBaseStyles = tv({
-    slots: {
-        base: [
-            "bg-white",
-            "rounded-2xl",
-            "pl-12",
-            "pr-12",
-            "pt-8",
-            "pb-8",
-            "flex",
-            "relative",
-            "w-full",
-            "hover:ring-2",
-            "hover:ring-slate-200",
-        ],
-    },
+  slots: {
+    base: [
+      "bg-white",
+      "rounded-2xl",
+      "pl-12",
+      "pr-12",
+      "pt-8",
+      "pb-8",
+      "flex",
+      "relative",
+      "w-full",
+      "hover:ring-2",
+      "hover:ring-slate-200"
+    ]
+  }
 });
-/**
- * Base layout wrapper for a post, including an avatar section
- * and content area.
- */
-export const PostBase = (props) => {
-    const { base } = PostBaseStyles(props);
-    return _jsx("div", { className: cn(base(), props.className), children: props.children });
+const PostBase = (props) => {
+  const { base } = PostBaseStyles(props);
+  return /* @__PURE__ */ jsx("div", { className: cn(base(), props.className), children: props.children });
+};
+export {
+  PostBase
 };

package/dist/compositions/post-creator/PostCreator.js

@@ -1,29 +1,77 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Form } from "@radix-ui/react-form";
-import { useRef, useState } from "react";
+import { useState, useRef } from "react";
 import { tv } from "tailwind-variants";
-import { Avatar, Button, Heading, Textarea } from "../../components";
-import { Send, Upload } from "../../components/icons/generated";
-import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
-import { PostBase } from "../post-base/PostBase";
+import { ImageUploadModal } from "../image-upload-modal/ImageUploadModal.js";
+import { PostBase } from "../post-base/PostBase.js";
+import { Heading } from "../../components/typography/Heading.js";
+import { Textarea } from "../../components/textarea/Textarea.js";
+import { Send } from "../../components/icons/generated/Send.js";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Button } from "../../components/button/Button.js";
+import { Upload } from "../../components/icons/generated/Upload.js";
 const PostCreatorStyles = tv({
-    slots: {
-        content: ["flex", "flex-col", "gap-4", "w-full"],
-        avatar: ["absolute", "-left-8", "top-6"],
-        title: ["text-slate-900"],
-        input: ["w-full", "h-40"],
-        action: ["flex", "gap-4"],
-    },
+  slots: {
+    content: ["flex", "flex-col", "gap-4", "w-full"],
+    avatar: ["absolute", "-left-8", "top-6"],
+    title: ["text-slate-900"],
+    input: ["w-full", "h-40"],
+    action: ["flex", "gap-4"]
+  }
 });
-/**
- * PostCreator component
- *
- * Renders a post creation component.
- */
-export const PostCreator = (props) => {
-    const { content, avatar, title, input, action } = PostCreatorStyles(props);
-    const [file, setFile] = useState(null);
-    const [text, setText] = useState("");
-    const imageUploadModalRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs(PostBase, { children: [_jsx("div", { className: avatar(), children: _jsx(Avatar, { alt: "Profile", size: "md", src: props.src, onAvatarClick: props.onAvatarClick }) }), _jsxs(Form, { className: content(), children: [_jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }), _jsx("div", { className: input(), children: _jsx(Textarea, { name: "post", placeholder: "Your opinion matters!", onChange: setText }) }), _jsxs("div", { className: action(), children: [_jsx(Button, { intent: "primary", size: "md", icon: Upload, onClick: () => imageUploadModalRef.current?.openModal(true), children: "Picture upload" }), _jsx(Button, { intent: "secondary", size: "md", icon: Send, onClick: () => props.onSendClick(text, file), children: "Send" })] })] })] }), _jsx(ImageUploadModal, { ref: imageUploadModalRef, onFileChange: setFile })] }));
+const PostCreator = (props) => {
+  const { content, avatar, title, input, action } = PostCreatorStyles(props);
+  const [file, setFile] = useState(null);
+  const [text, setText] = useState("");
+  const imageUploadModalRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(PostBase, { children: [
+      /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          alt: "Profile",
+          size: "md",
+          src: props.src,
+          onAvatarClick: props.onAvatarClick
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Form, { className: content(), children: [
+        /* @__PURE__ */ jsx(Heading, { size: "4", as: "h4", className: title(), children: "Hey, what's up?" }),
+        /* @__PURE__ */ jsx("div", { className: input(), children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            name: "post",
+            placeholder: "Your opinion matters!",
+            onChange: setText
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: action(), children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              intent: "primary",
+              size: "md",
+              icon: Upload,
+              onClick: () => imageUploadModalRef.current?.openModal(true),
+              children: "Picture upload"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              intent: "secondary",
+              size: "md",
+              icon: Send,
+              onClick: () => props.onSendClick(text, file),
+              children: "Send"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ImageUploadModal, { ref: imageUploadModalRef, onFileChange: setFile })
+  ] });
+};
+export {
+  PostCreator
 };

package/dist/compositions/profile-banner/ProfileBanner.js

@@ -1,26 +1,76 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { tv } from "tailwind-variants";
-import { Avatar, Paragraph } from "../../components";
-import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
-import { ProfileBannerImage } from "../profile-banner-image/ProfileBannerImage";
-import { ProfileBannerInfo } from "../profile-banner-info/ProfileBannerInfo";
+import { ImageUploadModal } from "../image-upload-modal/ImageUploadModal.js";
+import { ProfileBannerImage } from "../profile-banner-image/ProfileBannerImage.js";
+import { ProfileBannerInfo } from "../profile-banner-info/ProfileBannerInfo.js";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { Paragraph } from "../../components/typography/Paragraph.js";
 const ProfileBannerStyles = tv({
-    slots: {
-        base: ["flex", "flex-col", "gap-6", "w-170", "h-80", "relative"],
-        avatar: ["absolute", "-bottom-20", "right-6"],
-        info: ["flex", "flex-col", "gap-3"],
-        description: ["text-slate-500"],
-    },
+  slots: {
+    base: ["flex", "flex-col", "gap-6", "w-170", "h-80", "relative"],
+    avatar: ["absolute", "-bottom-20", "right-6"],
+    info: ["flex", "flex-col", "gap-3"],
+    description: ["text-slate-500"]
+  }
 });
-/**
- * Profile banner component for displaying user profile info.
- */
-export const ProfileBanner = (props) => {
-    const { base, avatar, info, description } = ProfileBannerStyles(props);
-    const profileImageUploadModalRef = useRef(null);
-    const avatarImageUploadModalRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: base(), children: [_jsx(ProfileBannerImage, { src: props.imageSrc, alt: props.imageAlt, onClick: () => profileImageUploadModalRef.current?.openModal(true) }), _jsx("div", { className: avatar(), children: _jsx(Avatar, { src: props.avatarSrc, alt: props.avatarAlt, size: "xl", onActionClick: props.isCurrentUser
-                                ? () => avatarImageUploadModalRef.current?.openModal(true)
-                                : undefined }) }), _jsxs("div", { className: info(), children: [_jsx(ProfileBannerInfo, { isCurrentUser: props.isCurrentUser, displayName: props.displayName, userName: props.userName, location: props.location, joinedTimestamp: props.joinedTimestamp, onProfileClick: () => { } }), _jsx(Paragraph, { size: "md", className: description(), children: props.description })] })] }), _jsx(ImageUploadModal, { ref: profileImageUploadModalRef, onFileChange: props.onProfileImageChange ?? (() => { }) }), _jsx(ImageUploadModal, { ref: avatarImageUploadModalRef, onFileChange: props.onAvatarImageChange ?? (() => { }) })] }));
+const ProfileBanner = (props) => {
+  const { base, avatar, info, description } = ProfileBannerStyles(props);
+  const profileImageUploadModalRef = useRef(null);
+  const avatarImageUploadModalRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: base(), children: [
+      /* @__PURE__ */ jsx(
+        ProfileBannerImage,
+        {
+          src: props.imageSrc,
+          alt: props.imageAlt,
+          onClick: () => profileImageUploadModalRef.current?.openModal(true)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: avatar(), children: /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          src: props.avatarSrc,
+          alt: props.avatarAlt,
+          size: "xl",
+          onActionClick: props.isCurrentUser ? () => avatarImageUploadModalRef.current?.openModal(true) : void 0
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: info(), children: [
+        /* @__PURE__ */ jsx(
+          ProfileBannerInfo,
+          {
+            isCurrentUser: props.isCurrentUser,
+            displayName: props.displayName,
+            userName: props.userName,
+            location: props.location,
+            joinedTimestamp: props.joinedTimestamp,
+            onProfileClick: () => {
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Paragraph, { size: "md", className: description(), children: props.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ImageUploadModal,
+      {
+        ref: profileImageUploadModalRef,
+        onFileChange: props.onProfileImageChange ?? (() => {
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageUploadModal,
+      {
+        ref: avatarImageUploadModalRef,
+        onFileChange: props.onAvatarImageChange ?? (() => {
+        })
+      }
+    )
+  ] });
+};
+export {
+  ProfileBanner
 };