@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/knowledge-check/knowledge-check.js

@@ -0,0 +1,448 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { CheckCircle2, RotateCcw, XCircle } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+const DEFAULT_LABELS = {
+  back: "Back",
+  check: "Check",
+  correct: "Correct",
+  falseOption: "False",
+  incorrect: "Try again",
+  next: "Next",
+  outOf: "of",
+  retry: "Retry",
+  scored: "You scored",
+  trueOption: "True"
+};
+function compareFillBlank(question, response) {
+  const normalize = (value) => question.caseSensitive ? value.trim() : value.trim().toLowerCase();
+  return normalize(response) === normalize(question.answer);
+}
+function isMultipleChoiceCorrect(question, value) {
+  return question.options.some(
+    (option) => option.value === value && option.correct === true
+  );
+}
+function evaluateAnswer(question, response) {
+  switch (question.type) {
+    case "fill-blank":
+      return typeof response === "string" && compareFillBlank(question, response);
+    case "multiple-choice":
+      return typeof response === "string" && isMultipleChoiceCorrect(question, response);
+    case "true-false":
+      return typeof response === "boolean" && response === question.answer;
+  }
+}
+function useKnowledgeCheckController(options) {
+  const { onAnswer, onComplete, questions } = options;
+  const [index, setIndex] = useState(0);
+  const [responses, setResponses] = useState({});
+  const [answers, setAnswers] = useState({});
+  const [completed, setCompleted] = useState(false);
+  const setResponse = useCallback(
+    (questionId, value) => {
+      setResponses((current2) => ({ ...current2, [questionId]: value }));
+    },
+    []
+  );
+  const handleSubmit = useCallback(() => {
+    const question = questions[index];
+    if (!question) return;
+    const response = responses[question.id];
+    if (response === void 0) return;
+    const answer = {
+      correct: evaluateAnswer(question, response),
+      questionId: question.id,
+      response
+    };
+    setAnswers((current2) => ({ ...current2, [question.id]: answer }));
+    onAnswer?.(answer);
+  }, [index, onAnswer, questions, responses]);
+  const handleNext = useCallback(() => {
+    if (index >= questions.length - 1) {
+      const finalScore = computeScore(questions, answers);
+      setCompleted(true);
+      onComplete?.(finalScore);
+      return;
+    }
+    setIndex((value) => value + 1);
+  }, [answers, index, onComplete, questions]);
+  const handlePrevious = useCallback(() => {
+    setIndex((value) => Math.max(0, value - 1));
+  }, []);
+  const handleReset = useCallback(() => {
+    setIndex(0);
+    setResponses({});
+    setAnswers({});
+    setCompleted(false);
+  }, []);
+  const score = useMemo(
+    () => completed ? computeScore(questions, answers) : void 0,
+    [answers, completed, questions]
+  );
+  const current = questions[index] ?? questions[0];
+  if (!current) {
+    throw new Error("KnowledgeCheck requires at least one question");
+  }
+  return {
+    answers,
+    current,
+    handleNext,
+    handlePrevious,
+    handleReset,
+    handleSubmit,
+    index,
+    isComplete: completed,
+    isFirst: index === 0,
+    isLast: index === questions.length - 1,
+    responses,
+    score,
+    setResponse
+  };
+}
+function computeScore(questions, answers) {
+  const correct = Object.values(answers).filter(
+    (entry) => entry.correct
+  ).length;
+  return { answers, correct, total: questions.length };
+}
+function Feedback({
+  answer,
+  correctLabel,
+  explanation,
+  incorrectLabel
+}) {
+  if (!answer) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "flex items-start gap-2 rounded-md border p-3 text-sm",
+        answer.correct ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200" : "border-destructive/40 bg-destructive/10 text-destructive"
+      ),
+      role: "status",
+      children: [
+        answer.correct ? /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: answer.correct ? correctLabel : incorrectLabel }),
+          explanation ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: explanation }) : null
+        ] })
+      ]
+    }
+  );
+}
+function MultipleChoiceOption({
+  groupName,
+  onChange,
+  option,
+  value
+}) {
+  const id = `${groupName}-${option.value}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm hover:bg-accent", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        checked: value === option.value,
+        className: "size-4",
+        id,
+        name: groupName,
+        onChange,
+        type: "radio",
+        value: option.value
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { className: "flex-1 cursor-pointer", htmlFor: id, children: option.label })
+  ] });
+}
+function MultipleChoiceField({
+  groupName,
+  onChange,
+  options,
+  value
+}) {
+  const handleSelect = useCallback(
+    (event) => {
+      onChange(event.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", role: "radiogroup", children: options.map((option) => /* @__PURE__ */ jsx(
+    MultipleChoiceOption,
+    {
+      groupName,
+      onChange: handleSelect,
+      option,
+      value
+    },
+    option.value
+  )) });
+}
+function TrueFalseField({
+  falseLabel,
+  groupName,
+  onChange,
+  trueLabel,
+  value
+}) {
+  const handleSelectTrue = useCallback(() => {
+    onChange(true);
+  }, [onChange]);
+  const handleSelectFalse = useCallback(() => {
+    onChange(false);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": groupName,
+      className: "flex flex-wrap gap-2",
+      role: "radiogroup",
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-pressed": value === true,
+            onClick: handleSelectTrue,
+            size: "sm",
+            type: "button",
+            variant: value === true ? "default" : "outline",
+            children: trueLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-pressed": value === false,
+            onClick: handleSelectFalse,
+            size: "sm",
+            type: "button",
+            variant: value === false ? "default" : "outline",
+            children: falseLabel
+          }
+        )
+      ]
+    }
+  );
+}
+function FillBlankField({
+  inputId,
+  onChange,
+  value
+}) {
+  const handleChange = useCallback(
+    (event) => {
+      onChange(event.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(Input, { id: inputId, onChange: handleChange, value });
+}
+function QuestionField({
+  groupName,
+  inputId,
+  labels,
+  onResponse,
+  question,
+  response
+}) {
+  switch (question.type) {
+    case "fill-blank":
+      return /* @__PURE__ */ jsx(
+        FillBlankField,
+        {
+          inputId,
+          onChange: onResponse,
+          value: typeof response === "string" ? response : ""
+        }
+      );
+    case "multiple-choice":
+      return /* @__PURE__ */ jsx(
+        MultipleChoiceField,
+        {
+          groupName,
+          onChange: onResponse,
+          options: question.options,
+          value: typeof response === "string" ? response : void 0
+        }
+      );
+    case "true-false":
+      return /* @__PURE__ */ jsx(
+        TrueFalseField,
+        {
+          falseLabel: labels.falseOption,
+          groupName,
+          onChange: onResponse,
+          trueLabel: labels.trueOption,
+          value: typeof response === "boolean" ? response : void 0
+        }
+      );
+  }
+}
+function ScoreSummary({
+  labels,
+  onRetry,
+  score
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.scored }),
+    /* @__PURE__ */ jsxs("p", { className: "text-3xl font-bold tracking-tight text-foreground", children: [
+      score.correct,
+      " ",
+      labels.outOf,
+      " ",
+      score.total
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { onClick: onRetry, size: "sm", type: "button", variant: "outline", children: [
+      /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true", className: "mr-2 size-4" }),
+      labels.retry
+    ] })
+  ] });
+}
+function QuestionPane({
+  controller,
+  groupName,
+  inputId,
+  labels,
+  questions
+}) {
+  const question = controller.current;
+  const response = controller.responses[question.id];
+  const answer = controller.answers[question.id];
+  const handleResponse = useCallback(
+    (value) => {
+      controller.setResponse(question.id, value);
+    },
+    [controller, question.id]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: `${(controller.index + 1).toString()} ${labels.outOf} ${questions.length.toString()}` }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: question.question }),
+    /* @__PURE__ */ jsx(
+      QuestionField,
+      {
+        groupName,
+        inputId,
+        labels,
+        onResponse: handleResponse,
+        question,
+        response
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Feedback,
+      {
+        answer,
+        correctLabel: labels.correct,
+        explanation: question.explanation,
+        incorrectLabel: labels.incorrect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PaneActions,
+      {
+        answered: answer !== void 0,
+        controller,
+        labels,
+        responseSet: response !== void 0
+      }
+    )
+  ] });
+}
+function PaneActions({
+  answered,
+  controller,
+  labels,
+  responseSet
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 pt-1", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: controller.isFirst,
+        onClick: controller.handlePrevious,
+        size: "sm",
+        type: "button",
+        variant: "ghost",
+        children: labels.back
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: answered ? /* @__PURE__ */ jsx(Button, { onClick: controller.handleNext, size: "sm", type: "button", children: controller.isLast ? labels.scored : labels.next }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: !responseSet,
+        onClick: controller.handleSubmit,
+        size: "sm",
+        type: "button",
+        children: labels.check
+      }
+    ) })
+  ] });
+}
+const KnowledgeCheck = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      onAnswer,
+      onComplete,
+      questions,
+      title,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const groupName = useId();
+    const inputId = useId();
+    const controller = useKnowledgeCheckController({
+      onAnswer,
+      onComplete,
+      questions
+    });
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight text-foreground", children: title }) : null,
+          controller.isComplete && controller.score ? /* @__PURE__ */ jsx(
+            ScoreSummary,
+            {
+              labels: resolvedLabels,
+              onRetry: controller.handleReset,
+              score: controller.score
+            }
+          ) : /* @__PURE__ */ jsx(
+            QuestionPane,
+            {
+              controller,
+              groupName,
+              inputId,
+              labels: resolvedLabels,
+              questions
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+KnowledgeCheck.displayName = "KnowledgeCheck";
+export {
+  KnowledgeCheck
+};

package/dist/components/learning-objectives/learning-objectives.js

@@ -9,18 +9,18 @@ function LearningObjectives({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-gradient-to-br from-primary/5 to-primary/10 p-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Target, { className: "h-5 w-5 text-primary" }),
+        /* @__PURE__ */ jsx(Target, { className: "size-5 text-primary" }),
         /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title })
       ] }),
       estimatedTime ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(Clock, { className: "size-4" }),
         /* @__PURE__ */ jsx("span", { children: estimatedTime })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: objectives.map((objective, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-primary flex-shrink-0 mt-0.5" }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: objectives.map((objective) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-primary flex-shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: objective })
-    ] }, index)) })
+    ] }, objective)) })
   ] });
 }
 function Prerequisites({
@@ -31,12 +31,12 @@ function Prerequisites({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-muted/30 p-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(GraduationCap, { className: "h-5 w-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(GraduationCap, { className: "size-5 text-muted-foreground" }),
         /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title })
       ] }),
       level ? /* @__PURE__ */ jsx("span", { className: "text-xs font-medium px-2 py-1 rounded-full bg-primary/10 text-primary capitalize", children: level }) : null
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: items.map((item) => /* @__PURE__ */ jsxs(
       "li",
       {
         className: "flex items-start gap-2 text-sm text-muted-foreground",
@@ -45,7 +45,7 @@ function Prerequisites({
           item
         ]
       },
-      index
+      item
     )) })
   ] });
 }
@@ -56,16 +56,16 @@ function Summary({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-muted/30 p-6", children: [
     /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-foreground mb-3 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(GraduationCap, { className: "h-5 w-5" }),
+      /* @__PURE__ */ jsx(GraduationCap, { className: "size-5" }),
       title
     ] }),
     /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-2", children }),
     keyTakeaways && keyTakeaways.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [
       /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2", children: "Key Takeaways" }),
-      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: keyTakeaways.map((takeaway, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: keyTakeaways.map((takeaway) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-green-500 flex-shrink-0 mt-0.5" }),
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: takeaway })
-      ] }, index)) })
+      ] }, takeaway)) })
     ] }) : null
   ] });
 }

package/dist/components/left-rail/index.js

@@ -0,0 +1,4 @@
+import { LeftRail } from "./left-rail";
+export {
+  LeftRail
+};

package/dist/components/left-rail/left-rail.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const LeftRail = forwardRef(
+  ({ children, className, footer, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 flex-col items-center gap-2", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col items-center gap-2", children: footer }) : null
+      ]
+    }
+  )
+);
+LeftRail.displayName = "LeftRail";
+export {
+  LeftRail
+};

package/dist/components/live-cursor/index.js

@@ -0,0 +1,6 @@
+import {
+  LiveCursor
+} from "./live-cursor";
+export {
+  LiveCursor
+};

package/dist/components/live-cursor/live-cursor.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Live cursor"
+};
+const LiveCursor = forwardRef(
+  (props, ref) => {
+    const { className, color, labels, name, status, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const resolvedColor = color ?? "var(--foreground)";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-30 flex items-start gap-1",
+          className
+        ),
+        "data-live-cursor": true,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "-ml-1 -mt-1 drop-shadow-sm",
+              "data-live-cursor-pointer": true,
+              fill: resolvedColor,
+              height: 18,
+              viewBox: "0 0 16 18",
+              width: 16,
+              children: /* @__PURE__ */ jsx("path", { d: "M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" })
+            }
+          ),
+          name === null || name === void 0 ? null : /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+              "data-live-cursor-chip": true,
+              style: { backgroundColor: resolvedColor },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: name }),
+                status ? /* @__PURE__ */ jsx("span", { className: "text-[9px] opacity-80", "data-live-cursor-status": true, children: status }) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LiveCursor.displayName = "LiveCursor";
+export {
+  LiveCursor
+};

package/dist/components/live-feed/live-feed.js

@@ -60,18 +60,20 @@ function formatRelative(eventDate, now) {
   if (deltaMs < 7 * DAY_MS) {
     return `${Math.floor(deltaMs / DAY_MS)}d ago`;
   }
-  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    month: "short"
-  }).format(eventDate);
+  return SHORT_DATE_FORMATTER.format(eventDate);
 }
+const SHORT_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "short"
+});
+const ABSOLUTE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  hour: "numeric",
+  minute: "2-digit",
+  month: "short",
+  second: "2-digit"
+});
 function formatAbsolute(eventDate) {
-  return new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    second: "2-digit"
-  }).format(eventDate);
+  return ABSOLUTE_FORMATTER.format(eventDate);
 }
 function sortEventsDesc(events) {
   return [...events].sort(
@@ -139,10 +141,10 @@ const LiveFeed = React.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              className: "relative mr-1.5 inline-flex h-2 w-2",
+              className: "relative mr-1.5 inline-flex size-2",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 animate-ping rounded-full bg-emerald-500 opacity-70" }),
-                /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })
+                /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-2 animate-ping rounded-full bg-emerald-500 opacity-70" }),
+                /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-emerald-500" })
               ]
             }
           ),

package/dist/components/map-2d/index.js

@@ -0,0 +1,20 @@
+import {
+  Map2D,
+  MapControls,
+  MapLayer,
+  MapMarker,
+  MapMarkerIcon,
+  MapPopup,
+  MapZoomIn,
+  MapZoomOut
+} from "./map-2d";
+export {
+  Map2D,
+  MapControls,
+  MapLayer,
+  MapMarker,
+  MapMarkerIcon,
+  MapPopup,
+  MapZoomIn,
+  MapZoomOut
+};