@mx-cartographer/experiences 6.26.18-alpha.mega1 → 6.26.18-alpha.mega3

package/dist/recurringtransactions/util/RecurringTransactions/index.es.js

@@ -0,0 +1,232 @@
+import { addDays as b } from "date-fns/addDays";
+import { addMonths as w } from "date-fns/addMonths";
+import { addQuarters as M } from "date-fns/addQuarters";
+import { addYears as N } from "date-fns/addYears";
+import { formatISO as Q } from "date-fns/formatISO";
+import { fromUnixTime as Y } from "date-fns/fromUnixTime";
+import { getUnixTime as h } from "date-fns/getUnixTime";
+import { isAfter as y } from "date-fns/isAfter";
+import { isBefore as i } from "date-fns/isBefore";
+import { isSameDay as A } from "date-fns/isSameDay";
+import { nextDay as k } from "date-fns/nextDay";
+import { parseISO as q } from "date-fns/parseISO";
+import { setDate as g } from "date-fns/setDate";
+import { startOfToday as v } from "date-fns/startOfToday";
+import { subDays as f } from "date-fns/subDays";
+import { subMonths as B } from "date-fns/subMonths";
+import { subQuarters as W } from "date-fns/subQuarters";
+import { subYears as S } from "date-fns/subYears";
+import { lastDayOfMonth as G } from "date-fns/lastDayOfMonth";
+import { setDayOfYear as I } from "date-fns/setDayOfYear";
+import { getNextYearlyDate as R, getNextBiQuarterlyDate as F, getNextQuarterlyDate as L, getNextBiMonthlyDate as U, getNextMonthlyDate as $, getNextBiWeeklyDate as K, getNextWeeklyDate as P } from "../../../common/utils/DateUtil/index.es.js";
+import { Frequency as s, RecurrenceStatus as D, RepeatingType as C, RecurrenceType as E } from "../../../common/types/RepeatingTransaction/index.es.js";
+import { formatOrdinal as O } from "../../../common/utils/NumberFormatting/index.es.js";
+import { formatDate as l, DATE_FORMATS_INTL as x } from "../../../common/constants/DateFormats/index.es.js";
+import { buildDynamicCopy as m } from "../../../common/utils/Localization/index.es.js";
+const H = (e) => {
+  if (!e) return "";
+  let c = e.user_name || e.feed_name || "";
+  return e.account_number && (c = `${c} *${e.account_number}`), c;
+}, j = (e, c) => {
+  const t = [], o = e.transactions.find(
+    (d) => d.repeating_transaction_guid === e.guid
+  );
+  if (!o) return [];
+  const n = q(e.predicted_occurs_on), r = {
+    accountGuid: e.account?.guid || "",
+    amount: e.amount,
+    categoryGuid: o.category_guid || "",
+    expectedDate: n,
+    frequency: e.recurrence_type,
+    institutionGuid: e.account?.institution_guid || "",
+    institutionName: H(e.account),
+    merchantGuid: e.merchant_guid,
+    name: e.description,
+    recurrenceDay: e.recurrence_day,
+    repeatingTransactionGuid: e.guid,
+    secondRecurrenceDay: e.second_recurrence_day,
+    status: D.Upcoming,
+    type: e.repeating_transaction_type === C.Income ? E.Income : E.Expense,
+    transaction: void 0
+  }, u = c.start, a = c.end;
+  switch (e.recurrence_type) {
+    case s.EveryWeek:
+      t.push(...z(r, u, a));
+      break;
+    case s.EveryOtherWeek:
+      t.push(...J(r, u, a));
+      break;
+    case s.TwiceAMonth:
+      t.push(...V(r, u));
+      break;
+    case s.EveryMonth:
+      t.push(...X(r, u));
+      break;
+    case s.EveryOtherMonth:
+      t.push(...Z(r, u, a));
+      break;
+    case s.EveryQuarter:
+      t.push(...T(r, u, a));
+      break;
+    case s.EveryOtherQuarter:
+      t.push(...ee(r, u, a));
+      break;
+    case s.EveryYear:
+      t.push(...te(r, u, a));
+      break;
+  }
+  for (const d of t) {
+    const p = e.transactions.find(
+      (_) => _.repeating_transaction_guid === e.guid && _.date > h(f(d.expectedDate, 5)) && _.date < h(b(d.expectedDate, 5))
+    );
+    p ? (d.transaction = p, d.status = D.Paid, d.occurredOnDate = Y(p.date)) : i(d.expectedDate, f(v(), 3)) && (d.status = D.Missed);
+  }
+  return t;
+}, z = (e, c, t) => {
+  const o = [];
+  let n = k(c, e.recurrenceDay);
+  for (; i(n, t); )
+    o.push({ ...e, expectedDate: n }), n = k(n, e.recurrenceDay);
+  return o;
+}, J = (e, c, t) => {
+  const o = [], n = e.expectedDate;
+  if (i(n, t)) {
+    let r = f(n, 14);
+    for (; y(r, c) || A(r, c); )
+      o.push({ ...e, expectedDate: r }), r = f(r, 14);
+    for (r = n; y(r, c) && i(r, t); )
+      o.push({ ...e, expectedDate: r }), r = b(r, 14);
+  }
+  return o;
+}, V = (e, c) => {
+  const t = [], o = g(c, e.recurrenceDay), n = e.secondRecurrenceDay && e.secondRecurrenceDay < 28 ? g(c, e.secondRecurrenceDay) : G(c);
+  return t.push({ ...e, expectedDate: o }), t.push({ ...e, expectedDate: n }), t;
+}, X = (e, c) => {
+  const t = [], o = g(c, e.recurrenceDay);
+  return t.push({ ...e, expectedDate: o }), t;
+}, Z = (e, c, t) => {
+  const o = [], n = e.expectedDate;
+  let r = i(n, t) ? n : B(n, 2);
+  for (; i(r, t); )
+    y(r, c) && o.push({ ...e, expectedDate: r }), r = w(r, 2);
+  return o;
+}, T = (e, c, t) => {
+  const o = [], n = e.expectedDate;
+  let r = i(n, t) ? n : W(n, 1);
+  for (; i(r, t); )
+    y(r, c) && o.push({ ...e, expectedDate: r }), r = M(r, 1);
+  return o;
+}, ee = (e, c, t) => {
+  const o = [], n = e.expectedDate;
+  let r = i(n, t) ? n : W(n, 2);
+  for (; i(r, t); )
+    y(r, c) && o.push({ ...e, expectedDate: r }), r = M(r, 2);
+  return o;
+}, te = (e, c, t) => {
+  const o = [], n = e.expectedDate;
+  let r = i(n, t) ? n : S(n, 1);
+  for (; i(r, t); )
+    y(r, c) && o.push({ ...e, expectedDate: r }), r = N(r, 1);
+  return o;
+}, We = (e, c) => {
+  const t = [];
+  for (const o of e) {
+    const n = j(o, c);
+    t.push(...n);
+  }
+  return t.sort(
+    (o, n) => h(o.occurredOnDate || o.expectedDate) - h(n.occurredOnDate || n.expectedDate)
+  );
+}, we = (e, c, t) => {
+  const o = [];
+  for (const n of c) {
+    const r = t.filter(
+      (u) => u.repeating_transaction_guid === n.guid
+    );
+    t.length > 0 && o.push({
+      ...n,
+      account: e.find((u) => u.guid === n.account_guid),
+      transactions: r
+    });
+  }
+  return o;
+}, Ne = (e) => e.reduce((c, t) => {
+  const o = Q(t.expectedDate, { representation: "date" }), n = c.find(
+    (r) => r.date.toString() === t.expectedDate.toString()
+  );
+  return n ? n.recurrences.push(t) : c.push({
+    date: t.expectedDate,
+    id: `date-${o}`,
+    recurrences: [t]
+  }), c;
+}, []), Qe = (e, c, t) => {
+  const o = k(v(), c.recurrence_day), n = I(v(), c.recurrence_day), r = O(c.recurrence_day), u = c.second_recurrence_day ? O(c.second_recurrence_day) : "";
+  let a = t ? m(e.monthly_ordinal, r) : e.monthly;
+  switch (c.recurrence_type) {
+    case s.EveryQuarter:
+      a = t ? m(e.quarterly_ordinal, r) : e.quarterly;
+      break;
+    case s.EveryWeek:
+      a = t ? m(
+        e.weekly_ordinal,
+        l(o, x.DAY_OF_WEEK)
+      ) : e.weekly;
+      break;
+    case s.EveryYear:
+      a = t ? m(
+        e.anually_ordinal,
+        l(n, x.MONTH_DAY)
+      ) : e.anually;
+      break;
+    case s.EveryOtherWeek:
+      a = t ? m(
+        e.every_other_week_ordinal,
+        l(o, x.DAY_OF_WEEK)
+      ) : e.every_other_week;
+      break;
+    case s.EveryOtherMonth:
+      a = t ? m(e.every_other_month_ordinal, r) : e.every_other_month;
+      break;
+    case s.EveryOtherQuarter:
+      a = t ? m(e.every_other_quarter_ordinal, r) : e.every_other_quarter;
+      break;
+    case s.TwiceAMonth:
+      a = t ? m(e.twice_a_month_ordinal, r, u) : e.twice_a_month;
+      break;
+  }
+  return a;
+}, Ye = (e, c) => {
+  let t = c;
+  switch (e) {
+    case s.EveryWeek:
+      t = P(c);
+      break;
+    case s.EveryOtherWeek:
+      t = K(c);
+      break;
+    case s.EveryMonth:
+      t = $(c);
+      break;
+    case s.EveryOtherMonth:
+      t = U(c);
+      break;
+    case s.EveryQuarter:
+      t = L(c);
+      break;
+    case s.EveryOtherQuarter:
+      t = F(c);
+      break;
+    case s.EveryYear:
+      t = R(c);
+      break;
+  }
+  return t;
+};
+export {
+  we as augmentRepeatingTransactions,
+  We as buildAllRecurrences,
+  H as buildInstitutionName,
+  Qe as getFrequencyLabel,
+  Ye as getNextPaymentDate,
+  Ne as groupRecurrencesByDate
+};

package/dist/settings/NotificationSettingsWidget/index.es.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import { observer as n } from "mobx-react-lite";
+import m from "@mui/material/Stack";
+import { NotificationSettings as o } from "../components/notifications/NotificationSettings/index.es.js";
+import { useAppConfig as f } from "../../common/context/hooks/index.es.js";
+import p from "../../common/components/WidgetContainer/index.es.js";
+const u = n((r) => {
+  const { clientConfig: e } = f(), t = e?.master?.deep_link_params?.view;
+  return t ? /* @__PURE__ */ i(o, { view: t }) : /* @__PURE__ */ i(p, { ...r, children: /* @__PURE__ */ i(m, { my: 24, children: /* @__PURE__ */ i(o, {}) }) });
+});
+export {
+  u as NotificationSettingsWidget
+};

package/dist/settings/SettingsWidget/index.es.js

@@ -0,0 +1,55 @@
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import g from "react";
+import { observer as y } from "mobx-react-lite";
+import C from "@mui/material/Stack";
+import E from "@mui/material/Tab";
+import R from "@mui/material/Tabs";
+import { SettingsWidgetContents as w } from "../components/SettingsWidgetContents/index.es.js";
+import { useGlobalCopyStore as D, useGlobalUiStore as P, useAppConfig as W } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as j } from "../../common/hooks/useScreenSize/index.es.js";
+import k from "../../common/components/Loader/index.es.js";
+import z from "../../common/components/WidgetContainer/index.es.js";
+var G = /* @__PURE__ */ ((e) => (e[e.Profile = 0] = "Profile", e[e.Devices = 1] = "Devices", e[e.Notifications = 2] = "Notifications", e[e.TransactionRules = 3] = "TransactionRules", e[e.Help = 4] = "Help", e))(G || {});
+const K = y(({ onBackClick: e, sx: a }) => {
+  const { settings: l } = D(), { isCopyLoaded: s, isInitialized: d } = P(), { config: c } = W(), { isMobile: p } = j(), {
+    display_user_profile_in_settings: m,
+    display_mobile_devices_in_settings: b,
+    display_notification_settings_in_settings: _,
+    display_user_transaction_rules_in_settings: f,
+    show_help_widget_in_master: u
+  } = c, n = [
+    { enabled: m, index: 0, label: l?.profile_label },
+    { enabled: b, index: 1, label: l?.mobile_devices_label },
+    { enabled: _, index: 2, label: l?.notifications_label },
+    { enabled: f, index: 3, label: l?.transaction_rules_label },
+    { enabled: u, index: 4, label: l?.help_label }
+  ], r = n.find((i) => i.enabled), [t, x] = g.useState(r ? r.index : -1);
+  return !s || !d ? /* @__PURE__ */ o(k, {}) : /* @__PURE__ */ o(
+    z,
+    {
+      onBackClick: e,
+      sx: { height: "calc(100dvh - 24px)", overflow: "auto", ...a },
+      title: l.title,
+      children: /* @__PURE__ */ h(C, { mx: p ? 0 : 48, my: 24, children: [
+        /* @__PURE__ */ o(
+          R,
+          {
+            onChange: (i, v) => x(v),
+            sx: { bgcolor: "background.paper" },
+            textColor: "primary",
+            value: t,
+            variant: "scrollable",
+            children: n.map(
+              (i) => i.enabled && /* @__PURE__ */ o(E, { label: i.label, value: i.index }, i.index)
+            )
+          }
+        ),
+        /* @__PURE__ */ o(w, { selectedTab: t })
+      ] })
+    }
+  );
+});
+export {
+  G as SettingsTabs,
+  K as SettingsWidget
+};

package/dist/settings/TransactionRulesWidget/index.es.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "@mui/material/Stack";
+import e from "../components/transactionrules/TransactionRulesTab/index.es.js";
+import { useScreenSize as m } from "../../common/hooks/useScreenSize/index.es.js";
+import n from "../../common/components/WidgetContainer/index.es.js";
+const l = (o) => {
+  const { isMobile: i } = m();
+  return /* @__PURE__ */ r(n, { ...o, children: /* @__PURE__ */ r(t, { sx: { mx: i ? 0 : 48, my: 24 }, children: /* @__PURE__ */ r(e, {}) }) });
+};
+export {
+  l as TransactionRulesWidget
+};

package/dist/settings/api/SettingsApi/index.es.js

@@ -0,0 +1,23 @@
+import { Fetch as i } from "../../../common/utils/Fetch/index.es.js";
+import { ApiEndpoints as n } from "../../../common/constants/ApiEndpoints/index.es.js";
+class r {
+  fetchInstance;
+  constructor(e, t) {
+    this.fetchInstance = new i(e, t);
+  }
+  deleteDevice = async (e) => this.fetchInstance.delete(`${n.DEVICES}/${e}`).then((t) => t);
+  generateDeviceToken = async () => this.fetchInstance.get(`${n.USER}/mobile_token`).then((e) => e.mobile_token);
+  getDevices = async () => this.fetchInstance.get(n.DEVICES).then((e) => e.map((t) => t.device));
+  getNotificationProfiles = async () => this.fetchInstance.get(n.NOTIFICATION_PROFILES).then((e) => e.notification_profiles);
+  // verifications endpoints respond with HTTP status codes; they error otherwise
+  sendEmailVerification = async () => this.fetchInstance.post(n.EMAIL_VERIFICATIONS);
+  sendPhoneVerification = async () => this.fetchInstance.post(n.PHONE_VERIFICATIONS + "/deliver");
+  verifyPhoneToken = async (e) => this.fetchInstance.post(n.PHONE_VERIFICATIONS + "/verify", { sms_verification_token: e }).then((t) => ({ verified: t.verified }));
+  updateDevice = async (e) => this.fetchInstance.put(`${n.DEVICES}/${e.guid}`, e).then((t) => t.device);
+  updateNotificationProfile = async (e) => this.fetchInstance.put(`${n.NOTIFICATION_PROFILES}/${e.guid}`, e).then((t) => t.notification_profile);
+  updateUserCommunicationProfile = async (e) => this.fetchInstance.put(n.USER_COMMUNICATION_PROFILE, e).then((t) => t.user_communication_profile);
+  getInsightsNotificationProfiles = async () => this.fetchInstance.get(`${n.NOTIFICATION_PROFILES}/${n.INSIGHTS_NOTIFICATION_PROFILES}`).then((e) => e);
+}
+export {
+  r as SettingsApi
+};

package/dist/settings/components/SettingsWidgetContents/index.es.js

@@ -0,0 +1,47 @@
+import { jsxs as s, Fragment as m, jsx as o } from "react/jsx-runtime";
+import { observer as a } from "mobx-react-lite";
+import p from "@mui/material/Alert";
+import f from "@mui/material/Snackbar";
+import l from "../profile/ProfileTab/index.es.js";
+import c from "../devices/DeviceTab/index.es.js";
+import g from "../transactionrules/TransactionRulesTab/index.es.js";
+import { NotificationSettings as h } from "../notifications/NotificationSettings/index.es.js";
+import { SettingsTabs as i } from "../../SettingsWidget/index.es.js";
+import { Help as u } from "../../../help/components/Help/index.es.js";
+import v from "@mui/material/Stack";
+import { useSettingsStore as S, useAppConfig as x } from "../../../common/context/hooks/index.es.js";
+const R = a(({ selectedTab: r }) => {
+  const { alert: t, setAlert: e } = S(), {
+    config: { display_user_profile_in_settings: n }
+  } = x();
+  return /* @__PURE__ */ s(m, { children: [
+    r === i.Profile && /* @__PURE__ */ o(l, {}),
+    r === i.Devices && /* @__PURE__ */ o(c, {}),
+    r === i.Notifications && /* @__PURE__ */ o(h, { showPersonalDetails: !n }),
+    r === i.TransactionRules && /* @__PURE__ */ o(g, {}),
+    r === i.Help && /* @__PURE__ */ o(v, { sx: { px: 24 }, children: /* @__PURE__ */ o(u, {}) }),
+    /* @__PURE__ */ o(
+      f,
+      {
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        autoHideDuration: 3500,
+        onClose: () => e(""),
+        open: !!t.message,
+        children: /* @__PURE__ */ o(
+          p,
+          {
+            onClose: () => {
+              e("");
+            },
+            severity: t.severity,
+            variant: "filled",
+            children: t.message
+          }
+        )
+      }
+    )
+  ] });
+});
+export {
+  R as SettingsWidgetContents
+};

package/dist/settings/components/devices/DeviceDialog/index.es.js

@@ -0,0 +1,129 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import p from "react";
+import { observer as M } from "mobx-react-lite";
+import A from "@mui/material/styles/useTheme";
+import b from "@mui/material/Stack";
+import C from "@mui/material/TextField";
+import { Text as l, P as E } from "@mxenabled/mxui";
+import { DialogType as e } from "../../../constants/Settings/index.es.js";
+import { useGlobalCopyStore as j, useSettingsStore as B } from "../../../../common/context/hooks/index.es.js";
+import P from "../../../../common/components/dialog/Dialog/index.es.js";
+import { buildDynamicCopy as m } from "../../../../common/utils/Localization/index.es.js";
+const T = ({
+  dialogType: t,
+  isOpen: h,
+  onClose: n,
+  device: r,
+  deviceToken: x = ""
+}) => {
+  const D = A(), { common: c, settings: o } = j(), { updateDevice: v, deleteDevice: g, setAlert: a, loadDevices: u } = B(), [d, _] = p.useState("");
+  p.useEffect(() => {
+    r && _(r.name);
+  }, [r, t]);
+  const y = () => {
+    switch (t) {
+      case e.Edit:
+        return o.mobile_devices_edit_label;
+      case e.Delete:
+        return o.mobile_devices_delete_label;
+      default:
+        return "";
+    }
+  }, S = () => {
+    switch (t) {
+      case e.Token:
+        return c.done_button;
+      case e.Edit:
+        return c.save_button;
+      case e.Delete:
+        return c.delete_button;
+      default:
+        return "";
+    }
+  }, k = () => {
+    const i = {
+      "& .MuiDialogContent-root": {
+        width: 400,
+        pt: 0
+      }
+    };
+    return t === e.Token ? {
+      ...i,
+      "& .MuiToolbar-root:last-child": {
+        padding: "32px 60px 48px",
+        justifyContent: "center"
+      },
+      "& .MuiButton-root:first-child": {
+        display: "none"
+      },
+      "& .MuiButton-root:last-child": {
+        flex: 1
+      }
+    } : {
+      ...i,
+      "& .MuiToolbar-root:last-child": {
+        gap: 8,
+        padding: 24,
+        justifyContent: "flex-end"
+      },
+      ...t === e.Delete && {
+        "& .MuiTypography-Body": {
+          padding: 0
+        }
+      }
+    };
+  }, w = async () => {
+    if (t === e.Token && n(), t === e.Edit && r) {
+      const i = { ...r, name: d };
+      (await v(i)).success ? (a(o.mobile_devices_edit_success, "success"), u()) : a(
+        m(o.mobile_devices_edit_error, r.name),
+        "error"
+      ), n();
+    }
+    t === e.Delete && r && ((await g(r.guid)).success ? (a(
+      m(o.mobile_devices_delete_success, r.name),
+      "success"
+    ), u()) : a(
+      m(o.mobile_devices_delete_error, r.name),
+      "error"
+    ), n());
+  };
+  return /* @__PURE__ */ f(
+    P,
+    {
+      copy: { title: y() },
+      isOpen: h,
+      onClose: n,
+      onPrimaryAction: w,
+      onSecondaryAction: n,
+      primaryColor: t === e.Delete ? "error" : void 0,
+      primaryText: S(),
+      secondaryText: t === e.Token ? c.back : c.cancel_button,
+      sx: k(),
+      children: [
+        t === e.Token && /* @__PURE__ */ f(b, { spacing: 16, sx: { px: 40, textAlign: "center", width: "100%" }, children: [
+          /* @__PURE__ */ s(l, { bold: !0, truncate: !1, variant: "Body", children: o.mobile_devices_access_label }),
+          /* @__PURE__ */ s(l, { truncate: !1, variant: "Small", children: o.mobile_devices_access_info_1 }),
+          /* @__PURE__ */ s(
+            l,
+            {
+              sx: {
+                border: `1px solid ${D.palette.border.light}`,
+                borderRadius: "4px",
+                p: "16px 32px"
+              },
+              variant: "H1",
+              children: x
+            }
+          ),
+          /* @__PURE__ */ s(l, { truncate: !1, variant: "Small", children: o.mobile_devices_access_info_2 })
+        ] }),
+        t === e.Edit && /* @__PURE__ */ s(b, { children: /* @__PURE__ */ s(C, { onChange: (i) => _(i.target.value), value: d }) }),
+        t === e.Delete && /* @__PURE__ */ s(E, { children: o.mobile_devices_delete_info })
+      ]
+    }
+  );
+}, O = M(T);
+export {
+  O as default
+};

package/dist/settings/components/devices/DeviceList/index.es.js

@@ -0,0 +1,118 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import f from "react";
+import { formatDistanceToNow as u } from "date-fns/formatDistanceToNow";
+import { fromUnixTime as g } from "date-fns/fromUnixTime";
+import _ from "@mui/material/styles/useTheme";
+import y from "@mui/material/Accordion";
+import C from "@mui/material/AccordionDetails";
+import k from "@mui/material/AccordionSummary";
+import S from "@mui/material/Box";
+import c from "@mui/material/IconButton";
+import i from "@mui/material/Stack";
+import { Icon as d, Text as l } from "@mxenabled/mxui";
+import { useGlobalCopyStore as w } from "../../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as B } from "../../../../common/utils/Localization/index.es.js";
+const q = ({
+  devices: n,
+  onClickDeviceEdit: m,
+  onClickDeviceDelete: p
+}) => {
+  const r = _(), { settings: a } = w(), [s, x] = f.useState(!1), b = (e) => (D, h) => {
+    x(h ? e : !1);
+  };
+  return /* @__PURE__ */ t(i, { mx: -28, sx: { "& .MuiAccordion-root": { mb: 0, mt: 0 } }, children: [
+    n.map((e) => /* @__PURE__ */ t(
+      y,
+      {
+        expanded: s === e.guid,
+        onChange: b(e.guid),
+        sx: { boxShadow: "none" },
+        children: [
+          /* @__PURE__ */ o(
+            k,
+            {
+              expandIcon: /* @__PURE__ */ o(d, { color: "secondary", name: "keyboard_arrow_down", size: 24 }),
+              sx: {
+                padding: "14px 24px",
+                borderBottom: "1px solid",
+                borderColor: r.palette.border.light
+              },
+              children: /* @__PURE__ */ t(i, { gap: 4, children: [
+                /* @__PURE__ */ o(l, { bold: !0, variant: "Body", children: e.name }),
+                /* @__PURE__ */ o(l, { color: r.palette.text.secondary, variant: "Small", children: `${e.make} ${e.model}` }),
+                /* @__PURE__ */ o(l, { color: r.palette.text.secondary, variant: "Small", children: u(g(e.created_at), { addSuffix: !0 }) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            C,
+            {
+              sx: { backgroundColor: r.palette.background.default, p: "0 0 0 24px" },
+              children: [
+                /* @__PURE__ */ t(
+                  i,
+                  {
+                    onClick: () => m(e),
+                    sx: {
+                      alignItems: "center",
+                      flexDirection: "row",
+                      width: "100%",
+                      gap: 12,
+                      py: 16,
+                      cursor: "pointer",
+                      borderBottom: "1px solid",
+                      borderColor: r.palette.border.light
+                    },
+                    children: [
+                      /* @__PURE__ */ o(c, { "aria-label": a.mobile_devices_edit_label, color: "secondary", children: /* @__PURE__ */ o(d, { name: "edit" }) }),
+                      /* @__PURE__ */ o(l, { variant: "Body", children: a.mobile_devices_edit_label })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  i,
+                  {
+                    onClick: () => p(e),
+                    sx: {
+                      alignItems: "center",
+                      flexDirection: "row",
+                      width: "100%",
+                      gap: 12,
+                      py: 16,
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ o(c, { "aria-label": a.mobile_devices_delete_label, color: "secondary", children: /* @__PURE__ */ o(d, { name: "delete" }) }),
+                      /* @__PURE__ */ o(l, { variant: "Body", children: a.mobile_devices_delete_label })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      e.guid
+    )),
+    /* @__PURE__ */ o(
+      S,
+      {
+        sx: {
+          backgroundColor: r.palette.background.default,
+          borderTop: "1px solid",
+          borderColor: r.palette.border.light,
+          p: "12px 16px"
+        },
+        children: /* @__PURE__ */ o(l, { color: r.palette.text.secondary, variant: "Small", children: B(
+          a.mobile_devices_count,
+          /* @__PURE__ */ o("b", { children: n.length }),
+          /* @__PURE__ */ o("b", { children: n.length })
+        ) })
+      }
+    )
+  ] });
+};
+export {
+  q as DeviceList,
+  q as default
+};