@worknice/whiteboard 0.55.4 → 0.57.0

package/dist/layouts/FullLayout.js

@@ -10,21 +10,18 @@ import * as __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__ from "./F
 const FullLayout = ({ aside, asidePosition = {
     desktop: "asideLast",
     mobile: "asideFirst"
-}, backLink, navigation, brandTypeface, children, header, mainNavChildren, menuState, navTitle, setMenuState, summary, toolbarChildren, layoutType })=>{
-    const { router } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+}, backLink, navigation, brandTypeface, children, header, mainNavChildren, menuState, navTitle, setMenuState, summary, toolbarChildren, padding = "default" })=>{
+    const { pathname } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
     const toggleRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const navRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const prevPathnameRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (!router) return;
-        const routeChangeStart = ()=>{
+        if (null !== prevPathnameRef.current && prevPathnameRef.current !== pathname) {
             if (window.innerWidth < 1440) setMenuState("closed");
-        };
-        router.events.on("routeChangeStart", routeChangeStart);
-        return ()=>{
-            router.events.off("routeChangeStart", routeChangeStart);
-        };
+        }
+        prevPathnameRef.current = pathname;
     }, [
-        router,
+        pathname,
         setMenuState
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
@@ -64,6 +61,7 @@ const FullLayout = ({ aside, asidePosition = {
                                     setMenuState((current)=>"open" === current ? "closed" : "open");
                                 },
                                 title: "Toggle Sidebar",
+                                type: "ghost",
                                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_SidebarIcon_js_fabd050a__["default"], {})
                             })
                         }),
@@ -91,32 +89,13 @@ const FullLayout = ({ aside, asidePosition = {
                         })
                     ]
                 }) : null,
-                "centered" === layoutType ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].centerLayoutContent,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("main", {
-                        children: children
-                    })
-                }) : "narrow" === layoutType ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].narrowLayoutContent,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("main", {
-                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-                            __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].main,
-                            __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].full
-                        ]),
-                        children: [
-                            header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].header,
-                                children: header
-                            }) : null,
-                            summary ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("aside", {
-                                className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].summary,
-                                children: summary
-                            }) : null,
-                            children
-                        ]
-                    })
-                }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].content, "asideFirst" === asidePosition.desktop ? __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstDesktop : __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastDesktop, "asideFirst" === asidePosition.mobile ? __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstMobile : __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastMobile),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].content, "default" === padding && __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].padded, aside && {
+                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstDesktop]: "asideFirst" === asidePosition.desktop,
+                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastDesktop]: "asideLast" === asidePosition.desktop,
+                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideFirstMobile]: "asideFirst" === asidePosition.mobile,
+                        [__WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].contentAsideLastMobile]: "asideLast" === asidePosition.mobile
+                    }),
                     children: [
                         header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                             className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].header,

package/dist/layouts/FullLayout.module.js

@@ -17,9 +17,8 @@ const FullLayout_module_rslib_entry_ = {
     contentAsideLastMobile: "contentAsideLastMobile-nY6jcb",
     main: "main-bb8i9x",
     full: "full-BIhVlq",
-    centerLayoutContent: "centerLayoutContent-OXDuxB",
-    narrowLayoutContent: "narrowLayoutContent-v6PtTH",
     content: "content-kaxfp0",
+    padded: "padded-L3X4Ui",
     contentAsideFirstDesktop: "contentAsideFirstDesktop-bKnZtC"
 };
 export { FullLayout_module_rslib_entry_ as default };

package/dist/layouts/FullLayout_module.css

@@ -38,6 +38,7 @@
 .closed-iSkj26 .toggle-GcG0Tq {
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
+  color: var(--tone-default);
   background: #ffffffb3;
   box-shadow: 0 0 0 .5px #3c3c435c;
 }
@@ -71,7 +72,6 @@
   font-family: var(--typeface-system);
   bottom: 0;
   left: calc(-1 * var(--nav-width)  - 1px);
-  letter-spacing: -.5px;
   -webkit-user-select: none;
   user-select: none;
   width: var(--nav-width);
@@ -165,57 +165,21 @@
   grid-column: 1 / -1;
 }
 
-.centerLayoutContent-OXDuxB {
-  min-height: 100vh;
-  padding: var(--size-00) var(--size-00);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-@media (min-width: 768px) {
-  .centerLayoutContent-OXDuxB {
-    padding: var(--size-p3) var(--size-p3);
-  }
-}
-
-@media (min-width: 1440px) {
-  .centerLayoutContent-OXDuxB {
-    padding: var(--size-p4) var(--size-p4);
-  }
-}
-
-.narrowLayoutContent-v6PtTH {
-  padding: 60px var(--size-00) var(--size-00);
-  grid-template-columns: minmax(0, 720px);
-  justify-content: center;
+.content-kaxfp0 {
+  column-gap: var(--size-p1);
+  row-gap: var(--size-p1);
   display: grid;
 }
 
-@media (min-width: 768px) {
-  .narrowLayoutContent-v6PtTH {
-    padding: 60px var(--size-p3) var(--size-p3);
-  }
-}
-
-@media (min-width: 1440px) {
-  .narrowLayoutContent-v6PtTH {
-    padding: 60px var(--size-p4) var(--size-p4);
-  }
-}
-
-.content-kaxfp0 {
+.content-kaxfp0.padded-L3X4Ui {
   padding-top: 60px;
   padding-bottom: var(--size-00);
   padding-left: var(--size-00);
   padding-right: var(--size-00);
-  column-gap: var(--size-p1);
-  row-gap: var(--size-p1);
-  display: grid;
 }
 
 @media (min-width: 768px) {
-  .content-kaxfp0 {
+  .content-kaxfp0.padded-L3X4Ui {
     padding: 60px var(--size-p3) var(--size-p3);
   }
 }
@@ -231,7 +195,7 @@
 }
 
 @media (min-width: 1440px) {
-  .content-kaxfp0 {
+  .content-kaxfp0.padded-L3X4Ui {
     padding-bottom: var(--size-p4);
     padding-left: var(--size-p4);
     padding-right: var(--size-p4);

package/dist/layouts/MinimalLayout.js

@@ -4,7 +4,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__MinimalLayout_module_js_ad0496a2__ from "
 const MinimalLayout = ({ backLink, brandTypeface, children, toolbarItems })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__BaseLayout_js_b37d1475__["default"], {
         brandTypeface: brandTypeface,
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            toolbarItems || backLink ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__MinimalLayout_module_js_ad0496a2__["default"].toolbar,
                 children: [
                     toolbarItems ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
@@ -23,7 +23,7 @@ const MinimalLayout = ({ backLink, brandTypeface, children, toolbarItems })=>/*#
                         children: backLink
                     }) : null
                 ]
-            }),
+            }) : null,
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("main", {
                 className: __WEBPACK_EXTERNAL_MODULE__MinimalLayout_module_js_ad0496a2__["default"].main,
                 children: children

package/dist/presentation/Avatar.d.ts

@@ -1,8 +1,43 @@
-type Props = {
-    alt?: string;
-    height?: number;
-    src?: string;
-    width?: number;
+import type { ComponentProps, MouseEvent, ReactNode } from "react";
+import Icon from "./Icon";
+export type IconSymbol = ComponentProps<typeof Icon>["symbol"];
+type AvatarBaseProps = {
+    id: string;
+    size?: keyof typeof SIZES;
+    name?: string;
+    imageUrl?: string | null;
+    /**
+     * The background hue of the avatar when only name is provided.
+     * @default "280" (blue)
+     */
+    hue?: string;
+    /**
+     * Small icon displayed on the bottom right of the avatar.
+     */
+    badgeIcon?: IconSymbol;
+    /**
+     * Icon displayed on over the avatar when hovered.
+     * Useful for indicating an action.
+     */
+    hoverIcon?: IconSymbol;
+    onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
 };
-declare const Avatar: ({ src, width, height, alt }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = (AvatarBaseProps & {
+    href: string;
+    children?: never;
+}) | (AvatarBaseProps & {
+    href?: never;
+    children: (onClose: () => void) => ReactNode;
+}) | (AvatarBaseProps & {
+    href?: never;
+    children?: never;
+});
+declare const SIZES: {
+    readonly xtiny: 16;
+    readonly tiny: 24;
+    readonly small: 48;
+    readonly large: 96;
+    readonly xlarge: 192;
+};
+declare const Avatar: ({ id, size, name, imageUrl, hue, badgeIcon, hoverIcon, href, onClick, children, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/dist/presentation/Avatar.js

@@ -1,26 +1,212 @@
+"use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__ from "../utils/customProperties.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__ from "./Avatar.module.js";
-const Avatar = ({ src, width = 48, height = 48, alt })=>{
-    const { Image } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].container,
-        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__["default"])({
-            "--height": `${height}px`,
-            "--width": `${width}px`
-        }),
-        children: src ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Image, {
-            alt: alt ?? "",
-            height: height,
-            quality: 100,
-            src: src,
-            style: {
-                width,
-                height
-            },
-            width: width
-        }) : null
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+const DEFAULT_HUE = "280";
+const SIZES = {
+    xtiny: 16,
+    tiny: 24,
+    small: 48,
+    large: 96,
+    xlarge: 192
+};
+const getInitials = (name)=>{
+    const names = name.trim().split(/[\s-]+/);
+    return names.length <= 3 ? names.map((name)=>[
+            ...name
+        ][0]).join("") : [
+        ...names[0]
+    ][0] + [
+        ...names[names.length - 1]
+    ][0];
+};
+const hoverIconLayout = (avatarPx)=>{
+    if (avatarPx >= 160) return {
+        size: "xlarge"
+    };
+    if (avatarPx >= 88) return {
+        size: "large",
+        scaled: true
+    };
+    if (avatarPx >= 56) return {
+        size: "large"
+    };
+    if (avatarPx < 28) return {
+        size: "xsmall"
+    };
+    if (avatarPx < 40) return {
+        size: "small"
+    };
+    return {
+        size: "default"
+    };
+};
+const placeholderIconSize = (px)=>{
+    if (px <= 24) return "xsmall";
+    if (px <= 48) return "large";
+    return "xlarge";
+};
+const badgeIconSize = (avatarPx)=>{
+    const badgePx = Math.max(14, 0.31 * avatarPx);
+    if (badgePx < 17) return "xsmall";
+    if (badgePx < 22) return "small";
+    if (badgePx < 32) return "default";
+    if (badgePx < 46) return "large";
+    return "xlarge";
+};
+const Avatar = ({ id, size = "large", name, imageUrl, hue = DEFAULT_HUE, badgeIcon, hoverIcon, href, onClick, children })=>{
+    const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+    const [showChildren, setShowChildren] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const px = SIZES[size];
+    const trimmedName = name?.trim() ?? "";
+    const hasPhoto = Boolean(imageUrl);
+    const hasInitials = !hasPhoto && trimmedName.length > 0;
+    const isPlaceholder = !hasPhoto && !hasInitials;
+    const rootStyle = {
+        "--avatar-size": `${px}px`
+    };
+    const iconLayout = hoverIconLayout(px);
+    const interactive = null != href || null != children;
+    const mediaClass = (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].media, interactive && __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].mediaInteractive);
+    const svg = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+        className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].svg,
+        height: px,
+        viewBox: "0 0 96 96",
+        width: px,
+        children: hasPhoto ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("defs", {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("pattern", {
+                        id: `${id}-pattern`,
+                        height: "96",
+                        patternUnits: "userSpaceOnUse",
+                        width: "96",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("image", {
+                            height: "96",
+                            href: imageUrl ?? void 0,
+                            preserveAspectRatio: "xMidYMid slice",
+                            width: "96"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", {
+                    cx: "48",
+                    cy: "48",
+                    fill: "none",
+                    r: "48"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", {
+                    cx: "48",
+                    cy: "48",
+                    fill: `url(#${id}-pattern)`,
+                    r: "48"
+                })
+            ]
+        }) : hasInitials ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", {
+                    cx: "48",
+                    cy: "48",
+                    fill: `oklch(67.4% 0.1215 ${hue})`,
+                    r: "48"
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("text", {
+                    fill: "#fff",
+                    fontSize: 36,
+                    textAnchor: "middle",
+                    x: 48,
+                    y: 62,
+                    children: getInitials(trimmedName)
+                })
+            ]
+        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("circle", {
+                cx: "48",
+                cy: "48",
+                fill: "var(--color-grey-t10)",
+                r: "48",
+                stroke: "var(--color-grey-t08)",
+                strokeWidth: 1
+            })
+        })
+    });
+    const inner = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
+        className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].avatarInner,
+        children: [
+            svg,
+            isPlaceholder ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].placeholderIconWrap,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                    symbol: "Profile",
+                    size: placeholderIconSize(px),
+                    tone: "muted"
+                })
+            }) : null
+        ]
+    });
+    const labelledBy = trimmedName || "Profile";
+    const media = null != href ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+        "aria-label": labelledBy,
+        className: mediaClass,
+        href: href,
+        onClick: onClick,
+        children: inner
+    }) : null != children ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+        "aria-expanded": showChildren,
+        "aria-label": labelledBy,
+        className: mediaClass,
+        type: "button",
+        onClick: (event)=>{
+            if (onClick) onClick(event);
+            else setShowChildren(true);
+        },
+        children: inner
+    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+        className: mediaClass,
+        children: inner
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
+                className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].root,
+                style: rootStyle,
+                children: [
+                    media,
+                    badgeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        "aria-hidden": true,
+                        className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].badge,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].badgeGlyph,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                symbol: badgeIcon,
+                                size: badgeIconSize(px),
+                                tone: "default"
+                            })
+                        })
+                    }) : null,
+                    hoverIcon && interactive ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        "aria-hidden": true,
+                        className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].hoverIconOverlay,
+                        children: iconLayout.scaled ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Avatar_module_js_f95d762b__["default"].hoverIconScaled,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                symbol: hoverIcon,
+                                size: iconLayout.size
+                            })
+                        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                            symbol: hoverIcon,
+                            size: iconLayout.size
+                        })
+                    }) : null
+                ]
+            }),
+            showChildren && children ? children(()=>{
+                setShowChildren(false);
+            }) : null
+        ]
     });
 };
 const Avatar_rslib_entry_ = Avatar;

package/dist/presentation/Avatar.module.js

@@ -1,5 +1,14 @@
 import "./Avatar_module.css";
 const Avatar_module_rslib_entry_ = {
-    container: "container-PMPxkh"
+    root: "root-EiaKry",
+    media: "media-wRrTVs",
+    mediaInteractive: "mediaInteractive-dZHNzy",
+    avatarInner: "avatarInner-IL2fkD",
+    svg: "svg-ffgue0",
+    placeholderIconWrap: "placeholderIconWrap-i2HHwu",
+    badge: "badge-f6Iksi",
+    badgeGlyph: "badgeGlyph-hnwtyd",
+    hoverIconOverlay: "hoverIconOverlay-VNqOuN",
+    hoverIconScaled: "hoverIconScaled-hPDNBn"
 };
 export { Avatar_module_rslib_entry_ as default };

package/dist/presentation/Avatar.stories.d.ts

@@ -0,0 +1,63 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ id, size, name, imageUrl, hue, badgeIcon, hoverIcon, href, onClick, children, }: ({
+        id: string;
+        size?: "small" | "large" | "xlarge" | "tiny" | "xtiny";
+        name?: string;
+        imageUrl?: string | null;
+        hue?: string;
+        badgeIcon?: import("./Avatar").IconSymbol;
+        hoverIcon?: import("./Avatar").IconSymbol;
+        onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    } & {
+        href: string;
+        children?: never;
+    }) | ({
+        id: string;
+        size?: "small" | "large" | "xlarge" | "tiny" | "xtiny";
+        name?: string;
+        imageUrl?: string | null;
+        hue?: string;
+        badgeIcon?: import("./Avatar").IconSymbol;
+        hoverIcon?: import("./Avatar").IconSymbol;
+        onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    } & {
+        href?: never;
+        children: (onClose: () => void) => import("react").ReactNode;
+    }) | ({
+        id: string;
+        size?: "small" | "large" | "xlarge" | "tiny" | "xtiny";
+        name?: string;
+        imageUrl?: string | null;
+        hue?: string;
+        badgeIcon?: import("./Avatar").IconSymbol;
+        hoverIcon?: import("./Avatar").IconSymbol;
+        onClick?: (event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    } & {
+        href?: never;
+        children?: never;
+    })) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        hue: string;
+        id: string;
+        imageUrl: string;
+        name: string;
+        size: "small";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Photo clipped to a circle via SVG pattern. */
+export declare const WithPhoto: Story;
+/** Initials on a hue-matched fill when there is no photo. */
+export declare const Initials: Story;
+/** Implicit placeholder when there is no photo and no name. */
+export declare const Placeholder: Story;
+export declare const WithBadgeIcon: Story;
+export declare const WithHref: Story;
+export declare const WithHoverIcon: Story;
+/** Placeholder plus hover affordance and navigation. */
+export declare const PlaceholderAddAction: Story;
+export declare const Small: Story;
+export declare const Xlarge: Story;
+export declare const WithOnClickModal: Story;

package/dist/presentation/Avatar.stories.js

@@ -0,0 +1,94 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__ from "../utils/storybook.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_7e0bab6d__ from "./Avatar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__Avatar_js_7e0bab6d__["default"],
+    args: {
+        hue: "280",
+        id: "person-avatar-story",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__.avatarUrl)(12),
+        name: "Alex Morgan",
+        size: "small"
+    }
+};
+const Avatar_stories_rslib_entry_ = meta;
+const WithPhoto = {};
+const Initials = {
+    args: {
+        imageUrl: void 0,
+        name: "Alex Morgan"
+    }
+};
+const Placeholder = {
+    args: {
+        imageUrl: void 0,
+        name: void 0,
+        hue: void 0
+    }
+};
+const WithBadgeIcon = {
+    args: {
+        badgeIcon: "ArrowTurnLeftUp"
+    }
+};
+const WithHref = {
+    args: {
+        href: "#profile"
+    }
+};
+const WithHoverIcon = {
+    args: {
+        hoverIcon: "Edit",
+        href: "#edit-profile"
+    }
+};
+const PlaceholderAddAction = {
+    args: {
+        hoverIcon: "Plus",
+        href: "#add-person",
+        imageUrl: void 0,
+        name: void 0,
+        hue: void 0
+    }
+};
+const Small = {
+    args: {
+        size: "small"
+    }
+};
+const Xlarge = {
+    args: {
+        size: "xlarge"
+    }
+};
+const WithOnClickModal = {
+    args: {
+        hoverIcon: "Edit",
+        children: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
+                onClose: onClose,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+                    footer: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                        type: "secondary",
+                        onClick: onClose,
+                        children: "Close"
+                    }),
+                    header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                        font: "h6",
+                        tagName: "h6",
+                        children: "Profile"
+                    }),
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                            children: "Alex Morgan"
+                        })
+                    })
+                })
+            })
+    }
+};
+export { Initials, Placeholder, PlaceholderAddAction, Small, WithBadgeIcon, WithHoverIcon, WithHref, WithOnClickModal, WithPhoto, Xlarge, Avatar_stories_rslib_entry_ as default };