voicebot-react-native-expo/rn/node_modules/@livekit/components-react/dist/components-Y1IPllFz.mjs.map

This is a voicebot-react-native package of Kipps AI voice bot for React Native Expo

{"version":3,"file":"components-Y1IPllFz.mjs","sources":["../src/components/controls/ClearPinButton.tsx","../src/components/ConnectionState.tsx","../src/components/controls/ChatToggle.tsx","../src/components/controls/DisconnectButton.tsx","../src/assets/icons/CameraDisabledIcon.tsx","../src/assets/icons/CameraIcon.tsx","../src/assets/icons/ChatCloseIcon.tsx","../src/assets/icons/ChatIcon.tsx","../src/assets/icons/Chevron.tsx","../src/assets/icons/FocusToggleIcon.tsx","../src/assets/icons/GearIcon.tsx","../src/assets/icons/LeaveIcon.tsx","../src/assets/icons/LockLockedIcon.tsx","../src/assets/icons/MicDisabledIcon.tsx","../src/assets/icons/MicIcon.tsx","../src/assets/icons/QualityExcellentIcon.tsx","../src/assets/icons/QualityGoodIcon.tsx","../src/assets/icons/QualityPoorIcon.tsx","../src/assets/icons/QualityUnknownIcon.tsx","../src/assets/icons/ScreenShareIcon.tsx","../src/assets/icons/ScreenShareStopIcon.tsx","../src/assets/icons/SpinnerIcon.tsx","../src/assets/icons/UnfocusToggleIcon.tsx","../src/components/controls/FocusToggle.tsx","../src/utils.ts","../src/components/controls/MediaDeviceSelect.tsx","../src/components/controls/StartAudio.tsx","../src/components/controls/StartMediaButton.tsx","../src/assets/icons/util.tsx","../src/components/controls/TrackToggle.tsx","../src/components/participant/ConnectionQualityIndicator.tsx","../src/components/participant/ParticipantName.tsx","../src/components/participant/TrackMutedIndicator.tsx","../src/assets/images/ParticipantPlaceholder.tsx","../src/hooks/useMediaTrackBySourceOrName.ts","../../../node_modules/.pnpm/lodash.debounce@4.0.8/node_modules/lodash.debounce/index.js","../../../node_modules/.pnpm/usehooks-ts@3.1.0_react@18.3.1/node_modules/usehooks-ts/dist/index.js","../src/components/participant/VideoTrack.tsx","../src/components/participant/AudioTrack.tsx","../src/components/participant/ParticipantTile.tsx","../src/components/layout/FocusLayout.tsx","../src/components/TrackLoop.tsx","../src/components/controls/PaginationControl.tsx","../src/components/controls/PaginationIndicator.tsx","../src/components/layout/GridLayout.tsx","../src/components/layout/CarouselLayout.tsx","../src/components/layout/LayoutContextProvider.tsx","../src/components/participant/AudioVisualizer.tsx","../src/components/ParticipantLoop.tsx","../src/components/RoomAudioRenderer.tsx","../src/components/RoomName.tsx","../src/components/Toast.tsx","../src/components/participant/animationSequences/connectingSequence.ts","../src/components/participant/animationSequences/listeningSequence.ts","../src/components/participant/animators/useBarAnimator.ts","../src/components/participant/BarVisualizer.tsx","../src/components/participant/ParticipantAudioTile.tsx","../src/components/ConnectionStateToast.tsx","../src/components/ChatEntry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useClearPinButton } from '../../hooks';\n\n/** @public */\nexport interface ClearPinButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\n/**\n * The `ClearPinButton` is a basic html button with the added ability to signal\n * the `LayoutContext` that it should display the grid view again.\n * @remarks\n * This component works only inside a `LayoutContext`.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <ClearPinButton>Back to grid view</ClearPinButton>\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport const ClearPinButton: (\n  props: ClearPinButtonProps & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ClearPinButtonProps>(\n  function ClearPinButton(props: ClearPinButtonProps, ref) {\n    const { buttonProps } = useClearPinButton(props);\n    return (\n      <button ref={ref} {...buttonProps}>\n        {props.children}\n      </button>\n    );\n  },\n);\n","import type { Room } from 'livekit-client';\nimport * as React from 'react';\nimport { useConnectionState } from '../hooks';\n\n/** @public */\nexport interface ConnectionStatusProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The room from which the connection status should be displayed.\n   */\n  room?: Room;\n}\n\n/**\n * The `ConnectionState` component displays the connection status of the room as strings\n * (`\"connected\" | \"connecting\" | \"disconnected\" | \"reconnecting\"`).\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <ConnectionState />\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport const ConnectionState: (\n  props: ConnectionStatusProps & React.RefAttributes<HTMLDivElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLDivElement, ConnectionStatusProps>(\n  function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) {\n    const connectionState = useConnectionState(room);\n    return (\n      <div ref={ref} {...props}>\n        {connectionState}\n      </div>\n    );\n  },\n);\n","import * as React from 'react';\nimport { useChatToggle } from '../../hooks';\n\n/** @public */\nexport interface ChatToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\n/**\n * The `ChatToggle` component is a button that toggles the visibility of the `Chat` component.\n * @remarks\n * For the component to have any effect it has to live inside a `LayoutContext` context.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <ToggleChat />\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport const ChatToggle: (\n  props: ChatToggleProps & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ChatToggleProps>(\n  function ChatToggle(props: ChatToggleProps, ref) {\n    const { mergedProps } = useChatToggle({ props });\n\n    return (\n      <button ref={ref} {...mergedProps}>\n        {props.children}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\nimport { useDisconnectButton } from '../../hooks';\n\n/** @public */\nexport interface DisconnectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  stopTracks?: boolean;\n}\n\n/**\n * The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.\n * Normally this is the big red button that allows end users to leave the video or audio call.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <DisconnectButton>Leave room</DisconnectButton>\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport const DisconnectButton: (\n  props: DisconnectButtonProps & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, DisconnectButtonProps>(\n  function DisconnectButton(props: DisconnectButtonProps, ref) {\n    const { buttonProps } = useDisconnectButton(props);\n    return (\n      <button ref={ref} {...buttonProps}>\n        {props.children}\n      </button>\n    );\n  },\n);\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgCameraDisabledIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" {...props}>\n    <path d=\"M1.354.646a.5.5 0 1 0-.708.708l14 14a.5.5 0 0 0 .708-.708L11 10.293V4.5A1.5 1.5 0 0 0 9.5 3H3.707zM0 4.5a1.5 1.5 0 0 1 .943-1.393l9.532 9.533c-.262.224-.603.36-.975.36h-8A1.5 1.5 0 0 1 0 11.5z\" />\n    <path d=\"m15.2 3.6-2.8 2.1a1 1 0 0 0-.4.8v3a1 1 0 0 0 .4.8l2.8 2.1a.5.5 0 0 0 .8-.4V4a.5.5 0 0 0-.8-.4z\" />\n  </svg>\n);\nexport default SvgCameraDisabledIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgCameraIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" {...props}>\n    <path d=\"M0 4.5A1.5 1.5 0 0 1 1.5 3h8A1.5 1.5 0 0 1 11 4.5v7A1.5 1.5 0 0 1 9.5 13h-8A1.5 1.5 0 0 1 0 11.5zM15.2 3.6l-2.8 2.1a1 1 0 0 0-.4.8v3a1 1 0 0 0 .4.8l2.8 2.1a.5.5 0 0 0 .8-.4V4a.5.5 0 0 0-.8-.4z\" />\n  </svg>\n);\nexport default SvgCameraIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgChatCloseIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} viewBox=\"0 0 24 24\" {...props}>\n    <path\n      fill=\"#FFF\"\n      d=\"M4.99 3.99a1 1 0 0 0-.697 1.717L10.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414L12 13.414l6.293 6.293a1 1 0 1 0 1.414-1.414L13.414 12l6.293-6.293a1 1 0 0 0-.727-1.717 1 1 0 0 0-.687.303L12 10.586 5.707 4.293a1 1 0 0 0-.717-.303z\"\n    />\n  </svg>\n);\nexport default SvgChatCloseIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgChatIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={18} fill=\"none\" {...props}>\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M0 2.75A2.75 2.75 0 0 1 2.75 0h10.5A2.75 2.75 0 0 1 16 2.75v13.594a.75.75 0 0 1-1.234.572l-3.691-3.12a1.25 1.25 0 0 0-.807-.296H2.75A2.75 2.75 0 0 1 0 10.75v-8ZM2.75 1.5c-.69 0-1.25.56-1.25 1.25v8c0 .69.56 1.25 1.25 1.25h7.518c.65 0 1.279.23 1.775.65l2.457 2.077V2.75c0-.69-.56-1.25-1.25-1.25H2.75Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M3 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport default SvgChatIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgChevron = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <path\n      fill=\"currentcolor\"\n      fillRule=\"evenodd\"\n      d=\"M5.293 2.293a1 1 0 0 1 1.414 0l4.823 4.823a1.25 1.25 0 0 1 0 1.768l-4.823 4.823a1 1 0 0 1-1.414-1.414L9.586 8 5.293 3.707a1 1 0 0 1 0-1.414z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport default SvgChevron;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgFocusToggleIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <g stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}>\n      <path d=\"M10 1.75h4.25m0 0V6m0-4.25L9 7M6 14.25H1.75m0 0V10m0 4.25L7 9\" />\n    </g>\n  </svg>\n);\nexport default SvgFocusToggleIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgGearIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <path\n      fill=\"currentcolor\"\n      fillRule=\"evenodd\"\n      d=\"M8.961.894C8.875-.298 7.125-.298 7.04.894c-.066.912-1.246 1.228-1.76.472-.67-.99-2.186-.115-1.664.96.399.824-.465 1.688-1.288 1.289-1.076-.522-1.95.994-.961 1.665.756.513.44 1.693-.472 1.759-1.192.086-1.192 1.836 0 1.922.912.066 1.228 1.246.472 1.76-.99.67-.115 2.186.96 1.664.824-.399 1.688.465 1.289 1.288-.522 1.076.994 1.95 1.665.961.513-.756 1.693-.44 1.759.472.086 1.192 1.836 1.192 1.922 0 .066-.912 1.246-1.228 1.76-.472.67.99 2.186.115 1.664-.96-.399-.824.465-1.688 1.288-1.289 1.076.522 1.95-.994.961-1.665-.756-.513-.44-1.693.472-1.759 1.192-.086 1.192-1.836 0-1.922-.912-.066-1.228-1.246-.472-1.76.99-.67.115-2.186-.96-1.664-.824.399-1.688-.465-1.289-1.288.522-1.076-.994-1.95-1.665-.961-.513.756-1.693.44-1.759-.472ZM8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10Z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport default SvgGearIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgLeaveIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M2 2.75A2.75 2.75 0 0 1 4.75 0h6.5A2.75 2.75 0 0 1 14 2.75v10.5A2.75 2.75 0 0 1 11.25 16h-6.5A2.75 2.75 0 0 1 2 13.25v-.5a.75.75 0 0 1 1.5 0v.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25h-6.5c-.69 0-1.25.56-1.25 1.25v.5a.75.75 0 0 1-1.5 0v-.5Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M8.78 7.47a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l.97-.97H1.75a.75.75 0 0 1 0-1.5h4.69l-.97-.97a.75.75 0 0 1 1.06-1.06l2.25 2.25Z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport default SvgLeaveIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgLockLockedIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <path\n      fill=\"currentcolor\"\n      fillRule=\"evenodd\"\n      d=\"M4 6.104V4a4 4 0 1 1 8 0v2.104c1.154.326 2 1.387 2 2.646v4.5A2.75 2.75 0 0 1 11.25 16h-6.5A2.75 2.75 0 0 1 2 13.25v-4.5c0-1.259.846-2.32 2-2.646ZM5.5 4a2.5 2.5 0 0 1 5 0v2h-5V4Z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport default SvgLockLockedIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgMicDisabledIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" {...props}>\n    <path d=\"M12.227 11.52a5.477 5.477 0 0 0 1.246-2.97.5.5 0 0 0-.995-.1 4.478 4.478 0 0 1-.962 2.359l-1.07-1.07C10.794 9.247 11 8.647 11 8V3a3 3 0 0 0-6 0v1.293L1.354.646a.5.5 0 1 0-.708.708l14 14a.5.5 0 0 0 .708-.708zM8 12.5c.683 0 1.33-.152 1.911-.425l.743.743c-.649.359-1.378.59-2.154.66V15h2a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h2v-1.522a5.502 5.502 0 0 1-4.973-4.929.5.5 0 0 1 .995-.098A4.5 4.5 0 0 0 8 12.5z\" />\n    <path d=\"M8.743 10.907 5 7.164V8a3 3 0 0 0 3.743 2.907z\" />\n  </svg>\n);\nexport default SvgMicDisabledIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgMicIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" {...props}>\n    <path\n      fillRule=\"evenodd\"\n      d=\"M2.975 8.002a.5.5 0 0 1 .547.449 4.5 4.5 0 0 0 8.956 0 .5.5 0 1 1 .995.098A5.502 5.502 0 0 1 8.5 13.478V15h2a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h2v-1.522a5.502 5.502 0 0 1-4.973-4.929.5.5 0 0 1 .448-.547z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M5 3a3 3 0 1 1 6 0v5a3 3 0 0 1-6 0z\" />\n  </svg>\n);\nexport default SvgMicIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgQualityExcellentIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentcolor\" {...props}>\n    <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-6a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-6a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n  </svg>\n);\nexport default SvgQualityExcellentIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgQualityGoodIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentcolor\" {...props}>\n    <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    <g opacity={0.25}>\n      <path d=\"M12 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n      <path d=\"M12 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    </g>\n  </svg>\n);\nexport default SvgQualityGoodIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgQualityPoorIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentcolor\" {...props}>\n    <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    <g opacity={0.25}>\n      <path d=\"M6 6.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n      <path d=\"M6 6.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm6-6a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n      <path d=\"M12 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5z\" />\n    </g>\n  </svg>\n);\nexport default SvgQualityPoorIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgQualityUnknownIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" {...props}>\n    <g opacity={0.25}>\n      <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4Zm6-5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-9Zm6-6a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V.5Z\" />\n      <path d=\"M0 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4Zm6-5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-9Zm6-6a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V.5Z\" />\n    </g>\n  </svg>\n);\nexport default SvgQualityUnknownIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgScreenShareIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={20} height={16} fill=\"none\" {...props}>\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M0 2.75A2.75 2.75 0 0 1 2.75 0h14.5A2.75 2.75 0 0 1 20 2.75v10.5A2.75 2.75 0 0 1 17.25 16H2.75A2.75 2.75 0 0 1 0 13.25V2.75ZM2.75 1.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V2.75c0-.69-.56-1.25-1.25-1.25H2.75Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M9.47 4.22a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1-1.06 1.06l-.97-.97v4.69a.75.75 0 0 1-1.5 0V6.56l-.97.97a.75.75 0 0 1-1.06-1.06l2.25-2.25Z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport default SvgScreenShareIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgScreenShareStopIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={20} height={16} fill=\"none\" {...props}>\n    <g fill=\"currentColor\">\n      <path d=\"M7.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L10 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L11.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L10 6.94z\" />\n      <path\n        fillRule=\"evenodd\"\n        d=\"M2.75 0A2.75 2.75 0 0 0 0 2.75v10.5A2.75 2.75 0 0 0 2.75 16h14.5A2.75 2.75 0 0 0 20 13.25V2.75A2.75 2.75 0 0 0 17.25 0zM1.5 2.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H2.75c-.69 0-1.25-.56-1.25-1.25z\"\n        clipRule=\"evenodd\"\n      />\n    </g>\n  </svg>\n);\nexport default SvgScreenShareStopIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgSpinnerIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M8 0a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M8 12a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5A.75.75 0 0 1 8 12Z\"\n      clipRule=\"evenodd\"\n      opacity={0.7}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M12 1.072a.75.75 0 0 1 .274 1.024l-1.25 2.165a.75.75 0 0 1-1.299-.75l1.25-2.165A.75.75 0 0 1 12 1.072Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M6 11.464a.75.75 0 0 1 .274 1.025l-1.25 2.165a.75.75 0 0 1-1.299-.75l1.25-2.165A.75.75 0 0 1 6 11.464Z\"\n      clipRule=\"evenodd\"\n      opacity={0.6}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M14.928 4a.75.75 0 0 1-.274 1.025l-2.165 1.25a.75.75 0 1 1-.75-1.3l2.165-1.25A.75.75 0 0 1 14.928 4Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M4.536 10a.75.75 0 0 1-.275 1.024l-2.165 1.25a.75.75 0 0 1-.75-1.298l2.165-1.25A.75.75 0 0 1 4.536 10Z\"\n      clipRule=\"evenodd\"\n      opacity={0.5}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M16 8a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h2.5A.75.75 0 0 1 16 8Z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M4 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h2.5A.75.75 0 0 1 4 8Z\"\n      clipRule=\"evenodd\"\n      opacity={0.4}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M14.928 12a.75.75 0 0 1-1.024.274l-2.165-1.25a.75.75 0 0 1 .75-1.299l2.165 1.25A.75.75 0 0 1 14.928 12Z\"\n      clipRule=\"evenodd\"\n      opacity={0.9}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M4.536 6a.75.75 0 0 1-1.025.275l-2.165-1.25a.75.75 0 1 1 .75-1.3l2.165 1.25A.75.75 0 0 1 4.536 6Z\"\n      clipRule=\"evenodd\"\n      opacity={0.3}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M12 14.928a.75.75 0 0 1-1.024-.274l-1.25-2.165a.75.75 0 0 1 1.298-.75l1.25 2.165A.75.75 0 0 1 12 14.928Z\"\n      clipRule=\"evenodd\"\n      opacity={0.8}\n    />\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M6 4.536a.75.75 0 0 1-1.024-.275l-1.25-2.165a.75.75 0 1 1 1.299-.75l1.25 2.165A.75.75 0 0 1 6 4.536Z\"\n      clipRule=\"evenodd\"\n      opacity={0.2}\n    />\n  </svg>\n);\nexport default SvgSpinnerIcon;\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgUnfocusToggleIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"none\" {...props}>\n    <g stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}>\n      <path d=\"M13.25 7H9m0 0V2.75M9 7l5.25-5.25M2.75 9H7m0 0v4.25M7 9l-5.25 5.25\" />\n    </g>\n  </svg>\n);\nexport default SvgUnfocusToggleIcon;\n","import * as React from 'react';\nimport { LayoutContext, useMaybeTrackRefContext } from '../../context';\nimport { FocusToggleIcon, UnfocusToggleIcon } from '../../assets/icons';\nimport { useFocusToggle } from '../../hooks';\nimport type { TrackReferenceOrPlaceholder } from '@livekit/components-core';\n\n/** @public */\nexport interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  trackRef?: TrackReferenceOrPlaceholder;\n}\n\n/**\n * The `FocusToggle` puts the `ParticipantTile` in focus or removes it from focus.\n * @remarks\n * This component needs to live inside `LayoutContext` to work properly.\n *\n * @example\n * ```tsx\n * <ParticipantTile>\n *   <FocusToggle />\n * </ParticipantTile>\n * ```\n * @public\n */\nexport const FocusToggle: (\n  props: FocusToggleProps & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, FocusToggleProps>(\n  function FocusToggle({ trackRef, ...props }: FocusToggleProps, ref) {\n    const trackRefFromContext = useMaybeTrackRefContext();\n\n    const { mergedProps, inFocus } = useFocusToggle({\n      trackRef: trackRef ?? trackRefFromContext,\n      props,\n    });\n\n    return (\n      <LayoutContext.Consumer>\n        {(layoutContext) =>\n          layoutContext !== undefined && (\n            <button ref={ref} {...mergedProps}>\n              {props.children ? (\n                props.children\n              ) : inFocus ? (\n                <UnfocusToggleIcon />\n              ) : (\n                <FocusToggleIcon />\n              )}\n            </button>\n          )\n        }\n      </LayoutContext.Consumer>\n    );\n  },\n);\n","import * as React from 'react';\nimport { mergeProps as mergePropsReactAria } from './mergeProps';\nimport { log } from '@livekit/components-core';\nimport clsx from 'clsx';\n\n/** @internal */\nexport function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(\n  prop: T | undefined,\n): prop is T {\n  return prop !== undefined;\n}\n\n/** @internal */\nexport function mergeProps<\n  U extends HTMLElement,\n  T extends Array<React.HTMLAttributes<U> | undefined>,\n>(...props: T) {\n  return mergePropsReactAria(...props.filter(isProp));\n}\n\n/** @internal */\nexport function cloneSingleChild(\n  children: React.ReactNode | React.ReactNode[],\n  props?: Record<string, any>,\n  key?: any,\n) {\n  return React.Children.map(children, (child) => {\n    // Checking isValidElement is the safe way and avoids a typescript\n    // error too.\n    if (React.isValidElement(child) && React.Children.only(children)) {\n      if (child.props.class) {\n        // make sure we retain classnames of both passed props and child\n        props ??= {};\n        props.class = clsx(child.props.class, props.class);\n        props.style = { ...child.props.style, ...props.style };\n      }\n      return React.cloneElement(child, { ...props, key });\n    }\n    return child;\n  });\n}\n\n/**\n * @internal\n */\nexport function warnAboutMissingStyles(el?: HTMLElement) {\n  if (\n    typeof window !== 'undefined' &&\n    typeof process !== 'undefined' &&\n    // eslint-disable-next-line turbo/no-undeclared-env-vars\n    (process?.env?.NODE_ENV === 'dev' ||\n      // eslint-disable-next-line turbo/no-undeclared-env-vars\n      process?.env?.NODE_ENV === 'development')\n  ) {\n    const target = el ?? document.querySelector('.lk-room-container');\n    if (target && !getComputedStyle(target).getPropertyValue('--lk-has-imported-styles')) {\n      log.warn(\n        \"It looks like you're not using the `@livekit/components-styles package`. To render the UI with the default styling, please import it in your layout or page.\",\n      );\n    }\n  }\n}\n","import * as React from 'react';\nimport { useMaybeRoomContext } from '../../context';\nimport { mergeProps } from '../../utils';\nimport { RoomEvent, type LocalAudioTrack, type LocalVideoTrack } from 'livekit-client';\nimport { useMediaDeviceSelect } from '../../hooks';\n\n/** @public */\nexport interface MediaDeviceSelectProps\n  extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onError'> {\n  kind: MediaDeviceKind;\n  onActiveDeviceChange?: (deviceId: string) => void;\n  onDeviceListChange?: (devices: MediaDeviceInfo[]) => void;\n  onDeviceSelectError?: (e: Error) => void;\n  initialSelection?: string;\n  /** will force the browser to only return the specified device\n   * will call `onDeviceSelectError` with the error in case this fails\n   */\n  exactMatch?: boolean;\n  track?: LocalAudioTrack | LocalVideoTrack;\n  /**\n   * this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels.\n   * in some browsers multiple calls to getUserMedia result in multiple permission prompts.\n   * It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the\n   * appropriate permissions.\n   *\n   * @see {@link MediaDeviceMenu}\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices | MDN enumerateDevices}\n   */\n  requestPermissions?: boolean;\n  onError?: (e: Error) => void;\n}\n\n/**\n * The `MediaDeviceSelect` list all media devices of one kind.\n * Clicking on one of the listed devices make it the active media device.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <MediaDeviceSelect kind='audioinput' />\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport const MediaDeviceSelect: (\n  props: MediaDeviceSelectProps & React.RefAttributes<HTMLUListElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLUListElement, MediaDeviceSelectProps>(\n  function MediaDeviceSelect(\n    {\n      kind,\n      initialSelection,\n      onActiveDeviceChange,\n      onDeviceListChange,\n      onDeviceSelectError,\n      exactMatch,\n      track,\n      requestPermissions,\n      onError,\n      ...props\n    }: MediaDeviceSelectProps,\n    ref,\n  ) {\n    const room = useMaybeRoomContext();\n    const handleError = React.useCallback(\n      (e: Error) => {\n        if (room) {\n          // awkwardly emit the event from outside of the room, as we don't have other means to raise a MediaDeviceError\n          room.emit(RoomEvent.MediaDevicesError, e);\n        }\n        onError?.(e);\n      },\n      [room, onError],\n    );\n    const { devices, activeDeviceId, setActiveMediaDevice, className } = useMediaDeviceSelect({\n      kind,\n      room,\n      track,\n      requestPermissions,\n      onError: handleError,\n    });\n    React.useEffect(() => {\n      if (initialSelection !== undefined) {\n        setActiveMediaDevice(initialSelection);\n      }\n    }, [setActiveMediaDevice]);\n\n    React.useEffect(() => {\n      if (typeof onDeviceListChange === 'function') {\n        onDeviceListChange(devices);\n      }\n    }, [onDeviceListChange, devices]);\n\n    React.useEffect(() => {\n      if (activeDeviceId && activeDeviceId !== '') {\n        onActiveDeviceChange?.(activeDeviceId);\n      }\n    }, [activeDeviceId]);\n\n    const handleActiveDeviceChange = async (deviceId: string) => {\n      try {\n        await setActiveMediaDevice(deviceId, { exact: exactMatch });\n      } catch (e) {\n        if (e instanceof Error) {\n          onDeviceSelectError?.(e);\n        } else {\n          throw e;\n        }\n      }\n    };\n    // Merge Props\n    const mergedProps = React.useMemo(\n      () => mergeProps(props, { className }, { className: 'lk-list' }),\n      [className, props],\n    );\n\n    function isActive(deviceId: string, activeDeviceId: string, index: number) {\n      return deviceId === activeDeviceId || (index === 0 && activeDeviceId === 'default');\n    }\n\n    return (\n      <ul ref={ref} {...mergedProps}>\n        {devices.map((device, index) => (\n          <li\n            key={device.deviceId}\n            id={device.deviceId}\n            data-lk-active={isActive(device.deviceId, activeDeviceId, index)}\n            aria-selected={isActive(device.deviceId, activeDeviceId, index)}\n            role=\"option\"\n          >\n            <button className=\"lk-button\" onClick={() => handleActiveDeviceChange(device.deviceId)}>\n              {device.label}\n            </button>\n          </li>\n        ))}\n      </ul>\n    );\n  },\n);\n","import * as React from 'react';\nimport { useRoomContext } from '../../context';\nimport { useStartAudio } from '../../hooks';\n\n/** @public */\nexport interface AllowAudioPlaybackProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label: string;\n}\n\n/**\n * The `StartAudio` component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies.\n * To start audio playback, the user must perform a user-initiated event such as clicking this button.\n * As soon as audio playback starts, the button hides itself again.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <StartAudio label=\"Click to allow audio playback\" />\n * </LiveKitRoom>\n * ```\n *\n * @see Autoplay policy on MDN web docs: {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy}\n * @public\n */\nexport const StartAudio: (\n  props: AllowAudioPlaybackProps & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, AllowAudioPlaybackProps>(\n  function StartAudio({ label = 'Allow Audio', ...props }: AllowAudioPlaybackProps, ref) {\n    const room = useRoomContext();\n    const { mergedProps } = useStartAudio({ room, props });\n\n    return (\n      <button ref={ref} {...mergedProps}>\n        {label}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\nimport { useRoomContext } from '../../context';\nimport { useStartAudio, useStartVideo } from '../../hooks';\n\n/** @public */\nexport interface AllowMediaPlaybackProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n}\n\n/**\n * The `StartMediaButton` component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies.\n * To start media playback, the user must perform a user-initiated event such as clicking this button.\n * As soon as media playback starts, the button hides itself again.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <StartMediaButton label=\"Click to allow media playback\" />\n * </LiveKitRoom>\n * ```\n *\n * @see Autoplay policy on MDN web docs: {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy}\n * @public\n */\nexport const StartMediaButton: (\n  props: AllowMediaPlaybackProps & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, AllowMediaPlaybackProps>(\n  function StartMediaButton({ label, ...props }: AllowMediaPlaybackProps, ref) {\n    const room = useRoomContext();\n    const { mergedProps: audioProps, canPlayAudio } = useStartAudio({ room, props });\n    const { mergedProps, canPlayVideo } = useStartVideo({ room, props: audioProps });\n    const { style, ...restProps } = mergedProps;\n    style.display = canPlayAudio && canPlayVideo ? 'none' : 'block';\n\n    return (\n      <button ref={ref} style={style} {...restProps}>\n        {label ?? `Start ${!canPlayAudio ? 'Audio' : 'Video'}`}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\nimport { ConnectionQuality, Track } from 'livekit-client';\n\nimport {\n  MicIcon,\n  MicDisabledIcon,\n  CameraIcon,\n  CameraDisabledIcon,\n  QualityUnknownIcon,\n  QualityExcellentIcon,\n  QualityGoodIcon,\n  QualityPoorIcon,\n  ScreenShareIcon,\n  ScreenShareStopIcon,\n} from './index';\n\n/**\n * @internal\n */\nexport function getSourceIcon(source: Track.Source, enabled: boolean) {\n  switch (source) {\n    case Track.Source.Microphone:\n      return enabled ? <MicIcon /> : <MicDisabledIcon />;\n    case Track.Source.Camera:\n      return enabled ? <CameraIcon /> : <CameraDisabledIcon />;\n    case Track.Source.ScreenShare:\n      return enabled ? <ScreenShareStopIcon /> : <ScreenShareIcon />;\n    default:\n      return undefined;\n  }\n}\n\n/**\n * @internal\n */\nexport function getConnectionQualityIcon(quality: ConnectionQuality) {\n  switch (quality) {\n    case ConnectionQuality.Excellent:\n      return <QualityExcellentIcon />;\n    case ConnectionQuality.Good:\n      return <QualityGoodIcon />;\n    case ConnectionQuality.Poor:\n      return <QualityPoorIcon />;\n    default:\n      return <QualityUnknownIcon />;\n  }\n}\n","import type { CaptureOptionsBySource, ToggleSource } from '@livekit/components-core';\nimport * as React from 'react';\nimport { getSourceIcon } from '../../assets/icons/util';\nimport { useTrackToggle } from '../../hooks';\nimport { TrackPublishOptions } from 'livekit-client';\n\n/** @public */\nexport interface TrackToggleProps<T extends ToggleSource>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  source: T;\n  showIcon?: boolean;\n  initialState?: boolean;\n  /**\n   * Function that is called when the enabled state of the toggle changes.\n   * The second function argument `isUserInitiated` is `true` if the change was initiated by a user interaction, such as a click.\n   */\n  onChange?: (enabled: boolean, isUserInitiated: boolean) => void;\n  captureOptions?: CaptureOptionsBySource<T>;\n  publishOptions?: TrackPublishOptions;\n  onDeviceError?: (error: Error) => void;\n}\n\n/**\n * With the `TrackToggle` component it is possible to mute and unmute your camera and microphone.\n * The component uses an html button element under the hood so you can treat it like a button.\n *\n * @example\n * ```tsx\n * <LiveKitRoom>\n *   <TrackToggle source={Track.Source.Microphone} />\n *   <TrackToggle source={Track.Source.Camera} />\n * </LiveKitRoom>\n * ```\n * @public\n */\nexport const TrackToggle: <T extends ToggleSource>(\n  props: TrackToggleProps<T> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef(function TrackToggle<\n  T extends ToggleSource,\n>({ showIcon, ...props }: TrackToggleProps<T>, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { buttonProps, enabled } = useTrackToggle(props);\n  return (\n    <button ref={ref} {...buttonProps}>\n      {(showIcon ?? true) && getSourceIcon(props.source, enabled)}\n      {props.children}\n    </button>\n  );\n});\n","import * as React from 'react';\nimport { mergeProps } from '../../utils';\nimport { getConnectionQualityIcon } from '../../assets/icons/util';\nimport type { ConnectionQualityIndicatorOptions } from '../../hooks';\nimport { useConnectionQualityIndicator } from '../../hooks';\n\n/** @public */\nexport interface ConnectionQualityIndicatorProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    ConnectionQualityIndicatorOptions {}\n\n/**\n * The `ConnectionQualityIndicator` shows the individual connection quality of a participant.\n *\n * @example\n * ```tsx\n * <ConnectionQualityIndicator />\n * ```\n * @public\n */\nexport const ConnectionQualityIndicator: (\n  props: ConnectionQualityIndicatorProps & React.RefAttributes<HTMLDivElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<\n  HTMLDivElement,\n  ConnectionQualityIndicatorProps\n>(function ConnectionQualityIndicator(props: ConnectionQualityIndicatorProps, ref) {\n  const { className, quality } = useConnectionQualityIndicator(props);\n  const elementProps = React.useMemo(() => {\n    return { ...mergeProps(props, { className: className as string }), 'data-lk-quality': quality };\n  }, [quality, props, className]);\n  return (\n    <div ref={ref} {...elementProps}>\n      {props.children ?? getConnectionQualityIcon(quality)}\n    </div>\n  );\n});\n","import { setupParticipantName } from '@livekit/components-core';\nimport * as React from 'react';\nimport { useEnsureParticipant } from '../../context';\nimport { useObservableState } from '../../hooks/internal/useObservableState';\nimport { mergeProps } from '../../utils';\nimport type { UseParticipantInfoOptions } from '../../hooks';\n\n/** @public */\nexport interface ParticipantNameProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    UseParticipantInfoOptions {}\n\n/**\n * The `ParticipantName` component displays the name of the participant as a string within an HTML span element.\n * If no participant name is undefined the participant identity string is displayed.\n *\n * @example\n * ```tsx\n * <ParticipantName />\n * ```\n * @public\n */\nexport const ParticipantName: (\n  props: ParticipantNameProps & React.RefAttributes<HTMLSpanElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLSpanElement, ParticipantNameProps>(\n  function ParticipantName({ participant, ...props }: ParticipantNameProps, ref) {\n    const p = useEnsureParticipant(participant);\n\n    const { className, infoObserver } = React.useMemo(() => {\n      return setupParticipantName(p);\n    }, [p]);\n\n    const { identity, name } = useObservableState(infoObserver, {\n      name: p.name,\n      identity: p.identity,\n      metadata: p.metadata,\n    });\n\n    const mergedProps = React.useMemo(() => {\n      return mergeProps(props, { className, 'data-lk-participant-name': name });\n    }, [props, className, name]);\n\n    return (\n      <span ref={ref} {...mergedProps}>\n        {name !== '' ? name : identity}\n        {props.children}\n      </span>\n    );\n  },\n);\n","import * as React from 'react';\nimport { mergeProps } from '../../utils';\nimport { getSourceIcon } from '../../assets/icons/util';\nimport { useTrackMutedIndicator } from '../../hooks';\nimport type { TrackReferenceOrPlaceholder } from '@livekit/components-core';\n\n/** @public */\nexport interface TrackMutedIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  trackRef: TrackReferenceOrPlaceholder;\n  show?: 'always' | 'muted' | 'unmuted';\n}\n\n/**\n * The `TrackMutedIndicator` shows whether the participant's camera or microphone is muted or not.\n * By default, a muted/unmuted icon is displayed for a camera, microphone, and screen sharing track.\n *\n * @example\n * ```tsx\n * <TrackMutedIndicator trackRef={trackRef} />\n * ```\n * @public\n */\nexport const TrackMutedIndicator: (\n  props: TrackMutedIndicatorProps & React.RefAttributes<HTMLDivElement>,\n) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLDivElement, TrackMutedIndicatorProps>(\n  function TrackMutedIndicator(\n    { trackRef, show = 'always', ...props }: TrackMutedIndicatorProps,\n    ref,\n  ) {\n    const { className, isMuted } = useTrackMutedIndicator(trackRef);\n\n    const showIndicator =\n      show === 'always' || (show === 'muted' && isMuted) || (show === 'unmuted' && !isMuted);\n\n    const htmlProps = React.useMemo(\n      () =>\n        mergeProps(props, {\n          className,\n        }),\n      [className, props],\n    );\n\n    if (!showIndicator) {\n      return null;\n    }\n\n    return (\n      <div ref={ref} {...htmlProps} data-lk-muted={isMuted}>\n        {props.children ?? getSourceIcon(trackRef.source, !isMuted)}\n      </div>\n    );\n  },\n);\n","/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\nimport * as React from 'react';\nimport type { SVGProps } from 'react';\n/**\n * @internal\n */\nconst SvgParticipantPlaceholder = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    width={320}\n    height={320}\n    viewBox=\"0 0 320 320\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M160 180C204.182 180 240 144.183 240 100C240 55.8172 204.182 20 160 20C115.817 20 79.9997 55.8172 79.9997 100C79.9997 144.183 115.817 180 160 180Z\"\n      fill=\"white\"\n      fillOpacity={0.25}\n    />\n    <path\n      d=\"M97.6542 194.614C103.267 191.818 109.841 192.481 115.519 195.141C129.025 201.466 144.1 205 159.999 205C175.899 205 190.973 201.466 204.48 195.141C210.158 192.481 216.732 191.818 222.345 194.614C262.703 214.719 291.985 253.736 298.591 300.062C300.15 310.997 291.045 320 280 320H39.9997C28.954 320 19.8495 310.997 21.4087 300.062C28.014 253.736 57.2966 214.72 97.6542 194.614Z\"\n      fill=\"white\"\n      fillOpacity={0.25}\n    />\n  </svg>\n);\nexport default SvgParticipantPlaceholder;\n","import type { TrackIdentifier } from '@livekit/components-core';\nimport { isTrackReference } from '@livekit/components-core';\nimport { setupMediaTrack, log, isLocal, getTrackByIdentifier } from '@livekit/components-core';\nimport * as React from 'react';\nimport { mergeProps } from '../utils';\n\n/** @public */\nexport interface UseMediaTrackOptions {\n  element?: React.RefObject<HTMLMediaElement> | null;\n  props?: React.HTMLAttributes<HTMLVideoElement | HTMLAudioElement>;\n}\n\n/**\n * @internal\n */\nexport function useMediaTrackBySourceOrName(\n  observerOptions: TrackIdentifier,\n  options: UseMediaTrackOptions = {},\n) {\n  const [publication, setPublication] = React.useState(getTrackByIdentifier(observerOptions));\n\n  const [isMuted, setMuted] = React.useState(publication?.isMuted);\n  const [isSubscribed, setSubscribed] = React.useState(publication?.isSubscribed);\n\n  const [track, setTrack] = React.useState(publication?.track);\n  const [orientation, setOrientation] = React.useState<'landscape' | 'portrait'>('landscape');\n  const previousElement = React.useRef<HTMLMediaElement | undefined | null>();\n\n  const { className, trackObserver } = React.useMemo(() => {\n    return setupMediaTrack(observerOptions);\n  }, [\n    observerOptions.participant.sid ?? observerOptions.participant.identity,\n    observerOptions.source,\n    isTrackReference(observerOptions) && observerOptions.publication.trackSid,\n  ]);\n\n  React.useEffect(() => {\n    const subscription = trackObserver.subscribe((publication) => {\n      log.debug('update track', publication);\n      setPublication(publication);\n      setMuted(publication?.isMuted);\n      setSubscribed(publication?.isSubscribed);\n      setTrack(publication?.track);\n    });\n    return () => subscription?.unsubscribe();\n  }, [trackObserver]);\n\n  React.useEffect(() => {\n    if (track) {\n      if (previousElement.current) {\n        track.detach(previousElement.current);\n      }\n      if (\n        options.element?.current &&\n        !(isLocal(observerOptions.participant) && track?.kind === 'audio')\n      ) {\n        track.attach(options.element.current);\n      }\n    }\n    previousElement.current = options.element?.current;\n    return () => {\n      if (previousElement.current) {\n        track?.detach(previousElement.current);\n      }\n    };\n  }, [track, options.element]);\n\n  React.useEffect(() => {\n    // Set the orientation of the video track.\n    // TODO: This does not handle changes in orientation after a track got published (e.g when rotating a phone camera from portrait to landscape).\n    if (\n      typeof publication?.dimensions?.width === 'number' &&\n      typeof publication?.dimensions?.height === 'number'\n    ) {\n      const orientation_ =\n        publication.dimensions.width > publication.dimensions.height ? 'landscape' : 'portrait';\n      setOrientation(orientation_);\n    }\n  }, [publication]);\n\n  return {\n    publication,\n    isMuted,\n    isSubscribed,\n    track,\n    elementProps: mergeProps(options.props, {\n      className,\n      'data-lk-local-participant': observerOptions.participant.isLocal,\n      'data-lk-source': publication?.source,\n      ...(publication?.kind === 'video' && { 'data-lk-orientation': orientation }),\n    }),\n  };\n}\n","/**\n * lodash (Custom Build) <https://lodash.com/>\n * Build: `lodash modularize exports=\"npm\" -o ./`\n * Copyright jQuery Foundation and other contributors <https://jquery.org/>\n * Released under MIT license <https://lodash.com/license>\n * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>\n * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n */\n\n/** Used as the `TypeError` message for \"Functions\" methods. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** `Object#toString` result references. */\nvar symbolTag = '[object Symbol]';\n\n/** Used to match leading and trailing whitespace. */\nvar reTrim = /^\\s+|\\s+$/g;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\