@kumori/aurora-wui-components 0.0.280-dev4205.2 → 0.0.281-dev4205.10

package/dist/index.js

@@ -6808,7 +6808,7 @@ var AxebowBaseCard = class AxebowBaseCard extends LitElement {
               </div>
             </div>
 
-            <slot name="extra-features"></slot>
+            ${this.cardType === "tenant" ? html`<div class="w-full h-8"><slot name="extra-features"></slot></div>` : html`<slot name="extra-features"></slot>`}
           </div>
         </div>
 
@@ -8507,12 +8507,17 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
 	}
 	_renderStatusIcon(icon) {
 		if (!icon) return "";
-		const iconEl = icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon
-          iconName=${icon.iconName}
-          iconColor=${icon.iconColor}
-          size="md"
-          class="cursor-pointer shrink-0"
-        ></axebow-icon>`;
+		const iconEl = html`
+      <div
+        class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer"
+        @click=${icon.onClick ? (e) => {
+			e.stopPropagation();
+			icon.onClick();
+		} : null}
+      >
+        ${icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon iconName=${icon.iconName} iconColor=${icon.iconColor} size="md"></axebow-icon>`}
+      </div>
+    `;
 		return icon.tooltip ? html`<axebow-tooltip content=${icon.tooltip}>${iconEl}</axebow-tooltip>` : iconEl;
 	}
 	_renderTableRow(row, index) {
@@ -8540,6 +8545,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
                 ` : html`<span class="w-4 inline-block"></span>`}
             ${row.logoUrl ? html`<img src=${row.logoUrl} alt="logo" class="w-5 h-5 object-contain shrink-0" />` : ""}
             <span class="truncate">${row.name}</span>
+            ${this._renderStatusIcon(row.ctaIcon)}
             ${this._renderStatusIcon(row.statusIcon)}
             <span class="flex-1"></span>
             ${this._renderStatusIcon(row.warningIcon)}
@@ -8597,6 +8603,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
           ></axebow-icon>
           ${subRow.logoUrl ? html`<img src=${subRow.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
           <span class="font-normal text-gray-700 truncate">${subRow.name}</span>
+          ${this._renderStatusIcon(subRow.ctaIcon)}
           <span class="flex-1"></span>
           ${this._renderStatusIcon(subRow.warningIcon)}
         </div>
@@ -8970,6 +8977,145 @@ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "a
 __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "deployLabel", void 0);
 AxebowServiceDetailHeader = __decorate([customElement("axebow-service-detail-header")], AxebowServiceDetailHeader);
 //#endregion
+//#region src/components/axebow-badge/axebow-badge.ts
+var AxebowBadge = class AxebowBadge extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.bgColor = "var(--axebow-base)";
+		this.textColor = "var(--axebow-secondary)";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`
+      :host {
+        display: inline-block;
+      }
+    `];
+	}
+	render() {
+		return html`
+      <div
+        class="inline-flex items-center justify-center px-2 py-px rounded border border-solid text-xs leading-3 font-semibold whitespace-nowrap"
+        style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
+__decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
+AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
+//#endregion
+//#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
+var CRITICALITY_STYLES = {
+	critical: {
+		bg: "var(--axebow-critical-bg)",
+		color: "var(--axebow-error)",
+		iconName: "error"
+	},
+	high: {
+		bg: "var(--axebow-high-bg)",
+		color: "var(--axebow-dark-yellow)",
+		iconName: "warning"
+	},
+	low: {
+		bg: "var(--axebow-base)",
+		color: "var(--axebow-secondary)",
+		iconName: "info"
+	}
+};
+var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.criticality = "low";
+		this.heading = "";
+		this.badgeLabel = "";
+		this.description = "";
+		this.buttons = [];
+		this.lowNoteText = "";
+		this.count = 1;
+	}
+	static {
+		this.styles = [
+			unsafeCSS(tailwind_default),
+			axebowTheme,
+			css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `
+		];
+	}
+	render() {
+		const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
+		return html`
+      <div class="w-full box-border border-t border-solid border-(--axebow-table-header-border) bg-white p-4 flex flex-row items-center gap-4">
+        <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
+          <div class="w-6 h-6 flex items-center justify-center">
+            <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
+          </div>
+        </div>
+
+        <div class="flex-1 min-w-0 flex flex-col gap-1">
+          <div class="w-full flex flex-row items-center gap-2">
+            <span class="text-base font-semibold truncate">${this.heading}</span>
+            ${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
+            ${this.count > 1 ? html`<div
+                  class="w-5 h-5 shrink-0 rounded-full flex items-center justify-center text-sm font-semibold"
+                  style="background-color: ${bg}; color: ${color};"
+                >
+                  ${this.count}
+                </div>` : ""}
+          </div>
+          <div class="w-full text-(--axebow-gray)">${this.description}</div>
+        </div>
+
+        ${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
+      </div>
+    `;
+	}
+	_renderLowNote() {
+		return html`
+      <div
+        class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
+        style="background-color: var(--axebow-base);"
+      >
+        ${this.lowNoteText}
+      </div>
+    `;
+	}
+	_renderButtons() {
+		if (!this.buttons.length) return "";
+		return html`
+      <div class="flex flex-row items-center gap-4 shrink-0">
+        ${this.buttons.map((button) => html`
+            <axebow-button
+              variant=${button.variant ?? "primary"}
+              ?outline=${button.outline ?? false}
+              @click=${() => button.onClick?.()}
+            >
+              ${button.label}
+              ${button.iconName ? html`<axebow-icon
+                    slot="suffix"
+                    iconName=${button.iconName}
+                    iconColor=${button.iconColor ?? "currentColor"}
+                  ></axebow-icon>` : ""}
+            </axebow-button>
+          `)}
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
+__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
+__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
+__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
+__decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
+__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
+__decorate([property({ type: Number })], AxebowCallToActionRow.prototype, "count", void 0);
+AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
+//#endregion
 //#region src/components/axebow-tenant-card/axebow-tenant-card.ts
 var AxebowTenantCard = class AxebowTenantCard extends LitElement {
 	constructor(..._args) {
@@ -8992,6 +9138,9 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
 		this.invitedNoticeText = "";
 		this.showNoAccountsWarning = false;
 		this.noAccountsWarningText = "";
+		this.showCallToActionIssues = false;
+		this.callToActionIssuesText = "";
+		this.callToActionCriticality = "low";
 		this.contentState = "table";
 		this.invitationText = "";
 		this.emptyTextPrefix = "";
@@ -9125,7 +9274,20 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
           ${this.showInvitedNotice ? html`<span class="text-base text-black">${this.invitedNoticeText}</span>` : this.showNoAccountsWarning ? html`<span class="flex items-center gap-1 text-base text-black">
                   <axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
                   ${this.noAccountsWarningText}
-                </span>` : ""}
+                </span>` : this.showCallToActionIssues ? html`<span
+                    class="flex items-center gap-1 text-base cursor-pointer"
+                    style="color: ${CRITICALITY_STYLES[this.callToActionCriticality].color};"
+                    @click=${() => this.onCallToActionClick?.()}
+                  >
+                    <div class="w-5 h-5 shrink-0 flex items-center justify-center">
+                      <axebow-icon
+                        iconName=${CRITICALITY_STYLES[this.callToActionCriticality].iconName}
+                        iconColor=${CRITICALITY_STYLES[this.callToActionCriticality].color}
+                        size="md"
+                      ></axebow-icon>
+                    </div>
+                    ${this.callToActionIssuesText}
+                  </span>` : ""}
         </div>
 
         <div class="w-full">
@@ -9158,6 +9320,10 @@ __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showInvit
 __decorate([property({ type: String })], AxebowTenantCard.prototype, "invitedNoticeText", void 0);
 __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showNoAccountsWarning", void 0);
 __decorate([property({ type: String })], AxebowTenantCard.prototype, "noAccountsWarningText", void 0);
+__decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showCallToActionIssues", void 0);
+__decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionIssuesText", void 0);
+__decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionCriticality", void 0);
+__decorate([property({ attribute: false })], AxebowTenantCard.prototype, "onCallToActionClick", void 0);
 __decorate([property({ type: String })], AxebowTenantCard.prototype, "contentState", void 0);
 __decorate([property({ type: String })], AxebowTenantCard.prototype, "invitationText", void 0);
 __decorate([property({ type: String })], AxebowTenantCard.prototype, "emptyTextPrefix", void 0);
@@ -13426,6 +13592,7 @@ var AxebowModal = class AxebowModal extends LitElement {
 		this.height = "calc(100% - 2rem)";
 		this.title = "";
 		this.description = "";
+		this.closeIconName = "close";
 		this._hasFooterSlotContent = false;
 		this._isScrollLocked = false;
 	}
@@ -13536,8 +13703,12 @@ var AxebowModal = class AxebowModal extends LitElement {
                 ${this.description ? html`<p class="text-(--axebow-gray) mt-1 m-0">${this.description}</p>` : ""}
                 <slot name="description"></slot>
 
-                <div class="close-button" @click=${this._handleClose}>
-                  <axebow-icon iconName="close" size="xl"></axebow-icon>
+                <div
+                  class="close-button"
+                  style=${ifDefined(this.closeButtonSize ? `width: ${this.closeButtonSize}; height: ${this.closeButtonSize}; padding: 0;` : void 0)}
+                  @click=${this._handleClose}
+                >
+                  <axebow-icon iconName=${this.closeIconName} iconColor=${ifDefined(this.closeIconColor)} size="xl"></axebow-icon>
                 </div>
               </div>
             ` : ""}
@@ -13565,145 +13736,65 @@ __decorate([property()], AxebowModal.prototype, "maxHeight", void 0);
 __decorate([property()], AxebowModal.prototype, "height", void 0);
 __decorate([property()], AxebowModal.prototype, "title", void 0);
 __decorate([property()], AxebowModal.prototype, "description", void 0);
+__decorate([property()], AxebowModal.prototype, "closeIconName", void 0);
+__decorate([property()], AxebowModal.prototype, "closeIconColor", void 0);
+__decorate([property()], AxebowModal.prototype, "closeButtonSize", void 0);
 __decorate([state()], AxebowModal.prototype, "_hasFooterSlotContent", void 0);
 AxebowModal = __decorate([customElement("axebow-modal")], AxebowModal);
 //#endregion
-//#region src/components/axebow-badge/axebow-badge.ts
-var AxebowBadge = class AxebowBadge extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.bgColor = "var(--axebow-base)";
-		this.textColor = "var(--axebow-secondary)";
-	}
-	static {
-		this.styles = [unsafeCSS(tailwind_default), css`
-      :host {
-        display: inline-block;
-      }
-    `];
-	}
-	render() {
-		return html`
-      <div
-        class="inline-flex items-center justify-center px-2 py-px rounded border border-solid text-xs leading-3 font-semibold whitespace-nowrap"
-        style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
-      >
-        <slot></slot>
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
-__decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
-AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
-//#endregion
-//#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
-var CRITICALITY_STYLES = {
-	critical: {
-		bg: "var(--axebow-critical-bg)",
-		color: "var(--axebow-error)",
-		iconName: "error"
-	},
-	high: {
-		bg: "var(--axebow-high-bg)",
-		color: "var(--axebow-dark-yellow)",
-		iconName: "warning"
-	},
-	low: {
-		bg: "var(--axebow-base)",
-		color: "var(--axebow-secondary)",
-		iconName: "info"
-	}
-};
-var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.criticality = "low";
-		this.heading = "";
-		this.badgeLabel = "";
-		this.description = "";
-		this.buttons = [];
-		this.lowNoteText = "";
-	}
-	static {
-		this.styles = [
-			unsafeCSS(tailwind_default),
-			axebowTheme,
-			css`
-      :host {
-        display: block;
-        width: 100%;
-      }
-    `
-		];
-	}
-	render() {
-		const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
-		return html`
-      <div class="w-full bg-white p-4 flex flex-row items-center gap-4">
-        <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
-          <div class="w-6 h-6 flex items-center justify-center">
-            <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
-          </div>
-        </div>
-
-        <div class="flex-1 min-w-0 flex flex-col gap-1">
-          <div class="w-full flex flex-row items-center gap-2">
-            <span class="text-base font-semibold truncate">${this.heading}</span>
-            ${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
-          </div>
-          <div class="w-full text-(--axebow-gray)">${this.description}</div>
-        </div>
-
-        ${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
-      </div>
-    `;
-	}
-	_renderLowNote() {
-		return html`
-      <div
-        class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
-        style="background-color: var(--axebow-base);"
-      >
-        ${this.lowNoteText}
-      </div>
-    `;
-	}
-	_renderButtons() {
-		if (!this.buttons.length) return "";
-		return html`
-      <div class="flex flex-row items-center gap-4 shrink-0">
-        ${this.buttons.map((button) => html`
-            <axebow-button
-              variant=${button.variant ?? "primary"}
-              ?outline=${button.outline ?? false}
-              @click=${() => button.onClick?.()}
-            >
-              ${button.label}
-              ${button.iconName ? html`<axebow-icon
-                    slot="suffix"
-                    iconName=${button.iconName}
-                    iconColor=${button.iconColor ?? "currentColor"}
-                  ></axebow-icon>` : ""}
-            </axebow-button>
-          `)}
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
-__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
-__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
-__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
-__decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
-__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
-AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
+//#region src/components/axebow-call-to-action-row/call-to-action-notification.ts
+var DEFAULT_LOW_NOTE_TEXT = "No action needed";
+var BUTTON_TYPE_TO_VARIANT = {
+	primary: "primary",
+	secondary: "tertiary",
+	text: "text"
+};
+function getHighestCriticality(notifications) {
+	if (notifications.some((n) => n.criticality === "critical")) return "critical";
+	if (notifications.some((n) => n.criticality === "high")) return "high";
+	return "low";
+}
+function getCtaHeading(notification) {
+	return (notification.info_content?.code || notification.subtype).replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function getCtaDescription(notification) {
+	return notification.info_content?.message ?? "";
+}
+function getCtaBadgeLabel(notification) {
+	return notification.criticality.charAt(0).toUpperCase() + notification.criticality.slice(1);
+}
+function groupCallToActionNotifications(notifications) {
+	const groups = /* @__PURE__ */ new Map();
+	notifications.forEach((notification) => {
+		const key = `${notification.criticality}|${getCtaHeading(notification)}|${getCtaDescription(notification)}`;
+		const existing = groups.get(key);
+		if (existing) existing.count += 1;
+		else groups.set(key, {
+			notification,
+			count: 1
+		});
+	});
+	return [...groups.values()];
+}
+function buildCtaButtons(notification, dispatch) {
+	return (notification.actions ?? []).map((action) => ({
+		label: action.label,
+		variant: BUTTON_TYPE_TO_VARIANT[action.buttonType] ?? "primary",
+		outline: action.outlined,
+		iconName: action.icon,
+		iconColor: action.iconColor,
+		onClick: () => dispatch({
+			notification,
+			action
+		})
+	}));
+}
 //#endregion
 //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
 var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.notifications = [];
+		this.callToActions = [];
 		this.actionNeededLabel = "Action needed";
 		this.lastUpdatedText = "";
 		this.expanded = false;
@@ -13721,18 +13812,18 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
 		];
 	}
 	get _highestCriticality() {
-		if (this.notifications.some((n) => n?.criticality === "critical")) return "critical";
-		if (this.notifications.some((n) => n?.criticality === "high")) return "high";
-		return "low";
+		return getHighestCriticality(this.callToActions);
 	}
 	_toggle() {
+		if (this.callToActions.length === 0) return;
 		this.expanded = !this.expanded;
 	}
 	render() {
 		const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
 		const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
+		const hasCallToActions = this.callToActions.length > 0;
 		return html`
-      <div class="w-full flex flex-col">
+      <div class="w-full box-border border border-solid border-(--axebow-table-header-border) rounded-lg overflow-hidden flex flex-col">
         <div
           class="w-full box-border py-3 px-5 flex flex-row items-center justify-between"
           style="background-color: ${this.expanded ? "var(--axebow-base)" : "var(--axebow-white)"};"
@@ -13744,7 +13835,7 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
               class="w-6 h-6 shrink-0 rounded-full flex items-center justify-center"
               style="background-color: ${this.expanded ? "var(--axebow-white)" : "var(--axebow-base)"};"
             >
-              <span class="text-base">${this.notifications.length}</span>
+              <span class="text-base">${this.callToActions.length}</span>
             </div>
           </div>
 
@@ -13757,7 +13848,7 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
               <axebow-icon iconName="undo" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
             </div>
             <div
-              class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer"
+              class="w-5 h-5 shrink-0 flex items-center justify-center ${hasCallToActions ? "cursor-pointer" : "cursor-default opacity-50"}"
               @click=${() => this._toggle()}
             >
               <axebow-icon iconName=${chevronIconName} iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
@@ -13765,16 +13856,21 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
           </div>
         </div>
 
-        ${this.expanded ? html`
+        ${this.expanded && hasCallToActions ? html`
               <div class="w-full flex flex-col">
-                ${this.notifications.map((notification) => html`
+                ${groupCallToActionNotifications(this.callToActions).map(({ notification, count }) => html`
                     <axebow-call-to-action-row
-                      criticality=${ifDefined(notification?.criticality)}
-                      heading=${ifDefined(notification?.heading)}
-                      badgeLabel=${ifDefined(notification?.badgeLabel)}
-                      description=${ifDefined(notification?.description)}
-                      lowNoteText=${ifDefined(notification?.lowNoteText)}
-                      .buttons=${notification?.buttons ?? []}
+                      criticality=${notification.criticality}
+                      heading=${getCtaHeading(notification)}
+                      badgeLabel=${getCtaBadgeLabel(notification)}
+                      description=${getCtaDescription(notification)}
+                      lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
+                      count=${count}
+                      .buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
+			detail,
+			bubbles: true,
+			composed: true
+		})))}
                     ></axebow-call-to-action-row>
                   `)}
               </div>
@@ -13783,7 +13879,7 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
     `;
 	}
 };
-__decorate([property({ type: Array })], AxebowCallToActionFeature.prototype, "notifications", void 0);
+__decorate([property({ type: Array })], AxebowCallToActionFeature.prototype, "callToActions", void 0);
 __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "actionNeededLabel", void 0);
 __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "lastUpdatedText", void 0);
 __decorate([state()], AxebowCallToActionFeature.prototype, "expanded", void 0);
@@ -13816,23 +13912,31 @@ var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {
         width="76.25rem"
         maxWidth="100%"
         height="auto"
+        closeIconName="cancel"
+        closeIconColor="#8A94AE"
+        closeButtonSize="1.5rem"
         @close=${() => this._handleClose()}
       >
         <div class="flex flex-col gap-2 p-6">
-          ${this.notifications.map((notification) => html`
+          ${groupCallToActionNotifications(this.notifications).map(({ notification, count }) => html`
               <axebow-call-to-action-row
-                criticality=${ifDefined(notification?.criticality)}
-                heading=${ifDefined(notification?.heading)}
-                badgeLabel=${ifDefined(notification?.badgeLabel)}
-                description=${ifDefined(notification?.description)}
-                lowNoteText=${ifDefined(notification?.lowNoteText)}
-                .buttons=${notification?.buttons ?? []}
+                criticality=${notification.criticality}
+                heading=${getCtaHeading(notification)}
+                badgeLabel=${getCtaBadgeLabel(notification)}
+                description=${getCtaDescription(notification)}
+                lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
+                count=${count}
+                .buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
+			detail,
+			bubbles: true,
+			composed: true
+		})))}
               ></axebow-call-to-action-row>
             `)}
         </div>
 
         <div slot="footer" class="flex items-center justify-end p-4">
-          <axebow-button variant="primary" @click=${() => this._handleClose()}>${this.goBackLabel}</axebow-button>
+          <axebow-button variant="primary" outline @click=${() => this._handleClose()}>${this.goBackLabel}</axebow-button>
         </div>
       </axebow-modal>
     `;
@@ -13848,6 +13952,6 @@ __decorate([property({ type: Array })], AxebowCtaDialog.prototype, "notification
 __decorate([property({ attribute: false })], AxebowCtaDialog.prototype, "onClose", void 0);
 AxebowCtaDialog = __decorate([customElement("axebow-cta-dialog")], AxebowCtaDialog);
 //#endregion
-export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBadge, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCallToActionFeature, AxebowCallToActionRow, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowCtaDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDivider, AxebowDragDropUploadFile, AxebowDraggableService, AxebowEmptyState, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowGraph, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorCard, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CRITICALITY_STYLES, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
+export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBadge, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCallToActionFeature, AxebowCallToActionRow, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowCtaDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDivider, AxebowDragDropUploadFile, AxebowDraggableService, AxebowEmptyState, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowGraph, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorCard, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CRITICALITY_STYLES, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DEFAULT_LOW_NOTE_TEXT, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildCtaButtons, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon, getCtaBadgeLabel, getCtaDescription, getCtaHeading, getHighestCriticality, groupCallToActionNotifications };
 
 //# sourceMappingURL=index.js.map