@zeniai/web-components 3.16.40 → 3.16.41

package/dist/MyProfileSettingsPage-CYI4yK6I.js

@@ -0,0 +1,641 @@
+import { i as ee, j as t, u as xe, g as be, k as Se, h as ve, F as Pe } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { useMemo as k, useState as te, useEffect as we } from "react";
+import p from "@emotion/styled";
+import { hasInvestorBankerLevelAccess as re, dateNow as $e, getFormattedAddress as oe, zeniDate as Re } from "@zeniai/client-epic-state";
+import { u as ne, R as w, hY as ie, fc as de, a as ce, aQ as Le, S as o, hZ as H, aH as je, fm as ye, h_ as ue, h$ as pe, i0 as he, J as Ce, D, E as me, dz as Fe, i1 as De, aG as Ne, i2 as ze, aE as Oe, ap as We, t as Be, av as Ie } from "./index-BtH6xclG.js";
+import { L as Me } from "./LabeledAddressValueField-kgieouBM.js";
+import { L as Te } from "./LabeledNameField-kiEgpChZ.js";
+import { L as Ae } from "./LabeledSingleSelectWithoutClearableField-CXO2YxPm.js";
+import { L as Ee } from "./LabeledUserSingleSelectWithSubtitlesField-CBbnTiwl.js";
+import { L as Ue, a as ke } from "./LabeledZeniRolesDropDownField-Da9mc-0B.js";
+const x = (e, r) => `${e}.${r}`, I = {
+  largeLabelWidth: new w(120, 120, 160),
+  textFieldPaddingHorizontal: new w(D[2], D[3]),
+  toolTipWidth: new w(215, 237),
+  notePadding: new w(D[3], D[4]),
+  noteGap: new w(D[0], 6)
+}, {
+  peoplePage: l,
+  common: {
+    settings: le,
+    labels: G,
+    placeholder: B,
+    errorMessage: _e
+  },
+  dateFormat: qe
+} = ce.getLocalizedStrings(), He = ({
+  myProfileView: e,
+  isZeniFinopsRolesUser: r,
+  sectionId: a,
+  isDisabled: u,
+  isReimbursementDisabled: b,
+  isZeniAccountsDisabled: h,
+  isChargeCardDisabled: s,
+  isBankingOnlyTenant: g,
+  isCardsOnlyTenant: $,
+  isLiteRoleDisabled: N,
+  isTreasuryDisabled: m,
+  onAddressClick: S
+}) => {
+  const d = ne(), {
+    person: n,
+    managersList: M,
+    classList: T,
+    manager: Q,
+    department: f,
+    controllersList: A,
+    myProfileLocalData: E,
+    addressData: Z
+  } = e, J = e.person.user?.birthday != null ? "readonly" : void 0, R = I.largeLabelWidth.value(d), z = I.largeLabelWidth.value(d), Y = k(
+    () => ie(
+      b,
+      h,
+      s,
+      g,
+      $,
+      N,
+      m
+    ),
+    [
+      b,
+      h,
+      s,
+      g,
+      $,
+      N,
+      m
+    ]
+  ), { firstController: v, restControllerEmailsStr: L } = k(() => {
+    const i = ee(A), j = i.splice(0, 1), y = i.reduce(
+      (O, W) => O.concat(`${W.email},`),
+      ""
+    );
+    return { firstController: j, restControllerEmailsStr: y };
+  }, [A]), K = k(() => ee(de.roles), []), c = re(
+    n.userRole != null ? n.userRole.userRoles : []
+  ), _ = k(() => T.map((i) => ({
+    label: i.fullyQualifiedAccountingClassName,
+    value: i.classId,
+    hoverText: i.accountingClassNumber
+  })), [T]);
+  return /* @__PURE__ */ t.jsxs(Qe, { windowSize: d, children: [
+    /* @__PURE__ */ t.jsx(
+      Te,
+      {
+        isDisabled: u,
+        label: { label: G.name, width: z },
+        nameField: {
+          name: x(a, "name"),
+          placeHolder: {
+            firstName: B.firstNamePlaceholder,
+            lastName: B.lastNamePlaceholder,
+            name: B.namePlaceholder
+          },
+          showFullNameError: !0
+        },
+        errorInfoLabel: _e.nameError.replace(
+          "_product_type_",
+          le.common.productTypeString
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(F, {}),
+    /* @__PURE__ */ t.jsx(
+      Le,
+      {
+        isDisabled: u,
+        showAdditionalInfoLabel: !1,
+        label: {
+          label: l.invitePage.email,
+          width: R
+        },
+        text: {
+          type: "text",
+          name: x(a, "email"),
+          placeholder: H(
+            l.addPlaceholderPrefix,
+            l.invitePage.email
+          ),
+          style: {
+            padding: `${o.sp0} ${I.textFieldPaddingHorizontal.valuePx(d)}`
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(F, {}),
+    /* @__PURE__ */ t.jsx(
+      je,
+      {
+        label: {
+          label: G.dateOfBirth,
+          width: z
+        },
+        style: {
+          width: "auto"
+        },
+        isDisabled: J,
+        dateField: {
+          name: x(a, "dateOfBirth"),
+          placeholder: B.datePlaceholder,
+          defaultValue: E.dateOfBirth,
+          dateFormat: qe.visual.defaultInput,
+          autoComplete: "off",
+          maxDate: $e().subtract(18, "year")
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(F, {}),
+    /* @__PURE__ */ t.jsx(
+      Me,
+      {
+        label: {
+          label: G.mailingAddress,
+          width: z
+        },
+        addressValueField: {
+          name: x(a, "mailingAddress"),
+          placeholder: B.addressPlaceholder,
+          defaultValue: Z?.addressToCreate,
+          onClick: () => {
+            S("user_address");
+          }
+        },
+        showAdditionalInfoLabel: !0,
+        style: {
+          width: "auto",
+          padding: `${o.sp2} ${o.sp2} ${o.sp2} ${o.sp0}`
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(F, {}),
+    /* @__PURE__ */ t.jsx(
+      ye,
+      {
+        label: {
+          label: G.phone,
+          width: z
+        },
+        text: {
+          name: x(a, "phone"),
+          placeholder: B.phonePlaceholder,
+          defaultValue: E.phone,
+          autoComplete: "off"
+        },
+        showVerified: E.isPhoneVerified,
+        style: { width: "auto" }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(F, {}),
+    r ? /* @__PURE__ */ t.jsx(
+      ke,
+      {
+        label: { label: l.invitePage.role, width: R },
+        zeniRolesDropDownField: {
+          name: x(a, "role"),
+          defaultValue: {
+            selectedOptions: n.userRole != null ? n.userRole.userRoles : [],
+            allOptions: K
+          },
+          registerOptions: { required: !0 },
+          placeholderLabel: H(
+            l.selectPlaceholderPrefix,
+            l.invitePage.role
+          ),
+          isMulti: !0,
+          forZeniUser: !0
+        },
+        isDisabled: "readonly"
+      }
+    ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(
+        Ue,
+        {
+          label: { label: l.invitePage.role, width: R },
+          rolesDropDownField: {
+            name: x(a, "nonZeniRole"),
+            defaultValue: {
+              userRole: {
+                selectedRole: he(
+                  n.userRole?.userRoles ?? []
+                ),
+                allRootRole: pe(
+                  g,
+                  $
+                )
+              },
+              productsByUserRole: ue(
+                n.userRole?.userRoles ?? [],
+                Y
+              )
+            },
+            registerOptions: { required: !0 }
+          },
+          isDisabled: u
+        }
+      ),
+      /* @__PURE__ */ t.jsx(F, {}),
+      /* @__PURE__ */ t.jsx(
+        Ee,
+        {
+          label: {
+            label: l.invitePage.manager,
+            width: R
+          },
+          showTooltip: !0,
+          toolTipWidth: I.toolTipWidth.valuePx(d),
+          tooltipTitle: /* @__PURE__ */ t.jsx(Ge, {}),
+          userSingleSelectWithSubTitlesField: {
+            name: x(a, "manager"),
+            value: {
+              allUsers: c ? [] : M,
+              selectedUser: c ? void 0 : Q?.userId
+            },
+            valueToSubtitle: (i) => {
+              const j = M.findIndex(
+                (y) => y.userId === i
+              );
+              if (j !== -1) {
+                const y = M[j], O = T.find(
+                  (X) => X.classId === y.userRole.accountingClassIDs[0]
+                ), W = [];
+                return O != null && W.push(O.className), W;
+              } else
+                return [];
+            },
+            placeholderLabel: c ? l.notApplicable : H(
+              l.selectPlaceholderPrefix,
+              l.invitePage.manager
+            ),
+            registerOptions: {
+              required: !c
+            },
+            showOneOffLabel: {
+              label: le.label.noManager,
+              value: "no_manager",
+              position: "top",
+              subtitles: []
+            }
+          },
+          isDisabled: "readonly",
+          opacity: c ? 0.32 : 1
+        }
+      ),
+      /* @__PURE__ */ t.jsx(F, {}),
+      /* @__PURE__ */ t.jsx(
+        Ae,
+        {
+          label: {
+            label: l.invitePage.department,
+            width: R
+          },
+          singleSelectWithoutClearableField: {
+            name: x(a, "department"),
+            defaultValue: {
+              allOptions: c ? [] : _,
+              selectedOption: c ? void 0 : _.find(
+                (i) => i.value === f?.classId
+              )
+            },
+            placeholder: c ? l.notApplicable : H(
+              l.selectPlaceholderPrefix,
+              l.invitePage.department
+            ),
+            registerOptions: {
+              required: !c
+            },
+            isDisabled: u,
+            showOptionOnHover: !0
+          },
+          isDisabled: u,
+          opacity: c ? 0.32 : 1
+        }
+      ),
+      r ? null : /* @__PURE__ */ t.jsxs(Ze, { windowSize: d, children: [
+        l.invitePage.controllerText,
+        v[0] ? /* @__PURE__ */ t.jsxs(
+          Je,
+          {
+            href: `mailto:${v[0].email}?cc=${L}&subject=${encodeURIComponent(
+              l.invitePage.emailSubject
+            )}`,
+            children: [
+              /* @__PURE__ */ t.jsx(Ye, { children: `${v[0].firstName} ${v[0].lastName}` }),
+              /* @__PURE__ */ t.jsx(Ce, { className: "arrowIcon" })
+            ]
+          }
+        ) : null
+      ] })
+    ] })
+  ] });
+}, Ge = () => l.invitePage.managerTooltipText, Qe = p.div`
+  display: flex;
+  flex-direction: column;
+  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};
+  margin-bottom: ${o.sp3};
+  .single-select-field__menu {
+    border: ${(e) => e.windowSize === "small" ? `1px solid ${e.theme.colors.grey3}` : "unset"};
+  }
+`, F = p.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Ze = p(me)`
+  padding: ${(e) => `${o.sp1}  ${I.notePadding.valuePx(e.windowSize)}`};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${o.sp0} ${o.sp0} ${o.sp2} ${o.sp2};
+  text-align: left;
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${(e) => I.noteGap.valuePx(e.windowSize)};
+`, Je = p.a`
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  .arrowIcon {
+    cursor: pointer;
+    height: 12px;
+    width: 12px;
+  }
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+    .arrowIcon {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Ye = p.span``, ge = {
+  myProfileDetailsRowGap: new w(12, D[5], D[5]),
+  sectionWidth: new w(343, 580, 726),
+  subtitleSectionWidth: new w(343, 580, 1200)
+}, Ke = {
+  title: new Ie("standardMedium", "largeMedium")
+}, P = "userDetails", gt = ({
+  myProfileView: e,
+  isReimbursementDisabled: r,
+  isZeniAccountsDisabled: a,
+  isChargeCardDisabled: u,
+  isTreasuryDisabled: b,
+  isBankingOnlyTenant: h,
+  isCardsOnlyTenant: s,
+  isLiteRoleDisabled: g,
+  onClickMenuIcon: $,
+  onAddressClick: N,
+  updateMyProfileLocalData: m,
+  onCancelClick: S,
+  onGetOtp: d,
+  onResendOtp: n,
+  onSaveClick: M,
+  onVerifyOtp: T,
+  onVerifyOtpSuccess: Q
+}) => {
+  const f = ne(), A = k(
+    () => ie(
+      r,
+      a,
+      u,
+      h,
+      s,
+      g,
+      b
+    ),
+    [
+      r,
+      a,
+      u,
+      h,
+      s,
+      g,
+      b
+    ]
+  ), [E, Z] = te(!1), [J, R] = te(!1), z = xe(), Y = Fe(), v = De(Y), L = be({
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    defaultValues: ae(
+      e,
+      v,
+      A,
+      h,
+      s
+    ),
+    values: ae(
+      e,
+      v,
+      A,
+      h,
+      s
+    )
+  }), K = e.myProfileLocalData.dateOfBirth != null && e.person.user?.birthday != null && !e.myProfileLocalData.dateOfBirth.isSame(
+    e.person.user?.birthday
+  ) || e.myProfileLocalData.dateOfBirth != null && e.person.user?.birthday == null, c = e.myProfileLocalData.phone !== e.person.user?.phone, _ = e.addressData?.addressToCreate != null && e.person.address != null && !Se(
+    oe(e.addressData?.addressToCreate),
+    oe(e.person.address)
+  ) || e.addressData?.addressToCreate != null && e.person.address == null, i = K || c || _, j = Object.keys(L.formState.errors).length === 0, y = Ne(L.formState.dirtyFields), O = j && (y || i), W = async (V, q) => {
+    if (V != null) {
+      const C = { ...q }, fe = {
+        ...e.myProfileLocalData,
+        phone: C[P].phone,
+        isPhoneVerified: C[P].phone !== e.person.user?.phone ? !1 : e.person.user?.isPhoneVerified ?? !1,
+        dateOfBirth: C[P].dateOfBirth != null ? Re(
+          C[P].dateOfBirth.toString()
+        ) : void 0
+      };
+      m(fe);
+    }
+  };
+  we(() => {
+    const V = L.watch((q, { name: C }) => {
+      C != null && q != null && ve(() => W(C, q));
+    });
+    return () => {
+      V.unsubscribe();
+    };
+  });
+  const X = L.handleSubmit(() => {
+    j && (e.myProfileLocalData.phone != null && (e.myProfileLocalData.isPhoneVerified == null || e.myProfileLocalData.isPhoneVerified === !1) ? d(e.myProfileLocalData.phone) : M());
+  }), { common: U } = ce.getLocalizedStrings();
+  return /* @__PURE__ */ t.jsxs(Xe, { children: [
+    /* @__PURE__ */ t.jsx(
+      ze,
+      {
+        showOtpPopup: E,
+        phoneNumberPopupDescription: "show something",
+        showPhoneNumberPopup: J,
+        twoFactorAuthenticationView: e.twoFAView,
+        loggedInUserPhone: e.myProfileLocalData.phone,
+        onVerifyOtp: T,
+        onVerifyOtpSuccess: Q,
+        setShowOtpPopup: Z,
+        onResendOtp: n,
+        setShowPhoneNumberPopup: R,
+        onGetOtp: d
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Oe,
+      {
+        source: "MyProfileSettingsPage",
+        title: U.settings.title.myProfile,
+        backgroundColor: z.colors.grey4,
+        showBackButton: !1,
+        showMenuIcon: f === "medium-compact" || f === "small",
+        onClickMenuIcon: $
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(Ve, { windowSize: f, children: [
+      /* @__PURE__ */ t.jsx(et, { windowSize: f, children: /* @__PURE__ */ t.jsx(tt, { windowSize: f, children: U.settings.infoText.myProfile }) }),
+      /* @__PURE__ */ t.jsx(Pe, { ...L, children: /* @__PURE__ */ t.jsxs("form", { id: se(P), onSubmit: X, children: [
+        /* @__PURE__ */ t.jsx(ot, { windowSize: f, children: /* @__PURE__ */ t.jsx(lt, { windowSize: f, children: U.settings.subtitle.myProfile }) }),
+        /* @__PURE__ */ t.jsx(
+          He,
+          {
+            myProfileView: e,
+            isZeniFinopsRolesUser: v,
+            isDisabled: "readonly",
+            isReimbursementDisabled: r,
+            sectionId: P,
+            isZeniAccountsDisabled: a,
+            isChargeCardDisabled: u,
+            isTreasuryDisabled: b,
+            isBankingOnlyTenant: h,
+            isCardsOnlyTenant: s,
+            isLiteRoleDisabled: g,
+            onAddressClick: N
+          }
+        )
+      ] }) })
+    ] }),
+    O ? /* @__PURE__ */ t.jsx(
+      We,
+      {
+        style: { zIndex: 1, paddingTop: o.sp3, paddingBottom: o.sp3 },
+        formId: se(P),
+        helperStyle: { paddingTop: o.sp0, paddingBottom: o.sp0 },
+        primaryBtn: {
+          label: U.footer.save,
+          isLoading: e.updateProfileStatus.fetchState === "In-Progress",
+          style: { minWidth: 103 }
+        },
+        cancelBtn: {
+          label: U.cancel,
+          onClick: S,
+          shouldResetOnCancel: !0,
+          style: { minWidth: 103 }
+        }
+      }
+    ) : null
+  ] });
+}, se = (e) => `${e}_form`, Xe = p.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  row-gap: ${o.sp3};
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Ve = p.div`
+  display: flex;
+  width: 100%;
+  margin: auto;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, et = p(me)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${(e) => ge.subtitleSectionWidth.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp5};
+`, tt = p.div`
+  display: flex;
+  align-items: center;
+
+  color: ${(e) => e.theme.colors.hero};
+  ${Be.standardMedium.css};
+`, ot = p.div`
+  display: flex;
+  align-items: center;
+  width: ${(e) => ge.sectionWidth.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp3};
+`, lt = p.div`
+  display: flex;
+  align-items: center;
+
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${Ke.title.style(e.windowSize)}`};
+`, ae = (e, r, a, u, b) => {
+  const {
+    classList: h,
+    person: s,
+    managersList: g,
+    manager: $,
+    department: N,
+    myProfileLocalData: m
+  } = e, S = re(
+    s.userRole != null ? s.userRole.userRoles : []
+  ), d = h.map((n) => ({
+    label: n.fullyQualifiedAccountingClassName,
+    value: n.classId,
+    hoverText: n.accountingClassNumber
+  }));
+  return {
+    [P]: {
+      name: {
+        firstName: s.user?.firstName ?? "",
+        lastName: s.user?.lastName ?? ""
+      },
+      email: s.user?.email ?? "",
+      role: r ? {
+        allOptions: de.roles,
+        selectedOptions: s.userRole?.userRoles ?? []
+      } : void 0,
+      nonZeniRole: r ? void 0 : {
+        userRole: {
+          selectedRole: he(
+            s.userRole?.userRoles ?? []
+          ),
+          allRootRole: pe(
+            u,
+            b
+          )
+        },
+        productsByUserRole: ue(
+          s.userRole?.userRoles ?? [],
+          a
+        )
+      },
+      manager: {
+        allUsers: S ? [] : g,
+        selectedUser: st(S, $)
+      },
+      department: {
+        allOptions: S ? [] : d,
+        selectedOption: S ? void 0 : d.find(
+          (n) => n.value === N?.classId
+        )
+      },
+      dateOfBirth: m.dateOfBirth?.toDate(),
+      phone: m.phone,
+      syncToken: m?.syncToken,
+      isPhoneVerified: m?.isPhoneVerified,
+      otpChallenge: m?.otpChallenge,
+      mailingAddress: e.addressData?.addressToCreate
+    }
+  };
+}, st = (e, r) => {
+  if (!e)
+    return r != null ? r.userId : "no_manager";
+};
+export {
+  gt as default,
+  se as uniqueFormName
+};

package/dist/NavBarWithPicker-BRD9csLV.cjs

@@ -0,0 +1,30 @@
+"use strict";const o=require("./vendor-.pnpm-DHyNpoQL.cjs"),n=require("@emotion/styled"),t=require("./index-DiGCN0Sk.cjs"),d=n.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  max-width: calc(100% - 36px);
+  margin-left: ${t.Space.sp3};
+`,h=({backgroundColor:e,pickerValues:s,valueToLabel:c,selectedValue:i,onPickerSelectionChanged:a,isPickerDisabled:l,titleTextStyle:x,styles:p})=>{const r=o.useTheme();return o.jsxRuntimeExports.jsx(d,{style:p,children:o.jsxRuntimeExports.jsx(t.Picker$1,{pickerValues:s,valueToLabel:c,selectedValue:i,onPickerSelectionChanged:a,backgroundColor:e,titleTextStyle:x??t.textStyles.largeRegular,titleColor:r.colors.primary,selectedOptionColor:r.colors.primary,isDisabled:l})})},{common:{navBar:{back:m}}}=t.appLocale.getLocalizedStrings(),u={navBarHeight:t.navBarHeight},g=n.div`
+  display: flex;
+  align-items: center;
+  min-height: ${e=>u.navBarHeight.valuePx(e.windowSize)};
+  background-color: ${e=>e.bgColor};
+`,j=n.div``,v=n(t.SvgArrowLeft)`
+  cursor: pointer;
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,y=n(t.SvgMenu)`
+  cursor: pointer;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`;function S({picker:e,backgroundColor:s,showMenuIcon:c,rightSideComponent:i,onBackClick:a,onClickMenuIcon:l}){const x=o.useTheme(),p=t.useWindowSizeContext(),r=s??x.colors.grey5;return o.jsxRuntimeExports.jsxs(g,{bgColor:r,windowSize:p,children:[c?o.jsxRuntimeExports.jsx(y,{onClick:l,"data-testid":t.generateDataTestId("nav-bar-menu-button")}):o.jsxRuntimeExports.jsx(t.Tooltip,{style:{marginTop:t.Space.sp1,height:t.Space.sp4},title:m,enterDelay:600,placement:"bottom",children:o.jsxRuntimeExports.jsx(v,{"data-testid":t.generateDataTestId("nav-bar-back-button"),onClick:a})}),o.jsxRuntimeExports.jsx(h,{...e,backgroundColor:r}),i!=null?o.jsxRuntimeExports.jsx(j,{children:i}):null]})}exports.NavBarWithPicker=S;