@versini/sassysaint 8.48.0 → 8.50.0

package/dist/chunks/SettingsEntry.DLsBdG9c.js

@@ -0,0 +1,755 @@
+import { jsxs as m, jsx as r, Fragment as fe } from "react/jsx-runtime";
+import { o as ge, h as ie, i as ye, x as xe, n as be, useUserPreferences as ke, getCacheInfo as Ee, isServiceWorkerEnabled as Te, SETTINGS_TITLE as Ne, S as V, CARDS as P, de as ve, C as se, PROMPTS_DESCRIPTION as we, L as Se, j as de, pe as Ce, getCurrentGeoLocation as Ie, mutateCall as ue, handleServiceWorkerToggle as Le, SERVICE_TYPES as me } from "./index.BgObOSYj.js";
+import { useCapability as _e, se as Me, L as D } from "./App.5pNjlAbr.js";
+import Ae, { useState as i, useEffect as ne, useRef as W, useLayoutEffect as Y, useCallback as Oe } from "react";
+import f from "clsx";
+function Pe({
+  value: a,
+  defaultValue: l,
+  finalValue: o,
+  onChange: s = () => {
+  },
+  initialControlledDelay: e = 0
+}) {
+  const [n, h] = i(!1), [g, N] = i(
+    l !== void 0 ? l : o
+  ), v = (x) => {
+    N(x), s?.(x);
+  };
+  return ne(() => {
+    (async () => a !== void 0 && !n && e > 0 && (await new Promise(
+      (x) => setTimeout(x, e)
+    ), h(!0)))();
+  }, [a, e, n]), a !== void 0 ? !n && e > 0 ? ["", s, !0] : [a, s, !0] : [g, v, !1];
+}
+const he = "av-text-area", De = "av-text-area-wrapper", le = "av-text-area-helper-text", Re = "av-text-area__control--right", Be = "av-text-area__control--left", Ge = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", He = ({ mode: a }) => f({
+  "bg-surface-darker text-copy-lighter caret-copy-light": a === "dark",
+  "bg-surface-lighter text-copy-dark caret-copy-dark": a === "light",
+  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": a === "system",
+  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": a === "alt-system"
+}), Ue = ({
+  focusMode: a
+}) => f("focus:outline focus:outline-2 focus:outline-offset-2", {
+  "focus:outline-focus-dark": a === "dark",
+  "focus:outline-focus-light": a === "light",
+  "focus:outline-focus-light dark:focus:outline-focus-dark": a === "alt-system",
+  "focus:outline-focus-dark dark:focus:outline-focus-light": a === "system"
+}), $e = ({
+  noBorder: a,
+  error: l
+}) => f("border-2", {
+  "border-border-dark": !a && !l,
+  "focus:border-border-dark": !a && l,
+  "border-border-error-dark": !a && l,
+  "border-transparent": a
+}), Ve = ({
+  disabled: a,
+  raw: l,
+  error: o,
+  mode: s,
+  leftElement: e,
+  rightElement: n
+}) => {
+  if (l)
+    return "";
+  if (a)
+    return f(
+      "transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium",
+      {
+        "translate-x-[12px]": n === !0 && !e || !n && !e
+      }
+    );
+  if (!o)
+    return f(
+      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
+      {
+        "translate-x-[12px]": n === !0 && !e || !n && !e,
+        "text-copy-medium": s === "dark",
+        "text-copy-dark": s === "light",
+        "text-copy-dark dark:text-copy-medium": s === "system",
+        "text-copy-medium dark:text-copy-dark": s === "alt-system"
+      }
+    );
+  if (o)
+    return f(
+      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
+      {
+        "translate-x-[12px]": n === !0 && !e || !n && !e,
+        "text-copy-medium": s === "dark",
+        "text-copy-error-dark": s === "light",
+        "text-copy-error-dark dark:text-copy-error-light": s === "system",
+        "text-copy-medium dark:text-copy-error-dark": s === "alt-system"
+      }
+    );
+}, We = ({
+  error: a,
+  raw: l,
+  mode: o,
+  disabled: s
+}) => {
+  if (l)
+    return "";
+  if (s)
+    return f(
+      le,
+      "absolute px-2 cursor-not-allowed opacity-50 font-medium"
+    );
+  if (!a)
+    return f(le, "absolute px-2 font-medium", {
+      "text-copy-medium": o === "dark",
+      "text-copy-dark": o === "light",
+      "text-copy-dark dark:text-copy-medium": o === "system",
+      "text-copy-medium dark:text-copy-dark": o === "alt-system"
+    });
+  if (a)
+    return f(le, "absolute px-2 font-medium", {
+      "text-copy-error-light": o === "dark",
+      "text-copy-error-dark": o === "light",
+      "text-copy-error-dark dark:text-copy-error-light": o === "system",
+      "dark:text-copy-error-dark text-copy-error-light": o === "alt-system"
+    });
+}, ze = ({
+  className: a,
+  textAreaClassName: l,
+  raw: o,
+  focusMode: s,
+  disabled: e,
+  noBorder: n,
+  error: h,
+  mode: g,
+  leftElement: N,
+  rightElement: v
+}) => {
+  const x = o ? a : f(
+    "relative flex w-full flex-col justify-center",
+    De,
+    a
+  ), I = o ? f(l) : f(
+    he,
+    l,
+    Ge(),
+    He({ mode: g }),
+    Ue({ focusMode: s }),
+    $e({
+      noBorder: n,
+      error: h
+    }),
+    {
+      "disabled:cursor-not-allowed disabled:opacity-50": e
+    }
+  ), R = o ? void 0 : "sr-only", B = Ve({
+    disabled: e,
+    raw: o,
+    error: h,
+    mode: g,
+    rightElement: v,
+    leftElement: N
+  }), p = We({
+    error: h,
+    raw: o,
+    mode: g,
+    disabled: e
+  }), C = o ? void 0 : f(Re, "absolute"), b = o ? void 0 : f(Be, "absolute");
+  return {
+    wrapper: x,
+    textArea: I,
+    accessibleLabel: R,
+    visibleLabel: B,
+    helperText: p,
+    rightElement: C,
+    leftElement: b
+  };
+}, Fe = ({
+  scrollHeight: a,
+  currentHeight: l,
+  currentLabelOffset: o = 0,
+  currentHelperTextOffset: s = 0
+}) => {
+  let e, n;
+  if (a > 0 && a !== l) {
+    const h = a - l, g = Math.abs(h / 24);
+    e = o + -1 * Math.sign(h) * (12 * g), n = s + Math.sign(h) * (12 * g);
+  }
+  return {
+    labelOffset: e,
+    helperTextOffset: n,
+    scrollHeight: a
+  };
+}, ce = Ae.forwardRef(
+  ({
+    id: a,
+    name: l,
+    label: o,
+    error: s = !1,
+    raw: e = !1,
+    className: n,
+    textAreaClassName: h,
+    mode: g = "system",
+    focusMode: N = "system",
+    value: v,
+    defaultValue: x,
+    disabled: I = !1,
+    noBorder: R = !1,
+    labelId: B,
+    helperText: p = "",
+    helperTextOnFocus: C = !1,
+    rightElement: b,
+    leftElement: w,
+    onChange: z,
+    onFocus: L,
+    onBlur: F,
+    ...G
+  }, X) => {
+    const d = W(null), q = ge([X, d]), [J, _] = ie(), [K, S] = ie(), H = W(80), Q = W(-25), U = W(null), Z = W(30), ee = W(null), M = ye({ id: a, prefix: `${he}-` }), [te, re] = i(0), [$, ae] = i(0), [t, c] = i(
+      !!(!C && p)
+    ), A = `${l} error, ${p}`, k = ze({
+      className: n,
+      textAreaClassName: h,
+      error: s,
+      raw: e,
+      focusMode: N,
+      disabled: I,
+      noBorder: R,
+      mode: g,
+      rightElement: !!b,
+      leftElement: !!w
+    }), [u, E] = Pe({
+      value: v,
+      initialControlledDelay: 20,
+      defaultValue: x,
+      onChange: (y) => {
+        z && z({
+          target: {
+            value: y
+          }
+        });
+      }
+    }), T = (y) => {
+      E(y.target.value);
+    }, O = (y) => {
+      C && p && c(!0), L && L(y);
+    }, j = (y) => {
+      C && p && !u && c(!1), F && F(y);
+    };
+    return Y(() => {
+      _ && _.width && re(_.width + 18 + 10);
+    }, [_]), Y(() => {
+      S && S.width && ae(S.width + 18 + 10);
+    }, [S]), Y(() => {
+      e || d && d.current && u !== void 0 && (d.current.style.height = "inherit", d.current.style.height = d.current.scrollHeight + "px");
+    }, [u, e]), Y(() => {
+      e || setTimeout(() => {
+        U?.current?.style.setProperty(
+          "--av-text-area-wrapper-transition",
+          u ? "none" : "all 0.2s ease-out"
+        );
+      }, 0);
+    }, [u, e]), Y(() => {
+      if (!e && d && d.current && u !== void 0) {
+        const { labelOffset: y, helperTextOffset: oe, scrollHeight: pe } = Fe({
+          scrollHeight: d.current.scrollHeight,
+          currentHeight: H.current,
+          currentLabelOffset: Q.current,
+          currentHelperTextOffset: Z.current
+        });
+        y && (Q.current = y, U?.current?.style.setProperty(
+          "--av-text-area-label",
+          `${y}px`
+        )), oe && (Z.current = oe, ee?.current?.style.setProperty(
+          "--av-text-area-helper-text",
+          `${oe}px`
+        )), H.current = pe || H.current;
+      }
+    }, [u, e]), S.width > 0 && U?.current?.style.setProperty(
+      "--tw-translate-x",
+      `${12 + S.width + 5}px`
+    ), /* @__PURE__ */ m("div", { className: k.wrapper, children: [
+      /* @__PURE__ */ r(
+        "label",
+        {
+          htmlFor: M,
+          id: B,
+          className: k.accessibleLabel,
+          children: o
+        }
+      ),
+      w && /* @__PURE__ */ r(
+        "div",
+        {
+          ref: K,
+          className: k.leftElement,
+          children: w
+        }
+      ),
+      /* @__PURE__ */ r(
+        "textarea",
+        {
+          ref: q,
+          id: M,
+          name: l,
+          disabled: I,
+          placeholder: e ? void 0 : " ",
+          className: k.textArea,
+          rows: 1,
+          ...p && { "aria-describedby": `${M}-helper` },
+          ...s && { "aria-invalid": "true" },
+          ...b && !w && !e && { style: { paddingRight: te } },
+          ...w && !b && !e && { style: { paddingLeft: $ } },
+          ...b && w && !e && {
+            style: {
+              paddingRight: te,
+              paddingLeft: $
+            }
+          },
+          value: u,
+          onChange: T,
+          onFocus: O,
+          onBlur: j,
+          ...G
+        }
+      ),
+      !e && /* @__PURE__ */ r(
+        "label",
+        {
+          ref: U,
+          "aria-hidden": !0,
+          htmlFor: M,
+          className: `${k.visibleLabel}`,
+          children: o
+        }
+      ),
+      t && /* @__PURE__ */ r(
+        "div",
+        {
+          ref: ee,
+          id: `${M}-helper`,
+          className: k.helperText,
+          children: p
+        }
+      ),
+      b && /* @__PURE__ */ r(
+        "div",
+        {
+          ref: J,
+          className: k.rightElement,
+          children: b
+        }
+      ),
+      s && p && /* @__PURE__ */ r(xe, { politeness: "polite", clearAnnouncementDelay: 500, children: A })
+    ] });
+  }
+);
+ce.displayName = "TextArea";
+/*!
+  @versini/ui-textarea v5.0.1
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_TEXTAREA__ || (window.__VERSINI_UI_TEXTAREA__ = {
+    version: "5.0.1",
+    buildTime: "09/01/2025 04:01 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const Ke = ({
+  open: a,
+  onOpenChange: l
+}) => {
+  const { getAccessToken: o, user: s } = be(), {
+    data: e,
+    isSuccess: n,
+    refetch: h
+  } = ke({
+    user: s?.username,
+    getAccessToken: o
+  }), [g, N] = i({
+    loadingLocation: !1
+  }), [v, x] = i({
+    prompts: []
+  }), [I, R] = i(""), [B, p] = i(""), [C, b] = i(!1), [w, z] = i(!1), [L, F] = i(!1), [G, X] = i(!1), [d, q] = i(null), [J, _] = i(!1), [K, S] = i(!1), H = _e(Ce.TOOL.MEMORIES), Q = (t) => {
+    S(t);
+  }, U = (t) => {
+    b(t);
+  }, Z = (t) => {
+    H && z(t);
+  }, ee = (t) => {
+    X(t);
+  }, M = async (t) => {
+    t.preventDefault();
+    try {
+      await ue({
+        accessToken: await o(),
+        type: me.SET_USER_PREFERENCES,
+        params: {
+          user: s?.username,
+          instructions: I,
+          location: B,
+          provider: e?.provider,
+          tags: v.prompts,
+          sendOnEnter: C,
+          useMemory: w,
+          showDetails: K
+        }
+      }), G !== L && (await Le(G), F(G)), h(), N({
+        loadingLocation: !1
+      });
+    } catch {
+    }
+  }, te = async () => {
+    N({
+      loadingLocation: !0
+    }), p("...");
+    try {
+      const t = Date.now(), c = await Ie(), A = await ue({
+        accessToken: await o(),
+        type: me.GET_LOCATION,
+        params: {
+          latitude: c.latitude,
+          longitude: c.longitude
+        }
+      }), u = Date.now() - t;
+      if (u < 2e3 && await new Promise((E) => setTimeout(E, 2e3 - u)), A.status === 200) {
+        const { city: E, state: T, country: O, displayName: j } = A.data, y = E && T && O ? `${E}, ${T}, ${O}` : j;
+        N({
+          loadingLocation: !1
+        }), p(y);
+      } else
+        N({
+          loadingLocation: !1
+        });
+    } catch {
+    }
+  }, re = () => {
+    h(), l(!1);
+  }, $ = ({
+    enabled: t = !1,
+    privateChat: c = !1,
+    clipboardAccess: A = !1,
+    ...k
+  }) => {
+    x((u) => {
+      const E = u.prompts, T = {
+        ...k,
+        enabled: t,
+        privateChat: c,
+        clipboardAccess: A
+      };
+      A ? T.content = T.content.replace(/{{clipboard}}/g, "") + " {{clipboard}}" : T.content = T.content.replace(/{{clipboard}}/g, "");
+      const O = E.findIndex((j) => j.slot === k.slot);
+      return O === -1 ? {
+        ...u,
+        prompts: [...E, { ...T }]
+      } : (E[O] = T, {
+        ...u,
+        prompts: [...E]
+      });
+    });
+  }, ae = Oe(async () => {
+    try {
+      _(!0);
+      const t = await Ee();
+      q(t);
+    } catch {
+    } finally {
+      _(!1);
+    }
+  }, []);
+  return ne(() => {
+    if (!e)
+      return;
+    e.instructions && R(e.instructions), e.location && p(e.location), e.tags && x({ prompts: e.tags }), e.sendOnEnter !== void 0 && b(e.sendOnEnter), e.useMemory !== void 0 && z(e.useMemory), e.showDetails !== void 0 && S(e.showDetails);
+    const t = Te();
+    F(t), X(t);
+  }, [e]), ne(() => {
+    L ? ae() : q(null);
+  }, [L, ae]), n ? /* @__PURE__ */ m(
+    Me,
+    {
+      open: a,
+      onOpenChange: re,
+      title: Ne,
+      animation: !0,
+      animationType: "fade",
+      footer: /* @__PURE__ */ m(
+        Se,
+        {
+          columnGap: 2,
+          alignHorizontal: "flex-end",
+          className: "pb-8 sm:pb-0",
+          children: [
+            /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(
+              se,
+              {
+                mode: "dark",
+                variant: "secondary",
+                focusMode: "light",
+                noBorder: !0,
+                onClick: re,
+                children: "Cancel"
+              }
+            ) }),
+            /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(
+              se,
+              {
+                mode: "dark",
+                focusMode: "light",
+                onClick: async (t) => {
+                  l(!1), await M(t);
+                },
+                children: "Save"
+              }
+            ) })
+          ]
+        }
+      ),
+      children: [
+        /* @__PURE__ */ m(
+          V,
+          {
+            header: P.SETTINGS_DETAILS.TITLE,
+            className: "prose-dark dark:prose-lighter",
+            noBorder: !0,
+            children: [
+              /* @__PURE__ */ r("p", { className: "text-sm", children: P.SETTINGS_DETAILS.DETAILS }),
+              /* @__PURE__ */ r(
+                D,
+                {
+                  narrow: !0,
+                  className: "mt-2",
+                  label: "Show Message Statistics",
+                  name: "show-message-statistics",
+                  onChange: Q,
+                  checked: K
+                }
+              ),
+              /* @__PURE__ */ r("p", { className: "text-sm mt-5", children: P.SETTINGS_DETAILS.SEND_ON_ENTER }),
+              /* @__PURE__ */ r(
+                D,
+                {
+                  narrow: !0,
+                  className: "mt-2",
+                  label: "Send Message on Enter",
+                  name: "send-message-on-enter",
+                  onChange: U,
+                  checked: C
+                }
+              ),
+              H && /* @__PURE__ */ m(fe, { children: [
+                /* @__PURE__ */ r("p", { className: "text-sm mt-5", children: P.SETTINGS_DETAILS.USE_MEMORY }),
+                /* @__PURE__ */ r(
+                  D,
+                  {
+                    narrow: !0,
+                    className: "mt-2",
+                    label: "Use Memory",
+                    name: "use-memory",
+                    onChange: Z,
+                    checked: w
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(
+          V,
+          {
+            header: "Custom Instructions",
+            className: "prose-dark dark:prose-lighter mt-4",
+            noBorder: !0,
+            children: [
+              /* @__PURE__ */ m("p", { className: "text-sm", children: [
+                "What would you like ",
+                /* @__PURE__ */ r("em", { children: ve }),
+                " to know about you to provide better responses?"
+              ] }),
+              /* @__PURE__ */ r(
+                ce,
+                {
+                  mode: "alt-system",
+                  autoCapitalize: "off",
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  name: "customInstructions",
+                  label: "Custom Instructions",
+                  value: I,
+                  onChange: (t) => {
+                    R(t.target.value);
+                  },
+                  helperText: "Press ENTER to add a new line."
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(
+          V,
+          {
+            header: "Location",
+            className: "prose-dark dark:prose-lighter mt-4",
+            noBorder: !0,
+            children: [
+              /* @__PURE__ */ r("p", { className: "text-sm", children: "You can share your location to receive customized responses based on your area." }),
+              /* @__PURE__ */ r(
+                ce,
+                {
+                  mode: "alt-system",
+                  name: "location",
+                  label: "Location",
+                  value: B,
+                  onChange: (t) => {
+                    p(t.target.value);
+                  },
+                  helperText: "Enter your location or press auto-detect."
+                }
+              ),
+              /* @__PURE__ */ r(
+                se,
+                {
+                  className: "mt-2",
+                  size: "small",
+                  noBorder: !0,
+                  variant: "secondary",
+                  disabled: g.loadingLocation,
+                  onClick: te,
+                  children: g.loadingLocation ? "Detecting..." : "Auto-detect"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(
+          V,
+          {
+            header: P.SETTINGS_PROMPTS.TITLE,
+            className: "prose-dark dark:prose-lighter mt-4",
+            noBorder: !0,
+            children: [
+              /* @__PURE__ */ r("p", { className: "text-sm", children: we }),
+              v.prompts && v.prompts.slice(0, 3).map((t) => /* @__PURE__ */ m(
+                V,
+                {
+                  mode: "dark",
+                  noBorder: !0,
+                  header: t.label.replace("...", ""),
+                  className: "prose-light mb-2",
+                  children: [
+                    /* @__PURE__ */ r("p", { className: "text-sm", children: t.description }),
+                    /* @__PURE__ */ r(
+                      D,
+                      {
+                        narrow: !0,
+                        mode: "dark",
+                        focusMode: "light",
+                        className: "mt-2",
+                        noBorder: !0,
+                        label: "Enabled",
+                        name: t.slot.toString(),
+                        onChange: (c) => {
+                          $({
+                            ...t,
+                            enabled: c
+                          });
+                        },
+                        checked: t.enabled
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      D,
+                      {
+                        narrow: !0,
+                        mode: "dark",
+                        focusMode: "light",
+                        className: "mt-2",
+                        noBorder: !0,
+                        label: "Private Chat",
+                        name: `private-${t.slot.toString()}`,
+                        onChange: (c) => {
+                          $({
+                            ...t,
+                            privateChat: c
+                          });
+                        },
+                        checked: t.privateChat
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      D,
+                      {
+                        narrow: !0,
+                        mode: "dark",
+                        focusMode: "light",
+                        className: "mt-2",
+                        noBorder: !0,
+                        label: "Use Clipboard",
+                        name: `clipboard-${t.slot.toString()}`,
+                        onChange: (c) => {
+                          $({
+                            ...t,
+                            clipboardAccess: c
+                          });
+                        },
+                        checked: t.clipboardAccess
+                      }
+                    )
+                  ]
+                },
+                `prompt-slot-${t.slot}`
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(
+          V,
+          {
+            header: P.SETTINGS_CACHING.TITLE,
+            className: "prose-dark dark:prose-lighter mt-4 ",
+            noBorder: !0,
+            children: [
+              /* @__PURE__ */ r("p", { className: "text-sm", children: P.SETTINGS_CACHING.DESCRIPTION }),
+              /* @__PURE__ */ r(
+                D,
+                {
+                  narrow: !0,
+                  className: "mt-2",
+                  label: "Enable Assets Caching",
+                  name: "enable-service-worker",
+                  onChange: ee,
+                  checked: G
+                }
+              ),
+              L && /* @__PURE__ */ m("div", { className: "mt-4 p-3 border border-dashed border-neutral-700 dark:border-neutral-400 rounded @container/optimizations", children: [
+                /* @__PURE__ */ r("h3", { className: "m-0 mb-2 text-xs uppercase opacity-70", children: "Cache Info" }),
+                d ? /* @__PURE__ */ m("div", { className: "text-xs space-y-2", children: [
+                  /* @__PURE__ */ m("p", { className: "m-0", children: [
+                    "Version: ",
+                    /* @__PURE__ */ r("strong", { children: d.version })
+                  ] }),
+                  /* @__PURE__ */ m("p", { className: "m-0", children: [
+                    "Total Items: ",
+                    /* @__PURE__ */ r("strong", { children: d.totalItems })
+                  ] }),
+                  d.caches.map((t) => /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("ul", { className: "not-prose font-mono mt-2 list-none w-[95cqw]", children: t.urls.map((c) => /* @__PURE__ */ r(
+                    "li",
+                    {
+                      className: "truncate text-xs text-copy-dark dark:text-copy-light overflow-hidden text-ellipsis",
+                      title: c,
+                      children: new URL(c).pathname
+                    },
+                    c
+                  )) }) }, t.name)),
+                  d.totalItems === 0 && !J && /* @__PURE__ */ r("p", { className: "italic m-0 opacity-70", children: "No cached assets yet." })
+                ] }) : /* @__PURE__ */ r("p", { className: "text-xs opacity-70 m-0", children: J ? "Loading cache info..." : "No cache info available." })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+};
+export {
+  Ke as SettingsPanel
+};