@e-llm-studio/instant-learning 1.3.2 → 1.3.4

package/dist/features/LearningManagement/RuleContent/VariantCard.js

@@ -1,2 +1,589 @@
-import{__assign as e,__awaiter as n,__generator as t}from"tslib";import{jsxs as i,jsx as r,Fragment as o}from"react/jsx-runtime";import{useState as a,useEffect as l,useRef as s}from"react";import{format as c}from"date-fns/format";import{isValid as d}from"date-fns/isValid";import{parseISO as u}from"date-fns/parseISO";import{MoreVertical as p,Pause as v,Play as m,Copy as h,Eye as f,Info as g,TriangleAlert as y}from"lucide-react";import{toggleVariant as b}from"../apis/scopeApis.js";import{HistorySkeleton as T}from"./HistorySkeleton.js";import A from"./InheritanceBreadcrumb.js";import C from"./RuleConditionBlock.js";import N from"./InstructionPromptBlock.js";import j from"../styles/VariantCard.module.css.js";import w from"../styles/CustomTooltip.module.css.js";import I from"../components/CustomTooltip.js";import x from"../components/ConfirmationModal.js";import D from"./OverrideTimeline.js";import L from"../store/useAuthStore.js";import{usePermissionsStore as O}from"../store/usePermissionsStore.js";import B from"./PendingApprovalChip.js";import S from"./ApprovalActionButton.js";import k from"./ApprovalLearningDialog.js";import{useApproveOrRejectVariantsMutation as F}from"../queries/useApprovalQueries.js";import E from"../store/useEnvStore.js";import{dt as _}from"../store/useLMSConfigStore.js";import{VARIANT_DT_PATH as H}from"../constants.js";import{useLearningTemplateStore as P}from"../store/useLearningTemplateStore.js";var M=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e.filter(Boolean).join(" ")},R=function(e){if(!e)return{};var n=function(e){return"scheduling_config"!==e};return e.properties&&"object"==typeof e.properties?Object.entries(e.properties).reduce(function(e,t){var i,r=t[0],o=t[1];return n(r)?(e[r]="string"==typeof o?o:null!==(i=null==o?void 0:o.value)&&void 0!==i?i:"",e):e},{}):Object.entries(e).reduce(function(e,t){var i=t[0],r=t[1];return n(i)&&"string"==typeof r?(e[i]=r,e):e},{})},V=function(V){var W,z,U,G,q,Z,$,K,Q,Y=V.ruleTitle,J=V.variant,X=V.variantIndex,ee=V.totalVariants,ne=V.ruleId;V.pendingApprovalCount;var te=V.ruleSetId,ie=V.tierName,re=V.displayLabel,oe=V.onEdit,ae=V.onDelete,le=V.onFetchOverrideHistory,se=V.editButtonLabel,ce=void 0===se?_("".concat(H,".actions.edit"),"Edit"):se,de=V.deleteButtonLabel,ue=void 0===de?_("".concat(H,".actions.delete"),"Delete"):de,pe=V.instructionPromptLabel,ve=void 0===pe?_("".concat(H,".instructionPrompt"),"Learning Metadata"):pe,me=V.whenToApplyLabel,he=void 0===me?_("".concat(H,".whenToApply"),"When to Apply"):me,fe=V.whenNotToApplyLabel,ge=void 0===fe?_("".concat(H,".whenNotToApply"),"When Not to Apply"):fe,ye=V.noConditionsText,be=void 0===ye?"No conditions":ye,Te=V.viewOverrideLabel,Ae=void 0===Te?"View Override History":Te,Ce=V.hideOverrideLabel,Ne=void 0===Ce?"Hide Override History":Ce,je=V.enableLearningVariantLabel,we=void 0===je?_("".concat(H,".actions.enable"),"Enable"):je,Ie=V.disableLearningVariantLabel,xe=void 0===Ie?_("".concat(H,".actions.disable"),"Disable"):Ie,De=V.historyErrorMessage,Le=void 0===De?"Failed to load override history.":De,Oe=V.resolveGapsLabel,Be=void 0===Oe?"This learning has some gaps":Oe,Se=V.showActionsBar,ke=void 0===Se||Se,Fe=V.showDescriptionBox,Ee=void 0===Fe||Fe,_e=V.showConditions,He=void 0===_e||_e,Pe=V.showInheritance,Me=void 0===Pe||Pe,Re=V.defaultInstructionPromptOpen,Ve=void 0===Re||Re,We=V.defaultApplyOpen,ze=void 0===We||We,Ue=V.defaultNotApplyOpen,Ge=void 0===Ue||Ue,qe=V.className,Ze=V.isHighlighted,$e=void 0!==Ze&&Ze,Ke=V.highlightAction,Qe=V.highlightedTierNames,Ye=V.highlightedVariantIds,Je=V.headerContent,Xe=V.footerContent,en=V.onToggleSuccess,nn=V.setDeleteConfirmationUsedFor,tn=V.onCopyToTier,rn=V.onSetInitialDraftMessage,on=L.getState().user,an=P.getState().tiers,ln=P.getState().backwardCompatibility,sn=P(function(e){return e.isPublishedReadOnly}),cn=ln?["Tier 1","Tier 2","Tier 3"]:an.map(function(e){return e.tier_name.replace(/(\d+)/," $1").replace(/\b\w/g,function(e){return e.toUpperCase()}).trim()}),dn=a(Ve),un=dn[0],pn=dn[1],vn=a(ze),mn=vn[0],hn=vn[1],fn=a(Ge),gn=fn[0],yn=fn[1],bn=a(R(J.learning_metadata)),Tn=bn[0],An=bn[1];l(function(){An(R(J.learning_metadata))},[J.variantId,J.learning_metadata]);var Cn=a(!1),Nn=Cn[0],jn=Cn[1],wn=a(!1),In=wn[0],xn=wn[1],Dn=a(null),Ln=Dn[0],On=Dn[1],Bn=a(null),Sn=Bn[0],kn=Bn[1],Fn=a(!1),En=Fn[0],_n=Fn[1],Hn=a(!1),Pn=Hn[0],Mn=Hn[1],Rn=s(null),Vn=!1!==J.is_enabled,Wn=a(!1),zn=Wn[0],Un=Wn[1],Gn=s(null),qn=a({isOpen:!1,mode:"approve"}),Zn=qn[0],$n=qn[1],Kn=F(),Qn=E(function(e){return e.rbacConfig}),Yn=Qn?{application:Qn.applicationId,scopeLevelModuleId:null!==(W=null==Qn?void 0:Qn.moduleId)&&void 0!==W?W:"",applicationLevelModuleId:null!==(z=null==Qn?void 0:Qn.applicationModuleId)&&void 0!==z?z:"",applicationLevelResourceId:null!==(U=null==Qn?void 0:Qn.applicationResourceId)&&void 0!==U?U:""}:void 0,Jn=O(function(e){return e.hasPermission}),Xn=te,et=J.inheritance&&J.inheritance.length>1,nt=!sn&&(Jn("ilotj.rule.variant.edit",Xn)||Jn(et?"ilotj.rule.variant.inherited.edit":"ilotj.rule.variant.nonInherited.edit",Xn)),tt=!sn&&(Jn("ilotj.rule.variant.enable",Xn)||Jn(et?"ilotj.rule.variant.inherited.enable":"ilotj.rule.variant.nonInherited.enable",Xn)),it=!sn&&(Jn("ilotj.rule.variant.disable",Xn)||Jn(et?"ilotj.rule.variant.inherited.disable":"ilotj.rule.variant.nonInherited.disable",Xn)),rt=!sn&&Jn("ilotj.rule.variant.delete",Xn),ot=!sn&&Jn("ilotj.rule.selfApprove",Xn),at=!sn&&Jn("ilotj.rule.approve",Xn),lt=!sn&&Jn("ilotj.scope.approve",Xn),st=!sn&&Jn("ilotj.rule.pendingApproval.view",Xn),ct=!sn&&Jn("ilotj.rule.variant.pendingApproval.edit",Xn),dt=ot||at||lt||ct,ut=st||dt,pt="pending_approval"===(null==J?void 0:J.approvalStatus),vt="rejected"===(null==J?void 0:J.approvalStatus),mt=dt&&pt;l(function(){var e=function(e){Rn.current&&!Rn.current.contains(e.target)&&_n(!1)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}},[]);var ht=(null===(G=null==Ln?void 0:Ln.wta)||void 0===G?void 0:G.changeLog)||[],ft=(null===(q=null==Ln?void 0:Ln.wnta)||void 0===q?void 0:q.changeLog)||[],gt=$e&&Qe&&ie?Qe.filter(function(e){return e!==ie}):[],yt=gt.length>0&&ie?gt.every(function(e){return e>ie})?"↓":"↑":"↓",bt=function(){if(Ye)for(var e=Array.from(Ye),n=0;n<e.length;n++)if(e[n]!==J.variantId){var t=document.querySelector('[data-variant-id="'.concat(e[n],'"]'));if(t){t.scrollIntoView({behavior:"smooth",block:"center"});break}}},Tt=function(e,n){e.stopPropagation(),$n({isOpen:!0,mode:n})},At=function(e){if(!e)return"";try{var n=e.endsWith("Z")||/[+-]\d{2}:\d{2}$/.test(e)?e:"".concat(e,"Z"),t=u(n);return d(t)?c(t,"MMM d, yyyy 'at' h:mm a"):e}catch(n){return e}},Ct=function(e){return e?e.includes("@")?e.split("@")[0].split(".").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join(" "):e:""};return i("div",e({className:M(j.variantCard,$e&&j.variantHighlight,qe),"data-variant-id":J.variantId},{children:[i("div",e({className:j.variantHeader,style:{alignItems:"flex-start",gap:"0.75rem"}},{children:[i("div",e({className:j.variantLabelSection,style:{display:"flex",flexWrap:"wrap"}},{children:[r("span",e({className:j.variantLabel},{children:"Default"===J.variantType&&"Default"!==re?"Default | ".concat(re):re})),$e&&Ke&&r("span",e({className:M(j.actionChip,"new"===Ke?j.actionChipNew:j.actionChipUpdated)},{children:"new"===Ke?"Created":"Updated"})),(null==J?void 0:J.isOverridden)&&r(I,e({content:"Inherited from the ".concat((null===(Z=J.inheritance)||void 0===Z?void 0:Z[(null===($=J.inheritance)||void 0===$?void 0:$.length)-2])||"parent"," scope and overridden in this scope."),placement:"top",withArrow:!0,contentClassName:w.customTooltip,sideOffset:5},{children:r("span",e({className:j.overriddenTag},{children:"Overridden"}))})),ut&&pt&&r(B,{}),vt&&r("span",e({style:{backgroundColor:"#FEF2F2",color:"#EF4444",border:"1px solid #FECACA",padding:"2px 8px",borderRadius:"9999px",fontSize:"0.75rem",fontWeight:500,display:"inline-flex",alignItems:"center"}},{children:"Rejected"})),!Vn&&r("span",e({className:j.learningDisabledPill},{children:"Disabled"})),Me&&1!==ee&&0!==X&&r("div",e({className:j.inheritanceSection},{children:r(A,{inheritance:J.inheritance||[]})}))]})),ke&&!sn&&i("div",e({className:j.variantActions},{children:[mt&&i(o,{children:[r(S,{variant:"approve",text:"Approve",onClick:function(e){return Tt(e,"approve")}}),r(S,{variant:"reject",text:"Reject",onClick:function(e){return Tt(e,"reject")}})]}),oe&&nt&&!J.is_drafted&&r("button",e({className:j.editButton,onClick:function(){null==oe||oe(J,ne,ie,"edit")}},{children:ce})),ae&&rt&&"Default"!==J.variantType&&r("button",e({className:j.deleteButton,onClick:function(){null==nn||nn("variantDeletion"),null==ae||ae(J.variantId,ne)}},{children:ue})),i("div",e({className:j.menuWrapper,ref:Rn},{children:[r("button",e({onClick:function(){return _n(!En)},className:"".concat(j.menuTrigger," ").concat(En?j.menuTriggerActive:"")},{children:r(p,{size:16})})),En&&i("div",e({className:j.menuDropdown},{children:[(Vn&&it||!Vn&&tt)&&i("button",e({onClick:function(){return n(void 0,void 0,void 0,function(){return t(this,function(e){return _n(!1),Un(!0),[2]})})},disabled:Pn,className:"".concat(j.menuItem," ").concat(Pn?j.menuItemDisabled:"")},{children:[r(Vn?v:m,{size:14}),Vn?xe:we]})),ie&&cn.length>1&&cn.filter(function(e){return e!==ie}).map(function(n){return i("button",e({onClick:function(){var e="Add a new learning in ".concat(n," with the following details:\nLearning Title: ").concat(Y,"\nLearning Description: ").concat(J.description,"\nWhen to apply: ").concat(J.whenToApply,"\nWhen not to apply: ").concat(J.whenNotToApply);null==rn||rn(e),_n(!1),null==tn||tn(J,ne,Y||"",ie,n)},className:j.menuItem},{children:[r(h,{size:14}),"Copy to ",n]}),n)}),le&&(null!==(Q=null===(K=J.inheritance)||void 0===K?void 0:K.length)&&void 0!==Q?Q:0)>1&&i("button",e({onClick:function(){_n(!1),n(void 0,void 0,void 0,function(){var e;return t(this,function(n){switch(n.label){case 0:if(Nn)return jn(!1),[2];if(jn(!0),!le)return[2];xn(!0),kn(null),n.label=1;case 1:return n.trys.push([1,3,4,5]),[4,le(ne,J.variantId)];case 2:return e=n.sent(),On(e),[3,5];case 3:return n.sent(),kn(Le),[3,5];case 4:return xn(!1),[7];case 5:return[2]}})})},className:j.menuItem},{children:[r(f,{size:14}),Nn?Ne:Ae]}))]}))]}))]}))]})),Je,Ee&&J.description&&i("div",e({className:j.descriptionBox},{children:[r("p",e({className:j.descriptionText},{children:J.description})),Nn&&(In?r(T,{}):Sn?r("p",e({className:j.errorText},{children:Sn})):(null==Ln?void 0:Ln.ruleDescription)?r(D,{changeLog:Ln.ruleDescription.changeLog}):r("p",e({className:j.noHistoryText},{children:"No override history found"})))]})),He&&i("div",e({className:j.conditionsContainer},{children:[Tn&&Object.keys(Tn).length>0&&r(N,{metadata:Tn,isOpen:un,onToggle:function(){return pn(!un)},labelText:ve}),r(C,{type:"apply",conditions:J.whenToApply||"",isOpen:mn,onToggle:function(){return hn(!mn)},labelText:he,noConditionsText:be,showOverrideHistory:Nn,isLoadingHistory:In,historyError:Sn,overrideHistoryData:ht}),r(C,{type:"notApply",conditions:J.whenNotToApply||"",isOpen:gn,onToggle:function(){return yn(!gn)},labelText:ge,noConditionsText:be,showOverrideHistory:Nn,isLoadingHistory:In,historyError:Sn,overrideHistoryData:ft})]})),$e&&gt.length>0&&i("div",e({className:j.crossTierBanner},{children:[r(g,{className:j.crossTierBannerIcon}),i("span",e({className:j.crossTierBannerText},{children:["Also created in ",gt.join(", "),"."]})),i("span",e({className:j.crossTierBannerLink,onClick:bt,role:"button",tabIndex:0,onKeyDown:function(e){return"Enter"===e.key&&bt()}},{children:["Scroll to view ",yt]}))]})),Xe,(J.createdBy||J.createdAt)&&i("div",e({className:j.variantFooter},{children:[!0===J.is_user_accepted_risk&&i("div",e({className:j.resolveGaps},{children:[r(y,{size:14,color:"#EF4444"}),r("span",e({className:j.resolveGapsText},{children:Be})),!sn&&nt&&r("button",e({onClick:function(){null==oe||oe(J,ne,ie,"resolve_gaps")},className:j.resolveButton},{children:"Resolve"}))]})),r("div",e({className:j.variantFooterContent},{children:J.updatedBy||J.updatedAt?i(o,{children:[J.updatedBy&&r(I,e({content:J.createdBy?"Created by ".concat(Ct(J.createdBy)):"",contentClassName:w.customTooltip,sideOffset:5,placement:"top"},{children:i("span",e({className:j.variantFooterItem},{children:["Updated by ",Ct(J.updatedBy)]}))})),J.updatedBy&&J.updatedAt&&r("span",e({className:j.variantFooterSeparator},{children:"•"})),J.updatedAt&&r(I,e({content:J.createdAt?"Created at ".concat(At(J.createdAt)):"",contentClassName:w.customTooltip,sideOffset:5,placement:"top"},{children:r("span",e({className:j.variantFooterItem},{children:At(J.updatedAt)}))}))]}):i(o,{children:[J.createdBy&&i("span",e({className:j.variantFooterItem},{children:["Created by ",Ct(J.createdBy)]})),J.createdBy&&J.createdAt&&r("span",e({className:j.variantFooterSeparator},{children:"•"})),J.createdAt&&r("span",e({className:j.variantFooterItem},{children:At(J.createdAt)}))]})}))]})),r(x,{isOpen:zn,title:Vn?_("".concat(H,".disableDialog.title"),"Disable Learning?"):_("".concat(H,".enableDialog.title"),"Enable Learning?"),description:Vn?_("".concat(H,".disableDialog.desc"),"Are you sure you want to disable learning for this variant in {rule_title}?",{rule_title:null!=Y?Y:""}):_("".concat(H,".enableDialog.desc"),"Are you sure you want to enable learning for this variant in {rule_title}?",{rule_title:null!=Y?Y:""}),warning:Vn?_("".concat(H,".disableDialog.warningText"),"This learning will no longer influence upcoming schedules. You can enable it again anytime."):_("".concat(H,".enableDialog.warningText"),"This learning will start influencing upcoming schedules again."),confirmText:Vn?_("".concat(H,".disableDialog.deleteText"),"Disable"):_("".concat(H,".enableDialog.deleteText"),"Enable"),cancelText:_("".concat(H,Vn?".disableDialog.cancelText":".enableDialog.cancelText"),"Cancel"),loadingText:_("".concat(H,Vn?".disableDialog.loadingText":".enableDialog.loadingText"),"Processing..."),confirmBgColor:Vn?"#DC2626":"#16A34A",onConfirm:function(){return n(void 0,void 0,void 0,function(){var e;return t(this,function(n){switch(n.label){case 0:Mn(!0),n.label=1;case 1:return n.trys.push([1,3,4,5]),null==on?void 0:on.email,[4,b([J.variantId],!Vn)];case 2:return n.sent(),null==en||en(),[3,5];case 3:return e=n.sent(),console.error("Failed to toggle variant",e),[3,5];case 4:return Mn(!1),_n(!1),Un(!1),[7];case 5:return[2]}})})},onCancel:function(){return Un(!1)},isLoading:Pn,position:"fixed"}),r(k,{open:Zn.isOpen,mode:Zn.mode,onClose:function(){return $n(function(n){return e(e({},n),{isOpen:!1})})},onSubmit:function(n){te&&Kn.mutate({variantIds:[J.variantId],status:"approve"===Zn.mode?"approved":"rejected",feedback:n.feedback,is_deleted:n.deleteLearning,scopeId:te,appsecData:Yn},{onSuccess:function(){var n;$n(function(n){return e(e({},n),{isOpen:!1})}),null==en||en(),null===(n=Gn.current)||void 0===n||n.show({severity:"success",summary:"".concat("approve"===Zn.mode?"Approved":"Rejected"," Successfully"),detail:"Learning ".concat("approve"===Zn.mode?"approved":"rejected"," successfully.")})},onError:function(e){var n;console.error("An error occurred.",e),null===(n=Gn.current)||void 0===n||n.show({severity:"error",summary:"Action Failed",detail:"There was an error processing the learning. Please try again."})}})},variantInformation:"".concat(Y," — ").concat(re),ruleTitle:Y,pendingVariants:[J],isPending:Kn.isPending})]}))};export{V as default};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { format } from 'date-fns/format';
+import { isValid } from 'date-fns/isValid';
+import { parseISO } from 'date-fns/parseISO';
+import { MoreVertical, Pause, Play, Copy, Eye, Info, TriangleAlert } from 'lucide-react';
+import { toggleVariant } from '../apis/scopeApis.js';
+import { HistorySkeleton } from './HistorySkeleton.js';
+import InheritanceBreadcrumb from './InheritanceBreadcrumb.js';
+import RuleConditionBlock from './RuleConditionBlock.js';
+import InstructionPromptBlock from './InstructionPromptBlock.js';
+import styles from '../styles/VariantCard.module.css.js';
+import tooltipStyles from '../styles/CustomTooltip.module.css.js';
+import CustomTooltip from '../components/CustomTooltip.js';
+import ConfirmationModal from '../components/ConfirmationModal.js';
+import OverrideTimeline from './OverrideTimeline.js';
+import useAuthStore from '../store/useAuthStore.js';
+import { usePermissionsStore } from '../store/usePermissionsStore.js';
+import PendingApprovalChip from './PendingApprovalChip.js';
+import ApprovalActionButton from './ApprovalActionButton.js';
+import ApprovalLearningDialog from './ApprovalLearningDialog.js';
+import { useApproveOrRejectVariantsMutation } from '../queries/useApprovalQueries.js';
+import useEnvStore from '../store/useEnvStore.js';
+import { dt } from '../store/useLMSConfigStore.js';
+import { VARIANT_DT_PATH } from '../constants.js';
+import { useLearningTemplateStore } from '../store/useLearningTemplateStore.js';
+
+const classNames = (...classes) => {
+  return classes.filter(Boolean).join(" ");
+};
+const extractInstructionMetadata = (metadata) => {
+  if (!metadata) return {};
+  const isAllowedMetadataKey = (key) => key !== "scheduling_config";
+  if (metadata.properties && typeof metadata.properties === "object") {
+    return Object.entries(metadata.properties).reduce((acc, [key, field]) => {
+      var _a;
+      if (!isAllowedMetadataKey(key)) return acc;
+      acc[key] = typeof field === "string" ? field : (_a = field == null ? void 0 : field.value) != null ? _a : "";
+      return acc;
+    }, {});
+  }
+  return Object.entries(metadata).reduce((acc, [key, value]) => {
+    if (!isAllowedMetadataKey(key) || typeof value !== "string") return acc;
+    acc[key] = value;
+    return acc;
+  }, {});
+};
+const VariantCard = ({
+  ruleTitle,
+  variant,
+  variantIndex,
+  totalVariants,
+  ruleId,
+  pendingApprovalCount = 0,
+  ruleSetId,
+  tierName,
+  displayLabel,
+  onEdit,
+  onDelete,
+  onFetchOverrideHistory,
+  // Labels
+  editButtonLabel = dt(`${VARIANT_DT_PATH}.actions.edit`, "Edit"),
+  deleteButtonLabel = dt(`${VARIANT_DT_PATH}.actions.delete`, "Delete"),
+  instructionPromptLabel = dt(`${VARIANT_DT_PATH}.instructionPrompt`, "Learning Metadata"),
+  whenToApplyLabel = dt(`${VARIANT_DT_PATH}.whenToApply`, "When to Apply"),
+  whenNotToApplyLabel = dt(`${VARIANT_DT_PATH}.whenNotToApply`, "When Not to Apply"),
+  noConditionsText = "No conditions",
+  viewOverrideLabel = "View Override History",
+  hideOverrideLabel = "Hide Override History",
+  enableLearningVariantLabel = dt(`${VARIANT_DT_PATH}.actions.enable`, "Enable"),
+  disableLearningVariantLabel = dt(`${VARIANT_DT_PATH}.actions.disable`, "Disable"),
+  historyErrorMessage = "Failed to load override history.",
+  resolveGapsLabel = "This learning has some gaps",
+  // UI Controls
+  showActionsBar = true,
+  showDescriptionBox = true,
+  showConditions = true,
+  showInheritance = true,
+  defaultInstructionPromptOpen = true,
+  defaultApplyOpen = true,
+  defaultNotApplyOpen = true,
+  className,
+  isHighlighted = false,
+  highlightAction,
+  highlightedTierNames,
+  highlightedVariantIds,
+  headerContent,
+  footerContent,
+  onToggleSuccess,
+  setDeleteConfirmationUsedFor,
+  onCopyToTier,
+  onSetInitialDraftMessage
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const user = useAuthStore.getState().user;
+  const tiers = useLearningTemplateStore.getState().tiers;
+  const backwardCompatibility = useLearningTemplateStore.getState().backwardCompatibility;
+  const isPublishedReadOnly = useLearningTemplateStore((state) => state.isPublishedReadOnly);
+  const tierOptions = backwardCompatibility ? ["Tier 1", "Tier 2", "Tier 3"] : tiers.map(
+    (t) => t.tier_name.replace(/(\d+)/, " $1").replace(/\b\w/g, (char) => char.toUpperCase()).trim()
+  );
+  const [isInstructionPromptOpen, setIsInstructionPromptOpen] = useState(
+    defaultInstructionPromptOpen
+  );
+  const [isApplyOpen, setIsApplyOpen] = useState(defaultApplyOpen);
+  const [isNotApplyOpen, setIsNotApplyOpen] = useState(defaultNotApplyOpen);
+  const [learningMetadata, setLearningMetadata] = useState(
+    extractInstructionMetadata(variant.learning_metadata)
+  );
+  useEffect(() => {
+    setLearningMetadata(extractInstructionMetadata(variant.learning_metadata));
+  }, [variant.variantId, variant.learning_metadata]);
+  const [showHistory, setShowHistory] = useState(false);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const [historyData, setHistoryData] = useState(null);
+  const [historyError, setHistoryError] = useState(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isToggling, setIsToggling] = useState(false);
+  const menuRef = useRef(null);
+  const isEnabled = variant.is_enabled !== false;
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const toast = useRef(null);
+  const [approvalModalState, setApprovalModalState] = useState({ isOpen: false, mode: "approve" });
+  const approveOrRejectMutation = useApproveOrRejectVariantsMutation();
+  const rbacConfig = useEnvStore((state) => state.rbacConfig);
+  const appsecData = rbacConfig ? {
+    application: rbacConfig.applicationId,
+    scopeLevelModuleId: (_a = rbacConfig == null ? void 0 : rbacConfig.moduleId) != null ? _a : "",
+    applicationLevelModuleId: (_b = rbacConfig == null ? void 0 : rbacConfig.applicationModuleId) != null ? _b : "",
+    applicationLevelResourceId: (_c = rbacConfig == null ? void 0 : rbacConfig.applicationResourceId) != null ? _c : ""
+  } : void 0;
+  const hasPermission = usePermissionsStore((state) => state.hasPermission);
+  const permissionResourceId = ruleSetId;
+  const isInheritedVariant = variant.inheritance && variant.inheritance.length > 1;
+  const canEditVariant = !isPublishedReadOnly && (hasPermission("ilotj.rule.variant.edit", permissionResourceId) || (isInheritedVariant ? hasPermission("ilotj.rule.variant.inherited.edit", permissionResourceId) : hasPermission("ilotj.rule.variant.nonInherited.edit", permissionResourceId)));
+  const canEnableVariant = !isPublishedReadOnly && (hasPermission("ilotj.rule.variant.enable", permissionResourceId) || (isInheritedVariant ? hasPermission("ilotj.rule.variant.inherited.enable", permissionResourceId) : hasPermission("ilotj.rule.variant.nonInherited.enable", permissionResourceId)));
+  const canDisableVariant = !isPublishedReadOnly && (hasPermission("ilotj.rule.variant.disable", permissionResourceId) || (isInheritedVariant ? hasPermission("ilotj.rule.variant.inherited.disable", permissionResourceId) : hasPermission("ilotj.rule.variant.nonInherited.disable", permissionResourceId)));
+  const canDeleteVariant = !isPublishedReadOnly && hasPermission("ilotj.rule.variant.delete", permissionResourceId);
+  const canRuleSelfApprove = !isPublishedReadOnly && hasPermission("ilotj.rule.selfApprove", permissionResourceId);
+  const canRuleApprove = !isPublishedReadOnly && hasPermission("ilotj.rule.approve", permissionResourceId);
+  const canScopeApprove = !isPublishedReadOnly && hasPermission("ilotj.scope.approve", permissionResourceId);
+  const canPendingApprovalView = !isPublishedReadOnly && hasPermission(
+    "ilotj.rule.pendingApproval.view",
+    permissionResourceId
+  );
+  const canPendingApprovalEdit = !isPublishedReadOnly && hasPermission(
+    "ilotj.rule.variant.pendingApproval.edit",
+    permissionResourceId
+  );
+  const canManagePendingApprovals = canRuleSelfApprove || canRuleApprove || canScopeApprove || canPendingApprovalEdit;
+  const canViewPendingApprovals = canPendingApprovalView || canManagePendingApprovals;
+  const isPendingApproval = (variant == null ? void 0 : variant.approvalStatus) === "pending_approval";
+  const isRejected = (variant == null ? void 0 : variant.approvalStatus) === "rejected";
+  const shouldShowVariantApprovalActions = canManagePendingApprovals && isPendingApproval;
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleToggleEnableClick = async () => {
+    setIsMenuOpen(false);
+    setShowConfirmModal(true);
+  };
+  const handleConfirmToggle = async () => {
+    var _a2;
+    setIsToggling(true);
+    try {
+      const updatedByEmail = (_a2 = user == null ? void 0 : user.email) != null ? _a2 : "";
+      await toggleVariant([variant.variantId], !isEnabled, updatedByEmail);
+      onToggleSuccess == null ? void 0 : onToggleSuccess();
+    } catch (err) {
+      console.error("Failed to toggle variant", err);
+    } finally {
+      setIsToggling(false);
+      setIsMenuOpen(false);
+      setShowConfirmModal(false);
+    }
+  };
+  const handleEditClick = () => {
+    onEdit == null ? void 0 : onEdit(variant, ruleId, tierName, "edit");
+  };
+  const handleResolveClick = () => {
+    onEdit == null ? void 0 : onEdit(variant, ruleId, tierName, "resolve_gaps");
+  };
+  const handleDeleteClick = () => {
+    setDeleteConfirmationUsedFor == null ? void 0 : setDeleteConfirmationUsedFor("variantDeletion");
+    onDelete == null ? void 0 : onDelete(variant.variantId, ruleId);
+  };
+  const handleToggleHistory = async () => {
+    if (showHistory) {
+      setShowHistory(false);
+      return;
+    }
+    setShowHistory(true);
+    if (!onFetchOverrideHistory) {
+      return;
+    }
+    setIsLoadingHistory(true);
+    setHistoryError(null);
+    try {
+      const data = await onFetchOverrideHistory(ruleId, variant.variantId);
+      setHistoryData(data);
+    } catch (e) {
+      setHistoryError(historyErrorMessage);
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  };
+  const wtaChangeLog = ((_d = historyData == null ? void 0 : historyData.wta) == null ? void 0 : _d.changeLog) || [];
+  const wntaChangeLog = ((_e = historyData == null ? void 0 : historyData.wnta) == null ? void 0 : _e.changeLog) || [];
+  const otherTierNames = isHighlighted && highlightedTierNames && tierName ? highlightedTierNames.filter((t) => t !== tierName) : [];
+  const scrollArrow = otherTierNames.length > 0 && tierName ? otherTierNames.every((t) => t > tierName) ? "\u2193" : "\u2191" : "\u2193";
+  const handleScrollToOtherTier = () => {
+    if (!highlightedVariantIds) return;
+    const ids = Array.from(highlightedVariantIds);
+    for (let i = 0; i < ids.length; i++) {
+      if (ids[i] === variant.variantId) continue;
+      const el = document.querySelector(`[data-variant-id="${ids[i]}"]`);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+        break;
+      }
+    }
+  };
+  const handleApprovalButtonClick = (e, action) => {
+    e.stopPropagation();
+    setApprovalModalState({ isOpen: true, mode: action });
+  };
+  const handleApprovalSubmit = (data) => {
+    if (!ruleSetId) return;
+    approveOrRejectMutation.mutate(
+      {
+        variantIds: [variant.variantId],
+        status: approvalModalState.mode === "approve" ? "approved" : "rejected",
+        feedback: data.feedback,
+        is_deleted: data.deleteLearning,
+        scopeId: ruleSetId,
+        appsecData
+      },
+      {
+        onSuccess: () => {
+          var _a2;
+          setApprovalModalState((prev) => ({ ...prev, isOpen: false }));
+          onToggleSuccess == null ? void 0 : onToggleSuccess();
+          (_a2 = toast.current) == null ? void 0 : _a2.show({
+            severity: "success",
+            summary: `${approvalModalState.mode === "approve" ? "Approved" : "Rejected"} Successfully`,
+            detail: `Learning ${approvalModalState.mode === "approve" ? "approved" : "rejected"} successfully.`
+          });
+        },
+        onError: (error) => {
+          var _a2;
+          console.error("An error occurred.", error);
+          (_a2 = toast.current) == null ? void 0 : _a2.show({
+            severity: "error",
+            summary: "Action Failed",
+            detail: `There was an error processing the learning. Please try again.`
+          });
+        }
+      }
+    );
+  };
+  const formatDate = (dateString) => {
+    if (!dateString) return "";
+    try {
+      const normalizedDateString = dateString.endsWith("Z") || /[+-]\d{2}:\d{2}$/.test(dateString) ? dateString : `${dateString}Z`;
+      const date = parseISO(normalizedDateString);
+      if (!isValid(date)) return dateString;
+      return format(date, "MMM d, yyyy 'at' h:mm a");
+    } catch (e) {
+      return dateString;
+    }
+  };
+  const getFormattedName = (name) => {
+    if (!name) return "";
+    if (name.includes("@")) {
+      return name.split("@")[0].split(".").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+    }
+    return name;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        styles.variantCard,
+        isHighlighted && styles.variantHighlight,
+        className
+      ),
+      "data-variant-id": variant.variantId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.variantHeader, style: { alignItems: "flex-start", gap: "0.75rem" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.variantLabelSection, style: { display: "flex", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.variantLabel, children: variant.variantType === "Default" && displayLabel !== "Default" ? `Default | ${displayLabel}` : displayLabel }),
+            isHighlighted && highlightAction && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  styles.actionChip,
+                  highlightAction === "new" ? styles.actionChipNew : styles.actionChipUpdated
+                ),
+                children: highlightAction === "new" ? "Created" : "Updated"
+              }
+            ),
+            (variant == null ? void 0 : variant.isOverridden) && /* @__PURE__ */ jsx(
+              CustomTooltip,
+              {
+                content: `Inherited from the ${((_g = variant.inheritance) == null ? void 0 : _g[((_f = variant.inheritance) == null ? void 0 : _f.length) - 2]) || "parent"} scope and overridden in this scope.`,
+                placement: "top",
+                withArrow: true,
+                contentClassName: tooltipStyles.customTooltip,
+                sideOffset: 5,
+                children: /* @__PURE__ */ jsx("span", { className: styles.overriddenTag, children: "Overridden" })
+              }
+            ),
+            canViewPendingApprovals && isPendingApproval && /* @__PURE__ */ jsx(PendingApprovalChip, {}),
+            isRejected && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  backgroundColor: "#FEF2F2",
+                  color: "#EF4444",
+                  border: "1px solid #FECACA",
+                  padding: "2px 8px",
+                  borderRadius: "9999px",
+                  fontSize: "0.75rem",
+                  fontWeight: 500,
+                  display: "inline-flex",
+                  alignItems: "center"
+                },
+                children: "Rejected"
+              }
+            ),
+            !isEnabled && /* @__PURE__ */ jsx("span", { className: styles.learningDisabledPill, children: "Disabled" }),
+            showInheritance && totalVariants !== 1 && variantIndex !== 0 && /* @__PURE__ */ jsx("div", { className: styles.inheritanceSection, children: /* @__PURE__ */ jsx(InheritanceBreadcrumb, { inheritance: variant.inheritance || [] }) })
+          ] }),
+          showActionsBar && !isPublishedReadOnly && /* @__PURE__ */ jsxs("div", { className: styles.variantActions, children: [
+            shouldShowVariantApprovalActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                ApprovalActionButton,
+                {
+                  variant: "approve",
+                  text: "Approve",
+                  onClick: (e) => handleApprovalButtonClick(e, "approve")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ApprovalActionButton,
+                {
+                  variant: "reject",
+                  text: "Reject",
+                  onClick: (e) => handleApprovalButtonClick(e, "reject")
+                }
+              )
+            ] }),
+            onEdit && canEditVariant && !variant.is_drafted && /* @__PURE__ */ jsx("button", { className: styles.editButton, onClick: handleEditClick, children: editButtonLabel }),
+            onDelete && canDeleteVariant && variant.variantType !== "Default" && /* @__PURE__ */ jsx("button", { className: styles.deleteButton, onClick: handleDeleteClick, children: deleteButtonLabel }),
+            /* @__PURE__ */ jsxs("div", { className: styles.menuWrapper, ref: menuRef, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsMenuOpen(!isMenuOpen),
+                  className: `${styles.menuTrigger} ${isMenuOpen ? styles.menuTriggerActive : ""}`,
+                  children: /* @__PURE__ */ jsx(MoreVertical, { size: 16 })
+                }
+              ),
+              isMenuOpen && /* @__PURE__ */ jsxs("div", { className: styles.menuDropdown, children: [
+                (isEnabled && canDisableVariant || !isEnabled && canEnableVariant) && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleToggleEnableClick,
+                    disabled: isToggling,
+                    className: `${styles.menuItem} ${isToggling ? styles.menuItemDisabled : ""}`,
+                    children: [
+                      isEnabled ? /* @__PURE__ */ jsx(Pause, { size: 14 }) : /* @__PURE__ */ jsx(Play, { size: 14 }),
+                      isEnabled ? disableLearningVariantLabel : enableLearningVariantLabel
+                    ]
+                  }
+                ),
+                tierName && tierOptions.length > 1 && tierOptions.filter((targetTier) => targetTier !== tierName).map((targetTier) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => {
+                      const message = `Add a new learning in ${targetTier} with the following details:
+Learning Title: ${ruleTitle}
+Learning Description: ${variant.description}
+When to apply: ${variant.whenToApply}
+When not to apply: ${variant.whenNotToApply}`;
+                      onSetInitialDraftMessage == null ? void 0 : onSetInitialDraftMessage(message);
+                      setIsMenuOpen(false);
+                      onCopyToTier == null ? void 0 : onCopyToTier(variant, ruleId, ruleTitle || "", tierName, targetTier);
+                    },
+                    className: styles.menuItem,
+                    children: [
+                      /* @__PURE__ */ jsx(Copy, { size: 14 }),
+                      "Copy to ",
+                      targetTier
+                    ]
+                  },
+                  targetTier
+                )),
+                onFetchOverrideHistory && ((_i = (_h = variant.inheritance) == null ? void 0 : _h.length) != null ? _i : 0) > 1 && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => {
+                      setIsMenuOpen(false);
+                      handleToggleHistory();
+                    },
+                    className: styles.menuItem,
+                    children: [
+                      /* @__PURE__ */ jsx(Eye, { size: 14 }),
+                      showHistory ? hideOverrideLabel : viewOverrideLabel
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        headerContent,
+        showDescriptionBox && variant.description && /* @__PURE__ */ jsxs("div", { className: styles.descriptionBox, children: [
+          /* @__PURE__ */ jsx("p", { className: styles.descriptionText, children: variant.description }),
+          showHistory && (isLoadingHistory ? /* @__PURE__ */ jsx(HistorySkeleton, {}) : historyError ? /* @__PURE__ */ jsx("p", { className: styles.errorText, children: historyError }) : (historyData == null ? void 0 : historyData.ruleDescription) ? /* @__PURE__ */ jsx(OverrideTimeline, { changeLog: historyData.ruleDescription.changeLog }) : /* @__PURE__ */ jsx("p", { className: styles.noHistoryText, children: "No override history found" }))
+        ] }),
+        showConditions && /* @__PURE__ */ jsxs("div", { className: styles.conditionsContainer, children: [
+          learningMetadata && Object.keys(learningMetadata).length > 0 && /* @__PURE__ */ jsx(
+            InstructionPromptBlock,
+            {
+              metadata: learningMetadata,
+              isOpen: isInstructionPromptOpen,
+              onToggle: () => setIsInstructionPromptOpen(!isInstructionPromptOpen),
+              labelText: instructionPromptLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RuleConditionBlock,
+            {
+              type: "apply",
+              conditions: variant.whenToApply || "",
+              isOpen: isApplyOpen,
+              onToggle: () => setIsApplyOpen(!isApplyOpen),
+              labelText: whenToApplyLabel,
+              noConditionsText,
+              showOverrideHistory: showHistory,
+              isLoadingHistory,
+              historyError,
+              overrideHistoryData: wtaChangeLog
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RuleConditionBlock,
+            {
+              type: "notApply",
+              conditions: variant.whenNotToApply || "",
+              isOpen: isNotApplyOpen,
+              onToggle: () => setIsNotApplyOpen(!isNotApplyOpen),
+              labelText: whenNotToApplyLabel,
+              noConditionsText,
+              showOverrideHistory: showHistory,
+              isLoadingHistory,
+              historyError,
+              overrideHistoryData: wntaChangeLog
+            }
+          )
+        ] }),
+        isHighlighted && otherTierNames.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.crossTierBanner, children: [
+          /* @__PURE__ */ jsx(Info, { className: styles.crossTierBannerIcon }),
+          /* @__PURE__ */ jsxs("span", { className: styles.crossTierBannerText, children: [
+            "Also created in ",
+            otherTierNames.join(", "),
+            "."
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: styles.crossTierBannerLink,
+              onClick: handleScrollToOtherTier,
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => e.key === "Enter" && handleScrollToOtherTier(),
+              children: [
+                "Scroll to view ",
+                scrollArrow
+              ]
+            }
+          )
+        ] }),
+        footerContent,
+        (variant.createdBy || variant.createdAt) && /* @__PURE__ */ jsxs("div", { className: styles.variantFooter, children: [
+          variant.is_user_accepted_risk === true && /* @__PURE__ */ jsxs("div", { className: styles.resolveGaps, children: [
+            /* @__PURE__ */ jsx(TriangleAlert, { size: 14, color: "#EF4444" }),
+            /* @__PURE__ */ jsx("span", { className: styles.resolveGapsText, children: resolveGapsLabel }),
+            !isPublishedReadOnly && canEditVariant && /* @__PURE__ */ jsx("button", { onClick: handleResolveClick, className: styles.resolveButton, children: "Resolve" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.variantFooterContent, children: variant.updatedBy || variant.updatedAt ? (
+            // UPDATED STATE: Show "Updated by" as primary display
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              variant.updatedBy && /* @__PURE__ */ jsx(
+                CustomTooltip,
+                {
+                  content: variant.createdBy ? `Created by ${getFormattedName(variant.createdBy)}` : "",
+                  contentClassName: tooltipStyles.customTooltip,
+                  sideOffset: 5,
+                  placement: "top",
+                  children: /* @__PURE__ */ jsxs("span", { className: styles.variantFooterItem, children: [
+                    "Updated by ",
+                    getFormattedName(variant.updatedBy)
+                  ] })
+                }
+              ),
+              variant.updatedBy && variant.updatedAt && /* @__PURE__ */ jsx("span", { className: styles.variantFooterSeparator, children: "\u2022" }),
+              variant.updatedAt && /* @__PURE__ */ jsx(
+                CustomTooltip,
+                {
+                  content: variant.createdAt ? `Created at ${formatDate(variant.createdAt)}` : "",
+                  contentClassName: tooltipStyles.customTooltip,
+                  sideOffset: 5,
+                  placement: "top",
+                  children: /* @__PURE__ */ jsx("span", { className: styles.variantFooterItem, children: formatDate(variant.updatedAt) })
+                }
+              )
+            ] })
+          ) : (
+            // NOT UPDATED STATE: Show "Created by" as primary display, no tooltip needed
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              variant.createdBy && /* @__PURE__ */ jsxs("span", { className: styles.variantFooterItem, children: [
+                "Created by ",
+                getFormattedName(variant.createdBy)
+              ] }),
+              variant.createdBy && variant.createdAt && /* @__PURE__ */ jsx("span", { className: styles.variantFooterSeparator, children: "\u2022" }),
+              variant.createdAt && /* @__PURE__ */ jsx("span", { className: styles.variantFooterItem, children: formatDate(variant.createdAt) })
+            ] })
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ConfirmationModal,
+          {
+            isOpen: showConfirmModal,
+            title: isEnabled ? dt(`${VARIANT_DT_PATH}.disableDialog.title`, "Disable Learning?") : dt(`${VARIANT_DT_PATH}.enableDialog.title`, "Enable Learning?"),
+            description: isEnabled ? dt(
+              `${VARIANT_DT_PATH}.disableDialog.desc`,
+              "Are you sure you want to disable learning for this variant in {rule_title}?",
+              { rule_title: ruleTitle != null ? ruleTitle : "" }
+            ) : dt(
+              `${VARIANT_DT_PATH}.enableDialog.desc`,
+              "Are you sure you want to enable learning for this variant in {rule_title}?",
+              { rule_title: ruleTitle != null ? ruleTitle : "" }
+            ),
+            warning: isEnabled ? dt(
+              `${VARIANT_DT_PATH}.disableDialog.warningText`,
+              "This learning will no longer influence upcoming schedules. You can enable it again anytime."
+            ) : dt(
+              `${VARIANT_DT_PATH}.enableDialog.warningText`,
+              "This learning will start influencing upcoming schedules again."
+            ),
+            confirmText: isEnabled ? dt(`${VARIANT_DT_PATH}.disableDialog.deleteText`, "Disable") : dt(`${VARIANT_DT_PATH}.enableDialog.deleteText`, "Enable"),
+            cancelText: isEnabled ? dt(`${VARIANT_DT_PATH}.disableDialog.cancelText`, "Cancel") : dt(`${VARIANT_DT_PATH}.enableDialog.cancelText`, "Cancel"),
+            loadingText: isEnabled ? dt(`${VARIANT_DT_PATH}.disableDialog.loadingText`, "Processing...") : dt(`${VARIANT_DT_PATH}.enableDialog.loadingText`, "Processing..."),
+            confirmBgColor: isEnabled ? "#DC2626" : "#16A34A",
+            onConfirm: handleConfirmToggle,
+            onCancel: () => setShowConfirmModal(false),
+            isLoading: isToggling,
+            position: "fixed"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ApprovalLearningDialog,
+          {
+            open: approvalModalState.isOpen,
+            mode: approvalModalState.mode,
+            onClose: () => setApprovalModalState((prev) => ({ ...prev, isOpen: false })),
+            onSubmit: handleApprovalSubmit,
+            variantInformation: `${ruleTitle} \u2014 ${displayLabel}`,
+            ruleTitle,
+            pendingVariants: [variant],
+            isPending: approveOrRejectMutation.isPending
+          }
+        )
+      ]
+    }
+  );
+};
+var VariantCard$1 = VariantCard;
+
+export { VariantCard$1 as default };
 //# sourceMappingURL=VariantCard.js.map