@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.13

package/dist/common/ShareModal/hooks/useShareBookmark.js

@@ -0,0 +1,67 @@
+import { useRef, useState, useId } from "react";
+import { odeServices } from "edifice-ts-client";
+import { useTranslation } from "react-i18next";
+import useToast from "../../../hooks/useToast/useToast.js";
+import useToggle from "../../../hooks/useToggle/useToggle.js";
+const useShareBookmark = ({
+  shareRights,
+  shareDispatch
+}) => {
+  const toast = useToast(), {
+    t
+  } = useTranslation(), refBookmark = useRef(null), [bookmark, setBookmark] = useState({
+    name: "",
+    id: useId()
+  }), [showBookmark, setShowBookmark] = useToggle(!1), [showBookmarkInput, toggleBookmarkInput] = useState(!1), toggleBookmark = () => {
+    setShowBookmark();
+  }, handleBookmarkChange = () => {
+    setBookmark((prev) => {
+      var _a;
+      return {
+        ...prev,
+        name: ((_a = refBookmark.current) == null ? void 0 : _a.value) || ""
+      };
+    });
+  }, saveBookmark = async (name) => {
+    try {
+      const res = await odeServices.directory().saveBookmarks(name, {
+        users: shareRights.rights.filter((right) => right.type === "user").map((u) => u.id),
+        groups: shareRights.rights.filter((right) => right.type === "group").map((u) => u.id),
+        bookmarks: shareRights.rights.filter((right) => right.type === "sharebookmark").map((u) => u.id)
+      });
+      toast.success(t("explorer.bookmarked.status.saved")), shareDispatch({
+        type: "updateShareRights",
+        payload: {
+          ...shareRights,
+          visibleBookmarks: [...shareRights.visibleBookmarks, {
+            displayName: name,
+            id: res.id
+          }]
+        }
+      }), setBookmark((prev) => ({
+        ...prev,
+        bookmarkId: prev.id + (/* @__PURE__ */ new Date()).getTime().toString()
+      })), toggleBookmarkInput(!1);
+    } catch (e) {
+      console.error("Failed to save bookmark", e), toast.error(t("explorer.bookmarked.status.error"));
+    }
+  };
+  return {
+    refBookmark,
+    showBookmark,
+    showBookmarkInput,
+    bookmark,
+    handleBookmarkChange,
+    setBookmark,
+    handleOnSave: () => {
+      var _a;
+      const inputValue = ((_a = refBookmark.current) == null ? void 0 : _a.value) || "";
+      saveBookmark(inputValue);
+    },
+    toggleBookmark,
+    toggleBookmarkInput
+  };
+};
+export {
+  useShareBookmark
+};

package/dist/{modules/modals → common}/ShareModal/hooks/useShareMutation.d.ts

@@ -1,6 +1,6 @@
-import { PutShareResponse, ShareRight } from '@edifice.io/ts-client';
-import { UseMutationOptions, UseMutationResult } from '../../../../../node_modules/@tanstack/react-query';
-export declare const useShareMutation: ({ application, options, }: {
+import { UseMutationOptions, UseMutationResult } from '../../../../node_modules/@tanstack/react-query';
+import { PutShareResponse, ShareRight } from 'edifice-ts-client';
+declare const useShareMutation: ({ application, options, }: {
     application: string;
     options?: UseMutationOptions<PutShareResponse, Error, {
         resourceId: string;

package/dist/common/ShareModal/hooks/useShareMutation.js

@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+import { odeServices } from "edifice-ts-client";
+const useShareMutation = ({
+  application,
+  options
+}) => useMutation({
+  mutationFn: async ({
+    resourceId,
+    rights
+  }) => await odeServices.share().saveRights(application, resourceId, rights),
+  ...options
+}), useShareMutation$1 = useShareMutation;
+export {
+  useShareMutation$1 as default
+};

package/dist/common/ShareModal/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ShareModal } from './ShareModal';
+export { default as ShareBlog } from './apps/ShareBlog';
+export { default as useShareMutation } from './hooks/useShareMutation';

package/dist/{modules/modals → common}/ShareModal/utils/hasRight.d.ts

@@ -1,2 +1,2 @@
-import { ShareRight, ShareRightAction } from '@edifice.io/ts-client';
+import { ShareRight, ShareRightAction } from 'edifice-ts-client';
 export declare const hasRight: (shareRight: ShareRight, shareAction: ShareRightAction) => boolean;

package/dist/common/ShareModal/utils/hasRight.js

@@ -0,0 +1,4 @@
+const hasRight = (shareRight, shareAction) => shareRight.actions.filter((a) => shareAction.id === a.id).length > 0;
+export {
+  hasRight
+};

package/dist/{modules/modals → common}/ShareModal/utils/showShareRightLine.d.ts

@@ -1,2 +1,2 @@
-import { ShareRight } from '@edifice.io/ts-client';
+import { ShareRight } from 'edifice-ts-client';
 export declare const showShareRightLine: (shareRight: ShareRight, showBookmarkMembers: boolean) => boolean;

package/dist/common/ShareModal/utils/showShareRightLine.js

@@ -0,0 +1,4 @@
+const showShareRightLine = (shareRight, showBookmarkMembers) => shareRight.isBookmarkMember && showBookmarkMembers || !shareRight.isBookmarkMember;
+export {
+  showShareRightLine
+};

package/dist/components/ActionBar/ActionBar.d.ts

@@ -6,5 +6,5 @@ export interface ActionBarProps {
     children: React.ReactNode;
 }
 export type ActionBarType = React.FC<ActionBarProps>;
-export declare const ActionBar: import('react').ForwardRefExoticComponent<ActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const ActionBar: import('react').ForwardRefExoticComponent<ActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ActionBar;

package/dist/components/ActionBar/ActionBar.js

@@ -1,10 +1,8 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-const i = /* @__PURE__ */ t(({
-  children: r
-}, o) => /* @__PURE__ */ a("div", { ref: o, className: "actionbar", children: r }));
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const ActionBar = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { ref, className: "actionbar", children })), ActionBar$1 = ActionBar;
 export {
-  i as ActionBar,
-  i as default
+  ActionBar$1 as default
 };
-//# sourceMappingURL=ActionBar.js.map

package/dist/components/ActionBar/index.d.ts

@@ -1 +1,2 @@
+export { default as ActionBar } from './ActionBar';
 export * from './ActionBar';

package/dist/components/Alert/Alert.d.ts

@@ -56,5 +56,5 @@ export interface AlertProps extends ComponentPropsWithRef<'div'> {
      */
     className?: string;
 }
-export declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<AlertRef>>;
+declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<AlertRef>>;
 export default Alert;

package/dist/components/Alert/Alert.js

@@ -1,80 +1,78 @@
-import { jsxs as N, jsx as s } from "react/jsx-runtime";
-import { forwardRef as I, useState as R, useRef as S, useCallback as T, useImperativeHandle as h, useLayoutEffect as B, useEffect as H } from "react";
-import L from "clsx";
-import { useTranslation as X } from "react-i18next";
-import { Button as q } from "../Button/Button.js";
-import { Icon as l } from "../Icon/Icon.js";
-const P = /* @__PURE__ */ I(({
-  type: o = "success",
-  className: M = "",
-  children: w,
-  button: i,
-  isDismissible: f = !1,
-  isToast: x = !1,
-  isConfirm: a = !1,
-  position: b = "none",
-  autoClose: n = !1,
-  autoCloseDelay: m = 3e3,
-  onClose: c,
-  onVisibilityChange: t
-}, k) => {
-  const [e, d] = R(!0), u = S(null), {
-    t: p
-  } = X(), r = T(() => {
-    d(!1), c == null || c();
-  }, [c]);
-  h(k, () => ({
-    show: g,
-    hide: r,
-    ...u.current
-  })), B(() => {
-    t == null || t(e);
-  }, [e, t]), H(() => {
-    n && e && setTimeout(() => {
-      r();
-    }, m);
-  }, [n, m, r, e]);
-  const g = () => {
-    d(!0);
-  }, v = {
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect, useEffect } from "react";
+import { SuccessOutline, AlertCircle, InfoCircle, Error } from "@edifice.io/icons";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import Button from "../Button/Button.js";
+const Alert = /* @__PURE__ */ forwardRef(({
+  type = "success",
+  className = "",
+  children,
+  button,
+  isDismissible = !1,
+  isToast = !1,
+  isConfirm = !1,
+  position = "none",
+  autoClose = !1,
+  autoCloseDelay = 3e3,
+  onClose,
+  onVisibilityChange
+}, ref) => {
+  const [isVisible, setVisibleStatus] = useState(!0), refAlert = useRef(null), {
+    t
+  } = useTranslation(), hide = useCallback(() => {
+    setVisibleStatus(!1), onClose == null || onClose();
+  }, [onClose]);
+  useImperativeHandle(ref, () => ({
+    show,
+    hide,
+    ...refAlert.current
+  })), useLayoutEffect(() => {
+    onVisibilityChange == null || onVisibilityChange(isVisible);
+  }, [isVisible, onVisibilityChange]), useEffect(() => {
+    autoClose && isVisible && setTimeout(() => {
+      hide();
+    }, autoCloseDelay);
+  }, [autoClose, autoCloseDelay, hide, isVisible]);
+  const show = () => {
+    setVisibleStatus(!0);
+  }, mapping = {
     success: {
-      icon: /* @__PURE__ */ s(l, { name: "success-outline" }),
+      icon: /* @__PURE__ */ jsx(SuccessOutline, {}),
       classModifier: "alert-success"
     },
     warning: {
-      icon: /* @__PURE__ */ s(l, { name: "alert-circle" }),
+      icon: /* @__PURE__ */ jsx(AlertCircle, {}),
       classModifier: "alert-warning"
     },
     info: {
-      icon: /* @__PURE__ */ s(l, { name: "info-circle" }),
+      icon: /* @__PURE__ */ jsx(InfoCircle, {}),
       classModifier: "alert-info"
     },
     danger: {
-      icon: /* @__PURE__ */ s(l, { name: "error" }),
+      icon: /* @__PURE__ */ jsx(Error, {}),
       classModifier: "alert-danger"
     }
-  }, j = {
-    "is-dismissible": f,
-    "is-toast ": x
-  }, A = {
-    "is-confirm": a
-  }, E = L("alert gap-12", v[o].classModifier, j, A, b, M);
-  return e ? /* @__PURE__ */ N("div", { ref: u, className: E, role: "alert", children: [
-    !a && v[o].icon,
-    /* @__PURE__ */ s("div", { className: "alert-content small", children: w }),
-    i && /* @__PURE__ */ N("div", { className: "ms-12", children: [
-      i,
+  }, toastClasses = {
+    "is-dismissible": isDismissible,
+    "is-toast ": isToast
+  }, confirmClasses = {
+    "is-confirm": isConfirm
+  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", children: [
+    !isConfirm && mapping[type].icon,
+    /* @__PURE__ */ jsx("div", { className: "alert-content small", children }),
+    button && /* @__PURE__ */ jsxs("div", { className: "ms-12", children: [
+      button,
       " ",
-      a && /* @__PURE__ */ s(q, { onClick: r, children: p("close") })
+      isConfirm && /* @__PURE__ */ jsx(Button, { onClick: hide, children: t("close") })
     ] }),
-    (f || a) && /* @__PURE__ */ s("div", { className: "btn-close-container", children: /* @__PURE__ */ s("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": p("close"), onClick: r }) }),
-    n && /* @__PURE__ */ s("div", { className: "alert-progress", style: {
+    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": t("close"), onClick: hide }) }),
+    autoClose && /* @__PURE__ */ jsx("div", { className: "alert-progress", style: {
       transform: "scaleX(0)"
     } })
-  ] }) : null;
-});
+  ] }) : null });
+}), Alert$1 = Alert;
 export {
-  P as Alert,
-  P as default
+  Alert$1 as default
 };
-//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/index.d.ts

@@ -1 +1,2 @@
+export { default as Alert } from './Alert';
 export * from './Alert';

package/dist/components/AppHeader/AppHeader.d.ts

@@ -13,5 +13,5 @@ export interface AppHeaderProps extends ComponentPropsWithRef<'div'> {
      */
     isFullscreen?: boolean;
 }
-export declare const AppHeader: import('react').ForwardRefExoticComponent<Omit<AppHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const AppHeader: import('react').ForwardRefExoticComponent<Omit<AppHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default AppHeader;

package/dist/components/AppHeader/AppHeader.js

@@ -1,24 +1,22 @@
-import { jsxs as l, jsx as m } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import p from "clsx";
-const d = /* @__PURE__ */ f(({
-  children: s,
-  render: t,
-  isFullscreen: e = !1,
-  ...a
-}, o) => {
-  const r = p("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
-    "justify-content-between": t,
-    "mx-n16": !e,
-    "z-3 top-0 start-0 end-0": e
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const AppHeader = /* @__PURE__ */ forwardRef(({
+  children,
+  render,
+  isFullscreen = !1,
+  ...restProps
+}, ref) => {
+  const classes = clsx("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
+    "justify-content-between": render,
+    "mx-n16": !isFullscreen,
+    "z-3 top-0 start-0 end-0": isFullscreen
   });
-  return /* @__PURE__ */ l("div", { ref: o, className: r, ...a, children: [
-    s,
-    t ? /* @__PURE__ */ m("div", { className: "d-flex align-items-center ms-auto gap-8", children: t() }) : null
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...restProps, children: [
+    children,
+    render ? /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center ms-auto gap-8", children: render() }) : null
   ] });
-});
+}), AppHeader$1 = AppHeader;
 export {
-  d as AppHeader,
-  d as default
+  AppHeader$1 as default
 };
-//# sourceMappingURL=AppHeader.js.map

package/dist/components/AppHeader/index.d.ts

@@ -1 +1,2 @@
+export { default as AppHeader } from './AppHeader';
 export * from './AppHeader';

package/dist/components/AppIcon/AppIcon.d.ts

@@ -1,4 +1,4 @@
-import { IWebApp } from '@edifice.io/ts-client';
+import { IWebApp } from 'edifice-ts-client';
 export type AppIconSize = '24' | '32' | '40' | '48' | '80' | '160';
 export interface AppIconBaseProps {
     /**

package/dist/components/AppIcon/AppIcon.js

@@ -1,50 +1,49 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import d from "clsx";
-import { Image as j } from "../Image/Image.js";
-import P from "../../core/useOdeIcons/useOdeIcons.js";
-import S from "../../core/usePaths/usePaths.js";
-const O = /* @__PURE__ */ b(({
-  app: o,
-  size: n = "24",
-  iconFit: s = "contain",
-  variant: i = "square",
-  className: r = ""
-}, m) => {
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import Image from "../Image/Image.js";
+import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+const AppIcon = /* @__PURE__ */ forwardRef(({
+  app,
+  size = "24",
+  iconFit = "contain",
+  variant = "square",
+  className = ""
+}, ref) => {
   const {
-    isIconUrl: h,
-    getIconCode: a
-  } = P(), [, u] = S(), g = i === "square", f = i === "rounded", x = i === "circle", e = s === "contain", w = s === "ratio", y = {
-    "icon-xs": n === "24",
-    "icon-sm": n === "40",
-    "icon-md": n === "48",
-    "icon-lg": n === "80",
-    "icon-xl": n === "160"
-  }, I = {
-    square: g,
-    rounded: f,
-    "rounded-circle": x
-  }, C = {
-    "icon-contain": e,
-    "icon-ratio": w
-  }, l = typeof o == "string" ? o : (o == null ? void 0 : o.icon) !== void 0 ? o.icon : "placeholder", q = typeof o != "string" && (o == null ? void 0 : o.displayName) !== void 0 ? o.displayName : "", v = o ? a(o) : "", N = h(l), c = v || "placeholder";
-  if (N) {
-    const $ = d("h-full", r);
-    return /* @__PURE__ */ t(j, { src: l, alt: q, objectFit: "contain", width: n, height: n, className: $ });
+    isIconUrl,
+    getIconCode
+  } = useOdeIcons(), [, iconPath] = usePaths(), isSquare = variant === "square", isRounded = variant === "rounded", isCircle = variant === "circle", isContain = iconFit === "contain", isRatio = iconFit === "ratio", iconSizes = {
+    "icon-xs": size === "24",
+    "icon-sm": size === "40",
+    "icon-md": size === "48",
+    "icon-lg": size === "80",
+    "icon-xl": size === "160"
+  }, iconVariant = {
+    square: isSquare,
+    rounded: isRounded,
+    "rounded-circle": isCircle
+  }, iconFits = {
+    "icon-contain": isContain,
+    "icon-ratio": isRatio
+  }, icon = typeof app == "string" ? app : (app == null ? void 0 : app.icon) !== void 0 ? app.icon : "placeholder", displayName = typeof app != "string" && (app == null ? void 0 : app.displayName) !== void 0 ? app.displayName : "", code = app ? getIconCode(app) : "", isIconURL = isIconUrl(icon), appCode = code || "placeholder";
+  if (isIconURL) {
+    const classes2 = clsx("h-full", className);
+    return /* @__PURE__ */ jsx(Image, { src: icon, alt: displayName, objectFit: "contain", width: size, height: size, className: classes2 });
   }
-  const R = d("app-icon", {
-    ...y,
-    ...I,
-    ...C,
-    [`bg-light-${c}`]: c && !e,
-    [`color-app-${c}`]: c
-  }, r);
-  return /* @__PURE__ */ t("div", { className: R, style: {
-    width: n + "px",
-    height: n + "px"
-  }, children: /* @__PURE__ */ t("svg", { ref: m, width: n, height: n, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ t("use", { xlinkHref: `${u}/apps.svg#${c}` }) }) });
+  const classes = clsx("app-icon", {
+    ...iconSizes,
+    ...iconVariant,
+    ...iconFits,
+    [`bg-light-${appCode}`]: appCode && !isContain,
+    [`color-app-${appCode}`]: appCode
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: classes, style: {
+    width: size + "px",
+    height: size + "px"
+  }, children: /* @__PURE__ */ jsx("svg", { ref, width: size, height: size, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { xlinkHref: `${iconPath}/apps.svg#${appCode}` }) }) });
 });
 export {
-  O as AppIcon
+  AppIcon
 };
-//# sourceMappingURL=AppIcon.js.map

package/dist/components/Attachment/Attachment.d.ts

@@ -10,5 +10,5 @@ export interface AttachmentProps extends ComponentPropsWithRef<'div'> {
     options: ReactNode | undefined;
 }
 export type AttachmentType = AttachmentProps;
-export declare const Attachment: import('react').ForwardRefExoticComponent<Omit<AttachmentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Attachment: import('react').ForwardRefExoticComponent<Omit<AttachmentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Attachment;

package/dist/components/Attachment/Attachment.js

@@ -1,17 +1,15 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Icon as i } from "../Icon/Icon.js";
-const l = /* @__PURE__ */ s(({
-  name: a = "Attachment Name",
-  options: t,
-  ...r
-}, m) => /* @__PURE__ */ c("div", { ref: m, className: "attachment px-12 py-8", ...r, children: [
-  /* @__PURE__ */ e(i, { name: "paperclip", size: "22" }),
-  /* @__PURE__ */ e("div", { className: "filename text-truncate", children: a }),
-  t && /* @__PURE__ */ e("div", { className: "options ps-12", children: t })
-] }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Paperclip } from "@edifice.io/icons";
+const Attachment = /* @__PURE__ */ forwardRef(({
+  name = "Attachment Name",
+  options,
+  ...restProps
+}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, children: [
+  /* @__PURE__ */ jsx(Paperclip, { height: 22, width: 22 }),
+  /* @__PURE__ */ jsx("div", { className: "filename text-truncate", children: name }),
+  options && /* @__PURE__ */ jsx("div", { className: "options ps-12", children: options })
+] })), Attachment$1 = Attachment;
 export {
-  l as Attachment,
-  l as default
+  Attachment$1 as default
 };
-//# sourceMappingURL=Attachment.js.map

package/dist/components/Attachment/index.d.ts

@@ -1 +1,2 @@
+export { default as Attachment } from './Attachment';
 export * from './Attachment';

package/dist/{modules/audience → components/Audience}/ReactionChoice.d.ts

@@ -1,4 +1,4 @@
-import { ReactionSummaryData, ReactionType } from '@edifice.io/ts-client';
+import { ReactionSummaryData, ReactionType } from 'edifice-ts-client';
 export interface ReactionChoiceProps {
     availableReactions: ReactionType[];
     summary?: ReactionSummaryData;

package/dist/components/Audience/ReactionChoice.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import Dropdown from "../Dropdown/Dropdown.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import IconButton from "../Button/IconButton.js";
+const ReactionChoice = ({
+  availableReactions,
+  summary = {
+    totalReactionsCounter: 0,
+    userReaction: null
+  },
+  onChange
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    getReactionIcon,
+    getReactionLabel
+  } = useReactionIcons(), {
+    userReaction
+  } = summary, classes = clsx({
+    "fw-bold": !!userReaction
+  });
+  return /* @__PURE__ */ jsx("div", { className: "reaction-choice", children: /* @__PURE__ */ jsxs(Dropdown, { placement: "top-start", children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { className: classes, color: "tertiary", variant: "ghost", size: "sm", icon: getReactionIcon(userReaction), hideCarret: !0, label: t(getReactionLabel(userReaction)) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { unstyled: !0, className: "bg-white shadow rounded-8 overflow-visible", children: /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center justify-content-between", children: availableReactions == null ? void 0 : availableReactions.map((reactionType) => /* @__PURE__ */ jsx(Dropdown.Item, { className: "p-0", children: /* @__PURE__ */ jsx(Tooltip, { message: t(getReactionLabel(reactionType)), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { className: "reaction-available m-4", variant: "ghost", size: "sm", icon: getReactionIcon(reactionType), onClick: () => onChange == null ? void 0 : onChange(reactionType) }) }) }, reactionType)) }) })
+  ] }) });
+}, ReactionChoice$1 = ReactionChoice;
+export {
+  ReactionChoice$1 as default
+};

package/dist/{modules/audience → components/Audience}/ReactionModal.Card.d.ts

@@ -1,4 +1,4 @@
-import { ReactionDetailsData } from '@edifice.io/ts-client';
+import { ReactionDetailsData } from 'edifice-ts-client';
 export declare function ReactionModalCard({ reaction, }: {
     reaction: ReactionDetailsData['userReactions'][number];
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Audience/ReactionModal.Card.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import useAvatar from "../../core/useAvatar/useAvatar.js";
+import Avatar from "../Avatar/Avatar.js";
+function ReactionModalCard({
+  reaction
+}) {
+  const {
+    t
+  } = useTranslation(), {
+    avatarURL
+  } = useAvatar(reaction.userId, reaction.profile), {
+    getReactionIcon,
+    getReactionLabel
+  } = useReactionIcons();
+  return /* @__PURE__ */ jsxs("div", { className: "reaction-modal-card w-100 d-flex gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "position-relative p-8", children: [
+      /* @__PURE__ */ jsx(Avatar, { variant: "circle", size: "md", src: avatarURL, alt: reaction.displayName }),
+      /* @__PURE__ */ jsx("div", { className: "position-absolute end-0 bottom-0", children: getReactionIcon(reaction.reactionType, !0) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column w-100 pt-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-baseline", children: [
+        /* @__PURE__ */ jsx("div", { className: "d-flex overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "text-reset flex-shrink-0", children: reaction.displayName }) }),
+        /* @__PURE__ */ jsx("strong", { className: "ms-12 caption text-gray-700", children: t(reaction.profile) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "caption text-gray-700", children: t(getReactionLabel(reaction.reactionType)) })
+    ] })
+  ] });
+}
+export {
+  ReactionModalCard
+};

package/dist/{modules/audience → components/Audience}/ReactionModal.d.ts

@@ -1,4 +1,4 @@
-import { ReactionDetailsData } from '@edifice.io/ts-client';
+import { ReactionDetailsData } from 'edifice-ts-client';
 import { ReactionModalCard } from './ReactionModal.Card';
 export interface ReactionModalProps {
     /** Id of resource. */