@hortiview/shared-components 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.16.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.15.0...v2.16.0) (2026-02-20)
+
+### Features
+
+* add new UI components, enhance Stepper, and extend AlertBanner & InfoCard functionality ([f690592](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f690592e99037fef438c4b5f0edd06747b7a6e19)), closes [#18954](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/18954) [#19035](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/19035)
+
 ## [2.15.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.14.0...v2.15.0) (2026-02-18)
 
 ### Features

package/dist/AlertBanner-aW6joVUm.js

@@ -0,0 +1,35 @@
+import { jsx as n, Fragment as t, jsxs as l } from "react/jsx-runtime";
+import { G as _ } from "./index.es-oxil0uFe.js";
+import { I as m } from "./index.es-Dgxrk6xW.js";
+import { T as d } from "./index.es-SjZ_-d7U.js";
+import './assets/AlertBanner.css';const g = "_messageContainer_2hnjr_1", h = "_info_2hnjr_9", f = "_danger_2hnjr_14", p = "_success_2hnjr_19", u = "_warning_2hnjr_24", j = "_closeIcon_2hnjr_29", y = "_linkBanner_2hnjr_34", s = {
+  messageContainer: g,
+  info: h,
+  danger: f,
+  success: p,
+  warning: u,
+  closeIcon: j,
+  linkBanner: y
+}, C = ({
+  text: e,
+  id: o,
+  color: a = "info",
+  isOpen: c = !0,
+  isBold: i = !0,
+  onClose: r
+}) => c ? /* @__PURE__ */ n(
+  "div",
+  {
+    id: o,
+    "data-testid": "alert-banner",
+    className: `${s.messageContainer} ${s[a]}`,
+    children: /* @__PURE__ */ l(_, { primaryAlign: "space-between", gap: "dense", fullWidth: !0, children: [
+      typeof e == "string" ? /* @__PURE__ */ n(d, { bold: i, level: 2, children: e }) : /* @__PURE__ */ n("div", { style: { width: "100%" }, children: e }),
+      r && /* @__PURE__ */ n(m, { icon: "close", iconSize: "small", onClick: r, className: s.closeIcon })
+    ] })
+  }
+) : /* @__PURE__ */ n(t, {});
+export {
+  C as A,
+  s
+};

package/dist/assets/ButtonCard.css

@@ -0,0 +1 @@
+._buttonCard_1fv6b_1[class*="lmnt mdc-button"]{height:auto;border-radius:5px;border-bottom:2px solid rgba(0,0,0,.12);justify-content:flex-start}._buttonCard_1fv6b_1>span[class*=mdc-button__ripple]{border-radius:5px}._noInteraction_1fv6b_12{pointer-events:none}._iconContainer_1fv6b_16{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border-radius:50%;background-color:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary)}._iconContainer_1fv6b_16._iconContainer_1fv6b_16._iconContainer_1fv6b_16 i[class*="lmnt lmnt-icon material-icons lmnt-icon--medium"]{margin-left:unset;margin-right:unset;width:24px;height:24px;font-size:24px}._centerText_1fv6b_43{text-align:start}

package/dist/assets/ConfirmationModal.css

@@ -0,0 +1 @@
+._bulletPoint_v4va9_1{display:list-item;margin-left:1.5rem}._modal_v4va9_7 [class*="lmnt-modal__actions mdc-dialog__actions"]{margin-bottom:0!important}._primary_v4va9_11{color:var(--lmnt-theme-primary)}._secondary_v4va9_15{color:var(--lmnt-theme-secondary)}._success_v4va9_19{color:var(--lmnt-theme-success)}._danger_v4va9_23{color:var(--lmnt-theme-danger)}._fullHeight_v4va9_27{height:100%}

package/dist/assets/InfoCard.css

@@ -1 +1 @@
-._database_x7426_1{color:var(--lmnt-theme-secondary);animation:_spin_x7426_1 4s linear infinite}@keyframes _spin_x7426_1{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}._done_x7426_16{color:var(--lmnt-theme-success)}._iot_x7426_20,._platform_x7426_21,._other_x7426_22{color:var(--lmnt-theme-danger)}._crossedOut_x7426_26{position:relative;display:inline-block}._crossedOut_x7426_26:after{content:"";position:absolute;width:3rem;height:.25rem;left:50%;top:50%;background:var(--lmnt-theme-danger-on-surface);box-shadow:0 0 0 .125rem var(--lmnt-theme-background);transform:translate(-50%,calc(-50% - .25rem)) rotate(45deg);transform-origin:center;z-index:2}._fullHeight_x7426_45{height:100%}._centerText_x7426_49{text-align:center}
+._database_1vpro_1{color:var(--lmnt-theme-secondary);animation:_spin_1vpro_1 4s linear infinite}@keyframes _spin_1vpro_1{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}._done_1vpro_16{color:var(--lmnt-theme-success)}._iot_1vpro_20,._platform_1vpro_21,._other_1vpro_22{color:var(--lmnt-theme-danger)}._celebration_1vpro_26,._primary_1vpro_30{color:var(--lmnt-theme-primary)}._secondary_1vpro_34{color:var(--lmnt-theme-secondary)}._danger_1vpro_38{color:var(--lmnt-theme-danger)}._success_1vpro_42{color:var(--lmnt-theme-success)}._crossedOut_1vpro_46{position:relative;display:inline-block}._crossedOut_1vpro_46:after{content:"";position:absolute;width:3rem;height:.25rem;left:50%;top:50%;background:var(--lmnt-theme-danger-on-surface);box-shadow:0 0 0 .125rem var(--lmnt-theme-background);transform:translate(-50%,calc(-50% - .25rem)) rotate(45deg);transform-origin:center;z-index:2}._fullHeight_1vpro_65{height:100%}._centerText_1vpro_69{text-align:center}

package/dist/assets/stepper.css

@@ -1 +1 @@
-._stepperIndicatorItem_x786o_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_x786o_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_x786o_12{border:1.5px dashed #7e7e7e}._stepperContainer_x786o_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_x786o_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_x786o_28{margin-bottom:0}._stepperButtonLoading_x786o_32{padding-top:.375rem!important;padding-bottom:.375rem!important}._stepperButtonLoading_x786o_32 svg{stroke:var(--lmnt-theme-white)!important}._stepperDescriptionContainer_x786o_43{border-radius:.2rem;background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke)}._stepperDescriptionProgress_x786o_49{padding:0 1rem;min-width:3.5rem;background:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary);border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}._stepperDescriptionText_x786o_60{padding:.7rem}
+._stepperIndicatorItem_1tz4b_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_1tz4b_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_1tz4b_12{border:1.5px dashed #7e7e7e}._stepperContainer_1tz4b_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_1tz4b_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_1tz4b_28{margin-bottom:0}._stepperButtonLoading_1tz4b_32{padding-top:.375rem!important;padding-bottom:.375rem!important}._stepperButtonLoading_1tz4b_32 svg{stroke:var(--lmnt-theme-white)!important}._stepperDescriptionContainer_1tz4b_43{border-radius:.2rem;background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke)}._stepperDescriptionProgress_1tz4b_49{padding:0 1rem;min-width:3.5rem;background:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary);border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}._stepperDescriptionText_1tz4b_60{padding:.7rem}._stepperDesktopHeaderContainer_1tz4b_66{border-radius:.5rem;padding:1rem;background-color:#ecf4f4}._stepperItem_1tz4b_73 ._stepperItemNumber_1tz4b_73{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border-radius:50%;background-color:var(--lmnt-theme-surface-variant);color:var(--lmnt-theme-on-surface-inactive);transition:background-color .6s ease}._stepperItem_1tz4b_73 ._stepperItemNumberActive_1tz4b_91{background-color:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary)}._stepperItem_1tz4b_73 ._itemText_1tz4b_96{transition:color .6s ease;color:var(--lmnt-theme-on-surface-inactive)}._stepperItem_1tz4b_73 ._itemTextActive_1tz4b_101{color:var(--lmnt-theme-on-surface-active)}._stepperItemConnector_1tz4b_105{flex:1;height:4px;border:none;border-radius:2px;background:linear-gradient(90deg,var(--lmnt-theme-primary) 0%,var(--lmnt-theme-primary) 50%,var(--lmnt-theme-on-surface-stroke) 50%,var(--lmnt-theme-on-surface-stroke) 100%);background-size:200% 100%;background-position:100% 0;transition:background-position .6s cubic-bezier(.4,0,.2,1)}._stepperItemConnectorCompleted_1tz4b_125{background-position:0% 0}

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

@@ -1,5 +1,9 @@
 export type AlertBannerProps = {
     text: string | JSX.Element;
+    /**
+     * Id property to be able to query for the element
+     */
+    id?: string;
     color?: 'danger' | 'info' | 'success' | 'warning';
     isOpen?: boolean;
     isBold?: boolean;
@@ -12,4 +16,4 @@ export type AlertBannerProps = {
      */
     action?: JSX.Element;
 };
-export declare const AlertBanner: ({ text, color, isOpen, isBold, onClose, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertBanner: ({ text, id, color, isOpen, isBold, onClose, }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AlertBanner/AlertBanner.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../index.es-oxil0uFe.js";
 import "../../index.es-Dgxrk6xW.js";
 import "../../index.es-SjZ_-d7U.js";
-import { A as e } from "../../AlertBanner-Ci-F-6S9.js";
+import { A as e } from "../../AlertBanner-aW6joVUm.js";
 export {
   e as AlertBanner
 };

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

@@ -1,11 +1,11 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
 import { a as t, s } from "../../react.esm-Bm0cAgpZ.js";
-import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
-import { A as n } from "../../AlertBanner-Ci-F-6S9.js";
-import { d as p, b as c, a as l, t as r, g as a } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+import { a as i } from "../../useBreakpoints-MzTZ0tCT.js";
+import { A as n } from "../../AlertBanner-aW6joVUm.js";
+import { d as p, b as c, t as r, g as a, a as o } from "../../vi.bdSIJ99Y-B308Q-4w.js";
 p("AlertBanner Test", () => {
   c(() => {
-    l.spyOn(o, "useBreakpoints").mockReturnValue({
+    o.spyOn(i, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
       isDesktop: !0,
@@ -16,17 +16,19 @@ p("AlertBanner Test", () => {
   }), r("render AlertBanner with element", () => {
     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(o, "useBreakpoints").mockReturnValue({
+    o.spyOn(i, "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");
-    a(i).toHaveStyle(
+    const l = s.getByText("Test").closest(".lmnt.lmnt-group");
+    a(l).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 })), a(s.queryByText("Test")).not.toBeInTheDocument();
+  }), r("renders AlertBanner with id", () => {
+    t(/* @__PURE__ */ e(n, { text: "Test", id: "test-id" })), a(s.getByTestId("alert-banner")).toHaveAttribute("id", "test-id");
   });
 });

package/dist/components/AlertBanner/LinkBanner.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import { G as l } from "../../index.es-oxil0uFe.js";
 import { T as s } from "../../index.es-SjZ_-d7U.js";
 import { Iconify as p } from "../Iconify/Iconify.js";
-import { A as m, s as c } from "../../AlertBanner-Ci-F-6S9.js";
+import { A as m, s as c } from "../../AlertBanner-aW6joVUm.js";
 const g = ({
   text: n,
   color: o = "info",

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

@@ -2,16 +2,16 @@ import { jsx as s } from "react/jsx-runtime";
 import { a as r, s as e } from "../../react.esm-Bm0cAgpZ.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
 import { LinkBanner as a } from "./LinkBanner.js";
-import { d as n, b as i, a as m, t as p, g as t } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+import { d as n, b as i, t as m, g as t, a as p } from "../../vi.bdSIJ99Y-B308Q-4w.js";
 n("LinkBanner Test", () => {
   i(() => {
-    m.spyOn(o, "useBreakpoints").mockReturnValue({
+    p.spyOn(o, "useBreakpoints").mockReturnValue({
       isMobile: !1,
       isTablet: !1,
       isDesktop: !0,
       isDesktopNavbar: !0
     });
-  }), p("render LinkBanner with text", () => {
+  }), m("render LinkBanner with text", () => {
     r(/* @__PURE__ */ s(a, { text: "Test", url: "#" })), t(e.getByText("Test")).toBeInTheDocument(), t(e.getByText("open_in_new")).toBeInTheDocument(), t(e.getByRole("link")).toHaveAttribute("href", "#");
   });
 });

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

@@ -2,7 +2,7 @@ import { jsx as o, Fragment as s } from "react/jsx-runtime";
 import { a as n, s as e, f as d } from "../../react.esm-Bm0cAgpZ.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { BaseView as i } from "./BaseView.js";
-import { d as p, b as m, a as c, t as r, g as t } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+import { d as p, b as m, t as r, g as t, a as c } from "../../vi.bdSIJ99Y-B308Q-4w.js";
 p("BaseView Test", () => {
   m(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({

package/dist/components/ButtonCard/ButtonCard.d.ts

@@ -0,0 +1,42 @@
+import { IconifyProps } from '../Iconify/Iconify';
+import { IsAllowedProps } from '../PermissionChecks/PermissionService.tsx';
+
+export type ButtonCardProps = {
+    /**
+     * The label of the card.
+     */
+    title: string;
+    /**
+     * The subtitle of the card, displayed underneath the title in smaller font size.
+     */
+    subtitle: string;
+    /**
+     * Optional callback function that is called when the card is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * The leading icon. The available icons are all material icons and icons listed in the AvailableCustomIcons enum.
+     */
+    icon?: IconifyProps['icon'];
+    /**
+     * The entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
+     */
+    entityIds: IsAllowedProps['entityIds'];
+    /**
+     * The permissions needed to enable the button. If the array is empty, the button is always enabled.
+     */
+    permissions: IsAllowedProps['neededPermissions'];
+};
+/**
+ * A button styled as a card, used for displaying actions.
+ * The card behaves as a clickable button when the onClick prop is provided.
+ * If onClick is not provided, the card will remain static on hover and not be focusable.
+ *
+ * @param title the title of the card
+ * @param subtitle the subtitle of the card
+ * @param icon the leading icon. The available icons are all material icons and icons listed in the {@link AvailableCustomIcons} enum.
+ * @param onClick optional callback function that is called when the card is clicked.
+ * @param entityIds the entity id, the permission is for (FarmOrganizationId, VendorOrganizationId or FarmLocationId).
+ * @param permissions the permissions needed to enable the button. If the array is empty, the button is always enabled.
+ */
+export declare const ButtonCard: ({ title, subtitle, icon, onClick, entityIds, permissions, }: ButtonCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ButtonCard/ButtonCard.js

@@ -0,0 +1,51 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { B as m } from "../../index.es-B8p8KCdj.js";
+import { G as a } from "../../index.es-oxil0uFe.js";
+import { e as c } from "../../index.es-SjZ_-d7U.js";
+import { Iconify as u } from "../Iconify/Iconify.js";
+import { Allowed as p } from "../Allowed/Allowed.js";
+import '../../assets/ButtonCard.css';const b = "_buttonCard_1fv6b_1", f = "_noInteraction_1fv6b_12", h = "_iconContainer_1fv6b_16", y = "_centerText_1fv6b_43", n = {
+  buttonCard: b,
+  noInteraction: f,
+  iconContainer: h,
+  centerText: y
+}, A = ({
+  title: o,
+  subtitle: d,
+  icon: r,
+  onClick: e,
+  entityIds: s,
+  permissions: l
+}) => /* @__PURE__ */ t(p, { neededPermissions: l, entityIds: s, children: /* @__PURE__ */ t(
+  m,
+  {
+    className: `${n.buttonCard} ${e === void 0 ? n.noInteraction : ""}`,
+    variant: "outlined",
+    "data-testid": `button-card-${o}`,
+    type: "button",
+    onClick: e,
+    fullWidth: !0,
+    tabIndex: e === void 0 ? -1 : 0,
+    children: /* @__PURE__ */ i(a, { primaryAlign: "start", secondaryAlign: "center", fullWidth: !0, children: [
+      r && /* @__PURE__ */ t("div", { className: n.iconContainer, children: /* @__PURE__ */ t(u, { icon: r, "data-testid": `card-icon-${r}` }) }),
+      /* @__PURE__ */ i(
+        a,
+        {
+          gap: "none",
+          primaryAlign: "center",
+          secondaryAlign: "start",
+          direction: "vertical",
+          fullWidth: !0,
+          className: n.centerText,
+          children: [
+            /* @__PURE__ */ t(c, { type: "body1-bold", themeColor: "text-primary-on-light", children: o }),
+            /* @__PURE__ */ t(c, { type: "subtitle1", themeColor: "text-secondary-on-background", children: d })
+          ]
+        }
+      )
+    ] })
+  }
+) });
+export {
+  A as ButtonCard
+};

package/dist/components/ButtonCard/ButtonCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ButtonCard/ButtonCard.test.js

@@ -0,0 +1,92 @@
+import { jsx as o } from "react/jsx-runtime";
+import { s as e } from "../../react.esm-Bm0cAgpZ.js";
+import { ButtonCard as s } from "./ButtonCard.js";
+import { renderWithPermissions as r } from "../../test-utils.js";
+import { d as c, t as a, g as t, v as d } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+c("ButtonCard Component", () => {
+  a("renders the correct title and subtitle", () => {
+    r(
+      /* @__PURE__ */ o(
+        s,
+        {
+          title: "Card Title",
+          subtitle: "Card Subtitle",
+          entityIds: "General",
+          permissions: []
+        }
+      )
+    ), t(e.getByText("Card Title")).toBeInTheDocument(), t(e.getByText("Card Subtitle")).toBeInTheDocument(), t(e.queryByTestId("card-icon")).not.toBeInTheDocument();
+  }), a("renders the correct title and subtitle with icon", () => {
+    r(
+      /* @__PURE__ */ o(
+        s,
+        {
+          title: "Card Title",
+          subtitle: "Card Subtitle",
+          icon: "store",
+          entityIds: "General",
+          permissions: []
+        }
+      )
+    ), t(e.getByText("Card Title")).toBeInTheDocument(), t(e.getByText("Card Subtitle")).toBeInTheDocument(), t(e.getByTestId("card-icon-store")).toBeInTheDocument();
+  }), a("calls onClick when button is clicked", () => {
+    const n = d.fn();
+    r(
+      /* @__PURE__ */ o(
+        s,
+        {
+          title: "Clickable Card",
+          subtitle: "Card Subtitle",
+          onClick: n,
+          entityIds: "General",
+          permissions: []
+        }
+      )
+    );
+    const i = e.getByTestId("button-card-Clickable Card");
+    t(i).not.toHaveClass("noInteraction"), i.click(), t(n).toHaveBeenCalled();
+  }), a("adds noInteraction class when onClick is not set", () => {
+    r(
+      /* @__PURE__ */ o(
+        s,
+        {
+          title: "Static Card",
+          subtitle: "Card Subtitle",
+          entityIds: "General",
+          permissions: []
+        }
+      )
+    );
+    const n = e.getByTestId("button-card-Static Card");
+    t(Array.from(n.classList).some((i) => i.includes("noInteraction"))).toBe(!0);
+  }), a("does not add noInteraction class when onClick is set", () => {
+    r(
+      /* @__PURE__ */ o(
+        s,
+        {
+          title: "Interactive Card",
+          subtitle: "Card Subtitle",
+          onClick: () => {
+          },
+          entityIds: "General",
+          permissions: []
+        }
+      )
+    );
+    const n = e.getByTestId("button-card-Interactive Card");
+    t(Array.from(n.classList).some((i) => i.includes("noInteraction"))).toBe(!1);
+  }), a("sets correct data-testid for button and icon", () => {
+    r(
+      /* @__PURE__ */ o(
+        s,
+        {
+          title: "Icon Card",
+          subtitle: "Card Subtitle",
+          icon: "wifi",
+          entityIds: "General",
+          permissions: []
+        }
+      )
+    ), t(e.getByTestId("button-card-Icon Card")).toBeInTheDocument(), t(e.getByTestId("card-icon-wifi")).toBeInTheDocument();
+  });
+});

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,77 @@
+import { IconifyProps } from '../Iconify/Iconify';
+import { ReactNode } from 'react';
+
+type ConfirmationModalProps = {
+    /**
+     * The title of the modal.
+     */
+    modalTitle: string;
+    /**
+     * The label of the confirmation button.
+     */
+    confirmButtonLabel: string;
+    /**
+     * The label of the cancel button.
+     */
+    cancelButtonLabel: string;
+    /**
+     * The header text of the modal body
+     */
+    label: string | ReactNode;
+    /**
+     * Content of the modal body.
+     */
+    content?: string[] | ReactNode[];
+    /**
+     * Whether to display the content as bullet points.
+     */
+    showBulletPoints?: boolean;
+    /**
+     * Set the color of the icon displayed in the modal.
+     * @default ConfirmationModalColors.Primary
+     */
+    iconColor?: 'primary' | 'secondary' | 'success' | 'danger';
+    /**
+     * Set the color of the confirmation button.
+     * @default filled
+     */
+    confirmButtonVariant?: 'filled' | 'outlined' | 'danger' | 'success';
+    /**
+     * The visibility of the modal.
+     */
+    isOpen: boolean;
+    /**
+     * The function to call when the confirmation button is clicked.
+     */
+    onConfirm: () => void;
+    /**
+     * The function to call when the cancel button is clicked.
+     */
+    onCancel: () => void;
+    /**
+     * Whether the confirmation button is disabled.
+     */
+    isConfirmationDisabled?: boolean;
+    /**
+     * The leading icon. The available icons are all material icons and icons listed in the AvailableCustomIcons enum.
+     */
+    icon?: IconifyProps['icon'];
+};
+/**
+ * A modal component for confirming actions.
+ *
+ * @param modalTitle The title of the modal.
+ * @param confirmButtonLabel The label of the confirmation button.
+ * @param cancelButtonLabel The label of the cancel button.
+ * @param label The header text of the modal body
+ * @param content Content of the modal body. When providing a string or Element, each will be displayed as is. When providing an array of strings or Elements, each will be displayed as a bullet point.
+ * @param icon The leading icon. The available icons are all material icons and icons listed in the {@link AvailableCustomIcons} enum.
+ * @param [iconColor='primary'] Set the color of the icon displayed in the modal. Default is ConfirmationModalColors.Primary
+ * @param [confirmButtonVariant='filled'] Set the color of the confirmation button. Default is ConfirmationModalColors.Primary
+ * @param isOpen The visibility of the modal.
+ * @param onConfirm The function to call when the confirmation button is clicked.
+ * @param onCancel The function to call when the cancel button is clicked.
+ * @param isConfirmationDisabled Whether the confirmation button is disabled.
+ */
+export declare const ConfirmationModal: ({ modalTitle, confirmButtonLabel, cancelButtonLabel, label, content, showBulletPoints, icon, iconColor, confirmButtonVariant, isOpen, onConfirm, onCancel, isConfirmationDisabled, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { B as s } from "../../index.es-B8p8KCdj.js";
+import { G as o } from "../../index.es-oxil0uFe.js";
+import { T as c } from "../../index.es-SjZ_-d7U.js";
+import { u as C } from "../../useBreakpoints-MzTZ0tCT.js";
+import { Iconify as B } from "../Iconify/Iconify.js";
+import { Modal as H } from "../Modal/Modal.js";
+import '../../assets/ConfirmationModal.css';const N = "_bulletPoint_v4va9_1", P = "_modal_v4va9_7", S = "_primary_v4va9_11", j = "_secondary_v4va9_15", z = "_success_v4va9_19", A = "_danger_v4va9_23", G = "_fullHeight_v4va9_27", t = {
+  bulletPoint: N,
+  modal: P,
+  primary: S,
+  secondary: j,
+  success: z,
+  danger: A,
+  fullHeight: G
+}, E = ({
+  modalTitle: r,
+  confirmButtonLabel: d,
+  cancelButtonLabel: m,
+  label: u,
+  content: a,
+  showBulletPoints: p,
+  icon: n,
+  iconColor: v = "primary",
+  confirmButtonVariant: _ = "filled",
+  isOpen: f,
+  onConfirm: y,
+  onCancel: l,
+  isConfirmationDisabled: g
+}) => {
+  const { isDesktop: h } = C(), b = () => a ? /* @__PURE__ */ e(o, { direction: "vertical", gap: "none", children: a.map((x, k) => /* @__PURE__ */ e(
+    c,
+    {
+      level: 2,
+      className: p ? t.bulletPoint : "",
+      themeColor: "text-secondary-on-background",
+      children: x
+    },
+    k
+  )) }) : null;
+  return /* @__PURE__ */ e(
+    H,
+    {
+      "data-testid": `confirmation-modal-${r}`,
+      className: `${t.modal}`,
+      modalSize: h ? "small" : "fullscreen",
+      open: f,
+      title: r,
+      onClose: l,
+      actionButton: /* @__PURE__ */ e(
+        s,
+        {
+          "data-testid": "confirm-button",
+          variant: _,
+          label: d,
+          onClick: y,
+          disabled: g
+        }
+      ),
+      footerSupplemental: /* @__PURE__ */ e(
+        s,
+        {
+          "data-testid": "cancel-button",
+          variant: "text",
+          label: m,
+          onClick: l
+        }
+      ),
+      children: /* @__PURE__ */ i(
+        o,
+        {
+          className: t.fullHeight,
+          direction: "vertical",
+          primaryAlign: "center",
+          secondaryAlign: "center",
+          children: [
+            n && /* @__PURE__ */ e(B, { icon: n, iconSize: "xlarge", className: t[v] }),
+            /* @__PURE__ */ i(o, { direction: "vertical", children: [
+              /* @__PURE__ */ e(c, { level: 1, themeColor: "text-primary-on-background", children: u }),
+              b()
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  E as ConfirmationModal
+};

package/dist/components/ConfirmationModal/ConfirmationModal.test.d.ts

@@ -0,0 +1 @@
+export {};