@worknice/whiteboard 0.56.0 → 0.57.0

package/dist/presentation/Avatar_module.css

@@ -1,10 +1,126 @@
-.container-PMPxkh {
-  background: var(--color-grey-t09);
-  border-radius: var(--size-n2);
-  height: var(--height);
-  outline-offset: -1px;
-  outline: var(--size-n5) solid color-mix(in oklch, var(--color-grey-s04) 10%, transparent);
-  width: var(--width);
+.root-EiaKry {
+  box-sizing: border-box;
+  height: var(--avatar-size);
+  vertical-align: middle;
+  width: var(--avatar-size);
+  flex-shrink: 0;
+  line-height: 0;
+  display: inline-block;
+  position: relative;
   overflow: hidden;
 }
 
+.media-wRrTVs {
+  color: inherit;
+  border-radius: 50%;
+  line-height: 0;
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+}
+
+.mediaInteractive-dZHNzy {
+  cursor: pointer;
+  font: inherit;
+  text-align: inherit;
+  background: none;
+  border: none;
+  padding: 0;
+  position: relative;
+}
+
+.mediaInteractive-dZHNzy:after {
+  box-shadow: inset 0 0 0 2px var(--tone-primary);
+  content: "";
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 50%;
+  transition: opacity .12s;
+  position: absolute;
+  inset: 0;
+}
+
+.mediaInteractive-dZHNzy:hover:after, .mediaInteractive-dZHNzy:focus-visible:after {
+  opacity: 1;
+}
+
+.mediaInteractive-dZHNzy:focus-visible {
+  outline: none;
+}
+
+.avatarInner-IL2fkD {
+  line-height: 0;
+  display: inline-block;
+  position: relative;
+}
+
+.svg-ffgue0 {
+  display: block;
+}
+
+.placeholderIconWrap-i2HHwu {
+  pointer-events: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.badge-f6Iksi {
+  background: var(--color-grey-t08);
+  border: 2px solid var(--color-white);
+  box-sizing: border-box;
+  height: max(14px, calc(var(--avatar-size) * .31));
+  pointer-events: none;
+  width: max(14px, calc(var(--avatar-size) * .31));
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translateX(8%);
+}
+
+.badgeGlyph-hnwtyd {
+  transform-origin: center;
+  line-height: 0;
+  display: inline-flex;
+  transform: scale(.87);
+}
+
+.hoverIconOverlay-VNqOuN {
+  background: color-mix(in oklch, var(--color-grey-s04) 35%, transparent);
+  color: var(--color-white);
+  opacity: 0;
+  pointer-events: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  transition: opacity .15s;
+  display: flex;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.hoverIconScaled-hPDNBn {
+  transform-origin: center;
+  line-height: 0;
+  display: inline-flex;
+  transform: scale(1.5);
+}
+
+.root-EiaKry:hover .hoverIconOverlay-VNqOuN {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hoverIconOverlay-VNqOuN, .mediaInteractive-dZHNzy:after {
+    transition: none;
+  }
+}
+

package/dist/presentation/Logo.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    alt?: string;
+    height?: number;
+    src?: string;
+    width?: number;
+};
+declare const Logo: ({ src, width, height, alt }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Logo;

package/dist/presentation/Logo.js

@@ -0,0 +1,27 @@
+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__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Logo_module_js_d7038cf3__ from "./Logo.module.js";
+const Logo = ({ 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__Logo_module_js_d7038cf3__["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
+    });
+};
+const Logo_rslib_entry_ = Logo;
+export { Logo_rslib_entry_ as default };

package/dist/presentation/Logo.module.js

@@ -0,0 +1,5 @@
+import "./Logo_module.css";
+const Logo_module_rslib_entry_ = {
+    container: "container-R9ljQG"
+};
+export { Logo_module_rslib_entry_ as default };

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

@@ -0,0 +1,22 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ src, width, height, alt }: {
+        alt?: string;
+        height?: number;
+        src?: string;
+        width?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        alt: string;
+        height: number;
+        src: string;
+        width: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Framed square logo area with an image (`<img>` in Storybook via `NextContext`). */
+export declare const WithImage: Story;
+/** Empty frame when `src` is omitted (for example a missing org logo). */
+export declare const Placeholder: Story;
+export declare const Large: Story;

package/dist/presentation/Logo.stories.js

@@ -0,0 +1,24 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Logo_js_fd146899__ from "./Logo.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__Logo_js_fd146899__["default"],
+    args: {
+        alt: "Logo",
+        height: 48,
+        src: "/worknice-logo.png",
+        width: 48
+    }
+};
+const Logo_stories_rslib_entry_ = meta;
+const WithImage = {};
+const Placeholder = {
+    args: {
+        src: void 0
+    }
+};
+const Large = {
+    args: {
+        height: 80,
+        width: 80
+    }
+};
+export { Large, Placeholder, WithImage, Logo_stories_rslib_entry_ as default };

package/dist/presentation/Logo_module.css

@@ -0,0 +1,10 @@
+.container-R9ljQG {
+  background: var(--color-grey-t09);
+  border-radius: var(--size-n2);
+  height: var(--height);
+  outline-offset: -1px;
+  outline: var(--size-n5) solid color-mix(in oklch, var(--color-grey-s04) 10%, transparent);
+  width: var(--width);
+  overflow: hidden;
+}
+

package/dist/presentation/PersonCover.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-import PersonAvatar from "./PersonAvatar";
-type Props = ComponentProps<typeof PersonAvatar>;
+import Avatar from "./Avatar";
+type Props = ComponentProps<typeof Avatar>;
 declare const PersonCover: ({ id, size, name, imageUrl, hue }: Omit<Props, "children">) => import("react/jsx-runtime").JSX.Element;
 export default PersonCover;

package/dist/presentation/PersonCover.js

@@ -1,5 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_6bab610a__ from "./PersonAvatar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_7e0bab6d__ from "./Avatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PersonCover_module_js_e0f8db03__ from "./PersonCover.module.js";
 const PersonCover = ({ id, size = "xlarge", name, imageUrl, hue })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
         className: __WEBPACK_EXTERNAL_MODULE__PersonCover_module_js_e0f8db03__["default"].container,
@@ -17,7 +17,7 @@ const PersonCover = ({ id, size = "xlarge", name, imageUrl, hue })=>/*#__PURE__*
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 className: __WEBPACK_EXTERNAL_MODULE__PersonCover_module_js_e0f8db03__["default"].avatarContainer,
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_6bab610a__["default"], {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Avatar_js_7e0bab6d__["default"], {
                     id: id,
                     size: size,
                     name: name,

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

@@ -0,0 +1,67 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ id, size, name, imageUrl, hue }: Omit<({
+        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;
+    }), "children">) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        hue: string;
+        id: string;
+        imageUrl: string;
+        name: string;
+        size: "xlarge";
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/nextjs-vite").ReactRenderer, {
+        id: string;
+        size?: ("small" | "large" | "xlarge" | "tiny" | "xtiny") | undefined;
+        onClick?: ((event: import("react").MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void) | undefined;
+        name?: string | undefined;
+        hue?: string | undefined;
+        href?: string | undefined;
+        imageUrl?: string | null | undefined;
+        badgeIcon?: import("./Avatar").IconSymbol | undefined;
+        hoverIcon?: import("./Avatar").IconSymbol | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Blurred photo behind the avatar, or gradient + initials when there is no photo. */
+export declare const WithPhoto: Story;
+export declare const GradientOnly: Story;
+export declare const SmallAvatar: Story;

package/dist/presentation/PersonCover.stories.js

@@ -0,0 +1,39 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__ from "../utils/storybook.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PersonCover_js_004529cf__ from "./PersonCover.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__PersonCover_js_004529cf__["default"],
+    args: {
+        hue: "280",
+        id: "person-cover-story",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__.avatarUrl)(12),
+        name: "Alex Morgan",
+        size: "xlarge"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    margin: "0 auto",
+                    maxWidth: 420,
+                    width: "100%"
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Story, {})
+            })
+    ],
+    parameters: {
+        layout: "padded"
+    }
+};
+const PersonCover_stories_rslib_entry_ = meta;
+const WithPhoto = {};
+const GradientOnly = {
+    args: {
+        imageUrl: void 0
+    }
+};
+const SmallAvatar = {
+    args: {
+        size: "large"
+    }
+};
+export { GradientOnly, SmallAvatar, WithPhoto, PersonCover_stories_rslib_entry_ as default };

package/dist/presentation/RichList/RichList.js

@@ -52,7 +52,16 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     const listScopeRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const [isCompactContentSlots, setIsCompactContentSlots] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const compactBreakpointPx = compactBreakpointProp ?? __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.RICH_LIST_CONTENT_COMPACT_MAX_PX;
+    const renderableContentSlots = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>contentSlots.filter((slot)=>{
+            if ("object" != typeof slot) return true;
+            if (!Object.hasOwn(slot, "hiddenByDefault") || !slot.hiddenByDefault) return true;
+            if (Object.hasOwn(slot, "canToggleVisibility") && !slot.canToggleVisibility) return true;
+            return false;
+        }), [
+        contentSlots
+    ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        if (0 === renderableContentSlots.length) return;
         const el = listScopeRef.current;
         if (!el) return;
         const update = ()=>{
@@ -64,6 +73,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
         ro.observe(el);
         return ()=>ro.disconnect();
     }, [
+        renderableContentSlots,
         compactBreakpointPx
     ]);
     const enableRowSelection = bulkActions.length + secondaryBulkActions.length > 0;
@@ -92,7 +102,7 @@ const RichList = ({ data, getRowId, leadingSlot, mainSlot, contentSlots = [], co
     }, [
         trailingSlot
     ]);
-    const rowMainHidesContentSlotColumns = isCompactContentSlots && !normalizedContentSlots.some((s)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(s.layoutVisibility, true));
+    const rowMainHidesContentSlotColumns = 0 === renderableContentSlots.length || isCompactContentSlots && !normalizedContentSlots.some((s)=>(0, __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__.isVisibleAtBreakpoint)(s.layoutVisibility, true));
     const allEntries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>[
             ...normalizedLeadingSlots,
             normalizedPrimary,

package/dist/presentation/RichList/RichListRow.js

@@ -2,6 +2,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__ from "../../controls/Disclosure.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_fa7c5c89__ from "../../controls/MenuButton.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__ from "../../inputs/CheckboxInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_c6ca8eb1__ from "../../utils/useNextContext.js";
@@ -218,13 +219,20 @@ const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSl
                     className: __WEBPACK_EXTERNAL_MODULE__RichListRow_module_js_3bb1d324__["default"].actionsLane,
                     onClick: (event)=>event.stopPropagation(),
                     children: [
-                        alwaysVisibleActions.map((action)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                        alwaysVisibleActions.map((action)=>"onClick" === action.type ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
                                 id: action.id,
                                 type: "ghost",
                                 size: "small",
                                 icon: action.icon,
                                 tooltip: action.label,
                                 onClick: ()=>action.onClick(rowOriginal)
+                            }, action.id) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
+                                id: action.id,
+                                type: "ghost",
+                                size: "small",
+                                icon: action.icon,
+                                tooltip: action.label,
+                                render: (onClose)=>action.render(onClose)
                             }, action.id)),
                         Array.from({
                             length: alwaysVisiblePlaceholderCount
@@ -252,8 +260,13 @@ const RichListRow = ({ row, table, enableRowSelection, href, normalizedLeadingSl
                                 id: action.id,
                                 label: action.label,
                                 icon: action.icon,
-                                type: "onClick",
-                                onClick: ()=>action.onClick(rowOriginal)
+                                ..."onClick" === action.type ? {
+                                    onClick: ()=>action.onClick(rowOriginal),
+                                    type: "onClick"
+                                } : {
+                                    render: (onClose)=>action.render(onClose),
+                                    type: "render"
+                                }
                             })),
                         icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
                             symbol: "Overflow"

package/dist/presentation/RichList/stories/ComplianceGroups.js

@@ -1,6 +1,9 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_js_30fa518e__ from "../../Card.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_a2c43d68__ from "../../CardContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_ddbcc46a__ from "../../Modal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
 function requirementsLabel(n) {
@@ -73,7 +76,23 @@ const rowActions = ()=>[
                 symbol: "Visible"
             }),
             alwaysVisible: false,
-            onClick: ()=>void 0
+            type: "render",
+            render: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_ddbcc46a__["default"], {
+                    onClose: onClose,
+                    size: "small",
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_30fa518e__["default"], {
+                        header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                            font: "h6",
+                            tagName: "h6",
+                            children: "View group"
+                        }),
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_a2c43d68__["default"], {
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                                children: "This is a compliance group."
+                            })
+                        })
+                    })
+                })
         },
         {
             id: "edit",
@@ -82,6 +101,7 @@ const rowActions = ()=>[
                 symbol: "Edit"
             }),
             alwaysVisible: false,
+            type: "onClick",
             onClick: ()=>void 0
         }
     ];

package/dist/presentation/RichList/stories/CustomFields.js

@@ -41,6 +41,7 @@ const rowActions = ()=>[
                 symbol: "Edit"
             }),
             alwaysVisible: false,
+            type: "onClick",
             onClick: ()=>void 0
         }
     ];

package/dist/presentation/RichList/stories/EmployeePeople.js

@@ -1,99 +1,99 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__ from "../../../utils/storybook.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__ from "../../Avatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
-import * as __WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__ from "../../PersonAvatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
-import * as __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__ from "./shared.js";
 const employees = [
     {
         id: "e1",
         name: "Sarah Jenkins",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(19),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(19),
         line: "VP of Engineering at New York"
     },
     {
         id: "e2",
         name: "David Miller",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(20),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(20),
         line: "Product Manager at London"
     },
     {
         id: "e3",
         name: "Emily Chen",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(21),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(21),
         line: "Frontend Developer at Remote"
     },
     {
         id: "e4",
         name: "James Washington",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(22),
         line: "HR Specialist at Chicago"
     },
     {
         id: "e5",
         name: "Priya Shah",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(23),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(23),
         line: "Director of Finance at Sydney"
     },
     {
         id: "e6",
         name: "Marcus Webb",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(24),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(24),
         line: "Warehouse Lead at Melbourne"
     },
     {
         id: "e7",
         name: "Nina Okonkwo",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(25),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(25),
         line: "Legal Counsel at Head Office"
     },
     {
         id: "e8",
         name: "Oliver Grant",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(26),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(26),
         line: "Sales Manager at Remote"
     },
     {
         id: "e9",
         name: "Rachel Kim",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(27),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(27),
         line: "UX Researcher at San Francisco"
     },
     {
         id: "e10",
         name: "Samuel Ortiz",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(28),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(28),
         line: "DevOps Engineer at Austin"
     },
     {
         id: "e11",
         name: "Tessa Bloom",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(29),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(29),
         line: "Chief of Staff at Seattle"
     },
     {
         id: "e12",
         name: "Victor Ng",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(30),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(30),
         line: "Data Analyst at Singapore"
     },
     {
         id: "e13",
         name: "Yuki Tanaka",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(31),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(31),
         line: "Account Executive at Tokyo"
     },
     {
         id: "e14",
         name: "Zara Ali",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(32),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(32),
         line: "Customer Success at Dubai"
     },
     {
         id: "e15",
         name: "Ben Carter",
-        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(33),
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_9566133d__.avatarUrl)(33),
         line: "Facilities Coordinator at Manchester"
     }
 ];
@@ -105,6 +105,7 @@ const rowActions = ()=>[
             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
                 symbol: "Email"
             }),
+            type: "onClick",
             onClick: ()=>void 0
         },
         {
@@ -114,12 +115,13 @@ const rowActions = ()=>[
             icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
                 symbol: "Phone"
             }),
+            type: "onClick",
             onClick: ()=>void 0
         }
     ];
 const leadingSlot = {
     id: "avatar",
-    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Avatar_js_1229b6e4__["default"], {
             id: r.id,
             name: r.name,
             imageUrl: r.imageUrl,