@devalok/shilp-sutra 0.8.4 → 0.9.0

package/dist/primitives/react-tabs.js

@@ -1,163 +0,0 @@
-import * as v from "react";
-import { composeEventHandlers as g } from "./_internal/primitive.js";
-import { createContextScope as x } from "./_internal/react-context.js";
-import { Root as E, Item as F, createRovingFocusGroupScope as C } from "./react-roving-focus.js";
-import { Presence as w } from "./_internal/react-presence.js";
-import { Primitive as b } from "./_internal/react-primitive.js";
-import { useDirection as D } from "./_internal/react-direction.js";
-import { useControllableState as V } from "./_internal/react-use-controllable-state.js";
-import { useId as G } from "./_internal/react-id.js";
-import { jsx as l } from "react/jsx-runtime";
-var p = "Tabs", [L] = x(p, [
-  C
-]), h = C(), [$, T] = L(p), I = v.forwardRef(
-  (e, r) => {
-    const {
-      __scopeTabs: s,
-      value: t,
-      onValueChange: n,
-      defaultValue: c,
-      orientation: o = "horizontal",
-      dir: d,
-      activationMode: f = "automatic",
-      ...m
-    } = e, i = D(d), [a, u] = V({
-      prop: t,
-      onChange: n,
-      defaultProp: c ?? "",
-      caller: p
-    });
-    return /* @__PURE__ */ l(
-      $,
-      {
-        scope: s,
-        baseId: G(),
-        value: a,
-        onValueChange: u,
-        orientation: o,
-        dir: i,
-        activationMode: f,
-        children: /* @__PURE__ */ l(
-          b.div,
-          {
-            dir: i,
-            "data-orientation": o,
-            ...m,
-            ref: r
-          }
-        )
-      }
-    );
-  }
-);
-I.displayName = p;
-var R = "TabsList", _ = v.forwardRef(
-  (e, r) => {
-    const { __scopeTabs: s, loop: t = !0, ...n } = e, c = T(R, s), o = h(s);
-    return /* @__PURE__ */ l(
-      E,
-      {
-        asChild: !0,
-        ...o,
-        orientation: c.orientation,
-        dir: c.dir,
-        loop: t,
-        children: /* @__PURE__ */ l(
-          b.div,
-          {
-            role: "tablist",
-            "aria-orientation": c.orientation,
-            ...n,
-            ref: r
-          }
-        )
-      }
-    );
-  }
-);
-_.displayName = R;
-var y = "TabsTrigger", A = v.forwardRef(
-  (e, r) => {
-    const { __scopeTabs: s, value: t, disabled: n = !1, ...c } = e, o = T(y, s), d = h(s), f = P(o.baseId, t), m = S(o.baseId, t), i = t === o.value;
-    return /* @__PURE__ */ l(
-      F,
-      {
-        asChild: !0,
-        ...d,
-        focusable: !n,
-        active: i,
-        children: /* @__PURE__ */ l(
-          b.button,
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": i,
-            "aria-controls": m,
-            "data-state": i ? "active" : "inactive",
-            "data-disabled": n ? "" : void 0,
-            disabled: n,
-            id: f,
-            ...c,
-            ref: r,
-            onMouseDown: g(e.onMouseDown, (a) => {
-              !n && a.button === 0 && a.ctrlKey === !1 ? o.onValueChange(t) : a.preventDefault();
-            }),
-            onKeyDown: g(e.onKeyDown, (a) => {
-              [" ", "Enter"].includes(a.key) && o.onValueChange(t);
-            }),
-            onFocus: g(e.onFocus, () => {
-              const a = o.activationMode !== "manual";
-              !i && !n && a && o.onValueChange(t);
-            })
-          }
-        )
-      }
-    );
-  }
-);
-A.displayName = y;
-var M = "TabsContent", N = v.forwardRef(
-  (e, r) => {
-    const { __scopeTabs: s, value: t, forceMount: n, children: c, ...o } = e, d = T(M, s), f = P(d.baseId, t), m = S(d.baseId, t), i = t === d.value, a = v.useRef(i);
-    return v.useEffect(() => {
-      const u = requestAnimationFrame(() => a.current = !1);
-      return () => cancelAnimationFrame(u);
-    }, []), /* @__PURE__ */ l(w, { present: n || i, children: ({ present: u }) => /* @__PURE__ */ l(
-      b.div,
-      {
-        "data-state": i ? "active" : "inactive",
-        "data-orientation": d.orientation,
-        role: "tabpanel",
-        "aria-labelledby": f,
-        hidden: !u,
-        id: m,
-        tabIndex: 0,
-        ...o,
-        ref: r,
-        style: {
-          ...e.style,
-          animationDuration: a.current ? "0s" : void 0
-        },
-        children: u && c
-      }
-    ) });
-  }
-);
-N.displayName = M;
-function P(e, r) {
-  return `${e}-trigger-${r}`;
-}
-function S(e, r) {
-  return `${e}-content-${r}`;
-}
-var Q = I, U = _, W = A, X = N;
-export {
-  X as Content,
-  U as List,
-  Q as Root,
-  I as Tabs,
-  N as TabsContent,
-  _ as TabsList,
-  A as TabsTrigger,
-  W as Trigger
-};

package/dist/primitives/react-toast.js

@@ -1,446 +0,0 @@
-import * as n from "react";
-import * as Pe from "react-dom";
-import { composeEventHandlers as R } from "./_internal/primitive.js";
-import { useComposedRefs as oe } from "./_internal/react-compose-refs.js";
-import { createCollection as Ce } from "./_internal/react-collection.js";
-import { createContextScope as xe } from "./_internal/react-context.js";
-import { Branch as he, Root as Re } from "./_internal/react-dismissable-layer.js";
-import { Portal as be } from "./_internal/react-portal.js";
-import { Presence as ge } from "./_internal/react-presence.js";
-import { Primitive as D, dispatchDiscreteCustomEvent as Se } from "./_internal/react-primitive.js";
-import { useCallbackRef as U } from "./_internal/react-use-callback-ref.js";
-import { useControllableState as Ie } from "./_internal/react-use-controllable-state.js";
-import { useLayoutEffect as Ae } from "./_internal/react-use-layout-effect.js";
-import { VisuallyHidden as re } from "./react-visually-hidden.js";
-import { jsx as l, jsxs as G, Fragment as ne } from "react/jsx-runtime";
-var J = "ToastProvider", [Q, Fe, _e] = Ce("Toast"), [se] = xe("Toast", [_e]), [De, X] = se(J), ae = (e) => {
-  const {
-    __scopeToast: o,
-    label: r = "Notification",
-    duration: t = 5e3,
-    swipeDirection: c = "right",
-    swipeThreshold: d = 50,
-    children: p
-  } = e, [v, T] = n.useState(null), [s, h] = n.useState(0), y = n.useRef(!1), N = n.useRef(!1);
-  return r.trim() || console.error(
-    `Invalid prop \`label\` supplied to \`${J}\`. Expected non-empty \`string\`.`
-  ), /* @__PURE__ */ l(Q.Provider, { scope: o, children: /* @__PURE__ */ l(
-    De,
-    {
-      scope: o,
-      label: r,
-      duration: t,
-      swipeDirection: c,
-      swipeThreshold: d,
-      toastCount: s,
-      viewport: v,
-      onViewportChange: T,
-      onToastAdd: n.useCallback(() => h((g) => g + 1), []),
-      onToastRemove: n.useCallback(() => h((g) => g - 1), []),
-      isFocusedToastEscapeKeyDownRef: y,
-      isClosePausedRef: N,
-      children: p
-    }
-  ) });
-};
-ae.displayName = J;
-var ie = "ToastViewport", Ne = ["F8"], j = "toast.viewportPause", q = "toast.viewportResume", ce = n.forwardRef(
-  (e, o) => {
-    const {
-      __scopeToast: r,
-      hotkey: t = Ne,
-      label: c = "Notifications ({hotkey})",
-      ...d
-    } = e, p = X(ie, r), v = Fe(r), T = n.useRef(null), s = n.useRef(null), h = n.useRef(null), y = n.useRef(null), N = oe(o, y, p.onViewportChange), g = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), S = p.toastCount > 0;
-    n.useEffect(() => {
-      const i = (P) => {
-        var m;
-        t.length !== 0 && t.every((w) => P[w] || P.code === w) && ((m = y.current) == null || m.focus());
-      };
-      return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-    }, [t]), n.useEffect(() => {
-      const i = T.current, P = y.current;
-      if (S && i && P) {
-        const f = () => {
-          if (!p.isClosePausedRef.current) {
-            const C = new CustomEvent(j);
-            P.dispatchEvent(C), p.isClosePausedRef.current = !0;
-          }
-        }, m = () => {
-          if (p.isClosePausedRef.current) {
-            const C = new CustomEvent(q);
-            P.dispatchEvent(C), p.isClosePausedRef.current = !1;
-          }
-        }, w = (C) => {
-          !i.contains(C.relatedTarget) && m();
-        }, E = () => {
-          i.contains(document.activeElement) || m();
-        };
-        return i.addEventListener("focusin", f), i.addEventListener("focusout", w), i.addEventListener("pointermove", f), i.addEventListener("pointerleave", E), window.addEventListener("blur", f), window.addEventListener("focus", m), () => {
-          i.removeEventListener("focusin", f), i.removeEventListener("focusout", w), i.removeEventListener("pointermove", f), i.removeEventListener("pointerleave", E), window.removeEventListener("blur", f), window.removeEventListener("focus", m);
-        };
-      }
-    }, [S, p.isClosePausedRef]);
-    const u = n.useCallback(
-      ({ tabbingDirection: i }) => {
-        const f = v().map((m) => {
-          const w = m.ref.current, E = [w, ...Be(w)];
-          return i === "forwards" ? E : E.reverse();
-        });
-        return (i === "forwards" ? f.reverse() : f).flat();
-      },
-      [v]
-    );
-    return n.useEffect(() => {
-      const i = y.current;
-      if (i) {
-        const P = (f) => {
-          var E, C, I;
-          const m = f.altKey || f.ctrlKey || f.metaKey;
-          if (f.key === "Tab" && !m) {
-            const L = document.activeElement, F = f.shiftKey;
-            if (f.target === i && F) {
-              (E = s.current) == null || E.focus();
-              return;
-            }
-            const A = u({ tabbingDirection: F ? "backwards" : "forwards" }), V = A.findIndex((a) => a === L);
-            B(A.slice(V + 1)) ? f.preventDefault() : F ? (C = s.current) == null || C.focus() : (I = h.current) == null || I.focus();
-          }
-        };
-        return i.addEventListener("keydown", P), () => i.removeEventListener("keydown", P);
-      }
-    }, [v, u]), /* @__PURE__ */ G(
-      he,
-      {
-        ref: T,
-        role: "region",
-        "aria-label": c.replace("{hotkey}", g),
-        tabIndex: -1,
-        style: { pointerEvents: S ? void 0 : "none" },
-        children: [
-          S && /* @__PURE__ */ l(
-            z,
-            {
-              ref: s,
-              onFocusFromOutsideViewport: () => {
-                const i = u({
-                  tabbingDirection: "forwards"
-                });
-                B(i);
-              }
-            }
-          ),
-          /* @__PURE__ */ l(Q.Slot, { scope: r, children: /* @__PURE__ */ l(D.ol, { tabIndex: -1, ...d, ref: N }) }),
-          S && /* @__PURE__ */ l(
-            z,
-            {
-              ref: h,
-              onFocusFromOutsideViewport: () => {
-                const i = u({
-                  tabbingDirection: "backwards"
-                });
-                B(i);
-              }
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-ce.displayName = ie;
-var ue = "ToastFocusProxy", z = n.forwardRef(
-  (e, o) => {
-    const { __scopeToast: r, onFocusFromOutsideViewport: t, ...c } = e, d = X(ue, r);
-    return /* @__PURE__ */ l(
-      re,
-      {
-        tabIndex: 0,
-        ...c,
-        ref: o,
-        style: { position: "fixed" },
-        onFocus: (p) => {
-          var s;
-          const v = p.relatedTarget;
-          !((s = d.viewport) != null && s.contains(v)) && t();
-        }
-      }
-    );
-  }
-);
-z.displayName = ue;
-var k = "Toast", Le = "toast.swipeStart", Me = "toast.swipeMove", Oe = "toast.swipeCancel", ke = "toast.swipeEnd", le = n.forwardRef(
-  (e, o) => {
-    const { forceMount: r, open: t, defaultOpen: c, onOpenChange: d, ...p } = e, [v, T] = Ie({
-      prop: t,
-      defaultProp: c ?? !0,
-      onChange: d,
-      caller: k
-    });
-    return /* @__PURE__ */ l(ge, { present: r || v, children: /* @__PURE__ */ l(
-      He,
-      {
-        open: v,
-        ...p,
-        ref: o,
-        onClose: () => T(!1),
-        onPause: U(e.onPause),
-        onResume: U(e.onResume),
-        onSwipeStart: R(e.onSwipeStart, (s) => {
-          s.currentTarget.setAttribute("data-swipe", "start");
-        }),
-        onSwipeMove: R(e.onSwipeMove, (s) => {
-          const { x: h, y } = s.detail.delta;
-          s.currentTarget.setAttribute("data-swipe", "move"), s.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${h}px`), s.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
-        }),
-        onSwipeCancel: R(e.onSwipeCancel, (s) => {
-          s.currentTarget.setAttribute("data-swipe", "cancel"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), s.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), s.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
-        }),
-        onSwipeEnd: R(e.onSwipeEnd, (s) => {
-          const { x: h, y } = s.detail.delta;
-          s.currentTarget.setAttribute("data-swipe", "end"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), s.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), s.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${h}px`), s.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`), T(!1);
-        })
-      }
-    ) });
-  }
-);
-le.displayName = k;
-var [Ve, Ke] = se(k, {
-  onClose() {
-  }
-}), He = n.forwardRef(
-  (e, o) => {
-    const {
-      __scopeToast: r,
-      type: t = "foreground",
-      duration: c,
-      open: d,
-      onClose: p,
-      onEscapeKeyDown: v,
-      onPause: T,
-      onResume: s,
-      onSwipeStart: h,
-      onSwipeMove: y,
-      onSwipeCancel: N,
-      onSwipeEnd: g,
-      ...S
-    } = e, u = X(k, r), [i, P] = n.useState(null), f = oe(o, (a) => P(a)), m = n.useRef(null), w = n.useRef(null), E = c || u.duration, C = n.useRef(0), I = n.useRef(E), L = n.useRef(0), { onToastAdd: F, onToastRemove: Y } = u, _ = U(() => {
-      var x;
-      (i == null ? void 0 : i.contains(document.activeElement)) && ((x = u.viewport) == null || x.focus()), p();
-    }), A = n.useCallback(
-      (a) => {
-        !a || a === 1 / 0 || (window.clearTimeout(L.current), C.current = (/* @__PURE__ */ new Date()).getTime(), L.current = window.setTimeout(_, a));
-      },
-      [_]
-    );
-    n.useEffect(() => {
-      const a = u.viewport;
-      if (a) {
-        const x = () => {
-          A(I.current), s == null || s();
-        }, b = () => {
-          const M = (/* @__PURE__ */ new Date()).getTime() - C.current;
-          I.current = I.current - M, window.clearTimeout(L.current), T == null || T();
-        };
-        return a.addEventListener(j, b), a.addEventListener(q, x), () => {
-          a.removeEventListener(j, b), a.removeEventListener(q, x);
-        };
-      }
-    }, [u.viewport, E, T, s, A]), n.useEffect(() => {
-      d && !u.isClosePausedRef.current && A(E);
-    }, [d, E, u.isClosePausedRef, A]), n.useEffect(() => (F(), () => Y()), [F, Y]);
-    const V = n.useMemo(() => i ? we(i) : null, [i]);
-    return u.viewport ? /* @__PURE__ */ G(ne, { children: [
-      V && /* @__PURE__ */ l(
-        We,
-        {
-          __scopeToast: r,
-          role: "status",
-          "aria-live": t === "foreground" ? "assertive" : "polite",
-          children: V
-        }
-      ),
-      /* @__PURE__ */ l(Ve, { scope: r, onClose: _, children: Pe.createPortal(
-        /* @__PURE__ */ l(Q.ItemSlot, { scope: r, children: /* @__PURE__ */ l(
-          Re,
-          {
-            asChild: !0,
-            onEscapeKeyDown: R(v, () => {
-              u.isFocusedToastEscapeKeyDownRef.current || _(), u.isFocusedToastEscapeKeyDownRef.current = !1;
-            }),
-            children: /* @__PURE__ */ l(
-              D.li,
-              {
-                tabIndex: 0,
-                "data-state": d ? "open" : "closed",
-                "data-swipe-direction": u.swipeDirection,
-                ...S,
-                ref: f,
-                style: { userSelect: "none", touchAction: "none", ...e.style },
-                onKeyDown: R(e.onKeyDown, (a) => {
-                  a.key === "Escape" && (v == null || v(a.nativeEvent), a.nativeEvent.defaultPrevented || (u.isFocusedToastEscapeKeyDownRef.current = !0, _()));
-                }),
-                onPointerDown: R(e.onPointerDown, (a) => {
-                  a.button === 0 && (m.current = { x: a.clientX, y: a.clientY });
-                }),
-                onPointerMove: R(e.onPointerMove, (a) => {
-                  if (!m.current) return;
-                  const x = a.clientX - m.current.x, b = a.clientY - m.current.y, M = !!w.current, O = ["left", "right"].includes(u.swipeDirection), K = ["left", "up"].includes(u.swipeDirection) ? Math.min : Math.max, Ee = O ? K(0, x) : 0, ye = O ? 0 : K(0, b), $ = a.pointerType === "touch" ? 10 : 2, H = { x: Ee, y: ye }, ee = { originalEvent: a, delta: H };
-                  M ? (w.current = H, W(Me, y, ee, {
-                    discrete: !1
-                  })) : te(H, u.swipeDirection, $) ? (w.current = H, W(Le, h, ee, {
-                    discrete: !1
-                  }), a.target.setPointerCapture(a.pointerId)) : (Math.abs(x) > $ || Math.abs(b) > $) && (m.current = null);
-                }),
-                onPointerUp: R(e.onPointerUp, (a) => {
-                  const x = w.current, b = a.target;
-                  if (b.hasPointerCapture(a.pointerId) && b.releasePointerCapture(a.pointerId), w.current = null, m.current = null, x) {
-                    const M = a.currentTarget, O = { originalEvent: a, delta: x };
-                    te(x, u.swipeDirection, u.swipeThreshold) ? W(ke, g, O, {
-                      discrete: !0
-                    }) : W(
-                      Oe,
-                      N,
-                      O,
-                      {
-                        discrete: !0
-                      }
-                    ), M.addEventListener("click", (K) => K.preventDefault(), {
-                      once: !0
-                    });
-                  }
-                })
-              }
-            )
-          }
-        ) }),
-        u.viewport
-      ) })
-    ] }) : null;
-  }
-), We = (e) => {
-  const { __scopeToast: o, children: r, ...t } = e, c = X(k, o), [d, p] = n.useState(!1), [v, T] = n.useState(!1);
-  return Ye(() => p(!0)), n.useEffect(() => {
-    const s = window.setTimeout(() => T(!0), 1e3);
-    return () => window.clearTimeout(s);
-  }, []), v ? null : /* @__PURE__ */ l(be, { asChild: !0, children: /* @__PURE__ */ l(re, { ...t, children: d && /* @__PURE__ */ G(ne, { children: [
-    c.label,
-    " ",
-    r
-  ] }) }) });
-}, Ue = "ToastTitle", de = n.forwardRef(
-  (e, o) => {
-    const { __scopeToast: r, ...t } = e;
-    return /* @__PURE__ */ l(D.div, { ...t, ref: o });
-  }
-);
-de.displayName = Ue;
-var Xe = "ToastDescription", pe = n.forwardRef(
-  (e, o) => {
-    const { __scopeToast: r, ...t } = e;
-    return /* @__PURE__ */ l(D.div, { ...t, ref: o });
-  }
-);
-pe.displayName = Xe;
-var fe = "ToastAction", me = n.forwardRef(
-  (e, o) => {
-    const { altText: r, ...t } = e;
-    return r.trim() ? /* @__PURE__ */ l(Te, { altText: r, asChild: !0, children: /* @__PURE__ */ l(Z, { ...t, ref: o }) }) : (console.error(
-      `Invalid prop \`altText\` supplied to \`${fe}\`. Expected non-empty \`string\`.`
-    ), null);
-  }
-);
-me.displayName = fe;
-var ve = "ToastClose", Z = n.forwardRef(
-  (e, o) => {
-    const { __scopeToast: r, ...t } = e, c = Ke(ve, r);
-    return /* @__PURE__ */ l(Te, { asChild: !0, children: /* @__PURE__ */ l(
-      D.button,
-      {
-        type: "button",
-        ...t,
-        ref: o,
-        onClick: R(e.onClick, c.onClose)
-      }
-    ) });
-  }
-);
-Z.displayName = ve;
-var Te = n.forwardRef((e, o) => {
-  const { __scopeToast: r, altText: t, ...c } = e;
-  return /* @__PURE__ */ l(
-    D.div,
-    {
-      "data-radix-toast-announce-exclude": "",
-      "data-radix-toast-announce-alt": t || void 0,
-      ...c,
-      ref: o
-    }
-  );
-});
-function we(e) {
-  const o = [];
-  return Array.from(e.childNodes).forEach((t) => {
-    if (t.nodeType === t.TEXT_NODE && t.textContent && o.push(t.textContent), $e(t)) {
-      const c = t.ariaHidden || t.hidden || t.style.display === "none", d = t.dataset.radixToastAnnounceExclude === "";
-      if (!c)
-        if (d) {
-          const p = t.dataset.radixToastAnnounceAlt;
-          p && o.push(p);
-        } else
-          o.push(...we(t));
-    }
-  }), o;
-}
-function W(e, o, r, { discrete: t }) {
-  const c = r.originalEvent.currentTarget, d = new CustomEvent(e, { bubbles: !0, cancelable: !0, detail: r });
-  o && c.addEventListener(e, o, { once: !0 }), t ? Se(c, d) : c.dispatchEvent(d);
-}
-var te = (e, o, r = 0) => {
-  const t = Math.abs(e.x), c = Math.abs(e.y), d = t > c;
-  return o === "left" || o === "right" ? d && t > r : !d && c > r;
-};
-function Ye(e = () => {
-}) {
-  const o = U(e);
-  Ae(() => {
-    let r = 0, t = 0;
-    return r = window.requestAnimationFrame(() => t = window.requestAnimationFrame(o)), () => {
-      window.cancelAnimationFrame(r), window.cancelAnimationFrame(t);
-    };
-  }, [o]);
-}
-function $e(e) {
-  return e.nodeType === e.ELEMENT_NODE;
-}
-function Be(e) {
-  const o = [], r = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (t) => {
-      const c = t.tagName === "INPUT" && t.type === "hidden";
-      return t.disabled || t.hidden || c ? NodeFilter.FILTER_SKIP : t.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-    }
-  });
-  for (; r.nextNode(); ) o.push(r.currentNode);
-  return o;
-}
-function B(e) {
-  const o = document.activeElement;
-  return e.some((r) => r === o ? !0 : (r.focus(), document.activeElement !== o));
-}
-var at = ae, it = ce, ct = le, ut = de, lt = pe, dt = me, pt = Z;
-export {
-  dt as Action,
-  pt as Close,
-  lt as Description,
-  at as Provider,
-  ct as Root,
-  ut as Title,
-  le as Toast,
-  me as ToastAction,
-  Z as ToastClose,
-  pe as ToastDescription,
-  ae as ToastProvider,
-  de as ToastTitle,
-  ce as ToastViewport,
-  it as Viewport
-};