@apple-pie/slice 0.1.31 → 0.1.33

package/README.md

@@ -1,21 +1,17 @@
 # Slice (`@apple-pie/slice`)
 
-Slice is a TypeScript-first React UI kit with typed theme tokens, composable components, hooks, optional Zustand stores, worker-backed uploads, Storybook documentation, and benchmark tooling.
+Slice is a TypeScript-first React UI kit with themed components, hooks, optional Zustand stores, worker-backed uploads, and Storybook documentation.
 
 The package is currently in beta. Until `1.0.0`, breaking API changes may still happen.
 
 Docs and showcase: https://slice-uikit.com
 
-## Installation Test
+GitHub repository: https://github.com/uris/uikit
 
-```bash
-npm install @apple-pie/slice
-```
-
-Required peer dependencies:
+## Installation
 
 ```bash
-npm install react react-dom motion
+npm install @apple-pie/slice react react-dom motion
 ```
 
 Optional peer dependency for store APIs:
@@ -26,6 +22,20 @@ npm install zustand
 
 ## Quick Start
 
+Import the package stylesheet once at your app root:
+
+```tsx
+import '@apple-pie/slice/styles.css';
+```
+
+Slice uses Funnel Sans as its default typeface. Load the font in your app so the theme typography renders correctly.
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");
+```
+
+Wrap your app with `ThemeProvider` and use components inside that scope:
+
 ```tsx
 import '@apple-pie/slice/styles.css';
 import { Avatar, Button, ThemeProvider, useTheme } from '@apple-pie/slice';
@@ -51,56 +61,17 @@ export default function App() {
 }
 ```
 
-Slice styles are loaded from `@apple-pie/slice/styles.css`.
-
-Slice uses Funnel Sans as its default typeface. Load the font in your app so the theme typography renders correctly.
-
-```css
-@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");
-```
-
-`ThemeProvider` is the default theme bootstrap for the library. It sets the active `data-slice-theme` value on the document root and renders a `data-slice-theme-scope` wrapper. When `global` is enabled, it also applies the active theme's `core-surface-primary` color to the root document element and `document.body` backgrounds. In Safari, this also drives the browser header color.
+For more setup examples, theming guidance, component docs, and Storybook demos, use the site:
 
-## Modal System
+- https://slice-uikit.com
 
-Slice includes a presentational `Modal`, a `ModalController` for global rendering and overlay management, and an optional Zustand `ModalStore` for imperative `show`, `hide`, and promise-based modal flows.
+## What Slice Includes
 
-```tsx
-import { Button, FlexDiv, Modal, ModalController } from '@apple-pie/slice';
-import { useModalActions } from '@apple-pie/slice/stores/modal';
-import { useRef } from 'react';
-
-export function ConfirmExample() {
-	const actions = useModalActions();
-	const boundsRef = useRef<HTMLDivElement>(null);
-
-	const openModal = async () => {
-		try {
-			const result = await actions.modalResponse<'yes' | 'no'>({
-				component: Modal,
-				props: {
-					title: 'Continue?',
-					children: 'Are you sure you want to continue?',
-					actions: [
-						{ id: 'no', label: 'No', value: 'no' },
-						{ id: 'yes', label: 'Yes', value: 'yes', primary: true },
-					],
-				},
-			});
-			console.log(result);
-		} catch (error) {
-			console.error(error);
-		}
-	};
-
-	return (
-		<FlexDiv ref={boundsRef} height={320} justify="center" align="center">
-			<Button onClick={openModal}>Open Modal</Button>
-			<ModalController dragConstraintsRef={boundsRef} />
-		</FlexDiv>
-	);
-}
-```
+- React UI components for layout, inputs, feedback, modal flows, overlays, media, and uploads
+- Typed theme tokens for color, typography, elevation, motion, and light or dark themes
+- Hooks for theme state, resize observation, keyboard shortcuts, local storage, audio, microphone, tooltips, and window helpers
+- Optional Zustand-backed stores exposed through package subpaths
+- Worker-backed uploads through `@apple-pie/slice/workers/uploads`
 
 ## Package Surface
 
@@ -110,7 +81,7 @@ Primary entrypoint:
 import { Avatar, ThemeProvider, useTheme } from '@apple-pie/slice';
 ```
 
-Published subpaths:
+Common subpaths:
 
 - `@apple-pie/slice/components/*`
 - `@apple-pie/slice/hooks`
@@ -129,246 +100,26 @@ Published subpaths:
 - `@apple-pie/slice/utils`
 - `@apple-pie/slice/utils/objects`
 - `@apple-pie/slice/workers/*`
-
-Example subpath imports:
-
-```ts
-import { Avatar } from '@apple-pie/slice/components/Avatar';
-import { useTheme } from '@apple-pie/slice/hooks/useTheme';
-import { ModalController } from '@apple-pie/slice/components/ModalController';
-import { ThemeProvider } from '@apple-pie/slice/providers/ThemeProvider';
-import { useModalActions } from '@apple-pie/slice/stores/modal';
-import { useUploadsActions } from '@apple-pie/slice/stores/uploads';
-import { lightTheme } from '@apple-pie/slice/theme/themes';
-import { IndexedDB } from '@apple-pie/slice/utils/objects';
-```
-
-## What’s Included
-
-- 35+ exported React UI components covering input, feedback, modal, overlay, media, layout, and upload flows
-- Theme tokens and presets for colors, corners, elevations, motion, typography, and full light/dark themes
-- Exported React hooks for theme state, resize observation, keyboard shortcuts, local storage, audio, microphone, tooltips, and window helpers
-- Optional Zustand stores for `LocalDB`, `modal`, `microphone`, `SSE`, `WS`, `tip`, `toast`, `uploads`, `volume`, and `window`
-- Worker-backed uploads via `@apple-pie/slice/workers/uploads`
-- Utility functions plus low-level `IndexedDB`, `SSEConnection`, and `WSConnection` helpers
-
-## Exported Components
-
-Top-level component exports currently include:
-
-- `AudioBubble`
-- `Avatar`
-- `AvatarGroup`
-- `Badge`
-- `Button`
-- `ButtonBar`
-- `Camera`
-- `CheckBox`
-- `Chip`
-- `DivInput`
-- `DoneCheck`
-- `Dot`
-- `DraggablePanel`
-- `DropDown`
-- `ErrorSummary`
-- `FileIcon`
-- `FlexDiv`
-- `Grouper`
-- `Icon`
-- `IconButton`
-- `Label`
-- `Modal`
-- `ModalController`
-- `Overlay`
-- `Pager`
-- `ProgressIndicator`
-- `PromptInput`
-- `RadioButton`
-- `RadioButtonList`
-- `Slider`
-- `Spacer`
-- `Switch`
-- `TabBar`
-- `TextArea`
-- `TextField`
-- `Tip`
-- `Toast`
-- `ToggleButton`
-- `UploadArea`
-
-Supporting exports also include:
-
-- `ThemeProvider`
-- `ToastType`
-- `FileIconNames`
-- `SliceIcons`
-- `LabelBackground`
-
-## Exported Hooks
-
-Top-level hook exports currently include:
-
-- `useAudioRecorder`
-- `useDoubleClick`
-- `useKeyboardShortcuts`
-- `useLastUpdated`
-- `useLocalStore`
-- `useMDStreamBuffer`
-- `useMicrophone`
-- `useObserveResize`
-- `useObserveTheme`
-- `useTheme`
-- `useToolTip`
-- `useWindow`
-
-Type exports alongside hooks include:
-
-- `KeyboardShortcut`
-- `KeyboardShortcuts`
-- `MicOption`
-- `UseMicrophoneReturn`
-- `WindowGeolocation`
-- `WindowGeolocationError`
-- `BreakPoints`
-
-## Exported Stores
-
-Store subpaths currently include:
-
-- `@apple-pie/slice/stores/LocalDB`
-- `@apple-pie/slice/stores/modal`
-- `@apple-pie/slice/stores/microphone`
-- `@apple-pie/slice/stores/SSE`
-- `@apple-pie/slice/stores/WS`
-- `@apple-pie/slice/stores/tip`
-- `@apple-pie/slice/stores/toast`
-- `@apple-pie/slice/stores/uploads`
-- `@apple-pie/slice/stores/volume`
-- `@apple-pie/slice/stores/window`
-
-The shared stores barrel is also available at:
-
-- `@apple-pie/slice/stores`
-
-## Theme Exports
-
-Theme exports currently include:
-
-- `light`
-- `dark`
-- `lightTheme`
-- `darkTheme`
-- `motion`
-- `elevations`
-- `Elevation`
-
-Type exports alongside theme values include:
-
-- `SliceTheme`
-- `Colors`
-- `Corners`
-- `Type`
-- `Elevations`
-
-## Upload Worker Example
-
-```tsx
-import { useEffect, useRef } from 'react';
-import { UploadArea } from '@apple-pie/slice';
-import {
-	createUploadsWorker,
-	useUploads,
-	useUploadsActions,
-	useUploadsWorkerStatus,
-} from '@apple-pie/slice/stores/uploads';
-
-function UploadsExample() {
-	const workerRef = useRef<Worker | null>(null);
-	const uploads = useUploads();
-	const workerStatus = useUploadsWorkerStatus();
-	const actions = useUploadsActions();
-
-	useEffect(() => {
-		if (workerRef.current) return;
-		workerRef.current = createUploadsWorker();
-		actions.initialize({ uploadURL: '/api/uploads' }, workerRef.current);
-	}, [actions]);
-
-	return (
-		<div>
-			<UploadArea
-				busy={workerStatus === 'busy'}
-				files={uploads.map((upload) => ({
-					id: upload.id,
-					file: upload.file,
-					progress: upload.progress,
-					error: upload.error,
-				}))}
-				onUpload={(files) => actions.push(files)}
-				showProgress={true}
-				title={'Upload files'}
-				message={'Drag and drop files here or click to upload'}
-			/>
-		</div>
-	);
-}
-```
-
-If your app needs an explicit worker URL, import the built worker asset from the worker subpath:
-
-```ts
-import { createUploadsWorker, uploadsActions } from '@apple-pie/slice/stores/uploads';
-import uploadsWorkerUrl from '@apple-pie/slice/workers/uploads/uploads?url';
-
-const worker = createUploadsWorker(uploadsWorkerUrl);
-uploadsActions.initialize({ uploadURL: '/api/uploads' }, worker);
-```
+- `@apple-pie/slice/styles.css`
 
 ## Development
 
 ```bash
+npm install
 npm run dev
 npm run storybook
 npm run test
 npm run benchmark
 npm run build
-npm run build:min
 npm run lint
 ```
 
-`npm run build` produces:
-
-- CommonJS in `dist/cjs`
-- ESM in `dist/esm`
-- type declarations in `dist/types`
-- shared CSS modules in `dist/css`
-
-## Site Deployment
-
-The public `slice-uikit.com` site is deployed as a static Storybook build served from Docker with nginx.
-
-Production image build:
-
-```bash
-docker build -t slice-uikit-site .
-```
-
-Local container run:
-
-```bash
-docker run --rm -p 8090:80 slice-uikit-site
-```
-
-The GitHub Actions workflow at [`.github/workflows/deploy-site.yml`](./.github/workflows/deploy-site.yml) deploys using the same SSH-on-VM pattern as the existing website project: it connects to the VM, pulls or clones the repo, then rebuilds the `uikit` service from the shared `~/projects/docker-compose.yml` file on the VM.
-
-Configure these repository secrets before enabling it:
-
-- `VM_HOST`
-- `VM_USER`
-- `SSH_PRIVATE_KEY`
+Contributor setup and workflow:
 
-## Contributors
+- [CONTRIBUTING.md](./CONTRIBUTING.md)
+- [contributor-docs/build-architecture.md](./contributor-docs/build-architecture.md)
 
-Contribution setup and workflow: [CONTRIBUTING.md](./CONTRIBUTING.md)
+## Support
 
-Build and publish architecture details: [contributor-docs/build-architecture.md](./contributor-docs/build-architecture.md)
+- Documentation and demos: https://slice-uikit.com
+- Source and issues: https://github.com/uris/uikit

package/dist/cjs/chunks/{AudioBubble-k7qS53g6.js → AudioBubble-_eYM1QMu.js}

@@ -1,13 +1,14 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var colors = require("./colors-B0_3srZN.js"), audioVisualizer = require("./audioVisualizer-MOSbvvnZ.js");
+var colors = require("./colors-CmOkcjB3.js"), audioVisualizer = require("./audioVisualizer-C7fMG0WH.js");
 
-require("../hooks/useWindow.js");
+require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
+require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
 
 var css_wrapper = "AudioBubble-module_wrapper__f2yKg flexBox-module_row__z24tF", css_bubble = "AudioBubble-module_bubble__bpPT3 flexBox-module_row__z24tF";
 

package/dist/cjs/chunks/{Avatar-hP8GuwvD.js → Avatar-DTro_MXZ.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), css_wrapper = "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_user = "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF type-module_body-m-regular__LuQBA";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), css_wrapper = "Avatar-module_wrapper__ab1D7 flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_user = "Avatar-module_user__ZQv0Q flexBox-module_row__z24tF type-module_body-m-regular__LuQBA";
 
 const Avatar = React.memo(props => {
     var _a;

package/dist/cjs/chunks/{AvatarGroup-DMy34q7_.js → AvatarGroup-OPJJ_Te5.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-hP8GuwvD.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), Avatar = require("./Avatar-DTro_MXZ.js"), css_wrapper = "AvatarGroup-module_wrapper__MtOyq flexBox-module_rowStart__4tcxS", css_avatar = "AvatarGroup-module_avatar__5NVpW";
 
 const AvatarGroup = React.memo(props => {
     const {avatars: avatars = [], size: size = 32, borderWidth: borderWidth, borderSize: borderSize = 3, overlap: overlap = 8, gap: gap = 0, borderColor: borderColor, borderColorHover: borderColorHover, outerBorderSize: outerBorderSize = 3, outerBorderColor: outerBorderColor = "var(--core-surface-primary)", margin: margin = 0, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "avatars", "size", "borderWidth", "borderSize", "overlap", "gap", "borderColor", "borderColorHover", "outerBorderSize", "outerBorderColor", "margin", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, cssVars = React.useMemo(() => ({

package/dist/cjs/chunks/{Badge-D2TbyfJS.js → Badge-DWUeXxm2.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), css_badge = "Badge-module_badge__RsuMz flexBox-module_row__z24tF type-module_body-xs-medium__s3KvF";
 
 const Badge = React.memo(props => {
     const {count: count, variant: variant = "dark", hideNull: hideNull = !0} = props, divAttributes = tslib_es6.__rest(props, [ "count", "variant", "hideNull" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", displayCount = React.useMemo(() => void 0 === count ? "0" : "string" == typeof count ? count : count > 99 ? "99+" : count.toString(), [ count ]), cssVars = React.useMemo(() => ({

package/dist/cjs/chunks/{Button-CTsHZBEB.js → Button-CuGvPAkH.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-D2TbyfJS.js"), Dot = require("./Dot-C0MvSJOl.js"), Icon = require("./Icon-BFZ_5Qv3.js"), ProgressIndicator = require("./ProgressIndicator-ByZ_aYAZ.js"), sharedTypes = require("./sharedTypes-CthHPjrO.js"), css = {
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), Badge = require("./Badge-DWUeXxm2.js"), Dot = require("./Dot-DaRF2JyO.js"), Icon = require("./Icon-DjvProjz.js"), ProgressIndicator = require("./ProgressIndicator-DwqslY4o.js"), sharedTypes = require("./sharedTypes-BOieqpQy.js"), css = {
     button: "Button-module_button__2ZuB7 flexBox-module_row__z24tF",
     label: "Button-module_label__UJ3Zt",
     count: "Button-module_count__DFxVB flexBox-module_row__z24tF",

package/dist/cjs/chunks/{ButtonBar-BRb1PTmw.js → ButtonBar-CbXToyfD.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), Icon = require("./Icon-BFZ_5Qv3.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), Icon = require("./Icon-DjvProjz.js"), css_wrapper = "ButtonBar-module_wrapper__FYZ3s flexBox-module_rowStart__4tcxS", css_button = "ButtonBar-module_button__bMR3h flexBox-module_row__z24tF", css_selected = "ButtonBar-module_selected__wKvmi";
 
 const ButtonBar = React.memo(function(props) {
     const {buttons: buttons = [], selected: selected, toggle: toggle = !0, buttonSize: buttonSize = "m", frameSize: frameSize = 36, iconSize: iconSize = 20, borderWidth: borderWidth, borderSize: borderSize = 0, borderRadius: borderRadius = 100, borderColor: borderColor = "var(--core-outline-primary)", backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, backgroundColorActive: backgroundColorActive, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-outline-primary)", bgColorActive: bgColorActive = "var(--core-outline-primary)", labelColor: labelColor = "var(--core-text-primary)", onClick: onClick = button => null, onChange: onChange = button => null, onToolTip: onToolTip = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "buttons", "selected", "toggle", "buttonSize", "frameSize", "iconSize", "borderWidth", "borderSize", "borderRadius", "borderColor", "backgroundColor", "backgroundColorHover", "backgroundColorActive", "bgColor", "bgColorHover", "bgColorActive", "labelColor", "onClick", "onChange", "onToolTip" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", resolvedBorderWidth = null != borderWidth ? borderWidth : borderSize, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, resolvedBackgroundColorHover = null != backgroundColorHover ? backgroundColorHover : bgColorHover, resolvedBackgroundColorActive = null != backgroundColorActive ? backgroundColorActive : bgColorActive, [hovered, setHovered] = React.useState(-1), [selectedIndex, setSelectedIndex] = React.useState(selected);

package/dist/cjs/chunks/{Camera-CKv087kr.js → Camera-DjENiyud.js}

@@ -1,15 +1,16 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var misc = require("./misc-DZAbObFp.js"), colors = require("./colors-B0_3srZN.js");
+var misc = require("./misc-BwQIEIuF.js"), colors = require("./colors-CmOkcjB3.js");
 
-require("../hooks/useWindow.js");
+require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
+require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
 
-var Avatar = require("./Avatar-hP8GuwvD.js"), Icon = require("./Icon-BFZ_5Qv3.js"), css_wrapper = "Camera-module_wrapper__GOsKp flexBox-module_column__ezvMq", css_video = "Camera-module_video__Q2r9B", css_controls = "Camera-module_controls__qXYoL flexBox-module_rowBetween__5FEvi", css_controlsRight = "Camera-module_controlsRight__VcIz7 flexBox-module_rowEnd__rVdVm", css_controlsCenter = "Camera-module_controlsCenter__e-erq flexBox-module_row__z24tF", css_controlsLeft = "Camera-module_controlsLeft__bR4TN flexBox-module_rowStart__4tcxS", css_error = "Camera-module_error__t0w-d flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_poster = "Camera-module_poster__Gun-v flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_snapshotFrame = "Camera-module_snapshotFrame__YM6Eu flexBox-module_row__z24tF", css_clear = "Camera-module_clear__aaCfT", css_snapshot = "Camera-module_snapshot__odQH0", css_toolbarButton = "Camera-module_toolbarButton__mnmoF flexBox-module_columnStartCenter__PKcrG", css_buttonIcon = "Camera-module_buttonIcon__a-VBR flexBox-module_row__z24tF", css_buttonLabel = "Camera-module_buttonLabel__6BEs1 flexBox-module_row__z24tF type-module_body-xs-regular__ZAFft";
+var Avatar = require("./Avatar-DTro_MXZ.js"), Icon = require("./Icon-DjvProjz.js"), css_wrapper = "Camera-module_wrapper__GOsKp flexBox-module_column__ezvMq", css_video = "Camera-module_video__Q2r9B", css_controls = "Camera-module_controls__qXYoL flexBox-module_rowBetween__5FEvi", css_controlsRight = "Camera-module_controlsRight__VcIz7 flexBox-module_rowEnd__rVdVm", css_controlsCenter = "Camera-module_controlsCenter__e-erq flexBox-module_row__z24tF", css_controlsLeft = "Camera-module_controlsLeft__bR4TN flexBox-module_rowStart__4tcxS", css_error = "Camera-module_error__t0w-d flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_poster = "Camera-module_poster__Gun-v flexBox-module_row__z24tF type-module_body-m-regular__LuQBA", css_snapshotFrame = "Camera-module_snapshotFrame__YM6Eu flexBox-module_row__z24tF", css_clear = "Camera-module_clear__aaCfT", css_snapshot = "Camera-module_snapshot__odQH0", css_toolbarButton = "Camera-module_toolbarButton__mnmoF flexBox-module_columnStartCenter__PKcrG", css_buttonIcon = "Camera-module_buttonIcon__a-VBR flexBox-module_row__z24tF", css_buttonLabel = "Camera-module_buttonLabel__6BEs1 flexBox-module_row__z24tF type-module_body-xs-regular__ZAFft";
 
 const Camera = React.memo(React.forwardRef((props, ref) => {
     const videoElement = React.useRef(null), containerElement = React.useRef(null), controlsTimer = React.useRef(null), {noVideoPoster: noVideoPoster, width: width, height: height, showControlBar: showControlBar = !0, autoHideControlBar: autoHideControlBar = !0, startCameraOff: startCameraOff = !1, startAudioMuted: startAudioMuted = !1, playLocalAudio: playLocalAudio = !1, pipSnapshot: pipSnapshot = !0, userProfile: userProfile, sessionSettings: sessionSettings, onChangeProfile: onChangeProfile, onChangeSettings: onChangeSettings, onSnapshot: onSnapshot, onVideoStream: onVideoStream, onNoVideo: onNoVideo, onNoAudio: onNoAudio} = props, theme = hooks_useTheme.useTheme(), [cameraSupport, setCameraSupport] = React.useState(void 0), [cameraError, setCameraError] = React.useState(void 0), [hovered, setHovered] = React.useState(!1), [cameraOn, setCameraOn] = React.useState(!1), [micMuted, setMicMuted] = React.useState(startAudioMuted), [snapshot, setSnapshot] = React.useState(void 0), [settings, setSettings] = React.useState(!1), [profile, setProfile] = React.useState(!1), [deviceList, setDeviceList] = React.useState([]), constraints = React.useMemo(() => {

package/dist/cjs/chunks/{CheckBox-VRIL1FHh.js → CheckBox-DiJpbdy5.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-DZAbObFp.js"), Icon = require("./Icon-BFZ_5Qv3.js"), css_wrapper = "CheckBox-module_wrapper__uRsjI flexBox-module_row__z24tF", css_icon = "CheckBox-module_icon__FoDJN flexBox-module_row__z24tF", css_label = "CheckBox-module_label__0AiBp type-module_body-m-regular__LuQBA";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), Icon = require("./Icon-DjvProjz.js"), css_wrapper = "CheckBox-module_wrapper__uRsjI flexBox-module_row__z24tF", css_icon = "CheckBox-module_icon__FoDJN flexBox-module_row__z24tF", css_label = "CheckBox-module_label__0AiBp type-module_body-m-regular__LuQBA";
 
 const CheckBox = React.memo(props => {
     const {size: size = 20, checked: checked = !1, disabled: disabled = !1, color: color, children: children, onChange: onChange = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "size", "checked", "disabled", "color", "children", "onChange" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [state, setState] = React.useState(checked);

package/dist/cjs/chunks/{Chip-Dr3vKvRY.js → Chip-kzOvEo0P.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), Icon = require("./Icon-BFZ_5Qv3.js"), sharedTypes = require("./sharedTypes-CthHPjrO.js"), css = {
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), Icon = require("./Icon-DjvProjz.js"), sharedTypes = require("./sharedTypes-BOieqpQy.js"), css = {
     chip: "Chip-module_chip__0nys- flexBox-module_row__z24tF",
     icon: "Chip-module_icon__dtR-K flexBox-module_row__z24tF",
     xs: "Chip-module_xs__s-KNG type-module_body-xs-regular__ZAFft",

package/dist/cjs/chunks/{DivInput-Ci0gaCWL.js → DivInput-B917fKB9.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-DZAbObFp.js"), css_wrapper = "DivInput-module_wrapper__ZQxY-", css_input = "DivInput-module_input__J34-l type-module_body-m-regular__LuQBA";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), css_wrapper = "DivInput-module_wrapper__ZQxY-", css_input = "DivInput-module_input__J34-l type-module_body-m-regular__LuQBA";
 
 const DivInput = React.memo(props => {
     const {value: value = "", name: name = "Input Field", placeholder: placeholder = "Placeholder", isEditable: isEditable = !0, wrap: wrap = !1, focus: focus = !1, width: width = "auto", textAlign: textAlign = "left", clamp: clamp = 3, padding: padding = "0px", onChange: onChange = () => null, onSubmit: onSubmit = () => null, onFocus: onFocus = () => null, onBlur: onBlur = () => null, onDblClick: onDblClick = () => null, onClick: onClick = () => null, borderRadius: borderRadius, radius: radius = 4, backgroundColor: backgroundColor, bgColor: bgColor = "var(--core-surface-secondary)"} = props, divAttributes = tslib_es6.__rest(props, [ "value", "name", "placeholder", "isEditable", "wrap", "focus", "width", "textAlign", "clamp", "padding", "onChange", "onSubmit", "onFocus", "onBlur", "onDblClick", "onClick", "borderRadius", "radius", "backgroundColor", "bgColor" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", ref = React.useRef(null), innerText = React.useRef("" === value ? misc.cleanString(placeholder) : misc.cleanString(value)), [isFocused, setIsFocused] = React.useState(focus), [text, setText] = React.useState(innerText.current), [isPlaceholder, setIsPlaceholder] = React.useState(!1), resolvedBorderRadius = null != borderRadius ? borderRadius : radius, resolvedBackgroundColor = null != backgroundColor ? backgroundColor : bgColor, setCursor = React.useCallback((to, length = 1) => {

package/dist/cjs/chunks/{Dot-C0MvSJOl.js → Dot-DaRF2JyO.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_dot = "Dot-module_dot__RNz87 flexBox-module_row__z24tF";
 
 const DEFAULT_VARIANTS = {
     initial: {

package/dist/cjs/chunks/{DrggablePanel-DflouLUs.js → DrggablePanel-CJTEmYW6.js}

@@ -1,13 +1,14 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var misc = require("./misc-DZAbObFp.js");
+var misc = require("./misc-BwQIEIuF.js");
 
-require("../hooks/useWindow.js");
+require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
+require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
 
 var hooks_useObserveResize = require("../hooks/useObserveResize.js"), css_panel = "DraggablePanel-module_panel__vuq2R flexBox-module_columnStart__C7P44", css_content = "DraggablePanel-module_content__SBL0T flexBox-module_columnStart__C7P44", css_handle = "DraggablePanel-module_handle__LPZw8";
 

package/dist/cjs/chunks/{DropDown-BS1H62yj.js → DropDown-DRSQvXCC.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), Icon = require("./Icon-BFZ_5Qv3.js"), css = {
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), Icon = require("./Icon-DjvProjz.js"), css = {
     wrapper: "DropDown-module_wrapper__CyX0u flexBox-module_rowStart__4tcxS",
     face: "DropDown-module_face__6gyF3 flexBox-module_rowStart__4tcxS",
     faceText: "DropDown-module_faceText__glhB3",

package/dist/cjs/chunks/{ErrorSummary-B3tof7ir.js → ErrorSummary-ltiIsgJ6.js}

@@ -1,13 +1,14 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var colors = require("./colors-B0_3srZN.js");
+var colors = require("./colors-CmOkcjB3.js");
 
-require("../hooks/useWindow.js");
+require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
+require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
 
 var css = {
     errorBox: "ErrorSummary-module_errorBox__hjY50 flexBox-module_columnStart__C7P44",

package/dist/cjs/chunks/{FileIcon-Te8MaqTs.js → FileIcon-WIVOTJLa.js}

@@ -1,13 +1,15 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
 require("../theme/colors.js");
 
-var FileIconNames, misc = require("./misc-DZAbObFp.js");
+var FileIconNames, misc = require("./misc-BwQIEIuF.js");
 
-require("../hooks/useWindow.js"), exports.FileIconNames = void 0, (FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
+require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
+require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js"), exports.FileIconNames = void 0, 
+(FileIconNames = exports.FileIconNames || (exports.FileIconNames = {})).pdf = "pdf", 
 FileIconNames.text = "text", FileIconNames.sheet = "sheet", FileIconNames.preso = "preso", 
 FileIconNames.md = "md", FileIconNames.code = "code", FileIconNames.image = "image", 
 FileIconNames.audio = "audio", FileIconNames.video = "video", FileIconNames.other = "other";

package/dist/cjs/chunks/{FileList-CDcfKIV6.js → FileList-CzQZZErI.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-DZAbObFp.js"), FileIcon = require("./FileIcon-Te8MaqTs.js"), Icon = require("./Icon-BFZ_5Qv3.js"), ProgressIndicator = require("./ProgressIndicator-ByZ_aYAZ.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BwQIEIuF.js"), FileIcon = require("./FileIcon-WIVOTJLa.js"), Icon = require("./Icon-DjvProjz.js"), ProgressIndicator = require("./ProgressIndicator-DwqslY4o.js");
 
 var css = {
     wrapper: "FileList-module_wrapper__9-rrl flexBox-module_rowStart__4tcxS",

package/dist/cjs/chunks/{FlexDiv-wO8IY0Zf.js → FlexDiv-CBENyLT4.js}

@@ -1,7 +1,7 @@
 'use client';
 "use strict";
 
-var Size, Preset, tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA";
+var Size, Preset, tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), css_flexDiv = "FlexDiv-module_flexDiv__EY5A- type-module_body-m-regular__LuQBA";
 
 exports.Size = void 0, (Size = exports.Size || (exports.Size = {})).Grow = "grow", 
 Size.Fill = "fill", Size.Fit = "fit", Size.Viewport = "viewport", Size.Auto = "auto", 

package/dist/cjs/chunks/{Grouper-DyGkzdvz.js → Grouper-Cd3AJEFv.js}

@@ -1,11 +1,12 @@
 'use client';
 "use strict";
 
-var tslib_es6 = require("./tslib.es6-CzpRaW14.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
+var tslib_es6 = require("./tslib.es6-DqjaJVC3.js"), jsxRuntime = require("react/jsx-runtime"), react = require("motion/react"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
 
-require("../theme/colors.js"), require("../hooks/useWindow.js");
+require("../theme/colors.js"), require("./webRTCStore-DRjvbnve.js"), require("./microphoneStore-Dy5TwE2I.js"), 
+require("./volumeStore-BXFAQhvS.js"), require("../hooks/useWindow.js");
 
-var Badge = require("./Badge-D2TbyfJS.js"), Icon = require("./Icon-BFZ_5Qv3.js"), css_header = "Grouper-module_header__D5fV0 flexBox-module_rowBetween__5FEvi", css_title = "Grouper-module_title__ZKqTP flexBox-module_rowBetween__5FEvi type-module_body-m-regular__LuQBA", css_content = "Grouper-module_content__Mof50 flexBox-module_rowBetween__5FEvi", css_icon = "Grouper-module_icon__14Jis flexBox-module_row__z24tF";
+var Badge = require("./Badge-DWUeXxm2.js"), Icon = require("./Icon-DjvProjz.js"), css_header = "Grouper-module_header__D5fV0 flexBox-module_rowBetween__5FEvi", css_title = "Grouper-module_title__ZKqTP flexBox-module_rowBetween__5FEvi type-module_body-m-regular__LuQBA", css_content = "Grouper-module_content__Mof50 flexBox-module_rowBetween__5FEvi", css_icon = "Grouper-module_icon__14Jis flexBox-module_row__z24tF";
 
 const Grouper = React.memo(props => {
     const theme = hooks_useTheme.useTheme(), {title: title = "Group Title", toggle: toggle = !0, open: open = !0, hasIcon: hasIcon = !0, iconName: iconName = "chevron down", iconSize: iconSize = 18, frameSize: frameSize = 64, border: border = 0, count: count = 0, unframed: unframed = !1, hideNull: hideNull = !0, showFilterBadge: showFilterBadge = !1, onChange: onChange = () => null, onClick: onClick = () => null} = props, divAttributes = tslib_es6.__rest(props, [ "title", "toggle", "open", "hasIcon", "iconName", "iconSize", "frameSize", "border", "count", "unframed", "hideNull", "showFilterBadge", "onChange", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", [state, setState] = React.useState(open), [icon, animateIcon] = react.useAnimate();