@hortiview/shared-components 1.8.1 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [1.10.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.9.0...v1.10.0) (2025-05-26)
+
+### Features
+
+* add hint prop to BaseView and update story ([d466795](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d4667958fe9739be4a9db3e249e31cbbc8387946))
+* provide close button for alert banner ([52958aa](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/52958aa7f3bbfb3beab3fbf97147f81b236edafb))
+
+### Styles
+
+* fix vertical divider in BaseView ([8b82d3a](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8b82d3a0a19e215fe92ee46eeb83714a2e5df4e7))
+
+## [1.9.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.8.1...v1.9.0) (2025-05-23)
+
+### Features
+
+* add DetailContentWrapper component ([ccd43df](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/ccd43df9a05a28bd4b06317f0030a82037d7e898))
+* add leadingIcon to modal header ([e2223f7](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e2223f7ee40f01420502310fd14a4d32d8ceac6c))
+
+### Code Refactoring
+
+* adjust icon type ([2fdd9fa](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/2fdd9faf68c9e14f6e4459d53645daab3071ce35))
+* review comments ([8b57a7c](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8b57a7c696b6a4dc43b5a8ccea5ca5365d188d62))
+
+### Styles
+
+* move icon to the correct position ([0080a93](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0080a937e27e052ff83e94ba7fe34850ccd4e924))
+
 ## [1.8.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.8.0...v1.8.1) (2025-05-09)
 
 ### Styles

package/dist/assets/AlertBanner.css

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

package/dist/assets/BaseView.css

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

package/dist/assets/DetailContentWrapper.css

@@ -0,0 +1 @@
+._formContainer_gf66t_1{width:100%;padding:1rem;border-radius:.5rem;background:var(--lmnt-theme-background)}

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

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

package/dist/components/AlertBanner/AlertBanner.js

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

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

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

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

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

package/dist/components/BaseView/BaseView.js

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

package/dist/components/DetailContentWrapper/DetailContentWrapper.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+/**
+ * component to be used in the detail part from the base view
+ * @param heading - the heading to be displayed
+ * @param children - the children to which the background styling is being added
+ * @returns
+ */
+export declare const DetailContentWrapper: ({ heading, children, }: PropsWithChildren<{
+    heading?: string;
+}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DetailContentWrapper/DetailContentWrapper.js

@@ -0,0 +1,15 @@
+import { jsxs as e, jsx as r, Fragment as n } from "react/jsx-runtime";
+import { G as i } from "../../index.es-DntoATwO.js";
+import { BasicHeading as a } from "../BasicHeading/BasicHeading.js";
+import '../../assets/DetailContentWrapper.css';const m = "_formContainer_gf66t_1", s = {
+  formContainer: m
+}, p = ({
+  heading: t,
+  children: o
+}) => /* @__PURE__ */ e(i, { fullWidth: !0, direction: "vertical", gap: "dense", children: [
+  t ? /* @__PURE__ */ r(a, { heading: t, fontWeight: 500, marginBottom: 0, level: 5 }) : /* @__PURE__ */ r(n, {}),
+  /* @__PURE__ */ r("div", { className: s.formContainer, children: o })
+] });
+export {
+  p as DetailContentWrapper
+};

package/dist/components/Filter/Filter.js

@@ -6,8 +6,8 @@ import { I as W } from "../../index.es-0lQcz8m1.js";
 import { S as j } from "../../index.es-8GOVkuo-.js";
 import { useState as v } from "react";
 import '../../assets/main.css';import '../../assets/Filter.css';/* empty css                  */
-import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Iconify as z } from "../Iconify/Iconify.js";
+import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";
 import { SearchBar as G } from "../SearchBar/SearchBar.js";

package/dist/components/GenericTable/GenericTable.js

@@ -22,8 +22,8 @@ import { M as bi, a as wi } from "../../component-neHBNHRu.js";
 import { c as Ga } from "../../component-DsB0poTj.js";
 import { a as Cl } from "../../util-DA21pZXj.js";
 import '../../assets/main.css';import '../../assets/GenericTable.css';/* empty css                  */
-import { u as Sl } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../isEmpty-B4GG2s-V.js";
+import { u as Sl } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../uniqueId-NU3-C36A.js";
 import "react-hook-form";

package/dist/components/Modal/Modal.d.ts

@@ -1,5 +1,9 @@
-import { ModalProps } from '@element-public/react-modal';
+import { ModalProps as ElementModalProps } from '@element-public/react-modal';
+import { AvailableCustomIcons } from '../../enums/AvailableCustomIcons';
 
+type ModalProps = ElementModalProps & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement> & {
+    leadingIcon?: keyof typeof AvailableCustomIcons | string;
+};
 /**
  * A custom modal providing a custom header and close button.
  * Which can be overridden by the user.
@@ -7,7 +11,9 @@ import { ModalProps } from '@element-public/react-modal';
  * @param title - The title of the modal.
  * @param headerActions - The actions to display in the header of the modal.
  * @param hideCloseIcon - If true, the close icon will be hidden. @default true.
+ * @param leadingIcon - Iconify icon string (material icons and custom icons)
  * @param - Other element props to pass to the modal.
  * @returns
  */
-export declare const Modal: ({ onClose, title, headerActions, hideCloseIcon, ...props }: ModalProps & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ onClose, title, headerActions, hideCloseIcon, leadingIcon, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Modal/Modal.js

@@ -1,14 +1,16 @@
-import { jsxs as ft, jsx as O } from "react/jsx-runtime";
+import { jsxs as ft, jsx as _, Fragment as pt } from "react/jsx-runtime";
 import { G as V } from "../../index.es-DntoATwO.js";
 import { I as it } from "../../index.es-0lQcz8m1.js";
-import { _ as pt, c as B, P as s } from "../../identity-DLWZln-X.js";
-import u, { forwardRef as ht, useRef as et, useImperativeHandle as gt, useState as nt, useEffect as g, useCallback as z, useMemo as Y } from "react";
-import { i as Et, c as T, a as _t } from "../../index.es-da0cf7oE.js";
-import { b as at, c as ot, d as Ct } from "../../tslib.es6-BDCynO9F.js";
-import { M as St, a as vt } from "../../component-neHBNHRu.js";
-import { M as yt, c as Ot, m as Tt } from "../../component-DsB0poTj.js";
-import { A as At } from "../../animationframe-EMBh6XeO.js";
-import { T as bt } from "../../index.es-CF_xy2ns.js";
+import { _ as ht, c as B, P as s } from "../../identity-DLWZln-X.js";
+import d, { forwardRef as gt, useRef as et, useImperativeHandle as Et, useState as nt, useEffect as g, useCallback as z, useMemo as Y } from "react";
+import { i as _t, c as A, a as Ct } from "../../index.es-da0cf7oE.js";
+import { b as at, c as ot, d as St } from "../../tslib.es6-BDCynO9F.js";
+import { M as vt, a as yt } from "../../component-neHBNHRu.js";
+import { M as Ot, c as Tt, m as At } from "../../component-DsB0poTj.js";
+import { A as bt } from "../../animationframe-EMBh6XeO.js";
+import { P as Dt } from "../../index.es-D-CKRzIB.js";
+import { T as It } from "../../index.es-CF_xy2ns.js";
+import { Iconify as Nt } from "../Iconify/Iconify.js";
 import '../../assets/Modal.css';/**
  * @license
  * Copyright 2016 Google Inc.
@@ -31,19 +33,19 @@ import '../../assets/Modal.css';/**
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-function It(i, e, t) {
+function Lt(i, e, t) {
   return e(i, { initialFocusEl: t });
 }
-function Dt(i) {
+function Ft(i) {
   return i ? i.scrollHeight > i.offsetHeight : !1;
 }
-function Nt(i) {
+function Rt(i) {
   return i ? i.scrollTop === 0 : !1;
 }
-function Lt(i) {
+function Bt(i) {
   return i ? Math.ceil(i.scrollHeight - i.scrollTop) === i.clientHeight : !1;
 }
-function Ft(i) {
+function wt(i) {
   var e = /* @__PURE__ */ new Set();
   return [].forEach.call(i, function(t) {
     return e.add(t.offsetTop);
@@ -71,7 +73,7 @@ function Ft(i) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var j = "mdc-dom-focus-sentinel", Rt = (
+var j = "mdc-dom-focus-sentinel", Mt = (
   /** @class */
   function() {
     function i(e, t) {
@@ -101,12 +103,12 @@ var j = "mdc-dom-focus-sentinel", Rt = (
     }, i.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(j) && !o, d = !1;
+        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(j) && !o, f = !1;
         if (a) {
           var p = getComputedStyle(n);
-          d = p.display === "none" || p.visibility === "hidden";
+          f = p.display === "none" || p.visibility === "hidden";
         }
-        return a && !d;
+        return a && !f;
       });
     }, i.prototype.createSentinel = function() {
       var e = document.createElement("div");
@@ -169,7 +171,7 @@ var r = {
   // to prevent interactions with the content behind this scrim, and to capture
   // scrim clicks.
   SCRIM_HIDDEN: "mdc-dialog__scrim--hidden"
-}, C = {
+}, S = {
   ACTION_ATTRIBUTE: "data-mdc-dialog-action",
   BUTTON_DEFAULT_ATTRIBUTE: "data-mdc-dialog-button-default",
   BUTTON_SELECTOR: ".mdc-dialog__button",
@@ -225,7 +227,7 @@ var rt = (
     at(e, i);
     function e(t) {
       var n = i.call(this, ot(ot({}, e.defaultAdapter), t)) || this;
-      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = C.CLOSE_ACTION, n.scrimClickAction = C.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = C.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new At(), n.contentScrollHandler = function() {
+      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = S.CLOSE_ACTION, n.scrimClickAction = S.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = S.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new bt(), n.contentScrollHandler = function() {
         n.handleScrollEvent();
       }, n.windowResizeHandler = function() {
         n.layout();
@@ -241,7 +243,7 @@ var rt = (
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return C;
+        return S;
       },
       enumerable: !1,
       configurable: !0
@@ -317,7 +319,7 @@ var rt = (
     }), e.prototype.init = function() {
       this.adapter.hasClass(r.STACKED) && this.setAutoStackButtons(!1), this.isFullscreen = this.adapter.hasClass(r.FULLSCREEN);
     }, e.prototype.destroy = function() {
-      this.dialogOpen && this.close(C.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
+      this.dialogOpen && this.close(S.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
     }, e.prototype.open = function(t) {
       var n = this;
       this.dialogOpen = !0, this.adapter.notifyOpening(), this.adapter.addClass(r.OPENING), this.isFullscreen && this.adapter.registerContentEventHandler("scroll", this.contentScrollHandler), t && t.isAboveFullscreenDialog && this.adapter.addClass(r.SCRIM_HIDDEN), this.adapter.registerWindowEventHandler("resize", this.windowResizeHandler), this.adapter.registerWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), this.runNextAnimationFrame(function() {
@@ -363,7 +365,7 @@ var rt = (
         t.layoutInternal();
       });
     }, e.prototype.handleClick = function(t) {
-      var n = this.adapter.eventTargetMatches(t.target, C.SCRIM_SELECTOR);
+      var n = this.adapter.eventTargetMatches(t.target, S.SCRIM_SELECTOR);
       if (n && this.scrimClickAction !== "")
         this.close(this.scrimClickAction);
       else {
@@ -375,8 +377,8 @@ var rt = (
       if (n) {
         var o = this.adapter.getActionFromEvent(t);
         if (!o) {
-          var a = t.composedPath ? t.composedPath()[0] : t.target, d = this.suppressDefaultPressSelector ? !this.adapter.eventTargetMatches(a, this.suppressDefaultPressSelector) : !0;
-          n && d && this.adapter.clickDefaultButton();
+          var a = t.composedPath ? t.composedPath()[0] : t.target, f = this.suppressDefaultPressSelector ? !this.adapter.eventTargetMatches(a, this.suppressDefaultPressSelector) : !0;
+          n && f && this.adapter.clickDefaultButton();
         }
       }
     }, e.prototype.handleDocumentKeydown = function(t) {
@@ -407,7 +409,7 @@ var rt = (
     }, e.prototype.toggleScrollDividerFooter = function() {
       this.adapter.isScrollableContentAtBottom() ? this.adapter.hasClass(r.SCROLL_DIVIDER_FOOTER) && this.adapter.removeClass(r.SCROLL_DIVIDER_FOOTER) : this.adapter.addClass(r.SCROLL_DIVIDER_FOOTER);
     }, e;
-  }(St)
+  }(vt)
 );
 /**
  * @license
@@ -431,7 +433,7 @@ var rt = (
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var m = rt.strings, Bt = (
+var u = rt.strings, kt = (
   /** @class */
   function(i) {
     at(e, i);
@@ -475,36 +477,36 @@ var m = rt.strings, Bt = (
       return new e(t);
     }, e.prototype.initialize = function(t) {
       var n, o;
-      t === void 0 && (t = function(E, _) {
-        return new Rt(E, _);
+      t === void 0 && (t = function(E, C) {
+        return new Mt(E, C);
       });
-      var a = this.root.querySelector(m.CONTAINER_SELECTOR);
+      var a = this.root.querySelector(u.CONTAINER_SELECTOR);
       if (!a)
-        throw new Error("Dialog component requires a " + m.CONTAINER_SELECTOR + " container element");
-      this.container = a, this.content = this.root.querySelector(m.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(m.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + m.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
+        throw new Error("Dialog component requires a " + u.CONTAINER_SELECTOR + " container element");
+      this.container = a, this.content = this.root.querySelector(u.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(u.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + u.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
       try {
-        for (var d = Ct(this.buttons), p = d.next(); !p.done; p = d.next()) {
-          var A = p.value;
-          this.buttonRipples.push(new yt(A));
+        for (var f = St(this.buttons), p = f.next(); !p.done; p = f.next()) {
+          var v = p.value;
+          this.buttonRipples.push(new Ot(v));
         }
       } catch (E) {
         n = { error: E };
       } finally {
         try {
-          p && !p.done && (o = d.return) && o.call(d);
+          p && !p.done && (o = f.return) && o.call(f);
         } finally {
           if (n) throw n.error;
         }
       }
     }, e.prototype.initialSyncWithDOM = function() {
       var t = this;
-      this.focusTrap = It(this.container, this.focusTrapFactory, this.getInitialFocusEl() || void 0), this.handleClick = this.foundation.handleClick.bind(this.foundation), this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation), this.handleDocumentKeydown = this.foundation.handleDocumentKeydown.bind(this.foundation), this.handleOpening = function() {
+      this.focusTrap = Lt(this.container, this.focusTrapFactory, this.getInitialFocusEl() || void 0), this.handleClick = this.foundation.handleClick.bind(this.foundation), this.handleKeydown = this.foundation.handleKeydown.bind(this.foundation), this.handleDocumentKeydown = this.foundation.handleDocumentKeydown.bind(this.foundation), this.handleOpening = function() {
         document.addEventListener("keydown", t.handleDocumentKeydown);
       }, this.handleClosing = function() {
         document.removeEventListener("keydown", t.handleDocumentKeydown);
-      }, this.listen("click", this.handleClick), this.listen("keydown", this.handleKeydown), this.listen(m.OPENING_EVENT, this.handleOpening), this.listen(m.CLOSING_EVENT, this.handleClosing);
+      }, this.listen("click", this.handleClick), this.listen("keydown", this.handleKeydown), this.listen(u.OPENING_EVENT, this.handleOpening), this.listen(u.CLOSING_EVENT, this.handleClosing);
     }, e.prototype.destroy = function() {
-      this.unlisten("click", this.handleClick), this.unlisten("keydown", this.handleKeydown), this.unlisten(m.OPENING_EVENT, this.handleOpening), this.unlisten(m.CLOSING_EVENT, this.handleClosing), this.handleClosing(), this.buttonRipples.forEach(function(t) {
+      this.unlisten("click", this.handleClick), this.unlisten("keydown", this.handleKeydown), this.unlisten(u.OPENING_EVENT, this.handleOpening), this.unlisten(u.CLOSING_EVENT, this.handleClosing), this.handleClosing(), this.buttonRipples.forEach(function(t) {
         t.destroy();
       }), i.prototype.destroy.call(this);
     }, e.prototype.layout = function() {
@@ -522,19 +524,19 @@ var m = rt.strings, Bt = (
           return t.root.classList.add(o);
         },
         areButtonsStacked: function() {
-          return Ft(t.buttons);
+          return wt(t.buttons);
         },
         clickDefaultButton: function() {
           t.defaultButton && t.defaultButton.click();
         },
         eventTargetMatches: function(o, a) {
-          return o ? Tt(o, a) : !1;
+          return o ? At(o, a) : !1;
         },
         getActionFromEvent: function(o) {
           if (!o.target)
             return "";
-          var a = Ot(o.target, "[" + m.ACTION_ATTRIBUTE + "]");
-          return a && a.getAttribute(m.ACTION_ATTRIBUTE);
+          var a = Tt(o.target, "[" + u.ACTION_ATTRIBUTE + "]");
+          return a && a.getAttribute(u.ACTION_ATTRIBUTE);
         },
         getInitialFocusEl: function() {
           return t.getInitialFocusEl();
@@ -543,19 +545,19 @@ var m = rt.strings, Bt = (
           return t.root.classList.contains(o);
         },
         isContentScrollable: function() {
-          return Dt(t.content);
+          return Ft(t.content);
         },
         notifyClosed: function(o) {
-          return t.emit(m.CLOSED_EVENT, o ? { action: o } : {});
+          return t.emit(u.CLOSED_EVENT, o ? { action: o } : {});
         },
         notifyClosing: function(o) {
-          return t.emit(m.CLOSING_EVENT, o ? { action: o } : {});
+          return t.emit(u.CLOSING_EVENT, o ? { action: o } : {});
         },
         notifyOpened: function() {
-          return t.emit(m.OPENED_EVENT, {});
+          return t.emit(u.OPENED_EVENT, {});
         },
         notifyOpening: function() {
-          return t.emit(m.OPENING_EVENT, {});
+          return t.emit(u.OPENING_EVENT, {});
         },
         releaseFocus: function() {
           t.focusTrap.releaseFocus();
@@ -581,10 +583,10 @@ var m = rt.strings, Bt = (
           t.content instanceof HTMLElement && t.content.removeEventListener(o, a);
         },
         isScrollableContentAtTop: function() {
-          return Nt(t.content);
+          return Rt(t.content);
         },
         isScrollableContentAtBottom: function() {
-          return Lt(t.content);
+          return Bt(t.content);
         },
         registerWindowEventHandler: function(o, a) {
           window.addEventListener(o, a);
@@ -595,11 +597,11 @@ var m = rt.strings, Bt = (
       };
       return new rt(n);
     }, e.prototype.getInitialFocusEl = function() {
-      return this.root.querySelector("[" + m.INITIAL_FOCUS_ATTRIBUTE + "]");
+      return this.root.querySelector("[" + u.INITIAL_FOCUS_ATTRIBUTE + "]");
     }, e;
-  }(vt)
+  }(yt)
 );
-const wt = {
+const Ht = {
   /**
    * An action button that will not automatically trigger a dismiss or accept. It is meant to be used only in certain circumstances where more control of the modal is required such as validating forms. If primaryButton is sent with actionButton, actionButton will be ignored.
    *
@@ -762,7 +764,7 @@ const wt = {
    * Defaults to **null**.
    */
   title: s.string
-}, Mt = {
+}, Pt = {
   actionButton: null,
   backButton: null,
   badge: void 0,
@@ -786,30 +788,30 @@ const wt = {
   returnFocusSelector: null,
   scrollable: !1,
   title: null
-}, M = /* @__PURE__ */ ht((i, e) => {
+}, M = /* @__PURE__ */ gt((i, e) => {
   const {
     actionButton: t,
     actionIcons: n,
     badge: o,
     backButton: a,
-    children: d,
+    children: f,
     className: p,
-    content: A,
+    content: v,
     defaultButton: E,
-    dismissiveButton: _,
+    dismissiveButton: C,
     footerSupplemental: b,
     headerActions: J,
     hideCloseIcon: k,
     indicator: st,
-    initialFocus: S,
+    initialFocus: y,
     mobileStackedButtons: H,
     modalSize: h,
-    nextButton: v,
-    noActions: y,
+    nextButton: O,
+    noActions: T,
     onClose: P,
     onClosed: U,
-    onOpen: I,
-    onOpened: D,
+    onOpen: D,
+    onOpened: I,
     open: Q,
     preventClose: x,
     preventPrimaryAccept: X,
@@ -819,36 +821,36 @@ const wt = {
     title: tt,
     ...lt
   } = i, N = et(), l = et();
-  gt(e, () => N.current, []);
-  const [K, ct] = nt(), [W, dt] = nt(() => v || a);
+  Et(e, () => N.current, []);
+  const [K, ct] = nt(), [W, dt] = nt(() => O || a);
   g(() => {
-    dt(v || a);
-  }, [v, a]);
+    dt(O || a);
+  }, [O, a]);
   const L = z(() => {
     ct(window.innerWidth <= 600);
   }, []);
   g(() => (L(), window.addEventListener("resize", L), () => {
     window.removeEventListener("resize", L);
-  }), [L]), g(() => (l.current = Bt.attachTo(N.current), () => {
+  }), [L]), g(() => (l.current = kt.attachTo(N.current), () => {
     l.current.destroy();
   }), [l, N]), g(() => {
     l.current.foundation.setAutoStackButtons(H);
   }, [H]), g(() => {
-    y && (l.current.foundation.adapter.trapFocus = () => {
+    T && (l.current.foundation.adapter.trapFocus = () => {
     });
-  }, [y]), g(() => {
+  }, [T]), g(() => {
     l.current.scrimClickAction = x ? "" : "close", l.current.escapeKeyAction = x ? "" : "close";
   }, [x]);
-  const F = z((f) => {
-    P && P(f);
-  }, [P]), R = z((f) => {
-    G && Et(G), U && U(f);
+  const F = z((m) => {
+    P && P(m);
+  }, [P]), R = z((m) => {
+    G && _t(G), U && U(m);
   }, [G, U]);
-  g(() => (l.current.unlisten("MDCDialog: opening", I), l.current.listen("MDCDialog: opening", I), () => {
-    l.current.unlisten("MDCDialog: opening", I);
-  }), [l, I]), g(() => (l.current.unlisten("MDCDialog:opened", D), l.current.listen("MDCDialog:opened", D), () => {
-    l.current.unlisten("MDCDialog:opened", D);
-  }), [l, D]), g(() => (l.current.unlisten("MDCDialog:closing", F), l.current.listen("MDCDialog:closing", F), () => {
+  g(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
+    l.current.unlisten("MDCDialog: opening", D);
+  }), [l, D]), g(() => (l.current.unlisten("MDCDialog:opened", I), l.current.listen("MDCDialog:opened", I), () => {
+    l.current.unlisten("MDCDialog:opened", I);
+  }), [l, I]), g(() => (l.current.unlisten("MDCDialog:closing", F), l.current.listen("MDCDialog:closing", F), () => {
     l.current.unlisten("MDCDialog:closing", F);
   }), [l, F]), g(() => (l.current.unlisten("MDCDialog:closed", R), l.current.listen("MDCDialog:closed", R), () => {
     l.current.unlisten("MDCDialog:closed", R);
@@ -856,99 +858,108 @@ const wt = {
     Q ? l.current.open() : l.current.close();
   }, [l, Q]);
   const ut = Y(() => () => {
-    const f = {
+    const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       elevation: t?.props.elevation !== "default" ? t?.props.elevation : "flat",
       variant: t?.props.variant || "filled"
     };
-    return E === "action" && (f["data-mdc-dialog-button-default"] = !0), S === "action" && (f["data-mdc-dialog-initial-focus"] = !0), f;
-  }, [t?.props.elevation, t?.props.variant, E, S]), mt = Y(() => () => {
-    const f = {
+    return E === "action" && (m["data-mdc-dialog-button-default"] = !0), y === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [t?.props.elevation, t?.props.variant, E, y]), mt = Y(() => () => {
+    const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       "data-mdc-dialog-action": X ? "" : "accept",
       elevation: c?.props.elevation !== "default" ? c?.props.elevation : "flat",
       variant: c?.props.variant || "filled"
     };
-    return E === "primary" && (f["data-mdc-dialog-button-default"] = !0), S === "primary" && (f["data-mdc-dialog-initial-focus"] = !0), f;
-  }, [X, E, S, c?.props.elevation, c?.props.variant]);
-  return /* @__PURE__ */ u.createElement("aside", pt({
+    return E === "primary" && (m["data-mdc-dialog-button-default"] = !0), y === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [X, E, y, c?.props.elevation, c?.props.variant]);
+  return /* @__PURE__ */ d.createElement("aside", ht({
     ref: N,
     className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", p),
     role: "alertdialog"
-  }, lt), /* @__PURE__ */ u.createElement("div", {
-    className: B("lmnt-modal__container", "mdc-dialog__container", h === "fullscreen" && "mdc-dialog--fullscreen", h === "max" && "lmnt-modal__max", h === "xlarge" && "lmnt-modal__xl", h === "large" && "lmnt-modal__lg", h === "medium" && "lmnt-modal__md", h === "small" && "lmnt-modal__sm", (h === "mobile" || K) && "lmnt-modal__mobile", h === "dialog" && "lmnt-modal__dialog", y && "lmnt-modal-no-actions")
-  }, /* @__PURE__ */ u.createElement("div", {
+  }, lt), /* @__PURE__ */ d.createElement("div", {
+    className: B("lmnt-modal__container", "mdc-dialog__container", h === "fullscreen" && "mdc-dialog--fullscreen", h === "max" && "lmnt-modal__max", h === "xlarge" && "lmnt-modal__xl", h === "large" && "lmnt-modal__lg", h === "medium" && "lmnt-modal__md", h === "small" && "lmnt-modal__sm", (h === "mobile" || K) && "lmnt-modal__mobile", h === "dialog" && "lmnt-modal__dialog", T && "lmnt-modal-no-actions")
+  }, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
-  }, /* @__PURE__ */ u.createElement("header", {
-    className: B("lmnt-modal__title", "mdc-dialog__title", (h === "dialog" || k) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (k || h === "dialog" || y) && "lmnt-modal--no-close-icon")
-  }, !k && h !== "dialog" && !y && /* @__PURE__ */ u.createElement(it, {
+  }, /* @__PURE__ */ d.createElement("header", {
+    className: B("lmnt-modal__title", "mdc-dialog__title", (h === "dialog" || k) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (k || h === "dialog" || T) && "lmnt-modal--no-close-icon")
+  }, !k && h !== "dialog" && !T && /* @__PURE__ */ d.createElement(it, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear"
-  }), tt && /* @__PURE__ */ u.createElement("div", null, tt), J && /* @__PURE__ */ u.createElement("div", {
+  }), tt && /* @__PURE__ */ d.createElement("div", null, tt), J && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__title-actions"
-  }, J), o && /* @__PURE__ */ u.createElement("div", {
+  }, J), o && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-badge--modal",
     style: {
       marginLeft: "0"
     }
-  }, o)), (A || d) && /* @__PURE__ */ u.createElement("section", {
+  }, o)), (v || f) && /* @__PURE__ */ d.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, A || d), st, (t || a || _ || v || c || b) && /* @__PURE__ */ u.createElement("footer", {
+  }, v || f), st, (t || a || C || O || c || b) && /* @__PURE__ */ d.createElement("footer", {
     className: B("lmnt-modal__actions", "mdc-dialog__actions", K && "lmnt-dialog__actions__mobile", b && "lmnt-modal__actions--supplemental-btn", K && H && "lmnt-modal_actions-mobile-stacked")
-  }, !W && b && /* @__PURE__ */ u.createElement("div", {
+  }, !W && b && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
-  }, T(b, () => {
-    const f = {};
-    return E === "footerSupplemental" && (f["data-mdc-dialog-button-default"] = !0), S === "footerSupplemental" && (f["data-mdc-dialog-initial-focus"] = !0), f;
-  })), !W && (t || _ || c) && /* @__PURE__ */ u.createElement("div", {
+  }, A(b, () => {
+    const m = {};
+    return E === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), y === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  })), !W && (t || C || c) && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
-  }, _ && T(_, {
+  }, C && A(C, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
-  }), t && !c && T(t, ut), c && T(c, mt)), W && /* @__PURE__ */ u.createElement("div", {
+  }), t && !c && A(t, ut), c && A(c, mt)), W && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
-  }, /* @__PURE__ */ u.createElement("div", null, _t(a, "lmnt-modal__button")), /* @__PURE__ */ u.createElement("div", null, T(v, {
+  }, /* @__PURE__ */ d.createElement("div", null, Ct(a, "lmnt-modal__button")), /* @__PURE__ */ d.createElement("div", null, A(O, {
     className: "lmnt-modal__button",
     "data-mdc-dialog-initial-focus": !0
-  })))))), /* @__PURE__ */ u.createElement("div", {
+  })))))), /* @__PURE__ */ d.createElement("div", {
     className: "mdc-dialog__scrim"
   }));
 });
 M.displayName = "Modal";
-M.propTypes = wt;
-M.defaultProps = Mt;
-const kt = "_modal_18rd0_1", Ht = "_title_18rd0_6", Pt = "_titleWithoutCloseIcon_18rd0_18", $ = {
-  modal: kt,
-  title: Ht,
-  titleWithoutCloseIcon: Pt
-}, Jt = ({
+M.propTypes = Ht;
+M.defaultProps = Pt;
+const Ut = "_modal_18rd0_1", xt = "_title_18rd0_6", Gt = "_titleWithoutCloseIcon_18rd0_18", $ = {
+  modal: Ut,
+  title: xt,
+  titleWithoutCloseIcon: Gt
+}, ee = ({
   onClose: i,
   title: e,
   headerActions: t,
   hideCloseIcon: n,
-  ...o
+  leadingIcon: o,
+  ...a
 }) => {
-  const a = Y(() => {
-    const d = /* @__PURE__ */ ft(V, { primaryAlign: "center", secondaryAlign: "center", children: [
-      !n && /* @__PURE__ */ O(it, { icon: "close", onClick: () => i?.(), type: "button" }),
-      /* @__PURE__ */ O(bt, { level: 6, className: n ? $.titleWithoutCloseIcon : "", children: e })
+  const f = Y(() => {
+    const p = /* @__PURE__ */ ft(V, { primaryAlign: "center", secondaryAlign: "center", children: [
+      !n && /* @__PURE__ */ _(it, { icon: "close", onClick: () => i?.(), type: "button" }),
+      o ? /* @__PURE__ */ _(Dt, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ _(Nt, { icon: o }) }) : /* @__PURE__ */ _(pt, {}),
+      /* @__PURE__ */ _(
+        It,
+        {
+          level: 6,
+          className: n && !o ? $.titleWithoutCloseIcon : "",
+          children: e
+        }
+      )
     ] }, "base-group");
-    return t ? Array.isArray(t) ? [d, /* @__PURE__ */ O(V, { children: t }, "action-group")] : [d, t] : d;
-  }, [t, n, i, e]);
-  return /* @__PURE__ */ O(
+    return t ? Array.isArray(t) ? [p, /* @__PURE__ */ _(V, { children: t }, "action-group")] : [p, t] : p;
+  }, [t, n, o, i, e]);
+  return /* @__PURE__ */ _(
     M,
     {
-      ...o,
+      ...a,
       "data-testid": "modal",
-      className: `${$.modal} ${$.title} ${o.className ?? ""}`,
+      className: `${$.modal} ${$.title} ${a.className ?? ""}`,
       hideCloseIcon: !0,
-      headerActions: /* @__PURE__ */ O(V, { primaryAlign: "space-between", secondaryAlign: "center", children: a }, "header-group"),
+      headerActions: /* @__PURE__ */ _(V, { primaryAlign: "space-between", secondaryAlign: "center", children: f }, "header-group"),
       preventClose: !0
     }
   );
 };
 export {
-  Jt as Modal
+  ee as Modal
 };

package/dist/components/ModulePadding/ModulePadding.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { P as r } from "../../index.es-D-CKRzIB.js";
 import '../../assets/main.css';/* empty css                  */
-import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import "react";
 import "../../isEmpty-B4GG2s-V.js";
+import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";
 import "../../uniqueId-NU3-C36A.js";

package/dist/main.d.ts

@@ -6,6 +6,7 @@ export { BlockView } from './components/BlockView/BlockView';
 export { ChipCard } from './components/ChipCard/ChipCard';
 export { ContextMenu } from './components/ContextMenu/ContextMenu';
 export { DeleteModal } from './components/DeleteModal/DeleteModal';
+export { DetailContentWrapper } from './components/DetailContentWrapper/DetailContentWrapper';
 export { Disclaimer } from './components/Disclaimer/Disclaimer';
 export { EmptyView } from './components/EmptyView/EmptyView';
 export { Filter } from './components/Filter/Filter';

package/dist/main.js

@@ -2,90 +2,92 @@ import './assets/main.css';/* empty css              */
 import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
 import { BaseView as p } from "./components/BaseView/BaseView.js";
 import { BasicHeading as x } from "./components/BasicHeading/BasicHeading.js";
-import { BlockView as a } from "./components/BlockView/BlockView.js";
+import { BlockView as i } from "./components/BlockView/BlockView.js";
 import { ChipCard as A } from "./components/ChipCard/ChipCard.js";
-import { ContextMenu as n } from "./components/ContextMenu/ContextMenu.js";
+import { ContextMenu as c } from "./components/ContextMenu/ContextMenu.js";
 import { DeleteModal as d } from "./components/DeleteModal/DeleteModal.js";
-import { Disclaimer as G } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as s } from "./components/EmptyView/EmptyView.js";
-import { Filter as F } from "./components/Filter/Filter.js";
-import { FormattedNumberDisplay as N } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
-import { GenericTable as C } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as u } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as T } from "./components/HeaderFilter/HeaderFilter.js";
-import { HealthCheckFailed as U } from "./components/HealthCheckFailed/HealthCheckFailed.js";
-import { Iconify as H } from "./components/Iconify/Iconify.js";
-import { InfoGroup as P } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as R } from "./components/ListArea/ListArea.js";
-import { LoadingSpinner as w } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
-import { Modal as v } from "./components/Modal/Modal.js";
-import { ModulePadding as Y } from "./components/ModulePadding/ModulePadding.js";
-import { OverflowTooltip as z } from "./components/OverflowTooltip/OverflowTooltip.js";
-import { ScrollbarX as j, ScrollbarY as q } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as Q } from "./components/SearchBar/SearchBar.js";
-import { Select as Z } from "./components/Select/Select.js";
-import { VerticalDivider as rr } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as er } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as mr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormNumber as fr } from "./components/FormComponents/FormNumber/FormNumber.js";
-import { FormRadio as ir } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as lr } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as cr } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as Lr } from "./components/FormComponents/FormText/FormText.js";
-import { FormToggle as Er } from "./components/FormComponents/FormToggle/FormToggle.js";
-import { AvailableCustomIcons as Sr } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as _r } from "./enums/ThemeColor.js";
-import { u as Ir } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as Dr, getNumberAsLocaleString as Cr, trimLeadingAndTrailingSpaces as gr } from "./services/UtilService.js";
-import { AVAILABLE_COUNTRY_KEYS as Br, AVAILABLE_LOCALES as Tr, ENGLISH_LANGUAGE_ID as br, GERMAN_LANGUAGE_ID as Ur, LANGUAGE_CODES_MAPPER as hr, LANGUAGE_ID_MAPPER as Hr, SPANISH_LANGUAGE_ID as Mr, TURKISH_LANGUAGE_ID as Pr } from "./types/Languages.js";
+import { DetailContentWrapper as G } from "./components/DetailContentWrapper/DetailContentWrapper.js";
+import { Disclaimer as s } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as F } from "./components/EmptyView/EmptyView.js";
+import { Filter as N } from "./components/Filter/Filter.js";
+import { FormattedNumberDisplay as C } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
+import { GenericTable as u } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as T } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as U } from "./components/HeaderFilter/HeaderFilter.js";
+import { HealthCheckFailed as H } from "./components/HealthCheckFailed/HealthCheckFailed.js";
+import { Iconify as P } from "./components/Iconify/Iconify.js";
+import { InfoGroup as R } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as w } from "./components/ListArea/ListArea.js";
+import { LoadingSpinner as v } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
+import { Modal as Y } from "./components/Modal/Modal.js";
+import { ModulePadding as z } from "./components/ModulePadding/ModulePadding.js";
+import { OverflowTooltip as X } from "./components/OverflowTooltip/OverflowTooltip.js";
+import { ScrollbarX as q, ScrollbarY as J } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as Z } from "./components/SearchBar/SearchBar.js";
+import { Select as rr } from "./components/Select/Select.js";
+import { VerticalDivider as er } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as mr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as fr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormNumber as ar } from "./components/FormComponents/FormNumber/FormNumber.js";
+import { FormRadio as lr } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as nr } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as Lr } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as Er } from "./components/FormComponents/FormText/FormText.js";
+import { FormToggle as Sr } from "./components/FormComponents/FormToggle/FormToggle.js";
+import { AvailableCustomIcons as _r } from "./enums/AvailableCustomIcons.js";
+import { ThemeColor as Ir } from "./enums/ThemeColor.js";
+import { u as Dr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as gr, getNumberAsLocaleString as ur, trimLeadingAndTrailingSpaces as Br } from "./services/UtilService.js";
+import { AVAILABLE_COUNTRY_KEYS as br, AVAILABLE_LOCALES as Ur, ENGLISH_LANGUAGE_ID as hr, GERMAN_LANGUAGE_ID as Hr, LANGUAGE_CODES_MAPPER as Mr, LANGUAGE_ID_MAPPER as Pr, SPANISH_LANGUAGE_ID as Vr, TURKISH_LANGUAGE_ID as Rr } from "./types/Languages.js";
 export {
-  Br as AVAILABLE_COUNTRY_KEYS,
-  Tr as AVAILABLE_LOCALES,
+  br as AVAILABLE_COUNTRY_KEYS,
+  Ur as AVAILABLE_LOCALES,
   t as AlertBanner,
-  Sr as AvailableCustomIcons,
+  _r as AvailableCustomIcons,
   p as BaseView,
   x as BasicHeading,
-  a as BlockView,
+  i as BlockView,
   A as ChipCard,
-  n as ContextMenu,
+  c as ContextMenu,
   d as DeleteModal,
-  G as Disclaimer,
-  br as ENGLISH_LANGUAGE_ID,
-  s as EmptyView,
-  F as Filter,
-  er as FormCheckBox,
-  mr as FormDatePicker,
-  fr as FormNumber,
-  ir as FormRadio,
-  lr as FormSelect,
-  cr as FormSlider,
-  Lr as FormText,
-  Er as FormToggle,
-  N as FormattedNumberDisplay,
-  Ur as GERMAN_LANGUAGE_ID,
-  C as GenericTable,
-  u as HashTabView,
-  T as HeaderFilter,
-  U as HealthCheckFailed,
-  H as Iconify,
-  P as InfoGroup,
-  hr as LANGUAGE_CODES_MAPPER,
-  Hr as LANGUAGE_ID_MAPPER,
-  R as ListArea,
-  w as LoadingSpinner,
-  v as Modal,
-  Y as ModulePadding,
-  z as OverflowTooltip,
-  Mr as SPANISH_LANGUAGE_ID,
-  j as ScrollbarX,
-  q as ScrollbarY,
-  Q as SearchBar,
-  Z as Select,
-  Pr as TURKISH_LANGUAGE_ID,
-  _r as ThemeColor,
-  rr as VerticalDivider,
-  Dr as capitalizeFirstLetters,
-  Cr as getNumberAsLocaleString,
-  gr as trimLeadingAndTrailingSpaces,
-  Ir as useBreakpoints
+  G as DetailContentWrapper,
+  s as Disclaimer,
+  hr as ENGLISH_LANGUAGE_ID,
+  F as EmptyView,
+  N as Filter,
+  mr as FormCheckBox,
+  fr as FormDatePicker,
+  ar as FormNumber,
+  lr as FormRadio,
+  nr as FormSelect,
+  Lr as FormSlider,
+  Er as FormText,
+  Sr as FormToggle,
+  C as FormattedNumberDisplay,
+  Hr as GERMAN_LANGUAGE_ID,
+  u as GenericTable,
+  T as HashTabView,
+  U as HeaderFilter,
+  H as HealthCheckFailed,
+  P as Iconify,
+  R as InfoGroup,
+  Mr as LANGUAGE_CODES_MAPPER,
+  Pr as LANGUAGE_ID_MAPPER,
+  w as ListArea,
+  v as LoadingSpinner,
+  Y as Modal,
+  z as ModulePadding,
+  X as OverflowTooltip,
+  Vr as SPANISH_LANGUAGE_ID,
+  q as ScrollbarX,
+  J as ScrollbarY,
+  Z as SearchBar,
+  rr as Select,
+  Rr as TURKISH_LANGUAGE_ID,
+  Ir as ThemeColor,
+  er as VerticalDivider,
+  gr as capitalizeFirstLetters,
+  ur as getNumberAsLocaleString,
+  Br as trimLeadingAndTrailingSpaces,
+  Dr as useBreakpoints
 };

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": "1.8.1",
+  "version": "1.10.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",