@yourbestsoft/studio-screen-ui-kit 0.0.13 → 0.0.14

package/dist/ToolIconButton-CtrbbDcL.js

@@ -0,0 +1,647 @@
+import { jsx as i, jsxs as k, Fragment as X } from "react/jsx-runtime";
+import h from "classnames";
+import Z, { forwardRef as N, useEffect as y, useState as O, useCallback as R, useLayoutEffect as tt, createContext as A, useRef as I, useContext as $ } from "react";
+import { createPortal as et } from "react-dom";
+import { Eye as ot, EyeOff as nt, X as st, Search as rt } from "lucide-react";
+const ct = "_text_4m304_1", it = "_tertiary_4m304_1", at = "_secondary_4m304_1", lt = "_primary_4m304_1", dt = "_fullWidth_4m304_50", ut = "_buttonWithIcon_4m304_54", ht = "_content_4m304_61", _t = "_shortcut_4m304_70", mt = "_disabled_4m304_82", T = {
+  text: ct,
+  tertiary: it,
+  secondary: at,
+  primary: lt,
+  fullWidth: dt,
+  buttonWithIcon: ut,
+  content: ht,
+  shortcut: _t,
+  disabled: mt
+}, bt = ({
+  children: t,
+  className: e,
+  component: o = "button",
+  disabled: n,
+  fullWidth: r,
+  icon: s,
+  shortcut: c,
+  variant: d = "primary",
+  ...u
+}, _) => {
+  const m = /* @__PURE__ */ k("div", { className: T.buttonWithIcon, children: [
+    /* @__PURE__ */ k("div", { className: T.content, children: [
+      s,
+      t
+    ] }),
+    /* @__PURE__ */ i("div", { className: T.shortcut, children: c })
+  ] });
+  return /* @__PURE__ */ i(
+    o,
+    {
+      className: h(
+        T[d],
+        r && T.fullWidth,
+        n && T.disabled,
+        s && T.icon,
+        e
+      ),
+      children: s ? m : t,
+      disabled: n,
+      ref: _,
+      ...u
+    }
+  );
+}, to = N(bt), gt = "_content_23x5h_1", ft = "_header_23x5h_1", pt = "_root_23x5h_7", wt = "_contentAfterHeader_23x5h_22", H = {
+  content: gt,
+  header: ft,
+  root: pt,
+  contentAfterHeader: wt
+}, V = N(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ i("div", { className: h(H.root, t), ref: o, ...e })
+), Ct = N(
+  ({ className: t, ignoreHeader: e, ...o }, n) => /* @__PURE__ */ i(
+    "div",
+    {
+      className: h(
+        H.content,
+        !e && H.contentAfterHeader,
+        t
+      ),
+      ref: n,
+      ...o
+    }
+  )
+), vt = N(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ i("div", { className: h(H.header, t), ref: o, ...e })
+), eo = Object.assign(V, {
+  Content: Ct,
+  Header: vt,
+  Root: V
+}), yt = (t, e = {}) => {
+  const {
+    enabled: o = !0,
+    preventDefault: n = !1,
+    stopPropagation: r = !1
+  } = e;
+  y(() => {
+    if (!o) return;
+    const s = (c) => {
+      n && c.preventDefault(), r && c.stopPropagation(), t.forEach((d) => d(c));
+    };
+    return window.addEventListener("keydown", s), () => {
+      window.removeEventListener("keydown", s);
+    };
+  }, [t, o, n, r]);
+}, kt = (t, e, o = {}) => (n) => {
+  const {
+    ctrlKey: r = !1,
+    shiftKey: s = !1,
+    altKey: c = !1,
+    metaKey: d = !1
+  } = o;
+  n.key === t && n.ctrlKey === r && n.shiftKey === s && n.altKey === c && n.metaKey === d && e(n);
+}, Nt = (t) => kt("Escape", t), xt = (t, e = !0) => (o) => {
+  if (!e || o.key !== "Tab" || !t.current) return;
+  const n = t.current.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  ), r = n[0], s = n[n.length - 1];
+  o.shiftKey ? document.activeElement === r && (o.preventDefault(), s?.focus()) : document.activeElement === s && (o.preventDefault(), r?.focus());
+}, Tt = (t, e, o) => {
+  y(() => {
+    if (!e) return;
+    const n = (r) => {
+      r.key === "Escape" && o() && t();
+    };
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, [t, e, o]);
+}, Et = (t, e, o) => {
+  y(() => {
+    if (o)
+      return window.addEventListener("resize", t), window.addEventListener("scroll", e, !0), () => {
+        window.removeEventListener("resize", t), window.removeEventListener("scroll", e, !0);
+      };
+  }, [t, e, o]);
+}, St = "_root_ibcdq_1", Dt = "_dropdownContent_ibcdq_6", Ot = "_left_ibcdq_30", $t = "_center_ibcdq_34", qt = "_right_ibcdq_39", Pt = "_top_ibcdq_43", Rt = "_bottom_ibcdq_47", Wt = "_fixedPosition_ibcdq_51", G = {
+  root: St,
+  dropdownContent: Dt,
+  left: Ot,
+  center: $t,
+  right: qt,
+  top: Pt,
+  bottom: Rt,
+  fixedPosition: Wt
+}, Lt = (t, e, o, n = "left", r = "bottom", s = 8) => {
+  const [c, d] = O({
+    horizontal: n,
+    left: 0,
+    top: 0,
+    vertical: r
+  }), u = R(() => {
+    const _ = t.current, m = e.current;
+    if (!_ || !m) return;
+    const a = m.getBoundingClientRect(), l = _.getBoundingClientRect(), p = window.innerWidth, E = window.innerHeight, b = 16;
+    let w = r, C = n, v = 0, f = 0;
+    const W = E - a.bottom, L = a.top;
+    r === "bottom" ? W >= l.height + s + b ? (w = "bottom", v = a.bottom + s) : L >= l.height + s + b ? (w = "top", v = a.top - l.height - s) : (w = W > L ? "bottom" : "top", v = w === "bottom" ? a.bottom + s : a.top - l.height - s) : L >= l.height + s + b ? (w = "top", v = a.top - l.height - s) : W >= l.height + s + b ? (w = "bottom", v = a.bottom + s) : (w = L > W ? "top" : "bottom", v = w === "top" ? a.top - l.height - s : a.bottom + s), n === "left" ? (f = a.left, f + l.width > p - b && (f = p - l.width - b, C = "right"), f < b && (f = b, C = "left")) : n === "right" ? (f = a.right - l.width, f < b && (f = b, C = "left"), f + l.width > p - b && (f = p - l.width - b, C = "right")) : (f = a.left + (a.width - l.width) / 2, f < b ? (f = b, C = "left") : f + l.width > p - b && (f = p - l.width - b, C = "right")), v = Math.max(
+      b,
+      Math.min(v, E - l.height - b)
+    ), d({
+      horizontal: C,
+      left: f,
+      top: v,
+      vertical: w
+    });
+  }, [t, e, r, n, s]);
+  return tt(() => {
+    o && u();
+  }, [o, u]), { calculatePosition: u, position: c };
+}, q = [], It = (t, e) => (y(() => {
+  if (e && t.current)
+    return q.push(t.current), () => {
+      const n = q.indexOf(t.current);
+      n !== -1 && q.splice(n, 1);
+    };
+}, [e, t]), { isTopOfStack: R(() => t.current ? q[q.length - 1] === t.current : !1, [t]) }), J = A(
+  void 0
+), B = () => {
+  const t = $(J);
+  if (!t)
+    throw new Error("useDropDownContext must be used within a DropDown.Root");
+  return t;
+}, Ht = ({
+  children: t,
+  closeOnEsc: e = !0,
+  closeOnOutsideClick: o = !0,
+  defaultVisible: n = !1
+}) => {
+  const [r, s] = O(n), c = I(null), d = I(null), u = R(() => {
+    s(!1);
+  }, []), _ = R(() => {
+    s((a) => !a);
+  }, []), { isTopOfStack: m } = It(c, r);
+  return y(() => {
+    if (!r || !o) return;
+    const a = (l) => {
+      const p = l.target;
+      c.current && !c.current.contains(p) && d.current && !d.current.contains(p) && u();
+    };
+    return window.addEventListener("mousedown", a), () => window.removeEventListener("mousedown", a);
+  }, [r, o, u]), Tt(u, e && r, m), /* @__PURE__ */ i(
+    J.Provider,
+    {
+      value: { close: u, contentRef: d, rootRef: c, toggle: _, visible: r },
+      children: /* @__PURE__ */ i("div", { ref: c, className: G.root, children: t })
+    }
+  );
+}, Kt = ({ children: t }) => {
+  const { toggle: e } = B();
+  return /* @__PURE__ */ i("div", { onClick: e, children: t });
+}, Ft = ({
+  children: t,
+  className: e,
+  horizontal: o = "left",
+  offset: n = 8,
+  vertical: r = "bottom"
+}) => {
+  const { close: s, contentRef: c, rootRef: d, visible: u } = B(), { calculatePosition: _, position: m } = Lt(
+    c,
+    d,
+    u,
+    o,
+    r,
+    n
+  );
+  return y(() => {
+    const a = c.current;
+    if (!a) return;
+    const l = new ResizeObserver(() => _());
+    return l.observe(a), () => l.disconnect();
+  }, [_, c]), Et(_, s, u), u ? et(
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: c,
+        className: h(G.dropdownContent, e),
+        style: {
+          left: `${m.left}px`,
+          top: `${m.top}px`
+        },
+        tabIndex: -1,
+        children: t
+      }
+    ),
+    document.body
+  ) : null;
+}, At = ({ children: t, onClick: e }) => {
+  const { close: o } = B(), n = R(
+    (r) => {
+      e?.(r), o();
+    },
+    [e, o]
+  );
+  return /* @__PURE__ */ i("div", { onClick: n, children: t });
+}, oo = { Close: At, Content: Ft, Root: Ht, Trigger: Kt }, Bt = "_dialogOverlay_1h2c4_1", Mt = "_dialogTrigger_1h2c4_13", Vt = "_dialogContent_1h2c4_21", jt = "_dialogClose_1h2c4_34", zt = "_dialogTitle_1h2c4_42", Xt = "_dialogSeparator_1h2c4_47", D = {
+  dialogOverlay: Bt,
+  dialogTrigger: Mt,
+  dialogContent: Vt,
+  dialogClose: jt,
+  dialogTitle: zt,
+  dialogSeparator: Xt
+}, K = Z.createContext(null), Gt = ({
+  children: t,
+  isOpen: e,
+  onStateChange: o
+}) => {
+  const n = I(null), [r, s] = O(!1), c = e !== void 0 ? e : r, d = (_) => {
+    e === void 0 && s(_), o && o(_);
+  }, u = [
+    Nt(() => d(!1)),
+    xt(n, c)
+  ];
+  return yt(u, { enabled: c }), y(() => (c ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
+    document.body.style.overflow = "unset";
+  }), [c]), y(() => {
+    if (c && n.current) {
+      const m = n.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )[0];
+      m && m.focus();
+    }
+  }, [c]), /* @__PURE__ */ i(K.Provider, { value: { dialogRef: n, isOpen: c, setIsOpen: d }, children: /* @__PURE__ */ i("div", { children: t }) });
+}, Jt = ({
+  as: t,
+  children: e,
+  ...o
+}) => {
+  const n = $(K);
+  if (!n) throw new Error("Trigger must be used within a Dialog.Root");
+  const { setIsOpen: r } = n;
+  return /* @__PURE__ */ i(
+    t || "button",
+    {
+      onClick: () => {
+        r(!0);
+      },
+      ...o,
+      className: D.dialogTrigger,
+      role: t && t !== "button" ? "button" : void 0,
+      children: e
+    }
+  );
+}, Qt = N(
+  ({ children: t, classNameOverlay: e, className: o, closeOnBackdropClick: n = !0 }, r) => {
+    const s = $(K);
+    if (!s) throw new Error("Content must be used within a Dialog.Root");
+    const { dialogRef: c, isOpen: d, setIsOpen: u } = s, _ = (m) => {
+      n && m.target === m.currentTarget && u(!1);
+    };
+    return d ? /* @__PURE__ */ i(
+      "div",
+      {
+        ref: c,
+        className: h(D.dialogOverlay, e),
+        onClick: _,
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: h(D.dialogContent, o),
+            onClick: (m) => m.stopPropagation(),
+            children: t
+          }
+        )
+      }
+    ) : null;
+  }
+), Ut = ({
+  as: t,
+  children: e,
+  ...o
+}) => {
+  const n = $(K);
+  if (!n) throw new Error("Close must be used within a Dialog.Root");
+  const { setIsOpen: r } = n;
+  return /* @__PURE__ */ i(
+    t || "button",
+    {
+      onClick: () => {
+        r(!1);
+      },
+      ...o,
+      className: h(D.dialogClose, o.className),
+      role: t && t !== "button" ? "button" : void 0,
+      children: e
+    }
+  );
+}, Yt = ({ children: t, className: e }) => /* @__PURE__ */ i("h2", { className: h(D.dialogTitle, e), children: t }), Zt = ({}) => /* @__PURE__ */ i("div", { className: D.dialogSeparator }), no = {
+  Close: Ut,
+  Content: Qt,
+  Root: Gt,
+  Separator: Zt,
+  Title: Yt,
+  Trigger: Jt
+}, te = "_sidebar_dg2au_12", ee = "_trigger_dg2au_16", oe = "_content_dg2au_21", ne = "_left_dg2au_34", se = "_open_dg2au_38", re = "_right_dg2au_42", ce = "_bottom_dg2au_50", ie = "_top_dg2au_63", S = {
+  sidebar: te,
+  trigger: ee,
+  content: oe,
+  left: ne,
+  open: se,
+  right: re,
+  bottom: ce,
+  top: ie
+}, Q = A(
+  void 0
+), M = () => {
+  const t = $(Q);
+  if (!t)
+    throw new Error("useSidebarContext must be used within a SidebarProvider");
+  return t;
+}, ae = ({ children: t, isOpen: e, setIsOpen: o }) => /* @__PURE__ */ i(
+  Q.Provider,
+  {
+    value: {
+      isOpen: e,
+      setIsOpen: () => o(!e)
+    },
+    children: t
+  }
+), le = ({ children: t }) => {
+  const { setIsOpen: e } = M(), o = (n) => {
+    n.preventDefault(), e(!0);
+  };
+  return /* @__PURE__ */ i("div", { className: S.trigger, onClick: o, children: t });
+}, de = ({
+  children: t,
+  className: e,
+  closeOnOutsideClick: o = !0,
+  position: n = "right"
+}) => {
+  const { isOpen: r, setIsOpen: s } = M(), c = I(null);
+  return y(() => {
+    if (!o) return;
+    const d = (u) => {
+      c.current && !c.current.contains(u.target) && s(!1);
+    };
+    return r && document.addEventListener("mousedown", d), () => {
+      document.removeEventListener("mousedown", d);
+    };
+  }, [r, s, o]), /* @__PURE__ */ i(
+    "div",
+    {
+      ref: c,
+      className: h(
+        S[n],
+        S.content,
+        {
+          [S.close]: !r,
+          [S.open]: r
+        },
+        e
+      ),
+      children: t
+    }
+  );
+}, ue = ({ children: t }) => {
+  const { setIsOpen: e } = M(), o = (n) => {
+    n.preventDefault(), e(!1);
+  };
+  return /* @__PURE__ */ i("button", { className: S.close, onClick: o, children: t });
+}, so = {
+  Close: ue,
+  Content: de,
+  Root: ae,
+  Trigger: le
+}, he = "_switcher_k6tdq_1", _e = "_buttons_k6tdq_6", me = "_separator_k6tdq_10", F = {
+  switcher: he,
+  buttons: _e,
+  separator: me
+}, ro = N(
+  ({
+    className: t,
+    component: e,
+    componentValues: o,
+    containerProps: n,
+    onChange: r,
+    selectedValue: s,
+    slot: c
+  }, d) => {
+    const [u, _] = O(
+      s || o[0].value
+    ), m = (a) => {
+      _(a), r && r(a);
+    };
+    return /* @__PURE__ */ k("div", { ref: d, className: F.switcher, ...n, children: [
+      /* @__PURE__ */ i("div", { className: h(F.buttons, t), children: o.map((a, l) => /* @__PURE__ */ i(
+        e,
+        {
+          ...a,
+          selected: u === a.value,
+          onClick: () => m(a.value)
+        },
+        l
+      )) }),
+      c && /* @__PURE__ */ k(X, { children: [
+        /* @__PURE__ */ i("div", { className: F.separator }),
+        c
+      ] })
+    ] });
+  }
+), be = "_root_1b0i5_13", ge = "_header_1b0i5_19", fe = "_footer_1b0i5_23", pe = "_row_1b0i5_28", we = "_body_1b0i5_41", Ce = "_head_1b0i5_19", ve = "_cell_1b0i5_48", ye = "_caption_1b0i5_65", ke = "_storiesFooterCellOne_1b0i5_70", Ne = "_storiesFooterCellTwo_1b0i5_73", x = {
+  root: be,
+  header: ge,
+  footer: fe,
+  row: pe,
+  body: we,
+  head: Ce,
+  cell: ve,
+  caption: ye,
+  storiesFooterCellOne: ke,
+  storiesFooterCellTwo: Ne
+}, j = ({ children: t, className: e }) => /* @__PURE__ */ i("table", { className: h(x.root, e), children: t }), xe = ({ children: t, className: e }) => /* @__PURE__ */ i("caption", { className: h(x.caption, e), children: t }), Te = ({ children: t, className: e }) => /* @__PURE__ */ i("thead", { className: h(x.header, e), children: t }), Ee = ({
+  children: t,
+  className: e,
+  onBlur: o,
+  onClick: n,
+  onDoubleClick: r
+}) => /* @__PURE__ */ i(
+  "tr",
+  {
+    className: h(x.row, e),
+    onClick: n,
+    onDoubleClick: r,
+    onBlur: o,
+    children: t
+  }
+), Se = ({ children: t, className: e }) => /* @__PURE__ */ i("th", { className: h(x.head, e), children: t }), De = ({ children: t, className: e }) => /* @__PURE__ */ i("tbody", { className: h(x.body, e), children: t }), Oe = ({ children: t, className: e }) => /* @__PURE__ */ i("td", { className: h(x.cell, e), children: t }), $e = ({ children: t, className: e }) => /* @__PURE__ */ i("tfoot", { className: h(x.footer, e), children: t }), co = Object.assign(j, {
+  Body: De,
+  Caption: xe,
+  Cell: Oe,
+  Footer: $e,
+  Head: Se,
+  Header: Te,
+  Root: j,
+  Row: Ee
+}), qe = "_inputContainer_iqbs3_1", Pe = "_input_iqbs3_1", Re = "_inputSearch_iqbs3_40", We = "_error_iqbs3_43", Le = "_button_iqbs3_58", Ie = "_buttonWithLabel_iqbs3_68", He = "_resetSearchValue_iqbs3_73", Ke = "_searchOutline_iqbs3_80", Fe = "_errorMessage_iqbs3_87", g = {
+  inputContainer: qe,
+  input: Pe,
+  inputSearch: Re,
+  error: We,
+  button: Le,
+  buttonWithLabel: Ie,
+  resetSearchValue: He,
+  searchOutline: Ke,
+  errorMessage: Fe
+}, io = N(({ className: t, error: e, label: o, onChange: n, required: r, ...s }, c) => {
+  const [d, u] = O(!1), _ = (l) => n(l.currentTarget.value), m = h(g.input, e && g.error, t);
+  let a;
+  if (!s.as || s.as === "input") {
+    const { inputType: l, ...p } = s, E = l === "search", b = l === "password", w = d ? "text" : "password";
+    a = /* @__PURE__ */ k(X, { children: [
+      /* @__PURE__ */ i(
+        "input",
+        {
+          className: h(m, E && g.inputSearch),
+          onChange: _,
+          ref: c,
+          type: b ? w : l,
+          ...p
+        }
+      ),
+      b && (d ? /* @__PURE__ */ i(
+        ot,
+        {
+          strokeWidth: 2.5,
+          width: 20,
+          className: h(g.button, o && g.buttonWithLabel),
+          onClick: () => u((C) => !C)
+        }
+      ) : /* @__PURE__ */ i(
+        nt,
+        {
+          strokeWidth: 2.5,
+          width: 20,
+          className: h(g.button, o && g.buttonWithLabel),
+          onClick: () => u((C) => !C)
+        }
+      )),
+      E && s.value && /* @__PURE__ */ i(
+        st,
+        {
+          onClick: () => n(""),
+          className: h(
+            g.button,
+            o && g.buttonWithLabel,
+            g.resetSearchValue
+          ),
+          strokeWidth: 2.5,
+          size: 24
+        }
+      ),
+      E && /* @__PURE__ */ i(
+        rt,
+        {
+          className: h(
+            g.searchOutline,
+            o && g.searchOutlineWithLabel
+          ),
+          size: 20
+        }
+      )
+    ] });
+  }
+  return s.as === "textarea" && (a = /* @__PURE__ */ i(
+    "textarea",
+    {
+      className: m,
+      onChange: _,
+      ref: c,
+      ...s
+    }
+  )), /* @__PURE__ */ k("div", { className: g.root, children: [
+    /* @__PURE__ */ k("span", { className: g.title, children: [
+      o,
+      r && /* @__PURE__ */ i("span", { className: g.titleError, children: "*" })
+    ] }),
+    /* @__PURE__ */ i("div", { className: g.inputContainer, children: a }),
+    /* @__PURE__ */ i("div", { className: g.errorMessage, children: e })
+  ] });
+}), U = A(void 0), ao = ({ children: t }) => {
+  const e = Y() || "system", [o, n] = O(e);
+  return /* @__PURE__ */ i(U.Provider, { value: { setTheme: n, theme: o }, children: t });
+}, lo = () => {
+  const t = $(U);
+  if (!t)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return Ae(t.theme), t;
+}, Ae = (t) => {
+  const e = Y();
+  Be(t || e);
+}, Be = (t) => {
+  const e = window.matchMedia("(prefers-color-scheme: dark)");
+  if (t === "system") {
+    const o = e.matches ? "dark" : "light";
+    localStorage.setItem("theme", t), z(o);
+  } else
+    localStorage.setItem("theme", t), z(t);
+}, z = (t) => {
+  document.documentElement.setAttribute("data-theme", t);
+}, Y = () => {
+  const t = localStorage.getItem("theme");
+  if (t) return t;
+}, Me = "_root_17w6h_1", Ve = "_icon_17w6h_11", je = "_active_17w6h_27", ze = "_disabled_17w6h_31", Xe = "_keybinding_17w6h_44", P = {
+  root: Me,
+  icon: Ve,
+  active: je,
+  disabled: ze,
+  keybinding: Xe
+}, uo = N(
+  (t, e) => {
+    const { classes: o, disabled: n, icon: r, isActive: s, keybinding: c, onClick: d, title: u } = t, _ = Ge(o, s, n);
+    return /* @__PURE__ */ k("label", { className: P.root, title: u, children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: _.icon,
+          ref: e,
+          tabIndex: n ? -1 : 0,
+          role: "button",
+          "aria-pressed": s,
+          "aria-disabled": n,
+          onClick: n ? void 0 : d,
+          children: r
+        }
+      ),
+      c && /* @__PURE__ */ i("span", { className: _.keybinding, children: c })
+    ] });
+  }
+), Ge = (t, e, o) => ({
+  icon: h(
+    P.icon,
+    {
+      [P.active]: e,
+      [P.disabled]: o
+    },
+    t?.icon
+  ),
+  keybinding: h(P.keybinding, t?.keybinding)
+});
+export {
+  to as B,
+  V as C,
+  oo as D,
+  Q as S,
+  co as T,
+  lo as a,
+  bt as b,
+  Ct as c,
+  vt as d,
+  eo as e,
+  no as f,
+  M as g,
+  so as h,
+  ro as i,
+  io as j,
+  uo as k,
+  ao as l,
+  yt as u
+};
+//# sourceMappingURL=ToolIconButton-CtrbbDcL.js.map