@helpwave/hightide 0.1.22 → 0.1.24

package/dist/components/layout-and-navigation/BreadCrumb.mjs

@@ -2841,20 +2841,24 @@ var require_link2 = __commonJS({
 // src/components/layout-and-navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
 import clsx from "clsx";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
-  return /* @__PURE__ */ jsx("div", { className: clsx("flex-row-0", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      import_link.default,
-      {
-        href: crumb.link,
-        className: clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }),
-        children: crumb.display
-      }
-    ),
-    index !== crumbs.length - 1 && /* @__PURE__ */ jsx("span", { className: clsx(`px-1`, color), children: "/" })
-  ] }, index)) });
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+    const isLast = index === crumbs.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        import_link.default,
+        {
+          href: crumb.link,
+          className: clsx("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
+          children: crumb.display
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx("span", { className: clsx(`px-1`, color), children: "/" })
+    ] }, index);
+  }) });
 };
 export {
   BreadCrumb