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

package/dist/help/components/HelpContent/index.es.js

@@ -0,0 +1,32 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import u from "react";
+import { Header as a } from "../content/Header/index.es.js";
+import { contentSection as C } from "../content/section/index/index.es.js";
+import y from "../../../common/components/ErrorBoundary/index.es.js";
+import { useGlobalCopyStore as d } from "../../../common/context/hooks/index.es.js";
+const g = ({
+  copy: r,
+  hasRequestButton: e = !1,
+  onNavigateToList: n,
+  onRequestSupport: p,
+  topicInfo: { category: m, pageTitle: i, topicKey: l, guid: c }
+}) => {
+  const { help: s } = d(), t = C[c] || null;
+  return /* @__PURE__ */ f(u.Fragment, { children: [
+    /* @__PURE__ */ o(
+      a,
+      {
+        buttonCopy: r.request_support,
+        hasRequestButton: e,
+        onNavigateToList: n,
+        onRequestSupport: p,
+        title: m,
+        topicTitle: i
+      }
+    ),
+    /* @__PURE__ */ o(y, { children: t && /* @__PURE__ */ o(t, { copy: s, topicKey: l }) })
+  ] });
+};
+export {
+  g as HelpContent
+};

package/dist/help/components/HelpList/index.es.js

@@ -0,0 +1,118 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import L, { useState as S } from "react";
+import j from "@mui/icons-material/ExpandMore";
+import C from "@mui/material/Accordion";
+import M from "@mui/material/AccordionDetails";
+import w from "@mui/material/AccordionSummary";
+import E from "@mui/material/Button";
+import G from "@mui/material/Divider";
+import d from "@mui/material/Grid";
+import H from "@mui/material/List";
+import P from "@mui/material/ListItemButton";
+import m from "@mui/material/Stack";
+import { H3 as z, P as F, Icon as T, Text as h } from "@mxenabled/mxui";
+const K = ({
+  buttonText: a,
+  hasRequestButton: f = !1,
+  helpCategories: i = [],
+  helpContent: u,
+  helpTitle: g,
+  onRequestHelp: b,
+  onTopicSelect: y
+}) => {
+  const [B, R] = S(null), c = Math.ceil(i.length / 2);
+  return /* @__PURE__ */ e(L.Fragment, { children: [
+    /* @__PURE__ */ e(d, { container: !0, sx: { alignItems: "center", mb: 24 }, children: [
+      /* @__PURE__ */ e(d, { item: !0, md: 12, sm: 12, xs: 12, children: [
+        /* @__PURE__ */ r(z, { children: g }),
+        /* @__PURE__ */ r(F, { variant: "Body", children: u })
+      ] }),
+      f && /* @__PURE__ */ r(
+        d,
+        {
+          item: !0,
+          md: 6,
+          sm: 12,
+          sx: {
+            display: "flex",
+            justifyContent: { md: "flex-end", sm: "flex-start", xs: "flex-start" },
+            mt: { xs: 12, sm: 12, md: 0 }
+          },
+          xs: 12,
+          children: /* @__PURE__ */ r(E, { "aria-label": a, onClick: b, variant: "contained", children: a })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(m, { sx: { flexDirection: { xs: "column", md: "row" }, gap: 12 }, children: [0, 1].map((n) => {
+      const l = n === 0 ? 0 : c, v = n === 0 ? c : i.length, k = i.slice(l, v);
+      return /* @__PURE__ */ r(m, { sx: { flex: 1, gap: 12, maxWidth: { md: "calc(50% - 6px)" } }, children: k.map(({ guid: s, icon: I, topics: A, title: p }, D) => {
+        const x = D + l;
+        return /* @__PURE__ */ e(
+          C,
+          {
+            disableGutters: !0,
+            expanded: x === B,
+            onChange: (t, o) => R(o ? x : null),
+            sx: (t) => ({
+              border: `1px solid ${t.palette.border?.light}`,
+              borderRadius: "8px !important",
+              "&:before": {
+                opacity: 0
+              },
+              "& .MuiAccordion-region": {
+                bgcolor: "background.default",
+                borderBottomLeftRadius: 8,
+                borderBottomRightRadius: 8
+              }
+            }),
+            children: [
+              /* @__PURE__ */ r(
+                w,
+                {
+                  expandIcon: /* @__PURE__ */ r(j, { sx: { color: "text.primary" } }),
+                  sx: { height: 64, p: "14px 24px" },
+                  children: /* @__PURE__ */ e(m, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+                    /* @__PURE__ */ r(T, { name: I, size: 24 }),
+                    /* @__PURE__ */ r(h, { variant: "Body", children: p })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ r(G, {}),
+              /* @__PURE__ */ r(
+                M,
+                {
+                  sx: {
+                    ml: 56,
+                    p: 0
+                  },
+                  children: /* @__PURE__ */ r(H, { disablePadding: !0, children: A.map(({ label: t, topicKey: o }) => /* @__PURE__ */ r(
+                    P,
+                    {
+                      "aria-label": t,
+                      divider: !0,
+                      onClick: () => y({ guid: s, category: p, pageTitle: t, topicKey: o }),
+                      sx: {
+                        pl: "6px !important",
+                        borderColor: "border.light",
+                        "&:last-child": {
+                          border: "none !important",
+                          borderBottomRightRadius: 7
+                        }
+                      },
+                      children: /* @__PURE__ */ r(h, { color: "secondary", variant: "Small", children: t })
+                    },
+                    o
+                  )) })
+                }
+              )
+            ]
+          },
+          s
+        );
+      }) }, n);
+    }) })
+  ] });
+};
+export {
+  K as HelpList
+};

package/dist/help/components/content/BottomImageContent/index.es.js

@@ -0,0 +1,50 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import l from "react";
+import p from "@mui/material/Box";
+import a from "@mui/material/Divider";
+import e from "@mui/material/Grid";
+import { useTheme as h } from "@mui/material/styles";
+const j = ({
+  altImage: i,
+  content: o,
+  hasDivider: n = !0,
+  image: s,
+  imageLargeBreakPoint: d = 12,
+  sx: c
+}) => {
+  const r = h();
+  return /* @__PURE__ */ m(l.Fragment, { children: [
+    /* @__PURE__ */ t(p, { sx: { pb: 48, ...c }, children: /* @__PURE__ */ m(e, { container: !0, rowSpacing: 24, children: [
+      /* @__PURE__ */ t(e, { item: !0, lg: 12, md: 12, sm: 12, xs: 12, children: o }),
+      /* @__PURE__ */ t(
+        e,
+        {
+          item: !0,
+          lg: d,
+          md: 12,
+          sm: 12,
+          sx: {
+            m: "0 auto",
+            [r.breakpoints.between("sm", "lg")]: {
+              display: "flex",
+              justifyContent: "center"
+            },
+            "& img": {
+              width: "100%",
+              maxWidth: 1176,
+              [r.breakpoints.between("sm", "lg")]: {
+                width: "75%"
+              }
+            }
+          },
+          xs: 12,
+          children: /* @__PURE__ */ t("img", { alt: i, src: s })
+        }
+      )
+    ] }) }),
+    n && /* @__PURE__ */ t(a, {})
+  ] });
+};
+export {
+  j as BottomImageContent
+};

package/dist/help/components/content/ContentItem/index.es.js

@@ -0,0 +1,21 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+import { P as f, H3 as y } from "@mxenabled/mxui";
+const l = ({ content: t, sx: n }) => /* @__PURE__ */ e(f, { sx: { lineHeight: "24px", py: 6, ...n }, children: t }), j = ({ content: t, sx: n }) => /* @__PURE__ */ e(y, { color: "text.primary", sx: { py: 12, whiteSpace: { sm: "nowrap", xs: "wrap" }, ...n }, children: t }), E = ({
+  items: t,
+  listType: n = "ul",
+  subItemPlacement: i,
+  subItems: c = [],
+  subListType: r = "ol"
+}) => {
+  const p = n, m = r;
+  return /* @__PURE__ */ e(d, { sx: { [n]: { m: 0, p: 0, pl: 16, "& li::marker": { fontSize: 15 } } }, children: /* @__PURE__ */ e(p, { children: t.map((s, o) => /* @__PURE__ */ a("li", { children: [
+    /* @__PURE__ */ e(l, { content: s, sx: { py: 1 } }),
+    i === o ? /* @__PURE__ */ e(m, { ...r === "ol" && { type: "a" }, children: c.map((x, h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(l, { content: x, sx: { py: 1 } }) }, h)) }) : null
+  ] }, o)) }) });
+};
+export {
+  E as List,
+  j as SectionTitle,
+  l as Text
+};

package/dist/help/components/content/Header/index.es.js

@@ -0,0 +1,62 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import d from "react";
+import p from "@mui/material/Breadcrumbs";
+import x from "@mui/material/Button";
+import t from "@mui/material/Grid";
+import { H3 as h, Text as o, H2 as f } from "@mxenabled/mxui";
+import { useGlobalCopyStore as u } from "../../../../common/context/hooks/index.es.js";
+const w = ({
+  buttonCopy: i,
+  hasRequestButton: n,
+  onNavigateToList: a,
+  onRequestSupport: m,
+  title: s,
+  topicTitle: l
+}) => {
+  const { help: c } = u();
+  return /* @__PURE__ */ e(d.Fragment, { children: [
+    /* @__PURE__ */ e(t, { container: !0, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ e(t, { item: !0, sm: 6, xs: 12, children: [
+        /* @__PURE__ */ r(h, { color: "text.primary", children: s }),
+        /* @__PURE__ */ e(
+          p,
+          {
+            separator: /* @__PURE__ */ r(o, { bold: !0, color: "grey.600", sx: { fontWeight: 700 }, variant: "Small", children: "/" }),
+            children: [
+              /* @__PURE__ */ r(
+                o,
+                {
+                  bold: !0,
+                  color: "primary.lighter",
+                  onClick: a,
+                  sx: { cursor: "pointer", fontWeight: 700 },
+                  variant: "Small",
+                  children: c.list_title
+                }
+              ),
+              /* @__PURE__ */ r(o, { bold: !0, color: "text.secondary", sx: { fontWeight: 700 }, variant: "Small", children: l })
+            ]
+          }
+        )
+      ] }),
+      n && /* @__PURE__ */ r(
+        t,
+        {
+          item: !0,
+          sm: 6,
+          sx: {
+            display: "flex",
+            justifyContent: { sm: "flex-end" },
+            mt: { xs: 24, sm: 0 }
+          },
+          xs: 12,
+          children: /* @__PURE__ */ r(x, { "aria-label": i, onClick: m, variant: "contained", children: i })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(f, { color: "text.primary", sx: { mt: 24, whiteSpace: { sm: "nowrap", xs: "wrap" } }, children: l })
+  ] });
+};
+export {
+  w as Header
+};

package/dist/help/components/content/LeftImageContent/index.es.js

@@ -0,0 +1,50 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import h from "@mui/material/Box";
+import p from "@mui/material/Divider";
+import t from "@mui/material/Grid";
+import { useTheme as f } from "@mui/material/styles";
+const j = ({
+  altImage: s,
+  content: n,
+  hasDivider: o = !0,
+  image: l,
+  imageLargeBreakPoint: r = 4,
+  sx: c
+}) => {
+  const i = f();
+  return /* @__PURE__ */ m(d.Fragment, { children: [
+    /* @__PURE__ */ e(h, { sx: { pb: 48, ...c }, children: /* @__PURE__ */ m(t, { container: !0, spacing: 24, sx: { alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ e(
+        t,
+        {
+          item: !0,
+          lg: r,
+          md: 12,
+          sm: 12,
+          sx: {
+            alignSelf: "stretch",
+            [i.breakpoints.between("sm", "lg")]: {
+              display: "flex",
+              justifyContent: "center"
+            },
+            "& img": {
+              height: "100%",
+              width: "100%",
+              [i.breakpoints.between("sm", "lg")]: {
+                width: "75%"
+              }
+            }
+          },
+          xs: 12,
+          children: /* @__PURE__ */ e("img", { alt: s, src: l })
+        }
+      ),
+      /* @__PURE__ */ e(t, { item: !0, lg: 12 - r, md: 12, sm: 12, xs: 12, children: n })
+    ] }) }),
+    o && /* @__PURE__ */ e(p, {})
+  ] });
+};
+export {
+  j as LeftImageContent
+};

package/dist/help/components/content/NoImageContent/index.es.js

@@ -0,0 +1,14 @@
+import { jsxs as m, Fragment as i, jsx as r } from "react/jsx-runtime";
+import n from "@mui/material/Box";
+import p from "@mui/material/Divider";
+const d = ({
+  content: o,
+  hasDivider: t = !0,
+  sx: e
+}) => /* @__PURE__ */ m(i, { children: [
+  /* @__PURE__ */ r(n, { sx: { pb: 48, ...e }, children: o }),
+  t && /* @__PURE__ */ r(p, {})
+] });
+export {
+  d as NoImageContent
+};

package/dist/help/components/content/RightImageContent/index.es.js

@@ -0,0 +1,48 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import d from "react";
+import p from "@mui/material/Box";
+import x from "@mui/material/Divider";
+import e from "@mui/material/Grid";
+import { useTheme as h } from "@mui/material/styles";
+const j = ({
+  altImage: s,
+  content: n,
+  hasDivider: o = !0,
+  image: l,
+  imageLargeBreakPoint: r = 4,
+  sx: c
+}) => {
+  const i = h();
+  return /* @__PURE__ */ m(d.Fragment, { children: [
+    /* @__PURE__ */ t(p, { sx: { pb: 48, ...c }, children: /* @__PURE__ */ m(e, { container: !0, spacing: 24, sx: { alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ t(e, { item: !0, lg: 12 - r, md: 12, sm: 12, xs: 12, children: n }),
+      /* @__PURE__ */ t(
+        e,
+        {
+          item: !0,
+          lg: r,
+          md: 12,
+          sm: 12,
+          sx: {
+            [i.breakpoints.between("sm", "lg")]: {
+              display: "flex",
+              justifyContent: "center"
+            },
+            "& img": {
+              width: "100%",
+              [i.breakpoints.between("sm", "lg")]: {
+                width: "75%"
+              }
+            }
+          },
+          xs: 12,
+          children: /* @__PURE__ */ t("img", { alt: s, src: l })
+        }
+      )
+    ] }) }),
+    o && /* @__PURE__ */ t(x, {})
+  ] });
+};
+export {
+  j as RightImageContent
+};

package/dist/help/components/content/TopImageContent/index.es.js

@@ -0,0 +1,50 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import c from "react";
+import l from "@mui/material/Box";
+import a from "@mui/material/Divider";
+import t from "@mui/material/Grid";
+import { useTheme as h } from "@mui/material/styles";
+const j = ({
+  altImage: i,
+  content: o,
+  hasDivider: n = !0,
+  image: s,
+  imageLargeBreakPoint: d = 12,
+  sx: p
+}) => {
+  const r = h();
+  return /* @__PURE__ */ m(c.Fragment, { children: [
+    /* @__PURE__ */ e(l, { sx: { pb: 48, ...p }, children: /* @__PURE__ */ m(t, { container: !0, rowSpacing: 24, children: [
+      /* @__PURE__ */ e(
+        t,
+        {
+          item: !0,
+          lg: d,
+          md: 12,
+          sm: 12,
+          sx: {
+            m: "0 auto",
+            [r.breakpoints.between("sm", "lg")]: {
+              display: "flex",
+              justifyContent: "center"
+            },
+            "& img": {
+              width: "100%",
+              maxWidth: 1176,
+              [r.breakpoints.between("sm", "lg")]: {
+                width: "75%"
+              }
+            }
+          },
+          xs: 12,
+          children: /* @__PURE__ */ e("img", { alt: i, src: s })
+        }
+      ),
+      /* @__PURE__ */ e(t, { item: !0, lg: 12, md: 12, sm: 12, xs: 12, children: o })
+    ] }) }),
+    n && /* @__PURE__ */ e(a, {})
+  ] });
+};
+export {
+  j as TopImageContent
+};