@zeniai/web-components 3.16.41 → 3.16.43

package/dist/MyProfileSettingsPage-CYI4yK6I.js

@@ -1,641 +0,0 @@
-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

@@ -1,30 +0,0 @@
-"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;