@hortiview/shared-components 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [2.2.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.1.0...v2.2.0) (2025-07-24)
+
+### Features
+
+* add new data-testids and fix onboardingbanner test ([1ac90c1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1ac90c1c4db3ff909e6ac3beb52863e6a8e55937))
+
+## [2.1.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.0.0...v2.1.0) (2025-06-11)
+
+### Features
+
+* create OnboardingBanner component ([8cfeadf](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8cfeadf8dde24b6d888de22533e506805b81c83c))
+* improve component API, update tests and docs ([12e6da4](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/12e6da4a40b66885dc2ccf56c8319e4baab5df4c))
+
+### Code Refactoring
+
+* change index to buttonProps.id ([0c9e4b6](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0c9e4b661ef71bde4b82540a15d73a2d2e79552c))
+
 ## [2.0.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.12.0...v2.0.0) (2025-06-06)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -51,6 +51,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [LoadingSpinner](#loadingspinner)
 1. [Modal](#modal)
 1. [ModulePadding](#modulepadding)
+1. [OnboardingBanner](#onboardingbanner)
 1. [OverflowTooltip](#overflowtooltip)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
@@ -887,6 +888,20 @@ import { ModulePadding } from '@hortiview/shared-components';
 </ModulePadding>;
 ```
 
+### OnboardingBanner
+
+A responsive onboarding banner that adapts its layout for desktop and mobile.
+
+- **Desktop:** Media content is displayed to the _right_ of the description  
+- **Mobile:** Media content appears _above_ the description
+
+```jsx
+import {OnboardingBanner} from '@hortiview/shared-components';
+
+<OnboardingBanner headline='Hello' />
+
+```
+
 ### OverflowTooltip
 
 Provides a tooltip and overflow behavior of a given text value.

package/dist/GenericCard-BFYKwkzI.js

@@ -0,0 +1,89 @@
+import { jsx as r, jsxs as d, Fragment as C } from "react/jsx-runtime";
+import { C as h, a as m, b as T, c as g, d as v } from "./index.es-6TJ1S8Jr.js";
+import { G as b, a as x, b as c } from "./index.es-Dvj_qpAp.js";
+import { d as f } from "./index.es-D54RuMc_.js";
+import { useMemo as w } from "react";
+import { OverflowTooltip as l } from "./components/OverflowTooltip/OverflowTooltip.js";
+import './assets/GenericCard.css';const u = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0_10", $ = "_row_ny9m0_14", G = "_font_ny9m0_18", k = "_fontHeader_ny9m0_23", H = "_title_ny9m0_27", S = "_emptyContainer_ny9m0_33", A = "_empty_ny9m0_33", n = {
+  cardTitle: u,
+  cardBody: B,
+  cardContent: N,
+  row: $,
+  font: G,
+  fontHeader: k,
+  title: H,
+  emptyContainer: S,
+  empty: A
+}, _ = {
+  desktopCol: 6,
+  phoneCol: 2,
+  tabletCol: 4,
+  verticalAlign: "bottom"
+}, W = ({ item: e, columns: t, hiddenColumns: o }) => {
+  const i = t.find((a) => a.asCardTitle), y = t.find((a) => a.asCardSubtitle), p = w(
+    () => t.filter(
+      (a) => !a.asCardTitle && !a.asCardSubtitle && a.id !== "actions"
+    ),
+    [t]
+  );
+  return /* @__PURE__ */ r(
+    h,
+    {
+      variant: "raised",
+      "data-testid": `card${i ? "-" + e[i.accessor] : ""}`,
+      children: /* @__PURE__ */ d(m, { className: n.cardContent, "data-testid": "card-content", children: [
+        /* @__PURE__ */ r(j, { item: e, titleColumn: i, subTitleColumn: y }),
+        /* @__PURE__ */ r(T, { className: n.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ r(b, { fullHeight: !0, fullWidth: !0, variant: "none", children: p.map((a) => o?.includes(a.id) ? null : /* @__PURE__ */ d(x, { className: n.row, "data-testid": "row", children: [
+          /* @__PURE__ */ r(c, { horizontalAlign: "right", ..._, children: /* @__PURE__ */ d(
+            f,
+            {
+              level: 2,
+              themeColor: "text-secondary-on-background",
+              className: `${n.font} ${n.fontHeader}`,
+              tag: "div",
+              children: [
+                a.header,
+                ":"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ r(c, { horizontalAlign: "left", ..._, children: /* @__PURE__ */ r(s, { column: a, item: e }) })
+        ] }, a.id)) }) })
+      ] })
+    }
+  );
+}, j = ({ item: e, titleColumn: t, subTitleColumn: o }) => {
+  const i = e.actions;
+  return !t && !o && !i ? null : /* @__PURE__ */ d(C, { children: [
+    /* @__PURE__ */ r(
+      g,
+      {
+        "data-testid": "card-title",
+        className: n.cardTitle,
+        primaryText: t !== void 0 && /* @__PURE__ */ r(s, { column: t, item: e, isTitle: !0 }),
+        secondaryText: o !== void 0 && /* @__PURE__ */ r(s, { column: o, item: e, isTitle: !0 }),
+        trailingBlock: i,
+        trailingBlockType: i ? "title-actions" : void 0
+      }
+    ),
+    /* @__PURE__ */ r(v, {})
+  ] });
+}, s = ({ item: e, column: t, isTitle: o = !1 }) => t.cellTemplate ? t.cellTemplate({ row: { original: e } }) : o ? /* @__PURE__ */ r(
+  l,
+  {
+    id: `tip_${t.id}_${e[t.accessor]}`,
+    text: e[t.accessor],
+    children: /* @__PURE__ */ r("span", { className: n.title, children: e[t.accessor] })
+  }
+) : /* @__PURE__ */ r(
+  l,
+  {
+    id: `tip_${t.id}_${e[t.accessor]}`,
+    text: e[t.accessor],
+    children: /* @__PURE__ */ r(f, { level: 2, themeColor: "text-primary-on-background", className: n.font, children: e[t.accessor] })
+  }
+);
+export {
+  W as G,
+  n as s
+};

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

@@ -1,27 +1,27 @@
-import { jsx as r, jsxs as z } from "react/jsx-runtime";
-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 = {
-  fullWidth: E,
-  mainElevation: j,
-  searchbar: G,
-  roundedBottom: W,
-  primaryText: L,
-  list: S,
-  listItem: A,
-  iconColor: P,
-  overlineTitle: D,
-  noOverlineTitle: F,
-  truncate: H,
-  truncateOverlineText: J
-}, Z = (t, s, a, l) => {
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { G as C } from "./index.es-DntoATwO.js";
+import { I as b } from "./index.es-3043KTnb.js";
+import { c as N, d as O, T as $ } from "./index.es-D54RuMc_.js";
+import { Iconify as k } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as E } from "./enums/AvailableCustomIcons.js";
+import './assets/ListAreaService.css';const j = "_fullWidth_zewqs_1", G = "_mainElevation_zewqs_5", W = "_searchbar_zewqs_11", L = "_roundedBottom_zewqs_19", S = "_primaryText_zewqs_24", A = "_list_zewqs_28", P = "_listItem_zewqs_56", D = "_iconColor_zewqs_76", F = "_overlineTitle_zewqs_80", H = "_noOverlineTitle_zewqs_85", J = "_truncate_zewqs_89", K = "_truncateOverlineText_zewqs_100", n = {
+  fullWidth: j,
+  mainElevation: G,
+  searchbar: W,
+  roundedBottom: L,
+  primaryText: S,
+  list: A,
+  listItem: P,
+  iconColor: D,
+  overlineTitle: F,
+  noOverlineTitle: H,
+  truncate: J,
+  truncateOverlineText: K
+}, ee = (t, s, a, l) => {
   const i = t.reduce((o, c) => {
     const { groupName: e, ...m } = c;
     return !e || typeof e != "string" || (o[e] || (o[e] = {
-      groupName: /* @__PURE__ */ r(b, { children: e }),
+      groupName: /* @__PURE__ */ r(N, { children: e }),
       id: e,
       items: []
     }), o[e].items = [
@@ -30,7 +30,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
     ]), o;
   }, {});
   return Object.values(i);
-}, ee = (t, s, a, l) => t.map((i) => y(i, s, a, l)), y = (t, s, a, l) => {
+}, te = (t, s, a, l) => t.map((i) => y(i, s, a, l)), y = (t, s, a, l) => {
   const {
     id: i,
     title: o,
@@ -47,16 +47,17 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
     onClick: w,
     customTitle: T,
     listItemClassName: x,
-    overlineTitle: _
+    overlineTitle: _,
+    "data-testid": q
   } = t, u = s === e;
   return {
     id: i,
     key: i,
     select: u,
     primaryText: i,
-    secondaryText: /* @__PURE__ */ z(B, { direction: "vertical", gap: "none", children: [
+    secondaryText: /* @__PURE__ */ B(C, { direction: "vertical", gap: "none", children: [
       T ?? /* @__PURE__ */ r(
-        N,
+        O,
         {
           "data-testid": "title",
           level: 1,
@@ -66,7 +67,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
         }
       ),
       c && !T ? /* @__PURE__ */ r(
-        O,
+        $,
         {
           "data-testid": "subtitle",
           level: 2,
@@ -84,26 +85,26 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
         children: _
       }
     ) : void 0,
-    trailingBlock: I ?? f ?? /* @__PURE__ */ r(C, { icon: "arrow_right", className: n.iconColor }),
-    leadingBlock: K(g),
+    trailingBlock: I ?? f ?? /* @__PURE__ */ r(b, { icon: "arrow_right", className: n.iconColor }),
+    leadingBlock: M(g),
     value: m,
     componentProps: {
       id: i,
-      "data-testid": `${o}-list-item`,
+      "data-testid": `${q ?? o}-list-item`,
       key: i,
       leadingBlockType: p ?? "icon",
       trailingBlockType: h ?? "icon",
       className: `${p === "avatar" ? "" : n.listItem} ${a} ${x ?? ""} ${_ ? n.overlineTitle : n.noOverlineTitle}`,
-      onClick: (M, q) => w?.(q),
+      onClick: (Q, z) => w?.(z),
       tag: d || v ? void 0 : l ?? "a",
       to: d || v ? void 0 : e,
       disabled: d
     }
   };
-}, K = (t) => typeof t == "string" && t in k ? /* @__PURE__ */ r($, { icon: t }) : t;
+}, M = (t) => typeof t == "string" && t in E ? /* @__PURE__ */ r(k, { icon: t }) : t;
 export {
-  ee as a,
-  Z as g,
+  te as a,
+  ee as g,
   y as m,
   n as s
 };

package/dist/assets/OnboardingBanner.css

@@ -0,0 +1 @@
+._elevation_5dfyt_1{background-color:var(--lmnt-theme-primary-50)}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -15,9 +15,14 @@ type ContextMenuProps = {
      * Default is 'vertical'
      */
     iconOrientation?: 'vertical' | 'horizontal';
+    /**
+     * data-testid for testing
+     */
+    'data-testid'?: string;
 };
 export type ActionProps = ListItemProps & {
     closeOnClick?: boolean;
+    'data-testid'?: string;
 };
 /**
  *
@@ -32,5 +37,5 @@ export type ActionProps = ListItemProps & {
  * ];
  * @returns a context menu with the given actions as ListItems
  */
-export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,60 +1,61 @@
-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-fnFnw2P1.js";
-import { useState as I, useCallback as a, useEffect as v } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { I as d } from "../../index.es-0lQcz8m1.js";
+import { M as f, L as _, a as I } from "../../index.es-fnFnw2P1.js";
+import { useState as p, 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 = {
+import '../../assets/ContextMenu.css';const k = "_menu_ol91v_1", y = "_icon_ol91v_5", M = "_listItem_ol91v_9", i = {
   menu: k,
   icon: y,
   listItem: M
-}, N = ({
-  triggerOpen: s = null,
+}, T = ({
+  triggerOpen: n = null,
   actions: c,
-  iconOrientation: m = "vertical"
+  iconOrientation: m = "vertical",
+  "data-testid": r
 }) => {
-  const [e, t] = I(!1), r = a(() => {
-    t(!e);
-  }, [e]), i = a(() => {
-    t(!1);
+  const [t, s] = p(!1), u = a(() => {
+    s(!t);
+  }, [t]), l = a(() => {
+    s(!1);
   }, []);
   return v(() => {
-    t(s !== null ? s : !1);
-  }, [s]), /* @__PURE__ */ n(
-    d,
+    s(n !== null ? n : !1);
+  }, [n]), /* @__PURE__ */ o(
+    f,
     {
-      className: l.menu,
-      "data-testid": "selection-menu",
-      open: e,
+      className: i.menu,
+      "data-testid": r ?? "selection-menu",
+      open: t,
       surfaceOnly: !0,
       hoistToBody: !0,
-      onClose: i,
-      trigger: /* @__PURE__ */ n(
-        f,
+      onClose: l,
+      trigger: /* @__PURE__ */ o(
+        d,
         {
-          className: l.icon,
-          variant: e ? "filled-primary" : void 0,
+          className: i.icon,
+          variant: t ? "filled-primary" : void 0,
           "data-testid": "open-button",
           icon: m === "vertical" ? "more_vert" : "more_horiz",
-          onClick: r
+          onClick: u
         }
       ),
-      children: /* @__PURE__ */ n(_, { children: c.map((o, u) => /* @__PURE__ */ n(
-        p,
+      children: /* @__PURE__ */ o(_, { "data-testid": "selection-list", children: c.map((e) => /* @__PURE__ */ o(
+        I,
         {
-          className: l.listItem,
-          ...o,
+          className: i.listItem,
+          ...e,
           leadingBlockType: "icon",
-          "data-testid": `list-item-button-${u}`,
+          "data-testid": e["data-testid"],
           onClick: () => {
-            o?.onClick?.(), o.closeOnClick !== !1 && i();
+            e?.onClick?.(), e.closeOnClick !== !1 && l();
           }
         },
-        C(`LI_${o.primaryText?.toString()}_`)
+        C(`LI_${e.primaryText?.toString()}_`)
       )) })
     },
     "selectionmenu"
   );
 };
 export {
-  N as ContextMenu
+  T as ContextMenu
 };

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

@@ -1,11 +1,11 @@
 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 { 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" },
-  { primaryText: "Edit", onClick: a, leadingBlock: "edit" }
+import { a as d, d as k, t as T, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+const C = d.fn(), a = d.fn(), i = d.fn(), g = [
+  { primaryText: "Open", onClick: C, leadingBlock: "add", "data-testid": "open-testid" },
+  { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline", "data-testid": "delete-testid" },
+  { primaryText: "Edit", onClick: a, leadingBlock: "edit", "data-testid": "edit-testid" }
 ];
 k("ContextMenu Test", () => {
   T("render contextMenu and close it", () => {
@@ -16,7 +16,7 @@ k("ContextMenu Test", () => {
     B(/* @__PURE__ */ r(p, { actions: g, triggerOpen: !0 }));
     const c = t.getByTestId("open-button"), n = t.getByTestId("selection-menu");
     e(n).toBeInTheDocument(), e(n).not.toHaveClass("mdc-menu-surface--open"), o.click(c), await s(() => e(n).toHaveClass("mdc-menu-surface--animating-open")), e(t.getByText("Open")).toBeInTheDocument(), e(t.getByText("Delete")).toBeInTheDocument(), e(t.getByText("Edit")).toBeInTheDocument();
-    const m = t.getByTestId("list-item-button-0"), u = t.getByTestId("list-item-button-1"), d = t.getByTestId("list-item-button-2");
-    e(m).toBeInTheDocument(), e(u).toBeInTheDocument(), e(d).toBeInTheDocument(), o.click(m), e(C).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(a).not.toHaveBeenCalled(), o.click(u), e(i).toHaveBeenCalled(), o.click(d), e(a).toHaveBeenCalled();
+    const l = t.getByTestId("open-testid"), m = t.getByTestId("delete-testid"), u = t.getByTestId("edit-testid");
+    e(l).toBeInTheDocument(), e(m).toBeInTheDocument(), e(u).toBeInTheDocument(), o.click(l), e(C).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(a).not.toHaveBeenCalled(), o.click(m), e(i).toHaveBeenCalled(), o.click(u), e(a).toHaveBeenCalled();
   });
 });

package/dist/components/GenericTable/Mobile/GenericCard.js

@@ -1,9 +1,10 @@
 import "react/jsx-runtime";
 import "../../../index.es-6TJ1S8Jr.js";
-import { G as a } from "../../../GenericCard-DuNnB9Ve.js";
+import "../../../index.es-Dvj_qpAp.js";
 import "../../../index.es-D54RuMc_.js";
 import "react";
 import "../../OverflowTooltip/OverflowTooltip.js";
+import { G } from "../../../GenericCard-BFYKwkzI.js";
 export {
-  a as GenericCard
+  G as GenericCard
 };

package/dist/components/GenericTable/Mobile/GenericCard.test.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as c, s as o } from "../../../react.esm-CX1WJ2Pp.js";
-import { G as i } from "../../../GenericCard-DuNnB9Ve.js";
+import { G as i } from "../../../GenericCard-BFYKwkzI.js";
 import { d as m, t as s, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("GenericCard", () => {
   const d = {

package/dist/components/GenericTable/Mobile/GenericCardList.js

@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { G as c } from "../../../index.es-DntoATwO.js";
 import { P as l } from "../../../index.es-D-CKRzIB.js";
 import { a as o } from "../../../index.es-D54RuMc_.js";
-import { s as i, G as m } from "../../../GenericCard-DuNnB9Ve.js";
+import { s as i, G as m } from "../../../GenericCard-BFYKwkzI.js";
 const u = ({
   columns: n,
   data: e,

package/dist/components/ListArea/ListArea.d.ts

@@ -42,6 +42,10 @@ type ListAreaProps = {
      * noElementsView is the view to be displayed when the list is empty
      */
     noElementsView?: JSX.Element;
+    /**
+     * data-testid for testing
+     */
+    'data-testid'?: string;
     /**
      * routerLinkElement is the element to be used for the elements link, use react-router Link component for the best experience.
      * If the element has `noNavigation=false` and the `routerLinkElement` is undefined an `<a>` tag is used.
@@ -54,5 +58,5 @@ type ListAreaProps = {
  * list elements act as router links to the corresponding route.
  * The list will be displayed in the desktop view or when no detail view is selected (in mobile view).
  */
-export declare const ListArea: ({ elements, pathname, isGrouped, hasSearch, searchPlaceholder, isIntegrated, isSorted, itemClassName, maxHeight, noElementsView, routerLinkElement, }: ListAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListArea: ({ elements, pathname, isGrouped, hasSearch, searchPlaceholder, isIntegrated, isSorted, itemClassName, maxHeight, noElementsView, "data-testid": dataTestId, routerLinkElement, }: ListAreaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ListArea/ListArea.js

@@ -1,12 +1,12 @@
 import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import { D as u } from "../../index.es-BWgXLqXn.js";
-import { E as y } from "../../index.es-h2lMdt7G.js";
-import { L as C } from "../../index.es-fnFnw2P1.js";
+import { E as C } from "../../index.es-h2lMdt7G.js";
+import { L as b } from "../../index.es-fnFnw2P1.js";
 import { o as p } from "../../orderBy-Bd48bw88.js";
-import { useState as b, useMemo as v } from "react";
-import { SearchBar as B } from "../SearchBar/SearchBar.js";
-import { g as D, a as j, s as t } from "../../ListAreaService-Wq9IkwWN.js";
-const q = ({
+import { useState as B, useMemo as v } from "react";
+import { SearchBar as D } from "../SearchBar/SearchBar.js";
+import { g as j, a as E, s as e } from "../../ListAreaService-BVtuBN0K.js";
+const z = ({
   elements: r,
   pathname: o,
   isGrouped: i = !1,
@@ -17,31 +17,32 @@ const q = ({
   itemClassName: c = "",
   maxHeight: T = "100%",
   noElementsView: $,
+  "data-testid": g,
   routerLinkElement: d
 }) => {
-  const [e, g] = b(""), a = v(() => {
-    if (!e) return l ? p(r, "title") : r;
-    const n = r.filter((f) => f.title.toLowerCase().includes(e.toLowerCase()) || f.subTitle?.toLowerCase().includes(e.toLowerCase()) || f.overlineTitle?.toLowerCase().includes(e.toLowerCase()));
+  const [t, x] = B(""), a = v(() => {
+    if (!t) return l ? p(r, "title") : r;
+    const n = r.filter((f) => f.title.toLowerCase().includes(t.toLowerCase()) || f.subTitle?.toLowerCase().includes(t.toLowerCase()) || f.overlineTitle?.toLowerCase().includes(t.toLowerCase()));
     return l ? p(n, "title") : n;
-  }, [e, r, l]), x = v(
-    () => i ? D(a, o, c, d) : j(a, o, c, d),
+  }, [t, r, l]), y = v(
+    () => i ? j(a, o, c, d) : E(a, o, c, d),
     [a, o, c, i, d]
   );
   return /* @__PURE__ */ s(
-    y,
+    C,
     {
       "data-testid": "elevation",
       elevation: m ? 0 : 1,
-      className: `${t.mainElevation}`,
-      children: /* @__PURE__ */ h("div", { className: t.fullWidth, children: [
+      className: `${e.mainElevation}`,
+      children: /* @__PURE__ */ h("div", { className: e.fullWidth, children: [
         L && r.length > 0 && /* @__PURE__ */ h("span", { "data-testid": "search-bar-container", children: [
           m && /* @__PURE__ */ s(u, {}),
           /* @__PURE__ */ s(
-            B,
+            D,
             {
-              searchTerm: e,
-              setSearchTerm: g,
-              className: t.searchbar,
+              searchTerm: t,
+              setSearchTerm: x,
+              className: e.searchbar,
               placeholder: w
             }
           ),
@@ -49,11 +50,11 @@ const q = ({
         ] }),
         a.length === 0 && $,
         /* @__PURE__ */ s(
-          C,
+          b,
           {
-            "data-testid": "list",
-            items: x,
-            className: `${t.list} ${t.primaryText} ${i ? "" : t.roundedBottom}`,
+            "data-testid": g,
+            items: y,
+            className: `${e.list} ${e.primaryText} ${i ? "" : e.roundedBottom}`,
             style: { maxHeight: T },
             showDivider: !1
           }
@@ -63,5 +64,5 @@ const q = ({
   );
 };
 export {
-  q as ListArea
+  z as ListArea
 };

package/dist/components/ListArea/ListArea.test.js

@@ -2,7 +2,7 @@ import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { c as p } from "../../index.es-D54RuMc_.js";
 import { a as s, s as a, f as u } from "../../react.esm-CX1WJ2Pp.js";
 import { ListArea as c } from "./ListArea.js";
-import { g as h } from "../../ListAreaService-Wq9IkwWN.js";
+import { g as h } from "../../ListAreaService-BVtuBN0K.js";
 import { d as m, t as n, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 m("ListArea Test", () => {
   const o = [

package/dist/components/ListArea/ListAreaService.js

@@ -4,7 +4,7 @@ import "../../index.es-3043KTnb.js";
 import "../../index.es-D54RuMc_.js";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as a, a as g, m as d } from "../../ListAreaService-Wq9IkwWN.js";
+import { g as a, a as g, m as d } from "../../ListAreaService-BVtuBN0K.js";
 export {
   a as getGroupedItems,
   g as getListedItems,

package/dist/components/OnboardingBanner/OnboardingBanner.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps } from '@element-public/react-button';
+
+type OnboardingBannerProps = {
+    headline: string;
+    description: string;
+    mediaContent?: React.ReactNode;
+    isVisible: boolean;
+    onClose: () => void;
+    buttons?: (ButtonProps & {
+        id: string;
+    })[];
+};
+/**
+ * A responsive onboarding banner that displays a headline, description, optional media content,
+ * and, if provided, one or more action buttons.
+ *
+ * @remarks
+ * On desktop, the mediaContent is shown to the right of the description;
+ * on mobile, it appears above the description.
+ *
+ * @param headline - The headline of the Onboarding Banner
+ * @param description - The description of the Onboarding Banner
+ * @param mediaContent  -  Optional React node (e.g. video or image) shown on the side
+ * @param isVisible - Whether the banner should be rendered
+ * @param onClose - Fired when the close icon is clicked
+ * @param buttons - An array of ButtonProps to render as action buttons below the description.
+ * @returns
+ */
+export declare const OnboardingBanner: ({ headline, description, mediaContent, isVisible, onClose, buttons, }: OnboardingBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};