@zeniai/web-components 3.16.40 → 3.16.41

package/dist/ReviewOverlay-DQvXSDYM.js

@@ -0,0 +1,299 @@
+import { j as i } from "./vendor-.pnpm-BZbZ6JJC.js";
+import n from "@emotion/styled";
+import { u as L, j as p, S as t, ap as k, R as d, b as P, av as E, K as M, C as s, p as y, aa as B, A as W, G as S, eE as D, D as r, bc as F, ba as G, j$ as A } from "./index-BtH6xclG.js";
+import { S as H } from "./loader-BwDk7JSW.js";
+const l = {
+  containerMarginTop: new d(0, r[2]),
+  containerMarginLeft: new d(r[3], r[8]),
+  containerMarginRight: new d(r[3], r[8]),
+  subTitleMarginBottom: new d(r[2], r[2]),
+  titleMarginBotom: new d(r[0], r[2]),
+  titleMarginRight: new d(r[0], r[3]),
+  customTitleFont: new d(r[4], r[5]),
+  navBarHeight: new d(62, 62, 62),
+  navBarPaddingLeft: new d(r[3], r[3], r[8]),
+  navBarPaddingRight: new d(r[3], r[3], r[8])
+}, N = {
+  title: new E("h6Regular", "h5Regular")
+}, ue = ({
+  title: e,
+  description: x,
+  reviewItems: j,
+  showFooter: b,
+  footerProps: { primaryButton: T, cancelButton: C, hideCancel: R },
+  onCloseOverlay: I,
+  onCloseReviewItem: z
+}) => {
+  const a = L();
+  return /* @__PURE__ */ i.jsxs(J, { children: [
+    /* @__PURE__ */ i.jsx(Y, { windowSize: a, children: /* @__PURE__ */ i.jsx(Z, { children: /* @__PURE__ */ i.jsx(_, { windowSize: a, children: /* @__PURE__ */ i.jsx(ee, { children: /* @__PURE__ */ i.jsx(
+      ie,
+      {
+        onClick: I,
+        "data-testid": p("review-overlay-close", e)
+      }
+    ) }) }) }) }),
+    /* @__PURE__ */ i.jsxs(K, { windowSize: a, children: [
+      /* @__PURE__ */ i.jsxs(q, { windowSize: a, children: [
+        /* @__PURE__ */ i.jsx(Q, { children: /* @__PURE__ */ i.jsx(U, { windowSize: a, children: e }) }),
+        /* @__PURE__ */ i.jsx(
+          V,
+          {
+            isError: x.isError,
+            windowSize: a,
+            children: x.content
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i.jsx(X, { windowSize: a, children: j.map((o) => {
+        const h = o.reviewStatus.code === "error", c = o.reviewStatus.code === "warning" || o.reviewStatus.code === "low-balance";
+        return /* @__PURE__ */ i.jsxs(
+          te,
+          {
+            isLoading: !1,
+            isActive: !0,
+            isWarning: c,
+            isError: h,
+            children: [
+              c ? /* @__PURE__ */ i.jsx(
+                ce,
+                {
+                  onClick: () => z(o.id),
+                  "data-testid": p("review-close", o.id)
+                }
+              ) : null,
+              /* @__PURE__ */ i.jsxs(ne, { children: [
+                /* @__PURE__ */ i.jsxs(re, { children: [
+                  /* @__PURE__ */ i.jsx(de, { children: O(o) }),
+                  /* @__PURE__ */ i.jsxs(oe, { children: [
+                    /* @__PURE__ */ i.jsxs(m, { children: [
+                      /* @__PURE__ */ i.jsx(
+                        w,
+                        {
+                          style: { marginLeft: t.sp2 },
+                          isWarning: c,
+                          isError: h,
+                          children: o.leftSideText.title
+                        }
+                      ),
+                      /* @__PURE__ */ i.jsx(w, { isWarning: c, isError: h, children: o.rightSideText.title })
+                    ] }),
+                    /* @__PURE__ */ i.jsxs(m, { children: [
+                      /* @__PURE__ */ i.jsx(se, { style: { marginLeft: t.sp2 }, children: o.leftSideText.subTitle }),
+                      a !== "small" ? /* @__PURE__ */ i.jsxs(u, { windowSize: a, children: [
+                        /* @__PURE__ */ i.jsx(g, { isError: h, isWarning: c, children: /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                          o.rightSideText.showThunderIcon === !0 ? /* @__PURE__ */ i.jsx(f, { children: /* @__PURE__ */ i.jsx($, {}) }) : null,
+                          o.rightSideText.subTitle
+                        ] }) }),
+                        /* @__PURE__ */ i.jsx(g, { isWarning: !0, isError: !1, children: o.rightSideText.additonalInfo })
+                      ] }) : null
+                    ] })
+                  ] })
+                ] }),
+                a === "small" ? /* @__PURE__ */ i.jsxs(u, { windowSize: a, children: [
+                  /* @__PURE__ */ i.jsx(
+                    g,
+                    {
+                      style: { marginLeft: t.sp5, marginTop: t.sp0 },
+                      isError: h,
+                      isWarning: c,
+                      children: /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                        o.rightSideText.showThunderIcon === !0 ? /* @__PURE__ */ i.jsx(f, { children: /* @__PURE__ */ i.jsx($, {}) }) : null,
+                        o.rightSideText.subTitle
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    g,
+                    {
+                      style: { marginLeft: t.sp5, marginTop: t.sp0 },
+                      isWarning: c,
+                      isError: h,
+                      children: o.rightSideText.additonalInfo
+                    }
+                  )
+                ] }) : null
+              ] })
+            ]
+          },
+          o.id
+        );
+      }) })
+    ] }),
+    b ? /* @__PURE__ */ i.jsx(
+      k,
+      {
+        primaryBtn: T,
+        cancelBtn: C,
+        showCancel: !R
+      }
+    ) : null
+  ] });
+}, O = (e) => e.reviewStatus.isLoading ? /* @__PURE__ */ i.jsx(
+  W,
+  {
+    size: "Small",
+    style: {
+      display: "flex",
+      width: t.sp4,
+      height: t.sp4,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    start: !0
+  }
+) : e.reviewStatus.code === "error" ? /* @__PURE__ */ i.jsx(v, { isError: !0 }) : e.reviewStatus.code === "warning" ? /* @__PURE__ */ i.jsx(v, { isError: !1 }) : e.reviewStatus.code === "valid" ? /* @__PURE__ */ i.jsx(ae, {}) : e.reviewStatus.code === "low-balance" ? /* @__PURE__ */ i.jsx(he, {}) : /* @__PURE__ */ i.jsx(le, {}), J = n.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, K = n.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin-top: ${(e) => l.containerMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${t.sp8};
+`, q = n.div`
+  position: sticky;
+  top: ${t.sp0};
+  background-color: ${(e) => e.theme.colors.grey4};
+  z-index: 1;
+  padding-left: ${(e) => l.containerMarginLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => l.containerMarginRight.valuePx(e.windowSize)};
+`, Q = n.div`
+  display: flex;
+  align-items: center;
+`, U = n(M)`
+  ${(e) => `${N.title.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${t.sp2};
+  margin-bottom: ${(e) => l.titleMarginBotom.valuePx(e.windowSize)};
+  margin-right: ${(e) => l.titleMarginRight.valuePx(e.windowSize)};
+`, V = n(y)`
+  margin-bottom: ${(e) => l.subTitleMarginBottom.valuePx(e.windowSize)};
+  color: ${(e) => e.isError ? s.important : e.theme.colors.hero};
+`, X = n.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: ${t.sp3};
+  margin-left: ${(e) => l.containerMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${(e) => l.containerMarginRight.valuePx(e.windowSize)};
+`, Y = n.div`
+  min-height: ${(e) => l.navBarHeight.valuePx(e.windowSize)};
+  position: sticky;
+  border-bottom: 1px solid transparent;
+  z-index: 2;
+  top: ${t.sp0};
+  width: 100%;
+`, Z = n.div`
+  position: relative;
+  min-height: 62px;
+`, _ = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: ${t.sp0};
+  left: ${t.sp0};
+  right: ${t.sp0};
+  padding-right: ${(e) => l.navBarPaddingRight.valuePx(e.windowSize)};
+  padding-left: ${(e) => l.navBarPaddingLeft.valuePx(e.windowSize)};
+  height: 100%;
+`, ee = n.div`
+  display: flex;
+  flex: 1 1 0;
+  justify-content: flex-end;
+`, ie = n(P)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, te = n.div`
+  position: relative;
+  display: flex;
+  background-color: ${(e) => e.isActive ? e.isError ? s.importantLight : e.isWarning ? s.alertLight : e.theme.colors.grey5 : e.theme.colors.grey5};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${t.sp2};
+  margin-bottom: ${t.sp3};
+  border-color: ${(e) => e.isActive ? e.isError ? s.important : e.isWarning ? s.brandColorGoldDark : e.theme.colors.grey3 : e.isLoading ? e.theme.colors.primary : e.theme.colors.grey3};
+  flex-direction: column;
+  box-shadow: ${t.sp0} 1px 2px ${t.sp0} ${s.boxShadowElevation};
+`, ne = n.div`
+  padding: ${t.sp3} ${t.sp4};
+  align-items: center;
+`, re = n.div`
+  display: flex;
+  width: 100%;
+`, oe = n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+`, m = n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`, u = n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: ${(e) => e.windowSize === "small" ? "self-start" : "self-end"};
+`, w = n(y)`
+  color: ${(e) => e.isError || e.isWarning ? e.theme.mode === "dark" ? s.neutralGrey4Dark : e.isWarning : e.theme.colors.primary};
+`, se = n(S)`
+  margin-top: -5px;
+  color: ${(e) => e.theme.mode === "dark" ? s.neutralGrey1Dark : e.theme.colors.primary};
+`, g = n(S)`
+  display: flex;
+  margin-top: -5px;
+  color: ${(e) => e.isError ? s.important : e.isWarning ? s.brandColorGoldDark : e.theme.colors.primary};
+`, v = n(F)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.isError ? s.important : s.brandColorGoldDark};
+`, ae = n(G)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${s.success};
+`, le = n(H)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${(e) => e.theme.colors.grey2};
+`, de = n.div`
+  margin-top: 2px;
+  display: flex;
+`, ce = n(B)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${t.sp4};
+  height: ${t.sp4};
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.grey5};
+`, f = n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${t.sp1};
+`, $ = n(D)`
+  color: ${(e) => e.theme.colors.brandColorJade};
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, he = n(A)`
+  color: ${(e) => e.theme.colors.brandColorGoldDark};
+  width: ${t.sp4};
+  height: ${t.sp4};
+`;
+export {
+  ue as R
+};

package/dist/RoleWithToolTip-C093KNmR.cjs

@@ -0,0 +1,22 @@
+"use strict";const s=require("./vendor-.pnpm-DHyNpoQL.cjs"),o=require("@emotion/styled"),e=require("./index-DiGCN0Sk.cjs"),{hyphen:a}=e.appLocale.getLocalizedStrings().common.strings,c=o.div``,d=o.div`
+  display: flex;
+  min-width: 192px;
+  justify-content: space-between;
+`,x=o(e.SmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+`,m=o(e.SmallRegular)`
+  color: ${t=>t.theme.colors.brandColorPearl};
+`,i=o.div`
+  display: flex;
+  align-items: center;
+`,h=o(e.ExtraSmallMedium)`
+  border-radius: ${e.Space.sp12};
+  border: 1px solid ${t=>t.theme.colors.grey1};
+  display: flex;
+  height: 18px;
+  width: 18px;
+  align-items: center;
+  justify-content: center;
+  color: 1px solid ${t=>t.theme.colors.grey1};
+  margin-left: ${e.Space.sp1};
+`,u=({roles:t})=>{let l=a,r=[];l=e.getRootRoleLabels(t),r=e.getAllEmployeeRoleLabels(t);const p=()=>r.length>0?s.jsxRuntimeExports.jsx(c,{children:r.map(n=>s.jsxRuntimeExports.jsxs(d,{children:[s.jsxRuntimeExports.jsx(x,{children:n[0]}),s.jsxRuntimeExports.jsx(m,{children:n[1]})]},n.join(",")))}):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:a});return r.length>0?s.jsxRuntimeExports.jsx(e.Tooltip,{enterDelay:600,"data-testid":e.generateDataTestId("roles-tooltip",l),title:p(),placement:"top-end",style:{marginLeft:e.Space.sp1,padding:"6px 12px"},maxWidth:"264px",children:s.jsxRuntimeExports.jsxs(i,{"data-testid":e.generateDataTestId("roles-label-wrapper",l),children:[l,s.jsxRuntimeExports.jsx(h,{className:"roles-count-wrapper","data-testid":e.generateDataTestId("roles-count-wrapper",l),children:r.length})]})}):s.jsxRuntimeExports.jsx(i,{"data-testid":e.generateDataTestId("roles-label-wrapper",l),children:l})};exports.RoleWithToolTip=u;

package/dist/RoleWithToolTip-MwI_BmVq.js

@@ -0,0 +1,72 @@
+import { j as t } from "./vendor-.pnpm-BZbZ6JJC.js";
+import o from "@emotion/styled";
+import { h8 as m, h9 as h, Z as x, S as i, j as r, a as g, aq as j, G as c } from "./index-BtH6xclG.js";
+const { hyphen: n } = g.getLocalizedStrings().common.strings, R = o.div``, y = o.div`
+  display: flex;
+  min-width: 192px;
+  justify-content: space-between;
+`, b = o(c)`
+  color: ${(e) => e.theme.colors.hero};
+`, u = o(c)`
+  color: ${(e) => e.theme.colors.brandColorPearl};
+`, p = o.div`
+  display: flex;
+  align-items: center;
+`, f = o(j)`
+  border-radius: ${i.sp12};
+  border: 1px solid ${(e) => e.theme.colors.grey1};
+  display: flex;
+  height: 18px;
+  width: 18px;
+  align-items: center;
+  justify-content: center;
+  color: 1px solid ${(e) => e.theme.colors.grey1};
+  margin-left: ${i.sp1};
+`, T = ({ roles: e }) => {
+  let l = n, s = [];
+  l = m(e), s = h(e);
+  const d = () => s.length > 0 ? /* @__PURE__ */ t.jsx(R, { children: s.map((a) => /* @__PURE__ */ t.jsxs(y, { children: [
+    /* @__PURE__ */ t.jsx(b, { children: a[0] }),
+    /* @__PURE__ */ t.jsx(u, { children: a[1] })
+  ] }, a.join(","))) }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: n });
+  return s.length > 0 ? /* @__PURE__ */ t.jsx(
+    x,
+    {
+      enterDelay: 600,
+      "data-testid": r("roles-tooltip", l),
+      title: d(),
+      placement: "top-end",
+      style: { marginLeft: i.sp1, padding: "6px 12px" },
+      maxWidth: "264px",
+      children: /* @__PURE__ */ t.jsxs(
+        p,
+        {
+          "data-testid": r("roles-label-wrapper", l),
+          children: [
+            l,
+            /* @__PURE__ */ t.jsx(
+              f,
+              {
+                className: "roles-count-wrapper",
+                "data-testid": r(
+                  "roles-count-wrapper",
+                  l
+                ),
+                children: s.length
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    p,
+    {
+      "data-testid": r("roles-label-wrapper", l),
+      children: l
+    }
+  );
+};
+export {
+  T as R
+};