@100mslive/roomkit-react 0.3.22-alpha.3 → 0.3.22-alpha.5

package/dist/LeaveScreen-D6XU64JL.js

@@ -1,556 +0,0 @@
-import {
-  Header
-} from "./chunk-OA4HW7HW.js";
-import "./chunk-QKXHQ6DV.js";
-import {
-  Button,
-  Checkbox,
-  Dialog,
-  Label,
-  Sheet,
-  TextArea,
-  useHMSAppStateContext,
-  useHMSPrebuiltContext
-} from "./chunk-26D5FDBW.js";
-import {
-  Text
-} from "./chunk-JKWX7W4K.js";
-import {
-  ToastManager
-} from "./chunk-BQOT4DK7.js";
-import {
-  Box,
-  Flex
-} from "./chunk-7QZJMUHM.js";
-import {
-  UserPreferencesKeys,
-  defaultPreviewPreference,
-  textEllipsis,
-  useRoomLayoutLeaveScreen,
-  useUserPreferences
-} from "./chunk-ENHSO6YN.js";
-import {
-  __async,
-  __spreadValues,
-  config,
-  init_define_process_env
-} from "./chunk-TBXRX6MK.js";
-
-// src/Prebuilt/components/LeaveScreen.tsx
-init_define_process_env();
-import React4 from "react";
-import { ExitIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/EndCallFeedback/Feedback.tsx
-init_define_process_env();
-import React3, { useState as useState2 } from "react";
-import { useMedia as useMedia3 } from "react-use";
-
-// src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx
-init_define_process_env();
-import React, { useState } from "react";
-import { useMedia } from "react-use";
-import { useHMSActions } from "@100mslive/react-sdk";
-import { CheckIcon, CrossIcon } from "@100mslive/react-icons";
-var FEEBACK_INDEX = {
-  THANK_YOU: -10,
-  INIT: -1
-};
-var FeedbackModal = ({
-  ratings,
-  index,
-  setIndex
-}) => {
-  const isMobile = useMedia(config.media.md);
-  const onOpenChange = () => {
-    setIndex(FEEBACK_INDEX.INIT);
-  };
-  const avoidDefaultDomBehavior = (e) => {
-    e.preventDefault();
-  };
-  if (isMobile) {
-    return /* @__PURE__ */ React.createElement(Sheet.Root, { open: index !== FEEBACK_INDEX.INIT, onOpenChange }, /* @__PURE__ */ React.createElement(
-      Sheet.Content,
-      {
-        css: { bg: "$surface_dim", p: "$10", overflowY: "auto" },
-        onPointerDownOutside: avoidDefaultDomBehavior,
-        onInteractOutside: avoidDefaultDomBehavior
-      },
-      /* @__PURE__ */ React.createElement(FeedbackContent, { ratings, indexSelected: index, setIndex })
-    ));
-  }
-  return /* @__PURE__ */ React.createElement(Dialog.Root, { open: index !== FEEBACK_INDEX.INIT, onOpenChange }, /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, null), /* @__PURE__ */ React.createElement(
-    Dialog.Content,
-    {
-      css: { bg: "$surface_dim", width: "528px", p: "$12" },
-      onPointerDownOutside: avoidDefaultDomBehavior,
-      onInteractOutside: avoidDefaultDomBehavior
-    },
-    /* @__PURE__ */ React.createElement(FeedbackContent, { ratings, indexSelected: index, setIndex })
-  )));
-};
-var FeedbackContent = ({
-  ratings,
-  indexSelected,
-  setIndex
-}) => {
-  const { feedback } = useRoomLayoutLeaveScreen();
-  const { endpoints } = useHMSPrebuiltContext();
-  const isMobile = useMedia(config.media.md);
-  const hmsActions = useHMSActions();
-  const [comment, setComment] = useState("");
-  const [selectedReasons, setSelectedReasons] = useState(/* @__PURE__ */ new Set());
-  const handleCheckedChange = (checked, index) => {
-    const newSelected = new Set(selectedReasons);
-    if (checked) {
-      newSelected.add(index);
-    } else {
-      newSelected.delete(index);
-    }
-    setSelectedReasons(newSelected);
-  };
-  const submitFeedback = () => __async(void 0, null, function* () {
-    if (indexSelected < 0 || ratings.length <= indexSelected) {
-      return;
-    }
-    try {
-      const reasons = [...selectedReasons].map((value) => {
-        var _a, _b;
-        return ((_b = (_a = ratings[indexSelected]) == null ? void 0 : _a.reasons) == null ? void 0 : _b[value]) || "";
-      });
-      yield hmsActions.submitSessionFeedback(
-        {
-          question: `${feedback == null ? void 0 : feedback.title} | ${ratings[indexSelected].question || ""}`,
-          rating: ratings[indexSelected].value || 1,
-          min_rating: 1,
-          max_rating: ratings.length,
-          reasons: selectedReasons.size === 0 ? [] : reasons,
-          comment
-        },
-        endpoints == null ? void 0 : endpoints.event
-      );
-    } catch (e) {
-      console.error(e);
-    }
-    setIndex(FEEBACK_INDEX.THANK_YOU);
-  });
-  return /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      css: {
-        p: indexSelected === FEEBACK_INDEX.INIT ? "$12 !important" : "0",
-        bg: "$surface_dim",
-        r: "$3",
-        gap: "$10"
-      },
-      direction: "column"
-    },
-    /* @__PURE__ */ React.createElement(
-      FeedbackHeader,
-      {
-        ratings,
-        indexSelected,
-        onEmojiClicked: (value) => {
-          setSelectedReasons(/* @__PURE__ */ new Set());
-          setIndex(value);
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      FeedbackForm,
-      {
-        rating: ratings[indexSelected],
-        comment,
-        setComment,
-        selectedReasons,
-        handleCheckedChange
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "submit",
-        icon: true,
-        css: {
-          alignSelf: isMobile ? "" : "end"
-        },
-        onClick: submitFeedback
-      },
-      (feedback == null ? void 0 : feedback.submit_btn_label) || "Submit Feedback"
-    )
-  );
-};
-var FeedbackHeader = ({
-  onEmojiClicked,
-  ratings,
-  indexSelected = FEEBACK_INDEX.INIT
-}) => {
-  const isMobile = useMedia(config.media.md);
-  const { feedback } = useRoomLayoutLeaveScreen();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, { align: "center" }, /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        flex: "1 1 0"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: isMobile ? "h6" : "h5",
-        css: {
-          c: "$on_surface_high",
-          fontStyle: "normal"
-        }
-      },
-      (feedback == null ? void 0 : feedback.title) || "How was your experience?"
-    ),
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: isMobile ? "body2" : "body1",
-        css: {
-          c: "$on_surface_medium",
-          opacity: 0.9,
-          fontWeight: "$regular"
-        }
-      },
-      (feedback == null ? void 0 : feedback.sub_title) || "Your answers help us improve the quality."
-    )
-  ), indexSelected !== FEEBACK_INDEX.INIT ? /* @__PURE__ */ React.createElement(CrossIcon, { width: "24px", height: "24px", color: "white", onClick: () => onEmojiClicked(FEEBACK_INDEX.INIT) }) : null), /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      justify: "between",
-      css: {
-        gap: "$17",
-        c: "$on_surface_high",
-        "@md": {
-          gap: "0"
-        }
-      }
-    },
-    ratings.map((element, index) => {
-      return /* @__PURE__ */ React.createElement(
-        Flex,
-        {
-          align: "center",
-          direction: "column",
-          css: {
-            c: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? "$on_surface_high" : "$on_surface_default",
-            gap: "$4"
-          },
-          onClick: () => onEmojiClicked(index),
-          key: `${index}`
-        },
-        /* @__PURE__ */ React.createElement(
-          Text,
-          {
-            css: {
-              fontWeight: "$semiBold",
-              fontSize: "$h4",
-              pb: "$1",
-              cursor: "pointer",
-              opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,
-              "@md": {
-                fontSize: "$h5"
-              }
-            }
-          },
-          element.emoji
-        ),
-        /* @__PURE__ */ React.createElement(
-          Text,
-          {
-            variant: isMobile ? "body2" : "body1",
-            css: {
-              c: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? "$on_surface_medium" : "$on_surface_low",
-              fontWeight: "$regular"
-            }
-          },
-          element.label
-        )
-      );
-    })
-  ));
-};
-var FeedbackForm = ({
-  rating,
-  comment,
-  setComment,
-  selectedReasons,
-  handleCheckedChange
-}) => {
-  const { feedback } = useRoomLayoutLeaveScreen();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, rating.reasons && rating.reasons.length > 0 && /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        gap: "$4"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: "sub2",
-        css: {
-          c: "$on_surface_high",
-          fontWeight: "$semiBold",
-          fontSize: "$sm",
-          px: "$2"
-        }
-      },
-      rating.question || "What do you like/dislike here?"
-    ),
-    /* @__PURE__ */ React.createElement(
-      Flex,
-      {
-        css: {
-          alignItems: "flex-start",
-          alignSelf: "stretch",
-          flexWrap: "wrap",
-          gap: "$6",
-          flex: "1 1 calc(25% - 12px)",
-          "@md": {
-            flex: "1 1 calc(50% - 12px)"
-          },
-          "@sm": {
-            flex: "1 1 100%"
-          }
-        }
-      },
-      rating.reasons.map((option, index) => {
-        return /* @__PURE__ */ React.createElement(
-          Flex,
-          {
-            align: "center",
-            gap: "2",
-            key: index,
-            css: {
-              border: "1px solid $border_bright",
-              r: "$1",
-              p: "$6"
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            Checkbox.Root,
-            {
-              id: `${option}-${index}`,
-              checked: selectedReasons.has(index),
-              onCheckedChange: (checked) => handleCheckedChange(checked, index),
-              css: {
-                cursor: "pointer",
-                flexShrink: 0,
-                bg: "$on_secondary_low",
-                border: "1px solid $border_bright"
-              }
-            },
-            /* @__PURE__ */ React.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React.createElement(CheckIcon, { width: 12, height: 12 }))
-          ),
-          /* @__PURE__ */ React.createElement(
-            Label,
-            {
-              htmlFor: `${option}-${index}`,
-              css: {
-                color: "$on_surface_high",
-                fontSize: "$sm",
-                fontWeight: "$regular",
-                lineHeight: "20px"
-              }
-            },
-            option
-          )
-        );
-      })
-    )
-  ), (feedback == null ? void 0 : feedback.comment) && /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        gap: "$4"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: "body2",
-        css: {
-          c: "$on_surface_high",
-          fontWeight: "$regular",
-          fontSize: "$sm"
-        }
-      },
-      (feedback == null ? void 0 : feedback.comment.label) || "Additional comments (optional)"
-    ),
-    /* @__PURE__ */ React.createElement(
-      TextArea,
-      {
-        maxLength: 1024,
-        placeholder: (feedback == null ? void 0 : feedback.comment.placeholder) || "Tell us more...",
-        css: {
-          backgroundColor: "$surface_bright",
-          border: "1px solid $border_bright",
-          resize: "none",
-          height: "$36",
-          display: "flex"
-        },
-        value: comment,
-        onChange: (event) => setComment(event.target.value.trimStart())
-      }
-    )
-  ));
-};
-
-// src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx
-init_define_process_env();
-import React2 from "react";
-import { useMedia as useMedia2 } from "react-use";
-import { UserMusicIcon } from "@100mslive/react-icons";
-var ThankyouView = () => {
-  const isMobile = useMedia2(config.media.md);
-  return /* @__PURE__ */ React2.createElement(
-    Flex,
-    {
-      direction: isMobile ? "column" : "row",
-      align: "center",
-      css: {
-        gap: "$10",
-        border: "1px solid $border_default",
-        borderRadius: !isMobile ? "$3" : "$3 $3 0 0",
-        bg: "$surface_dim",
-        w: !isMobile ? "528px" : "410px",
-        p: "$12",
-        pb: isMobile ? "$16" : "$12",
-        "@md": {
-          position: "absolute",
-          bottom: "0"
-        }
-      }
-    },
-    /* @__PURE__ */ React2.createElement(UserMusicIcon, { width: "64px", height: "64px" }),
-    /* @__PURE__ */ React2.createElement(Flex, { direction: "column", align: isMobile ? "center" : "start" }, /* @__PURE__ */ React2.createElement(Text, { variant: "h5" }, "Thank you for your feedback"), /* @__PURE__ */ React2.createElement(
-      Text,
-      {
-        variant: "body1",
-        css: {
-          fontWeight: "$regular",
-          fontSize: "$md",
-          opacity: "0.9"
-        }
-      },
-      "Your answers help us improve."
-    ))
-  );
-};
-
-// src/Prebuilt/components/EndCallFeedback/Feedback.tsx
-var Feedback = () => {
-  const { feedback } = useRoomLayoutLeaveScreen();
-  const [index, setIndex] = useState2(FEEBACK_INDEX.INIT);
-  const isMobile = useMedia3(config.media.md);
-  if (!feedback) {
-    return null;
-  }
-  const { ratings } = feedback;
-  if (!ratings) {
-    return null;
-  }
-  ratings.sort((a, b) => {
-    if (!a.value || !b.value) {
-      return 0;
-    }
-    return a.value - b.value;
-  });
-  if (index === FEEBACK_INDEX.THANK_YOU) {
-    return /* @__PURE__ */ React3.createElement(
-      Flex,
-      {
-        justify: "center",
-        css: {
-          pt: "$16"
-        }
-      },
-      /* @__PURE__ */ React3.createElement(ThankyouView, null)
-    );
-  }
-  return /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      justify: "center",
-      css: {
-        pt: "$16",
-        w: isMobile ? "100%" : "528px"
-      }
-    },
-    index === FEEBACK_INDEX.INIT ? /* @__PURE__ */ React3.createElement(
-      Flex,
-      {
-        css: {
-          p: isMobile ? "$10" : "$12",
-          border: "1px solid $border_default",
-          bg: "$surface_dim",
-          borderRadius: !isMobile ? "$3" : "$3 $3 0 0",
-          gap: "$10",
-          "@md": {
-            position: "absolute",
-            bottom: "0",
-            w: "100%"
-          }
-        },
-        direction: "column"
-      },
-      /* @__PURE__ */ React3.createElement(FeedbackHeader, { ratings, onEmojiClicked: setIndex })
-    ) : /* @__PURE__ */ React3.createElement(FeedbackModal, { ratings, index, setIndex })
-  );
-};
-
-// src/Prebuilt/components/LeaveScreen.tsx
-var LeaveScreen = () => {
-  const { rejoin } = useHMSAppStateContext();
-  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
-  return /* @__PURE__ */ React4.createElement(Flex, { direction: "column", css: { size: "100%" } }, /* @__PURE__ */ React4.createElement(Box, { css: { h: "$18", "@md": { h: "$17" } }, "data-testid": "header" }, /* @__PURE__ */ React4.createElement(Header, null)), /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      justify: "center",
-      direction: "column",
-      align: "center",
-      css: { bg: "$background_dim", flex: "1 1 0", position: "relative" }
-    },
-    /* @__PURE__ */ React4.createElement(Text, { variant: "h2", css: { fontWeight: "$semiBold" } }, "\u{1F44B}"),
-    /* @__PURE__ */ React4.createElement(Text, { variant: "h4", css: { color: "$on_surface_high", fontWeight: "$semiBold", mt: "$12" } }, "You left the room"),
-    /* @__PURE__ */ React4.createElement(
-      Text,
-      {
-        variant: "body1",
-        css: {
-          color: "$on_surface_medium",
-          mt: "$8",
-          fontWeight: "$regular",
-          textAlign: "center"
-        }
-      },
-      "Have a nice day",
-      previewPreference.name && /* @__PURE__ */ React4.createElement(Box, { as: "span", css: __spreadValues({}, textEllipsis(100)) }, ", ", previewPreference.name),
-      "!"
-    ),
-    /* @__PURE__ */ React4.createElement(Flex, { css: { mt: "$14", gap: "$10", alignItems: "center" } }, /* @__PURE__ */ React4.createElement(Text, { variant: "body1", css: { color: "$on_surface_medium", fontWeight: "$regular" } }, "Left by mistake?"), /* @__PURE__ */ React4.createElement(
-      Button,
-      {
-        onClick: () => {
-          rejoin();
-          ToastManager.clearAllToast();
-        },
-        "data-testid": "join_again_btn"
-      },
-      /* @__PURE__ */ React4.createElement(ExitIcon, null),
-      /* @__PURE__ */ React4.createElement(Text, { css: { ml: "$3", fontWeight: "$semiBold", color: "inherit" } }, "Rejoin")
-    )),
-    /* @__PURE__ */ React4.createElement(Feedback, null)
-  ));
-};
-export {
-  LeaveScreen
-};
-//# sourceMappingURL=LeaveScreen-D6XU64JL.js.map

package/dist/LeaveScreen-D6XU64JL.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/LeaveScreen.tsx", "../src/Prebuilt/components/EndCallFeedback/Feedback.tsx", "../src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx", "../src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { ExitIcon } from '@100mslive/react-icons';\nimport { Feedback } from './EndCallFeedback/Feedback';\n// @ts-ignore: No implicit Any\nimport { ToastManager } from './Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport { useHMSAppStateContext } from '../AppStateContext';\nimport { Header } from './Header';\n// @ts-ignore: No implicit Any\nimport { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';\nimport { textEllipsis } from '../../utils';\n\nexport const LeaveScreen = () => {\n  const { rejoin } = useHMSAppStateContext();\n  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);\n  return (\n    <Flex direction=\"column\" css={{ size: '100%' }}>\n      <Box css={{ h: '$18', '@md': { h: '$17' } }} data-testid=\"header\">\n        <Header />\n      </Box>\n      <Flex\n        justify=\"center\"\n        direction=\"column\"\n        align=\"center\"\n        css={{ bg: '$background_dim', flex: '1 1 0', position: 'relative' }}\n      >\n        <Text variant=\"h2\" css={{ fontWeight: '$semiBold' }}>\n          \uD83D\uDC4B\n        </Text>\n        <Text variant=\"h4\" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mt: '$12' }}>\n          You left the room\n        </Text>\n        <Text\n          variant=\"body1\"\n          css={{\n            color: '$on_surface_medium',\n            mt: '$8',\n            fontWeight: '$regular',\n            textAlign: 'center',\n          }}\n        >\n          Have a nice day\n          {previewPreference.name && (\n            <Box as=\"span\" css={{ ...textEllipsis(100) }}>\n              , {previewPreference.name}\n            </Box>\n          )}\n          !\n        </Text>\n        <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>\n          <Text variant=\"body1\" css={{ color: '$on_surface_medium', fontWeight: '$regular' }}>\n            Left by mistake?\n          </Text>\n          <Button\n            onClick={() => {\n              rejoin();\n              ToastManager.clearAllToast();\n            }}\n            data-testid=\"join_again_btn\"\n          >\n            <ExitIcon />\n            <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>\n          </Button>\n        </Flex>\n        <Feedback />\n      </Flex>\n    </Flex>\n  );\n};\n", "import React, { useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { Flex } from '../../../Layout';\nimport { config as cssConfig } from '../../../Theme';\nimport { FEEBACK_INDEX, FeedbackHeader, FeedbackModal } from './FeedbackForm';\nimport { ThankyouView } from './ThankyouView';\nimport { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\n\nexport const Feedback = () => {\n  const { feedback } = useRoomLayoutLeaveScreen();\n  const [index, setIndex] = useState(FEEBACK_INDEX.INIT);\n  const isMobile = useMedia(cssConfig.media.md);\n\n  if (!feedback) {\n    return null;\n  }\n  const { ratings } = feedback;\n  if (!ratings) {\n    return null;\n  }\n  ratings.sort((a, b) => {\n    if (!a.value || !b.value) {\n      return 0;\n    }\n    return a.value - b.value;\n  });\n  // TO show thank ypu page\n  if (index === FEEBACK_INDEX.THANK_YOU) {\n    return (\n      <Flex\n        justify=\"center\"\n        css={{\n          pt: '$16',\n        }}\n      >\n        <ThankyouView />\n      </Flex>\n    );\n  }\n  return (\n    <Flex\n      justify=\"center\"\n      css={{\n        pt: '$16',\n        w: isMobile ? '100%' : '528px',\n      }}\n    >\n      {index === FEEBACK_INDEX.INIT ? (\n        <Flex\n          css={{\n            p: isMobile ? '$10' : '$12',\n            border: '1px solid $border_default',\n            bg: '$surface_dim',\n            borderRadius: !isMobile ? '$3' : '$3 $3 0 0',\n            gap: '$10',\n            '@md': {\n              position: 'absolute',\n              bottom: '0',\n              w: '100%',\n            },\n          }}\n          direction=\"column\"\n        >\n          <FeedbackHeader ratings={ratings} onEmojiClicked={setIndex} />\n        </Flex>\n      ) : (\n        <FeedbackModal ratings={ratings} index={index} setIndex={setIndex} />\n      )}\n    </Flex>\n  );\n};\n", "import React, { useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { Rating } from '@100mslive/types-prebuilt/elements/feedback';\nimport { useHMSActions } from '@100mslive/react-sdk';\nimport { CheckIcon, CrossIcon } from '@100mslive/react-icons';\nimport { Button } from '../../../Button';\nimport { Checkbox } from '../../../Checkbox';\nimport { Label } from '../../../Label';\nimport { Flex } from '../../../Layout';\nimport { Dialog } from '../../../Modal';\nimport { Sheet } from '../../../Sheet';\nimport { Text } from '../../../Text';\nimport { TextArea } from '../../../TextArea';\nimport { config as cssConfig } from '../../../Theme';\nimport { useHMSPrebuiltContext } from '../../AppContext';\nimport { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\n\nexport const FEEBACK_INDEX = {\n  THANK_YOU: -10,\n  INIT: -1,\n};\nexport const FeedbackModal = ({\n  ratings,\n  index,\n  setIndex,\n}: {\n  ratings: Rating[];\n  index: number;\n  setIndex: (index: number) => void;\n}) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const onOpenChange = () => {\n    setIndex(FEEBACK_INDEX.INIT);\n  };\n  const avoidDefaultDomBehavior = (e: Event) => {\n    e.preventDefault();\n  };\n  if (isMobile) {\n    return (\n      <Sheet.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>\n        <Sheet.Content\n          css={{ bg: '$surface_dim', p: '$10', overflowY: 'auto' }}\n          onPointerDownOutside={avoidDefaultDomBehavior}\n          onInteractOutside={avoidDefaultDomBehavior}\n        >\n          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />\n        </Sheet.Content>\n      </Sheet.Root>\n    );\n  }\n  return (\n    <Dialog.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>\n      <Dialog.Portal>\n        <Dialog.Overlay />\n        <Dialog.Content\n          css={{ bg: '$surface_dim', width: '528px', p: '$12' }}\n          onPointerDownOutside={avoidDefaultDomBehavior}\n          onInteractOutside={avoidDefaultDomBehavior}\n        >\n          <FeedbackContent ratings={ratings} indexSelected={index} setIndex={setIndex} />\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport const FeedbackContent = ({\n  ratings,\n  indexSelected,\n  setIndex,\n}: {\n  ratings: Rating[];\n  indexSelected: number;\n  setIndex: (index: number) => void;\n}) => {\n  const { feedback } = useRoomLayoutLeaveScreen();\n  const { endpoints } = useHMSPrebuiltContext();\n  const isMobile = useMedia(cssConfig.media.md);\n  const hmsActions = useHMSActions();\n  const [comment, setComment] = useState('');\n  const [selectedReasons, setSelectedReasons] = useState(new Set<number>());\n  const handleCheckedChange = (checked: boolean | string, index: number) => {\n    const newSelected = new Set(selectedReasons);\n    if (checked) {\n      newSelected.add(index);\n    } else {\n      newSelected.delete(index);\n    }\n    setSelectedReasons(newSelected);\n  };\n  const submitFeedback = async () => {\n    if (indexSelected < 0 || ratings.length <= indexSelected) {\n      return;\n    }\n    try {\n      const reasons = [...selectedReasons].map((value: number) => ratings[indexSelected]?.reasons?.[value] || '');\n      await hmsActions.submitSessionFeedback(\n        {\n          question: `${feedback?.title} | ${ratings[indexSelected].question || ''}`,\n          rating: ratings[indexSelected].value || 1,\n          min_rating: 1,\n          max_rating: ratings.length,\n          reasons: selectedReasons.size === 0 ? [] : reasons,\n          comment: comment,\n        },\n        endpoints?.event,\n      );\n    } catch (e) {\n      console.error(e);\n    }\n    // always submit and take it to thankyou page\n    setIndex(FEEBACK_INDEX.THANK_YOU);\n  };\n  return (\n    <Flex\n      css={{\n        p: indexSelected === FEEBACK_INDEX.INIT ? '$12 !important' : '0',\n        bg: '$surface_dim',\n        r: '$3',\n        gap: '$10',\n      }}\n      direction=\"column\"\n    >\n      <FeedbackHeader\n        ratings={ratings}\n        indexSelected={indexSelected}\n        onEmojiClicked={(value: number) => {\n          setSelectedReasons(new Set<number>());\n          setIndex(value);\n        }}\n      />\n      <FeedbackForm\n        rating={ratings[indexSelected]}\n        comment={comment}\n        setComment={setComment}\n        selectedReasons={selectedReasons}\n        handleCheckedChange={handleCheckedChange}\n      />\n      <Button\n        type=\"submit\"\n        icon\n        css={{\n          alignSelf: isMobile ? '' : 'end',\n        }}\n        onClick={submitFeedback}\n      >\n        {feedback?.submit_btn_label || 'Submit Feedback'}\n      </Button>\n    </Flex>\n  );\n};\nexport const FeedbackHeader = ({\n  onEmojiClicked,\n  ratings,\n  indexSelected = FEEBACK_INDEX.INIT,\n}: {\n  onEmojiClicked: (index: number) => void;\n  ratings: Rating[];\n  indexSelected?: number;\n}) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const { feedback } = useRoomLayoutLeaveScreen();\n  return (\n    <>\n      <Flex align=\"center\">\n        <Flex\n          direction=\"column\"\n          css={{\n            flex: '1 1 0',\n          }}\n        >\n          <Text\n            variant={isMobile ? 'h6' : 'h5'}\n            css={{\n              c: '$on_surface_high',\n              fontStyle: 'normal',\n            }}\n          >\n            {feedback?.title || 'How was your experience?'}\n          </Text>\n          <Text\n            variant={isMobile ? 'body2' : 'body1'}\n            css={{\n              c: '$on_surface_medium',\n              opacity: 0.9,\n              fontWeight: '$regular',\n            }}\n          >\n            {feedback?.sub_title || 'Your answers help us improve the quality.'}\n          </Text>\n        </Flex>\n        {indexSelected !== FEEBACK_INDEX.INIT ? (\n          <CrossIcon width=\"24px\" height=\"24px\" color=\"white\" onClick={() => onEmojiClicked(FEEBACK_INDEX.INIT)} />\n        ) : null}\n      </Flex>\n      <Flex\n        justify=\"between\"\n        css={{\n          gap: '$17',\n          c: '$on_surface_high',\n          '@md': {\n            gap: '0',\n          },\n        }}\n      >\n        {ratings.map((element, index) => {\n          return (\n            <Flex\n              align=\"center\"\n              direction=\"column\"\n              css={{\n                c:\n                  indexSelected === index || indexSelected === FEEBACK_INDEX.INIT\n                    ? '$on_surface_high'\n                    : '$on_surface_default',\n                gap: '$4',\n              }}\n              onClick={() => onEmojiClicked(index)}\n              key={`${index}`}\n            >\n              <Text\n                css={{\n                  fontWeight: '$semiBold',\n                  fontSize: '$h4',\n                  pb: '$1',\n                  cursor: 'pointer',\n                  opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,\n                  '@md': {\n                    fontSize: '$h5',\n                  },\n                }}\n              >\n                {element.emoji}\n              </Text>\n              <Text\n                variant={isMobile ? 'body2' : 'body1'}\n                css={{\n                  c:\n                    indexSelected === index || indexSelected === FEEBACK_INDEX.INIT\n                      ? '$on_surface_medium'\n                      : '$on_surface_low',\n                  fontWeight: '$regular',\n                }}\n              >\n                {element.label}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Flex>\n    </>\n  );\n};\nexport const FeedbackForm = ({\n  rating,\n  comment,\n  setComment,\n  selectedReasons,\n  handleCheckedChange,\n}: {\n  rating: Rating;\n  comment: string;\n  setComment: (value: string) => void;\n  selectedReasons: Set<number>;\n  handleCheckedChange: (checked: string | boolean, index: number) => void;\n}) => {\n  const { feedback } = useRoomLayoutLeaveScreen();\n  return (\n    <>\n      {rating.reasons && rating.reasons.length > 0 && (\n        <Flex\n          direction=\"column\"\n          css={{\n            gap: '$4',\n          }}\n        >\n          <Text\n            variant=\"sub2\"\n            css={{\n              c: '$on_surface_high',\n              fontWeight: '$semiBold',\n              fontSize: '$sm',\n              px: '$2',\n            }}\n          >\n            {rating.question || 'What do you like/dislike here?'}\n          </Text>\n          <Flex\n            css={{\n              alignItems: 'flex-start',\n              alignSelf: 'stretch',\n              flexWrap: 'wrap',\n              gap: '$6',\n              flex: '1 1 calc(25% - 12px)',\n              '@md': {\n                flex: '1 1 calc(50% - 12px)',\n              },\n              '@sm': {\n                flex: '1 1 100%',\n              },\n            }}\n          >\n            {rating.reasons.map((option: string, index: number) => {\n              return (\n                <Flex\n                  align=\"center\"\n                  gap=\"2\"\n                  key={index}\n                  css={{\n                    border: '1px solid $border_bright',\n                    r: '$1',\n                    p: '$6',\n                  }}\n                >\n                  <Checkbox.Root\n                    id={`${option}-${index}`}\n                    checked={selectedReasons.has(index)}\n                    onCheckedChange={checked => handleCheckedChange(checked, index)}\n                    css={{\n                      cursor: 'pointer',\n                      flexShrink: 0,\n                      bg: '$on_secondary_low',\n                      border: '1px solid $border_bright',\n                    }}\n                  >\n                    <Checkbox.Indicator>\n                      <CheckIcon width={12} height={12} />\n                    </Checkbox.Indicator>\n                  </Checkbox.Root>\n                  <Label\n                    htmlFor={`${option}-${index}`}\n                    css={{\n                      color: '$on_surface_high',\n                      fontSize: '$sm',\n                      fontWeight: '$regular',\n                      lineHeight: '20px' /* 142.857% */,\n                    }}\n                  >\n                    {option}\n                  </Label>\n                </Flex>\n              );\n            })}\n          </Flex>\n        </Flex>\n      )}\n      {feedback?.comment && (\n        <Flex\n          direction=\"column\"\n          css={{\n            gap: '$4',\n          }}\n        >\n          <Text\n            variant=\"body2\"\n            css={{\n              c: '$on_surface_high',\n              fontWeight: '$regular',\n              fontSize: '$sm',\n            }}\n          >\n            {feedback?.comment.label || 'Additional comments (optional)'}\n          </Text>\n          <TextArea\n            maxLength={1024}\n            placeholder={feedback?.comment.placeholder || 'Tell us more...'}\n            css={{\n              backgroundColor: '$surface_bright',\n              border: '1px solid $border_bright',\n              resize: 'none',\n              height: '$36',\n              display: 'flex',\n            }}\n            value={comment}\n            onChange={event => setComment(event.target.value.trimStart())}\n          />\n        </Flex>\n      )}\n    </>\n  );\n};\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { UserMusicIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { config as cssConfig } from '../../../Theme';\n\nexport const ThankyouView = () => {\n  const isMobile = useMedia(cssConfig.media.md);\n  return (\n    <Flex\n      direction={isMobile ? 'column' : 'row'}\n      align=\"center\"\n      css={{\n        gap: '$10',\n        border: '1px solid $border_default',\n        borderRadius: !isMobile ? '$3' : '$3 $3 0 0',\n        bg: '$surface_dim',\n        w: !isMobile ? '528px' : '410px',\n        p: '$12',\n        pb: isMobile ? '$16' : '$12',\n        '@md': {\n          position: 'absolute',\n          bottom: '0',\n        },\n      }}\n    >\n      <UserMusicIcon width=\"64px\" height=\"64px\" />\n      <Flex direction=\"column\" align={isMobile ? 'center' : 'start'}>\n        <Text variant=\"h5\">Thank you for your feedback</Text>\n        <Text\n          variant=\"body1\"\n          css={{\n            fontWeight: '$regular',\n            fontSize: '$md',\n            opacity: '0.9',\n          }}\n        >\n          Your answers help us improve.\n        </Text>\n      </Flex>\n    </Flex>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,OAAOA,YAAW;AAClB,SAAS,gBAAgB;;;ACDzB;AAAA,OAAOC,UAAS,YAAAC,iBAAgB;AAChC,SAAS,YAAAC,iBAAgB;;;ACDzB;AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB;AAC9B,SAAS,WAAW,iBAAiB;AAa9B,IAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,MAAM;AACR;AACO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,WAAW,SAAS,OAAU,MAAM,EAAE;AAC5C,QAAM,eAAe,MAAM;AACzB,aAAS,cAAc,IAAI;AAAA,EAC7B;AACA,QAAM,0BAA0B,CAAC,MAAa;AAC5C,MAAE,eAAe;AAAA,EACnB;AACA,MAAI,UAAU;AACZ,WACE,oCAAC,MAAM,MAAN,EAAW,MAAM,UAAU,cAAc,MAAM,gBAC9C;AAAA,MAAC,MAAM;AAAA,MAAN;AAAA,QACC,KAAK,EAAE,IAAI,gBAAgB,GAAG,OAAO,WAAW,OAAO;AAAA,QACvD,sBAAsB;AAAA,QACtB,mBAAmB;AAAA;AAAA,MAEnB,oCAAC,mBAAgB,SAAkB,eAAe,OAAO,UAAoB;AAAA,IAC/E,CACF;AAAA,EAEJ;AACA,SACE,oCAAC,OAAO,MAAP,EAAY,MAAM,UAAU,cAAc,MAAM,gBAC/C,oCAAC,OAAO,QAAP,MACC,oCAAC,OAAO,SAAP,IAAe,GAChB;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,KAAK,EAAE,IAAI,gBAAgB,OAAO,SAAS,GAAG,MAAM;AAAA,MACpD,sBAAsB;AAAA,MACtB,mBAAmB;AAAA;AAAA,IAEnB,oCAAC,mBAAgB,SAAkB,eAAe,OAAO,UAAoB;AAAA,EAC/E,CACF,CACF;AAEJ;AAEO,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,EAAE,SAAS,IAAI,yBAAyB;AAC9C,QAAM,EAAE,UAAU,IAAI,sBAAsB;AAC5C,QAAM,WAAW,SAAS,OAAU,MAAM,EAAE;AAC5C,QAAM,aAAa,cAAc;AACjC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,oBAAI,IAAY,CAAC;AACxE,QAAM,sBAAsB,CAAC,SAA2B,UAAkB;AACxE,UAAM,cAAc,IAAI,IAAI,eAAe;AAC3C,QAAI,SAAS;AACX,kBAAY,IAAI,KAAK;AAAA,IACvB,OAAO;AACL,kBAAY,OAAO,KAAK;AAAA,IAC1B;AACA,uBAAmB,WAAW;AAAA,EAChC;AACA,QAAM,iBAAiB,MAAY;AACjC,QAAI,gBAAgB,KAAK,QAAQ,UAAU,eAAe;AACxD;AAAA,IACF;AACA,QAAI;AACF,YAAM,UAAU,CAAC,GAAG,eAAe,EAAE,IAAI,CAAC,UAAe;AA/F/D;AA+FkE,oCAAQ,aAAa,MAArB,mBAAwB,YAAxB,mBAAkC,WAAU;AAAA,OAAE;AAC1G,YAAM,WAAW;AAAA,QACf;AAAA,UACE,UAAU,GAAG,qCAAU,KAAK,MAAM,QAAQ,aAAa,EAAE,YAAY,EAAE;AAAA,UACvE,QAAQ,QAAQ,aAAa,EAAE,SAAS;AAAA,UACxC,YAAY;AAAA,UACZ,YAAY,QAAQ;AAAA,UACpB,SAAS,gBAAgB,SAAS,IAAI,CAAC,IAAI;AAAA,UAC3C;AAAA,QACF;AAAA,QACA,uCAAW;AAAA,MACb;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AAEA,aAAS,cAAc,SAAS;AAAA,EAClC;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,GAAG,kBAAkB,cAAc,OAAO,mBAAmB;AAAA,QAC7D,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,KAAK;AAAA,MACP;AAAA,MACA,WAAU;AAAA;AAAA,IAEV;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC,UAAkB;AACjC,6BAAmB,oBAAI,IAAY,CAAC;AACpC,mBAAS,KAAK;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,QAAQ,aAAa;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAI;AAAA,QACJ,KAAK;AAAA,UACH,WAAW,WAAW,KAAK;AAAA,QAC7B;AAAA,QACA,SAAS;AAAA;AAAA,OAER,qCAAU,qBAAoB;AAAA,IACjC;AAAA,EACF;AAEJ;AACO,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,gBAAgB,cAAc;AAChC,MAIM;AACJ,QAAM,WAAW,SAAS,OAAU,MAAM,EAAE;AAC5C,QAAM,EAAE,SAAS,IAAI,yBAAyB;AAC9C,SACE,0DACE,oCAAC,QAAK,OAAM,YACV;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,QACH,MAAM;AAAA,MACR;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,WAAW,OAAO;AAAA,QAC3B,KAAK;AAAA,UACH,GAAG;AAAA,UACH,WAAW;AAAA,QACb;AAAA;AAAA,OAEC,qCAAU,UAAS;AAAA,IACtB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,WAAW,UAAU;AAAA,QAC9B,KAAK;AAAA,UACH,GAAG;AAAA,UACH,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA;AAAA,OAEC,qCAAU,cAAa;AAAA,IAC1B;AAAA,EACF,GACC,kBAAkB,cAAc,OAC/B,oCAAC,aAAU,OAAM,QAAO,QAAO,QAAO,OAAM,SAAQ,SAAS,MAAM,eAAe,cAAc,IAAI,GAAG,IACrG,IACN,GACA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,KAAK;AAAA,QACH,KAAK;AAAA,QACL,GAAG;AAAA,QACH,OAAO;AAAA,UACL,KAAK;AAAA,QACP;AAAA,MACF;AAAA;AAAA,IAEC,QAAQ,IAAI,CAAC,SAAS,UAAU;AAC/B,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAK;AAAA,YACH,GACE,kBAAkB,SAAS,kBAAkB,cAAc,OACvD,qBACA;AAAA,YACN,KAAK;AAAA,UACP;AAAA,UACA,SAAS,MAAM,eAAe,KAAK;AAAA,UACnC,KAAK,GAAG,KAAK;AAAA;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,cACH,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,IAAI;AAAA,cACJ,QAAQ;AAAA,cACR,SAAS,kBAAkB,SAAS,kBAAkB,cAAc,OAAO,IAAI;AAAA,cAC/E,OAAO;AAAA,gBACL,UAAU;AAAA,cACZ;AAAA,YACF;AAAA;AAAA,UAEC,QAAQ;AAAA,QACX;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,WAAW,UAAU;AAAA,YAC9B,KAAK;AAAA,cACH,GACE,kBAAkB,SAAS,kBAAkB,cAAc,OACvD,uBACA;AAAA,cACN,YAAY;AAAA,YACd;AAAA;AAAA,UAEC,QAAQ;AAAA,QACX;AAAA,MACF;AAAA,IAEJ,CAAC;AAAA,EACH,CACF;AAEJ;AACO,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,EAAE,SAAS,IAAI,yBAAyB;AAC9C,SACE,0DACG,OAAO,WAAW,OAAO,QAAQ,SAAS,KACzC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,QACH,KAAK;AAAA,MACP;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,GAAG;AAAA,UACH,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,IAAI;AAAA,QACN;AAAA;AAAA,MAEC,OAAO,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,UACH,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,YACL,MAAM;AAAA,UACR;AAAA,UACA,OAAO;AAAA,YACL,MAAM;AAAA,UACR;AAAA,QACF;AAAA;AAAA,MAEC,OAAO,QAAQ,IAAI,CAAC,QAAgB,UAAkB;AACrD,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,KAAK;AAAA,YACL,KAAK;AAAA,cACH,QAAQ;AAAA,cACR,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA;AAAA,UAEA;AAAA,YAAC,SAAS;AAAA,YAAT;AAAA,cACC,IAAI,GAAG,MAAM,IAAI,KAAK;AAAA,cACtB,SAAS,gBAAgB,IAAI,KAAK;AAAA,cAClC,iBAAiB,aAAW,oBAAoB,SAAS,KAAK;AAAA,cAC9D,KAAK;AAAA,gBACH,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,IAAI;AAAA,gBACJ,QAAQ;AAAA,cACV;AAAA;AAAA,YAEA,oCAAC,SAAS,WAAT,MACC,oCAAC,aAAU,OAAO,IAAI,QAAQ,IAAI,CACpC;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,GAAG,MAAM,IAAI,KAAK;AAAA,cAC3B,KAAK;AAAA,gBACH,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,YAAY;AAAA,cACd;AAAA;AAAA,YAEC;AAAA,UACH;AAAA,QACF;AAAA,MAEJ,CAAC;AAAA,IACH;AAAA,EACF,IAED,qCAAU,YACT;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,QACH,KAAK;AAAA,MACP;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,GAAG;AAAA,UACH,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA;AAAA,OAEC,qCAAU,QAAQ,UAAS;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,cAAa,qCAAU,QAAQ,gBAAe;AAAA,QAC9C,KAAK;AAAA,UACH,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,SAAS;AAAA,QACX;AAAA,QACA,OAAO;AAAA,QACP,UAAU,WAAS,WAAW,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA;AAAA,IAC9D;AAAA,EACF,CAEJ;AAEJ;;;AC5XA;AAAA,OAAOC,YAAW;AAClB,SAAS,YAAAC,iBAAgB;AACzB,SAAS,qBAAqB;AAKvB,IAAM,eAAe,MAAM;AAChC,QAAM,WAAWC,UAAS,OAAU,MAAM,EAAE;AAC5C,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,WAAW;AAAA,MACjC,OAAM;AAAA,MACN,KAAK;AAAA,QACH,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,cAAc,CAAC,WAAW,OAAO;AAAA,QACjC,IAAI;AAAA,QACJ,GAAG,CAAC,WAAW,UAAU;AAAA,QACzB,GAAG;AAAA,QACH,IAAI,WAAW,QAAQ;AAAA,QACvB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,QACV;AAAA,MACF;AAAA;AAAA,IAEA,gBAAAA,OAAA,cAAC,iBAAc,OAAM,QAAO,QAAO,QAAO;AAAA,IAC1C,gBAAAA,OAAA,cAAC,QAAK,WAAU,UAAS,OAAO,WAAW,WAAW,WACpD,gBAAAA,OAAA,cAAC,QAAK,SAAQ,QAAK,6BAA2B,GAC9C,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,QACX;AAAA;AAAA,MACD;AAAA,IAED,CACF;AAAA,EACF;AAEJ;;;AFnCO,IAAM,WAAW,MAAM;AAC5B,QAAM,EAAE,SAAS,IAAI,yBAAyB;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAIC,UAAS,cAAc,IAAI;AACrD,QAAM,WAAWC,UAAS,OAAU,MAAM,EAAE;AAE5C,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AACA,QAAM,EAAE,QAAQ,IAAI;AACpB,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AACA,UAAQ,KAAK,CAAC,GAAG,MAAM;AACrB,QAAI,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO;AACxB,aAAO;AAAA,IACT;AACA,WAAO,EAAE,QAAQ,EAAE;AAAA,EACrB,CAAC;AAED,MAAI,UAAU,cAAc,WAAW;AACrC,WACE,gBAAAC,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,IAAI;AAAA,QACN;AAAA;AAAA,MAEA,gBAAAA,OAAA,cAAC,kBAAa;AAAA,IAChB;AAAA,EAEJ;AACA,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,KAAK;AAAA,QACH,IAAI;AAAA,QACJ,GAAG,WAAW,SAAS;AAAA,MACzB;AAAA;AAAA,IAEC,UAAU,cAAc,OACvB,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,UACH,GAAG,WAAW,QAAQ;AAAA,UACtB,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,cAAc,CAAC,WAAW,OAAO;AAAA,UACjC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,GAAG;AAAA,UACL;AAAA,QACF;AAAA,QACA,WAAU;AAAA;AAAA,MAEV,gBAAAA,OAAA,cAAC,kBAAe,SAAkB,gBAAgB,UAAU;AAAA,IAC9D,IAEA,gBAAAA,OAAA,cAAC,iBAAc,SAAkB,OAAc,UAAoB;AAAA,EAEvE;AAEJ;;;ADxDO,IAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,OAAO,IAAI,sBAAsB;AACzC,QAAM,CAAC,iBAAiB,IAAI,mBAAmB,oBAAoB,SAAS,wBAAwB;AACpG,SACE,gBAAAC,OAAA,cAAC,QAAK,WAAU,UAAS,KAAK,EAAE,MAAM,OAAO,KAC3C,gBAAAA,OAAA,cAAC,OAAI,KAAK,EAAE,GAAG,OAAO,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,eAAY,YACvD,gBAAAA,OAAA,cAAC,YAAO,CACV,GACA,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,OAAM;AAAA,MACN,KAAK,EAAE,IAAI,mBAAmB,MAAM,SAAS,UAAU,WAAW;AAAA;AAAA,IAElE,gBAAAA,OAAA,cAAC,QAAK,SAAQ,MAAK,KAAK,EAAE,YAAY,YAAY,KAAG,WAErD;AAAA,IACA,gBAAAA,OAAA,cAAC,QAAK,SAAQ,MAAK,KAAK,EAAE,OAAO,oBAAoB,YAAY,aAAa,IAAI,MAAM,KAAG,mBAE3F;AAAA,IACA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,OAAO;AAAA,UACP,IAAI;AAAA,UACJ,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA;AAAA,MACD;AAAA,MAEE,kBAAkB,QACjB,gBAAAA,OAAA,cAAC,OAAI,IAAG,QAAO,KAAK,mBAAK,aAAa,GAAG,MAAK,MACzC,kBAAkB,IACvB;AAAA,MACA;AAAA,IAEJ;AAAA,IACA,gBAAAA,OAAA,cAAC,QAAK,KAAK,EAAE,IAAI,OAAO,KAAK,OAAO,YAAY,SAAS,KACvD,gBAAAA,OAAA,cAAC,QAAK,SAAQ,SAAQ,KAAK,EAAE,OAAO,sBAAsB,YAAY,WAAW,KAAG,kBAEpF,GACA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,iBAAO;AACP,uBAAa,cAAc;AAAA,QAC7B;AAAA,QACA,eAAY;AAAA;AAAA,MAEZ,gBAAAA,OAAA,cAAC,cAAS;AAAA,MACV,gBAAAA,OAAA,cAAC,QAAK,KAAK,EAAE,IAAI,MAAM,YAAY,aAAa,OAAO,UAAU,KAAG,QAAM;AAAA,IAC5E,CACF;AAAA,IACA,gBAAAA,OAAA,cAAC,cAAS;AAAA,EACZ,CACF;AAEJ;",
-  "names": ["React", "React", "useState", "useMedia", "React", "useMedia", "useMedia", "React", "useState", "useMedia", "React", "React"]
-}