@hortiview/shared-components 0.0.6504 → 0.0.6849

package/dist/ListAreaService-DDlsV9UD.js

@@ -0,0 +1,100 @@
+import "./assets/ListAreaService.css";
+import { jsx as r, jsxs as C } from "react/jsx-runtime";
+import { TypoButton as N, Group as O, TypoSubtitle as k, TypoBody as $, Icon as L } from "@element/react-components";
+import { Iconify as E } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as j } from "./enums/AvailableCustomIcons.js";
+const W = "_fullWidth_1l0gd_1", G = "_mainElevation_1l0gd_5", S = "_searchbar_1l0gd_11", w = "_roundedBottom_1l0gd_19", A = "_primaryText_1l0gd_24", P = "_noOverlineText_1l0gd_28", q = "_list_1l0gd_32", z = "_listItem_1l0gd_60", D = "_trailingIcon_1l0gd_64", F = "_groupedListItem_1l0gd_76", H = "_iconColor_1l0gd_80", J = "_overlineTitle_1l0gd_84", K = "_truncate_1l0gd_89", M = "_truncateOverlineText_1l0gd_98", i = {
+  fullWidth: W,
+  mainElevation: G,
+  searchbar: S,
+  roundedBottom: w,
+  primaryText: A,
+  noOverlineText: P,
+  list: q,
+  listItem: z,
+  trailingIcon: D,
+  groupedListItem: F,
+  iconColor: H,
+  overlineTitle: J,
+  truncate: K,
+  truncateOverlineText: M
+}, tt = (e, l, c, a) => {
+  const o = e.reduce((n, s) => {
+    const { groupName: t, ...m } = s;
+    return !t || typeof t != "string" || (n[t] || (n[t] = {
+      groupName: /* @__PURE__ */ r(N, { children: t }),
+      id: t,
+      items: []
+    }), n[t].items = [
+      ...n[t].items,
+      T(m, l, c, a)
+    ]), n;
+  }, {});
+  return Object.values(o);
+}, et = (e, l, c, a) => e.map((o) => T(o, l, c, a)), T = (e, l, c, a) => {
+  const {
+    id: o,
+    title: n,
+    subTitle: s,
+    route: t,
+    value: m,
+    noNavigation: g,
+    disabled: d,
+    icon: y,
+    iconType: u,
+    trailingIcon: I,
+    trailingIconType: x,
+    actionButton: f,
+    onClick: h,
+    customTitle: p,
+    listItemClassName: B,
+    overlineTitle: v
+  } = e, _ = l === t;
+  return {
+    id: o,
+    key: o,
+    select: _,
+    primaryText: o,
+    secondaryText: /* @__PURE__ */ C(O, { direction: "vertical", gap: "none", children: [
+      p ?? /* @__PURE__ */ r(
+        k,
+        {
+          level: 1,
+          bold: _,
+          className: `${i.truncate} lmnt-theme-on-surface-active`,
+          children: n
+        }
+      ),
+      s && !p ? /* @__PURE__ */ r(
+        $,
+        {
+          level: 2,
+          themeColor: _ ? "primary" : void 0,
+          className: `${i.truncate} lmnt-theme-on-surface-inactive`,
+          children: s
+        }
+      ) : void 0
+    ] }),
+    overlineText: /* @__PURE__ */ r("span", { className: `${i.truncate} ${i.truncateOverlineText}`, children: v }),
+    trailingBlock: f ?? I ?? /* @__PURE__ */ r(L, { icon: "arrow_right", className: i.iconColor }),
+    leadingBlock: Q(y),
+    value: m,
+    componentProps: {
+      id: o,
+      key: o,
+      leadingBlockType: u ?? "icon",
+      trailingBlockType: x ?? "icon",
+      className: `${u === "avatar" ? "" : i.listItem} ${c} ${B ?? ""} ${v ? i.overlineTitle : i.noOverlineText}`,
+      onClick: (R, b) => h?.(b),
+      tag: d || g ? void 0 : a ?? "a",
+      to: d || g ? void 0 : t,
+      disabled: d
+    }
+  };
+}, Q = (e) => typeof e == "string" && e in j ? /* @__PURE__ */ r(E, { icon: e }) : e;
+export {
+  et as a,
+  tt as g,
+  T as m,
+  i as s
+};

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._divider_anyyu_1{margin:0 2rem}
+._divider_12ecr_1{margin:0 2rem}._truncate_12ecr_5{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}

package/dist/assets/HashTabView.css

@@ -1 +1 @@
-._elevation_1rcw6_1{width:100%;border-radius:.5rem}._themeBackground_1rcw6_6{background:var(--lmnt-theme-background)}._tabBar_1rcw6_10{background:transparent;align-self:flex-end;border-radius:.5rem}._tabWrapper_1rcw6_16{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._tabButton_1rcw6_20{height:3.5rem!important}._childContainer_1rcw6_24{width:25rem}._childContainerLg_1rcw6_28{width:100%}
+._elevation_16c7u_1{width:100%;border-radius:.5rem}._themeBackground_16c7u_6{background:var(--lmnt-theme-background)}._tabBar_16c7u_10{background:transparent;align-self:flex-end;border-radius:.5rem}._tabWrapper_16c7u_16{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._tabButton_16c7u_20{height:3.5rem!important}._childContainer_16c7u_24{width:25rem}._childContainerPhone_16c7u_28{width:100%}

package/dist/assets/ListAreaService.css

@@ -1 +1 @@
-._fullWidth_9hcwy_1{width:100%}._mainElevation_9hcwy_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_9hcwy_11 div{border:none}._searchbar_9hcwy_11 button{margin-right:.5rem}._roundedBottom_9hcwy_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_9hcwy_24 [class*=mdc-list-item__primary-text]{display:none!important}._noOverlineText_9hcwy_28 [class*=mdc-list-item__content]{margin-top:-.625rem}._list_9hcwy_32{padding-top:0;padding-bottom:0;overflow-y:auto}._list_9hcwy_32 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_9hcwy_32::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_9hcwy_32::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_9hcwy_32::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_9hcwy_60{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_9hcwy_60 i:not(._trailingIcon_9hcwy_64){color:var(--lmnt-theme-on-surface-inactive)}._listItem_9hcwy_60 i._trailingIcon_9hcwy_64{color:var(--lmnt-theme-on-surface-disabled)}._listItem_9hcwy_60 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_9hcwy_76{height:4.5rem!important}._iconColor_9hcwy_80{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_9hcwy_84 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}
+._fullWidth_1l0gd_1{width:100%}._mainElevation_1l0gd_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1l0gd_11 div{border:none}._searchbar_1l0gd_11 button{margin-right:.5rem}._roundedBottom_1l0gd_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_1l0gd_24 [class*=mdc-list-item__primary-text]{display:none!important}._noOverlineText_1l0gd_28 [class*=mdc-list-item__content]{margin-top:-.625rem}._list_1l0gd_32{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1l0gd_32 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_1l0gd_32::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1l0gd_32::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1l0gd_32::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1l0gd_60{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1l0gd_60 i:not(._trailingIcon_1l0gd_64){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1l0gd_60 i._trailingIcon_1l0gd_64{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1l0gd_60 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1l0gd_76{height:4.5rem!important}._iconColor_1l0gd_80{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_1l0gd_84 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._truncate_1l0gd_89{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%}._truncateOverlineText_1l0gd_98{margin-bottom:-1rem!important;margin-top:-1rem!important}

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,18 +1,26 @@
 import "../../assets/AlertBanner.css";
-import { jsx as e, Fragment as a, jsxs as c } from "react/jsx-runtime";
+import { jsx as e, Fragment as c, jsxs as a } from "react/jsx-runtime";
 import { Group as p, TypoBody as l } from "@element/react-components";
-import { a as m } from "../../useBreakpoint-DROHPVxO.js";
-const d = "_messageContainer_1kpsp_1", g = "_info_1kpsp_9", _ = "_danger_1kpsp_14", f = "_success_1kpsp_19", n = {
+import { u as m } from "../../useBreakpoint-2MH8ICuE.js";
+const d = "_messageContainer_1kpsp_1", _ = "_info_1kpsp_9", g = "_danger_1kpsp_14", u = "_success_1kpsp_19", n = {
   messageContainer: d,
-  info: g,
-  danger: _,
-  success: f
+  info: _,
+  danger: g,
+  success: u
 }, v = ({ text: s, color: r = "info", isOpen: o = !0, action: i }) => {
-  const { isLg: t } = m();
-  return o ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ c(p, { direction: t ? "horizontal" : "vertical", primaryAlign: "space-between", secondaryAlign: "center", children: [
-    typeof s == "string" ? /* @__PURE__ */ e(l, { bold: !0, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
-    i
-  ] }) }) : /* @__PURE__ */ e(a, {});
+  const { isDesktop: t } = m();
+  return o ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ a(
+    p,
+    {
+      direction: t ? "horizontal" : "vertical",
+      primaryAlign: "space-between",
+      secondaryAlign: "center",
+      children: [
+        typeof s == "string" ? /* @__PURE__ */ e(l, { bold: !0, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
+        i
+      ]
+    }
+  ) }) : /* @__PURE__ */ e(c, {});
 };
 export {
   v as AlertBanner

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

@@ -1,36 +1,30 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { r as t, s } from "../../react.esm-BBemCHUU.js";
-import { u as i } from "../../useBreakpoint-DROHPVxO.js";
+import { a as t, s } from "../../react.esm-DoZanrUz.js";
+import { a as l } from "../../useBreakpoint-2MH8ICuE.js";
 import { AlertBanner as n } from "./AlertBanner.js";
-import { d as c, b as u, t as r, g as l, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { d as c, b as p, t as r, g as o, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
 c("AlertBanner Test", () => {
-  u(() => {
-    a.spyOn(i, "useBreakpoints").mockReturnValue({
-      isXs: !1,
-      isSm: !1,
-      isMd: !1,
-      isLg: !0,
-      isXlg: !0,
-      active: "lg"
+  p(() => {
+    a.spyOn(l, "useBreakpoints").mockReturnValue({
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0
     });
   }), r("render AlertBanner with text", () => {
-    t(/* @__PURE__ */ e(n, { text: "Test" })), l(s.getByText("Test")).toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: "Test" })), o(s.getByText("Test")).toBeInTheDocument();
   }), r("render AlertBanner with element", () => {
-    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), l(s.getByText("Element")).toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), o(s.getByText("Element")).toBeInTheDocument();
   }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
-    a.spyOn(i, "useBreakpoints").mockReturnValue({
-      isXs: !1,
-      isSm: !0,
-      isMd: !1,
-      isLg: !1,
-      isXlg: !1,
-      active: "sm"
+    a.spyOn(l, "useBreakpoints").mockReturnValue({
+      isMobile: !0,
+      isTablet: !1,
+      isDesktop: !1
     }), t(/* @__PURE__ */ e(n, { text: "Test" }));
-    const o = s.getByText("Test").closest(".lmnt.lmnt-group");
-    l(o).toHaveStyle(
+    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;"
     );
   }), r("renders nothing when isOpen is false", () => {
-    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), l(s.queryByText("Test")).not.toBeInTheDocument();
+    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), o(s.queryByText("Test")).not.toBeInTheDocument();
   });
 });

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LinkProps } from '../../types/internal/ReactRouterTypes';
 import { BaseListElement } from '../../types/ListElement';
+import { LinkProps } from '../../types/internal/ReactRouterTypes';
 type BaseViewProps = {
     /**
      * elements to be displayed in the list area

package/dist/components/BaseView/BaseView.js

@@ -1,65 +1,67 @@
 import "../../assets/BaseView.css";
-import { jsx as t, Fragment as k, jsxs as e } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { EmptyView as y } from "../EmptyView/EmptyView.js";
-import { ListArea as A } from "../ListArea/ListArea.js";
-import { VerticalDivider as H } from "../VerticalDivider/VerticalDivider.js";
-import { a as L } from "../../useBreakpoint-DROHPVxO.js";
-import { Grid as V, GridRow as W, GridCol as a, Group as m } from "@element/react-components";
-import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
-const _ = "_divider_anyyu_1", j = {
-  divider: _
-}, z = ({
-  action: d,
-  heading: c,
+import { jsx as e, Fragment as w, jsxs as i } from "react/jsx-runtime";
+import { Grid as x, GridRow as A, GridCol as a, Group as u } from "@element/react-components";
+import { useMemo as l } from "react";
+import { BasicHeading as m } from "../BasicHeading/BasicHeading.js";
+import { EmptyView as D } from "../EmptyView/EmptyView.js";
+import { ListArea as H } from "../ListArea/ListArea.js";
+import { VerticalDivider as N } from "../VerticalDivider/VerticalDivider.js";
+import { u as V } from "../../useBreakpoint-2MH8ICuE.js";
+const W = "_divider_12ecr_1", j = "_truncate_12ecr_5", p = {
+  divider: W,
+  truncate: j
+}, J = ({
+  action: c,
+  heading: d,
   elements: o,
   emptyText: s,
-  hasSearch: p = !0,
-  isSorted: h = !0,
-  className: f,
-  withAvatar: v = !1,
-  listMaxHeight: g = "calc(100vh - 200px)",
-  pathname: l,
-  routerLinkElement: C,
-  searchPlaceholder: B
+  hasSearch: h = !0,
+  isSorted: f = !0,
+  className: v,
+  withAvatar: g = !1,
+  listMaxHeight: C = "calc(100vh - 200px)",
+  pathname: n,
+  routerLinkElement: B,
+  searchPlaceholder: _
 }) => {
-  const { isLg: r, isXs: G } = L(), i = n(() => o.find((x) => x.route === l), [l, o]), b = n(() => i?.component ?? (r ? /* @__PURE__ */ t(y, { subtitle: s }) : /* @__PURE__ */ t(k, {})), [i, r, s]), w = n(() => r ? !0 : !i, [i, r]);
-  return /* @__PURE__ */ t(V, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(W, { children: [
-    w && /* @__PURE__ */ e(a, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
-      /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, gap: G ? "dense" : "standard", children: [
-        c && /* @__PURE__ */ t(u, { heading: c, level: 4, marginBottom: 0, children: d }),
-        /* @__PURE__ */ t(
-          A,
-          {
-            elements: o,
-            hasSearch: p,
-            maxHeight: g,
-            isSorted: h,
-            pathname: l,
-            routerLinkElement: C,
-            searchPlaceholder: B
-          }
-        )
-      ] }),
-      r && /* @__PURE__ */ t(H, { className: j.divider, height: "100%" })
-    ] }),
-    /* @__PURE__ */ t(a, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, children: [
-      /* @__PURE__ */ t(
-        u,
+  const { isDesktop: r } = V(), t = l(() => o.find((k) => k.route === n), [n, o]), G = l(() => t?.component ?? (r ? /* @__PURE__ */ e(D, { subtitle: s }) : /* @__PURE__ */ e(w, {})), [t, r, s]), b = l(() => r ? !0 : !t, [t, r]);
+  return /* @__PURE__ */ e(x, { className: v ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ i(A, { children: [
+    b && /* @__PURE__ */ e(a, { desktopCol: 3, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ i(u, { direction: "vertical", fullWidth: !0, gap: r ? "standard" : "dense", children: [
+      d && /* @__PURE__ */ e(m, { heading: d, level: 4, marginBottom: 0, children: c }),
+      /* @__PURE__ */ e(
+        H,
         {
-          heading: i?.detailTitle ?? i?.title ?? "",
-          level: 4,
-          icon: i?.hideIconInDetail === !0 ? void 0 : i?.icon,
-          marginBottom: 0,
-          invisibleButton: i?.detailAction === void 0,
-          withAvatar: v,
-          children: i?.detailAction ?? d
+          elements: o,
+          hasSearch: h,
+          maxHeight: C,
+          isSorted: f,
+          pathname: n,
+          routerLinkElement: B,
+          searchPlaceholder: _
         }
-      ),
-      b
-    ] }) })
+      )
+    ] }) }),
+    /* @__PURE__ */ i(a, { desktopCol: 9, tabletCol: 12, phoneCol: 12, children: [
+      r && /* @__PURE__ */ e(N, { className: p.divider, height: "100%" }),
+      /* @__PURE__ */ i(u, { direction: "vertical", fullWidth: !0, children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            className: p.truncate,
+            heading: t?.detailTitle ?? t?.title ?? "",
+            level: 4,
+            icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
+            marginBottom: 0,
+            invisibleButton: t?.detailAction === void 0,
+            withAvatar: g,
+            children: t?.detailAction ?? c
+          }
+        ),
+        G
+      ] })
+    ] })
   ] }) });
 };
 export {
-  z as BaseView
+  J as BaseView
 };

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

@@ -1,17 +1,14 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { u as l } from "../../useBreakpoint-DROHPVxO.js";
-import { BaseView as r } from "./BaseView.js";
-import { r as i, s as e, f as p } from "../../react.esm-BBemCHUU.js";
+import { a as r, s as e, f as p } from "../../react.esm-DoZanrUz.js";
+import { a as l } from "../../useBreakpoint-2MH8ICuE.js";
+import { BaseView as i } from "./BaseView.js";
 import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
 u("BaseView Test", () => {
   m(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
-      isXs: !1,
-      isSm: !1,
-      isMd: !1,
-      isLg: !0,
-      isXlg: !0,
-      active: "lg"
+      isMobile: !1,
+      isTablet: !1,
+      isDesktop: !0
     });
   });
   const o = [
@@ -40,9 +37,9 @@ u("BaseView Test", () => {
     }
   ];
   n("render BaseView with empty view and navigation list", () => {
-    i(
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile",
           elements: o,
@@ -55,9 +52,9 @@ u("BaseView Test", () => {
       )
     ), t(e.getByText("user.noselection")).toBeInTheDocument(), t(e.getByText("user.personal-profile")).toBeInTheDocument(), t(e.getByText("user.personal_information")).toBeInTheDocument(), t(e.getByText("user.data_privacy")).toBeInTheDocument(), t(e.getByText("user.security")).toBeInTheDocument();
   }), n("render BaseView with data and navigation list", () => {
-    i(
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/personal-information",
           elements: o,
@@ -70,9 +67,9 @@ u("BaseView Test", () => {
       )
     ), t(e.getByText("Personal information selected")).toBeInTheDocument(), t(e.getAllByText("account_circle")).toHaveLength(2), t(e.getAllByText("user.personal_information")).toHaveLength(2);
   }), n("render BaseView with custom detail title and no detail icon", () => {
-    i(
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
           elements: o,
@@ -86,15 +83,12 @@ u("BaseView Test", () => {
     ), t(e.getByText("Data Privacy selected")).toBeInTheDocument(), t(e.getByText("Data Privacy 2000")).toBeInTheDocument(), t(e.getAllByText("privacy_tip")).toHaveLength(1), t(e.getAllByText("user.data_privacy")).toHaveLength(1);
   }), n("hide empty view when screen is small", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
-      isXs: !1,
-      isSm: !0,
-      isMd: !1,
-      isLg: !1,
-      isXlg: !1,
-      active: "sm"
-    }), i(
+      isMobile: !0,
+      isTablet: !1,
+      isDesktop: !1
+    }), r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
           elements: o,
@@ -107,9 +101,9 @@ u("BaseView Test", () => {
       )
     ), t(e.queryByText("user.noselection")).not.toBeInTheDocument();
   }), n("render BaseView with selected detail section", () => {
-    i(
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
           elements: o,

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,69 +1,76 @@
 import "../../assets/BasicHeading.css";
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { TypoDisplay as C, TypoBody as w, Icon as y } from "@element/react-components";
-import { a as u } from "../../useBreakpoint-DROHPVxO.js";
-import { Iconify as I } from "../Iconify/Iconify.js";
-import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
-const N = "_pageHeader_fwns1_1", H = "_headlineContainer_fwns1_11", b = "_actionButtonContainer_fwns1_16", A = "_content_fwns1_25", W = "_leadingIcon_fwns1_31", $ = "_headingWrapper_fwns1_38", x = "_headingContainer_fwns1_43", T = "_invisible_fwns1_48", j = "_withAvatar_fwns1_52", z = "_iconContainer_fwns1_57", n = {
-  pageHeader: N,
-  headlineContainer: H,
-  actionButtonContainer: b,
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { TypoDisplay as C, TypoBody as w, Icon as u } from "@element/react-components";
+import { Iconify as y } from "../Iconify/Iconify.js";
+import { AvailableCustomIcons as I } from "../../enums/AvailableCustomIcons.js";
+import { u as B } from "../../useBreakpoint-2MH8ICuE.js";
+import { OverflowTooltip as N } from "../OverflowTooltip/OverflowTooltip.js";
+const H = "_pageHeader_fwns1_1", b = "_headlineContainer_fwns1_11", x = "_actionButtonContainer_fwns1_16", A = "_content_fwns1_25", T = "_leadingIcon_fwns1_31", W = "_headingWrapper_fwns1_38", $ = "_headingContainer_fwns1_43", j = "_invisible_fwns1_48", k = "_withAvatar_fwns1_52", z = "_iconContainer_fwns1_57", n = {
+  pageHeader: H,
+  headlineContainer: b,
+  actionButtonContainer: x,
   content: A,
-  leadingIcon: W,
-  headingWrapper: $,
-  headingContainer: x,
-  invisible: T,
-  withAvatar: j,
+  leadingIcon: T,
+  headingWrapper: W,
+  headingContainer: $,
+  invisible: j,
+  withAvatar: k,
   iconContainer: z
-}, L = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in B ? /* @__PURE__ */ i(
-  I,
+}, D = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ t("div", { className: n.iconContainer, children: e }) : e in I ? /* @__PURE__ */ t(
+  y,
   {
     icon: e,
     className: n.leadingIcon,
     iconSize: "large",
     iconType: "filled"
   }
-) : /* @__PURE__ */ i(y, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, q = ({
+) : /* @__PURE__ */ t(u, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, E = ({
   children: e,
-  marginBottom: a,
-  heading: l,
+  marginBottom: i,
+  heading: a,
   icon: d,
   className: p,
-  subHeading: o,
+  subHeading: r,
   subHeadingLevel: _ = 2,
   invisibleButton: f = !1,
-  level: r = 4,
-  fontWeight: s = 400,
-  withAvatar: g = !1
+  level: s = 4,
+  fontWeight: c = 400,
+  withAvatar: m = !1
 }) => {
-  const { isLg: c } = u(), h = c ? r : r + 1, m = s === "bold" ? 500 : s, v = () => {
-    if (a !== void 0)
-      return typeof a == "number" ? `${a}px` : "2rem";
+  const { isDesktop: l } = B(), h = l ? s : s + 1, g = c === "bold" ? 500 : c, v = () => {
+    if (i !== void 0)
+      return typeof i == "number" ? `${i}px` : "2rem";
   };
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(
     "div",
     {
       className: n.pageHeader,
       style: { marginBottom: v() },
       "data-testid": "HeaderContainer",
       children: [
-        /* @__PURE__ */ t("div", { className: `${g && c ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
-          /* @__PURE__ */ i(L, { icon: d }),
-          /* @__PURE__ */ t("div", { className: o ? n.headingContainer : "", children: [
-            /* @__PURE__ */ i(
-              C,
-              {
-                level: h,
-                "data-testid": "Header",
-                className: p ?? "",
-                style: { fontWeight: m },
-                children: l
-              }
-            ),
-            /* @__PURE__ */ i(w, { level: _, children: o })
-          ] })
-        ] }),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: `${m && l ? n.withAvatar : ""} ${n.headingWrapper}`,
+            children: [
+              /* @__PURE__ */ t(D, { icon: d }),
+              /* @__PURE__ */ o("div", { className: r ? n.headingContainer : "", children: [
+                /* @__PURE__ */ t(N, { id: a, text: a, children: /* @__PURE__ */ t(
+                  C,
+                  {
+                    level: h,
+                    "data-testid": "Header",
+                    className: p ?? "",
+                    style: { fontWeight: g },
+                    children: a
+                  }
+                ) }),
+                /* @__PURE__ */ t(w, { level: _, children: r })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
           "div",
           {
             className: `${n.actionButtonContainer} ${f && n.invisible}`,
@@ -76,5 +83,5 @@ const N = "_pageHeader_fwns1_1", H = "_headlineContainer_fwns1_11", b = "_action
   );
 };
 export {
-  q as BasicHeading
+  E as BasicHeading
 };

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

@@ -1,7 +1,7 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
 import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
-import { r as i, s as n } from "../../react.esm-BBemCHUU.js";
+import { a as i, s as n } from "../../react.esm-DoZanrUz.js";
 import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {

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

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
-import { r as s, s as o, f as n } from "../../react.esm-BBemCHUU.js";
-import { BlockView as r } from "./BlockView.js";
-import { d as B, v as a, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+import { a as s, s as o, f as n } from "../../react.esm-DoZanrUz.js";
+import { BlockView as i } from "./BlockView.js";
+import { d as B, v as a, t as r, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 B("BlockView Test", () => {
   const c = a.fn(), e = {
     id: "1",
@@ -11,10 +11,10 @@ B("BlockView Test", () => {
       column: 2
     }
   };
-  i("renders BlockView correctly with 2x3 blocks", () => {
+  r("renders BlockView correctly with 2x3 blocks", () => {
     s(
       /* @__PURE__ */ l(
-        r,
+        i,
         {
           blocks: [e],
           columns: 2,
@@ -27,10 +27,10 @@ B("BlockView Test", () => {
     ), t(o.getByText("Layout")).toBeInTheDocument(), t(o.getByText("6 Block")).toBeInTheDocument();
     const k = o.getAllByTestId("blockViewBlock");
     t(k.length).toBe(6);
-  }), i("executes onClick method", () => {
+  }), r("executes onClick method", () => {
     s(
       /* @__PURE__ */ l(
-        r,
+        i,
         {
           blocks: [e],
           columns: 2,

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

@@ -1,19 +1,19 @@
-import { jsx as m } from "react/jsx-runtime";
-import { r as d, s as n, f as o, w as a } from "../../react.esm-BBemCHUU.js";
+import { jsx as r } from "react/jsx-runtime";
+import { a as d, s as n, f as o, w as a } from "../../react.esm-DoZanrUz.js";
 import { ContextMenu as u } from "./ContextMenu.js";
-import { v as r, d as g, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-const T = r.fn(), l = r.fn(), i = r.fn(), p = [
+import { v as m, d as g, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+const T = m.fn(), l = m.fn(), i = m.fn(), p = [
   { primaryText: "Open", onClick: T, leadingBlock: "add" },
   { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },
   { primaryText: "Edit", onClick: l, leadingBlock: "edit" }
 ];
 g("ContextMenu Test", () => {
   B("render contextMenu and close it", () => {
-    d(/* @__PURE__ */ m(u, { actions: p }));
+    d(/* @__PURE__ */ r(u, { actions: p }));
     const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
     e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open")), o.click(c), a(() => e(t).not.toHaveClass("mdc-menu-surface--open"));
   }), B("render ContextMenu and open it", async () => {
-    d(/* @__PURE__ */ m(u, { actions: p, triggerOpen: !0 }));
+    d(/* @__PURE__ */ r(u, { actions: p, triggerOpen: !0 }));
     const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
     e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open"));
     const s = n.getAllByTestId("listItemButton");