@100mslive/roomkit-react 0.3.22-alpha.1 → 0.3.22-alpha.2

package/dist/Polls-AULCHMLW.js

@@ -0,0 +1,1584 @@
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogDropdownTrigger,
+  Input,
+  Label,
+  Loading,
+  Progress,
+  RadioGroup,
+  Switch,
+  TextArea,
+  getFormattedTime,
+  useDropdownSelection,
+  usePollViewToggle,
+  useSidepaneToggle
+} from "./chunk-4BQ3AMVG.js";
+import {
+  Text
+} from "./chunk-BXBPZGSP.js";
+import {
+  Dropdown
+} from "./chunk-USEEH3QW.js";
+import {
+  Box,
+  Flex
+} from "./chunk-4L5OKEIV.js";
+import {
+  IconButton,
+  IconButton_default,
+  Tooltip,
+  checkCorrectAnswer,
+  getIndexToShow,
+  getPeerResponses,
+  isValidTextInput,
+  slideLeftAndFade,
+  usePollViewState
+} from "./chunk-6BX3VCVC.js";
+import {
+  POLL_STATE,
+  POLL_VIEWS,
+  QUESTION_TYPE_TITLE,
+  __async,
+  __spreadProps,
+  __spreadValues,
+  init_define_process_env
+} from "./chunk-YDIB6WKJ.js";
+
+// src/Prebuilt/components/Polls/Polls.tsx
+init_define_process_env();
+import React22 from "react";
+
+// src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx
+init_define_process_env();
+import React3, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  selectLocalPeerRoleName,
+  selectPermissions as selectPermissions2,
+  selectPolls,
+  useHMSActions,
+  useHMSStore as useHMSStore2
+} from "@100mslive/react-sdk";
+import { QuestionIcon, StatsIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Streaming/Common.jsx
+init_define_process_env();
+import React from "react";
+import { selectPermissions, useHMSStore } from "@100mslive/react-sdk";
+import { ChevronLeftIcon, ChevronRightIcon, CrossIcon, RecordIcon } from "@100mslive/react-icons";
+var ContentHeader = ({ onBack, onClose, title = "", content }) => {
+  return /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      css: { w: "100%", py: "$8", px: "$10", cursor: "pointer", borderBottom: "1px solid $border_bright", mb: "$8" }
+    },
+    onBack ? /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        align: "center",
+        css: {
+          mr: "$8",
+          color: "$on_surface_high"
+        },
+        onClick: onBack,
+        "data-testid": "go_back"
+      },
+      /* @__PURE__ */ React.createElement(ChevronLeftIcon, null)
+    ) : null,
+    /* @__PURE__ */ React.createElement(Box, { css: { flex: "1 1 0", display: "flex", alignItems: "center" } }, title ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        variant: "tiny",
+        css: {
+          textTransform: "uppercase",
+          fontWeight: "$semiBold",
+          color: "$on_surface_medium"
+        }
+      },
+      title
+    ) : null, /* @__PURE__ */ React.createElement(Text, { variant: "h6" }, content)),
+    onClose ? /* @__PURE__ */ React.createElement(IconButton, { onClick: onClose, css: { alignSelf: "flex-start" }, "data-testid": "close_stream_section" }, /* @__PURE__ */ React.createElement(CrossIcon, null)) : null
+  );
+};
+var Container = ({ children, rounded = false }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      css: {
+        size: "100%",
+        zIndex: 2,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bg: "$surface_dim",
+        transform: "translateX(10%)",
+        animation: `${slideLeftAndFade("10%")} 100ms ease-out forwards`,
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: rounded ? "$2" : "0"
+      }
+    },
+    children
+  );
+};
+var ErrorText = ({ error }) => {
+  if (!error) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Text, { variant: "sm", css: { my: "$4", color: "$alert_error_default" } }, error);
+};
+
+// src/Prebuilt/components/Polls/common/StatusIndicator.tsx
+init_define_process_env();
+import React2 from "react";
+var statusMap = {
+  created: "DRAFT" /* DRAFT */,
+  started: "LIVE" /* LIVE */,
+  stopped: "ENDED" /* ENDED */
+};
+var StatusIndicator = ({ status }) => {
+  if (!status)
+    return null;
+  return /* @__PURE__ */ React2.createElement(Flex, { align: "center" }, /* @__PURE__ */ React2.createElement(
+    Flex,
+    {
+      css: {
+        backgroundColor: statusMap[status] === "LIVE" /* LIVE */ ? "$alert_error_default" : "$secondary_default",
+        p: "$2 $4",
+        borderRadius: "$0"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      Text,
+      {
+        variant: "caption",
+        css: {
+          fontWeight: "$semiBold",
+          color: "$on_primary_high"
+        }
+      },
+      statusMap[status]
+    )
+  ));
+};
+
+// src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx
+var PollsQuizMenu = () => {
+  const togglePollView = usePollViewToggle();
+  const permissions = useHMSStore2(selectPermissions2);
+  return /* @__PURE__ */ React3.createElement(Container, { rounded: true }, /* @__PURE__ */ React3.createElement(ContentHeader, { content: "Polls and Quizzes", onClose: togglePollView }), /* @__PURE__ */ React3.createElement(Flex, { direction: "column", css: { px: "$10", pb: "$10", overflowY: "auto" } }, (permissions == null ? void 0 : permissions.pollWrite) && /* @__PURE__ */ React3.createElement(AddMenu, null), /* @__PURE__ */ React3.createElement(PrevMenu, null)));
+};
+function InteractionSelectionCard({
+  title,
+  icon,
+  active,
+  onClick
+}) {
+  const activeBorderStyle = active ? "$space$px solid $primary_default" : "$space$px solid $border_bright";
+  return /* @__PURE__ */ React3.createElement(
+    Flex,
+    {
+      onClick,
+      css: {
+        border: activeBorderStyle,
+        p: "$4",
+        r: "$2",
+        w: "100%",
+        cursor: "pointer"
+      },
+      align: "center"
+    },
+    /* @__PURE__ */ React3.createElement(
+      Flex,
+      {
+        css: {
+          border: activeBorderStyle,
+          p: "$4",
+          bg: "$surface_bright",
+          c: "$on_surface_high",
+          r: "$0"
+        }
+      },
+      icon
+    ),
+    /* @__PURE__ */ React3.createElement(Text, { variant: "sub1", css: { ml: "$md" } }, title)
+  );
+}
+var AddMenu = () => {
+  const actions = useHMSActions();
+  const [title, setTitle] = useState("");
+  const localPeerRoleName = useHMSStore2(selectLocalPeerRoleName);
+  const [hideVoteCount, setHideVoteCount] = useState(false);
+  const [error, setError] = useState();
+  const [titleError, setTitleError] = useState("");
+  const { setPollState } = usePollViewState();
+  const [interactionType, setInteractionType] = useState("Poll" /* POLL */);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [interactionType]);
+  const handleCreate = (id) => {
+    setPollState({
+      [POLL_STATE.pollInView]: id,
+      [POLL_STATE.view]: POLL_VIEWS.CREATE_QUESTIONS
+    });
+  };
+  const validateTitle = useMemo(() => {
+    if (!isValidTextInput(title)) {
+      if (title) {
+        setTitleError("The title should have between 2-100 characters");
+      }
+      return true;
+    } else {
+      setTitleError("");
+      return false;
+    }
+  }, [title]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Text, { variant: "caption", css: { c: "$on_surface_medium", mb: "$md" } }, "Select the type you want to continue with"), /* @__PURE__ */ React3.createElement(Flex, { css: { w: "100%", gap: "$10", mb: "$md" } }, /* @__PURE__ */ React3.createElement(
+    InteractionSelectionCard,
+    {
+      title: "Poll" /* POLL */,
+      icon: /* @__PURE__ */ React3.createElement(StatsIcon, { width: 32, height: 32 }),
+      onClick: () => setInteractionType("Poll" /* POLL */),
+      active: interactionType === "Poll" /* POLL */
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    InteractionSelectionCard,
+    {
+      title: "Quiz" /* QUIZ */,
+      icon: /* @__PURE__ */ React3.createElement(QuestionIcon, { width: 32, height: 32 }),
+      onClick: () => setInteractionType("Quiz" /* QUIZ */),
+      active: interactionType === "Quiz" /* QUIZ */
+    }
+  )), /* @__PURE__ */ React3.createElement(Flex, { direction: "column", css: { mb: "$10" } }, /* @__PURE__ */ React3.createElement(Text, { variant: "body2", css: { mb: "$4" } }, `Name this ${interactionType.toLowerCase()}`), /* @__PURE__ */ React3.createElement(
+    Input,
+    {
+      ref: inputRef,
+      type: "text",
+      placeholder: "Enter a name to continue",
+      value: title,
+      onChange: (event) => setTitle(event.target.value.trimStart()),
+      css: {
+        backgroundColor: "$surface_bright",
+        border: "1px solid $border_default"
+      }
+    }
+  ), /* @__PURE__ */ React3.createElement(Flex, { align: "center", css: { mt: "$10" } }, /* @__PURE__ */ React3.createElement(Switch, { onCheckedChange: (value) => setHideVoteCount(value), css: { mr: "$6" } }), /* @__PURE__ */ React3.createElement(Text, { variant: "body2", css: { c: "$on_surface_medium" } }, "Hide Vote Count")), /* @__PURE__ */ React3.createElement(
+    Button,
+    {
+      variant: "primary",
+      disabled: validateTitle,
+      css: { mt: "$10" },
+      onClick: () => __async(void 0, null, function* () {
+        const id = Date.now().toString();
+        yield actions.interactivityCenter.createPoll({
+          id,
+          title,
+          anonymous: false,
+          rolesThatCanViewResponses: hideVoteCount && localPeerRoleName ? [localPeerRoleName] : void 0,
+          // @ts-ignore
+          type: interactionType.toLowerCase()
+        }).then(() => handleCreate(id)).catch((err) => setError(err.message));
+      })
+    },
+    "Create ",
+    interactionType
+  ), /* @__PURE__ */ React3.createElement(ErrorText, { error: error || titleError })));
+};
+var PrevMenu = () => {
+  const hmsActions = useHMSActions();
+  const polls = useHMSStore2(selectPolls);
+  const sortedPolls = useMemo(
+    () => {
+      var _a;
+      return (_a = polls == null ? void 0 : polls.sort((a, b) => {
+        var _a2, _b, _c, _d;
+        return (((_b = (_a2 = b == null ? void 0 : b.createdAt) == null ? void 0 : _a2.getTime) == null ? void 0 : _b.call(_a2)) || 0) - (((_d = (_c = a == null ? void 0 : a.createdAt) == null ? void 0 : _c.getTime) == null ? void 0 : _d.call(_c)) || 0);
+      })) == null ? void 0 : _a.sort((a, b) => ((b == null ? void 0 : b.state) === "started" ? 1 : 0) - ((a == null ? void 0 : a.state) === "started" ? 1 : 0));
+    },
+    [polls]
+  );
+  const permissions = useHMSStore2(selectPermissions2);
+  useEffect(() => {
+    const updatePolls = () => __async(void 0, null, function* () {
+      yield hmsActions.interactivityCenter.getPolls();
+    });
+    updatePolls();
+  }, [hmsActions.interactivityCenter]);
+  return (polls == null ? void 0 : polls.length) ? /* @__PURE__ */ React3.createElement(
+    Flex,
+    {
+      direction: "column",
+      css: __spreadValues({
+        width: "100%"
+      }, (permissions == null ? void 0 : permissions.pollWrite) ? { borderTop: "$space$px solid $border_bright", paddingTop: "$10" } : {})
+    },
+    /* @__PURE__ */ React3.createElement(Text, { variant: "h6", css: { c: "$on_surface_high" } }, "Previous Polls and Quizzes"),
+    /* @__PURE__ */ React3.createElement(Flex, { direction: "column", css: { gap: "$10", mt: "$8" } }, sortedPolls == null ? void 0 : sortedPolls.map((poll) => /* @__PURE__ */ React3.createElement(InteractionCard, { key: poll.id, id: poll.id, title: poll.title, status: poll.state })))
+  ) : null;
+};
+var InteractionCard = ({ id, title, status }) => {
+  const { setPollState } = usePollViewState();
+  return /* @__PURE__ */ React3.createElement(Flex, { direction: "column", css: { backgroundColor: "$surface_bright", borderRadius: "$1", p: "$8" } }, /* @__PURE__ */ React3.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", mb: "$sm" } }, /* @__PURE__ */ React3.createElement(Text, { variant: "sub1", css: { c: "$on_surface_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React3.createElement(StatusIndicator, { status })), /* @__PURE__ */ React3.createElement(Flex, { css: { w: "100%", gap: "$4" }, justify: "end" }, /* @__PURE__ */ React3.createElement(
+    Button,
+    {
+      variant: "primary",
+      onClick: () => setPollState({
+        [POLL_STATE.pollInView]: id,
+        [POLL_STATE.view]: status === "created" ? POLL_VIEWS.CREATE_QUESTIONS : POLL_VIEWS.VOTE
+      })
+    },
+    "View"
+  )));
+};
+
+// src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx
+init_define_process_env();
+import React13, { useMemo as useMemo3, useState as useState3 } from "react";
+import { v4 as uuid } from "uuid";
+import { selectPollByID, useHMSActions as useHMSActions2, useHMSStore as useHMSStore3, useRecordingStreaming } from "@100mslive/react-sdk";
+import { AddCircleIcon as AddCircleIcon2 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx
+init_define_process_env();
+import React11, { useCallback, useRef as useRef2, useState as useState2 } from "react";
+import { AddCircleIcon, TrashIcon as TrashIcon2 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.tsx
+init_define_process_env();
+import React4 from "react";
+import { AlertTriangleIcon, CrossIcon as CrossIcon2 } from "@100mslive/react-icons";
+var DeleteQuestionModal = ({
+  open,
+  setOpen,
+  removeQuestion
+}) => {
+  return /* @__PURE__ */ React4.createElement(Dialog.Root, { open }, /* @__PURE__ */ React4.createElement(Dialog.Overlay, null), /* @__PURE__ */ React4.createElement(Dialog.Portal, null, /* @__PURE__ */ React4.createElement(Dialog.Content, { css: { p: "$10" } }, /* @__PURE__ */ React4.createElement(Box, null, /* @__PURE__ */ React4.createElement(
+    Flex,
+    {
+      css: {
+        color: "$alert_error_default",
+        display: "flex",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React4.createElement(AlertTriangleIcon, { style: { marginRight: "0.5rem" } }),
+    /* @__PURE__ */ React4.createElement(Text, { variant: "lg", css: { color: "inherit", fontWeight: "$semiBold" } }, "Delete Question?"),
+    /* @__PURE__ */ React4.createElement(
+      Box,
+      {
+        css: {
+          ml: "auto",
+          color: "$on_surface_medium",
+          "&:hover": { color: "$on_surface_high", cursor: "pointer" }
+        },
+        onClick: () => setOpen(false)
+      },
+      /* @__PURE__ */ React4.createElement(CrossIcon2, null)
+    )
+  ), /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mb: "$8", mt: "$4" } }, "The question will be deleted. You can't undo this action."), /* @__PURE__ */ React4.createElement(Flex, { css: { w: "100%", mt: "$12", gap: "$md" } }, /* @__PURE__ */ React4.createElement(
+    Button,
+    {
+      variant: "standard",
+      outlined: true,
+      onClick: () => setOpen(false),
+      css: { w: "100%", fontSize: "$md", fontWeight: "$semiBold" }
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React4.createElement(
+    Button,
+    {
+      css: { w: "100%", fontSize: "$md", fontWeight: "$semiBold" },
+      variant: "danger",
+      onClick: () => {
+        removeQuestion();
+        setOpen(false);
+      }
+    },
+    "Delete"
+  ))))));
+};
+
+// src/Prebuilt/components/Polls/common/Line.tsx
+init_define_process_env();
+import React5 from "react";
+var Line = () => /* @__PURE__ */ React5.createElement(Flex, { css: { w: "100%", borderBottom: "1px solid $border_bright", h: "1px", my: "$8" } });
+
+// src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx
+init_define_process_env();
+import React9 from "react";
+import { CheckCircleIcon, CheckIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx
+init_define_process_env();
+import React6 from "react";
+import { TrashIcon } from "@100mslive/react-icons";
+var OptionInputWithDelete = ({
+  index,
+  option,
+  handleOptionTextChange,
+  removeOption
+}) => {
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    Input,
+    {
+      placeholder: `Option ${index + 1}`,
+      css: {
+        w: "100%",
+        backgroundColor: "$surface_bright",
+        border: "1px solid $border_bright"
+      },
+      value: (option == null ? void 0 : option.text) || "",
+      key: index,
+      onChange: (event) => handleOptionTextChange(index, event.target.value.trimStart()),
+      maxLength: 250
+    }
+  ), /* @__PURE__ */ React6.createElement(IconButton_default, { onClick: () => removeOption(index), css: { bg: "transparent", border: "none" } }, /* @__PURE__ */ React6.createElement(TrashIcon, null)));
+};
+
+// src/Prebuilt/components/Polls/common/VoteCount.tsx
+init_define_process_env();
+import React7 from "react";
+var VoteCount = ({ voteCount }) => {
+  return /* @__PURE__ */ React7.createElement(Flex, { css: { alignItems: "center" } }, voteCount ? /* @__PURE__ */ React7.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, voteCount, "\xA0", voteCount === 1 ? "vote" : "votes") : null);
+};
+
+// src/Prebuilt/components/Polls/common/VoteProgress.tsx
+init_define_process_env();
+import React8 from "react";
+var VoteProgress = ({ option, totalResponses }) => {
+  const showProgress = typeof option.voteCount === "number" && typeof totalResponses === "number" && totalResponses > 0;
+  const progressValue = 100 * (option.voteCount || 0) / totalResponses;
+  return showProgress ? /* @__PURE__ */ React8.createElement(Progress.Root, { value: progressValue, css: { mt: "$4" } }, /* @__PURE__ */ React8.createElement(
+    Progress.Content,
+    {
+      style: {
+        transform: `translateX(-${100 - progressValue}%)`
+      }
+    }
+  )) : null;
+};
+
+// src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx
+var MultipleChoiceOptions = ({
+  questionIndex,
+  options,
+  canRespond,
+  totalResponses,
+  selectedOptions,
+  setSelectedOptions,
+  showVoteCount,
+  isQuiz,
+  correctOptionIndexes,
+  localPeerResponse,
+  isStopped
+}) => {
+  const handleCheckedChange = (checked, index) => {
+    const newSelected = new Set(selectedOptions);
+    if (checked) {
+      newSelected.add(index);
+    } else {
+      newSelected.delete(index);
+    }
+    setSelectedOptions(newSelected);
+  };
+  return /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { gap: "$md", w: "100%", mb: "$md" } }, options.map((option) => {
+    var _a;
+    return /* @__PURE__ */ React9.createElement(Flex, { align: "center", key: `${questionIndex}-${option.index}`, css: { w: "100%", gap: "$4" } }, !isStopped || !isQuiz ? /* @__PURE__ */ React9.createElement(
+      Checkbox.Root,
+      {
+        id: `${questionIndex}-${option.index}`,
+        disabled: !canRespond,
+        checked: (_a = localPeerResponse == null ? void 0 : localPeerResponse.options) == null ? void 0 : _a.includes(option.index),
+        onCheckedChange: (checked) => handleCheckedChange(checked, option.index),
+        css: {
+          cursor: canRespond ? "pointer" : "not-allowed",
+          flexShrink: 0
+        }
+      },
+      /* @__PURE__ */ React9.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React9.createElement(CheckIcon, { width: 16, height: 16 }))
+    ) : null, isStopped && (correctOptionIndexes == null ? void 0 : correctOptionIndexes.includes(option.index)) ? /* @__PURE__ */ React9.createElement(Flex, { align: "center", css: { color: "$on_surface_high" } }, /* @__PURE__ */ React9.createElement(CheckCircleIcon, { height: 20, width: 20 })) : null, /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React9.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ React9.createElement(Text, { css: { display: "flex", flexGrow: "1" } }, /* @__PURE__ */ React9.createElement(Label, { htmlFor: `${questionIndex}-${option.index}` }, option.text)), showVoteCount && /* @__PURE__ */ React9.createElement(VoteCount, { voteCount: option.voteCount })), showVoteCount && /* @__PURE__ */ React9.createElement(VoteProgress, { option, totalResponses })), isStopped && isQuiz && (localPeerResponse == null ? void 0 : localPeerResponse.options.includes(option.index)) ? /* @__PURE__ */ React9.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", maxWidth: "max-content" } }, "Your Answer") : null);
+  }));
+};
+var MultipleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handleOptionTextChange, removeOption }) => {
+  return /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { gap: "$md", w: "100%", mb: "$md" } }, options.map((option, index) => {
+    return /* @__PURE__ */ React9.createElement(Flex, { align: "center", key: index, css: { w: "100%", gap: "$4" } }, isQuiz && /* @__PURE__ */ React9.createElement(
+      Checkbox.Root,
+      {
+        onCheckedChange: (checked) => selectAnswer(checked, index),
+        checked: option.isCorrectAnswer,
+        css: {
+          cursor: "pointer",
+          width: "$9"
+        }
+      },
+      /* @__PURE__ */ React9.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React9.createElement(CheckIcon, { width: 16, height: 16 }))
+    ), /* @__PURE__ */ React9.createElement(
+      OptionInputWithDelete,
+      {
+        index,
+        option,
+        handleOptionTextChange,
+        removeOption
+      }
+    ));
+  }));
+};
+
+// src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx
+init_define_process_env();
+import React10 from "react";
+import { CheckCircleIcon as CheckCircleIcon2 } from "@100mslive/react-icons";
+var SingleChoiceOptions = ({
+  questionIndex,
+  options,
+  canRespond,
+  setAnswer,
+  totalResponses,
+  showVoteCount,
+  correctOptionIndex,
+  isStopped,
+  isQuiz,
+  localPeerResponse
+}) => {
+  return /* @__PURE__ */ React10.createElement(RadioGroup.Root, { value: localPeerResponse == null ? void 0 : localPeerResponse.option, onValueChange: (value) => setAnswer(value) }, /* @__PURE__ */ React10.createElement(Flex, { direction: "column", css: { gap: "$md", w: "100%", mb: "$md" } }, options.map((option) => {
+    return /* @__PURE__ */ React10.createElement(Flex, { align: "center", key: `${questionIndex}-${option.index}`, css: { w: "100%", gap: "$4" } }, !isStopped || !isQuiz ? /* @__PURE__ */ React10.createElement(
+      RadioGroup.Item,
+      {
+        css: {
+          background: "none",
+          h: "$9",
+          w: "$9",
+          border: "2px solid",
+          borderColor: "$on_surface_high",
+          display: "flex",
+          flexShrink: 0,
+          pt: "$1",
+          justifyContent: "center",
+          alignItems: "center",
+          cursor: canRespond ? "pointer" : "not-allowed",
+          '&[data-state="checked"]': {
+            borderColor: "$primary_bright",
+            borderWidth: "2px"
+          }
+        },
+        disabled: !canRespond,
+        value: option.index,
+        id: `${questionIndex}-${option.index}`
+      },
+      /* @__PURE__ */ React10.createElement(
+        RadioGroup.Indicator,
+        {
+          css: {
+            h: "80%",
+            w: "80%",
+            background: "$primary_bright",
+            borderRadius: "$round"
+          }
+        }
+      )
+    ) : null, isStopped && correctOptionIndex === option.index && isQuiz ? /* @__PURE__ */ React10.createElement(Flex, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React10.createElement(CheckCircleIcon2, { height: 20, width: 20 })) : null, /* @__PURE__ */ React10.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React10.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ React10.createElement(Text, { css: { display: "flex", flexGrow: "1", color: "$on_surface_high" } }, /* @__PURE__ */ React10.createElement(Label, { style: { color: "inherit" }, htmlFor: `${questionIndex}-${option.index}` }, option.text)), showVoteCount && /* @__PURE__ */ React10.createElement(VoteCount, { voteCount: option.voteCount })), showVoteCount && /* @__PURE__ */ React10.createElement(VoteProgress, { option, totalResponses })), isStopped && isQuiz && (localPeerResponse == null ? void 0 : localPeerResponse.option) === option.index ? /* @__PURE__ */ React10.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", maxWidth: "max-content" } }, "Your Answer") : null);
+  })));
+};
+var SingleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handleOptionTextChange, removeOption }) => {
+  const correctOptionIndex = options.findIndex((option) => option.isCorrectAnswer);
+  return /* @__PURE__ */ React10.createElement(RadioGroup.Root, { value: correctOptionIndex, onValueChange: selectAnswer }, /* @__PURE__ */ React10.createElement(Flex, { direction: "column", css: { gap: "$md", w: "100%", mb: "$md" } }, options.map((option, index) => {
+    return /* @__PURE__ */ React10.createElement(Flex, { align: "center", key: `option-${index}`, css: { w: "100%", gap: "$4" } }, isQuiz && /* @__PURE__ */ React10.createElement(
+      RadioGroup.Item,
+      {
+        css: {
+          background: "none",
+          w: "$9",
+          border: "2px solid",
+          borderColor: "$on_surface_high",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          cursor: "pointer",
+          '&[data-state="checked"]': {
+            borderColor: "$primary_bright",
+            borderWidth: "2px"
+          }
+        },
+        value: index
+      },
+      /* @__PURE__ */ React10.createElement(
+        RadioGroup.Indicator,
+        {
+          css: {
+            h: "80%",
+            w: "80%",
+            background: "$primary_bright",
+            borderRadius: "$round"
+          }
+        }
+      )
+    ), /* @__PURE__ */ React10.createElement(
+      OptionInputWithDelete,
+      {
+        index,
+        option,
+        handleOptionTextChange,
+        removeOption
+      }
+    ));
+  })));
+};
+
+// src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx
+var QuestionForm = ({
+  question,
+  index,
+  length,
+  onSave,
+  removeQuestion,
+  isQuiz
+}) => {
+  var _a;
+  const ref = useRef2(null);
+  const selectionBg = useDropdownSelection();
+  const [openDelete, setOpenDelete] = useState2(false);
+  const [open, setOpen] = useState2(false);
+  const [type, setType] = useState2(question.type || "single-choice" /* SINGLE_CHOICE */);
+  const [text, setText] = useState2(question.text);
+  const [weight, setWeight] = useState2(isQuiz ? 10 : 1);
+  const [options, setOptions] = useState2(
+    (question == null ? void 0 : question.options) || [
+      { text: "", isCorrectAnswer: false },
+      { text: "", isCorrectAnswer: false }
+    ]
+  );
+  const isValid = isValidQuestion({
+    text,
+    type,
+    options,
+    weight,
+    isQuiz
+  });
+  const handleOptionTextChange = useCallback(
+    (index2, text2) => {
+      setOptions((options2) => [...options2.slice(0, index2), __spreadProps(__spreadValues({}, options2[index2]), { text: text2 }), ...options2.slice(index2 + 1)]);
+    },
+    [setOptions]
+  );
+  const removeOption = useCallback(
+    (index2) => setOptions((options2) => {
+      const newOptions = [...options2];
+      newOptions.splice(index2, 1);
+      return newOptions;
+    }),
+    [setOptions]
+  );
+  const selectSingleChoiceAnswer = useCallback(
+    (answerIndex) => {
+      if (!isQuiz) {
+        return;
+      }
+      setOptions(
+        (options2) => options2.map((option, index2) => __spreadProps(__spreadValues({}, option), {
+          isCorrectAnswer: index2 === answerIndex
+        }))
+      );
+    },
+    [setOptions, isQuiz]
+  );
+  const selectMultipleChoiceAnswer = useCallback(
+    (checked, index2) => {
+      if (!isQuiz) {
+        return;
+      }
+      setOptions((options2) => [
+        ...options2.slice(0, index2),
+        __spreadProps(__spreadValues({}, options2[index2]), { isCorrectAnswer: checked }),
+        ...options2.slice(index2 + 1)
+      ]);
+    },
+    [setOptions, isQuiz]
+  );
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Text, { variant: "overline", css: { c: "$on_surface_low", textTransform: "uppercase" } }, "Question ", index + 1, " of ", length), /* @__PURE__ */ React11.createElement(Text, { variant: "body2", css: { mt: "$4", mb: "$md" } }, "Question Type"), /* @__PURE__ */ React11.createElement(Dropdown.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React11.createElement(
+    DialogDropdownTrigger,
+    {
+      ref,
+      title: QUESTION_TYPE_TITLE[type],
+      css: {
+        backgroundColor: "$surface_bright",
+        border: "1px solid $border_bright"
+      },
+      open
+    }
+  ), /* @__PURE__ */ React11.createElement(Dropdown.Portal, null, /* @__PURE__ */ React11.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 } }, Object.keys(QUESTION_TYPE_TITLE).map((value) => {
+    return /* @__PURE__ */ React11.createElement(
+      Dropdown.Item,
+      {
+        key: value,
+        onSelect: () => setType(value),
+        css: {
+          px: "$9",
+          bg: type === value ? selectionBg : void 0
+        }
+      },
+      QUESTION_TYPE_TITLE[value]
+    );
+  })))), /* @__PURE__ */ React11.createElement(
+    TextArea,
+    {
+      maxLength: 1024,
+      placeholder: "Ask a question",
+      css: {
+        mt: "$md",
+        backgroundColor: "$surface_bright",
+        border: "1px solid $border_bright",
+        minHeight: "$14",
+        resize: "vertical",
+        maxHeight: "$32"
+      },
+      value: text,
+      onChange: (event) => setText(event.target.value.trimStart())
+    }
+  ), /* @__PURE__ */ React11.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium", textAlign: "end", mt: "$4" } }, (text == null ? void 0 : text.length) || 0, "/1024"), /* @__PURE__ */ React11.createElement(Line, null), type === "single-choice" /* SINGLE_CHOICE */ || type === "multiple-choice" /* MULTIPLE_CHOICE */ ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Text, { variant: "body2", css: { mb: "$6", c: "$on_surface_medium" } }, "Options"), isQuiz && /* @__PURE__ */ React11.createElement(Text, { variant: "xs", css: { c: "$on_surface_medium", mb: "$md" } }, type === "single-choice" /* SINGLE_CHOICE */ ? "Use the radio buttons to indicate the correct answer" : "Use the checkboxes to indicate the correct answer(s)"), type === "single-choice" /* SINGLE_CHOICE */ && /* @__PURE__ */ React11.createElement(
+    SingleChoiceOptionInputs,
+    {
+      isQuiz,
+      options,
+      selectAnswer: selectSingleChoiceAnswer,
+      handleOptionTextChange,
+      removeOption
+    }
+  ), type === "multiple-choice" /* MULTIPLE_CHOICE */ && /* @__PURE__ */ React11.createElement(
+    MultipleChoiceOptionInputs,
+    {
+      isQuiz,
+      options,
+      selectAnswer: selectMultipleChoiceAnswer,
+      handleOptionTextChange,
+      removeOption
+    }
+  ), (options == null ? void 0 : options.length) < 20 && /* @__PURE__ */ React11.createElement(
+    Flex,
+    {
+      css: {
+        c: "$on_surface_medium",
+        cursor: "pointer",
+        "&:hover": { c: "$on_surface_high" }
+      },
+      onClick: () => setOptions([...options, { text: "", isCorrectAnswer: false }])
+    },
+    /* @__PURE__ */ React11.createElement(AddCircleIcon, { style: { position: "relative", left: "-2px" } }),
+    /* @__PURE__ */ React11.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: {
+          ml: "$4",
+          c: "inherit"
+        }
+      },
+      "Add an option"
+    )
+  ), /* @__PURE__ */ React11.createElement(Line, null), isQuiz ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Flex, { justify: "between", align: "center", css: { gap: "$6", w: "100%" } }, /* @__PURE__ */ React11.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium" } }, "Point Weightage"), /* @__PURE__ */ React11.createElement(
+    Input,
+    {
+      type: "number",
+      value: weight,
+      min: 1,
+      max: 999,
+      onChange: (e) => setWeight(Math.min(Number(e.target.value), 999)),
+      css: {
+        backgroundColor: "$surface_bright",
+        border: "1px solid $border_bright",
+        maxWidth: "$20"
+      }
+    }
+  ))) : null) : null, /* @__PURE__ */ React11.createElement(Flex, { justify: "end", align: "center", css: { mt: "$12", gap: "$8" } }, /* @__PURE__ */ React11.createElement(IconButton, { css: { border: "1px solid $border_bright" } }, /* @__PURE__ */ React11.createElement(TrashIcon2, { onClick: () => setOpenDelete(!open) })), /* @__PURE__ */ React11.createElement(
+    Tooltip,
+    {
+      disabled: isValid,
+      title: options.length < 2 ? "At least two options must be added" : `Please fill all the fields ${isQuiz ? "and mark the correct answer(s)" : ""} to continue`,
+      boxCss: { maxWidth: "$40" }
+    },
+    /* @__PURE__ */ React11.createElement(
+      Button,
+      {
+        variant: "standard",
+        disabled: !isValid,
+        onClick: () => {
+          onSave({
+            saved: true,
+            text,
+            type,
+            options,
+            skippable: false,
+            draftID: question.draftID,
+            weight
+          });
+        }
+      },
+      "Save"
+    )
+  )), /* @__PURE__ */ React11.createElement(DeleteQuestionModal, { open: openDelete, setOpen: setOpenDelete, removeQuestion }));
+};
+var isValidQuestion = ({
+  text,
+  type,
+  options,
+  weight,
+  isQuiz = false
+}) => {
+  if (!isValidTextInput(text) || !type) {
+    return false;
+  }
+  const everyOptionHasText = options.length > 1 && options.every((option) => option && isValidTextInput(option.text, 1));
+  const hasCorrectAnswer = options.some((option) => option.isCorrectAnswer);
+  if (!isQuiz) {
+    return everyOptionHasText;
+  }
+  if (isQuiz && weight < 1) {
+    return false;
+  }
+  return everyOptionHasText && hasCorrectAnswer;
+};
+
+// src/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.tsx
+init_define_process_env();
+import React12, { useMemo as useMemo2 } from "react";
+import { CheckCircleIcon as CheckCircleIcon3 } from "@100mslive/react-icons";
+var SavedQuestion = ({
+  question,
+  index,
+  length,
+  convertToDraft
+}) => {
+  var _a;
+  const answerArray = useMemo2(() => {
+    var _a2;
+    const updatedAnswerArray = [];
+    const { option, options } = (_a2 = question == null ? void 0 : question.answer) != null ? _a2 : {};
+    if (option) {
+      updatedAnswerArray.push(option);
+    }
+    if (options) {
+      updatedAnswerArray.push(...options);
+    }
+    return updatedAnswerArray;
+  }, [question == null ? void 0 : question.answer]);
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Text, { variant: "overline", css: { c: "$on_surface_low", textTransform: "uppercase" } }, "Question ", index + 1, " of ", length, ": ", QUESTION_TYPE_TITLE[question.type]), /* @__PURE__ */ React12.createElement(Text, { variant: "body2", css: { mt: "$4", mb: "$md" } }, question.text), (_a = question.options) == null ? void 0 : _a.map((option, index2) => /* @__PURE__ */ React12.createElement(Flex, { key: `${option.text}-${index2}`, css: { alignItems: "center", my: "$xs" } }, /* @__PURE__ */ React12.createElement(Text, { variant: "body2", css: { c: "$on_surface_medium" } }, option.text), (answerArray.includes(index2 + 1) || option.isCorrectAnswer) && /* @__PURE__ */ React12.createElement(Flex, { css: { color: "$alert_success", mx: "$xs" } }, /* @__PURE__ */ React12.createElement(CheckCircleIcon3, { height: 24, width: 24 })))), question.skippable ? /* @__PURE__ */ React12.createElement(Text, { variant: "sm", css: { color: "$on_surface_low", my: "$md" } }, "Not required to answer") : null, /* @__PURE__ */ React12.createElement(Flex, { justify: "end", css: { w: "100%", alignItems: "center" } }, /* @__PURE__ */ React12.createElement(Button, { variant: "standard", css: { fontWeight: "$semiBold" }, onClick: () => convertToDraft(question.draftID) }, "Edit")));
+};
+
+// src/Prebuilt/components/Polls/CreateQuestions/CreateQuestions.jsx
+var getEditableFormat = (questions) => {
+  const editableQuestions = questions.map((question) => {
+    return __spreadProps(__spreadValues({}, question), { saved: true, draftID: uuid() });
+  });
+  return editableQuestions;
+};
+function CreateQuestions() {
+  var _a, _b, _c, _d;
+  const actions = useHMSActions2();
+  const { isHLSRunning } = useRecordingStreaming();
+  const togglePollView = usePollViewToggle();
+  const { pollInView: id, setPollView } = usePollViewState();
+  const interaction = useHMSStore3(selectPollByID(id));
+  const [questions, setQuestions] = useState3(
+    ((_a = interaction.questions) == null ? void 0 : _a.length) ? getEditableFormat(interaction.questions) : [{ draftID: uuid() }]
+  );
+  const isValidPoll = useMemo3(() => questions.length > 0 && questions.every(isValidQuestion), [questions]);
+  const launchPoll = () => __async(this, null, function* () {
+    yield actions.interactivityCenter.startPoll(id);
+    yield sendTimedMetadata(id);
+    setPollView(POLL_VIEWS.VOTE);
+  });
+  const sendTimedMetadata = (poll_id) => __async(this, null, function* () {
+    if (poll_id && isHLSRunning) {
+      try {
+        yield actions.sendHLSTimedMetadata([
+          {
+            payload: `poll:${poll_id}`,
+            duration: 100
+          }
+        ]);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
+  const headingTitle = (interaction == null ? void 0 : interaction.type) ? ((_c = (_b = interaction == null ? void 0 : interaction.type) == null ? void 0 : _b[0]) == null ? void 0 : _c.toUpperCase()) + ((_d = interaction == null ? void 0 : interaction.type) == null ? void 0 : _d.slice(1)) : "Polls and Quizzes";
+  const isQuiz = (interaction == null ? void 0 : interaction.type) === "quiz";
+  return /* @__PURE__ */ React13.createElement(Container, { rounded: true }, /* @__PURE__ */ React13.createElement(
+    ContentHeader,
+    {
+      content: headingTitle,
+      onClose: togglePollView,
+      onBack: () => setPollView(POLL_VIEWS.CREATE_POLL_QUIZ)
+    }
+  ), /* @__PURE__ */ React13.createElement(Flex, { direction: "column", css: { p: "$10", overflowY: "auto" } }, /* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, questions.map((question, index) => /* @__PURE__ */ React13.createElement(
+    QuestionCard,
+    {
+      key: question.draftID,
+      question,
+      index,
+      length: questions.length,
+      onSave: (questionParams) => __async(this, null, function* () {
+        const updatedQuestions = [...questions.slice(0, index), questionParams, ...questions.slice(index + 1)];
+        setQuestions(updatedQuestions);
+        const validQuestions = updatedQuestions.filter((question2) => isValidQuestion(question2));
+        yield actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
+      }),
+      isQuiz,
+      removeQuestion: (questionID) => __async(this, null, function* () {
+        const updatedQuestions = questions.filter((questionFromSet) => questionID !== (questionFromSet == null ? void 0 : questionFromSet.draftID));
+        setQuestions(updatedQuestions);
+        const validQuestions = updatedQuestions.filter((question2) => isValidQuestion(question2));
+        yield actions.interactivityCenter.addQuestionsToPoll(id, validQuestions);
+      }),
+      convertToDraft: (questionID) => setQuestions((prev) => {
+        const copyOfQuestions = [...prev];
+        copyOfQuestions.forEach((question2) => {
+          if (questionID && question2.draftID === questionID) {
+            question2.saved = false;
+          }
+        });
+        return copyOfQuestions;
+      })
+    }
+  ))), /* @__PURE__ */ React13.createElement(
+    Flex,
+    {
+      css: {
+        c: "$on_surface_low",
+        my: "$sm",
+        cursor: "pointer",
+        "&:hover": { c: "$on_surface_medium" }
+      },
+      onClick: () => setQuestions([...questions, { draftID: uuid() }])
+    },
+    /* @__PURE__ */ React13.createElement(AddCircleIcon2, null),
+    /* @__PURE__ */ React13.createElement(Text, { variant: "body1", css: { ml: "$md", c: "$inherit" } }, "Add another question")
+  ), /* @__PURE__ */ React13.createElement(Flex, { css: { w: "100%" }, justify: "end" }, /* @__PURE__ */ React13.createElement(Button, { disabled: !isValidPoll, onClick: () => __async(this, null, function* () {
+    return launchPoll();
+  }) }, "Launch ", interaction == null ? void 0 : interaction.type))));
+}
+var QuestionCard = ({ question, onSave, index, length, removeQuestion, isQuiz, convertToDraft }) => {
+  return /* @__PURE__ */ React13.createElement(Flex, { direction: "column", css: { p: "$md", bg: "$surface_default", r: "$1", mb: "$sm" } }, question.saved ? /* @__PURE__ */ React13.createElement(SavedQuestion, { question, index, length, convertToDraft }) : /* @__PURE__ */ React13.createElement(
+    QuestionForm,
+    {
+      question,
+      removeQuestion: () => removeQuestion(question.draftID),
+      onSave: (params) => onSave(params),
+      index,
+      length,
+      isQuiz
+    }
+  ));
+};
+
+// src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx
+init_define_process_env();
+import React17, { useState as useState5 } from "react";
+import { selectPollByID as selectPollByID3, useHMSStore as useHMSStore6 } from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon2, CrossIcon as CrossIcon3 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx
+init_define_process_env();
+import React14 from "react";
+import { CheckCircleIcon as CheckCircleIcon4, ClockIcon, TrophyFilledIcon } from "@100mslive/react-icons";
+var positionColorMap = { 1: "#D69516", 2: "#3E3E3E", 3: "#583B0F" };
+var LeaderboardEntry = ({
+  position,
+  score,
+  questionCount,
+  correctResponses,
+  userName,
+  maxPossibleScore,
+  duration
+}) => {
+  return /* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "between", css: { my: "$8" } }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", css: { gap: "$6" } }, /* @__PURE__ */ React14.createElement(
+    Flex,
+    {
+      align: "center",
+      justify: "center",
+      css: {
+        backgroundColor: positionColorMap[position] || "",
+        h: "$10",
+        w: "$10",
+        borderRadius: "$round",
+        color: position > 3 ? "$on_surface_low" : "#FFF",
+        fontSize: "$xs",
+        fontWeight: "$semiBold"
+      }
+    },
+    position
+  ), /* @__PURE__ */ React14.createElement(Box, null, /* @__PURE__ */ React14.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, userName), /* @__PURE__ */ React14.createElement(Text, { variant: "sm", css: { mt: "$1" } }, score, " / ", maxPossibleScore, " points"))), /* @__PURE__ */ React14.createElement(Flex, { align: "center", css: { gap: "$4", color: "$on_surface_medium" } }, position === 1 && score ? /* @__PURE__ */ React14.createElement(TrophyFilledIcon, { height: 16, width: 16 }) : null, questionCount ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(CheckCircleIcon4, { height: 16, width: 16 }), /* @__PURE__ */ React14.createElement(Text, { variant: "xs" }, correctResponses, "/", questionCount)) : null, duration ? /* @__PURE__ */ React14.createElement(Flex, { align: "center", css: { gap: "$2", color: "$on_surface_medium" } }, /* @__PURE__ */ React14.createElement(ClockIcon, { height: 16, width: 16 }), /* @__PURE__ */ React14.createElement(Text, { variant: "xs" }, getFormattedTime(duration))) : null));
+};
+
+// src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx
+init_define_process_env();
+import React16 from "react";
+import { selectLocalPeerID, useHMSStore as useHMSStore5 } from "@100mslive/react-sdk";
+
+// src/Prebuilt/components/Polls/Voting/StatisticBox.tsx
+init_define_process_env();
+import React15 from "react";
+var StatisticBox = ({ title, value = 0 }) => {
+  if (!value && !(typeof value === "number")) {
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, null);
+  }
+  return /* @__PURE__ */ React15.createElement(Box, { css: { p: "$8", background: "$surface_default", borderRadius: "$1", w: "100%" } }, /* @__PURE__ */ React15.createElement(
+    Text,
+    {
+      variant: "tiny",
+      css: { textTransform: "uppercase", color: "$on_surface_medium", fontWeight: "$semiBold", my: "$4" }
+    },
+    title
+  ), /* @__PURE__ */ React15.createElement(Text, { css: { fontWeight: "$semiBold" } }, value));
+};
+
+// src/Prebuilt/components/Polls/Voting/useQuizSummary.tsx
+init_define_process_env();
+import { useEffect as useEffect2, useState as useState4 } from "react";
+import {
+  selectPollByID as selectPollByID2,
+  useHMSActions as useHMSActions3,
+  useHMSStore as useHMSStore4
+} from "@100mslive/react-sdk";
+var useQuizSummary = (quizID) => {
+  const hmsActions = useHMSActions3();
+  const quiz = useHMSStore4(selectPollByID2(quizID));
+  const [quizLeaderboard, setQuizLeaderboard] = useState4();
+  const summary = (quizLeaderboard == null ? void 0 : quizLeaderboard.summary) || {
+    totalUsers: 0,
+    votedUsers: 0,
+    avgScore: 0,
+    avgTime: 0,
+    correctUsers: 0
+  };
+  const [calculations, setCalculations] = useState4({ maxPossibleScore: 0, totalResponses: 0 });
+  useEffect2(() => {
+    const fetchLeaderboardData = () => __async(void 0, null, function* () {
+      var _a;
+      if (!quizLeaderboard && quiz && !(quiz == null ? void 0 : quiz.anonymous) && quiz.state === "stopped") {
+        const leaderboardData = yield hmsActions.interactivityCenter.fetchLeaderboard(quiz.id, 0, 50);
+        const { maxPossibleScore, totalResponses } = ((_a = quiz == null ? void 0 : quiz.questions) == null ? void 0 : _a.reduce((accumulator, question) => {
+          var _a2;
+          accumulator.maxPossibleScore += question.weight || 0;
+          accumulator.totalResponses += ((_a2 = question == null ? void 0 : question.responses) == null ? void 0 : _a2.length) || 0;
+          return accumulator;
+        }, calculations)) || calculations;
+        setQuizLeaderboard(leaderboardData);
+        setCalculations({ maxPossibleScore, totalResponses });
+      }
+    });
+    fetchLeaderboardData();
+  }, [quiz, hmsActions.interactivityCenter, quizLeaderboard, calculations]);
+  return {
+    quizLeaderboard,
+    summary,
+    maxPossibleScore: calculations.maxPossibleScore,
+    totalResponses: calculations.totalResponses
+  };
+};
+
+// src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx
+var PeerParticipationSummary = ({ quiz }) => {
+  const localPeerId = useHMSStore5(selectLocalPeerID);
+  const { quizLeaderboard, summary } = useQuizSummary(quiz.id);
+  if (quiz.state !== "stopped") {
+    return /* @__PURE__ */ React16.createElement(React16.Fragment, null);
+  }
+  const isLocalPeerQuizCreator = localPeerId === quiz.startedBy;
+  const peerEntry = quizLeaderboard == null ? void 0 : quizLeaderboard.entries.find((entry) => {
+    var _a;
+    return ((_a = entry.peer) == null ? void 0 : _a.peerid) === localPeerId;
+  });
+  const boxes = isLocalPeerQuizCreator ? [
+    {
+      title: "Voted",
+      value: `${summary.totalUsers ? (100 * summary.votedUsers / summary.totalUsers).toFixed(0) : 0}% (${summary.votedUsers}/${summary.totalUsers})`
+    },
+    {
+      title: "Correct Answers",
+      value: `${summary.totalUsers ? (100 * summary.correctUsers / summary.totalUsers).toFixed(0) : 0}% (${summary.correctUsers}/${summary.totalUsers})`
+    },
+    // Time in ms
+    { title: "Avg. Time Taken", value: getFormattedTime(summary.avgTime) },
+    {
+      title: "Avg. Score",
+      value: Number.isInteger(summary.avgScore) ? summary.avgScore : summary.avgScore.toFixed(2)
+    }
+  ] : [
+    { title: "Your rank", value: (peerEntry == null ? void 0 : peerEntry.position) || "-" },
+    { title: "Points", value: (peerEntry == null ? void 0 : peerEntry.score) || 0 },
+    // Time in ms
+    { title: "Time Taken", value: getFormattedTime(peerEntry == null ? void 0 : peerEntry.duration) },
+    {
+      title: "Correct Answers",
+      value: (peerEntry == null ? void 0 : peerEntry.totalResponses) ? `${peerEntry == null ? void 0 : peerEntry.correctResponses}/${peerEntry.totalResponses}` : "-"
+    }
+  ];
+  return /* @__PURE__ */ React16.createElement(Box, null, /* @__PURE__ */ React16.createElement(Text, { css: { fontWeight: "$semiBold", my: "$8" } }, "Participation Summary"), /* @__PURE__ */ React16.createElement(Box, { css: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "$4" } }, boxes.map((box) => /* @__PURE__ */ React16.createElement(StatisticBox, { key: box.title, title: box.title, value: box.value }))));
+};
+
+// src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx
+var LeaderboardSummary = ({ pollID }) => {
+  var _a, _b;
+  const quiz = useHMSStore6(selectPollByID3(pollID));
+  const { quizLeaderboard, maxPossibleScore } = useQuizSummary(pollID);
+  const [viewAllEntries, setViewAllEntries] = useState5(false);
+  const { setPollView } = usePollViewState();
+  const toggleSidepane = useSidepaneToggle();
+  if (!quiz || !quizLeaderboard)
+    return /* @__PURE__ */ React17.createElement(Flex, { align: "center", justify: "center", css: { size: "100%" } }, /* @__PURE__ */ React17.createElement(Loading, null));
+  const questionCount = ((_a = quiz.questions) == null ? void 0 : _a.length) || 0;
+  return /* @__PURE__ */ React17.createElement(Container, { rounded: true }, /* @__PURE__ */ React17.createElement(Flex, { direction: "column", css: { size: "100%", p: "$8" } }, /* @__PURE__ */ React17.createElement(Flex, { justify: "between", align: "center", css: { pb: "$6", borderBottom: "1px solid $border_bright", mb: "$8" } }, /* @__PURE__ */ React17.createElement(Flex, { align: "center", css: { gap: "$4" } }, /* @__PURE__ */ React17.createElement(
+    Flex,
+    {
+      css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high", cursor: "pointer" } },
+      onClick: () => setPollView(POLL_VIEWS.VOTE)
+    },
+    /* @__PURE__ */ React17.createElement(ChevronLeftIcon2, null)
+  ), /* @__PURE__ */ React17.createElement(Text, { variant: "lg", css: { fontWeight: "$semiBold" } }, quiz.title), /* @__PURE__ */ React17.createElement(StatusIndicator, { status: quiz.state })), /* @__PURE__ */ React17.createElement(
+    Flex,
+    {
+      css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high", cursor: "pointer" } },
+      onClick: toggleSidepane
+    },
+    /* @__PURE__ */ React17.createElement(CrossIcon3, null)
+  )), /* @__PURE__ */ React17.createElement(Box, { css: { overflowY: "auto", mr: "-$4", pr: "$4" } }, !viewAllEntries ? /* @__PURE__ */ React17.createElement(PeerParticipationSummary, { quiz }) : null, /* @__PURE__ */ React17.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", mt: "$4" } }, "Leaderboard"), /* @__PURE__ */ React17.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, "Based on score and time taken to cast the correct answer"), /* @__PURE__ */ React17.createElement(
+    Box,
+    {
+      css: {
+        mt: "$8",
+        overflowY: "auto",
+        flex: viewAllEntries ? "1 1 0" : "unset",
+        mr: viewAllEntries ? "-$6" : "unset",
+        px: viewAllEntries ? "0" : "$4",
+        pr: viewAllEntries ? "$6" : "$4",
+        backgroundColor: viewAllEntries ? "" : "$surface_default",
+        borderRadius: "$1"
+      }
+    },
+    (quizLeaderboard == null ? void 0 : quizLeaderboard.entries) && quizLeaderboard.entries.slice(0, viewAllEntries ? void 0 : 5).map((question) => /* @__PURE__ */ React17.createElement(
+      LeaderboardEntry,
+      {
+        key: question.position,
+        position: question.position,
+        score: question.score,
+        questionCount,
+        correctResponses: question.correctResponses,
+        userName: question.peer.username || "",
+        maxPossibleScore,
+        duration: question.duration
+      }
+    )),
+    ((_b = quizLeaderboard == null ? void 0 : quizLeaderboard.entries) == null ? void 0 : _b.length) > 5 && !viewAllEntries ? /* @__PURE__ */ React17.createElement(
+      Flex,
+      {
+        align: "center",
+        justify: "end",
+        css: {
+          w: "100%",
+          borderTop: "1px solid $border_bright",
+          cursor: "pointer",
+          color: "$on_surface_high",
+          p: "$6 $2"
+        },
+        onClick: () => setViewAllEntries(true)
+      },
+      /* @__PURE__ */ React17.createElement(Text, { variant: "sm" }, "View All"),
+      " ",
+      /* @__PURE__ */ React17.createElement(ChevronRightIcon2, null)
+    ) : null
+  ))));
+};
+
+// src/Prebuilt/components/Polls/Voting/Voting.tsx
+init_define_process_env();
+import React21, { useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
+import {
+  selectLocalPeer as selectLocalPeer2,
+  selectPeerNameByID,
+  selectPermissions as selectPermissions3,
+  selectPollByID as selectPollByID4,
+  useHMSActions as useHMSActions5,
+  useHMSStore as useHMSStore8
+} from "@100mslive/react-sdk";
+import { ChevronLeftIcon as ChevronLeftIcon3, CrossIcon as CrossIcon4 } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Polls/Voting/StandardVoting.tsx
+init_define_process_env();
+import React19 from "react";
+
+// src/Prebuilt/components/Polls/Voting/QuestionCard.jsx
+init_define_process_env();
+import React18, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState6 } from "react";
+import { match } from "ts-pattern";
+import { selectLocalPeer, selectLocalPeerRoleName as selectLocalPeerRoleName2, useHMSActions as useHMSActions4, useHMSStore as useHMSStore7 } from "@100mslive/react-sdk";
+import { CheckCircleIcon as CheckCircleIcon5, ChevronDownIcon, CrossCircleIcon } from "@100mslive/react-icons";
+var QuestionCard2 = ({
+  pollID,
+  isQuiz,
+  startedBy,
+  pollState,
+  index,
+  totalQuestions,
+  result,
+  type,
+  text,
+  options = [],
+  answer,
+  localPeerResponse,
+  updateSavedResponses,
+  rolesThatCanViewResponses
+}) => {
+  const actions = useHMSActions4();
+  const localPeer = useHMSStore7(selectLocalPeer);
+  const isLocalPeerCreator = (localPeer == null ? void 0 : localPeer.id) === startedBy;
+  const localPeerRoleName = useHMSStore7(selectLocalPeerRoleName2);
+  const roleCanViewResponse = !rolesThatCanViewResponses || rolesThatCanViewResponses.length === 0 || rolesThatCanViewResponses.includes(localPeerRoleName || "");
+  const [localPeerChoice, setLocalPeerChoice] = useState6(localPeerResponse);
+  useEffect3(() => {
+    setLocalPeerChoice(localPeerResponse);
+  }, [localPeerResponse]);
+  const showVoteCount = roleCanViewResponse && (localPeerChoice || isLocalPeerCreator && pollState === "stopped") && !isQuiz;
+  const isLive = pollState === "started";
+  const pollEnded = pollState === "stopped";
+  const canRespond = isLive && !localPeerChoice;
+  const startTime = useRef3(Date.now());
+  const isCorrectAnswer = checkCorrectAnswer(answer, localPeerChoice, type);
+  const [singleOptionAnswer, setSingleOptionAnswer] = useState6();
+  const [multipleOptionAnswer, setMultipleOptionAnswer] = useState6(/* @__PURE__ */ new Set());
+  const [showOptions, setShowOptions] = useState6(true);
+  const respondedToQuiz = isQuiz && localPeerChoice && !localPeerChoice.skipped;
+  const isValidVote = useMemo4(() => {
+    if (type === "single-choice" /* SINGLE_CHOICE */) {
+      return singleOptionAnswer !== void 0;
+    } else if (type === "multiple-choice" /* MULTIPLE_CHOICE */) {
+      return multipleOptionAnswer.size > 0;
+    }
+  }, [singleOptionAnswer, multipleOptionAnswer, type]);
+  const handleVote = useCallback2(() => __async(void 0, null, function* () {
+    if (!isValidVote) {
+      return;
+    }
+    const submittedResponse = {
+      questionIndex: index,
+      option: singleOptionAnswer,
+      options: Array.from(multipleOptionAnswer),
+      duration: Date.now() - startTime.current
+    };
+    yield actions.interactivityCenter.addResponsesToPoll(pollID, [submittedResponse]);
+    updateSavedResponses((prev) => {
+      const prevCopy = __spreadValues({}, prev);
+      prevCopy[index] = { option: singleOptionAnswer, options: Array.from(multipleOptionAnswer) };
+      return prevCopy;
+    });
+    startTime.current = Date.now();
+  }), [
+    isValidVote,
+    index,
+    singleOptionAnswer,
+    multipleOptionAnswer,
+    actions.interactivityCenter,
+    pollID,
+    updateSavedResponses
+  ]);
+  return /* @__PURE__ */ React18.createElement(
+    Box,
+    {
+      css: {
+        backgroundColor: "$surface_bright",
+        borderRadius: "$1",
+        p: "$md",
+        mt: "$md",
+        border: respondedToQuiz && !isLive ? `1px solid ${isCorrectAnswer ? "$alert_success" : "$alert_error_default"}` : "none"
+      }
+    },
+    /* @__PURE__ */ React18.createElement(Flex, { align: "center", justify: "between" }, /* @__PURE__ */ React18.createElement(
+      Text,
+      {
+        variant: "caption",
+        css: {
+          color: match({ respondedToQuiz, isLive, isCorrectAnswer }).when(
+            ({ respondedToQuiz: respondedToQuiz2, isLive: isLive2 }) => respondedToQuiz2 && !isLive2,
+            ({ isCorrectAnswer: isCorrectAnswer2 }) => isCorrectAnswer2 ? "$alert_success" : "$alert_error_default"
+          ).otherwise(() => "$on_surface_low"),
+          fontWeight: "$semiBold",
+          display: "flex",
+          alignItems: "center",
+          gap: "$4"
+        }
+      },
+      match({ respondedToQuiz, pollEnded, isCorrectAnswer }).when(
+        ({ respondedToQuiz: respondedToQuiz2, pollEnded: pollEnded2 }) => respondedToQuiz2 && pollEnded2,
+        ({ isCorrectAnswer: isCorrectAnswer2 }) => {
+          return isCorrectAnswer2 ? /* @__PURE__ */ React18.createElement(CheckCircleIcon5, { height: 16, width: 16 }) : /* @__PURE__ */ React18.createElement(CrossCircleIcon, { height: 16, width: 16 });
+        }
+      ).otherwise(() => null),
+      "QUESTION ",
+      index,
+      " OF ",
+      totalQuestions,
+      ": ",
+      type.toUpperCase()
+    )),
+    /* @__PURE__ */ React18.createElement(Flex, { justify: "between", css: { my: "$md" } }, /* @__PURE__ */ React18.createElement(Text, { css: { color: "$on_surface_high" } }, text), /* @__PURE__ */ React18.createElement(
+      Box,
+      {
+        css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high", cursor: "pointer" } },
+        onClick: () => setShowOptions((prev) => !prev)
+      },
+      /* @__PURE__ */ React18.createElement(
+        ChevronDownIcon,
+        {
+          style: { transform: showOptions ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.3s ease" }
+        }
+      )
+    )),
+    /* @__PURE__ */ React18.createElement(
+      Box,
+      {
+        css: { maxHeight: showOptions ? "$80" : "0", transition: "max-height 0.3s ease", overflowY: "auto", mb: "$4" }
+      },
+      type === "single-choice" /* SINGLE_CHOICE */ ? /* @__PURE__ */ React18.createElement(
+        SingleChoiceOptions,
+        {
+          key: index,
+          questionIndex: index,
+          isQuiz,
+          canRespond,
+          correctOptionIndex: answer == null ? void 0 : answer.option,
+          options,
+          setAnswer: setSingleOptionAnswer,
+          totalResponses: result == null ? void 0 : result.totalResponses,
+          showVoteCount,
+          localPeerResponse: localPeerChoice,
+          isStopped: pollState === "stopped"
+        }
+      ) : null,
+      type === "multiple-choice" /* MULTIPLE_CHOICE */ ? /* @__PURE__ */ React18.createElement(
+        MultipleChoiceOptions,
+        {
+          questionIndex: index,
+          isQuiz,
+          canRespond,
+          correctOptionIndexes: answer == null ? void 0 : answer.options,
+          options,
+          selectedOptions: multipleOptionAnswer,
+          setSelectedOptions: setMultipleOptionAnswer,
+          totalResponses: result == null ? void 0 : result.totalResponses,
+          showVoteCount,
+          localPeerResponse: localPeerChoice,
+          isStopped: pollState === "stopped"
+        }
+      ) : null
+    ),
+    isLive && /* @__PURE__ */ React18.createElement(QuestionActions, { isValidVote, onVote: handleVote, response: localPeerChoice, isQuiz })
+  );
+};
+var QuestionActions = ({ isValidVote, response, isQuiz, onVote }) => {
+  return /* @__PURE__ */ React18.createElement(Flex, { align: "center", justify: "end", css: { gap: "$4", w: "100%" } }, response ? /* @__PURE__ */ React18.createElement(Text, { css: { fontWeight: "$semiBold", color: "$on_surface_medium" } }, response.skipped ? "Skipped" : null, isQuiz && !response.skipped ? "Answered" : null, !isQuiz && !response.skipped ? "Voted" : null) : /* @__PURE__ */ React18.createElement(Button, { css: { p: "$xs $10", fontWeight: "$semiBold" }, disabled: !isValidVote, onClick: onVote }, isQuiz ? "Answer" : "Vote"));
+};
+
+// src/Prebuilt/components/Polls/Voting/StandardVoting.tsx
+var StandardView = ({
+  poll,
+  localPeerResponses,
+  updateSavedResponses
+}) => {
+  var _a;
+  if (!(poll == null ? void 0 : poll.questions)) {
+    return null;
+  }
+  const isQuiz = poll.type === "quiz";
+  const isStopped = poll.state === "stopped";
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, isQuiz && isStopped ? /* @__PURE__ */ React19.createElement(PeerParticipationSummary, { quiz: poll }) : null, (_a = poll.questions) == null ? void 0 : _a.map((question, index) => {
+    var _a2;
+    return /* @__PURE__ */ React19.createElement(
+      QuestionCard2,
+      {
+        pollID: poll.id,
+        isQuiz,
+        startedBy: poll.startedBy,
+        pollState: poll.state,
+        key: `${question.text}-${index}`,
+        index: question.index,
+        text: question.text,
+        type: question.type,
+        result: question.result,
+        totalQuestions: ((_a2 = poll.questions) == null ? void 0 : _a2.length) || 0,
+        options: question.options,
+        localPeerResponse: localPeerResponses == null ? void 0 : localPeerResponses[question.index],
+        answer: question.answer,
+        updateSavedResponses,
+        rolesThatCanViewResponses: poll.rolesThatCanViewResponses
+      }
+    );
+  }));
+};
+
+// src/Prebuilt/components/Polls/Voting/TimedVoting.tsx
+init_define_process_env();
+import React20, { useEffect as useEffect4, useState as useState7 } from "react";
+var TimedView = ({
+  poll,
+  localPeerResponses,
+  updateSavedResponses
+}) => {
+  var _a, _b, _c;
+  const [currentIndex, setCurrentIndex] = useState7(getIndexToShow(localPeerResponses));
+  const activeQuestion = (_a = poll.questions) == null ? void 0 : _a.find((question) => question.index === currentIndex);
+  const attemptedAll = (((_b = poll.questions) == null ? void 0 : _b.length) || 0) < currentIndex;
+  useEffect4(() => {
+    setCurrentIndex(getIndexToShow(localPeerResponses));
+  }, [localPeerResponses]);
+  if (!activeQuestion && !attemptedAll || !((_c = poll.questions) == null ? void 0 : _c.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, poll.questions.map((question) => {
+    var _a2;
+    return attemptedAll || (activeQuestion == null ? void 0 : activeQuestion.index) === question.index ? /* @__PURE__ */ React20.createElement(
+      QuestionCard2,
+      {
+        key: question.index,
+        pollID: poll.id,
+        isQuiz: poll.type === "quiz",
+        startedBy: poll.startedBy,
+        pollState: poll.state,
+        index: question.index,
+        text: question.text,
+        type: question.type,
+        result: question == null ? void 0 : question.result,
+        totalQuestions: ((_a2 = poll.questions) == null ? void 0 : _a2.length) || 0,
+        options: question.options,
+        localPeerResponse: localPeerResponses == null ? void 0 : localPeerResponses[question.index],
+        answer: question.answer,
+        rolesThatCanViewResponses: poll.rolesThatCanViewResponses,
+        updateSavedResponses
+      }
+    ) : null;
+  }));
+};
+
+// src/Prebuilt/components/Polls/Voting/Voting.tsx
+var Voting = ({ id, toggleVoting }) => {
+  const actions = useHMSActions5();
+  const poll = useHMSStore8(selectPollByID4(id));
+  const pollCreatorName = useHMSStore8(selectPeerNameByID(poll == null ? void 0 : poll.createdBy));
+  const permissions = useHMSStore8(selectPermissions3);
+  const canEndActivity = !!(permissions == null ? void 0 : permissions.pollWrite);
+  const { setPollView } = usePollViewState();
+  const showSingleView = (poll == null ? void 0 : poll.type) === "quiz" && poll.state === "started";
+  const fetchedInitialResponses = useRef4(false);
+  const [savedResponses, setSavedResponses] = useState8({});
+  const localPeer = useHMSStore8(selectLocalPeer2);
+  const localPeerId = localPeer == null ? void 0 : localPeer.id;
+  const customerUserId = localPeer == null ? void 0 : localPeer.customerUserId;
+  useEffect5(() => {
+    fetchedInitialResponses.current = false;
+    setSavedResponses({});
+  }, [id, setSavedResponses]);
+  useEffect5(() => {
+    const getResponses = () => __async(void 0, null, function* () {
+      if (poll && actions.interactivityCenter && !fetchedInitialResponses.current) {
+        yield actions.interactivityCenter.getPollResponses(poll, true);
+        fetchedInitialResponses.current = true;
+      }
+    });
+    getResponses();
+  }, [poll, actions.interactivityCenter]);
+  useEffect5(() => {
+    if (poll == null ? void 0 : poll.questions) {
+      const localPeerResponses = getPeerResponses(poll.questions, localPeerId, customerUserId);
+      localPeerResponses == null ? void 0 : localPeerResponses.forEach((response) => {
+        if (response) {
+          setSavedResponses((prev) => {
+            var _a, _b, _c;
+            const prevCopy = __spreadValues({}, prev);
+            prevCopy[(_a = response[0]) == null ? void 0 : _a.questionIndex] = { option: (_b = response[0]) == null ? void 0 : _b.option, options: (_c = response[0]) == null ? void 0 : _c.options };
+            return prevCopy;
+          });
+        }
+      });
+    }
+  }, [localPeerId, poll == null ? void 0 : poll.questions, id, customerUserId]);
+  if (!poll) {
+    return null;
+  }
+  const canViewLeaderboard = poll.type === "quiz" && poll.state === "stopped" && !poll.anonymous;
+  return /* @__PURE__ */ React21.createElement(Container, { rounded: true }, /* @__PURE__ */ React21.createElement(
+    Flex,
+    {
+      align: "center",
+      css: {
+        gap: "$4",
+        py: "$6",
+        px: "$8",
+        my: "$4",
+        w: "100%",
+        color: "$on_surface_high",
+        borderBottom: "1px solid $border_default"
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      Flex,
+      {
+        onClick: () => setPollView(POLL_VIEWS.CREATE_POLL_QUIZ),
+        css: { cursor: "pointer", c: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } }
+      },
+      /* @__PURE__ */ React21.createElement(ChevronLeftIcon3, null)
+    ),
+    /* @__PURE__ */ React21.createElement(Text, { variant: "h6" }, poll.title),
+    /* @__PURE__ */ React21.createElement(StatusIndicator, { status: poll.state }),
+    /* @__PURE__ */ React21.createElement(
+      Box,
+      {
+        css: {
+          marginLeft: "auto",
+          cursor: "pointer",
+          "&:hover": { opacity: "0.8" },
+          height: "fit-content"
+        }
+      },
+      /* @__PURE__ */ React21.createElement(CrossIcon4, { onClick: toggleVoting })
+    )
+  ), /* @__PURE__ */ React21.createElement(Flex, { direction: "column", css: { p: "$8 $10", flex: "1 1 0", overflowY: "auto" } }, poll.state === "started" ? /* @__PURE__ */ React21.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, pollCreatorName || "Participant", " started a ", poll.type) : null, showSingleView ? /* @__PURE__ */ React21.createElement(TimedView, { poll, localPeerResponses: savedResponses, updateSavedResponses: setSavedResponses }) : /* @__PURE__ */ React21.createElement(StandardView, { poll, localPeerResponses: savedResponses, updateSavedResponses: setSavedResponses })), /* @__PURE__ */ React21.createElement(
+    Flex,
+    {
+      css: { w: "100%", justifyContent: "end", alignItems: "center", p: "$8", borderTop: "1px solid $border_bright" }
+    },
+    poll.state === "started" && canEndActivity && /* @__PURE__ */ React21.createElement(
+      Button,
+      {
+        variant: "danger",
+        css: { fontWeight: "$semiBold", w: "max-content" },
+        onClick: () => actions.interactivityCenter.stopPoll(id)
+      },
+      "End ",
+      poll.type
+    ),
+    canViewLeaderboard ? /* @__PURE__ */ React21.createElement(Button, { css: { fontWeight: "$semiBold", w: "max-content" }, onClick: () => setPollView(POLL_VIEWS.RESULTS) }, "View Leaderboard") : null
+  ));
+};
+
+// src/Prebuilt/components/Polls/Polls.tsx
+var Polls = () => {
+  const togglePollView = usePollViewToggle();
+  const { pollInView: pollID, view } = usePollViewState();
+  if (view === POLL_VIEWS.CREATE_POLL_QUIZ) {
+    return /* @__PURE__ */ React22.createElement(PollsQuizMenu, null);
+  } else if (view === POLL_VIEWS.CREATE_QUESTIONS) {
+    return /* @__PURE__ */ React22.createElement(CreateQuestions, null);
+  } else if (view === POLL_VIEWS.VOTE) {
+    return /* @__PURE__ */ React22.createElement(Voting, { toggleVoting: togglePollView, id: pollID });
+  } else if (view === POLL_VIEWS.RESULTS) {
+    return /* @__PURE__ */ React22.createElement(LeaderboardSummary, { pollID });
+  } else {
+    return null;
+  }
+};
+export {
+  Polls
+};
+//# sourceMappingURL=Polls-AULCHMLW.js.map