@zeniai/web-components 3.16.41 → 3.16.43

package/dist/CustomerOnboardingDetailPageSkeleton-B2q2tdnD.js

@@ -1,434 +0,0 @@
-import { u as f, j as i, r as P, q as T } from "./vendor-.pnpm-BZbZ6JJC.js";
-import r from "@emotion/styled";
-import { S as t, C as x, j as v, ai as I, hI as L, ax as H, E as W, a as N, aJ as m, l as B, d as E, u as O, D as F, R as $ } from "./index-BtH6xclG.js";
-import C from "react";
-const _ = r(T)`
-  /* Size is controlled by styles.root prop */
-`, J = r.div`
-  position: relative;
-  width: ${t.sp3};
-  height: ${t.sp3};
-  border-radius: 50%;
-  background-color: ${x.brandColorJadeLight};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 50%;
-    border: 2px solid ${({ theme: e }) => e.colors.grey2};
-    pointer-events: none;
-    z-index: 1;
-  }
-`, U = ({
-  valueEnd: e,
-  valueStart: s,
-  children: o
-}) => {
-  const [n, l] = C.useState(s);
-  return C.useEffect(() => {
-    const a = setTimeout(() => {
-      l(e);
-    }, 100);
-    return () => clearTimeout(a);
-  }, [e]), /* @__PURE__ */ i.jsx(i.Fragment, { children: o(n) });
-}, Z = ({ valueEnd: e = 50 }) => {
-  const s = f();
-  return /* @__PURE__ */ i.jsx(U, { valueStart: 0, valueEnd: e, children: (o) => /* @__PURE__ */ i.jsx(J, { theme: s, children: /* @__PURE__ */ i.jsx(
-    _,
-    {
-      value: o,
-      strokeWidth: 50,
-      circleRatio: 1,
-      styles: {
-        ...P({
-          pathColor: x.success,
-          trailColor: "transparent",
-          pathTransitionDuration: 1.5,
-          rotation: 1,
-          strokeLinecap: "butt"
-        }),
-        root: {
-          width: t.sp3,
-          height: t.sp3,
-          position: "relative",
-          zIndex: 2,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      }
-    }
-  ) }) });
-}, w = ({
-  isActive: e,
-  isCompleted: s,
-  isDisabled: o,
-  isError: n,
-  isHalfCompleted: l,
-  theme: a
-}) => e || s || l || n ? n ? x.runwayRed : a.colors.primary : o ? a.colors.grey1 : a.colors.hero, j = ({
-  isActive: e,
-  isCompleted: s,
-  isDisabled: o,
-  isHalfCompleted: n,
-  theme: l
-}) => e || s || n ? l.colors.primary : o ? l.colors.grey1 : l.colors.hero, q = r.div`
-  width: 100%;
-  display: flex;
-  background: ${(e) => e.isActive ? e.theme.colors.grey5 : null};
-  transition: background-color 0.2s ease-in;
-  box-shadow: ${(e) => e.isActive ? `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}` : null};
-  border-radius: ${t.sp2};
-  padding: ${t.sp3};
-  cursor: ${(e) => e.isDisabled ? "no-drop" : "pointer"};
-  box-sizing: border-box;
-  &:hover {
-    background: ${(e) => {
-  const s = e.isCompleted || e.isHalfCompleted;
-  return e.isActive ? e.theme.colors.grey3 : s && e.isDisabled === !1 ? e.theme.colors.grey5 : "initial";
-}};
-    .step-content-title {
-      color: ${(e) => w({
-  isActive: e.isActive,
-  isCompleted: e.isCompleted,
-  isDisabled: e.isDisabled,
-  isError: e.isError,
-  isHalfCompleted: e.isHalfCompleted,
-  theme: e.theme
-})};
-    }
-    .step-content-subtitle {
-      color: ${(e) => j({
-  isActive: e.isActive,
-  isCompleted: e.isCompleted,
-  isDisabled: e.isDisabled,
-  isHalfCompleted: e.isHalfCompleted,
-  theme: e.theme
-})};
-    }
-  }
-`, M = r.div`
-  margin-right: ${t.sp2};
-  margin-top: 2px;
-`, V = r(L)`
-  width: ${t.sp3};
-  height: ${t.sp3};
-  color: ${x.success};
-`, G = r(I)`
-  width: ${t.sp3};
-  height: ${t.sp3};
-  color: ${x.runwayRed};
-`, K = r.div`
-  height: ${t.sp3};
-  width: ${t.sp3};
-  border: 1px solid
-    ${(e) => e.isActive ? e.theme.colors.primary : e.disabledStep ? e.theme.colors.grey2 : e.theme.colors.hero};
-  border-radius: 50%;
-`, Q = r.div`
-  display: flex;
-  flex-direction: column;
-`, X = r(H)`
-  color: ${(e) => w({
-  isActive: e.isActive,
-  isCompleted: e.isCompleted,
-  isDisabled: e.disabledStep,
-  isError: e.isError,
-  isHalfCompleted: e.isHalfCompleted,
-  theme: e.theme
-})};
-`, Y = r(W)`
-  color: ${(e) => j({
-  isActive: e.isActive,
-  isCompleted: e.isCompleted,
-  isDisabled: e.disabledStep,
-  isHalfCompleted: e.isHalfCompleted,
-  theme: e.theme
-})};
-`;
-function ee({
-  onboardingStep: e,
-  isActive: s,
-  isCompleted: o,
-  isHalfCompleted: n,
-  isDisabled: l,
-  isError: a,
-  stepText: h,
-  stepSubText: g,
-  onUpdateStep: p,
-  setIsStepClicked: c,
-  disabledSteps: d
-}) {
-  const u = l || d.includes(e) && s === !1;
-  return /* @__PURE__ */ i.jsxs(
-    q,
-    {
-      isActive: s,
-      isDisabled: u,
-      isCompleted: o,
-      isHalfCompleted: n,
-      isError: a,
-      onClick: l === !1 ? () => {
-        d.includes(e) && s === !1 || (c(!0), p(e));
-      } : void 0,
-      "data-testid": v("step-box", e),
-      children: [
-        /* @__PURE__ */ i.jsx(M, { children: a ? /* @__PURE__ */ i.jsx(G, {}) : n ? /* @__PURE__ */ i.jsx(Z, {}) : o ? /* @__PURE__ */ i.jsx(V, {}) : /* @__PURE__ */ i.jsx(
-          K,
-          {
-            isActive: s,
-            disabledStep: u
-          }
-        ) }),
-        /* @__PURE__ */ i.jsxs(Q, { children: [
-          /* @__PURE__ */ i.jsx(
-            X,
-            {
-              className: "step-content-title",
-              isActive: s,
-              isCompleted: o,
-              isHalfCompleted: n,
-              disabledStep: u,
-              isError: a,
-              children: h
-            }
-          ),
-          /* @__PURE__ */ i.jsx(
-            Y,
-            {
-              className: "step-content-subtitle",
-              isActive: s,
-              isCompleted: o,
-              isHalfCompleted: n,
-              disabledStep: u,
-              children: g
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-const te = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  margin-top: 84px;
-  flex-direction: column;
-  justify-content: start;
-  gap: ${t.sp6};
-  width: 198px;
-`, ie = r.div`
-  width: 100%;
-`;
-function se({
-  allSteps: e,
-  completedSteps: s,
-  halfCompletedSteps: o,
-  errorSteps: n,
-  currentStep: l,
-  isDisabled: a,
-  onUpdateStep: h,
-  setIsStepClicked: g,
-  disabledSteps: p
-}) {
-  const c = N.getLocalizedStrings().customerOnboardingPage.steps;
-  return /* @__PURE__ */ i.jsx(te, { children: e.map((d) => /* @__PURE__ */ i.jsx(ie, { children: /* @__PURE__ */ i.jsx(
-    ee,
-    {
-      isActive: d === l,
-      isCompleted: s.includes(d),
-      isHalfCompleted: o.includes(d),
-      isError: n.includes(d),
-      isDisabled: a,
-      onboardingStep: d,
-      stepText: c[d].stepText,
-      stepSubText: c[d].stepSubText,
-      onUpdateStep: h,
-      setIsStepClicked: g,
-      disabledSteps: p
-    }
-  ) }, d)) });
-}
-const oe = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  margin-top: 84px;
-  flex-direction: column;
-  justify-content: start;
-  gap: ${t.sp6};
-  width: 198px;
-`, re = r.div`
-  height: 89px; // As per figma specs
-  border-radius: ${t.sp2};
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-`, ne = () => {
-  const e = f();
-  return /* @__PURE__ */ i.jsx(oe, { children: [...Array(2)].map((s, o) => /* @__PURE__ */ i.jsx(re, { children: /* @__PURE__ */ i.jsx(
-    m,
-    {
-      width: 198,
-      height: 89,
-      backgroundColor: e.colors.grey3,
-      style: { borderRadius: t.sp2 }
-    }
-  ) }, o)) });
-}, b = 240, le = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  padding: ${t.sp0} 20px;
-  width: ${b}px;
-  box-sizing: border-box;
-  position: fixed;
-  height: 100%;
-  z-index: 4;
-  background: ${(e) => e.theme.colors.background};
-  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
-  ${(e) => e.theme.breakpoints.down("md")} {
-    display: none;
-  }
-  border-right: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-`, ae = r.div`
-  margin: ${t.sp0} ${t.sp0} ${t.sp3} ${t.sp0};
-  width: fit-content;
-`, de = r(E)`
-  margin: 20px 12px ${t.sp0} 12px;
-  height: ${t.sp4};
-  width: 102px;
-  color: ${(e) => e.theme.colors.primary};
-  cursor: pointer;
-  flex-shrink: 0;
-`, be = (e) => {
-  const {
-    isOnAddressPage: s,
-    allSteps: o,
-    completedSteps: n,
-    halfCompletedSteps: l,
-    errorSteps: a,
-    currentStep: h,
-    signedInUser: g,
-    currentTenant: p,
-    fetchStatus: c,
-    onUpdateStep: d,
-    onZeniLogoClick: u,
-    handleLogOutClick: k,
-    handleCockpitClick: A,
-    setIsStepClicked: D
-  } = e, R = c.fetchState === "In-Progress" || c.fetchState === "Not-Started", z = [];
-  return /* @__PURE__ */ i.jsxs(le, { children: [
-    /* @__PURE__ */ i.jsx(
-      de,
-      {
-        "data-testid": v("zeni-logo-customer-onboarding-drawer"),
-        onClick: u
-      }
-    ),
-    R ? /* @__PURE__ */ i.jsx(ne, {}) : /* @__PURE__ */ i.jsx(
-      se,
-      {
-        allSteps: o,
-        isDisabled: s,
-        disabledSteps: z,
-        completedSteps: n,
-        halfCompletedSteps: l,
-        errorSteps: a,
-        currentStep: h,
-        onUpdateStep: d,
-        setIsStepClicked: D
-      }
-    ),
-    /* @__PURE__ */ i.jsx(ae, { children: /* @__PURE__ */ i.jsx(
-      B,
-      {
-        signedInUser: g,
-        currentTenant: p,
-        onLogOutClick: k,
-        onCockpitClick: A
-      }
-    ) })
-  ] });
-}, S = {
-  titleRectangleWidth: new $(250, 500, 550, 600),
-  subTitleRectangleWidth: new $(343, 600, 700, 800)
-}, ce = r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
-  min-width: ${(e) => e.isNoStepsPage ? "100%" : `calc(100% - ${b}px)`};
-  padding-left: ${(e) => e.isNoStepsPage ? t.sp0 : `${b}px`};
-  flex: 1;
-
-  ${(e) => e.theme.breakpoints.down("md")} {
-    width: 100%;
-    padding-left: ${t.sp0};
-  }
-`, he = r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  width: 100%;
-  min-height: 100vh;
-  background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/signin-background-${e.windowSize === "small" ? "m" : "w"}-${e.theme.mode === "dark" ? "d" : "l"}.svg)`};
-  background-color: ${(e) => e.theme.colors.grey4};
-  background-size: inherit;
-  background-attachment: fixed;
-  background-position: ${(e) => e.windowSize === "small" ? "center center" : "right center"};
-  background-repeat: no-repeat;
-
-  ${(e) => e.theme.breakpoints.down("lg")} {
-    background-size: cover;
-  }
-`, ue = r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${t.sp3};
-  margin-top: 94px; // As per Figma Specs - Nav Bar Height + 32 px
-`, y = r.div`
-  border-radius: ${t.sp2};
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-`, fe = ({
-  isNoStepsPage: e = !1
-}) => {
-  const s = f(), o = O();
-  return /* @__PURE__ */ i.jsx(ce, { isNoStepsPage: e, children: /* @__PURE__ */ i.jsx(he, { windowSize: o, children: /* @__PURE__ */ i.jsxs(ue, { children: [
-    /* @__PURE__ */ i.jsx(y, { children: /* @__PURE__ */ i.jsx(
-      m,
-      {
-        width: S.titleRectangleWidth.value(o),
-        height: F[6],
-        backgroundColor: s.colors.grey3,
-        style: { borderRadius: t.sp2 }
-      }
-    ) }),
-    /* @__PURE__ */ i.jsx(y, { children: /* @__PURE__ */ i.jsx(
-      m,
-      {
-        width: S.subTitleRectangleWidth.value(o),
-        height: 27,
-        backgroundColor: s.colors.grey3,
-        style: { borderRadius: t.sp2 }
-      }
-    ) })
-  ] }) }) });
-};
-export {
-  be as C,
-  b as D,
-  fe as a
-};

package/dist/CustomerOnboardingDetailPageSkeleton-BFbj6uc7.cjs

@@ -1,162 +0,0 @@
-"use strict";const s=require("./vendor-.pnpm-DHyNpoQL.cjs"),r=require("@emotion/styled"),t=require("./index-DiGCN0Sk.cjs"),h=require("react"),w=r(s.CircularProgressbar)`
-  /* Size is controlled by styles.root prop */
-`,E=r.div`
-  position: relative;
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  border-radius: 50%;
-  background-color: ${t.Colors.brandColorJadeLight};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 50%;
-    border: 2px solid ${({theme:e})=>e.colors.grey2};
-    pointer-events: none;
-    z-index: 1;
-  }
-`,k=({valueEnd:e,valueStart:o,children:i})=>{const[n,a]=h.useState(o);return h.useEffect(()=>{const c=setTimeout(()=>{a(e)},100);return()=>clearTimeout(c)},[e]),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:i(n)})},A=({valueEnd:e=50})=>{const o=s.useTheme();return s.jsxRuntimeExports.jsx(k,{valueStart:0,valueEnd:e,children:i=>s.jsxRuntimeExports.jsx(E,{theme:o,children:s.jsxRuntimeExports.jsx(w,{value:i,strokeWidth:50,circleRatio:1,styles:{...s.buildStyles({pathColor:t.Colors.success,trailColor:"transparent",pathTransitionDuration:1.5,rotation:1,strokeLinecap:"butt"}),root:{width:t.Space.sp3,height:t.Space.sp3,position:"relative",zIndex:2,display:"flex",alignItems:"center",justifyContent:"center"}}})})})},j=({isActive:e,isCompleted:o,isDisabled:i,isError:n,isHalfCompleted:a,theme:c})=>e||o||a||n?n?t.Colors.runwayRed:c.colors.primary:i?c.colors.grey1:c.colors.hero,C=({isActive:e,isCompleted:o,isDisabled:i,isHalfCompleted:n,theme:a})=>e||o||n?a.colors.primary:i?a.colors.grey1:a.colors.hero,D=r.div`
-  width: 100%;
-  display: flex;
-  background: ${e=>e.isActive?e.theme.colors.grey5:null};
-  transition: background-color 0.2s ease-in;
-  box-shadow: ${e=>e.isActive?`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`:null};
-  border-radius: ${t.Space.sp2};
-  padding: ${t.Space.sp3};
-  cursor: ${e=>e.isDisabled?"no-drop":"pointer"};
-  box-sizing: border-box;
-  &:hover {
-    background: ${e=>{const o=e.isCompleted||e.isHalfCompleted;return e.isActive?e.theme.colors.grey3:o&&e.isDisabled===!1?e.theme.colors.grey5:"initial"}};
-    .step-content-title {
-      color: ${e=>j({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.isDisabled,isError:e.isError,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
-    }
-    .step-content-subtitle {
-      color: ${e=>C({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.isDisabled,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
-    }
-  }
-`,z=r.div`
-  margin-right: ${t.Space.sp2};
-  margin-top: 2px;
-`,T=r(t.SvgSuccessRound)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: ${t.Colors.success};
-`,P=r(t.SvgHighImportanceFilled)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  color: ${t.Colors.runwayRed};
-`,I=r.div`
-  height: ${t.Space.sp3};
-  width: ${t.Space.sp3};
-  border: 1px solid
-    ${e=>e.isActive?e.theme.colors.primary:e.disabledStep?e.theme.colors.grey2:e.theme.colors.hero};
-  border-radius: 50%;
-`,L=r.div`
-  display: flex;
-  flex-direction: column;
-`,H=r(t.SmallMedium)`
-  color: ${e=>j({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.disabledStep,isError:e.isError,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
-`,W=r(t.ExtraSmallRegular)`
-  color: ${e=>C({isActive:e.isActive,isCompleted:e.isCompleted,isDisabled:e.disabledStep,isHalfCompleted:e.isHalfCompleted,theme:e.theme})};
-`;function N({onboardingStep:e,isActive:o,isCompleted:i,isHalfCompleted:n,isDisabled:a,isError:c,stepText:p,stepSubText:u,onUpdateStep:m,setIsStepClicked:d,disabledSteps:l}){const x=a||l.includes(e)&&o===!1;return s.jsxRuntimeExports.jsxs(D,{isActive:o,isDisabled:x,isCompleted:i,isHalfCompleted:n,isError:c,onClick:a===!1?()=>{l.includes(e)&&o===!1||(d(!0),m(e))}:void 0,"data-testid":t.generateDataTestId("step-box",e),children:[s.jsxRuntimeExports.jsx(z,{children:c?s.jsxRuntimeExports.jsx(P,{}):n?s.jsxRuntimeExports.jsx(A,{}):i?s.jsxRuntimeExports.jsx(T,{}):s.jsxRuntimeExports.jsx(I,{isActive:o,disabledStep:x})}),s.jsxRuntimeExports.jsxs(L,{children:[s.jsxRuntimeExports.jsx(H,{className:"step-content-title",isActive:o,isCompleted:i,isHalfCompleted:n,disabledStep:x,isError:c,children:p}),s.jsxRuntimeExports.jsx(W,{className:"step-content-subtitle",isActive:o,isCompleted:i,isHalfCompleted:n,disabledStep:x,children:u})]})]})}const O=r.div`
-  display: flex;
-  flex: 1 1 auto;
-  margin-top: 84px;
-  flex-direction: column;
-  justify-content: start;
-  gap: ${t.Space.sp6};
-  width: 198px;
-`,B=r.div`
-  width: 100%;
-`;function _({allSteps:e,completedSteps:o,halfCompletedSteps:i,errorSteps:n,currentStep:a,isDisabled:c,onUpdateStep:p,setIsStepClicked:u,disabledSteps:m}){const d=t.appLocale.getLocalizedStrings().customerOnboardingPage.steps;return s.jsxRuntimeExports.jsx(O,{children:e.map(l=>s.jsxRuntimeExports.jsx(B,{children:s.jsxRuntimeExports.jsx(N,{isActive:l===a,isCompleted:o.includes(l),isHalfCompleted:i.includes(l),isError:n.includes(l),isDisabled:c,onboardingStep:l,stepText:d[l].stepText,stepSubText:d[l].stepSubText,onUpdateStep:p,setIsStepClicked:u,disabledSteps:m})},l))})}const q=r.div`
-  display: flex;
-  flex: 1 1 auto;
-  margin-top: 84px;
-  flex-direction: column;
-  justify-content: start;
-  gap: ${t.Space.sp6};
-  width: 198px;
-`,F=r.div`
-  height: 89px; // As per figma specs
-  border-radius: ${t.Space.sp2};
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-`,U=()=>{const e=s.useTheme();return s.jsxRuntimeExports.jsx(q,{children:[...Array(2)].map((o,i)=>s.jsxRuntimeExports.jsx(F,{children:s.jsxRuntimeExports.jsx(t.RectangularContentLoader,{width:198,height:89,backgroundColor:e.colors.grey3,style:{borderRadius:t.Space.sp2}})},i))})},g=240,Z=r.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  padding: ${t.Space.sp0} 20px;
-  width: ${g}px;
-  box-sizing: border-box;
-  position: fixed;
-  height: 100%;
-  z-index: 4;
-  background: ${e=>e.theme.colors.background};
-  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
-  ${e=>e.theme.breakpoints.down("md")} {
-    display: none;
-  }
-  border-right: ${e=>`1px solid ${e.theme.colors.grey3}`};
-`,J=r.div`
-  margin: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp3} ${t.Space.sp0};
-  width: fit-content;
-`,M=r(t.SvgZeniLogoFull)`
-  margin: 20px 12px ${t.Space.sp0} 12px;
-  height: ${t.Space.sp4};
-  width: 102px;
-  color: ${e=>e.theme.colors.primary};
-  cursor: pointer;
-  flex-shrink: 0;
-`,V=e=>{const{isOnAddressPage:o,allSteps:i,completedSteps:n,halfCompletedSteps:a,errorSteps:c,currentStep:p,signedInUser:u,currentTenant:m,fetchStatus:d,onUpdateStep:l,onZeniLogoClick:x,handleLogOutClick:$,handleCockpitClick:f,setIsStepClicked:y}=e,R=d.fetchState==="In-Progress"||d.fetchState==="Not-Started",v=[];return s.jsxRuntimeExports.jsxs(Z,{children:[s.jsxRuntimeExports.jsx(M,{"data-testid":t.generateDataTestId("zeni-logo-customer-onboarding-drawer"),onClick:x}),R?s.jsxRuntimeExports.jsx(U,{}):s.jsxRuntimeExports.jsx(_,{allSteps:i,isDisabled:o,disabledSteps:v,completedSteps:n,halfCompletedSteps:a,errorSteps:c,currentStep:p,onUpdateStep:l,setIsStepClicked:y}),s.jsxRuntimeExports.jsx(J,{children:s.jsxRuntimeExports.jsx(t.LogoutButton,{signedInUser:u,currentTenant:m,onLogOutClick:$,onCockpitClick:f})})]})},S={titleRectangleWidth:new t.ResponsiveSized(250,500,550,600),subTitleRectangleWidth:new t.ResponsiveSized(343,600,700,800)},G=r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
-  min-width: ${e=>e.isNoStepsPage?"100%":`calc(100% - ${g}px)`};
-  padding-left: ${e=>e.isNoStepsPage?t.Space.sp0:`${g}px`};
-  flex: 1;
-
-  ${e=>e.theme.breakpoints.down("md")} {
-    width: 100%;
-    padding-left: ${t.Space.sp0};
-  }
-`,K=r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  width: 100%;
-  min-height: 100vh;
-  background-image: ${e=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/signin-background-${e.windowSize==="small"?"m":"w"}-${e.theme.mode==="dark"?"d":"l"}.svg)`};
-  background-color: ${e=>e.theme.colors.grey4};
-  background-size: inherit;
-  background-attachment: fixed;
-  background-position: ${e=>e.windowSize==="small"?"center center":"right center"};
-  background-repeat: no-repeat;
-
-  ${e=>e.theme.breakpoints.down("lg")} {
-    background-size: cover;
-  }
-`,Q=r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${t.Space.sp3};
-  margin-top: 94px; // As per Figma Specs - Nav Bar Height + 32 px
-`,b=r.div`
-  border-radius: ${t.Space.sp2};
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-`,X=({isNoStepsPage:e=!1})=>{const o=s.useTheme(),i=t.useWindowSizeContext();return s.jsxRuntimeExports.jsx(G,{isNoStepsPage:e,children:s.jsxRuntimeExports.jsx(K,{windowSize:i,children:s.jsxRuntimeExports.jsxs(Q,{children:[s.jsxRuntimeExports.jsx(b,{children:s.jsxRuntimeExports.jsx(t.RectangularContentLoader,{width:S.titleRectangleWidth.value(i),height:t.sp[6],backgroundColor:o.colors.grey3,style:{borderRadius:t.Space.sp2}})}),s.jsxRuntimeExports.jsx(b,{children:s.jsxRuntimeExports.jsx(t.RectangularContentLoader,{width:S.subTitleRectangleWidth.value(i),height:27,backgroundColor:o.colors.grey3,style:{borderRadius:t.Space.sp2}})})]})})})};exports.CustomerOnboardingDetailPageSkeleton=X;exports.CustomerOnboardingDrawer=V;exports.DRAWER_WIDTH=g;