@hortiview/shared-components 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [1.11.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.10.0...v1.11.0) (2025-05-28)
+
+### Features
+
+* introduce stepper component ([4519232](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/4519232b157fef0ee86b2b4fae99cf06a50a4754))
+* move button props to steps ([9237df3](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9237df37c46015e4f869c87d4aa3d094bbcec2f1))
+* update stepper to include buttons and content ([e5af269](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e5af26940f06d1b3035075b0045d91f96f6cad3e))
+
+## [1.10.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.9.0...v1.10.0) (2025-05-26)
+
+### Features
+
+* add hint prop to BaseView and update story ([d466795](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d4667958fe9739be4a9db3e249e31cbbc8387946))
+* provide close button for alert banner ([52958aa](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/52958aa7f3bbfb3beab3fbf97147f81b236edafb))
+
+### Styles
+
+* fix vertical divider in BaseView ([8b82d3a](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8b82d3a0a19e215fe92ee46eeb83714a2e5df4e7))
+
 ## [1.9.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.8.1...v1.9.0) (2025-05-23)
 
 ### Features

package/README.md

@@ -55,6 +55,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
 1. [Select](#select)
+1. [Stepper](#stepper)
 1. [VerticalDivider](#verticaldivider)
 
 ## Available Utility Functions:
@@ -859,7 +860,7 @@ Provides the normal Element modal with one additional change. If you are on full
 This will set the modal size on an area between the mobile controls.
 
 The modal also includes a custom header, which has a close button of type `button`.
-The base Element design button has type `submit`, which breaks forms inside of the modal. 
+The base Element design button has type `submit`, which breaks forms inside of the modal.
 Please provide `onClose` and `title` props to get it work properly.
 
 ```jsx
@@ -964,6 +965,47 @@ import { Select } from '@hortiview/shared-components';
 />;
 ```
 
+### Stepper
+
+Provides a simple stepper component, which contains the step indicators, a title text and buttons to navigate forwards and backwards.
+Be aware that you need to control the Stepper flow by your own, like:
+
+```jsx
+import { Step, Stepper } from '@hortiview/shared-components';
+
+const steps: Step[] = [
+  {
+    name: 'first',
+    step: 0,
+    title: 'First Step',
+    optional: false,
+  },
+  {
+    name: 'second',
+    step: 1,
+    title: 'Second Step',
+    optional: true,
+  },
+];
+
+const [currentStep, setCurrentStep] = useState(0);
+
+<Stepper
+  steps={steps}
+  currentStep={currentStep}
+  nextButtonProps={{
+    label: currentStep < args.steps.length - 1 ? 'Next' : 'Finish',
+    onClick: () =>
+      currentStep < args.steps.length - 1
+        ? setCurrentStep(currentStep + 1)
+        : setCurrentStep(args.steps.length - 1),
+  }}
+  prevButtonProps={{
+    onClick: () => (currentStep > 0 ? setCurrentStep(currentStep - 1) : setCurrentStep(0)),
+  }}
+/>;
+```
+
 ### VerticalDivider
 
 Provides a simple vertical divider.

package/dist/{BigLoadingSpinner-CqSGYzZA.js → BigLoadingSpinner-BbXMCKpm.js}

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { b as r } from "./index.es-CF_xy2ns.js";
+import { T as r } from "./index.es-D54RuMc_.js";
 import { Iconify as d } from "./components/Iconify/Iconify.js";
 import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", s = "_bigLoadSpinnerCard_7dxo1_12", g = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
   loadingBigOverlay: e,
@@ -9,8 +9,8 @@ import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1",
 }, l = ({ text: a }) => /* @__PURE__ */ n("div", { className: o.bigLoadSpinnerCard, role: "progressbar", "data-testid": "loading-spinner", children: [
   /* @__PURE__ */ i(d, { icon: "hortiview", className: o.logo, "data-testid": "logo-icon" }),
   /* @__PURE__ */ i(r, { tag: "p", bold: !0, level: 1, className: o.bigLoadSpinnerCardText, children: a })
-] }), _ = (a) => /* @__PURE__ */ i("div", { "data-testid": "big-loading-spinner", className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...a }) });
+] }), b = (a) => /* @__PURE__ */ i("div", { "data-testid": "big-loading-spinner", className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...a }) });
 export {
-  _ as B,
+  b as B,
   o as s
 };

package/dist/{GenericCard-CelFEWlW.js → GenericCard-DuNnB9Ve.js}

@@ -3,7 +3,7 @@ import { C as W, a as z, b as D, c as E, d as M } from "./index.es-6TJ1S8Jr.js";
 import { c as x, _ as P, P as e } from "./identity-DLWZln-X.js";
 import b, { forwardRef as $, useMemo as f, useRef as j, useImperativeHandle as q, createContext as F, useContext as I } from "react";
 import { d as U } from "./index.es-da0cf7oE.js";
-import { d as O } from "./index.es-CF_xy2ns.js";
+import { d as O } from "./index.es-D54RuMc_.js";
 import { OverflowTooltip as k } from "./components/OverflowTooltip/OverflowTooltip.js";
 import './assets/GenericCard.css';const R = /* @__PURE__ */ F({}), V = {
   /**

package/dist/{ListAreaService-DOwtdRa4.js → ListAreaService-Wq9IkwWN.js}

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as z } from "react/jsx-runtime";
-import { G as b } from "./index.es-DntoATwO.js";
-import { I as B } from "./index.es-3043KTnb.js";
-import { c as C, d as N, b as O } from "./index.es-CF_xy2ns.js";
+import { G as B } from "./index.es-DntoATwO.js";
+import { I as C } from "./index.es-3043KTnb.js";
+import { c as b, d as N, T as O } from "./index.es-D54RuMc_.js";
 import { Iconify as $ } from "./components/Iconify/Iconify.js";
 import { AvailableCustomIcons as k } from "./enums/AvailableCustomIcons.js";
 import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_mainElevation_zewqs_5", G = "_searchbar_zewqs_11", W = "_roundedBottom_zewqs_19", L = "_primaryText_zewqs_24", S = "_list_zewqs_28", A = "_listItem_zewqs_56", P = "_iconColor_zewqs_76", D = "_overlineTitle_zewqs_80", F = "_noOverlineTitle_zewqs_85", H = "_truncate_zewqs_89", J = "_truncateOverlineText_zewqs_100", n = {
@@ -21,7 +21,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
   const i = t.reduce((o, c) => {
     const { groupName: e, ...m } = c;
     return !e || typeof e != "string" || (o[e] || (o[e] = {
-      groupName: /* @__PURE__ */ r(C, { children: e }),
+      groupName: /* @__PURE__ */ r(b, { children: e }),
       id: e,
       items: []
     }), o[e].items = [
@@ -54,7 +54,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
     key: i,
     select: u,
     primaryText: i,
-    secondaryText: /* @__PURE__ */ z(b, { direction: "vertical", gap: "none", children: [
+    secondaryText: /* @__PURE__ */ z(B, { direction: "vertical", gap: "none", children: [
       T ?? /* @__PURE__ */ r(
         N,
         {
@@ -84,7 +84,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
         children: _
       }
     ) : void 0,
-    trailingBlock: I ?? f ?? /* @__PURE__ */ r(B, { icon: "arrow_right", className: n.iconColor }),
+    trailingBlock: I ?? f ?? /* @__PURE__ */ r(C, { icon: "arrow_right", className: n.iconColor }),
     leadingBlock: K(g),
     value: m,
     componentProps: {

package/dist/assets/AlertBanner.css

@@ -1 +1 @@
-._messageContainer_1seos_1{border-radius:.25rem;padding:.5rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1seos_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1seos_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1seos_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_1seos_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}
+._messageContainer_1i2s1_1{border-radius:.25rem;padding:.75rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1i2s1_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1i2s1_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1i2s1_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}._warning_1i2s1_24{border:1px solid var(--lmnt-utility-orange-surface);background:#f6a6491a}._closeIcon_1i2s1_29{align-self:flex-start;margin-right:-.15rem}

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._divider_dw2rc_1{margin:0 2rem}._maxWidth_dw2rc_5{max-width:55vw}._desktopList_dw2rc_9{width:30%}._mobileList_dw2rc_13{width:100%}._desktopDetail_dw2rc_17{width:70%}._mobileDetail_dw2rc_21{width:100%}
+._parentGroup_w7vsz_1{align-items:stretch}._divider_w7vsz_5{margin:0 1.5rem;align-self:stretch}._maxWidth_w7vsz_10{max-width:55vw}._desktopList_w7vsz_14{width:30%;align-self:stretch}._mobileList_w7vsz_19{width:100%}._desktopDetail_w7vsz_23{width:70%;align-self:stretch}._mobileDetail_w7vsz_28{width:100%}

package/dist/assets/stepper.css

@@ -0,0 +1 @@
+._stepperIndicatorItem_78nle_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_78nle_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_78nle_12{border:1.5px dashed #7e7e7e}._stepperContainer_78nle_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_78nle_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_78nle_28{margin-bottom:0}._stepperButtonLoading_78nle_32{padding-top:.375rem!important;padding-bottom:.375rem!important}._stepperButtonLoading_78nle_32 svg{stroke:var(--lmnt-theme-white)!important}

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -2,8 +2,15 @@ type AlertBannerProps = {
     text: string | JSX.Element;
     color?: 'danger' | 'info' | 'success' | 'warning';
     isOpen?: boolean;
-    action?: JSX.Element;
     isBold?: boolean;
+    /**
+     * if defined, the close button will be displayed
+     */
+    onClose?: () => void;
+    /**
+     * @deprecated will be removed in the next major version - please use onClose if you need a close button
+     */
+    action?: JSX.Element;
 };
-export declare const AlertBanner: ({ text, color, isOpen, action, isBold, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertBanner: ({ text, color, isOpen, isBold, onClose, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,34 +1,24 @@
-import { jsx as e, Fragment as c, jsxs as d } from "react/jsx-runtime";
+import { jsx as n, Fragment as a, jsxs as t } from "react/jsx-runtime";
 import { G as l } from "../../index.es-DntoATwO.js";
-import { b as m } from "../../index.es-CF_xy2ns.js";
-import { u as _ } from "../../useBreakpoints-MzTZ0tCT.js";
-import '../../assets/AlertBanner.css';const g = "_messageContainer_1seos_1", p = "_info_1seos_9", f = "_danger_1seos_14", u = "_success_1seos_19", y = "_warning_1seos_24", n = {
-  messageContainer: g,
-  info: p,
-  danger: f,
-  success: u,
-  warning: y
-}, C = ({
+import { I as _ } from "../../index.es-3043KTnb.js";
+import { T as m } from "../../index.es-D54RuMc_.js";
+import '../../assets/AlertBanner.css';const d = "_messageContainer_1i2s1_1", g = "_info_1i2s1_9", p = "_danger_1i2s1_14", f = "_success_1i2s1_19", u = "_warning_1i2s1_24", y = "_closeIcon_1i2s1_29", e = {
+  messageContainer: d,
+  info: g,
+  danger: p,
+  success: f,
+  warning: u,
+  closeIcon: y
+}, b = ({
   text: s,
   color: r = "info",
-  isOpen: o = !0,
-  action: i,
-  isBold: t = !0
-}) => {
-  const { isDesktop: a } = _();
-  return o ? /* @__PURE__ */ e("div", { "data-testid": "alert-banner", className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ d(
-    l,
-    {
-      direction: a ? "horizontal" : "vertical",
-      primaryAlign: "space-between",
-      secondaryAlign: "center",
-      children: [
-        typeof s == "string" ? /* @__PURE__ */ e(m, { bold: t, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
-        i
-      ]
-    }
-  ) }) : /* @__PURE__ */ e(c, {});
-};
+  isOpen: i = !0,
+  isBold: c = !0,
+  onClose: o
+}) => i ? /* @__PURE__ */ n("div", { "data-testid": "alert-banner", className: `${e.messageContainer} ${e[r]}`, children: /* @__PURE__ */ t(l, { primaryAlign: "space-between", secondaryAlign: "top", gap: "dense", children: [
+  typeof s == "string" ? /* @__PURE__ */ n(m, { bold: c, level: 2, children: s }) : /* @__PURE__ */ n("div", { children: s }),
+  o && /* @__PURE__ */ n(_, { icon: "close", iconSize: "small", onClick: o, className: e.closeIcon })
+] }) }) : /* @__PURE__ */ n(a, {});
 export {
-  C as AlertBanner
+  b as AlertBanner
 };

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,32 +1,32 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-CX1WJ2Pp.js";
-import { a } from "../../useBreakpoints-MzTZ0tCT.js";
+import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
 import { AlertBanner as n } from "./AlertBanner.js";
-import { d as p, b as c, v as l, t as r, g as o } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as p, b as c, a as l, t as r, g as a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 p("AlertBanner Test", () => {
   c(() => {
-    l.spyOn(a, "useBreakpoints").mockReturnValue({
+    l.spyOn(o, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
       isDesktop: !0,
       isDesktopNavbar: !0
     });
   }), r("render AlertBanner with text", () => {
-    t(/* @__PURE__ */ e(n, { text: "Test" })), o(s.getByText("Test")).toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: "Test" })), a(s.getByText("Test")).toBeInTheDocument();
   }), r("render AlertBanner with element", () => {
-    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), o(s.getByText("Element")).toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), a(s.getByText("Element")).toBeInTheDocument();
   }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
-    l.spyOn(a, "useBreakpoints").mockReturnValue({
+    l.spyOn(o, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
       isDesktop: !1,
       isDesktopNavbar: !1
     }), t(/* @__PURE__ */ e(n, { text: "Test" }));
     const i = s.getByText("Test").closest(".lmnt.lmnt-group");
-    o(i).toHaveStyle(
-      "display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px;"
+    a(i).toHaveStyle(
+      "display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px;"
     );
   }), r("renders nothing when isOpen is false", () => {
-    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), o(s.queryByText("Test")).not.toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), a(s.queryByText("Test")).not.toBeInTheDocument();
   });
 });

package/dist/components/BaseView/BaseView.d.ts

@@ -22,6 +22,10 @@ type BaseViewProps = {
      * action to be displayed in the headings ActionButton
      */
     action?: JSX.Element;
+    /**
+     * hint to be displayed below the heading
+     */
+    hint?: JSX.Element;
     /**
      * isSorted is true if the list should be sorted, @default true
      */
@@ -58,5 +62,5 @@ type BaseViewProps = {
 /**
  * `BaseView` is a layout component that displays a main (a list) and a detail section.
  */
-export declare const BaseView: ({ action, heading, elements, emptyText, hasSearch, isSorted, className, withAvatar, listMaxHeight, pathname, routerLinkElement, searchPlaceholder, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseView: ({ heading, action, hint, elements, emptyText, hasSearch, isSorted, className, withAvatar, listMaxHeight, pathname, routerLinkElement, searchPlaceholder, }: BaseViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BaseView/BaseView.js

@@ -1,77 +1,89 @@
-import { jsx as e, Fragment as x, jsxs as s } from "react/jsx-runtime";
+import { jsx as i, Fragment as d, jsxs as s } from "react/jsx-runtime";
 import { G as r } from "../../index.es-DntoATwO.js";
-import { useMemo as d } from "react";
+import { useMemo as a } from "react";
 import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
 import { EmptyView as W } from "../EmptyView/EmptyView.js";
 import { ListArea as B } from "../ListArea/ListArea.js";
+import { u as G } from "../../useBreakpoints-MzTZ0tCT.js";
 import { VerticalDivider as N } from "../VerticalDivider/VerticalDivider.js";
-import { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
-import '../../assets/BaseView.css';const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9", G = "_mobileList_dw2rc_13", H = "_desktopDetail_dw2rc_17", I = "_mobileDetail_dw2rc_21", o = {
+import '../../assets/BaseView.css';const A = "_parentGroup_w7vsz_1", V = "_divider_w7vsz_5", j = "_maxWidth_w7vsz_10", E = "_desktopList_w7vsz_14", H = "_mobileList_w7vsz_19", I = "_desktopDetail_w7vsz_23", $ = "_mobileDetail_w7vsz_28", o = {
+  parentGroup: A,
   divider: V,
   maxWidth: j,
   desktopList: E,
-  mobileList: G,
-  desktopDetail: H,
-  mobileDetail: I
+  mobileList: H,
+  desktopDetail: I,
+  mobileDetail: $
 }, P = ({
-  action: l,
   heading: c,
-  elements: a,
-  emptyText: m,
-  hasSearch: p = !0,
+  action: m = /* @__PURE__ */ i(d, {}),
+  hint: v = /* @__PURE__ */ i(d, {}),
+  elements: n,
+  emptyText: p,
+  hasSearch: _ = !0,
   isSorted: h = !0,
-  className: _,
-  withAvatar: v = !1,
-  listMaxHeight: f = "calc(100vh - 200px)",
-  pathname: n,
-  routerLinkElement: w,
-  searchPlaceholder: b
+  className: f,
+  withAvatar: b = !1,
+  listMaxHeight: w = "calc(100vh - 200px)",
+  pathname: l,
+  routerLinkElement: D,
+  searchPlaceholder: g
 }) => {
-  const { isDesktopNavbar: i } = A(), t = d(() => a.find((L) => L.route === n), [n, a]), D = d(() => t?.component ?? (i ? /* @__PURE__ */ e(W, { subtitle: m }) : /* @__PURE__ */ e(x, {})), [t, i, m]), g = d(() => i ? !0 : !t, [t, i]), k = d(() => i ? !0 : t, [t, i]);
-  return /* @__PURE__ */ s(r, { "data-testid": "base-view-container", className: _ ?? "", gap: "none", fullWidth: !0, children: [
-    g && /* @__PURE__ */ e(r, { gap: "none", className: i ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: i ? "standard" : "dense", children: [
-      c && /* @__PURE__ */ e(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: l }),
-      /* @__PURE__ */ e(
-        B,
-        {
-          elements: a,
-          hasSearch: p,
-          maxHeight: f,
-          isSorted: h,
-          pathname: n,
-          routerLinkElement: w,
-          searchPlaceholder: b
-        }
-      )
-    ] }) }),
-    k && /* @__PURE__ */ s(
-      r,
-      {
-        "data-testid": "details",
-        gap: "none",
-        className: i ? o.desktopDetail : o.mobileDetail,
-        children: [
-          i && /* @__PURE__ */ e(N, { className: o.divider, height: "100%" }),
-          /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
-            /* @__PURE__ */ e(
-              u,
-              {
-                className: o.maxWidth,
-                heading: t?.detailTitle ?? t?.title ?? "",
-                level: 4,
-                icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
-                marginBottom: 0,
-                invisibleButton: t?.detailAction === void 0,
-                withAvatar: v,
-                children: t?.detailAction ?? l
-              }
-            ),
-            D
-          ] })
-        ]
-      }
-    )
-  ] });
+  const { isDesktopNavbar: e } = G(), t = a(() => n.find((z) => z.route === l), [l, n]), k = a(() => t?.component ?? (e ? /* @__PURE__ */ i(W, { subtitle: p }) : /* @__PURE__ */ i(d, {})), [t, e, p]), L = a(() => e ? !0 : !t, [t, e]), x = a(() => e ? !0 : t, [t, e]);
+  return /* @__PURE__ */ s(
+    r,
+    {
+      "data-testid": "base-view-container",
+      className: `${o.parentGroup} ${f ?? ""}`,
+      gap: "none",
+      fullWidth: !0,
+      children: [
+        L && /* @__PURE__ */ i(r, { gap: "none", className: e ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: e ? "standard" : "dense", children: [
+          c && /* @__PURE__ */ i(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: m }),
+          v,
+          /* @__PURE__ */ i(
+            B,
+            {
+              elements: n,
+              hasSearch: _,
+              maxHeight: w,
+              isSorted: h,
+              pathname: l,
+              routerLinkElement: D,
+              searchPlaceholder: g
+            }
+          )
+        ] }) }),
+        x && /* @__PURE__ */ s(
+          r,
+          {
+            "data-testid": "details",
+            gap: "none",
+            className: e ? o.desktopDetail : o.mobileDetail,
+            children: [
+              e && /* @__PURE__ */ i(N, { className: o.divider, height: "100%" }),
+              /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
+                /* @__PURE__ */ i(
+                  u,
+                  {
+                    className: o.maxWidth,
+                    heading: t?.detailTitle ?? t?.title ?? "",
+                    level: 4,
+                    icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
+                    marginBottom: 0,
+                    invisibleButton: t?.detailAction === void 0,
+                    withAvatar: b,
+                    children: t?.detailAction ?? m
+                  }
+                ),
+                k
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   P as BaseView

package/dist/components/BaseView/BaseView.test.js

@@ -2,7 +2,7 @@ import { jsx as a, Fragment as s } from "react/jsx-runtime";
 import { a as r, s as e, f as p } from "../../react.esm-CX1WJ2Pp.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { BaseView as i } from "./BaseView.js";
-import { d as u, b as m, v as c, t as n, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as u, b as m, a as c, t as n, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 u("BaseView Test", () => {
   m(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import { I as u } from "../../index.es-3043KTnb.js";
-import { T as y, b as C } from "../../index.es-CF_xy2ns.js";
+import { b as y, T as C } from "../../index.es-D54RuMc_.js";
 import { Iconify as w } from "../Iconify/Iconify.js";
 import { AvailableCustomIcons as j } from "../../enums/AvailableCustomIcons.js";
 import { u as I } from "../../useBreakpoints-MzTZ0tCT.js";

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -2,7 +2,7 @@ import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { B as g } from "../../index.es-CiqbARoC.js";
 import { a, s as n } from "../../react.esm-CX1WJ2Pp.js";
 import { BasicHeading as i } from "./BasicHeading.js";
-import { d as h, t as s, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as h, t as s, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {
     a(/* @__PURE__ */ o(i, { heading: "Test" }));

package/dist/components/BlockView/BlockView.js

@@ -1,5 +1,5 @@
 import { jsxs as v, jsx as t, Fragment as h } from "react/jsx-runtime";
-import { d as C, T as R, a as B } from "../../index.es-CF_xy2ns.js";
+import { d as C, b as R, a as B } from "../../index.es-D54RuMc_.js";
 import { useState as A, useEffect as D, useMemo as S } from "react";
 import { getBlockNumberByDto as F } from "../../services/BlockService.js";
 import '../../assets/BlockView.css';const M = "_grid_17o13_1", V = "_black_17o13_11", j = "_blockLayout_17o13_15", q = "_blockRow_17o13_26", G = "_block_17o13_15", H = "_active_17o13_45", I = "_error_17o13_51", J = "_empty_17o13_57", K = "_blockText_17o13_61", O = "_emptyLayout_17o13_70", o = {

package/dist/components/BlockView/BlockView.test.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import { a as s, s as o, f as n } from "../../react.esm-CX1WJ2Pp.js";
 import { BlockView as i } from "./BlockView.js";
-import { d as a, v as B, t as r, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as a, a as B, t as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 a("BlockView Test", () => {
   const c = B.fn(), e = {
     id: "1",

package/dist/components/ChipCard/ChipCard.test.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { a, s as i } from "../../react.esm-CX1WJ2Pp.js";
 import { ChipCard as n } from "./ChipCard.js";
-import { d as s, t as c, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as s, t as c, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 s("ChipCard Component", () => {
   const r = "Test Label", o = "domain";
   c("renders the correct label and icon", () => {

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { I as f } from "../../index.es-0lQcz8m1.js";
-import { M as d, L as _, a as p } from "../../index.es-d5xhUpJZ.js";
+import { M as d, L as _, a as p } from "../../index.es-fnFnw2P1.js";
 import { useState as I, useCallback as a, useEffect as v } from "react";
 import { u as C } from "../../uniqueId-NU3-C36A.js";
 import '../../assets/ContextMenu.css';const k = "_menu_ol91v_1", y = "_icon_ol91v_5", M = "_listItem_ol91v_9", l = {

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { a as B, s as t, f as o, w as s } from "../../react.esm-CX1WJ2Pp.js";
 import { ContextMenu as p } from "./ContextMenu.js";
-import { v as l, d as k, t as T, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { a as l, d as k, t as T, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 const C = l.fn(), a = l.fn(), i = l.fn(), g = [
   { primaryText: "Open", onClick: C, leadingBlock: "add" },
   { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },

package/dist/components/DeleteModal/DeleteModal.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as p, Fragment as i } from "react/jsx-runtime";
 import { B as u } from "../../index.es-CiqbARoC.js";
 import { G as c } from "../../index.es-DntoATwO.js";
 import { I as D } from "../../index.es-3043KTnb.js";
-import { b as l } from "../../index.es-CF_xy2ns.js";
+import { T as l } from "../../index.es-D54RuMc_.js";
 import { u as k } from "../../uniqueId-NU3-C36A.js";
 import { AvailableCustomIcons as I } from "../../enums/AvailableCustomIcons.js";
 import { u as N } from "../../useBreakpoints-MzTZ0tCT.js";

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as c, s as e } from "../../react.esm-CX1WJ2Pp.js";
 import { DeleteModal as b } from "./DeleteModal.js";
-import { d as B, t as a, v as o, g as t } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as B, t as a, a as o, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 B("DeleteModal Test", () => {
   a("should render the DeleteModal properly", () => {
     c(

package/dist/components/Disclaimer/Disclaimer.js

@@ -1,7 +1,7 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { G as n } from "../../index.es-DntoATwO.js";
 import { I as t } from "../../index.es-3043KTnb.js";
-import { d as m, b as d } from "../../index.es-CF_xy2ns.js";
+import { d as m, T as d } from "../../index.es-D54RuMc_.js";
 import '../../assets/Disclaimer.css';const p = "_disclaimer_1k38t_1", y = "_iconArea_1k38t_7", a = {
   disclaimer: p,
   iconArea: y

package/dist/components/Disclaimer/Disclaimer.test.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { a as r, s as t } from "../../react.esm-CX1WJ2Pp.js";
 import { Disclaimer as s } from "./Disclaimer.js";
-import { d as i, t as m, g as e } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+import { d as i, t as m, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 i("Disclaimer test", () => {
   m("should render with default text", () => {
     r(/* @__PURE__ */ o(s, { text: "disclaimer.default" })), e(t.getByText("disclaimer.default")).toBeInTheDocument();