@hortiview/shared-components 0.0.6890 → 0.0.6927

package/dist/ListAreaService-CiewPvfR.js

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

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._divider_12ecr_1{margin:0 2rem}._truncate_12ecr_5{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
+._divider_1513z_1{margin:0 2rem}._truncate_1513z_5{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}._desktopList_1513z_13{width:30%}._mobileList_1513z_17{width:100%}._desktopDetail_1513z_21{width:70%}._mobileDetail_1513z_25{width:100%}

package/dist/assets/BasicHeading.css

@@ -1 +1 @@
-._pageHeader_fwns1_1{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;margin-bottom:1rem;align-self:end}._headlineContainer_fwns1_11,._actionButtonContainer_fwns1_16{display:flex;align-items:center}._actionButtonContainer_fwns1_16>button{max-height:48px}._content_fwns1_25{display:flex;justify-content:space-between;gap:1.5rem}._leadingIcon_fwns1_31{margin-right:.8rem}._headingWrapper_fwns1_38{display:flex;align-items:center}._headingContainer_fwns1_43{display:flex;flex-direction:column}._invisible_fwns1_48{visibility:hidden}._withAvatar_fwns1_52{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_fwns1_52>._iconContainer_fwns1_57{scale:1.1}._iconContainer_fwns1_57{padding-right:.5rem}
+._pageHeader_gwnjc_1{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;margin-bottom:1rem;align-self:end}._headlineContainer_gwnjc_11,._actionButtonContainer_gwnjc_16{display:flex;align-items:center}._actionButtonContainer_gwnjc_16>button{max-height:48px}._content_gwnjc_25{display:flex;justify-content:space-between;gap:1.5rem}._leadingIcon_gwnjc_31{margin-right:.8rem}._headingWrapper_gwnjc_35{display:flex;align-items:center}._headingContainer_gwnjc_40{display:flex;flex-direction:column}._invisible_gwnjc_45{visibility:hidden}._withAvatar_gwnjc_49{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_gwnjc_49>._iconContainer_gwnjc_54{scale:1.1}._iconContainer_gwnjc_54{padding-right:.5rem}

package/dist/assets/ListAreaService.css

@@ -1 +1 @@
-._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}
+._fullWidth_x5yt7_1{width:100%}._mainElevation_x5yt7_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_x5yt7_11 div{border:none}._searchbar_x5yt7_11 button{margin-right:.5rem}._roundedBottom_x5yt7_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_x5yt7_24 [class*=mdc-list-item__primary-text]{display:none!important}._list_x5yt7_28{padding-top:0;padding-bottom:0;overflow-y:auto}._list_x5yt7_28 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_x5yt7_28::-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_x5yt7_28::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_x5yt7_28::-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_x5yt7_56{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_x5yt7_56 i:not(._trailingIcon_x5yt7_60){color:var(--lmnt-theme-on-surface-inactive)}._listItem_x5yt7_56 i._trailingIcon_x5yt7_60{color:var(--lmnt-theme-on-surface-disabled)}._listItem_x5yt7_56 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_x5yt7_72{height:4.5rem!important}._iconColor_x5yt7_76{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_x5yt7_80 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._truncate_x5yt7_85{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%}._truncateOverlineText_x5yt7_94{margin-bottom:-1rem!important;margin-top:-1rem!important}

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,7 +1,7 @@
 import "../../assets/AlertBanner.css";
 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 { u as m } from "../../useBreakpoint-2MH8ICuE.js";
+import { u as m } from "../../useBreakpoint-BNeVhjjZ.js";
 const d = "_messageContainer_1kpsp_1", _ = "_info_1kpsp_9", g = "_danger_1kpsp_14", u = "_success_1kpsp_19", n = {
   messageContainer: d,
   info: _,

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

@@ -1,6 +1,6 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-DoZanrUz.js";
-import { a as l } from "../../useBreakpoint-2MH8ICuE.js";
+import { a as l } from "../../useBreakpoint-BNeVhjjZ.js";
 import { AlertBanner as n } from "./AlertBanner.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", () => {

package/dist/components/BaseView/BaseView.js

@@ -1,67 +1,71 @@
 import "../../assets/BaseView.css";
-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 = ({
+import { jsx as i, Fragment as z, jsxs as s } from "react/jsx-runtime";
+import { Group as r } from "@element/react-components";
+import { useMemo as n } from "react";
+import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
+import { EmptyView as B } from "../EmptyView/EmptyView.js";
+import { ListArea as N } from "../ListArea/ListArea.js";
+import { VerticalDivider as x } from "../VerticalDivider/VerticalDivider.js";
+import { u as A } from "../../useBreakpoint-BNeVhjjZ.js";
+const V = "_divider_1513z_1", W = "_truncate_1513z_5", j = "_desktopList_1513z_13", E = "_mobileList_1513z_17", H = "_desktopDetail_1513z_21", I = "_mobileDetail_1513z_25", o = {
+  divider: V,
+  truncate: W,
+  desktopList: j,
+  mobileList: E,
+  desktopDetail: H,
+  mobileDetail: I
+}, Q = ({
   action: c,
   heading: d,
-  elements: o,
-  emptyText: s,
-  hasSearch: h = !0,
-  isSorted: f = !0,
+  elements: l,
+  emptyText: m,
+  hasSearch: p = !0,
+  isSorted: _ = !0,
   className: v,
-  withAvatar: g = !1,
-  listMaxHeight: C = "calc(100vh - 200px)",
-  pathname: n,
-  routerLinkElement: B,
-  searchPlaceholder: _
+  withAvatar: f = !1,
+  listMaxHeight: h = "calc(100vh - 200px)",
+  pathname: a,
+  routerLinkElement: D,
+  searchPlaceholder: b
 }) => {
-  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,
+  const { isDesktopNavbar: e } = A(), t = n(() => l.find((w) => w.route === a), [a, l]), g = n(() => t?.component ?? (e ? /* @__PURE__ */ i(B, { subtitle: m }) : /* @__PURE__ */ i(z, {})), [t, e, m]), k = n(() => e ? !0 : !t, [t, e]), L = n(() => e ? !0 : t, [t, e]);
+  return /* @__PURE__ */ s(r, { className: v ?? "", gap: "", fullWidth: !0, children: [
+    k && /* @__PURE__ */ i(r, { gap: "none", className: e ? o.desktopList : o.mobileList, children: /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, gap: e ? "standard" : "dense", children: [
+      d && /* @__PURE__ */ i(u, { heading: d, level: 4, marginBottom: 0, children: c }),
+      /* @__PURE__ */ i(
+        N,
         {
-          elements: o,
-          hasSearch: h,
-          maxHeight: C,
-          isSorted: f,
-          pathname: n,
-          routerLinkElement: B,
-          searchPlaceholder: _
+          elements: l,
+          hasSearch: p,
+          maxHeight: h,
+          isSorted: _,
+          pathname: a,
+          routerLinkElement: D,
+          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,
+    L && /* @__PURE__ */ s(r, { gap: "none", className: e ? o.desktopDetail : o.mobileDetail, children: [
+      e && /* @__PURE__ */ i(x, { className: o.divider, height: "100%" }),
+      /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
+        /* @__PURE__ */ i(
+          u,
           {
-            className: p.truncate,
+            className: o.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,
+            withAvatar: f,
             children: t?.detailAction ?? c
           }
         ),
-        G
+        g
       ] })
     ] })
-  ] }) });
+  ] });
 };
 export {
-  J as BaseView
+  Q as BaseView
 };

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

@@ -1,6 +1,6 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
 import { a as r, s as e, f as p } from "../../react.esm-DoZanrUz.js";
-import { a as l } from "../../useBreakpoint-2MH8ICuE.js";
+import { a as l } from "../../useBreakpoint-BNeVhjjZ.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", () => {
@@ -8,7 +8,8 @@ u("BaseView Test", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
-      isDesktop: !0
+      isDesktop: !1,
+      isDesktopNavbar: !0
     });
   });
   const o = [
@@ -85,7 +86,8 @@ u("BaseView Test", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
-      isDesktop: !1
+      isDesktop: !1,
+      isDesktopNavbar: !1
     }), r(
       /* @__PURE__ */ a(
         i,

package/dist/components/BasicHeading/BasicHeading.js

@@ -2,21 +2,21 @@ import "../../assets/BasicHeading.css";
 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: T,
-  headingWrapper: W,
-  headingContainer: $,
-  invisible: j,
+import { AvailableCustomIcons as j } from "../../enums/AvailableCustomIcons.js";
+import { u as I } from "../../useBreakpoint-BNeVhjjZ.js";
+import { OverflowTooltip as B } from "../OverflowTooltip/OverflowTooltip.js";
+const N = "_pageHeader_gwnjc_1", H = "_headlineContainer_gwnjc_11", b = "_actionButtonContainer_gwnjc_16", x = "_content_gwnjc_25", A = "_leadingIcon_gwnjc_31", T = "_headingWrapper_gwnjc_35", W = "_headingContainer_gwnjc_40", $ = "_invisible_gwnjc_45", k = "_withAvatar_gwnjc_49", z = "_iconContainer_gwnjc_54", n = {
+  pageHeader: N,
+  headlineContainer: H,
+  actionButtonContainer: b,
+  content: x,
+  leadingIcon: A,
+  headingWrapper: T,
+  headingContainer: W,
+  invisible: $,
   withAvatar: k,
   iconContainer: z
-}, D = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ t("div", { className: n.iconContainer, children: e }) : e in I ? /* @__PURE__ */ t(
+}, D = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ t("div", { className: n.iconContainer, children: e }) : e in j ? /* @__PURE__ */ t(
   y,
   {
     icon: e,
@@ -31,13 +31,13 @@ const H = "_pageHeader_fwns1_1", b = "_headlineContainer_fwns1_11", x = "_action
   icon: d,
   className: p,
   subHeading: r,
-  subHeadingLevel: _ = 2,
-  invisibleButton: f = !1,
-  level: s = 4,
-  fontWeight: c = 400,
+  subHeadingLevel: g = 2,
+  invisibleButton: _ = !1,
+  level: c = 4,
+  fontWeight: s = 400,
   withAvatar: m = !1
 }) => {
-  const { isDesktop: l } = B(), h = l ? s : s + 1, g = c === "bold" ? 500 : c, v = () => {
+  const { isDesktop: l } = I(), h = l ? c : c + 1, f = s === "bold" ? 500 : s, v = () => {
     if (i !== void 0)
       return typeof i == "number" ? `${i}px` : "2rem";
   };
@@ -55,17 +55,17 @@ const H = "_pageHeader_fwns1_1", b = "_headlineContainer_fwns1_11", x = "_action
             children: [
               /* @__PURE__ */ t(D, { icon: d }),
               /* @__PURE__ */ o("div", { className: r ? n.headingContainer : "", children: [
-                /* @__PURE__ */ t(N, { id: a, text: a, children: /* @__PURE__ */ t(
+                /* @__PURE__ */ t(B, { id: a, text: a, children: /* @__PURE__ */ t(
                   C,
                   {
                     level: h,
                     "data-testid": "Header",
                     className: p ?? "",
-                    style: { fontWeight: g },
+                    style: { fontWeight: f },
                     children: a
                   }
                 ) }),
-                /* @__PURE__ */ t(w, { level: _, children: r })
+                /* @__PURE__ */ t(w, { level: g, children: r })
               ] })
             ]
           }
@@ -73,7 +73,7 @@ const H = "_pageHeader_fwns1_1", b = "_headlineContainer_fwns1_11", x = "_action
         /* @__PURE__ */ t(
           "div",
           {
-            className: `${n.actionButtonContainer} ${f && n.invisible}`,
+            className: `${n.actionButtonContainer} ${_ && n.invisible}`,
             "data-testid": "RightPart",
             children: e
           }

package/dist/components/HashTabView/HashTabView.js

@@ -2,7 +2,7 @@ import "../../assets/HashTabView.css";
 import { jsx as a, jsxs as d, Fragment as T } from "react/jsx-runtime";
 import { Elevation as C, Group as i, TabBar as k, Tab as A, Padding as I } from "@element/react-components";
 import { useState as N, useEffect as P } from "react";
-import { u as x } from "../../useBreakpoint-2MH8ICuE.js";
+import { u as x } from "../../useBreakpoint-BNeVhjjZ.js";
 const y = "_elevation_16c7u_1", W = "_themeBackground_16c7u_6", $ = "_tabBar_16c7u_10", w = "_tabWrapper_16c7u_16", j = "_tabButton_16c7u_20", E = "_childContainer_16c7u_24", z = "_childContainerPhone_16c7u_28", t = {
   elevation: y,
   themeBackground: W,

package/dist/components/InfoGroup/InfoGroup.js

@@ -2,7 +2,7 @@ import "../../assets/InfoGroup.css";
 import { jsxs as c, jsx as e, Fragment as _ } from "react/jsx-runtime";
 import { Divider as d, Group as s, TypoCaption as v, TypoSubtitle as h } from "@element/react-components";
 import { Fragment as p } from "react";
-import { u as g } from "../../useBreakpoint-2MH8ICuE.js";
+import { u as g } from "../../useBreakpoint-BNeVhjjZ.js";
 import { VerticalDivider as b } from "../VerticalDivider/VerticalDivider.js";
 const f = "_container_egebs_1", C = "_dividerContainer_egebs_10", y = "_mainGroup_egebs_16", w = "_row_egebs_21", G = "_valueText_egebs_46", N = "_component_egebs_54", x = "_componentContainer_egebs_87", A = "_field_egebs_95", r = {
   container: f,

package/dist/components/ListArea/ListArea.js

@@ -4,7 +4,7 @@ import { g as Hr } from "../../_commonjsHelpers-CT_km90n.js";
 import { _ as H, a as Tr, b as wr, c as w, d as Nr, e as Wr, f as h, h as N, j as B, k as Xr, l as zr, m as I, n as Yr, o as Zr, p as Jr, q as W, r as Qr, s as Or, t as Pr, u as kr, v as Vr } from "../../get-BRDhkfK0.js";
 import { useState as re, useMemo as k } from "react";
 import { SearchBar as ee } from "../SearchBar/SearchBar.js";
-import { g as ae, a as te, s as T } from "../../ListAreaService-DDlsV9UD.js";
+import { g as ae, a as te, s as T } from "../../ListAreaService-CiewPvfR.js";
 var ne = H;
 function se() {
   this.__data__ = new ne(), this.size = 0;

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

@@ -2,7 +2,7 @@ import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { TypoButton as p } from "@element/react-components";
 import { a as s, s as a, f as u } from "../../react.esm-DoZanrUz.js";
 import { ListArea as c } from "./ListArea.js";
-import { g as h } from "../../ListAreaService-DDlsV9UD.js";
+import { g as h } from "../../ListAreaService-CiewPvfR.js";
 import { d as m, t as n, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 m("ListArea Test", () => {
   const o = [

package/dist/components/ListArea/ListAreaService.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "@element/react-components";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as s, a as i, m as a } from "../../ListAreaService-DDlsV9UD.js";
+import { g as s, a as i, m as a } from "../../ListAreaService-CiewPvfR.js";
 export {
   s as getGroupedItems,
   i as getListedItems,

package/dist/hooks/useBreakpoint.d.ts

@@ -7,14 +7,21 @@
  * - xl: 1024-1439px
  * - xxl: 1440px and up
  *
+ * Additional breakpoints considering the navbar width
+ * - lg-nav: (840 + 256) - (1023 + 256)px
+ * - xl-nav: (1024 + 256) - (1439 + 256)px
+ * - xxl-nav: (1440 + 256)px and up
+ *
  * They are combined as follows:
  * - isMobile: xs
  * - isTablet: sm, md
  * - isDesktop: lg, xl, xxl
+ * - isDesktopNavbar: lg-nav, xl-nav, xxl-nav
  * @returns {Object} An object with the current breakpoint
  */
-export declare const useBreakpoints: () => {
+export declare const useBreakpoints: (navBarWidth?: number) => {
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
+    isDesktopNavbar: boolean;
 };

package/dist/hooks/useBreakpoint.js

@@ -1,5 +1,5 @@
 import "react";
-import { u as p } from "../useBreakpoint-2MH8ICuE.js";
+import { u as p } from "../useBreakpoint-BNeVhjjZ.js";
 export {
   p as useBreakpoints
 };

package/dist/hooks/useBreakpoints.test.js

@@ -1,5 +1,5 @@
 import { r as t, w as s } from "../react.esm-DoZanrUz.js";
-import { u as o } from "../useBreakpoint-2MH8ICuE.js";
+import { u as o } from "../useBreakpoint-BNeVhjjZ.js";
 import { d as a, t as i, g as r } from "../vi.JYQecGiw-BbUbJcT8.js";
 a("useBreakpoint Test", () => {
   i("returns object", () => {

package/dist/main.js

@@ -24,7 +24,7 @@ import { FormSelect as N } from "./components/FormComponents/FormSelect/FormSele
 import { FormSlider as Q } from "./components/FormComponents/FormSlider/FormSlider.js";
 import { FormText as W } from "./components/FormComponents/FormText/FormText.js";
 import { AvailableCustomIcons as _ } from "./enums/AvailableCustomIcons.js";
-import { u as rr } from "./useBreakpoint-2MH8ICuE.js";
+import { u as rr } from "./useBreakpoint-BNeVhjjZ.js";
 import { capitalizeFirstLetters as er } from "./services/UtilService.js";
 export {
   t as AlertBanner,

package/dist/useBreakpoint-BNeVhjjZ.js

@@ -0,0 +1,33 @@
+import { useState as p, useEffect as r } from "react";
+const t = (s) => {
+  const [a, i] = p(!1);
+  return r(
+    () => {
+      const e = window.matchMedia(s);
+      i(e.matches);
+      const n = (o) => i(o.matches);
+      return e.addEventListener("change", n), () => e.removeEventListener("change", n);
+    },
+    []
+    // Empty array ensures effect is only run on mount and unmount
+  ), a;
+}, h = (s = 256) => {
+  const a = t("(max-width: 599px)"), i = t("(min-width: 600px) and (max-width: 719px)"), e = t("(min-width: 720px) and (max-width: 839px)"), n = t("(min-width: 840px) and (max-width: 1023px)"), o = t("(min-width: 1024px) and (max-width: 1439px)"), d = t("(min-width: 1440px)"), c = t(
+    `(min-width: ${840 + s}px) and (max-width: ${1023 + s}px)`
+  ), x = t(
+    `(min-width: ${1024 + s}px) and (max-width: ${1439 + s}px)`
+  ), m = t(`(min-width: ${1440 + s}px)`);
+  return {
+    isMobile: a,
+    isTablet: i || e,
+    isDesktop: n || o || d,
+    isDesktopNavbar: c || x || m
+  };
+}, u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  useBreakpoints: h
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  u as a,
+  h as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.6890",
+  "version": "0.0.6927",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/ListAreaService-DDlsV9UD.js

@@ -1,100 +0,0 @@
-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/useBreakpoint-2MH8ICuE.js

@@ -1,28 +0,0 @@
-import { useState as d, useEffect as c } from "react";
-const t = (i) => {
-  const [a, s] = d(!1);
-  return c(
-    () => {
-      const e = window.matchMedia(i);
-      s(e.matches);
-      const n = (o) => s(o.matches);
-      return e.addEventListener("change", n), () => e.removeEventListener("change", n);
-    },
-    []
-    // Empty array ensures effect is only run on mount and unmount
-  ), a;
-}, r = () => {
-  const i = t("(max-width: 599px)"), a = t("(min-width: 600px) and (max-width: 719px)"), s = t("(min-width: 720px) and (max-width: 839px)"), e = t("(min-width: 840px) and (max-width: 1023px)"), n = t("(min-width: 1024px) and (max-width: 1439px)"), o = t("(min-width: 1440px)");
-  return {
-    isMobile: i,
-    isTablet: a || s,
-    isDesktop: e || n || o
-  };
-}, m = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  useBreakpoints: r
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  m as a,
-  r as u
-};