@zeniai/web-components 3.17.22 → 3.17.24

package/dist/BusyIndication-CEyyG-Ry.js

@@ -0,0 +1,19 @@
+import { j as r } from "./vendor-.pnpm-UYinI_7q.js";
+import s from "@emotion/styled";
+import { A as n, S as o } from "./index-ymbrtWl5.js";
+const a = s.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: ${o.sp12} 0 0 0;
+`, m = ({
+  fetchState: t,
+  styles: e,
+  size: i = "ExtraLarge"
+}) => t === "In-Progress" || t === "Not-Started" ? /* @__PURE__ */ r.jsx(a, { style: e, children: /* @__PURE__ */ r.jsx(n, { size: i, start: !0 }) }) : null;
+export {
+  m as B
+};

package/dist/BusyIndication-Uo05RX3X.cjs

@@ -0,0 +1,9 @@
+"use strict";const e=require("./vendor-.pnpm-DLVCFIC_.cjs"),s=require("@emotion/styled"),n=require("./index-BSvKy2E6.cjs"),o=s.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: ${n.Space.sp12} 0 0 0;
+`,c=({fetchState:t,styles:r,size:i="ExtraLarge"})=>t==="In-Progress"||t==="Not-Started"?e.jsxRuntimeExports.jsx(o,{style:r,children:e.jsxRuntimeExports.jsx(n.ActivityIndicator,{size:i,start:!0})}):null;exports.BusyIndication=c;

package/dist/CardNumberSubText-DQ6T2OKm.js

@@ -0,0 +1,59 @@
+import { j as r } from "./vendor-.pnpm-UYinI_7q.js";
+import c from "@emotion/styled";
+import { u as g, a as w, t as C, S as s, aw as y, J as S } from "./index-ymbrtWl5.js";
+import * as i from "react";
+const $ = (e) => /* @__PURE__ */ i.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.802551 6.92395C0.802551 5.2671 2.1457 3.92395 3.80255 3.92395H20.2009C21.8578 3.92395 23.2009 5.2671 23.2009 6.92395V17.076C23.2009 18.7329 21.8578 20.076 20.2009 20.076H3.80255C2.1457 20.076 0.802551 18.7329 0.802551 17.076V10.8805H23.1896V9.01135H0.802551V6.92395ZM0.802551 9.01135H0.799072V10.8805H0.802551V9.01135ZM14.5443 15.6222C14.5443 15.0935 14.9728 14.6649 15.5015 14.6649H18.1386C18.6673 14.6649 19.0959 15.0935 19.0959 15.6222C19.0959 16.1509 18.6673 16.5795 18.1386 16.5795H15.5015C14.9728 16.5795 14.5443 16.1509 14.5443 15.6222Z", fill: "currentColor" })), {
+  common: d,
+  spendManagement: { chargeCard: o }
+} = w.getLocalizedStrings(), v = {
+  subText: new y("extraSmallRegular", "standardRegular")
+}, j = ({
+  cardDetail: e,
+  forDetailPage: t,
+  styles: h
+}) => {
+  const m = g(), u = e.type.code.includes("credit") ? o.chargeCardsPromo.credit : o.chargeCardsPromo.debit;
+  let a = e.type.code.includes("physical") ? o.cardList.physicalCard : o.cardList.virtualCard;
+  const n = d.strings.space + o.cardDetails.expiryHideOut + d.strings.space + e.accountLast4, x = e.status.code === "request_on_hold" || !t ? a : n, l = e.type.code.includes("physical");
+  return /* @__PURE__ */ r.jsxs(
+    b,
+    {
+      style: h,
+      windowSize: m,
+      forDetailPage: t,
+      className: "cardName",
+      title: `${x}`,
+      children: [
+        u,
+        /* @__PURE__ */ r.jsx(H, {}),
+        a,
+        l && !t ? /* @__PURE__ */ r.jsx(p, { className: "physical-card-icon" }) : null,
+        e.status.code === "request_on_hold" || !t ? null : n,
+        l && t ? /* @__PURE__ */ r.jsx(p, {}) : null
+      ]
+    }
+  );
+}, b = c(S)`
+  ${(e) => e.forDetailPage ? { ...C.extraSmallRegular.cssObject } : `${v.subText.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: ${s.sp1};
+`, H = c.span`
+  height: ${s.sp1};
+  width: ${s.sp1};
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+  margin: ${s.sp0} ${s.sp1};
+`, p = c($)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  j as C
+};

package/dist/CardNumberSubText-rlhatH08.cjs

@@ -0,0 +1,21 @@
+"use strict";const n=require("./vendor-.pnpm-DLVCFIC_.cjs"),a=require("@emotion/styled"),t=require("./index-BSvKy2E6.cjs"),S=require("react");function g(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(s,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return s.default=e,Object.freeze(s)}const p=g(S),y=e=>p.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},p.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.802551 6.92395C0.802551 5.2671 2.1457 3.92395 3.80255 3.92395H20.2009C21.8578 3.92395 23.2009 5.2671 23.2009 6.92395V17.076C23.2009 18.7329 21.8578 20.076 20.2009 20.076H3.80255C2.1457 20.076 0.802551 18.7329 0.802551 17.076V10.8805H23.1896V9.01135H0.802551V6.92395ZM0.802551 9.01135H0.799072V10.8805H0.802551V9.01135ZM14.5443 15.6222C14.5443 15.0935 14.9728 14.6649 15.5015 14.6649H18.1386C18.6673 14.6649 19.0959 15.0935 19.0959 15.6222C19.0959 16.1509 18.6673 16.5795 18.1386 16.5795H15.5015C14.9728 16.5795 14.5443 16.1509 14.5443 15.6222Z",fill:"currentColor"})),{common:u,spendManagement:{chargeCard:c}}=t.appLocale.getLocalizedStrings(),w={subText:new t.ResponsiveSizedStyle("extraSmallRegular","standardRegular")},C=({cardDetail:e,forDetailPage:s,styles:o})=>{const r=t.useWindowSizeContext(),m=e.type.code.includes("credit")?c.chargeCardsPromo.credit:c.chargeCardsPromo.debit;let l=e.type.code.includes("physical")?c.cardList.physicalCard:c.cardList.virtualCard;const i=u.strings.space+c.cardDetails.expiryHideOut+u.strings.space+e.accountLast4,x=e.status.code==="request_on_hold"||!s?l:i,d=e.type.code.includes("physical");return n.jsxRuntimeExports.jsxs(b,{style:o,windowSize:r,forDetailPage:s,className:"cardName",title:`${x}`,children:[m,n.jsxRuntimeExports.jsx(j,{}),l,d&&!s?n.jsxRuntimeExports.jsx(h,{className:"physical-card-icon"}):null,e.status.code==="request_on_hold"||!s?null:i,d&&s?n.jsxRuntimeExports.jsx(h,{}):null]})},b=a(t.StyledText)`
+  ${e=>e.forDetailPage?{...t.textStyles.extraSmallRegular.cssObject}:`${w.subText.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.hero};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp1};
+`,j=a.span`
+  height: ${t.Space.sp1};
+  width: ${t.Space.sp1};
+  background-color: ${e=>e.theme.colors.grey1};
+  border-radius: 50%;
+  margin: ${t.Space.sp0} ${t.Space.sp1};
+`,h=a(y)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`;exports.CardNumberSubText=C;

package/dist/CashbackDetailPage-Br7VXQLh.cjs

@@ -0,0 +1,285 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-DLVCFIC_.cjs"),s=require("@emotion/styled"),t=require("./index-BSvKy2E6.cjs"),h=require("recharts"),u=require("@zeniai/client-epic-state"),S=require("react"),B=require("./InsightsSection-CxFWGOw6.cjs"),k=require("./common-9uvf4J52.cjs"),Y=({x:e,y:n,width:a,height:i,payload:r})=>{const c=o.useTheme();return o.jsxRuntimeExports.jsx(h.Rectangle,{fill:(r?.[0].payload).showTooltip===!0?c.colors.background:"transparent",stroke:(r?.[0].payload).showTooltip===!0?c.colors.background:"transparent",x:e,y:n,width:a,height:i})},z=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cashbackDetail.header,V=t.appLocale.getLocalizedStrings().dateFormat.visual.MMMMFormat,A=({active:e,payload:n,label:a})=>e===!0&&(n?.[0].payload).showTooltip===!0?o.jsxRuntimeExports.jsx(K,{children:o.jsxRuntimeExports.jsx(q,{children:o.jsxRuntimeExports.jsxs("div",{children:[o.jsxRuntimeExports.jsxs(L,{children:[o.jsxRuntimeExports.jsx(M,{children:z.month})," ",o.jsxRuntimeExports.jsx(P,{children:u.getZeniDateFromPeriod(a).format(V)})]}),o.jsxRuntimeExports.jsxs(L,{children:[o.jsxRuntimeExports.jsx(M,{children:z.cashback}),o.jsxRuntimeExports.jsx(P,{children:t.amountToString("0,0.[00]",{amount:n?.[0].value??0,currencyCode:(n?.[0].payload).currencyCode,currencySymbol:(n?.[0].payload).currencySymbol})})]})]})})}):null,L=s.div`
+  display: flex;
+  gap: ${t.Space.sp1};
+`,K=s.div`
+  display: flex;
+  position: relative;
+  left: 11px;
+`,q=s.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${t.Space.sp1};
+  flex-direction: column;
+  padding: ${t.Space.sp2} 12px;
+  background-color: ${e=>e.theme.colors.black};
+`,P=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.brandColorPearl};
+  min-width: ${t.Space.sp8};
+  display: flex;
+  justify-content: flex-end;
+`,M=s(t.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  min-width: 107px;
+`,G=S.memo(A),{dateFormat:{visual:{MMMYYFormat:Z,YYYYDashMMFormat:O}},common:{currency:f}}=t.appLocale.getLocalizedStrings(),N=({chartData:e,customToolTipContent:n,width:a,height:i})=>{const r=o.useTheme();return o.jsxRuntimeExports.jsx(Q,{width:a,height:i,children:o.jsxRuntimeExports.jsx(o.AutoSizer,{children:({height:c,width:d})=>o.jsxRuntimeExports.jsxs(h.BarChart,{width:d,height:c,data:e,barCategoryGap:"25%",margin:{top:5,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto"},children:[o.jsxRuntimeExports.jsx(h.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:r.colors.grey3}),o.jsxRuntimeExports.jsx(h.XAxis,{dataKey:"period",type:"category",axisLine:{stroke:r.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:r.colors.hero,...t.textStyles.extraSmallRegular.cssObject},tickFormatter:p=>u.getZeniDateFromPeriod(p).format(Z)}),o.jsxRuntimeExports.jsx(h.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:r.colors.hero,...t.textStyles.extraSmallRegular.cssObject},tickFormatter:p=>t.amountValueToString("0,0.[00]a",p,e?.[0].currencySymbol??f.currencySymbol)}),o.jsxRuntimeExports.jsx(h.Tooltip,{cursor:o.jsxRuntimeExports.jsx(Y,{}),content:n}),o.jsxRuntimeExports.jsx(h.Bar,{dataKey:"amount",fill:r.colors.brandColorJadeDark,barSize:36})]})})})};function _({cashbackByPeriod:e,width:n,height:a}){const i=o.orderBy(e,c=>u.getZeniDateFromPeriod(c.period),"asc"),r=X(i);return o.jsxRuntimeExports.jsx(N,{chartData:r,customToolTipContent:({active:c,payload:d,label:p})=>o.jsxRuntimeExports.jsx(G,{active:c,payload:d,label:p}),width:n,height:a})}const J=e=>e.format(O),X=e=>{const n=e.map(r=>({...r,showTooltip:!0})),a=e[e.length-1];let i=a?.period??u.dateNow().subtract(1,"M").format(O);for(;n.length<12;){const r={amount:0,period:J(u.getZeniDateFromPeriod(i).add(1,"M")),showTooltip:!1,currencyCode:a?.currencyCode??f.currencyCode,currencySymbol:a?.currencySymbol??f.currencySymbol};n.push(r),i=r.period}return n},Q=s.div`
+  width: ${e=>e.width}px;
+  height: ${e=>e.height}px;
+  background: ${e=>e.theme.colors.grey5};
+`,W=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cashbackDetail.header,U={key:"month",value:W.month,sortOrder:"ascending",width:new t.ResponsiveSized(50,50)},ee={key:"cashback",value:W.cashback,sortOrder:"ascending",width:new t.ResponsiveSized(50,50)},H=()=>[U,ee],g={headerLastColumnTopPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnRightPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerLastColumnBottomPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnLeftPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerHeight:new t.ResponsiveSized(k.HEADER_HEIGHT_MOBILE,k.HEADER_HEIGHT)};function te({sortConfig:e,onColumnSortConfigChanged:n}){const a=o.useTheme(),i=t.useWindowSizeContext(),[r,c]=S.useState(H());S.useEffect(()=>{const l=[...r];for(const x of l)x.key===e.sortKey?x.sortOrder=e.sortOrder:x.sortOrder="ascending";c(l)},[e.sortKey,e.sortOrder]);const d=(l,x)=>{let E=x;e.sortKey===l&&(E=x==="ascending"?"descending":"ascending"),n(l,E)},p=r.find(l=>l.key===e.sortKey)??r[0],j=l=>r.find(x=>x.key===l)?.value??"",y=r.map(l=>l.key),C=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cardList;return i==="small"?o.jsxRuntimeExports.jsxs(T,{windowSize:i,children:[o.jsxRuntimeExports.jsxs(ie,{children:[o.jsxRuntimeExports.jsx(ae,{children:o.jsxRuntimeExports.jsx(ne,{})}),o.jsxRuntimeExports.jsx(t.Picker$1,{title:C.sortBy,placeholder:C.sortBy,pickerValues:y,valueToLabel:j,selectedValue:e.sortKey,onPickerSelectionChanged:l=>{d(l,"ascending")},optionTextStyle:t.textStyles.smallRegular,titleTextStyle:t.textStyles.smallRegular,titleColor:a.colors.primary,selectedOptionColor:a.colors.hero,optionBackgroundColor:a.colors.grey5,downChevronVisible:!1,backgroundColor:a.colors.grey4})]}),o.jsxRuntimeExports.jsxs(de,{onClick:()=>d(p.key,p.sortOrder),"data-testid":t.generateDataTestId("cashback-list-header-mobile",p.value),children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:p.value}),o.jsxRuntimeExports.jsx(I,{sortDataValue:e.sortKey,headerdata:p,children:o.jsxRuntimeExports.jsx(D,{})})]})]}):o.jsxRuntimeExports.jsx(T,{windowSize:i,children:r.map((l,x)=>o.jsxRuntimeExports.jsxs(se,{sortDataValue:e.sortKey,actualDataValue:l.key,wrapperWidth:l.width,isLastItem:x===r.length-1,windowSize:i,children:[o.jsxRuntimeExports.jsxs(ce,{onClick:()=>d(l.key,l.sortOrder),"data-testid":t.generateDataTestId("cashback-list-header",l.value),children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:l.value}),o.jsxRuntimeExports.jsx(I,{sortDataValue:e.sortKey,headerdata:l,children:o.jsxRuntimeExports.jsx(D,{})})]}),o.jsxRuntimeExports.jsx(le,{sortDataValue:e.sortKey,windowSize:i,isVisible:e.sortKey===l.key&&l.key!=="month",children:o.jsxRuntimeExports.jsx(re,{onClick:()=>d("month","ascending"),"data-testid":t.generateDataTestId("cashback-list-close-sort",l.key)})})]},l.key))})}const oe=S.memo(te),T=s(t.SmallRegular)`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  min-height: ${e=>g.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>g.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${g.headerLastColumnTopPadding.valuePx(e.windowSize)} ${g.headerLastColumnRightPadding.valuePx(e.windowSize)} ${g.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${g.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+  position: sticky;
+`,se=s.div`
+  color: ${e=>e.sortDataValue===e.actualDataValue?e.theme.colors.primary:e.theme.colors.grey1};
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  padding-left: ${t.Space.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  left: ${t.Space.sp0};
+  box-sizing: border-box;
+  overflow: hidden;
+  justify-content: ${e=>e.isLastItem?"flex-end":"flex-start"};
+`,re=s(t.SvgCloseRound)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+`,I=s.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.sortDataValue===e.headerdata.key&&e.headerdata.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
+  ${e=>e.headerdata.sortOrder==="ascending"?"padding-top: 2px":"padding-bottom: 2px"}
+`,D=s(t.SvgArrowTailTop)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,ie=s.div`
+  gap: ${t.Space.sp1};
+  display: flex;
+`,ne=s(t.SvgSortBy)`
+  width: 12px;
+  height: 12px;
+  color: inherit;
+`,ae=s.div`
+  margin-right: ${t.Space.sp1};
+  display: flex;
+  align-items: center;
+`,le=s.div`
+  display: ${e=>e.isVisible?"flex":"none"};
+  align-items: center;
+  padding-top: 2px;
+`,ce=s.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,de=s.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,m={containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingTop:new t.ResponsiveSized(t.sp[2],16),containerPaddingBottom:new t.ResponsiveSized(t.sp[2],16),containerMarginLeft:new t.ResponsiveSized(t.sp[4],t.sp[8]),webkitLineClamp:new t.ResponsiveSized(2,1,1,1,1)},{spendManagement:{chargeCard:{cashbackDetail:pe}},dateFormat:{visual:xe}}=t.appLocale.getLocalizedStrings(),me=({cashbackPeriod:e,isFirstItem:n,isLastItem:a})=>{const i=t.useWindowSizeContext(),r=H(),c=t.toYearMonthPeriodOrThrow(e.period),d=t.isCurrentMonthPeriod(c);return o.jsxRuntimeExports.jsx(Se,{windowSize:i,isFirstItem:n,isLastItem:a,children:o.jsxRuntimeExports.jsx(we,{children:o.jsxRuntimeExports.jsxs(je,{children:[o.jsxRuntimeExports.jsx(ye,{windowSize:i,responsiveWidth:r[0].width,children:o.jsxRuntimeExports.jsxs(Re,{windowSize:i,children:[u.getZeniDateFromPeriod(e.period).format(xe.MMMMYYYYFormat),d?o.jsxRuntimeExports.jsxs(ue,{children:[o.jsxRuntimeExports.jsx(ge,{}),o.jsxRuntimeExports.jsx(he,{children:pe.tillDate})]}):null]})}),o.jsxRuntimeExports.jsx(be,{windowSize:i,responsiveWidth:r[1].width,children:o.jsxRuntimeExports.jsx(fe,{windowSize:i,children:t.amountToString("0,0.[00]",{amount:e.amount,currencyCode:e.currencyCode,currencySymbol:e.currencySymbol})})})]})})})},he=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.grey1};
+`,ue=s.div`
+  display: flex;
+  align-items: center;
+`,ge=s.div`
+  height: ${t.Space.sp1};
+  width: ${t.Space.sp1};
+  margin-right: ${t.Space.sp2};
+  background-color: ${e=>e.theme.colors.grey1};
+  border-radius: 50%;
+`,Se=s.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>m.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>m.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>m.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>m.containerPaddingBottom.valuePx(e.windowSize)};
+
+  border-top-right-radius: ${e=>e.isFirstItem?t.Space.sp2:t.Space.sp0};
+  border-top-left-radius: ${e=>e.isFirstItem?t.Space.sp2:t.Space.sp0};
+  border-bottom-left-radius: ${e=>e.isLastItem?t.Space.sp2:t.Space.sp0};
+  border-bottom-left-radius: ${e=>e.isLastItem?t.Space.sp2:t.Space.sp0};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  border-top-width: ${e=>e.isFirstItem?"1px":t.Space.sp0};
+  border-bottom-width: ${e=>e.isLastItem?"1px":t.Space.sp0};
+  box-shadow: ${t.Space.sp0} 1px 2px ${t.Space.sp0} ${t.Colors.boxShadowElevation};
+  margin-right: ${e=>m.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>m.containerMarginLeft.valuePx(e.windowSize)};
+  box-sizing: border-box;
+  align-items: center;
+`,we=s.div`
+  display: block;
+  width: 100%;
+`,je=s.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+`,ye=s.div`
+  display: flex;
+  flex-direction: column;
+  column-gap: 12px;
+  align-items: flex-start;
+  width: ${e=>`calc(${e.responsiveWidth.valuePercentage(e.windowSize)} - ${t.Space.sp7})`};
+`,Re=s(t.StandardRegular)`
+  margin-right: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+  flex-grow: 1;
+  -webkit-line-clamp: ${e=>m.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+  display: flex;
+  gap: ${t.Space.sp2};
+`,be=s(t.StandardRegular)`
+  display: flex;
+  flex-direction: column;
+  align-items: ${e=>e.windowSize==="small"||e.windowSize==="medium-compact"?"flex-start":"center"};
+  color: ${e=>e.theme.colors.hero};
+  justify-content: flex-end;
+  align-items: flex-start;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,fe=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  flex-grow: 1;
+  -webkit-line-clamp: ${e=>m.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  display: flex;
+  justify-content: end;
+`,v={containerMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[8]),webkitLineClamp:new t.ResponsiveSized(2,2,1,1,1)},{spendManagement:{chargeCard:{cashbackDetail:ve}},dateFormat:{visual:$e}}=t.appLocale.getLocalizedStrings(),Ce=({cashbackPeriod:e,isFirstItem:n,isLastItem:a})=>{const i=t.useWindowSizeContext(),r=t.toYearMonthPeriodOrThrow(e.period),c=t.isCurrentMonthPeriod(r);return o.jsxRuntimeExports.jsx(Le,{windowSize:i,isFirstItem:n,isLastItem:a,children:o.jsxRuntimeExports.jsx(Pe,{children:o.jsxRuntimeExports.jsxs(Me,{children:[o.jsxRuntimeExports.jsx(Ie,{children:o.jsxRuntimeExports.jsxs(Te,{windowSize:i,children:[u.getZeniDateFromPeriod(e.period).format($e.MMMMYYYYFormat),c?o.jsxRuntimeExports.jsxs(ke,{children:[o.jsxRuntimeExports.jsx(ze,{}),o.jsxRuntimeExports.jsx(Ee,{children:ve.tillDate})]}):null]})}),o.jsxRuntimeExports.jsx(De,{children:o.jsxRuntimeExports.jsx(Fe,{children:t.amountToString("0,0.[00]",{amount:e.amount,currencyCode:e.currencyCode,currencySymbol:e.currencySymbol})})})]})})})},Ee=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.grey1};
+`,ke=s.div`
+  display: flex;
+  align-items: center;
+`,ze=s.div`
+  height: ${t.Space.sp1};
+  width: ${t.Space.sp1};
+  margin-right: ${t.Space.sp2};
+  background-color: ${e=>e.theme.colors.grey1};
+  border-radius: 50%;
+`,Le=s.div`
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: ${e=>` 1px solid ${e.theme.colors.grey3}`};
+  border-top-width: ${e=>e.isFirstItem?"1px":t.Space.sp0};
+  border-bottom-width: ${e=>e.isLastItem?"1px":t.Space.sp0};
+  padding: ${t.Space.sp3};
+  box-shadow: ${t.Space.sp0} 1px 2px ${t.Space.sp0} ${t.Colors.boxShadowElevation};
+  border-top-right-radius: ${e=>e.isFirstItem?t.Space.sp2:t.Space.sp0};
+  border-top-left-radius: ${e=>e.isFirstItem?t.Space.sp2:t.Space.sp0};
+  border-bottom-left-radius: ${e=>e.isLastItem?t.Space.sp2:t.Space.sp0};
+  border-bottom-left-radius: ${e=>e.isLastItem?t.Space.sp2:t.Space.sp0};
+  margin-right: ${e=>v.containerMarginLeft.valuePx(e.windowSize)};
+  margin-left: ${e=>v.containerMarginLeft.valuePx(e.windowSize)};
+`,Pe=s.div`
+  display: block;
+  width: 100%;
+`,Me=s.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,Te=s(t.StandardRegular)`
+  margin-right: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>v.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+  display: flex;
+  gap: ${t.Space.sp2};
+`,Ie=s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.Space.sp2};
+`,De=s.div`
+  display: flex;
+  flex-direction: column;
+`,Fe=s(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+`,F={separatorMarginLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[8])},Oe=({cashbackByPeriod:e,uiState:n,onColumnSortConfigChanged:a})=>{const i=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(Be,{children:[o.jsxRuntimeExports.jsx(oe,{onColumnSortConfigChanged:a,sortConfig:{sortKey:n.sortKey,sortOrder:n.sortOrder}}),o.jsxRuntimeExports.jsx(He,{children:e.map((r,c)=>o.jsxRuntimeExports.jsxs(S.Fragment,{children:[o.jsxRuntimeExports.jsx(We,{cashbackPeriod:r,isFirstItem:c===0,isLastItem:c===e.length-1}),c===e.length-1?null:o.jsxRuntimeExports.jsx(Ye,{windowSize:i})]},r.period))})]})},We=({cashbackPeriod:e,isFirstItem:n,isLastItem:a})=>{const r=t.useWindowSizeContext()==="small"?Ce:me;return o.jsxRuntimeExports.jsx(r,{cashbackPeriod:e,isFirstItem:n,isLastItem:a})},He=s.div``,Be=s.div`
+  display: block;
+  height: 100%;
+`,Ye=s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+  margin-left: ${e=>F.separatorMarginLeftRight.valuePx(e.windowSize)};
+  margin-right: ${e=>F.separatorMarginLeftRight.valuePx(e.windowSize)};
+`,$={pageContentPaddingLeftRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),cashbackSummaryContainerGap:new t.ResponsiveSized(t.sp[3],96)},w=t.appLocale.getLocalizedStrings().spendManagement.chargeCard.cashbackDetail,Ve=({insightsData:e,cashbackByPeriod:n,uiState:a,cashbackSummary:i,onBackClick:r,onColumnSortConfigChanged:c})=>{const d=o.useTheme(),p=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(Ne,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{title:w.title,showBackButton:!0,showMenuIcon:!1,style:{zIndex:3},onBackClick:r,backgroundColor:d.colors.grey5,source:"CashbackDetailPage"}),o.jsxRuntimeExports.jsxs(Ae,{windowSize:p,children:[o.jsxRuntimeExports.jsxs(Ke,{windowSize:p,children:[o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsx(b,{children:w.totalEarned}),o.jsxRuntimeExports.jsx(t.AmountBalance,{amount:i.cashbackEarned,style:{color:d.colors.brandColorJadeDark},decimalStyles:t.textStyles.largeSemiBold.cssObject})]}),o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsx(b,{children:w.redeemed}),o.jsxRuntimeExports.jsx(t.AmountBalance,{amount:i.cashbackRedeemed,style:{color:d.colors.brandColorOpalDark},decimalStyles:t.textStyles.largeSemiBold.cssObject})]}),o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsx(b,{children:w.available}),o.jsxRuntimeExports.jsx(t.AmountBalance,{amount:i.cashbackAvailable,style:{color:d.colors.brandColorGoldDark},decimalStyles:t.textStyles.largeSemiBold.cssObject})]})]}),o.jsxRuntimeExports.jsx(qe,{children:o.jsxRuntimeExports.jsx(o.AutoSizer,{children:({height:j,width:y})=>o.jsxRuntimeExports.jsx(_,{cashbackByPeriod:n,width:y,height:j})})}),o.jsxRuntimeExports.jsx(Ge,{children:o.jsxRuntimeExports.jsx(B.InsightsSection,{insights:[{...e}],summaryTextStyles:{fontWeight:t.FontWeight.regular,color:d.colors.primary}})})]}),o.jsxRuntimeExports.jsx(Ze,{children:o.jsxRuntimeExports.jsx(Oe,{cashbackByPeriod:n,uiState:a,onColumnSortConfigChanged:c})})]})},Ae=s.div`
+  position: relative;
+  box-shadow: ${t.Colors.dropShadowNormalLight} 2px 2px ${t.Space.sp1};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>$.pageContentPaddingLeftRight.valuePx(e.windowSize)};
+  padding-right: ${e=>$.pageContentPaddingLeftRight.valuePx(e.windowSize)};
+`,R=s.div`
+  min-width: 103px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,b=s(t.StandardRegular)`
+  display: flex;
+  justify-content: center;
+  color: ${e=>e.theme.colors.hero};
+`,Ke=s.div`
+  display: flex;
+  gap: ${e=>$.cashbackSummaryContainerGap.valuePx(e.windowSize)};
+  justify-content: center;
+  margin-top: ${t.Space.sp3};
+`,qe=s.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 242px;
+  margin: ${t.Space.sp5} ${t.Space.sp0};
+`,Ge=s.div`
+  margin-bottom: ${t.Space.sp5};
+`,Ze=s.div`
+  background-color: ${e=>e.theme.colors.grey4};
+  padding-top: ${t.Space.sp4};
+  padding-bottom: ${t.Space.sp8};
+  height: 100%;
+`,Ne=s.div`
+  display: flex;
+  min-height: ${`calc(100vh - ${t.Space.sp9})`};
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;exports.default=Ve;