npm - @lax-wp/design-system - Versions diffs - 0.13.56 → 0.13.58 - Mend

@lax-wp/design-system 0.13.56 → 0.13.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/user-avatar/UserAvatar.es.js CHANGED Viewed

@@ -1,24 +1,24 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { GroupsOutlined as re } from "@mui/icons-material";
-import ae from "@mui/icons-material/EditOutlined";
-import oe from "@mui/icons-material/WarningRounded";
-import l from "../../_virtual/index.es.js";
-import { useState as B, useRef as v, useMemo as le, useEffect as F } from "react";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import re from "@mui/icons-material/EditOutlined";
+import ae from "@mui/icons-material/WarningRounded";
+import o from "../../_virtual/index.es.js";
+import { useState as B, useRef as v, useMemo as oe, useEffect as F } from "react";
 import { Typography as n } from "../data-display/typography/Typography.es.js";
 import { Tag as p } from "../data-display/tag/Tag.es.js";
-import { Skeleton as te } from "../data-display/skeleton/Skeleton.es.js";
-import { getFlagComponentRectangleMd as ne } from "../../utils/countryFlags.es.js";
-import { UserAvatarPopper as ie } from "./UserAvatarPopper.es.js";
+import { Skeleton as le } from "../data-display/skeleton/Skeleton.es.js";
+import { getFlagComponentRectangleMd as te } from "../../utils/countryFlags.es.js";
+import { UserAvatarPopper as ne } from "./UserAvatarPopper.es.js";
 import { StatusInfoRow as de } from "./StatusInfoRow.es.js";
 import { sizeClasses as M, getInitials as A, initialsFontSizeClasses as $ } from "./constants.es.js";
-import { PersonIcon as ce } from "./PersonIcon.es.js";
-import { useDynamicPosition as se } from "./useDynamicPosition.es.js";
-const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "flex justify-between items-center", children: [
-  /* @__PURE__ */ e(n, { size: "small", variant: "medium", className: "mr-5", appearance: "body", children: i }),
-  d
+import { PersonIcon as ie } from "./PersonIcon.es.js";
+import { useDynamicPosition as ce } from "./useDynamicPosition.es.js";
+import { GroupsIcon as se } from "../icon/icons.generated.es.js";
+const k = ({ label: d, content: i }) => /* @__PURE__ */ l("div", { className: "flex justify-between items-center", children: [
+  /* @__PURE__ */ e(n, { size: "small", variant: "medium", className: "mr-5", appearance: "body", children: d }),
+  i
 ] }), me = ({
-  firstName: i,
-  lastName: d,
+  firstName: d,
+  lastName: i,
   email: G,
   profilePic: c,
   size: y = "md",
@@ -36,16 +36,14 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
   onHover: Q,
   currentlyEditing: L
 }) => {
-  if (i === "All" && d === "Users")
-    return /* @__PURE__ */ e("div", { className: "p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center", children: /* @__PURE__ */ e(re, { sx: { fontSize: 16 }, className: "text-primary-600 dark:text-primary-600" }) });
-  const [X, N] = B(!1), [S, s] = B(!1), Y = M[y], {
+  const [X, N] = B(!1), [T, s] = B(!1), Y = M[y], {
     triggerRef: Z,
     dropdownRef: _,
     position: g,
     isVisible: O,
-    show: T,
-    hide: I
-  } = se(), C = v({}), E = le(() => {
+    show: I,
+    hide: S
+  } = ce(), C = v({}), E = oe(() => {
     if (u || !m) return !1;
     const a = new Date(m);
     return ((/* @__PURE__ */ new Date()).getTime() - a.getTime()) / (1e3 * 60 * 60) < 24;
@@ -76,14 +74,14 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
     t.current && clearTimeout(t.current);
   }, []);
   const x = c ? C.current[c] : void 0, t = v(null), z = v(null), D = () => {
-    Q?.(), i && d && W && (t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+    Q?.(), d && i && W && (t.current && clearTimeout(t.current), t.current = setTimeout(() => {
       N(!0);
     }, 300));
   }, H = (a) => {
     t.current && clearTimeout(t.current), t.current = setTimeout(() => {
       z.current && !z.current.contains(a.relatedTarget) && N(!1);
     }, 200);
-  }, ee = /* @__PURE__ */ o(
+  }, ee = /* @__PURE__ */ l(
     "div",
     {
       ref: z,
@@ -93,20 +91,20 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
       },
       onMouseLeave: (a) => H(a),
       children: [
-        /* @__PURE__ */ o("div", { className: "flex flex-col gap-1 items-center p-5", children: [
-          /* @__PURE__ */ o("div", { className: l("relative", M[w]), children: [
-            x && S ? /* @__PURE__ */ e(
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-1 items-center p-5", children: [
+          /* @__PURE__ */ l("div", { className: o("relative", M[w]), children: [
+            x && T ? /* @__PURE__ */ e(
               "img",
               {
                 src: x,
                 alt: "Profile",
-                className: l("rounded-full border-2 object-cover w-full h-full", b),
+                className: o("rounded-full border-2 object-cover w-full h-full", b),
                 onError: () => s(!1)
               }
             ) : /* @__PURE__ */ e(
               "div",
               {
-                className: l(
+                className: o(
                   "bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full",
                   b
                 ),
@@ -116,8 +114,8 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
                     size: "extra-small",
                     variant: "semibold",
                     appearance: "custom",
-                    className: l("text-primary-600", $[w]),
-                    children: A((i || "") + " " + (d || ""))
+                    className: o("text-primary-600", $[w]),
+                    children: A((d || "") + " " + (i || ""))
                   }
                 )
               }
@@ -125,7 +123,7 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
             h && /* @__PURE__ */ e(
               "div",
               {
-                className: l(
+                className: o(
                   "absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",
                   V[w],
                   h
@@ -133,19 +131,19 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
               }
             )
           ] }),
-          /* @__PURE__ */ o("div", { className: "flex flex-row gap-1 items-center justify-center", children: [
-            /* @__PURE__ */ o(n, { size: "medium", variant: "semibold", className: "w-full text-center", children: [
-              i || "",
+          /* @__PURE__ */ l("div", { className: "flex flex-row gap-1 items-center justify-center", children: [
+            /* @__PURE__ */ l(n, { size: "medium", variant: "semibold", className: "w-full text-center", children: [
+              d || "",
               " ",
-              d || ""
+              i || ""
             ] }),
-            r?.region && /* @__PURE__ */ e("span", { children: ne(r?.region) })
+            r?.region && /* @__PURE__ */ e("span", { children: te(r?.region) })
           ] }),
           /* @__PURE__ */ e(n, { size: "small", variant: "medium", appearance: "body", children: G || r?.email || "" })
         ] }),
-        L ? /* @__PURE__ */ e("div", { className: "px-5 pb-3", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]", children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950", children: /* @__PURE__ */ e(ae, { sx: { width: 13, height: 13 }, className: "text-primary-600 dark:text-primary-500" }) }),
-          /* @__PURE__ */ o("div", { className: "flex flex-col min-w-0", children: [
+        L ? /* @__PURE__ */ e("div", { className: "px-5 pb-3", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]", children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950", children: /* @__PURE__ */ e(re, { sx: { width: 13, height: 13 }, className: "text-primary-600 dark:text-primary-500" }) }),
+          /* @__PURE__ */ l("div", { className: "flex flex-col min-w-0", children: [
             /* @__PURE__ */ e(
               n,
               {
@@ -159,7 +157,7 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
             /* @__PURE__ */ e(n, { size: "extra-small", variant: "semibold", className: "truncate", children: L })
           ] })
         ] }) }) : null,
-        R && (K ? /* @__PURE__ */ e("div", { className: "p-5", children: /* @__PURE__ */ e(te, {}) }) : R && (r?.teams || r?.clearanceLevel || r?.group) ? /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg", children: [
+        R && (K ? /* @__PURE__ */ e("div", { className: "p-5", children: /* @__PURE__ */ e(le, {}) }) : R && (r?.teams || r?.clearanceLevel || r?.group) ? /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg", children: [
           /* @__PURE__ */ e(de, { isActive: u, lastViewedOn: m }),
           r.username && /* @__PURE__ */ e(
             k,
@@ -172,7 +170,7 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
             k,
             {
               label: "Team",
-              content: /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
+              content: /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
                 r?.teams?.length > 0 && /* @__PURE__ */ e(
                   p,
                   {
@@ -183,13 +181,13 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
                   },
                   r?.teams[0]?.id
                 ),
-                r?.teams?.length >= 2 && /* @__PURE__ */ o(
+                r?.teams?.length >= 2 && /* @__PURE__ */ l(
                   "div",
                   {
                     ref: Z,
                     className: "relative cursor-pointer",
-                    onMouseEnter: T,
-                    onMouseLeave: I,
+                    onMouseEnter: I,
+                    onMouseLeave: S,
                     onClick: (a) => a.stopPropagation(),
                     children: [
                       /* @__PURE__ */ e(p, { label: `+ ${r?.teams?.length - 1} More`, color: "#004f08", size: "md", isHashColor: !0 }, 1),
@@ -197,7 +195,7 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
                         "div",
                         {
                           ref: _,
-                          className: l(
+                          className: o(
                             "absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60",
                             {
                               "top-full": g.vertical === "bottom",
@@ -206,8 +204,8 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
                               "right-0": g.horizontal === "right"
                             }
                           ),
-                          onMouseEnter: T,
-                          onMouseLeave: I,
+                          onMouseEnter: I,
+                          onMouseLeave: S,
                           children: r?.teams?.slice(1)?.map((a, f) => /* @__PURE__ */ e("div", { className: "my-2", children: /* @__PURE__ */ e(p, { label: a?.name, color: a?.color || "#4A5568", size: "md", isHashColor: !0, className: "w-fit" }, a?.id) }, a?.id || f))
                         }
                       )
@@ -240,9 +238,9 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
               )
             }
           )
-        ] }) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg", children: /* @__PURE__ */ o(n, { className: "flex items-center justify-center gap-1", size: "extra-small", variant: "medium", appearance: "body", children: [
+        ] }) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg", children: /* @__PURE__ */ l(n, { className: "flex items-center justify-center gap-1", size: "extra-small", variant: "medium", appearance: "body", children: [
           /* @__PURE__ */ e(
-            oe,
+            ae,
             {
               sx: {
                 height: "16px",
@@ -256,27 +254,27 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
       ]
     }
   ), U = v(null);
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ l(
     "div",
     {
       onMouseEnter: D,
       onMouseLeave: H,
-      className: l("inline-block relative cursor-pointer", q),
+      className: o("inline-block relative cursor-pointer", q),
       ref: U,
       children: [
-        /* @__PURE__ */ o("div", { className: l("relative", P || Y), children: [
-          x && S ? /* @__PURE__ */ e(
+        /* @__PURE__ */ l("div", { className: o("relative", P || Y), children: [
+          x && T ? /* @__PURE__ */ e(
             "img",
             {
               src: x,
               alt: "Profile",
-              className: l("rounded-full border object-cover w-full h-full", b),
+              className: o("rounded-full border object-cover w-full h-full", b),
               onError: () => s(!1)
             }
-          ) : i && d ? /* @__PURE__ */ e(
+          ) : d === "All" && i === "Users" ? /* @__PURE__ */ e("div", { className: o("rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center"), children: /* @__PURE__ */ e(se, { className: "text-primary-600 dark:text-primary-600 w-md h-md" }) }) : d && i ? /* @__PURE__ */ e(
             "div",
             {
-              className: l(
+              className: o(
                 "bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700",
                 M[y],
                 b
@@ -287,16 +285,16 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
                   size: "extra-small",
                   variant: "semibold",
                   appearance: "custom",
-                  className: l("text-primary-600", $[y]),
-                  children: A((i || "") + " " + (d || ""))
+                  className: o("text-primary-600", $[y]),
+                  children: A((d || "") + " " + (i || ""))
                 }
               )
             }
-          ) : /* @__PURE__ */ e("div", { className: l(b, "p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"), children: /* @__PURE__ */ e(ce, { fill: "#98A2B3" }) }),
+          ) : /* @__PURE__ */ e("div", { className: o(b, "p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"), children: /* @__PURE__ */ e(ie, { fill: "#98A2B3" }) }),
           J && h && /* @__PURE__ */ e(
             "div",
             {
-              className: l(
+              className: o(
                 "absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2",
                 h
               )
@@ -304,7 +302,7 @@ const k = ({ label: i, content: d }) => /* @__PURE__ */ o("div", { className: "f
           )
         ] }),
         /* @__PURE__ */ e(
-          ie,
+          ne,
           {
             isOpen: X,
             onClose: () => N(!1),

package/dist/components/user-avatar/UserAvatar.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials, initialsFontSizeClasses } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[hoverSize])}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </Typography>\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700',\n sizeClasses[size],\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[size])}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </Typography>\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","initialsFontSizeClasses","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
1	+ {"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials, initialsFontSizeClasses } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\nimport { GroupsIcon } from '../icon';\n\nexport type UserAvatarSize = '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n // if (firstName === 'All' && lastName === 'Users') {\n // return (\n // <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n // <GroupsIcon className='text-primary-600 dark:text-primary-600 w-xs h-xs' />\n // </div>\n // );\n // }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[hoverSize])}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </Typography>\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName === 'All' && lastName === 'Users' ? (\n <div className={cn('rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center')}>\n <GroupsIcon className='text-primary-600 dark:text-primary-600 w-md h-md' />\n </div>\n ) :\n firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 flex items-center justify-center rounded-full border dark:bg-black-700',\n sizeClasses[size],\n borderColor,\n )}\n >\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className={cn('text-primary-600', initialsFontSizeClasses[size])}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </Typography>\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","initialsFontSizeClasses","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","GroupsIcon","PersonIcon","UserAvatarPopper"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.13.56",
+  "version": "0.13.58",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",