@zeniai/web-components 3.17.3 → 3.17.4

package/dist/ReimbursementApprovalRulesPage-BYpx-wFt.js

@@ -0,0 +1,429 @@
+import { j as t, u as M } from "./vendor-.pnpm-B2klaOGU.js";
+import r from "@emotion/styled";
+import { u as L, a as b, e as j, a2 as z, aP as H, aQ as U, aR as E, R as i, S as o, w as _, aw as R, ah as G, C as P, x as q, a9 as O, t as F, D as s, aE as Q, A as J, o as T, y as K } from "./index-CR2Dmphx.js";
+import { useState as X } from "react";
+const n = {
+  sectionWidth: new i(343, 580, 726),
+  ruleWrapperPadding: new i(s[3], s[4]),
+  wrapperGap: new i(s[4], s[3]),
+  wrapperMarginBottom: new i(s[6], s[8]),
+  lastWrapperMarginBottom: new i(s[5], s[9]),
+  stepperWidthHeight: new i(20, s[5]),
+  stepperItemLeft: new i(-29, -23),
+  stepperItemTop: new i(2, s[0]),
+  stepperItemPaddingLeft: new i(s[0], 10),
+  stepperItemMinHeight: new i(22, 28),
+  stepperLeft: new i(11, 17),
+  stepperTop: new i(2, s[0]),
+  stepperContentTop: new i(s[0], -s[1])
+}, B = {
+  stepper: new R("smallRegular", "standardRegular"),
+  amount: new R("standardRegular", "largeRegular")
+}, Y = ({
+  showDeleteBtn: e = !1,
+  isLastSection: v = !1,
+  approvalRule: u,
+  onEditRuleClick: y,
+  onDeleteRuleClick: S
+}) => {
+  const [x, c] = X(!1), a = L(), { range: d } = u.criteria[0], { steps: g, approvalRuleId: m } = u, l = b.getLocalizedStrings().commonSetUp.approval, $ = () => {
+    c(!0);
+  }, f = {
+    onOkClick: () => {
+      c(!1), S?.(m);
+    },
+    onCancelClick: () => {
+      c(!1);
+    }
+  };
+  return /* @__PURE__ */ t.jsxs(
+    Z,
+    {
+      windowSize: a,
+      isLastSection: v,
+      "data-testid": j("approval-rule-section", m),
+      children: [
+        /* @__PURE__ */ t.jsxs(V, { windowSize: a, children: [
+          /* @__PURE__ */ t.jsxs(le, { children: [
+            /* @__PURE__ */ t.jsxs(W, { windowSize: a, children: [
+              l.from,
+              " ",
+              z("0,0", d.min)
+            ] }),
+            /* @__PURE__ */ t.jsxs(ee, { children: [
+              /* @__PURE__ */ t.jsx(A, {}),
+              /* @__PURE__ */ t.jsx(te, {}),
+              /* @__PURE__ */ t.jsx(A, {})
+            ] }),
+            d.max == null ? /* @__PURE__ */ t.jsx(ce, {}) : /* @__PURE__ */ t.jsx(W, { windowSize: a, children: z("0,0", { ...d.min, amount: d.max.amount }) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(ae, { className: "icons", children: [
+            e ? /* @__PURE__ */ t.jsx(pe, { onClick: $ }) : null,
+            /* @__PURE__ */ t.jsx(
+              de,
+              {
+                onClick: () => {
+                  y(m);
+                },
+                "data-testid": j(
+                  "edit-approval-rule",
+                  m
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx(oe, { windowSize: a, children: /* @__PURE__ */ t.jsx(re, { isSingleStep: g.length === 1, windowSize: a, children: g.map((h, D) => /* @__PURE__ */ t.jsxs(
+          ie,
+          {
+            isSingleStep: g.length === 1,
+            className: "stepperItem",
+            windowSize: a,
+            children: [
+              h.action === "require_approval" ? /* @__PURE__ */ t.jsx(se, { children: l.requireText }) : /* @__PURE__ */ t.jsx(ne, { children: l.notifyText }),
+              h.nonUserActors.filter((p) => p.subType != null).map((p, N) => /* @__PURE__ */ t.jsxs(k, { children: [
+                /* @__PURE__ */ t.jsx(I, { children: p.subType != null ? l.nonUsers[p.subType].label : null }),
+                h.operator != "is" ? /* @__PURE__ */ t.jsx(C, { className: "operator", children: h.operator }) : null
+              ] }, `${p.subType}_${N}`)),
+              h.actors.map((p) => /* @__PURE__ */ t.jsxs(k, { children: [
+                /* @__PURE__ */ t.jsxs(I, { children: [
+                  p.firstName,
+                  " ",
+                  p.lastName
+                ] }),
+                h.operator != "is" ? /* @__PURE__ */ t.jsx(C, { className: "operator", children: h.operator }) : null
+              ] }, p.userId))
+            ]
+          },
+          D
+        )) }) }),
+        x ? /* @__PURE__ */ t.jsx(
+          H,
+          {
+            titleComponent: /* @__PURE__ */ t.jsx(E, { children: l.deleteApprovalRuleTitle }),
+            descriptionComponent: /* @__PURE__ */ t.jsx(U, { children: l.deleteApprovalRuleDesc }),
+            primaryButtonText: l.deleteTxt,
+            proceedButtonVariant: "danger",
+            secondaryButtonText: l.cancelBtnText,
+            action: f
+          }
+        ) : null
+      ]
+    }
+  );
+}, Z = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(e) => n.wrapperGap.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => e.isLastSection ? n.lastWrapperMarginBottom.valuePx(e.windowSize) : n.wrapperMarginBottom.valuePx(e.windowSize)};
+  .icons {
+    display: none;
+  }
+  &:hover {
+    .icons {
+      display: flex;
+    }
+    > div:last-of-type {
+      border-color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, V = r(_)`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  width: ${(e) => n.sectionWidth.valuePx(e.windowSize)};
+  gap: ${o.sp2};
+`, ee = r.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`, te = r.div`
+  width: ${o.sp8};
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.primary};
+`, A = r.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: ${(e) => e.theme.colors.primary};
+`, oe = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: ${(e) => n.ruleWrapperPadding.valuePx(e.windowSize)};
+  gap: 10px;
+
+  width: ${(e) => n.sectionWidth.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey5};
+
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+`, re = r.ul`
+  ${(e) => `${B.stepper.style(e.windowSize)}`};
+  position: relative;
+  padding-left: ${o.sp6};
+  list-style: none;
+  box-sizing: initial;
+  margin: 0;
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${(e) => n.stepperTop.valuePx(e.windowSize)};
+    left: ${(e) => n.stepperLeft.valuePx(e.windowSize)};
+    width: 10px;
+    height: ${(e) => e.isSingleStep ? "0%" : "100%"};
+    border-left: 2px solid ${(e) => e.theme.colors.grey1};
+  }
+`, ie = r.li`
+  position: relative;
+  counter-increment: list;
+  min-height: ${(e) => n.stepperItemMinHeight.valuePx(e.windowSize)};
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: ${(e) => n.stepperItemPaddingLeft.valuePx(e.windowSize)};
+  gap: ${o.sp1};
+
+  > div:last-of-type > span.operator:last-of-type {
+    visibility: hidden;
+  }
+
+  &:not(:last-child) {
+    padding-bottom: 20px;
+  }
+
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${(e) => n.stepperItemTop.valuePx(e.windowSize)};
+    left: ${(e) => n.stepperItemLeft.valuePx(e.windowSize)};
+    height: ${(e) => e.isSingleStep ? "0%" : "100%"};
+    width: 10px;
+  }
+
+  &.stepperItem {
+    flex-wrap: wrap;
+    &::before {
+      border-left: 2px solid ${(e) => e.theme.colors.grey1};
+    }
+    &:last-child::before {
+      border-left: 2px solid ${(e) => e.theme.colors.grey5};
+    }
+
+    &::after {
+      content: counter(list);
+      position: absolute;
+      width: ${(e) => n.stepperWidthHeight.valuePx(e.windowSize)};
+      height: ${(e) => n.stepperWidthHeight.valuePx(e.windowSize)};
+      top: ${(e) => n.stepperContentTop.valuePx(e.windowSize)};
+      left: -${o.sp6};
+      ${F.standardMedium.css};
+      text-align: center;
+      color: ${(e) => e.theme.colors.grey1};
+      border: 2px solid ${(e) => e.theme.colors.grey1};
+      background-color: ${(e) => e.theme.colors.grey5};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+`, se = r.span`
+  color: ${P.alertDark};
+`, ne = r.span`
+  color: ${P.successDark};
+`, I = r.span`
+  color: ${(e) => e.theme.colors.primary};
+`, le = r.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.sp2};
+`, ae = r.div`
+  display: flex;
+  gap: ${o.sp5};
+`, pe = r(q)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${P.important};
+  }
+`, de = r(O)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ce = r(G)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, C = r.span`
+  color: ${(e) => e.theme.colors.hero};
+`, k = r.div`
+  display: inherit;
+  gap: inherit;
+`, W = r.span`
+  ${(e) => `${B.amount.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-word;
+`, w = {
+  width: new i(343, 580, 726),
+  titleWidth: new i(343, 580, 780),
+  addApprovalGap: new i(6, s[2]),
+  subTitlePaddingTop: new i(12, s[3]),
+  subTitlePaddingBottom: new i(28, s[7]),
+  updatingApprovalRulesPaddingTop: new i(12, s[5])
+}, je = ({
+  approvalView: e,
+  onBackClick: v,
+  onEditRuleClick: u,
+  onDeleteRuleClick: y
+}) => {
+  const S = M(), x = L(), { fetchState: c, deleteStatus: a } = e, d = b.getLocalizedStrings().commonSetUp.approval, g = b.getLocalizedStrings().spendManagement.reimbursement.reimbursementApproval, m = a.fetchState, l = e.listeningToPusherEvent;
+  return /* @__PURE__ */ t.jsxs(he, { children: [
+    /* @__PURE__ */ t.jsx(
+      Q,
+      {
+        title: d.approvalPageHeader,
+        backgroundColor: S.colors.grey4,
+        style: { zIndex: 4 },
+        onBackClick: () => {
+          v();
+        },
+        source: "ReimbursementApprovalRulesPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(me, { children: [
+      /* @__PURE__ */ t.jsx(xe, { windowSize: x, children: g.approvalPageSubTitle }),
+      c === "In-Progress" || c === "Not-Started" || m === "In-Progress" || l === !0 ? /* @__PURE__ */ t.jsxs(ue, { children: [
+        /* @__PURE__ */ t.jsx(
+          J,
+          {
+            size: l === !0 ? "Large" : "ExtraLarge",
+            start: !0
+          }
+        ),
+        l === !0 && /* @__PURE__ */ t.jsx(ge, { windowSize: x, children: d.updatingApprovalRules.replace(
+          "__entity__",
+          "reimbursements"
+        ) })
+      ] }) : c === "Completed" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        e.allApprovalRules.map(($, f) => /* @__PURE__ */ t.jsx(
+          Y,
+          {
+            showDeleteBtn: f !== 0,
+            approvalRule: $,
+            isLastSection: f === e.allApprovalRules.length - 1,
+            onEditRuleClick: u,
+            onDeleteRuleClick: y
+          },
+          $.approvalRuleId
+        )),
+        /* @__PURE__ */ t.jsxs(
+          we,
+          {
+            windowSize: x,
+            onClick: () => {
+              u();
+            },
+            "data-testid": j("add-approval-rule"),
+            children: [
+              /* @__PURE__ */ t.jsx($e, {}),
+              /* @__PURE__ */ t.jsx(fe, { children: d.addApprovalText })
+            ]
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}, he = r.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+`, me = r.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, ue = r.div`
+  display: flex;
+  width: 100%;
+  min-height: calc(100vh - 150px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${o.sp3};
+  background-color: ${(e) => e.theme.colors.grey4};
+`, xe = r(T)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => w.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => w.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => w.subTitlePaddingBottom.valuePx(e.windowSize)};
+`, ge = r(T)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  margin-top: ${o.sp3};
+`, we = r(T)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${o.sp3} ${o.sp4};
+  gap: ${(e) => w.addApprovalGap.valuePx(e.windowSize)};
+
+  width: ${(e) => w.width.valuePx(e.windowSize)};
+  height: ${o.sp8};
+
+  background: ${(e) => e.theme.colors.grey5};
+
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  &:hover {
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    color: ${(e) => e.theme.colors.primary};
+    border-color: ${(e) => e.theme.colors.primary};
+  }
+  margin-bottom: ${o.sp6};
+`, $e = r(K)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, fe = r.div`
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  je as default
+};

package/dist/ReimbursementApprovalRulesPage-HpEb0eck.cjs

@@ -0,0 +1,243 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),s=require("@emotion/styled"),t=require("./index-DFkWjm-c.cjs"),T=require("react"),r={sectionWidth:new t.ResponsiveSized(343,580,726),ruleWrapperPadding:new t.ResponsiveSized(t.sp[3],t.sp[4]),wrapperGap:new t.ResponsiveSized(t.sp[4],t.sp[3]),wrapperMarginBottom:new t.ResponsiveSized(t.sp[6],t.sp[8]),lastWrapperMarginBottom:new t.ResponsiveSized(t.sp[5],t.sp[9]),stepperWidthHeight:new t.ResponsiveSized(20,t.sp[5]),stepperItemLeft:new t.ResponsiveSized(-29,-23),stepperItemTop:new t.ResponsiveSized(2,t.sp[0]),stepperItemPaddingLeft:new t.ResponsiveSized(t.sp[0],10),stepperItemMinHeight:new t.ResponsiveSized(22,28),stepperLeft:new t.ResponsiveSized(11,17),stepperTop:new t.ResponsiveSized(2,t.sp[0]),stepperContentTop:new t.ResponsiveSized(t.sp[0],-t.sp[1])},z={stepper:new t.ResponsiveSizedStyle("smallRegular","standardRegular"),amount:new t.ResponsiveSizedStyle("standardRegular","largeRegular")},A=({showDeleteBtn:e=!1,isLastSection:w=!1,approvalRule:x,onEditRuleClick:v,onDeleteRuleClick:$})=>{const[u,l]=T.useState(!1),n=t.useWindowSizeContext(),{range:a}=x.criteria[0],{steps:m,approvalRuleId:c}=x,i=t.appLocale.getLocalizedStrings().commonSetUp.approval,g=()=>{l(!0)},S={onOkClick:()=>{l(!1),$?.(c)},onCancelClick:()=>{l(!1)}};return o.jsxRuntimeExports.jsxs(I,{windowSize:n,isLastSection:w,"data-testid":t.generateDataTestId("approval-rule-section",c),children:[o.jsxRuntimeExports.jsxs(C,{windowSize:n,children:[o.jsxRuntimeExports.jsxs(H,{children:[o.jsxRuntimeExports.jsxs(b,{windowSize:n,children:[i.from," ",t.amountToString("0,0",a.min)]}),o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx(j,{}),o.jsxRuntimeExports.jsx(W,{}),o.jsxRuntimeExports.jsx(j,{})]}),a.max==null?o.jsxRuntimeExports.jsx(G,{}):o.jsxRuntimeExports.jsx(b,{windowSize:n,children:t.amountToString("0,0",{...a.min,amount:a.max.amount})})]}),o.jsxRuntimeExports.jsxs(_,{className:"icons",children:[e?o.jsxRuntimeExports.jsx(q,{onClick:g}):null,o.jsxRuntimeExports.jsx(U,{onClick:()=>{v(c)},"data-testid":t.generateDataTestId("edit-approval-rule",c)})]})]}),o.jsxRuntimeExports.jsx(L,{windowSize:n,children:o.jsxRuntimeExports.jsx(B,{isSingleStep:m.length===1,windowSize:n,children:m.map((d,E)=>o.jsxRuntimeExports.jsxs(D,{isSingleStep:m.length===1,className:"stepperItem",windowSize:n,children:[d.action==="require_approval"?o.jsxRuntimeExports.jsx(N,{children:i.requireText}):o.jsxRuntimeExports.jsx(M,{children:i.notifyText}),d.nonUserActors.filter(p=>p.subType!=null).map((p,P)=>o.jsxRuntimeExports.jsxs(f,{children:[o.jsxRuntimeExports.jsx(R,{children:p.subType!=null?i.nonUsers[p.subType].label:null}),d.operator!="is"?o.jsxRuntimeExports.jsx(y,{className:"operator",children:d.operator}):null]},`${p.subType}_${P}`)),d.actors.map(p=>o.jsxRuntimeExports.jsxs(f,{children:[o.jsxRuntimeExports.jsxs(R,{children:[p.firstName," ",p.lastName]}),d.operator!="is"?o.jsxRuntimeExports.jsx(y,{className:"operator",children:d.operator}):null]},p.userId))]},E))})}),u?o.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpTitle,{children:i.deleteApprovalRuleTitle}),descriptionComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpDescription,{children:i.deleteApprovalRuleDesc}),primaryButtonText:i.deleteTxt,proceedButtonVariant:"danger",secondaryButtonText:i.cancelBtnText,action:S}):null]})},I=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${e=>r.wrapperGap.valuePx(e.windowSize)};
+  margin-bottom: ${e=>e.isLastSection?r.lastWrapperMarginBottom.valuePx(e.windowSize):r.wrapperMarginBottom.valuePx(e.windowSize)};
+  .icons {
+    display: none;
+  }
+  &:hover {
+    .icons {
+      display: flex;
+    }
+    > div:last-of-type {
+      border-color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,C=s(t.LargeMedium)`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  width: ${e=>r.sectionWidth.valuePx(e.windowSize)};
+  gap: ${t.Space.sp2};
+`,k=s.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`,W=s.div`
+  width: ${t.Space.sp8};
+  height: 2px;
+  background-color: ${e=>e.theme.colors.primary};
+`,j=s.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: ${e=>e.theme.colors.primary};
+`,L=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: ${e=>r.ruleWrapperPadding.valuePx(e.windowSize)};
+  gap: 10px;
+
+  width: ${e=>r.sectionWidth.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey5};
+
+  border: 1px solid ${e=>e.theme.colors.grey3};
+
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+`,B=s.ul`
+  ${e=>`${z.stepper.style(e.windowSize)}`};
+  position: relative;
+  padding-left: ${t.Space.sp6};
+  list-style: none;
+  box-sizing: initial;
+  margin: 0;
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${e=>r.stepperTop.valuePx(e.windowSize)};
+    left: ${e=>r.stepperLeft.valuePx(e.windowSize)};
+    width: 10px;
+    height: ${e=>e.isSingleStep?"0%":"100%"};
+    border-left: 2px solid ${e=>e.theme.colors.grey1};
+  }
+`,D=s.li`
+  position: relative;
+  counter-increment: list;
+  min-height: ${e=>r.stepperItemMinHeight.valuePx(e.windowSize)};
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: ${e=>r.stepperItemPaddingLeft.valuePx(e.windowSize)};
+  gap: ${t.Space.sp1};
+
+  > div:last-of-type > span.operator:last-of-type {
+    visibility: hidden;
+  }
+
+  &:not(:last-child) {
+    padding-bottom: 20px;
+  }
+
+  &::before {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: ${e=>r.stepperItemTop.valuePx(e.windowSize)};
+    left: ${e=>r.stepperItemLeft.valuePx(e.windowSize)};
+    height: ${e=>e.isSingleStep?"0%":"100%"};
+    width: 10px;
+  }
+
+  &.stepperItem {
+    flex-wrap: wrap;
+    &::before {
+      border-left: 2px solid ${e=>e.theme.colors.grey1};
+    }
+    &:last-child::before {
+      border-left: 2px solid ${e=>e.theme.colors.grey5};
+    }
+
+    &::after {
+      content: counter(list);
+      position: absolute;
+      width: ${e=>r.stepperWidthHeight.valuePx(e.windowSize)};
+      height: ${e=>r.stepperWidthHeight.valuePx(e.windowSize)};
+      top: ${e=>r.stepperContentTop.valuePx(e.windowSize)};
+      left: -${t.Space.sp6};
+      ${t.textStyles.standardMedium.css};
+      text-align: center;
+      color: ${e=>e.theme.colors.grey1};
+      border: 2px solid ${e=>e.theme.colors.grey1};
+      background-color: ${e=>e.theme.colors.grey5};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+`,N=s.span`
+  color: ${t.Colors.alertDark};
+`,M=s.span`
+  color: ${t.Colors.successDark};
+`,R=s.span`
+  color: ${e=>e.theme.colors.primary};
+`,H=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp2};
+`,_=s.div`
+  display: flex;
+  gap: ${t.Space.sp5};
+`,q=s(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${t.Colors.important};
+  }
+`,U=s(t.SvgEdit)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,G=s(t.SvgInfinite)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+`,y=s.span`
+  color: ${e=>e.theme.colors.hero};
+`,f=s.div`
+  display: inherit;
+  gap: inherit;
+`,b=s.span`
+  ${e=>`${z.amount.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  word-break: break-word;
+`,h={width:new t.ResponsiveSized(343,580,726),titleWidth:new t.ResponsiveSized(343,580,780),addApprovalGap:new t.ResponsiveSized(6,t.sp[2]),subTitlePaddingTop:new t.ResponsiveSized(12,t.sp[3]),subTitlePaddingBottom:new t.ResponsiveSized(28,t.sp[7]),updatingApprovalRulesPaddingTop:new t.ResponsiveSized(12,t.sp[5])},O=({approvalView:e,onBackClick:w,onEditRuleClick:x,onDeleteRuleClick:v})=>{const $=o.useTheme(),u=t.useWindowSizeContext(),{fetchState:l,deleteStatus:n}=e,a=t.appLocale.getLocalizedStrings().commonSetUp.approval,m=t.appLocale.getLocalizedStrings().spendManagement.reimbursement.reimbursementApproval,c=n.fetchState,i=e.listeningToPusherEvent;return o.jsxRuntimeExports.jsxs(F,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{title:a.approvalPageHeader,backgroundColor:$.colors.grey4,style:{zIndex:4},onBackClick:()=>{w()},source:"ReimbursementApprovalRulesPage"}),o.jsxRuntimeExports.jsxs(J,{children:[o.jsxRuntimeExports.jsx(Q,{windowSize:u,children:m.approvalPageSubTitle}),l==="In-Progress"||l==="Not-Started"||c==="In-Progress"||i===!0?o.jsxRuntimeExports.jsxs(K,{children:[o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:i===!0?"Large":"ExtraLarge",start:!0}),i===!0&&o.jsxRuntimeExports.jsx(X,{windowSize:u,children:a.updatingApprovalRules.replace("__entity__","reimbursements")})]}):l==="Completed"?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[e.allApprovalRules.map((g,S)=>o.jsxRuntimeExports.jsx(A,{showDeleteBtn:S!==0,approvalRule:g,isLastSection:S===e.allApprovalRules.length-1,onEditRuleClick:x,onDeleteRuleClick:v},g.approvalRuleId)),o.jsxRuntimeExports.jsxs(Y,{windowSize:u,onClick:()=>{x()},"data-testid":t.generateDataTestId("add-approval-rule"),children:[o.jsxRuntimeExports.jsx(Z,{}),o.jsxRuntimeExports.jsx(V,{children:a.addApprovalText})]})]}):null]})]})},F=s.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+`,J=s.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`,K=s.div`
+  display: flex;
+  width: 100%;
+  min-height: calc(100vh - 150px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${t.Space.sp3};
+  background-color: ${e=>e.theme.colors.grey4};
+`,Q=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${e=>h.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${e=>h.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>h.subTitlePaddingBottom.valuePx(e.windowSize)};
+`,X=s(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  margin-top: ${t.Space.sp3};
+`,Y=s(t.StandardRegular)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${t.Space.sp3} ${t.Space.sp4};
+  gap: ${e=>h.addApprovalGap.valuePx(e.windowSize)};
+
+  width: ${e=>h.width.valuePx(e.windowSize)};
+  height: ${t.Space.sp8};
+
+  background: ${e=>e.theme.colors.grey5};
+
+  border: 1px solid ${e=>e.theme.colors.grey3};
+
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1}
+    ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  box-sizing: border-box;
+  &:hover {
+    div {
+      color: ${e=>e.theme.colors.primary};
+    }
+    color: ${e=>e.theme.colors.primary};
+    border-color: ${e=>e.theme.colors.primary};
+  }
+  margin-bottom: ${t.Space.sp6};
+`,Z=s(t.SvgAddRound)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,V=s.div`
+  color: ${e=>e.theme.colors.hero};
+`;exports.default=O;