@zeniai/web-components 3.16.66 → 3.16.67

package/dist/ReviewOverlay-CEDwtkwj.cjs

@@ -0,0 +1,152 @@
+"use strict";const i=require("./vendor-.pnpm-CT-Z_-kn.cjs"),n=require("@emotion/styled"),e=require("./index-BK4xD0JT.cjs"),f=require("./loader-IhaN6KOS.cjs"),s={containerMarginTop:new e.ResponsiveSized(0,e.sp[2]),containerMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[8]),containerMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),subTitleMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),titleMarginBotom:new e.ResponsiveSized(e.sp[0],e.sp[2]),titleMarginRight:new e.ResponsiveSized(e.sp[0],e.sp[3]),customTitleFont:new e.ResponsiveSized(e.sp[4],e.sp[5]),navBarHeight:new e.ResponsiveSized(62,62,62),navBarPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[3],e.sp[8]),navBarPaddingRight:new e.ResponsiveSized(e.sp[3],e.sp[3],e.sp[8])},E={title:new e.ResponsiveSizedStyle("h6Regular","h5Regular")},C=({title:t,description:d,reviewItems:S,showFooter:j,footerProps:{primaryButton:v,cancelButton:w,hideCancel:R},onCloseOverlay:y,onCloseReviewItem:$})=>{const o=e.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(T,{children:[i.jsxRuntimeExports.jsx(B,{windowSize:o,children:i.jsxRuntimeExports.jsx(W,{children:i.jsxRuntimeExports.jsx(D,{windowSize:o,children:i.jsxRuntimeExports.jsx(F,{children:i.jsxRuntimeExports.jsx(G,{onClick:y,"data-testid":e.generateDataTestId("review-overlay-close",t)})})})})}),i.jsxRuntimeExports.jsxs(z,{windowSize:o,children:[i.jsxRuntimeExports.jsxs(I,{windowSize:o,children:[i.jsxRuntimeExports.jsx(L,{children:i.jsxRuntimeExports.jsx(P,{windowSize:o,children:t})}),i.jsxRuntimeExports.jsx(k,{isError:d.isError,windowSize:o,children:d.content})]}),i.jsxRuntimeExports.jsx(M,{windowSize:o,children:S.map(r=>{const l=r.reviewStatus.code==="error",a=r.reviewStatus.code==="warning"||r.reviewStatus.code==="low-balance";return i.jsxRuntimeExports.jsxs(A,{isLoading:!1,isActive:!0,isWarning:a,isError:l,children:[a?i.jsxRuntimeExports.jsx(Q,{onClick:()=>$(r.id),"data-testid":e.generateDataTestId("review-close",r.id)}):null,i.jsxRuntimeExports.jsxs(q,{children:[i.jsxRuntimeExports.jsxs(H,{children:[i.jsxRuntimeExports.jsx(K,{children:b(r)}),i.jsxRuntimeExports.jsxs(O,{children:[i.jsxRuntimeExports.jsxs(x,{children:[i.jsxRuntimeExports.jsx(u,{style:{marginLeft:e.Space.sp2},isWarning:a,isError:l,children:r.leftSideText.title}),i.jsxRuntimeExports.jsx(u,{isWarning:a,isError:l,children:r.rightSideText.title})]}),i.jsxRuntimeExports.jsxs(x,{children:[i.jsxRuntimeExports.jsx(N,{style:{marginLeft:e.Space.sp2},children:r.leftSideText.subTitle}),o!=="small"?i.jsxRuntimeExports.jsxs(p,{windowSize:o,children:[i.jsxRuntimeExports.jsx(c,{isError:l,isWarning:a,children:i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[r.rightSideText.showThunderIcon===!0?i.jsxRuntimeExports.jsx(h,{children:i.jsxRuntimeExports.jsx(m,{})}):null,r.rightSideText.subTitle]})}),i.jsxRuntimeExports.jsx(c,{isWarning:!0,isError:!1,children:r.rightSideText.additonalInfo})]}):null]})]})]}),o==="small"?i.jsxRuntimeExports.jsxs(p,{windowSize:o,children:[i.jsxRuntimeExports.jsx(c,{style:{marginLeft:e.Space.sp5,marginTop:e.Space.sp0},isError:l,isWarning:a,children:i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[r.rightSideText.showThunderIcon===!0?i.jsxRuntimeExports.jsx(h,{children:i.jsxRuntimeExports.jsx(m,{})}):null,r.rightSideText.subTitle]})}),i.jsxRuntimeExports.jsx(c,{style:{marginLeft:e.Space.sp5,marginTop:e.Space.sp0},isWarning:a,isError:l,children:r.rightSideText.additonalInfo})]}):null]})]},r.id)})})]}),j?i.jsxRuntimeExports.jsx(e.Footer,{primaryBtn:v,cancelBtn:w,showCancel:!R}):null]})},b=t=>t.reviewStatus.isLoading?i.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Small",style:{display:"flex",width:e.Space.sp4,height:e.Space.sp4,alignItems:"center",justifyContent:"center"},start:!0}):t.reviewStatus.code==="error"?i.jsxRuntimeExports.jsx(g,{isError:!0}):t.reviewStatus.code==="warning"?i.jsxRuntimeExports.jsx(g,{isError:!1}):t.reviewStatus.code==="valid"?i.jsxRuntimeExports.jsx(_,{}):t.reviewStatus.code==="low-balance"?i.jsxRuntimeExports.jsx(U,{}):i.jsxRuntimeExports.jsx(J,{}),T=n.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey4};
+`,z=n.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin-top: ${t=>s.containerMarginTop.valuePx(t.windowSize)};
+  margin-bottom: ${e.Space.sp8};
+`,I=n.div`
+  position: sticky;
+  top: ${e.Space.sp0};
+  background-color: ${t=>t.theme.colors.grey4};
+  z-index: 1;
+  padding-left: ${t=>s.containerMarginLeft.valuePx(t.windowSize)};
+  padding-right: ${t=>s.containerMarginRight.valuePx(t.windowSize)};
+`,L=n.div`
+  display: flex;
+  align-items: center;
+`,P=n(e.StyledText)`
+  ${t=>`${E.title.style(t.windowSize)}`};
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${e.Space.sp2};
+  margin-bottom: ${t=>s.titleMarginBotom.valuePx(t.windowSize)};
+  margin-right: ${t=>s.titleMarginRight.valuePx(t.windowSize)};
+`,k=n(e.StandardRegular)`
+  margin-bottom: ${t=>s.subTitleMarginBottom.valuePx(t.windowSize)};
+  color: ${t=>t.isError?e.Colors.important:t.theme.colors.hero};
+`,M=n.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: ${e.Space.sp3};
+  margin-left: ${t=>s.containerMarginLeft.valuePx(t.windowSize)};
+  margin-right: ${t=>s.containerMarginRight.valuePx(t.windowSize)};
+`,B=n.div`
+  min-height: ${t=>s.navBarHeight.valuePx(t.windowSize)};
+  position: sticky;
+  border-bottom: 1px solid transparent;
+  z-index: 2;
+  top: ${e.Space.sp0};
+  width: 100%;
+`,W=n.div`
+  position: relative;
+  min-height: 62px;
+`,D=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: ${e.Space.sp0};
+  left: ${e.Space.sp0};
+  right: ${e.Space.sp0};
+  padding-right: ${t=>s.navBarPaddingRight.valuePx(t.windowSize)};
+  padding-left: ${t=>s.navBarPaddingLeft.valuePx(t.windowSize)};
+  height: 100%;
+`,F=n.div`
+  display: flex;
+  flex: 1 1 0;
+  justify-content: flex-end;
+`,G=n(e.SvgClose)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  cursor: pointer;
+  color: ${t=>t.theme.colors.grey1};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,A=n.div`
+  position: relative;
+  display: flex;
+  background-color: ${t=>t.isActive?t.isError?e.Colors.importantLight:t.isWarning?e.Colors.alertLight:t.theme.colors.grey5:t.theme.colors.grey5};
+  border: ${t=>`1px solid ${t.theme.colors.grey3}`};
+  border-radius: ${e.Space.sp2};
+  margin-bottom: ${e.Space.sp3};
+  border-color: ${t=>t.isActive?t.isError?e.Colors.important:t.isWarning?e.Colors.brandColorGoldDark:t.theme.colors.grey3:t.isLoading?t.theme.colors.primary:t.theme.colors.grey3};
+  flex-direction: column;
+  box-shadow: ${e.Space.sp0} 1px 2px ${e.Space.sp0} ${e.Colors.boxShadowElevation};
+`,q=n.div`
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  align-items: center;
+`,H=n.div`
+  display: flex;
+  width: 100%;
+`,O=n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+`,x=n.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,p=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: ${t=>t.windowSize==="small"?"self-start":"self-end"};
+`,u=n(e.StandardRegular)`
+  color: ${t=>t.isError||t.isWarning?t.theme.mode==="dark"?e.Colors.neutralGrey4Dark:t.isWarning:t.theme.colors.primary};
+`,N=n(e.SmallRegular)`
+  margin-top: -5px;
+  color: ${t=>t.theme.mode==="dark"?e.Colors.neutralGrey1Dark:t.theme.colors.primary};
+`,c=n(e.SmallRegular)`
+  display: flex;
+  margin-top: -5px;
+  color: ${t=>t.isError?e.Colors.important:t.isWarning?e.Colors.brandColorGoldDark:t.theme.colors.primary};
+`,g=n(e.SvgHighImportanceFill)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${t=>t.isError?e.Colors.important:e.Colors.brandColorGoldDark};
+`,_=n(e.SvgTickRoundFill)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${e.Colors.success};
+`,J=n(f.SvgLoader)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${t=>t.theme.colors.grey2};
+`,K=n.div`
+  margin-top: 2px;
+  display: flex;
+`,Q=n(e.SvgCloseRound)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  border-radius: 50%;
+  background-color: ${t=>t.theme.colors.grey5};
+`,h=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${e.Space.sp1};
+`,m=n(e.SvgAutofill1)`
+  color: ${t=>t.theme.colors.brandColorJade};
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+`,U=n(e.SvgLowBalance)`
+  color: ${t=>t.theme.colors.brandColorGoldDark};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+`;exports.ReviewOverlayPage=C;

package/dist/ReviewOverlay-W9MOcZEO.js

@@ -0,0 +1,299 @@
+import { j as i } from "./vendor-.pnpm-DtFedGku.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 S, aa as B, A as W, G as $, eF as D, D as r, bc as F, ba as G, ke as A } from "./index-BKbfwHLi.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(y, {}) }) : 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(y, {}) }) : 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(S)`
+  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(S)`
+  color: ${(e) => e.isError || e.isWarning ? e.theme.mode === "dark" ? s.neutralGrey4Dark : e.isWarning : e.theme.colors.primary};
+`, se = n($)`
+  margin-top: -5px;
+  color: ${(e) => e.theme.mode === "dark" ? s.neutralGrey1Dark : e.theme.colors.primary};
+`, g = n($)`
+  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};
+`, y = 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-CgDpRef_.js

@@ -0,0 +1,72 @@
+import { j as t } from "./vendor-.pnpm-DtFedGku.js";
+import o from "@emotion/styled";
+import { ha as m, hb as h, Z as x, S as i, j as r, a as g, aq as j, G as c } from "./index-BKbfwHLi.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
+};

package/dist/RoleWithToolTip-DiMkxiuY.cjs

@@ -0,0 +1,22 @@
+"use strict";const s=require("./vendor-.pnpm-CT-Z_-kn.cjs"),o=require("@emotion/styled"),e=require("./index-BK4xD0JT.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;