@stream-io/video-react-sdk 1.41.0 → 1.42.0

package/dist/esm/src/embedded/shared/CallFeedback/CallFeedback.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+import { CallEndedScreen } from './CallEndedScreen.js';
+import { RatingScreen } from './RatingScreen.js';
+import { ThankYouScreen } from './ThankYouScreen.js';
+import { useEmbeddedConfiguration } from '../../context/ConfigurationContext.js';
+
+const CallFeedback = ({ onJoin }) => {
+    const call = useCall();
+    const { onError } = useEmbeddedConfiguration();
+    const [state, setState] = useState('ended');
+    const onFeedback = useCallback(() => setState('rating'), []);
+    const handleSubmit = useCallback(async (rating, message) => {
+        if (!call)
+            return;
+        const clampedRating = Math.min(Math.max(1, rating), 5);
+        try {
+            await call.submitFeedback(clampedRating, {
+                reason: message,
+                custom: { message },
+            });
+        }
+        catch (err) {
+            onError?.(err);
+        }
+        finally {
+            setState('submitted');
+        }
+    }, [call, onError]);
+    return (jsx("div", { className: "str-video__embedded-call-feedback", children: state === 'submitted' ? (jsx(ThankYouScreen, {})) : state === 'rating' ? (jsx(RatingScreen, { onSubmit: handleSubmit })) : (jsx(CallEndedScreen, { onJoin: onJoin, onFeedback: onFeedback })) }));
+};
+
+export { CallFeedback };
+//# sourceMappingURL=CallFeedback.js.map

package/dist/esm/src/embedded/shared/CallFeedback/CallFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallFeedback.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/CallFeedback.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { CallEndedScreen } from './CallEndedScreen';\nimport { RatingScreen } from './RatingScreen';\nimport { ThankYouScreen } from './ThankYouScreen';\nimport { useEmbeddedConfiguration } from '../../context';\n\nexport interface CallFeedbackProps {\n  onJoin?: () => void;\n}\n\ntype FeedbackState = 'ended' | 'rating' | 'submitted';\n\nexport const CallFeedback = ({ onJoin }: CallFeedbackProps) => {\n  const call = useCall();\n  const { onError } = useEmbeddedConfiguration();\n  const [state, setState] = useState<FeedbackState>('ended');\n\n  const onFeedback = useCallback(() => setState('rating'), []);\n\n  const handleSubmit = useCallback(\n    async (rating: number, message: string) => {\n      if (!call) return;\n\n      const clampedRating = Math.min(Math.max(1, rating), 5);\n      try {\n        await call.submitFeedback(clampedRating, {\n          reason: message,\n          custom: { message },\n        });\n      } catch (err) {\n        onError?.(err);\n      } finally {\n        setState('submitted');\n      }\n    },\n    [call, onError],\n  );\n\n  return (\n    <div className=\"str-video__embedded-call-feedback\">\n      {state === 'submitted' ? (\n        <ThankYouScreen />\n      ) : state === 'rating' ? (\n        <RatingScreen onSubmit={handleSubmit} />\n      ) : (\n        <CallEndedScreen onJoin={onJoin} onFeedback={onFeedback} />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;MAaa,YAAY,GAAG,CAAC,EAAE,MAAM,EAAqB,KAAI;AAC5D,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,OAAO,CAAC;AAE1D,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;IAE5D,MAAM,YAAY,GAAG,WAAW,CAC9B,OAAO,MAAc,EAAE,OAAe,KAAI;AACxC,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;AACtD,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;AACvC,gBAAA,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,EAAE,OAAO,EAAE;AACpB,aAAA,CAAC;QACJ;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,GAAG,GAAG,CAAC;QAChB;gBAAU;YACR,QAAQ,CAAC,WAAW,CAAC;QACvB;AACF,IAAA,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,YAC/C,KAAK,KAAK,WAAW,IACpBA,GAAA,CAAC,cAAc,EAAA,EAAA,CAAG,IAChB,KAAK,KAAK,QAAQ,IACpBA,GAAA,CAAC,YAAY,EAAA,EAAC,QAAQ,EAAE,YAAY,GAAI,KAExCA,GAAA,CAAC,eAAe,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAA,CAAI,CAC5D,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/RatingScreen.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { StarRating } from './StarRating.js';
+
+const RatingScreen = ({ onSubmit }) => {
+    const { t } = useI18n();
+    const [rating, setRating] = useState(0);
+    const [message, setMessage] = useState('');
+    const handleSubmit = () => {
+        if (rating > 0)
+            onSubmit(rating, message);
+    };
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Share your feedback') }), jsx(StarRating, { value: rating, onChange: setRating }), jsx("textarea", { "aria-label": t('Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsx("button", { type: "button", className: "str-video__button", onClick: handleSubmit, disabled: rating === 0, children: t('Submit feedback') }) })] }));
+};
+
+export { RatingScreen };
+//# sourceMappingURL=RatingScreen.js.map

package/dist/esm/src/embedded/shared/CallFeedback/RatingScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/RatingScreen.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { StarRating } from './StarRating';\n\ninterface RatingScreenProps {\n  onSubmit: (rating: number, message: string) => void;\n}\n\nexport const RatingScreen = ({ onSubmit }: RatingScreenProps) => {\n  const { t } = useI18n();\n  const [rating, setRating] = useState(0);\n  const [message, setMessage] = useState('');\n\n  const handleSubmit = () => {\n    if (rating > 0) onSubmit(rating, message);\n  };\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Share your feedback')}\n      </h2>\n\n      <StarRating value={rating} onChange={setRating} />\n\n      <textarea\n        aria-label={t('Feedback message')}\n        className=\"str-video__embedded-call-feedback__textarea\"\n        placeholder={t('Tell us about your experience...')}\n        value={message}\n        onChange={(e) => setMessage(e.target.value)}\n        rows={3}\n      />\n\n      <div className=\"str-video__embedded-call-feedback__actions\">\n        <button\n          type=\"button\"\n          className=\"str-video__button\"\n          onClick={handleSubmit}\n          disabled={rating === 0}\n        >\n          {t('Submit feedback')}\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;MAQa,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAC9D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAE1C,MAAM,YAAY,GAAG,MAAK;QACxB,IAAI,MAAM,GAAG,CAAC;AAAE,YAAA,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAC3C,IAAA,CAAC;IAED,QACEA,cAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,qBAAqB,CAAC,EAAA,CACtB,EAELA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAI,EAElDA,GAAA,CAAA,UAAA,EAAA,EAAA,YAAA,EACc,CAAC,CAAC,kBAAkB,CAAC,EACjC,SAAS,EAAC,6CAA6C,EACvD,WAAW,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAClD,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3C,IAAI,EAAE,CAAC,EAAA,CACP,EAEFA,aAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EACzDA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAA,QAAA,EAErB,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACd,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/StarRating.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useI18n } from '@stream-io/video-react-bindings';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const StarRating = ({ value, onChange }) => {
+    const { t } = useI18n();
+    const [hovered, setHovered] = useState(0);
+    const displayValue = hovered || value;
+    const getStarClasses = (star) => clsx('str-video__embedded-call-feedback__star', star <= displayValue && 'str-video__embedded-call-feedback__star--active');
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('How was your call quality?') }), jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('Rate {{ count }} star', { count: star }), children: jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
+};
+
+export { StarRating };
+//# sourceMappingURL=StarRating.js.map

package/dist/esm/src/embedded/shared/CallFeedback/StarRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/StarRating.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface StarRatingProps {\n  value: number;\n  onChange: (rating: number) => void;\n}\n\nexport const StarRating = ({ value, onChange }: StarRatingProps) => {\n  const { t } = useI18n();\n  const [hovered, setHovered] = useState(0);\n  const displayValue = hovered || value;\n\n  const getStarClasses = (star: number) =>\n    clsx(\n      'str-video__embedded-call-feedback__star',\n      star <= displayValue && 'str-video__embedded-call-feedback__star--active',\n    );\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__rating-section\">\n      <p className=\"str-video__embedded-call-feedback__rating-label\">\n        {t('How was your call quality?')}\n      </p>\n      <div\n        className=\"str-video__embedded-call-feedback__stars\"\n        onMouseLeave={() => setHovered(0)}\n      >\n        {[1, 2, 3, 4, 5].map((star) => (\n          <button\n            key={star}\n            type=\"button\"\n            className={getStarClasses(star)}\n            onClick={() => onChange(star)}\n            onMouseEnter={() => setHovered(star)}\n            aria-label={t('Rate {{ count }} star', { count: star })}\n          >\n            <Icon icon=\"star-filled\" />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK;AAErC,IAAA,MAAM,cAAc,GAAG,CAAC,IAAY,KAClC,IAAI,CACF,yCAAyC,EACzC,IAAI,IAAI,YAAY,IAAI,iDAAiD,CAC1E;IAEH,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,aAChEC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC3D,CAAC,CAAC,4BAA4B,CAAC,EAAA,CAC9B,EACJA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0CAA0C,EACpD,YAAY,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,EAAA,QAAA,EAEhC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAA,QAAA,EAAA,EAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,YAAY,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC,gBACxB,CAAC,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAEvDA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAA,CAAG,EAAA,EAPtB,IAAI,CAQF,CACV,CAAC,EAAA,CACE,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/ThankYouScreen.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const ThankYouScreen = () => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsx(Icon, { icon: "checkmark" }) }), jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Thank you!') }), jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('Your feedback helps improve call quality.') })] }));
+};
+
+export { ThankYouScreen };
+//# sourceMappingURL=ThankYouScreen.js.map

package/dist/esm/src/embedded/shared/CallFeedback/ThankYouScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThankYouScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/ThankYouScreen.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\nexport const ThankYouScreen = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <div className=\"str-video__embedded-call-feedback__checkmark\">\n        <Icon icon=\"checkmark\" />\n      </div>\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Thank you!')}\n      </h2>\n      <p className=\"str-video__embedded-call-feedback__subtitle\">\n        {t('Your feedback helps improve call quality.')}\n      </p>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,aAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC3DA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,EAAA,CAAG,GACrB,EACNA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,YACrD,CAAC,CAAC,YAAY,CAAC,EAAA,CACb,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACvD,CAAC,CAAC,2CAA2C,CAAC,EAAA,CAC7C,CAAA,EAAA,CACA;AAEV;;;;"}

package/dist/esm/src/embedded/shared/ConnectionNotification/ConnectionNotification.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { CallingState } from '@stream-io/video-client';
+import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import { Notification } from '../../../components/Notification/Notification.js';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '@floating-ui/react';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import { LoadingIndicator } from '../../../components/LoadingIndicator/LoadingIndicator.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const ConnectionNotification = () => {
+    const { t } = useI18n();
+    const { useCallCallingState } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const isOffline = callingState === CallingState.OFFLINE;
+    const isReconnecting = callingState === CallingState.RECONNECTING;
+    const isMigrating = callingState === CallingState.MIGRATING;
+    const isJoining = callingState === CallingState.JOINING;
+    const hasFailedToRecover = callingState === CallingState.RECONNECTING_FAILED;
+    const showError = isOffline || hasFailedToRecover;
+    const showLoading = isJoining || isReconnecting || isMigrating;
+    if (showError) {
+        return (jsx("div", { className: "str-video__embedded-connection-notification", children: jsx(Notification, { isVisible: true, placement: "bottom", message: isOffline
+                    ? t('You are offline. Check your internet connection.')
+                    : t('Failed to restore connection. Please try again.') }) }));
+    }
+    if (showLoading) {
+        return (jsx("div", { className: "str-video__embedded-connection-notification", children: jsx(Notification, { isVisible: true, placement: "bottom", iconClassName: null, message: jsx(LoadingIndicator, { text: isMigrating
+                        ? t('Migrating...')
+                        : isJoining
+                            ? t('Joining')
+                            : t('Reconnecting...') }) }) }));
+    }
+    return null;
+};
+
+export { ConnectionNotification };
+//# sourceMappingURL=ConnectionNotification.js.map

package/dist/esm/src/embedded/shared/ConnectionNotification/ConnectionNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionNotification.js","sources":["../../../../../../../../src/embedded/shared/ConnectionNotification/ConnectionNotification.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { LoadingIndicator, Notification } from '../../../components';\n\nexport const ConnectionNotification = () => {\n  const { t } = useI18n();\n  const { useCallCallingState } = useCallStateHooks();\n  const callingState = useCallCallingState();\n\n  const isOffline = callingState === CallingState.OFFLINE;\n  const isReconnecting = callingState === CallingState.RECONNECTING;\n  const isMigrating = callingState === CallingState.MIGRATING;\n  const isJoining = callingState === CallingState.JOINING;\n  const hasFailedToRecover = callingState === CallingState.RECONNECTING_FAILED;\n\n  const showError = isOffline || hasFailedToRecover;\n  const showLoading = isJoining || isReconnecting || isMigrating;\n\n  if (showError) {\n    return (\n      <div className=\"str-video__embedded-connection-notification\">\n        <Notification\n          isVisible\n          placement=\"bottom\"\n          message={\n            isOffline\n              ? t('You are offline. Check your internet connection.')\n              : t('Failed to restore connection. Please try again.')\n          }\n        />\n      </div>\n    );\n  }\n\n  if (showLoading) {\n    return (\n      <div className=\"str-video__embedded-connection-notification\">\n        <Notification\n          isVisible\n          placement=\"bottom\"\n          iconClassName={null}\n          message={\n            <LoadingIndicator\n              text={\n                isMigrating\n                  ? t('Migrating...')\n                  : isJoining\n                    ? t('Joining')\n                    : t('Reconnecting...')\n              }\n            />\n          }\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,sBAAsB,GAAG,MAAK;AACzC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAE1C,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO;AACvD,IAAA,MAAM,cAAc,GAAG,YAAY,KAAK,YAAY,CAAC,YAAY;AACjE,IAAA,MAAM,WAAW,GAAG,YAAY,KAAK,YAAY,CAAC,SAAS;AAC3D,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO;AACvD,IAAA,MAAM,kBAAkB,GAAG,YAAY,KAAK,YAAY,CAAC,mBAAmB;AAE5E,IAAA,MAAM,SAAS,GAAG,SAAS,IAAI,kBAAkB;AACjD,IAAA,MAAM,WAAW,GAAG,SAAS,IAAI,cAAc,IAAI,WAAW;IAE9D,IAAI,SAAS,EAAE;AACb,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,YAC1DA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,QACT,SAAS,EAAC,QAAQ,EAClB,OAAO,EACL;AACE,sBAAE,CAAC,CAAC,kDAAkD;sBACpD,CAAC,CAAC,iDAAiD,CAAC,EAAA,CAE1D,EAAA,CACE;IAEV;IAEA,IAAI,WAAW,EAAE;QACf,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAA,IAAA,EACT,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAE,IAAI,EACnB,OAAO,EACLA,GAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EACF;AACE,0BAAE,CAAC,CAAC,cAAc;AAClB,0BAAE;AACA,8BAAE,CAAC,CAAC,SAAS;8BACX,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAE5B,EAAA,CAEJ,EAAA,CACE;IAEV;AAEA,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/esm/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import '../../../core/components/Audio/Audio.js';
+import '../../../core/components/Audio/ParticipantsAudio.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+import { useParticipantViewContext } from '../../../core/components/ParticipantView/ParticipantViewContext.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../core/components/ParticipantView/ParticipantView.js';
+import { DefaultParticipantViewUI } from '../../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../../core/components/StreamCall/StreamCall.js';
+import '../../../core/components/StreamVideo/StreamVideo.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/CallLayout/LivestreamLayout.js';
+import '../../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../../core/components/CallLayout/SpeakerLayout.js';
+import '../../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../../core/components/CallLayout/PipLayout/Host.js';
+import '../../../core/components/CallLayout/PipLayout/Grid.js';
+
+const EmbeddedParticipantViewUI = () => {
+    const { participantViewElement, trackType } = useParticipantViewContext();
+    const handleDoubleClick = useCallback(() => {
+        if (!participantViewElement)
+            return;
+        if (typeof participantViewElement.requestFullscreen === 'undefined')
+            return;
+        if (!document.fullscreenElement) {
+            participantViewElement.requestFullscreen().catch(console.error);
+        }
+        else {
+            document.exitFullscreen().catch(console.error);
+        }
+    }, [participantViewElement]);
+    return (jsx("div", { className: clsx('str-video__embedded-participant-view-ui', trackType === 'screenShareTrack' &&
+            'str-video__embedded-participant-view-ui--screen-share'), onDoubleClick: handleDoubleClick, children: jsx(DefaultParticipantViewUI, {}) }));
+};
+
+export { EmbeddedParticipantViewUI };
+//# sourceMappingURL=EmbeddedParticipantViewUI.js.map

package/dist/esm/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedParticipantViewUI.js","sources":["../../../../../../../../src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport clsx from 'clsx';\nimport { DefaultParticipantViewUI } from '../../../core';\nimport { useParticipantViewContext } from '../../../core';\n\nexport const EmbeddedParticipantViewUI = () => {\n  const { participantViewElement, trackType } = useParticipantViewContext();\n\n  const handleDoubleClick = useCallback(() => {\n    if (!participantViewElement) return;\n    if (typeof participantViewElement.requestFullscreen === 'undefined') return;\n\n    if (!document.fullscreenElement) {\n      participantViewElement.requestFullscreen().catch(console.error);\n    } else {\n      document.exitFullscreen().catch(console.error);\n    }\n  }, [participantViewElement]);\n\n  return (\n    <div\n      className={clsx(\n        'str-video__embedded-participant-view-ui',\n        trackType === 'screenShareTrack' &&\n          'str-video__embedded-participant-view-ui--screen-share',\n      )}\n      onDoubleClick={handleDoubleClick}\n    >\n      <DefaultParticipantViewUI />\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,yBAAyB,GAAG,MAAK;IAC5C,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAAG,yBAAyB,EAAE;AAEzE,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,sBAAsB;YAAE;AAC7B,QAAA,IAAI,OAAO,sBAAsB,CAAC,iBAAiB,KAAK,WAAW;YAAE;AAErE,QAAA,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;YAC/B,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACjE;aAAO;YACL,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAChD;AACF,IAAA,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;IAE5B,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,yCAAyC,EACzC,SAAS,KAAK,kBAAkB;YAC9B,uDAAuD,CAC1D,EACD,aAAa,EAAE,iBAAiB,EAAA,QAAA,EAEhCA,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAAA,CACxB;AAEV;;;;"}

package/dist/esm/src/embedded/shared/JoinError/JoinError.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const JoinError = ({ onJoin }) => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__embedded-join-error", children: [jsx("h2", { className: "str-video__embedded-join-error__title", children: t('Failed to join the call') }), jsx("p", { className: "str-video__embedded-join-error__message", children: t("We couldn't connect to the server. Please check your connection and try again.") }), jsxs("button", { type: "button", className: "str-video__button", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('Try again')] })] }));
+};
+
+export { JoinError };
+//# sourceMappingURL=JoinError.js.map

package/dist/esm/src/embedded/shared/JoinError/JoinError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JoinError.js","sources":["../../../../../../../../src/embedded/shared/JoinError/JoinError.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface JoinErrorProps {\n  onJoin: () => void;\n}\n\nexport const JoinError = ({ onJoin }: JoinErrorProps) => {\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__embedded-join-error\">\n      <h2 className=\"str-video__embedded-join-error__title\">\n        {t('Failed to join the call')}\n      </h2>\n      <p className=\"str-video__embedded-join-error__message\">\n        {t(\n          \"We couldn't connect to the server. Please check your connection and try again.\",\n        )}\n      </p>\n      <button type=\"button\" className=\"str-video__button\" onClick={onJoin}>\n        <Icon icon=\"login\" />\n        {t('Try again')}\n      </button>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;MAOa,SAAS,GAAG,CAAC,EAAE,MAAM,EAAkB,KAAI;AACtD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAClD,CAAC,CAAC,yBAAyB,CAAC,EAAA,CAC1B,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACnD,CAAC,CACA,gFAAgF,CACjF,EAAA,CACC,EACJD,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CACjEC,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACpB,CAAC,CAAC,WAAW,CAAC,CAAA,EAAA,CACR,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/embedded/shared/Lobby/DeviceControls.js

@@ -0,0 +1,44 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { ToggleAudioPreviewButton } from '../../../components/CallControls/ToggleAudioButton.js';
+import { ToggleVideoPreviewButton } from '../../../components/CallControls/ToggleVideoButton.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import { VideoPreview } from '../../../components/VideoPreview/VideoPreview.js';
+import { ToggleMicButton } from './ToggleMicButton.js';
+import { ToggleCameraButton } from './ToggleCameraButton.js';
+import { DisabledDeviceButton } from './DisabledDeviceButton.js';
+import { NoCameraPreview, DisabledVideoPreview } from './VideoPreviewFallbacks.js';
+
+const DeviceControls = ({ isVideoEnabled }) => {
+    const { t } = useI18n();
+    const { useCameraState, useMicrophoneState } = useCallStateHooks();
+    const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+    const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__embedded-lobby__video-preview", children: [jsx(VideoPreview, { DisabledVideoPreview: DisabledVideoPreview, NoCameraPreview: NoCameraPreview }), jsxs("div", { className: "str-video__embedded-lobby__media-toggle", children: [jsx(ToggleAudioPreviewButton, { Menu: null }), isVideoEnabled && jsx(ToggleVideoPreviewButton, { Menu: null })] })] }), jsxs("div", { className: "str-video__embedded-lobby__media", children: [hasMicPermission ? (jsx(ToggleMicButton, {})) : (jsx(DisabledDeviceButton, { icon: "mic", label: t('Permission needed') })), isVideoEnabled &&
+                        (hasCameraPermission ? (jsx(ToggleCameraButton, {})) : (jsx(DisabledDeviceButton, { icon: "camera", label: t('Permission needed') })))] })] }));
+};
+
+export { DeviceControls };
+//# sourceMappingURL=DeviceControls.js.map

package/dist/esm/src/embedded/shared/Lobby/DeviceControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceControls.js","sources":["../../../../../../../../src/embedded/shared/Lobby/DeviceControls.tsx"],"sourcesContent":["import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  ToggleAudioPreviewButton,\n  ToggleVideoPreviewButton,\n  VideoPreview,\n} from '../../../components';\nimport { ToggleMicButton } from './ToggleMicButton';\nimport { ToggleCameraButton } from './ToggleCameraButton';\nimport { DisabledDeviceButton } from './DisabledDeviceButton';\nimport { DisabledVideoPreview, NoCameraPreview } from './VideoPreviewFallbacks';\n\ninterface DeviceControlsProps {\n  isVideoEnabled: boolean;\n}\n\nexport const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {\n  const { t } = useI18n();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  return (\n    <>\n      <div className=\"str-video__embedded-lobby__video-preview\">\n        <VideoPreview\n          DisabledVideoPreview={DisabledVideoPreview}\n          NoCameraPreview={NoCameraPreview}\n        />\n        <div className=\"str-video__embedded-lobby__media-toggle\">\n          <ToggleAudioPreviewButton Menu={null} />\n          {isVideoEnabled && <ToggleVideoPreviewButton Menu={null} />}\n        </div>\n      </div>\n\n      <div className=\"str-video__embedded-lobby__media\">\n        {hasMicPermission ? (\n          <ToggleMicButton />\n        ) : (\n          <DisabledDeviceButton icon=\"mic\" label={t('Permission needed')} />\n        )}\n        {isVideoEnabled &&\n          (hasCameraPermission ? (\n            <ToggleCameraButton />\n          ) : (\n            <DisabledDeviceButton\n              icon=\"camera\"\n              label={t('Permission needed')}\n            />\n          ))}\n      </div>\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAea,cAAc,GAAG,CAAC,EAAE,cAAc,EAAuB,KAAI;AACxE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAElE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACvDE,GAAA,CAAC,YAAY,EAAA,EACX,oBAAoB,EAAE,oBAAoB,EAC1C,eAAe,EAAE,eAAe,EAAA,CAChC,EACFF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDE,GAAA,CAAC,wBAAwB,EAAA,EAAC,IAAI,EAAE,IAAI,GAAI,EACvC,cAAc,IAAIA,GAAA,CAAC,wBAAwB,IAAC,IAAI,EAAE,IAAI,EAAA,CAAI,IACvD,CAAA,EAAA,CACF,EAENF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC9C,gBAAgB,IACfE,GAAA,CAAC,eAAe,KAAG,KAEnBA,GAAA,CAAC,oBAAoB,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAA,CAAI,CACnE,EACA,cAAc;AACb,yBAAC,mBAAmB,IAClBA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,KAEtBA,IAAC,oBAAoB,EAAA,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAAA,CAC7B,CACH,CAAC,CAAA,EAAA,CACA,CAAA,EAAA,CACL;AAEP;;;;"}

package/dist/esm/src/embedded/shared/Lobby/DisabledDeviceButton.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const DisabledDeviceButton = ({ icon, label, }) => (jsxs("div", { className: "str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled", children: [jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: icon }), jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: label })] }));
+
+export { DisabledDeviceButton };
+//# sourceMappingURL=DisabledDeviceButton.js.map

package/dist/esm/src/embedded/shared/Lobby/DisabledDeviceButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledDeviceButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/DisabledDeviceButton.tsx"],"sourcesContent":["import { Icon } from '../../../components';\n\ninterface DisabledDeviceButtonProps {\n  icon: string;\n  label: string;\n}\n\nexport const DisabledDeviceButton = ({\n  icon,\n  label,\n}: DisabledDeviceButtonProps) => (\n  <div className=\"str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled\">\n    <Icon\n      className=\"str-video__embedded-lobby__device-button-icon\"\n      icon={icon}\n    />\n    <span className=\"str-video__embedded-lobby__device-button-label\">\n      {label}\n    </span>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,oBAAoB,GAAG,CAAC,EACnC,IAAI,EACJ,KAAK,GACqB,MAC1BA,cAAK,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC1GC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAE,IAAI,EAAA,CACV,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,KAAK,EAAA,CACD,CAAA,EAAA,CACH;;;;"}

package/dist/esm/src/embedded/shared/Lobby/Lobby.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useI18n, useConnectedUser, useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'react';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import { DeviceControls } from './DeviceControls.js';
+
+/**
+ * Lobby component - Device setup screen before joining a call.
+ */
+const Lobby = ({ onJoin, title, joinLabel }) => {
+    const { t } = useI18n();
+    const user = useConnectedUser();
+    const { useCameraState, useCallSettings } = useCallStateHooks();
+    const { isMute } = useCameraState();
+    const settings = useCallSettings();
+    const isVideoEnabled = settings?.video.enabled ?? true;
+    const resolvedJoinLabel = joinLabel ?? t('Join');
+    const resolvedTitle = title ?? t('Set up your call before joining');
+    return (jsx("div", { className: "str-video__embedded-lobby", children: jsxs("div", { className: "str-video__embedded-lobby__content", children: [jsx("h1", { className: "str-video__embedded-lobby__heading", children: resolvedTitle }), jsx("div", { className: clsx('str-video__embedded-lobby__camera', isMute && 'str-video__embedded-lobby__camera--off'), children: jsx(DeviceControls, { isVideoEnabled: isVideoEnabled }) }), jsxs("div", { className: "str-video__embedded-lobby__display-name", children: [jsx("div", { className: "str-video__embedded-lobby__display-name-label", children: t('Display name') }), jsx("span", { className: "str-video__embedded-lobby__display-name-value", children: user?.name }), jsxs("button", { className: "str-video__button", onClick: onJoin, children: [jsx(Icon, { className: "str-video__button__icon", icon: "login" }), resolvedJoinLabel] })] })] }) }));
+};
+
+export { Lobby };
+//# sourceMappingURL=Lobby.js.map

package/dist/esm/src/embedded/shared/Lobby/Lobby.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lobby.js","sources":["../../../../../../../../src/embedded/shared/Lobby/Lobby.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  useCallStateHooks,\n  useConnectedUser,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\nimport { DeviceControls } from './DeviceControls';\n\ninterface LobbyProps {\n  onJoin: () => void;\n  title?: string;\n  joinLabel?: string;\n}\n\n/**\n * Lobby component - Device setup screen before joining a call.\n */\nexport const Lobby = ({ onJoin, title, joinLabel }: LobbyProps) => {\n  const { t } = useI18n();\n  const user = useConnectedUser();\n  const { useCameraState, useCallSettings } = useCallStateHooks();\n\n  const { isMute } = useCameraState();\n  const settings = useCallSettings();\n\n  const isVideoEnabled = settings?.video.enabled ?? true;\n  const resolvedJoinLabel = joinLabel ?? t('Join');\n  const resolvedTitle = title ?? t('Set up your call before joining');\n\n  return (\n    <div className=\"str-video__embedded-lobby\">\n      <div className=\"str-video__embedded-lobby__content\">\n        <h1 className=\"str-video__embedded-lobby__heading\">{resolvedTitle}</h1>\n        <div\n          className={clsx(\n            'str-video__embedded-lobby__camera',\n            isMute && 'str-video__embedded-lobby__camera--off',\n          )}\n        >\n          <DeviceControls isVideoEnabled={isVideoEnabled} />\n        </div>\n\n        <div className=\"str-video__embedded-lobby__display-name\">\n          <div className=\"str-video__embedded-lobby__display-name-label\">\n            {t('Display name')}\n          </div>\n          <span className=\"str-video__embedded-lobby__display-name-value\">\n            {user?.name}\n          </span>\n          <button className=\"str-video__button\" onClick={onJoin}>\n            <Icon className=\"str-video__button__icon\" icon=\"login\" />\n            {resolvedJoinLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;AAEG;AACI,MAAM,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAc,KAAI;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,IAAI,GAAG,gBAAgB,EAAE;IAC/B,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAE/D,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AACnC,IAAA,MAAM,QAAQ,GAAG,eAAe,EAAE;IAElC,MAAM,cAAc,GAAG,QAAQ,EAAE,KAAK,CAAC,OAAO,IAAI,IAAI;IACtD,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,iCAAiC,CAAC;IAEnE,QACEA,aAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACxCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,aACjDD,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,aAAa,EAAA,CAAM,EACvEA,aACE,SAAS,EAAE,IAAI,CACb,mCAAmC,EACnC,MAAM,IAAI,wCAAwC,CACnD,EAAA,QAAA,EAEDA,IAAC,cAAc,EAAA,EAAC,cAAc,EAAE,cAAc,GAAI,EAAA,CAC9C,EAENC,cAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+CAA+C,YAC3D,CAAC,CAAC,cAAc,CAAC,EAAA,CACd,EACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAC5D,IAAI,EAAE,IAAI,GACN,EACPC,IAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAC,IAAI,EAAC,OAAO,GAAG,EACxD,iBAAiB,IACX,CAAA,EAAA,CACL,CAAA,EAAA,CACF,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/Lobby/ToggleCameraButton.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import { MenuToggle, MenuVisualType } from '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import { CameraMenuWithBlur } from '../BlurToggleButton/BlurToggleButton.js';
+
+const ToggleMenuButton = forwardRef(function ToggleMenuButtonRender(props, ref) {
+    const { useCameraState } = useCallStateHooks();
+    const { selectedDevice: selectedCamera, devices: cameras } = useCameraState();
+    return (jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "camera" }), jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: cameras?.find((c) => c.deviceId === selectedCamera)
+                    ?.label || 'Default' }), jsx(Icon, { icon: props.menuShown ? 'chevron-down' : 'chevron-up' })] }));
+});
+const ToggleCameraButton = () => {
+    return (jsx(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton, visualType: MenuVisualType.MENU, children: jsx(CameraMenuWithBlur, {}) }));
+};
+
+export { ToggleCameraButton };
+//# sourceMappingURL=ToggleCameraButton.js.map

package/dist/esm/src/embedded/shared/Lobby/ToggleCameraButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleCameraButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/ToggleCameraButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport {\n  Icon,\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n} from '../../../components';\nimport { CameraMenuWithBlur } from '../BlurToggleButton/BlurToggleButton';\n\nconst ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleMenuButtonRender(props, ref) {\n    const { useCameraState } = useCallStateHooks();\n    const { selectedDevice: selectedCamera, devices: cameras } =\n      useCameraState();\n\n    return (\n      <button ref={ref} className=\"str-video__embedded-lobby__device-button\">\n        <Icon\n          className=\"str-video__embedded-lobby__device-button-icon\"\n          icon=\"camera\"\n        />\n        <span className=\"str-video__embedded-lobby__device-button-label\">\n          {cameras?.find((c: MediaDeviceInfo) => c.deviceId === selectedCamera)\n            ?.label || 'Default'}\n        </span>\n        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />\n      </button>\n    );\n  },\n);\n\nexport const ToggleCameraButton = () => {\n  return (\n    <MenuToggle\n      placement=\"top-start\"\n      ToggleButton={ToggleMenuButton}\n      visualType={MenuVisualType.MENU}\n    >\n      <CameraMenuWithBlur />\n    </MenuToggle>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AACxC,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GACxD,cAAc,EAAE;AAElB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,QAAQ,EAAA,CACb,EACFA,cAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,OAAO,EAAE,IAAI,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,QAAQ,KAAK,cAAc;sBAChE,KAAK,IAAI,SAAS,EAAA,CACjB,EACPA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,EAAA,CAAI,CAAA,EAAA,CACxD;AAEb,CAAC,CACF;AAEM,MAAM,kBAAkB,GAAG,MAAK;IACrC,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,WAAW,EACrB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAE/BA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACX;AAEjB;;;;"}

package/dist/esm/src/embedded/shared/Lobby/ToggleMicButton.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import { MenuToggle, MenuVisualType } from '../../../components/Menu/MenuToggle.js';
+import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from '../../../components/DeviceSettings/DeviceSelectorAudio.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const ToggleMenuButton = forwardRef(function ToggleMenuButtonRender(props, ref) {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { selectedDevice: selectedMic, devices: microphones } = useMicrophoneState();
+    return (jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "mic" }), jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: microphones?.find((m) => m.deviceId === selectedMic)
+                    ?.label || 'Default' }), jsx(Icon, { icon: props.menuShown ? 'chevron-down' : 'chevron-up' })] }));
+});
+const ToggleMicButton = () => {
+    const { t } = useI18n();
+    return (jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton, visualType: MenuVisualType.MENU, children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }));
+};
+
+export { ToggleMicButton };
+//# sourceMappingURL=ToggleMicButton.js.map

package/dist/esm/src/embedded/shared/Lobby/ToggleMicButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleMicButton.js","sources":["../../../../../../../../src/embedded/shared/Lobby/ToggleMicButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n} from '../../../components';\n\nconst ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleMenuButtonRender(props, ref) {\n    const { useMicrophoneState } = useCallStateHooks();\n    const { selectedDevice: selectedMic, devices: microphones } =\n      useMicrophoneState();\n\n    return (\n      <button ref={ref} className=\"str-video__embedded-lobby__device-button\">\n        <Icon\n          className=\"str-video__embedded-lobby__device-button-icon\"\n          icon=\"mic\"\n        />\n        <span className=\"str-video__embedded-lobby__device-button-label\">\n          {microphones?.find((m: MediaDeviceInfo) => m.deviceId === selectedMic)\n            ?.label || 'Default'}\n        </span>\n        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />\n      </button>\n    );\n  },\n);\n\nexport const ToggleMicButton = () => {\n  const { t } = useI18n();\n\n  return (\n    <MenuToggle\n      placement=\"top-start\"\n      ToggleButton={ToggleMenuButton}\n      visualType={MenuVisualType.MENU}\n    >\n      <DeviceSelectorAudioInput visualType=\"list\" title={t('Microphone')} />\n      <DeviceSelectorAudioOutput visualType=\"list\" title={t('Speaker')} />\n    </MenuToggle>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AACxC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,GACzD,kBAAkB,EAAE;AAEtB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,KAAK,EAAA,CACV,EACFA,cAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,WAAW,EAAE,IAAI,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,QAAQ,KAAK,WAAW;sBACjE,KAAK,IAAI,SAAS,EAAA,CACjB,EACPA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,EAAA,CAAI,CAAA,EAAA,CACxD;AAEb,CAAC,CACF;AAEM,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,QACED,KAAC,UAAU,EAAA,EACT,SAAS,EAAC,WAAW,EACrB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,CAAC,IAAI,aAE/BC,GAAA,CAAC,wBAAwB,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EAAA,CAAI,EACtEA,GAAA,CAAC,yBAAyB,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EAAA,CAAI,CAAA,EAAA,CACzD;AAEjB;;;;"}