@krrli/cm-designsystem 1.32.1 → 1.32.2

package/dist/compositions/profile-banner-image/ProfileBannerImage.js

@@ -1,57 +1,65 @@
-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 { Edit } from "../../components/icons/generated";
+import { tv, cn } from "tailwind-variants";
+import { Edit } from "../../components/icons/generated/Edit.js";
 const ProfileBannerImageStyles = tv({
-    slots: {
-        base: ["w-170", "h-80"],
-        image: [
-            "h-full",
-            "w-full",
-            "cursor-pointer",
-            "rounded-2xl",
-            "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",
-            "rotate-15",
-            "group-hover:rotate-0",
-        ],
-    },
-    variants: {
-        isFallback: {
-            true: { image: ["bg-violet-200"] },
-        },
-    },
+  slots: {
+    base: ["w-170", "h-80"],
+    image: [
+      "h-full",
+      "w-full",
+      "cursor-pointer",
+      "rounded-2xl",
+      "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",
+      "rotate-15",
+      "group-hover:rotate-0"
+    ]
+  },
+  variants: {
+    isFallback: {
+      true: { image: ["bg-violet-200"] }
+    }
+  }
 });
-/**
- * ProfileBannerImage 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 ProfileBannerImage = (props) => {
-    const { base, image, overlay, icon } = ProfileBannerImageStyles(props);
-    const [src, setSrc] = useState(props.src);
-    return (_jsx("div", { className: base(), children: src ? (_jsxs(AspectRatio.Root, { ratio: 17 / 8, children: [_jsx("img", { className: image(), src: src, alt: props.alt, onError: () => setSrc("") }), _jsx("button", { className: cn(image(), overlay()), onClick: props.onClick, children: _jsx(Edit, { className: icon() }) })] })) : (_jsx("div", { className: image({ isFallback: true }) })) }));
+const ProfileBannerImage = (props) => {
+  const { base, image, overlay, icon } = ProfileBannerImageStyles(props);
+  const [src, setSrc] = useState(props.src);
+  return /* @__PURE__ */ jsx("div", { className: base(), children: src ? /* @__PURE__ */ jsxs(AspectRatio.Root, { ratio: 17 / 8, 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(Edit, { className: icon() }) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: image({ isFallback: true }) }) });
+};
+export {
+  ProfileBannerImage
 };

package/dist/compositions/profile-banner-info/ProfileBannerInfo.js

@@ -1,47 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { IconButton } from "../../components/icon-button/IconButton";
-import { Profile, Location, Calendar, Settings, } from "../../components/icons/generated";
-import { Label } from "../../components/typography/Label";
+import { IconButton } from "../../components/icon-button/IconButton.js";
+import { Label } from "../../components/typography/Label.js";
+import { Settings } from "../../components/icons/generated/Settings.js";
+import { Location } from "../../components/icons/generated/Location.js";
+import { Calendar } from "../../components/icons/generated/Calendar.js";
+import { Profile } from "../../components/icons/generated/Profile.js";
 const profileBannerInfoStyles = tv({
-    slots: {
-        base: ["flex", "flex-col", "gap-2", "items-start"],
-        title: ["flex", "gap-1", "items-center", "**:cursor-pointer"],
-        icon: ["text-violet-600", "-mt-0.5"],
-        displayName: ["text-slate-900"],
-        detailInfo: ["flex", "gap-4"],
-        secondaryInfo: ["text-slate-500"],
-    },
+  slots: {
+    base: ["flex", "flex-col", "gap-2", "items-start"],
+    title: ["flex", "gap-1", "items-center", "**:cursor-pointer"],
+    icon: ["text-violet-600", "-mt-0.5"],
+    displayName: ["text-slate-900"],
+    detailInfo: ["flex", "gap-4"],
+    secondaryInfo: ["text-slate-500"]
+  }
 });
 function timeSince(timestamp) {
-    const now = new Date();
-    const past = timestamp instanceof Date ? timestamp : new Date(timestamp);
-    const diffMs = now.getTime() - past.getTime();
-    const seconds = Math.floor(diffMs / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    const months = Math.floor(days / 30); // approximate
-    const years = Math.floor(days / 365); // approximate
-    if (years > 0)
-        return years === 1 ? "1 year" : `${years} years`;
-    if (months > 0)
-        return months === 1 ? "1 month" : `${months} months`;
-    if (days > 0)
-        return days === 1 ? "1 day" : `${days} days`;
-    if (hours > 0)
-        return hours === 1 ? "1 hour" : `${hours} hours`;
-    if (minutes > 0)
-        return minutes === 1 ? "1 minute" : `${minutes} minutes`;
-    return seconds <= 1 ? "just now" : `${seconds} seconds`;
+  const now = /* @__PURE__ */ new Date();
+  const past = timestamp instanceof Date ? timestamp : new Date(timestamp);
+  const diffMs = now.getTime() - past.getTime();
+  const seconds = Math.floor(diffMs / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+  if (years > 0) return years === 1 ? "1 year" : `${years} years`;
+  if (months > 0) return months === 1 ? "1 month" : `${months} months`;
+  if (days > 0) return days === 1 ? "1 day" : `${days} days`;
+  if (hours > 0) return hours === 1 ? "1 hour" : `${hours} hours`;
+  if (minutes > 0) return minutes === 1 ? "1 minute" : `${minutes} minutes`;
+  return seconds <= 1 ? "just now" : `${seconds} seconds`;
 }
 const memberSincePrefix = "Member since ";
-/**
- * ProfileBannerInfo Component
- *
- * Renders profile information used in a user profile banner
- */
-export const ProfileBannerInfo = (props) => {
-    const { base, title, icon, displayName, detailInfo, secondaryInfo } = profileBannerInfoStyles(props);
-    return (_jsxs("div", { className: base(), children: [_jsxs("div", { className: title(), children: [_jsx("button", { onClick: props.onProfileClick, className: displayName(), children: _jsx(Label, { size: "xl", children: props.displayName }) }), props.isCurrentUser && (_jsx("button", { onClick: props.onSettingsClick, children: _jsx(Settings, { className: icon() }) }))] }), _jsxs("div", { className: detailInfo(), children: [_jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onProfileClick, children: props.userName }), _jsx(IconButton, { intent: "primary", icon: Location, onClick: props.onProfileClick, className: secondaryInfo(), children: props.location }), _jsx(IconButton, { intent: "primary", icon: Calendar, onClick: props.onProfileClick, className: secondaryInfo(), children: memberSincePrefix + timeSince(props.joinedTimestamp) })] })] }));
+const ProfileBannerInfo = (props) => {
+  const { base, title, icon, displayName, detailInfo, secondaryInfo } = profileBannerInfoStyles(props);
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    /* @__PURE__ */ jsxs("div", { className: title(), children: [
+      /* @__PURE__ */ jsx("button", { onClick: props.onProfileClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: "xl", children: props.displayName }) }),
+      props.isCurrentUser && /* @__PURE__ */ jsx("button", { onClick: props.onSettingsClick, children: /* @__PURE__ */ jsx(Settings, { className: icon() }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: detailInfo(), children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          intent: "secondary",
+          icon: Profile,
+          onClick: props.onProfileClick,
+          children: props.userName
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          intent: "primary",
+          icon: Location,
+          onClick: props.onProfileClick,
+          className: secondaryInfo(),
+          children: props.location
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          intent: "primary",
+          icon: Calendar,
+          onClick: props.onProfileClick,
+          className: secondaryInfo(),
+          children: memberSincePrefix + timeSince(props.joinedTimestamp)
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ProfileBannerInfo
 };

package/dist/compositions/response/Response.js

@@ -1,23 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { 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 { 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 ResponseStyles = tv({
-    slots: {
-        base: [],
-        content: ["flex", "flex-col", "gap-4"],
-        text: ["text-slate-900"],
-        action: ["flex", "gap-10", "justify-start", "-ml-3"],
-    },
+  slots: {
+    base: [],
+    content: ["flex", "flex-col", "gap-4"],
+    text: ["text-slate-900"],
+    action: ["flex", "gap-10", "justify-start", "-ml-3"]
+  }
 });
-/**
- * Detailed Response component displaying user info, text content,
- * optional image, and action buttons (comment, like, share).
- */
-export const Response = (props) => {
-    const { base, content, text, action } = ResponseStyles(props);
-    return (_jsx(PostBase, { className: base(), children: _jsxs("div", { className: content(), children: [_jsx(UserInfo, { size: "sm", src: props.src, displayName: props.displayName, userName: props.userName, timestamp: props.timestamp, onClick: props.onAvatarClick }), _jsx(Paragraph, { size: "md", 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 Response = (props) => {
+  const { base, content, text, action } = ResponseStyles(props);
+  return /* @__PURE__ */ jsx(PostBase, { className: base(), children: /* @__PURE__ */ jsxs("div", { className: content(), children: [
+    /* @__PURE__ */ jsx(
+      UserInfo,
+      {
+        size: "sm",
+        src: props.src,
+        displayName: props.displayName,
+        userName: props.userName,
+        timestamp: props.timestamp,
+        onClick: props.onAvatarClick
+      }
+    ),
+    /* @__PURE__ */ jsx(Paragraph, { size: "md", 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 {
+  Response
 };

package/dist/compositions/response-creator/ResponseCreator.js

@@ -1,28 +1,72 @@
-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 { Button, Textarea } from "../../components";
-import { Send, Upload } from "../../components/icons/generated";
-import { ImageUploadModal, } from "../image-upload-modal/ImageUploadModal";
-import { PostBase } from "../post-base/PostBase";
-import { UserInfo } from "../user-info/UserInfo";
+import { ImageUploadModal } from "../image-upload-modal/ImageUploadModal.js";
+import { PostBase } from "../post-base/PostBase.js";
+import { UserInfo } from "../user-info/UserInfo.js";
+import { Textarea } from "../../components/textarea/Textarea.js";
+import { Button } from "../../components/button/Button.js";
+import { Upload } from "../../components/icons/generated/Upload.js";
+import { Send } from "../../components/icons/generated/Send.js";
 const ResponseCreatorStyles = tv({
-    slots: {
-        content: ["flex", "flex-col", "gap-4", "w-full"],
-        input: ["w-full", "h-40"],
-        action: ["flex", "gap-4"],
-    },
+  slots: {
+    content: ["flex", "flex-col", "gap-4", "w-full"],
+    input: ["w-full", "h-40"],
+    action: ["flex", "gap-4"]
+  }
 });
-/**
- * ResponseCreator component
- *
- * Renders a Response creation component.
- */
-export const ResponseCreator = (props) => {
-    const { content, input, action } = ResponseCreatorStyles(props);
-    const [file, setFile] = useState(null);
-    const [text, setText] = useState("");
-    const imageUploadModalRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(PostBase, { children: _jsxs(Form, { className: content(), children: [_jsx(UserInfo, { displayName: props.displayName, onClick: props.onAvatarClick, size: "sm", src: props.src, userName: props.userName }), _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 ResponseCreator = (props) => {
+  const { content, input, action } = ResponseCreatorStyles(props);
+  const [file, setFile] = useState(null);
+  const [text, setText] = useState("");
+  const imageUploadModalRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PostBase, { children: /* @__PURE__ */ jsxs(Form, { className: content(), children: [
+      /* @__PURE__ */ jsx(
+        UserInfo,
+        {
+          displayName: props.displayName,
+          onClick: props.onAvatarClick,
+          size: "sm",
+          src: props.src,
+          userName: props.userName
+        }
+      ),
+      /* @__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 {
+  ResponseCreator
 };

package/dist/compositions/user-info/UserInfo.js

@@ -1,60 +1,79 @@
-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 } from "../../components/avatar/Avatar";
-import { IconButton } from "../../components/icon-button/IconButton";
-import { Profile, Time } from "../../components/icons/generated";
-import { Label } from "../../components/typography/Label";
+import { Avatar } from "../../components/avatar/Avatar.js";
+import { IconButton } from "../../components/icon-button/IconButton.js";
+import { Label } from "../../components/typography/Label.js";
+import { Profile } from "../../components/icons/generated/Profile.js";
+import { Time } from "../../components/icons/generated/Time.js";
 const userInfoStyles = tv({
-    slots: {
-        base: ["flex", "gap-2", "items-center"],
-        userInfo: ["flex", "flex-col", "gap-2", "justify-center", "items-start"],
-        displayName: ["text-slate-900", "**:cursor-pointer"],
-        detailInfo: ["flex", "flex", "gap-4"],
-        timeInfo: ["text-slate-500"],
-    },
+  slots: {
+    base: ["flex", "gap-2", "items-center"],
+    userInfo: ["flex", "flex-col", "gap-2", "justify-center", "items-start"],
+    displayName: ["text-slate-900", "**:cursor-pointer"],
+    detailInfo: ["flex", "flex", "gap-4"],
+    timeInfo: ["text-slate-500"]
+  }
 });
 function timeSince(timestamp) {
-    const now = new Date();
-    const past = timestamp instanceof Date ? timestamp : new Date(timestamp);
-    const diffMs = now.getTime() - past.getTime();
-    const seconds = Math.floor(diffMs / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    const months = Math.floor(days / 30); // approximate
-    const years = Math.floor(days / 365); // approximate
-    if (years > 0)
-        return years === 1 ? "1 year ago" : `${years} years ago`;
-    if (months > 0)
-        return months === 1 ? "1 month ago" : `${months} months ago`;
-    if (days > 0)
-        return days === 1 ? "1 day ago" : `${days} days ago`;
-    if (hours > 0)
-        return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
-    if (minutes > 0)
-        return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
-    return seconds <= 1 ? "just now" : `${seconds} seconds ago`;
+  const now = /* @__PURE__ */ new Date();
+  const past = timestamp instanceof Date ? timestamp : new Date(timestamp);
+  const diffMs = now.getTime() - past.getTime();
+  const seconds = Math.floor(diffMs / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+  if (years > 0) return years === 1 ? "1 year ago" : `${years} years ago`;
+  if (months > 0) return months === 1 ? "1 month ago" : `${months} months ago`;
+  if (days > 0) return days === 1 ? "1 day ago" : `${days} days ago`;
+  if (hours > 0) return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+  if (minutes > 0)
+    return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
+  return seconds <= 1 ? "just now" : `${seconds} seconds ago`;
 }
 function getLabelSize(size) {
-    switch (size) {
-        case "sm":
-            return "md";
-        case "md":
-            return "lg";
-        case "lg":
-            return "xl";
-        default:
-            return "md";
-    }
+  switch (size) {
+    case "sm":
+      return "md";
+    case "md":
+      return "lg";
+    case "lg":
+      return "xl";
+    default:
+      return "md";
+  }
 }
-/**
- * UserInfo Component
- *
- * Displays a user avatar, display name, username, and a timestamp indicating
- * when an activity occurred. The entire component acts as an interactive button
- * and includes keyboard accessibility using `Enter` and `Space`.
- */
-export const UserInfo = (props) => {
-    const { base, userInfo, displayName, detailInfo, timeInfo } = userInfoStyles(props);
-    return (_jsxs("div", { className: base(), children: [props.src && (_jsx(Avatar, { alt: "Profile", size: "sm", src: props.src, onAvatarClick: props.onClick })), _jsxs("div", { className: userInfo(), children: [_jsx("button", { onClick: props.onClick, className: displayName(), children: _jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }), _jsxs("div", { className: detailInfo(), children: [_jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onClick, children: props.userName }), props.timestamp && (_jsx(IconButton, { intent: "primary", icon: Time, className: timeInfo(), onClick: props.onClick, children: timeSince(props.timestamp) }))] })] })] }));
+const UserInfo = (props) => {
+  const { base, userInfo, displayName, detailInfo, timeInfo } = userInfoStyles(props);
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    props.src && /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        alt: "Profile",
+        size: "sm",
+        src: props.src,
+        onAvatarClick: props.onClick
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: userInfo(), children: [
+      /* @__PURE__ */ jsx("button", { onClick: props.onClick, className: displayName(), children: /* @__PURE__ */ jsx(Label, { size: getLabelSize(props.size), children: props.displayName }) }),
+      /* @__PURE__ */ jsxs("div", { className: detailInfo(), children: [
+        /* @__PURE__ */ jsx(IconButton, { intent: "secondary", icon: Profile, onClick: props.onClick, children: props.userName }),
+        props.timestamp && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            intent: "primary",
+            icon: Time,
+            className: timeInfo(),
+            onClick: props.onClick,
+            children: timeSince(props.timestamp)
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  UserInfo
 };