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

package/dist/components/Audience/ReactionModal.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useId, useCallback, useMemo, useEffect } from "react";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import { useTranslation } from "react-i18next";
+import { ReactionTypes } from "edifice-ts-client";
+import { ReactionModalCard } from "./ReactionModal.Card.js";
+import { createPortal } from "react-dom";
+import Modal from "../Modal/Modal.js";
+import Tabs from "../Tabs/Tabs.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ALL_TAB_ID = "all", ReactionModal = ({
+  resourceId,
+  pageSize = 30,
+  reactionDetailsLoader: loadReactionDetails,
+  onModalClose,
+  ...restProps
+}) => {
+  const [counters, setCounters] = useState({
+    countByType: {},
+    allReactionsCounter: 0
+  }), [reactions, setReactions] = useState([]), [currentTabId, setCurrentTabId] = useState(ALL_TAB_ID), id = useId(), {
+    t
+  } = useTranslation(), {
+    getReactionIcon
+  } = useReactionIcons(), [latestPage, setLatestPage] = useState(0), loadNextPage = useCallback(async () => {
+    const nextPage = latestPage + 1;
+    setLatestPage(nextPage);
+    const data = await loadReactionDetails(resourceId, nextPage, pageSize);
+    if (data) {
+      const {
+        reactionCounters,
+        userReactions
+      } = data;
+      nextPage === 1 && setCounters(reactionCounters), setReactions((old) => [...old, ...userReactions.filter((reaction) => !old.some((oldReaction) => oldReaction.userId === reaction.userId))]);
+    }
+  }, [latestPage, loadReactionDetails, pageSize, resourceId]), panel = useMemo(() => /* @__PURE__ */ jsx("div", { className: "d-flex flex-column w-100 gap-8 mt-32", children: reactions.filter((reaction) => currentTabId === ALL_TAB_ID || reaction.reactionType === currentTabId).map((reaction) => /* @__PURE__ */ jsx(ReactionModal.Card, { reaction }, reaction.userId)) }), [currentTabId, reactions]), tabs = useMemo(() => {
+    const items = ReactionTypes.filter((type) => {
+      var _a;
+      return typeof ((_a = counters.countByType) == null ? void 0 : _a[type]) == "number";
+    }).map((type) => ({
+      id: type,
+      icon: getReactionIcon(type),
+      label: StringUtils.toCounter(counters.countByType[type]),
+      content: panel
+    }));
+    return [{
+      id: ALL_TAB_ID,
+      icon: null,
+      label: t("audience.reaction.tab.all"),
+      content: panel
+    }, ...items];
+  }, [counters.countByType, panel]);
+  useEffect(() => {
+    loadNextPage();
+  }, []);
+  const handleTabChange = (tab) => {
+    setCurrentTabId(tab.id);
+  }, hasMore = reactions.length < counters.allReactionsCounter;
+  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id, ...restProps, onModalClose, size: "md", scrollable: !0, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: /* @__PURE__ */ jsx("h2", { children: t("audience.reaction.modal.header") }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: ALL_TAB_ID, onChange: handleTabChange }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      hasMore && /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: loadNextPage, children: t("audience.reaction.modal.more") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("close") })
+    ] })
+  ] }), document.getElementById("portal"));
+};
+ReactionModal.Card = ReactionModalCard;
+const ReactionModal$1 = ReactionModal;
+export {
+  ReactionModal$1 as default
+};

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

@@ -1,4 +1,4 @@
-import { ReactionSummaryData } from '@edifice.io/ts-client';
+import { ReactionSummaryData } from 'edifice-ts-client';
 export interface ReactionSummaryProps {
     summary?: ReactionSummaryData;
     onClick?: () => void;

package/dist/components/Audience/ReactionSummary.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useReactionIcons from "./hooks/useReactionIcons.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ReactionSummary = ({
+  summary = {
+    userReaction: null,
+    totalReactionsCounter: 0
+  },
+  onClick
+}) => {
+  const {
+    getReactionIcon
+  } = useReactionIcons(), {
+    totalReactionsCounter,
+    reactionTypes
+  } = summary, hasNoReactions = totalReactionsCounter === 0;
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "py-4 px-8 btn-icon", disabled: hasNoReactions, onClick: (event) => {
+    event.preventDefault(), event.stopPropagation(), onClick == null || onClick();
+  }, children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-gray-700 fw-normal me-8", children: StringUtils.toCounter(totalReactionsCounter) }),
+    hasNoReactions ? /* @__PURE__ */ jsx("div", { className: "reaction-overlap", children: getReactionIcon("REACTION_1", !0) }) : reactionTypes == null ? void 0 : reactionTypes.map((reactionType) => /* @__PURE__ */ jsx("div", { className: "reaction-overlap", children: getReactionIcon(reactionType, !0) }, reactionType))
+  ] }) });
+}, ReactionSummary$1 = ReactionSummary;
+export {
+  ReactionSummary$1 as default
+};

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

@@ -1,4 +1,4 @@
-import { ViewsDetailsProfile } from '@edifice.io/ts-client';
+import { ViewsDetailsProfile } from 'edifice-ts-client';
 export interface ViewsCardProps {
     viewsByProfile: ViewsDetailsProfile;
 }

package/dist/components/Audience/ViewsByProfileCard.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Users } from "@edifice.io/icons";
+import { Guest, Personnel, Teacher, Parent, Student } from "@edifice.io/icons/audience";
+import { useTranslation } from "react-i18next";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ViewsByProfileCard = ({
+  viewsByProfile
+}) => {
+  const {
+    t
+  } = useTranslation(), profile = viewsByProfile.profile.toLowerCase(), classNameIcon = `views-detail-icon rounded p-8 views-detail-icon-${profile}`;
+  function getIcon(profile2) {
+    switch (profile2) {
+      case "student":
+        return /* @__PURE__ */ jsx(Student, {});
+      case "relative":
+        return /* @__PURE__ */ jsx(Parent, {});
+      case "teacher":
+        return /* @__PURE__ */ jsx(Teacher, {});
+      case "personnel":
+        return /* @__PURE__ */ jsx(Personnel, {});
+      case "guest":
+        return /* @__PURE__ */ jsx(Guest, {});
+      default:
+        return /* @__PURE__ */ jsx(Users, {});
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 ms-32 mb-12", children: [
+    /* @__PURE__ */ jsx("div", { className: classNameIcon, children: getIcon(profile) }),
+    /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsByProfile.counter) }),
+    /* @__PURE__ */ jsx("div", { children: t(`audience.views.uniqueViewsPerProfile.${profile}`) })
+  ] }, profile);
+};
+export {
+  ViewsByProfileCard as default
+};

package/dist/components/Audience/ViewsCounter.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { See } from "@edifice.io/icons";
+import clsx from "clsx";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ViewsCounter = ({
+  viewsCounter,
+  onClick,
+  className
+}) => {
+  const handleButtonClick = (event) => {
+    event.preventDefault(), event.stopPropagation(), onClick == null || onClick();
+  };
+  return className = clsx("text-gray-700 fw-normal py-4 px-8 btn-icon", className), /* @__PURE__ */ jsx(Button, { rightIcon: /* @__PURE__ */ jsx(See, {}), variant: "ghost", type: "button", className, onClick: handleButtonClick, disabled: !viewsCounter, children: StringUtils.toCounter(viewsCounter) });
+}, ViewsCounter$1 = ViewsCounter;
+export {
+  ViewsCounter$1 as default
+};

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

@@ -1,4 +1,4 @@
-import { ViewsDetails } from '@edifice.io/ts-client';
+import { ViewsDetails } from 'edifice-ts-client';
 export interface ViewsModalProps {
     viewsDetails: ViewsDetails;
     isOpen: boolean;

package/dist/components/Audience/ViewsModal.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { See, Users } from "@edifice.io/icons";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import ViewsByProfileCard from "./ViewsByProfileCard.js";
+import Modal from "../Modal/Modal.js";
+import Button from "../Button/Button.js";
+import { StringUtils } from "../../utils/StringUtils.js";
+const ViewsModal = ({
+  viewsDetails,
+  isOpen,
+  onModalClose
+}) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(), hasUniqueViews = viewsDetails.uniqueViewsCounter !== void 0;
+  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "ViewsModal", isOpen, onModalClose, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.views.title") }),
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(See, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.viewsCounter) }),
+        /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.viewsCounter") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(Users, {}) }),
+        hasUniqueViews ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.uniqueViewsCounter) }),
+          /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.uniqueViewsCounter") })
+        ] }) : /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.noUniqueViews") })
+      ] }),
+      hasUniqueViews ? (_a = viewsDetails.uniqueViewsPerProfile) == null ? void 0 : _a.map((viewsByProfile) => /* @__PURE__ */ jsx(ViewsByProfileCard, { viewsByProfile }, viewsByProfile.profile)) : null
+    ] }),
+    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("audience.views.cancel") }) })
+  ] }), document.getElementById("portal"));
+}, ViewsModal$1 = ViewsModal;
+export {
+  ViewsModal$1 as default
+};

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

@@ -1,4 +1,4 @@
-import { ReactionType } from '@edifice.io/ts-client';
+import { ReactionType } from 'edifice-ts-client';
 export default function useReactionIcons(): {
     getReactionIcon: (reactionType?: ReactionType | null, asCounter?: boolean) => import("react/jsx-runtime").JSX.Element;
     getReactionLabel: (reactionType?: ReactionType | null) => "audience.reaction.thanks" | "audience.reaction.great" | "audience.reaction.congrats" | "audience.reaction.interesting" | "audience.reaction.default";

package/dist/components/Audience/hooks/useReactionIcons.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { InterestingCounter, Interesting, CongratsCounter, Congrats, GreatCounter, Great, ThanksCounter, Thanks } from "@edifice.io/icons/audience";
+import { Reaction } from "@edifice.io/icons";
+function useReactionIcons() {
+  return {
+    getReactionIcon: (reactionType, asCounter) => {
+      switch (reactionType) {
+        case "REACTION_1":
+          return asCounter ? /* @__PURE__ */ jsx(ThanksCounter, {}) : /* @__PURE__ */ jsx(Thanks, {});
+        case "REACTION_2":
+          return asCounter ? /* @__PURE__ */ jsx(GreatCounter, {}) : /* @__PURE__ */ jsx(Great, {});
+        case "REACTION_3":
+          return asCounter ? /* @__PURE__ */ jsx(CongratsCounter, {}) : /* @__PURE__ */ jsx(Congrats, {});
+        case "REACTION_4":
+          return asCounter ? /* @__PURE__ */ jsx(InterestingCounter, {}) : /* @__PURE__ */ jsx(Interesting, {});
+        default:
+          return /* @__PURE__ */ jsx(Reaction, {});
+      }
+    },
+    getReactionLabel: (reactionType) => {
+      switch (reactionType) {
+        case "REACTION_1":
+          return "audience.reaction.thanks";
+        case "REACTION_2":
+          return "audience.reaction.great";
+        case "REACTION_3":
+          return "audience.reaction.congrats";
+        case "REACTION_4":
+          return "audience.reaction.interesting";
+        default:
+          return "audience.reaction.default";
+      }
+    }
+  };
+}
+export {
+  useReactionIcons as default
+};

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

@@ -1,4 +1,4 @@
-import { ReactionType } from '@edifice.io/ts-client';
+import { ReactionType } from 'edifice-ts-client';
 /**
  * This hook implements some logic and provides functions to easily call "audience" backend endpoints.
  * @param module application code, e.g. "blog"
@@ -7,9 +7,9 @@ import { ReactionType } from '@edifice.io/ts-client';
  */
 export default function useReactions(module: string, resourceType: string): {
     availableReactions: ("REACTION_1" | "REACTION_2" | "REACTION_3" | "REACTION_4")[];
-    loadReactionDetails: (resourceId: string, page: number, size?: number) => Promise<import('@edifice.io/ts-client').ReactionDetailsData | undefined>;
+    loadReactionDetails: (resourceId: string, page: number, size?: number) => Promise<import('edifice-ts-client').ReactionDetailsData | undefined>;
     loadReactionSummaries: (resourceIds: string[]) => Promise<{
-        [resourceId: string]: import('@edifice.io/ts-client').ReactionSummaryData | undefined;
+        [resourceId: string]: import('edifice-ts-client').ReactionSummaryData | undefined;
     }>;
     applyReaction: (resourceId: string, newReaction: ReactionType, oldReaction: ReactionType | null) => Promise<"-" | "+" | "=">;
 };

package/dist/components/Audience/hooks/useReactions.js

@@ -0,0 +1,35 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { odeServices, ERROR_CODE } from "edifice-ts-client";
+function useReactions(module, resourceType) {
+  const {
+    reactions
+  } = useRef(odeServices.audience(module, resourceType)).current, [availableReactions, setAvailableReactions] = useState([]);
+  async function loadAvailableReactions() {
+    const results = await reactions.loadAvailableReactions();
+    results && setAvailableReactions(results);
+  }
+  async function loadReactionSummaries(resourceIds) {
+    return await reactions.loadReactionSummaries(resourceIds);
+  }
+  const loadReactionDetails = async (resourceId, page, size = 30) => await reactions.loadReactionDetails(resourceId, page, size), applyReaction = useCallback(
+    async (resourceId, newReaction, oldReaction) => {
+      if (newReaction !== oldReaction && availableReactions.indexOf(newReaction) < 0)
+        return Promise.reject(ERROR_CODE.MALFORMED_DATA);
+      let result = "+";
+      return oldReaction ? newReaction === oldReaction ? (await reactions.deleteReaction(resourceId), result = "-") : (await reactions.updateReaction(resourceId, newReaction), result = "=") : await reactions.createReaction(resourceId, newReaction), odeServices.http().isResponseError() ? Promise.reject(ERROR_CODE.UNKNOWN) : result;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [availableReactions]
+  );
+  return useEffect(() => {
+    loadAvailableReactions();
+  }, []), {
+    availableReactions,
+    loadReactionDetails,
+    loadReactionSummaries,
+    applyReaction
+  };
+}
+export {
+  useReactions as default
+};

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

@@ -5,7 +5,7 @@
  * @returns functions to easily call "audience" backend endpoints.
  */
 export default function useViews(module: string, resourceType: string): {
-    getViewsCounter: (resourceIds: string[]) => Promise<import('@edifice.io/ts-client').ViewsCounters>;
-    getViewsDetail: (resourceId: string) => Promise<import('@edifice.io/ts-client').ViewsDetails | undefined>;
+    getViewsCounter: (resourceIds: string[]) => Promise<import('edifice-ts-client').ViewsCounters>;
+    getViewsDetail: (resourceId: string) => Promise<import('edifice-ts-client').ViewsDetails | undefined>;
     triggerView: (resourceId: string) => Promise<void>;
 };

package/dist/components/Avatar/Avatar.d.ts

@@ -28,5 +28,5 @@ export interface AvatarProps extends React.ComponentPropsWithRef<'img'> {
      */
     className?: string;
 }
-export declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -1,35 +1,33 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import v from "clsx";
-import f from "../../core/usePaths/usePaths.js";
-import { Image as p } from "../Image/Image.js";
-const w = /* @__PURE__ */ u(({
-  variant: r = "square",
-  size: a = "md",
-  alt: o,
-  src: e,
-  imgPlaceholder: c,
-  className: d,
-  ...m
-}, i) => {
-  const [l] = f(), s = c || `${l}/avatar/no-avatar.svg`, n = v("avatar", {
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../core/usePaths/usePaths.js";
+import Image from "../Image/Image.js";
+const Avatar = /* @__PURE__ */ forwardRef(({
+  variant = "square",
+  size = "md",
+  alt,
+  src,
+  imgPlaceholder,
+  className,
+  ...restProps
+}, ref) => {
+  const [imagePath] = usePaths(), placeholder = imgPlaceholder || `${imagePath}/avatar/no-avatar.svg`, classes = clsx("avatar", {
     ...{
-      "avatar-xs": a === "xs",
-      "avatar-sm": a === "sm",
-      "avatar-md": a === "md",
-      "avatar-lg": a === "lg",
-      "avatar-xl": a === "xl"
+      "avatar-xs": size === "xs",
+      "avatar-sm": size === "sm",
+      "avatar-md": size === "md",
+      "avatar-lg": size === "lg",
+      "avatar-xl": size === "xl"
     },
     ...{
-      square: r === "square",
-      rounded: r === "rounded",
-      "rounded-circle": r === "circle"
+      square: variant === "square",
+      rounded: variant === "rounded",
+      "rounded-circle": variant === "circle"
     }
-  }, d);
-  return /* @__PURE__ */ t("div", { ref: i, className: n, children: /* @__PURE__ */ t(p, { src: e || s, alt: o, imgPlaceholder: s, ...m }) });
-});
+  }, className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
+}), Avatar$1 = Avatar;
 export {
-  w as Avatar,
-  w as default
+  Avatar$1 as default
 };
-//# sourceMappingURL=Avatar.js.map

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

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

package/dist/components/Badge/Badge.d.ts

@@ -43,5 +43,5 @@ export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
 /**
  * Primary UI component for user interaction
  */
-export declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -1,33 +1,31 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import p from "clsx";
-const b = /* @__PURE__ */ n(({
-  className: t,
-  variant: e = {
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Badge = /* @__PURE__ */ forwardRef(({
+  className,
+  variant = {
     type: "notification",
     level: "danger",
     color: "background"
   },
-  visibility: l,
-  rounded: d,
-  children: o,
-  ...s
-}, i) => {
-  function c() {
-    if (!d) {
-      if (l === "always" && !o)
+  visibility,
+  rounded,
+  children,
+  ...restProps
+}, ref) => {
+  function getRadiusClass() {
+    if (!rounded) {
+      if (visibility === "always" && !children)
         return "rounded-circle";
-      if (e.type === "notification")
+      if (variant.type === "notification")
         return "rounded-pill";
-      if (e.type === "link")
+      if (variant.type === "link")
         return "rounded-2";
     }
   }
-  const f = p("badge", c(), l === "always" && "position-absolute translate-middle p-8 d-inline", e.type === "notification" && (!e.color || e.color === "background") && `bg-${e.level} text-light`, e.type === "notification" && e.color === "text" && `text-${e.level} bg-gray-200 border border-gray-400`, e.type === "profile" && `badge-profile-${e.profile}`, e.type === "link" && "border border-secondary", t);
-  return /* @__PURE__ */ r("span", { ref: i, className: f, ...s, children: e.type === "link" ? /* @__PURE__ */ r("div", { className: "d-flex fw-800 align-items-center", children: o }) : o });
-});
+  const classes = clsx("badge", getRadiusClass(), visibility === "always" && "position-absolute translate-middle p-8 d-inline", variant.type === "notification" && (!variant.color || variant.color === "background") && `bg-${variant.level} text-light`, variant.type === "notification" && variant.color === "text" && `text-${variant.level} bg-gray-200 border border-gray-400`, variant.type === "profile" && `badge-profile-${variant.profile}`, variant.type === "link" && "border border-secondary", className);
+  return /* @__PURE__ */ jsx("span", { ref, className: classes, ...restProps, children: variant.type === "link" ? /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }) : children });
+}), Badge$1 = Badge;
 export {
-  b as Badge,
-  b as default
+  Badge$1 as default
 };
-//# sourceMappingURL=Badge.js.map

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

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

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,4 @@
-import { IWebApp } from '@edifice.io/ts-client';
+import { IWebApp } from 'edifice-ts-client';
 export interface BreadcrumbProps {
     /**
      * Pass all data about current application

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,29 +1,28 @@
-import { jsx as r, jsxs as s, Fragment as n } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { useTranslation as a } from "react-i18next";
-import { Heading as d } from "../Heading/Heading.js";
-import l from "./BreadcrumbItem.js";
-import h from "./BreadcrumbList.js";
-import f from "./BreadcrumbNav.js";
-import { AppIcon as c } from "../AppIcon/AppIcon.js";
-import { Icon as N } from "../Icon/Icon.js";
-const I = /* @__PURE__ */ o(({
-  app: e,
-  name: i
-}, t) => {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { RafterRight } from "@edifice.io/icons";
+import { useTranslation } from "react-i18next";
+import Heading from "../Heading/Heading.js";
+import BreadcrumbItem from "./BreadcrumbItem.js";
+import BreadcrumbList from "./BreadcrumbList.js";
+import BreadcrumbNav from "./BreadcrumbNav.js";
+import { AppIcon } from "../AppIcon/AppIcon.js";
+const Breadcrumb = /* @__PURE__ */ forwardRef(({
+  app,
+  name
+}, ref) => {
   const {
-    t: m
-  } = a();
-  return /* @__PURE__ */ r(f, { app: e, ref: t, className: "mw-100", children: /* @__PURE__ */ r(h, { className: "gap-12 mw-100", children: i ? /* @__PURE__ */ s(n, { children: [
-    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r("a", { href: e == null ? void 0 : e.address, className: "d-flex", "aria-label": m(e == null ? void 0 : e.displayName), children: /* @__PURE__ */ r(c, { app: e, size: "40" }) }) }),
-    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(N, { name: "rafter-right", color: "var(--edifice-gray-600)", size: "20" }) }),
-    /* @__PURE__ */ r(l, { className: "text-truncate", children: /* @__PURE__ */ r(d, { level: "h1", headingStyle: "h3", className: "text-truncate", children: i }) })
-  ] }) : /* @__PURE__ */ s(l, { className: "gap-12 d-flex align-items-center", children: [
-    /* @__PURE__ */ r("a", { href: e == null ? void 0 : e.address, className: "d-flex", "aria-label": m(e == null ? void 0 : e.displayName), children: /* @__PURE__ */ r(c, { app: e, size: "40" }) }),
-    /* @__PURE__ */ r(d, { level: "h1", headingStyle: "h3", className: "d-none d-md-flex", children: m(e == null ? void 0 : e.displayName) })
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx(BreadcrumbNav, { app, ref, className: "mw-100", children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "gap-12 mw-100", children: name ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(RafterRight, { color: "var(--edifice-gray-600)", width: 20, height: 20 }) }),
+    /* @__PURE__ */ jsx(BreadcrumbItem, { className: "text-truncate", children: /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "text-truncate", children: name }) })
+  ] }) : /* @__PURE__ */ jsxs(BreadcrumbItem, { className: "gap-12 d-flex align-items-center", children: [
+    /* @__PURE__ */ jsx("a", { href: app == null ? void 0 : app.address, className: "d-flex", "aria-label": t(app == null ? void 0 : app.displayName), children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40" }) }),
+    /* @__PURE__ */ jsx(Heading, { level: "h1", headingStyle: "h3", className: "d-none d-md-flex", children: t(app == null ? void 0 : app.displayName) })
   ] }) }) });
 });
 export {
-  I as Breadcrumb
+  Breadcrumb
 };
-//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -1,15 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import c from "clsx";
-const d = /* @__PURE__ */ a(({
-  children: r,
-  className: e,
-  ...m
-}, o) => {
-  const s = c("breadcrumb-item", e);
-  return /* @__PURE__ */ t("li", { ref: o, className: s, ...m, children: r });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const BreadcrumbItem = /* @__PURE__ */ forwardRef(({
+  children,
+  className,
+  ...restProps
+}, forwardRef2) => {
+  const classes = clsx("breadcrumb-item", className);
+  return /* @__PURE__ */ jsx("li", { ref: forwardRef2, className: classes, ...restProps, children });
 });
 export {
-  d as default
+  BreadcrumbItem as default
 };
-//# sourceMappingURL=BreadcrumbItem.js.map

package/dist/components/Breadcrumb/BreadcrumbList.js

@@ -1,14 +1,13 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import a from "clsx";
-const i = /* @__PURE__ */ t(({
-  children: r,
-  className: e
-}, o) => {
-  const s = a("breadcrumb d-flex flex-nowrap align-items-center mb-0", e);
-  return /* @__PURE__ */ m("ol", { ref: o, className: s, children: r });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const BreadcrumbList = /* @__PURE__ */ forwardRef(({
+  children,
+  className
+}, ref) => {
+  const classes = clsx("breadcrumb d-flex flex-nowrap align-items-center mb-0", className);
+  return /* @__PURE__ */ jsx("ol", { ref, className: classes, children });
 });
 export {
-  i as default
+  BreadcrumbList as default
 };
-//# sourceMappingURL=BreadcrumbList.js.map

package/dist/components/Breadcrumb/BreadcrumbNav.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IWebApp } from '@edifice.io/ts-client';
+import { IWebApp } from 'edifice-ts-client';
 export interface BreadcrumbNavProps extends React.ComponentPropsWithRef<'nav'> {
     /**
      * Pass all data about current application