@werxt/livekit-components-react 2.9.20

package/dist/utils.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+/** @internal */
+export declare function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(prop: T | undefined): prop is T;
+/** @internal */
+export declare function mergeProps<U extends HTMLElement, T extends Array<React.HTMLAttributes<U> | undefined>>(...props: T): React.HTMLAttributes<U>;
+/** @internal */
+export declare function cloneSingleChild(children: React.ReactNode | React.ReactNode[], props?: Record<string, any>, key?: any): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>)[] | null | undefined;
+/**
+ * @internal
+ */
+export declare function warnAboutMissingStyles(el?: HTMLElement): void;
+/**
+ *
+ * @internal
+ * used to stringify room options to detect dependency changes for react hooks.
+ * Replaces processors and e2ee options with strings.
+ */
+export declare function roomOptionsStringifyReplacer(key: string, val: unknown): unknown;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,gBAAgB;AAChB,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAC7E,IAAI,EAAE,CAAC,GAAG,SAAS,GAClB,IAAI,IAAI,CAAC,CAEX;AAED,gBAAgB;AAChB,wBAAgB,UAAU,CACxB,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EACpD,GAAG,KAAK,EAAE,CAAC,2BAEZ;AAED,gBAAgB;AAChB,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,EAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3B,GAAG,CAAC,EAAE,GAAG,2IAgBV;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,CAAC,EAAE,WAAW,QAgBtD;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,WAQrE"}

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@werxt/livekit-components-react",
+  "version": "2.9.20+werxt.1",
+  "license": "Apache-2.0",
+  "author": "LiveKit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KazimirPodolski/livekit-components-js.git",
+    "directory": "/packages/react"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.mjs",
+      "require": "./dist/hooks.js"
+    },
+    "./prefabs": {
+      "types": "./dist/prefabs.d.ts",
+      "import": "./dist/prefabs.mjs",
+      "require": "./dist/prefabs.js"
+    },
+    "./krisp": {
+      "types": "./dist/krisp.d.ts",
+      "import": "./dist/krisp.mjs",
+      "require": "./dist/krisp.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "typings": "dist/index.d.ts",
+  "dependencies": {
+    "clsx": "2.1.1",
+    "events": "^3.3.0",
+    "jose": "^6.0.12",
+    "usehooks-ts": "3.1.1",
+    "@livekit/components-core": "0.12.13"
+  },
+  "peerDependencies": {
+    "@livekit/krisp-noise-filter": "^0.2.12 || ^0.3.0",
+    "livekit-client": "^2.17.2",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tslib": "^2.6.2"
+  },
+  "peerDependenciesMeta": {
+    "@livekit/krisp-noise-filter": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@livekit/protocol": "^1.44.0",
+    "@microsoft/api-extractor": "^7.35.0",
+    "@size-limit/file": "^11.0.2",
+    "@size-limit/webpack": "^11.0.2",
+    "@size-limit/webpack-why": "^11.1.6",
+    "@svgr/cli": "^8.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/events": "^3.0.3",
+    "@types/node": "^24.7.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^8.56.0",
+    "jsdom": "^26.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^6.0.0",
+    "size-limit": "^11.0.2",
+    "typed-emitter": "^2.1.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.2.3",
+    "vitest": "^3.0.0",
+    "eslint-config-lk-custom": "0.1.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm gen:svg && vite build",
+    "dev": "vite build --watch",
+    "gen:icons": "rimraf -I -g ./src/assets/icons/*Icon.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/icons --typescript ../styles/assets/icons",
+    "gen:images": "rimraf -I -g ./src/assets/images/*.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/images --typescript --no-svgo ../styles/assets/images",
+    "gen:svg": "pnpm gen:images && pnpm gen:icons",
+    "lint": "eslint -f unix \"src/**/*.{ts,tsx}\"",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "size": "size-limit --json",
+    "api-check": "api-extractor run --typescript-compiler-folder ../../node_modules/typescript",
+    "api-extractor": "api-extractor run --local --typescript-compiler-folder ../../node_modules/typescript --verbose"
+  }
+}

package/src/assets/icons/CameraDisabledIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgCameraDisabledIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentColor" {...props}>
+    <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" />
+    <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" />
+  </svg>
+);
+export default SvgCameraDisabledIcon;

package/src/assets/icons/CameraIcon.tsx

@@ -0,0 +1,14 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgCameraIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentColor" {...props}>
+    <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" />
+  </svg>
+);
+export default SvgCameraIcon;

package/src/assets/icons/ChatCloseIcon.tsx

@@ -0,0 +1,17 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgChatCloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 24 24" {...props}>
+    <path
+      fill="#FFF"
+      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"
+    />
+  </svg>
+);
+export default SvgChatCloseIcon;

package/src/assets/icons/ChatIcon.tsx

@@ -0,0 +1,25 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgChatIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={18} fill="none" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgChatIcon;

package/src/assets/icons/Chevron.tsx

@@ -0,0 +1,19 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgChevron = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <path
+      fill="currentcolor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgChevron;

package/src/assets/icons/FocusToggleIcon.tsx

@@ -0,0 +1,16 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgFocusToggleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
+      <path d="M10 1.75h4.25m0 0V6m0-4.25L9 7M6 14.25H1.75m0 0V10m0 4.25L7 9" />
+    </g>
+  </svg>
+);
+export default SvgFocusToggleIcon;

package/src/assets/icons/GearIcon.tsx

@@ -0,0 +1,19 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgGearIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <path
+      fill="currentcolor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgGearIcon;

package/src/assets/icons/LeaveIcon.tsx

@@ -0,0 +1,25 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgLeaveIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLeaveIcon;

package/src/assets/icons/LockLockedIcon.tsx

@@ -0,0 +1,19 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgLockLockedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <path
+      fill="currentcolor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLockLockedIcon;

package/src/assets/icons/MicDisabledIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgMicDisabledIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentColor" {...props}>
+    <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" />
+    <path d="M8.743 10.907 5 7.164V8a3 3 0 0 0 3.743 2.907z" />
+  </svg>
+);
+export default SvgMicDisabledIcon;

package/src/assets/icons/MicIcon.tsx

@@ -0,0 +1,19 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgMicIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentColor" {...props}>
+    <path
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path d="M5 3a3 3 0 1 1 6 0v5a3 3 0 0 1-6 0z" />
+  </svg>
+);
+export default SvgMicIcon;

package/src/assets/icons/QualityExcellentIcon.tsx

@@ -0,0 +1,15 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgQualityExcellentIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentcolor" {...props}>
+    <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" />
+    <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" />
+  </svg>
+);
+export default SvgQualityExcellentIcon;

package/src/assets/icons/QualityGoodIcon.tsx

@@ -0,0 +1,19 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgQualityGoodIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentcolor" {...props}>
+    <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" />
+    <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" />
+    <g opacity={0.25}>
+      <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" />
+      <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" />
+    </g>
+  </svg>
+);
+export default SvgQualityGoodIcon;

package/src/assets/icons/QualityPoorIcon.tsx

@@ -0,0 +1,20 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgQualityPoorIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentcolor" {...props}>
+    <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" />
+    <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" />
+    <g opacity={0.25}>
+      <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" />
+      <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" />
+      <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" />
+    </g>
+  </svg>
+);
+export default SvgQualityPoorIcon;

package/src/assets/icons/QualityUnknownIcon.tsx

@@ -0,0 +1,17 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgQualityUnknownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="currentColor" {...props}>
+    <g opacity={0.25}>
+      <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" />
+      <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" />
+    </g>
+  </svg>
+);
+export default SvgQualityUnknownIcon;

package/src/assets/icons/ScreenShareIcon.tsx

@@ -0,0 +1,25 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgScreenShareIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={20} height={16} fill="none" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgScreenShareIcon;

package/src/assets/icons/ScreenShareStopIcon.tsx

@@ -0,0 +1,21 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgScreenShareStopIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={20} height={16} fill="none" {...props}>
+    <g fill="currentColor">
+      <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" />
+      <path
+        fillRule="evenodd"
+        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"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+export default SvgScreenShareStopIcon;

package/src/assets/icons/SpinnerIcon.tsx

@@ -0,0 +1,93 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgSpinnerIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.7}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.6}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.5}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.4}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.9}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.3}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.8}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      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"
+      clipRule="evenodd"
+      opacity={0.2}
+    />
+  </svg>
+);
+export default SvgSpinnerIcon;

package/src/assets/icons/UnfocusToggleIcon.tsx

@@ -0,0 +1,16 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgUnfocusToggleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
+    <g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
+      <path d="M13.25 7H9m0 0V2.75M9 7l5.25-5.25M2.75 9H7m0 0v4.25M7 9l-5.25 5.25" />
+    </g>
+  </svg>
+);
+export default SvgUnfocusToggleIcon;

package/src/assets/icons/index.ts

@@ -0,0 +1,19 @@
+export { default as CameraDisabledIcon } from './CameraDisabledIcon';
+export { default as CameraIcon } from './CameraIcon';
+export { default as ChatCloseIcon } from './ChatCloseIcon';
+export { default as ChatIcon } from './ChatIcon';
+export { default as Chevron } from './Chevron';
+export { default as FocusToggleIcon } from './FocusToggleIcon';
+export { default as GearIcon } from './GearIcon';
+export { default as LeaveIcon } from './LeaveIcon';
+export { default as LockLockedIcon } from './LockLockedIcon';
+export { default as MicDisabledIcon } from './MicDisabledIcon';
+export { default as MicIcon } from './MicIcon';
+export { default as QualityExcellentIcon } from './QualityExcellentIcon';
+export { default as QualityGoodIcon } from './QualityGoodIcon';
+export { default as QualityPoorIcon } from './QualityPoorIcon';
+export { default as QualityUnknownIcon } from './QualityUnknownIcon';
+export { default as ScreenShareIcon } from './ScreenShareIcon';
+export { default as ScreenShareStopIcon } from './ScreenShareStopIcon';
+export { default as SpinnerIcon } from './SpinnerIcon';
+export { default as UnfocusToggleIcon } from './UnfocusToggleIcon';

package/src/assets/icons/util.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ConnectionQuality, Track } from 'livekit-client';
+
+import {
+  MicIcon,
+  MicDisabledIcon,
+  CameraIcon,
+  CameraDisabledIcon,
+  QualityUnknownIcon,
+  QualityExcellentIcon,
+  QualityGoodIcon,
+  QualityPoorIcon,
+  ScreenShareIcon,
+  ScreenShareStopIcon,
+} from './index';
+
+/**
+ * @internal
+ */
+export function getSourceIcon(source: Track.Source, enabled: boolean) {
+  switch (source) {
+    case Track.Source.Microphone:
+      return enabled ? <MicIcon /> : <MicDisabledIcon />;
+    case Track.Source.Camera:
+      return enabled ? <CameraIcon /> : <CameraDisabledIcon />;
+    case Track.Source.ScreenShare:
+      return enabled ? <ScreenShareStopIcon /> : <ScreenShareIcon />;
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * @internal
+ */
+export function getConnectionQualityIcon(quality: ConnectionQuality) {
+  switch (quality) {
+    case ConnectionQuality.Excellent:
+      return <QualityExcellentIcon />;
+    case ConnectionQuality.Good:
+      return <QualityGoodIcon />;
+    case ConnectionQuality.Poor:
+      return <QualityPoorIcon />;
+    default:
+      return <QualityUnknownIcon />;
+  }
+}