@hortiview/shared-components 0.0.11176 → 0.0.11528

package/README.md

@@ -13,7 +13,7 @@ This is a shared component library. It should used in the HortiView platform and
 This library is based in Bayers element component library. To use it properly you need to install this package first.
 To get access to this restricted package please contact your Bayer contact person.
 
-After you gain access use `yarn add @element/react-components @element/themes` or `npm i @element/react-components @element/themes` to add the package to your solution.
+After you gain access use `yarn add @element-public/react-components @element-public/themes` or `npm i @element-public/react-components @element-public/themes` to add the package to your solution.
 
 ## Remarks
 
@@ -33,11 +33,11 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
 1. [Filter](#filter)
-1. [FormattedNumberDisplay] (#formattednumberdisplay)
+1. [FormattedNumberDisplay](#formattednumberdisplay)
 1. [FormComponents](#formcomponents)
    1. [FormCheckBox](#formcheckbox)
    1. [FormDatePicker](#formdatepicker)
-   1. [FormNumber] (#formnumber)
+   1. [FormNumber](#formnumber)
    1. [FormRadio](#formradio)
    1. [FormSelect](#formselect)
    1. [FormSlider](#formslider)
@@ -54,6 +54,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [OverflowTooltip](#overflowtooltip)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
+1. [Select](#select)
 1. [VerticalDivider](#verticaldivider)
 
 ## Available Utility Functions:
@@ -311,7 +312,7 @@ const TypoDisplay3 = (props: { children: React.ReactNode }) => {
   return <TypoDisplay level={3}>{props.children}</TypoDisplay>;
 };
 
-<FormattedNumberDisplay typographyComponent={TypoDisplay3} languageCode="en-MX" value={12345.67} />;
+<FormattedNumberDisplay typographyComponent={TypoDisplay3} languageCode='en-MX' value={12345.67} />;
 ```
 
 ### FormComponents
@@ -439,7 +440,9 @@ const { handleSubmit } = formMethods;
 
 #### FormSelect
 
-Provides a select form component
+Provides a select form component.
+
+> **Warning**: Don't set `menuPosition` when `hoisted` is true.
 
 ```jsx
 import { FormSelect } from '@hortiview/shared-components';
@@ -843,7 +846,7 @@ return <>
 
 ### Modal
 
-Provides the normal elements modal with one additional change. If you are on fullscreen modal size the max-height and max-width is set to 100svh/svw (Smallest ViewPort height/width).
+Provides the normal Element modal with one additional change. If you are on fullscreen modal size the max-height and max-width is set to 100svh/svw (Smallest ViewPort height/width).
 This will set the modal size on an area between the mobile controls.
 
 ```jsx
@@ -860,7 +863,7 @@ Provides a tooltip and overflow behavior of a given text value.
 
 ```jsx
 import { OverflowTooltip } from '@hortiview/shared-components';
-import { TypoBody } from '@element/react-components';
+import { TypoBody } from '@element-public/react-components';
 
 const longText =
   'This is a very long text that needs to be truncated and shown with a tooltip when it overflows.';
@@ -904,6 +907,34 @@ const [searchValue, setSearchValue] = useState('');
 />;
 ```
 
+### Select
+
+Provides the normal Element select with some additional presets and props:
+
+- `menuMaxHeight` has a default value of `15rem` (can be overwritten)
+- custom styles are applied that improve the `hoisted` select menu behavior and avoid two scrolling bars on multi select menus
+- custom portal styles can be passed via the `portalClassName` prop - only works when `portalContainer` is not set
+
+> **Warning**: Don't set `menuPosition` when `hoisted` is true.
+
+```jsx
+import { Select } from '@hortiview/shared-components';
+...
+
+<Select
+  label='Contact during review'
+  options={contacts}
+  hoisted
+  textKey='text'
+  valueKey='id'
+  onChange={handleContactSelect}
+  value={contact}
+  helperText='required'
+  variant='outlined'
+  portalClassName={styles.portal}
+/>;
+```
+
 ### VerticalDivider
 
 Provides a simple vertical divider.
@@ -975,5 +1006,7 @@ Note: Should only be used for displaying numbers, not for calculations or values
 ```typescript
 const userLocale = 'es-MX';
 
-const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t('squaremeter-unit')}`;
+const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t(
+  'squaremeter-unit'
+)}`;
 ```

package/dist/BigLoadingSpinner-D7H28pr5.js

@@ -0,0 +1,16 @@
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { TypoBody as r } from "@element-public/react-components";
+import { Iconify as d } from "./components/Iconify/Iconify.js";
+import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", g = "_bigLoadSpinnerCard_7dxo1_12", s = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
+  loadingBigOverlay: e,
+  bigLoadSpinnerCard: g,
+  bigLoadSpinnerCardText: s,
+  logo: t
+}, 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 })
+] }), x = (a) => /* @__PURE__ */ i("div", { className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...a }) });
+export {
+  x as B,
+  o as s
+};

package/dist/{GenericCard-B8x1DMa8.js → GenericCard-jlt8ZsHi.js}

@@ -1,10 +1,9 @@
-import "./assets/GenericCard.css";
-import { jsx as r, jsxs as o, Fragment as C } from "react/jsx-runtime";
-import { Card as h, CardContent as m, CardBody as T, Grid as g, GridRow as u, GridCol as c, TypoSubtitle as f, CardTitle as x, CardDivider as v } from "@element/react-components";
-import { useMemo as w } from "react";
+import { jsx as r, jsxs as d, Fragment as C } from "react/jsx-runtime";
+import { Card as h, CardContent as T, CardBody as m, Grid as g, GridRow as v, GridCol as c, TypoSubtitle as y, CardTitle as x, CardDivider as w } from "@element-public/react-components";
+import { useMemo as b } from "react";
 import { OverflowTooltip as l } from "./components/OverflowTooltip/OverflowTooltip.js";
-const b = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0_10", $ = "_row_ny9m0_14", k = "_font_ny9m0_18", G = "_fontHeader_ny9m0_23", H = "_title_ny9m0_27", S = "_emptyContainer_ny9m0_33", A = "_empty_ny9m0_33", n = {
-  cardTitle: b,
+import './assets/GenericCard.css';const u = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0_10", $ = "_row_ny9m0_14", k = "_font_ny9m0_18", G = "_fontHeader_ny9m0_23", H = "_title_ny9m0_27", S = "_emptyContainer_ny9m0_33", A = "_empty_ny9m0_33", n = {
+  cardTitle: u,
   cardBody: B,
   cardContent: N,
   row: $,
@@ -18,18 +17,18 @@ const b = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0
   phoneCol: 2,
   tabletCol: 4,
   verticalAlign: "bottom"
-}, R = ({ item: e, columns: t, hiddenColumns: i }) => {
-  const d = t.find((a) => a.asCardTitle), y = t.find((a) => a.asCardSubtitle), p = w(
+}, O = ({ item: e, columns: t, hiddenColumns: i }) => {
+  const o = t.find((a) => a.asCardTitle), f = t.find((a) => a.asCardSubtitle), p = b(
     () => t.filter(
       (a) => !a.asCardTitle && !a.asCardSubtitle && a.id !== "actions"
     ),
     [t]
   );
-  return /* @__PURE__ */ r(h, { variant: "raised", "data-testid": `card${d ? "-" + e[d.accessor] : ""}`, children: /* @__PURE__ */ o(m, { className: n.cardContent, "data-testid": "card-content", children: [
-    /* @__PURE__ */ r(j, { item: e, titleColumn: d, subTitleColumn: y }),
-    /* @__PURE__ */ r(T, { className: n.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ r(g, { fullHeight: !0, fullWidth: !0, variant: "none", children: p.map((a) => i?.includes(a.id) ? null : /* @__PURE__ */ o(u, { className: n.row, "data-testid": "row", children: [
-      /* @__PURE__ */ r(c, { horizontalAlign: "right", ..._, children: /* @__PURE__ */ o(
-        f,
+  return /* @__PURE__ */ r(h, { variant: "raised", "data-testid": `card${o ? "-" + e[o.accessor] : ""}`, children: /* @__PURE__ */ d(T, { className: n.cardContent, "data-testid": "card-content", children: [
+    /* @__PURE__ */ r(j, { item: e, titleColumn: o, subTitleColumn: f }),
+    /* @__PURE__ */ r(m, { className: n.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ r(g, { fullHeight: !0, fullWidth: !0, variant: "none", children: p.map((a) => i?.includes(a.id) ? null : /* @__PURE__ */ d(v, { className: n.row, "data-testid": "row", children: [
+      /* @__PURE__ */ r(c, { horizontalAlign: "right", ..._, children: /* @__PURE__ */ d(
+        y,
         {
           level: 2,
           themeColor: "text-secondary-on-background",
@@ -45,8 +44,8 @@ const b = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0
     ] }, a.id)) }) })
   ] }) });
 }, j = ({ item: e, titleColumn: t, subTitleColumn: i }) => {
-  const d = e.actions;
-  return !t && !i && !d ? null : /* @__PURE__ */ o(C, { children: [
+  const o = e.actions;
+  return !t && !i && !o ? null : /* @__PURE__ */ d(C, { children: [
     /* @__PURE__ */ r(
       x,
       {
@@ -54,11 +53,11 @@ const b = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0
         className: n.cardTitle,
         primaryText: t !== void 0 && /* @__PURE__ */ r(s, { column: t, item: e, isTitle: !0 }),
         secondaryText: i !== void 0 && /* @__PURE__ */ r(s, { column: i, item: e, isTitle: !0 }),
-        trailingBlock: d,
+        trailingBlock: o,
         trailingBlockType: "title-actions"
       }
     ),
-    /* @__PURE__ */ r(v, {})
+    /* @__PURE__ */ r(w, {})
   ] });
 }, s = ({ item: e, column: t, isTitle: i = !1 }) => t.cellTemplate ? t.cellTemplate({ row: { original: e } }) : i ? /* @__PURE__ */ r(
   l,
@@ -72,10 +71,10 @@ const b = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0
   {
     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] })
+    children: /* @__PURE__ */ r(y, { level: 2, themeColor: "text-primary-on-background", className: n.font, children: e[t.accessor] })
   }
 );
 export {
-  R as G,
+  O as G,
   n as s
 };

package/dist/ListAreaService-YS_UUPh5.js

@@ -0,0 +1,107 @@
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+import { TypoButton as B, Icon as C, Group as b, TypoSubtitle as N, TypoBody as O } from "@element-public/react-components";
+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", W = "_searchbar_zewqs_11", G = "_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: W,
+  roundedBottom: G,
+  primaryText: L,
+  list: S,
+  listItem: A,
+  iconColor: P,
+  overlineTitle: D,
+  noOverlineTitle: F,
+  truncate: H,
+  truncateOverlineText: J
+}, X = (t, s, l, a) => {
+  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 }),
+      id: e,
+      items: []
+    }), o[e].items = [
+      ...o[e].items,
+      y(m, s, l, a)
+    ]), o;
+  }, {});
+  return Object.values(i);
+}, Y = (t, s, l, a) => t.map((i) => y(i, s, l, a)), y = (t, s, l, a) => {
+  const {
+    id: i,
+    title: o,
+    subTitle: c,
+    route: e,
+    value: m,
+    noNavigation: v,
+    disabled: d,
+    icon: g,
+    iconType: p,
+    trailingIcon: h,
+    trailingIconType: f,
+    actionButton: I,
+    onClick: w,
+    customTitle: T,
+    listItemClassName: x,
+    overlineTitle: _
+  } = t, u = s === e;
+  return {
+    id: i,
+    key: i,
+    select: u,
+    primaryText: i,
+    secondaryText: /* @__PURE__ */ z(b, { direction: "vertical", gap: "none", children: [
+      T ?? /* @__PURE__ */ r(
+        N,
+        {
+          "data-testid": "title",
+          level: 1,
+          themeColor: u ? "primary" : void 0,
+          className: `${n.truncate} lmnt-theme-on-surface-active`,
+          children: o
+        }
+      ),
+      c && !T ? /* @__PURE__ */ r(
+        O,
+        {
+          "data-testid": "subtitle",
+          level: 2,
+          themeColor: u ? "primary" : void 0,
+          className: `${n.truncate} lmnt-theme-on-surface-inactive`,
+          children: c
+        }
+      ) : void 0
+    ] }),
+    overlineText: _ ? /* @__PURE__ */ r(
+      "span",
+      {
+        "data-testid": "overline-title",
+        className: `${n.truncate} ${n.truncateOverlineText}`,
+        children: _
+      }
+    ) : void 0,
+    trailingBlock: I ?? h ?? /* @__PURE__ */ r(C, { icon: "arrow_right", className: n.iconColor }),
+    leadingBlock: K(g),
+    value: m,
+    componentProps: {
+      id: i,
+      "data-testid": `${o}-list-item`,
+      key: i,
+      leadingBlockType: p ?? "icon",
+      trailingBlockType: f ?? "icon",
+      className: `${p === "avatar" ? "" : n.listItem} ${l} ${x ?? ""} ${_ ? n.overlineTitle : n.noOverlineTitle}`,
+      onClick: (M, q) => w?.(q),
+      tag: d || v ? void 0 : a ?? "a",
+      to: d || v ? void 0 : e,
+      disabled: d
+    }
+  };
+}, K = (t) => typeof t == "string" && t in k ? /* @__PURE__ */ r($, { icon: t }) : t;
+export {
+  Y as a,
+  X as g,
+  y as m,
+  n as s
+};

package/dist/assets/HashTabView.css

@@ -1 +1 @@
-._elevation_4lrry_1{width:100%;border-radius:.5rem}._themeBackground_4lrry_6{background:var(--lmnt-theme-background)}._tabBar_4lrry_10{background:transparent;align-self:flex-end;border-radius:.5rem}._tabBar_4lrry_10 hr{display:none!important}._tabWrapper_4lrry_20{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._stickyHeader_4lrry_24{position:sticky;z-index:7;top:80px;background-color:var(--lmnt-theme-surface-variant)}._tabButton_4lrry_31{height:3.5rem!important}._childContainer_4lrry_35{width:25rem}._childContainerPhone_4lrry_39{width:100%}._iconColorRed_4lrry_43 [class*=mdc-tab__icon]{color:var(--lmnt-theme-danger)}._miniPadding_4lrry_48{padding:0 .15rem}
+._elevation_xbjx4_1{width:100%;border-radius:.5rem}._themeBackground_xbjx4_6{background:var(--lmnt-theme-background)}._tabBar_xbjx4_10{background:transparent;align-self:flex-end;border-radius:.5rem}._tabBar_xbjx4_10 hr{display:none!important}._tabWrapper_xbjx4_20{border-bottom:1px solid var(--lmnt-theme-on-surface-stroke)}._stickyHeader_xbjx4_24{position:sticky;top:80px;background-color:var(--lmnt-theme-surface-variant)}._tabButton_xbjx4_30{height:3.5rem!important}._childContainer_xbjx4_34{width:25rem}._childContainerPhone_xbjx4_38{width:100%}._iconColorRed_xbjx4_42 [class*=mdc-tab__icon]{color:var(--lmnt-theme-danger)}._miniPadding_xbjx4_47{padding:0 .15rem}

package/dist/assets/Select.css

@@ -0,0 +1 @@
+._customPortal_8wq49_1>div[class*=lmnt__menu-portal]{transition:none}._customSelect_8wq49_7 div[class*=lmnt__menu-list--is-multi]{max-height:none}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type AlertBannerProps = {
     text: string | JSX.Element;
     color?: 'danger' | 'info' | 'success' | 'warning';

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,21 +1,20 @@
-import "../../assets/AlertBanner.css";
 import { jsx as e, Fragment as c, jsxs as _ } from "react/jsx-runtime";
-import { Group as g, TypoBody as l } from "@element/react-components";
-import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
-const d = "_messageContainer_1seos_1", p = "_info_1seos_9", u = "_danger_1seos_14", f = "_success_1seos_19", y = "_warning_1seos_24", n = {
-  messageContainer: d,
+import { Group as g, TypoBody as l } from "@element-public/react-components";
+import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
+import '../../assets/AlertBanner.css';const m = "_messageContainer_1seos_1", p = "_info_1seos_9", u = "_danger_1seos_14", f = "_success_1seos_19", y = "_warning_1seos_24", n = {
+  messageContainer: m,
   info: p,
   danger: u,
   success: f,
   warning: y
-}, A = ({
+}, C = ({
   text: s,
   color: r = "info",
   isOpen: o = !0,
   action: i,
   isBold: t = !0
 }) => {
-  const { isDesktop: a } = m();
+  const { isDesktop: a } = d();
   return o ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ _(
     g,
     {
@@ -30,5 +29,5 @@ const d = "_messageContainer_1seos_1", p = "_info_1seos_9", u = "_danger_1seos_1
   ) }) : /* @__PURE__ */ e(c, {});
 };
 export {
-  A as AlertBanner
+  C as AlertBanner
 };

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

@@ -1,24 +1,26 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { a as t, s } from "../../react.esm-FR1-H8iU.js";
-import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
+import { a as t, s } from "../../react.esm-DNwojocF.js";
+import { a } from "../../useBreakpoints-MzTZ0tCT.js";
 import { AlertBanner as n } from "./AlertBanner.js";
-import { d as c, b as p, v as a, t as r, g as o } from "../../vi.CjhMlMwf-DWv7vrn7.js";
-c("AlertBanner Test", () => {
-  p(() => {
-    a.spyOn(l, "useBreakpoints").mockReturnValue({
+import { d as p, b as c, v as l, t as r, g as o } from "../../vi.CjhMlMwf-BCJNwXvu.js";
+p("AlertBanner Test", () => {
+  c(() => {
+    l.spyOn(a, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
-      isDesktop: !0
+      isDesktop: !0,
+      isDesktopNavbar: !0
     });
   }), r("render AlertBanner with text", () => {
     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" }) })), o(s.getByText("Element")).toBeInTheDocument();
   }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
-    a.spyOn(l, "useBreakpoints").mockReturnValue({
+    l.spyOn(a, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
-      isDesktop: !1
+      isDesktop: !1,
+      isDesktopNavbar: !1
     }), t(/* @__PURE__ */ e(n, { text: "Test" }));
     const i = s.getByText("Test").closest(".lmnt.lmnt-group");
     o(i).toHaveStyle(

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 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,69 +1,68 @@
-import "../../assets/BaseView.css";
-import { jsx as i, Fragment as x, jsxs as s } from "react/jsx-runtime";
-import { Group as o } from "@element/react-components";
+import { jsx as e, Fragment as x, jsxs as s } from "react/jsx-runtime";
+import { Group as r } from "@element-public/react-components";
 import { useMemo as d } 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 { VerticalDivider as N } from "../VerticalDivider/VerticalDivider.js";
 import { u as A } from "../../useBreakpoints-MzTZ0tCT.js";
-const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9", H = "_mobileList_dw2rc_13", I = "_desktopDetail_dw2rc_17", y = "_mobileDetail_dw2rc_21", r = {
+import '../../assets/BaseView.css';const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9", H = "_mobileList_dw2rc_13", I = "_desktopDetail_dw2rc_17", y = "_mobileDetail_dw2rc_21", o = {
   divider: V,
   maxWidth: j,
   desktopList: E,
   mobileList: H,
   desktopDetail: I,
   mobileDetail: y
-}, Q = ({
+}, P = ({
   action: l,
   heading: c,
-  elements: n,
+  elements: a,
   emptyText: m,
   hasSearch: p = !0,
   isSorted: h = !0,
   className: _,
-  withAvatar: f = !1,
-  listMaxHeight: v = "calc(100vh - 200px)",
-  pathname: a,
+  withAvatar: v = !1,
+  listMaxHeight: f = "calc(100vh - 200px)",
+  pathname: n,
   routerLinkElement: w,
   searchPlaceholder: b
 }) => {
-  const { isDesktopNavbar: e } = A(), t = d(() => n.find((L) => L.route === a), [a, n]), D = d(() => t?.component ?? (e ? /* @__PURE__ */ i(W, { subtitle: m }) : /* @__PURE__ */ i(x, {})), [t, e, m]), g = d(() => e ? !0 : !t, [t, e]), k = d(() => e ? !0 : t, [t, e]);
-  return /* @__PURE__ */ s(o, { "data-testid": "base-view-container", className: _ ?? "", gap: "", fullWidth: !0, children: [
-    g && /* @__PURE__ */ i(o, { gap: "none", className: e ? r.desktopList : r.mobileList, children: /* @__PURE__ */ s(o, { direction: "vertical", fullWidth: !0, gap: e ? "standard" : "dense", children: [
-      c && /* @__PURE__ */ i(u, { "data-testid": "heading", heading: c, level: 4, marginBottom: 0, children: l }),
-      /* @__PURE__ */ i(
+  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: "", 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: n,
+          elements: a,
           hasSearch: p,
-          maxHeight: v,
+          maxHeight: f,
           isSorted: h,
-          pathname: a,
+          pathname: n,
           routerLinkElement: w,
           searchPlaceholder: b
         }
       )
     ] }) }),
     k && /* @__PURE__ */ s(
-      o,
+      r,
       {
         "data-testid": "details",
         gap: "none",
-        className: e ? r.desktopDetail : r.mobileDetail,
+        className: i ? o.desktopDetail : o.mobileDetail,
         children: [
-          e && /* @__PURE__ */ i(N, { className: r.divider, height: "100%" }),
-          /* @__PURE__ */ s(o, { direction: "vertical", fullWidth: !0, children: [
-            /* @__PURE__ */ i(
+          i && /* @__PURE__ */ e(N, { className: o.divider, height: "100%" }),
+          /* @__PURE__ */ s(r, { direction: "vertical", fullWidth: !0, children: [
+            /* @__PURE__ */ e(
               u,
               {
-                className: r.maxWidth,
+                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: f,
+                withAvatar: v,
                 children: t?.detailAction ?? l
               }
             ),
@@ -75,5 +74,5 @@ const V = "_divider_dw2rc_1", j = "_maxWidth_dw2rc_5", E = "_desktopList_dw2rc_9
   ] });
 };
 export {
-  Q as BaseView
+  P as BaseView
 };

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

@@ -1,10 +1,10 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { a as o, s as e, f as p } from "../../react.esm-FR1-H8iU.js";
+import { a as r, s as e, f as p } from "../../react.esm-DNwojocF.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
-import { BaseView as r } from "./BaseView.js";
-import { d as u, b as d, v as c, t as i, g as t } from "../../vi.CjhMlMwf-DWv7vrn7.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";
 u("BaseView Test", () => {
-  d(() => {
+  m(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
@@ -12,7 +12,7 @@ u("BaseView Test", () => {
       isDesktopNavbar: !0
     });
   });
-  const n = [
+  const o = [
     {
       id: "1",
       title: "user.personal_information",
@@ -37,13 +37,13 @@ u("BaseView Test", () => {
       component: /* @__PURE__ */ a(s, { children: "Security selected" })
     }
   ];
-  i("render BaseView with empty view and navigation list", () => {
-    o(
+  n("render BaseView with empty view and navigation list", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -52,13 +52,13 @@ 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();
-  }), i("render BaseView with data and navigation list", () => {
-    o(
+  }), n("render BaseView with data and navigation list", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/personal-information",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -67,13 +67,13 @@ 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);
-  }), i("render BaseView with custom detail title and no detail icon", () => {
-    o(
+  }), n("render BaseView with custom detail title and no detail icon", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -82,18 +82,18 @@ 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);
-  }), i("hide empty view when screen is small", () => {
+  }), n("hide empty view when screen is small", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
       isDesktop: !1,
       isDesktopNavbar: !1
-    }), o(
+    }), r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",
@@ -102,13 +102,13 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.queryByText("user.noselection")).not.toBeInTheDocument();
-  }), i("render BaseView with selected detail section", () => {
-    o(
+  }), n("render BaseView with selected detail section", () => {
+    r(
       /* @__PURE__ */ a(
-        r,
+        i,
         {
           pathname: "/personal-profile/data-privacy",
-          elements: n,
+          elements: o,
           heading: "user.personal-profile",
           hasSearch: !1,
           emptyText: "user.noselection",

package/dist/components/BasicHeading/BasicHeading.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+
 export type BasicHeadingProps = {
     /**
      * the text content of the heading