@apple-pie/slice 0.1.42 → 0.1.43

package/dist/esm/chunks/{TextField-35ptM83Q.mjs → TextField-Bgi7vOIQ.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-l-UorzsO.mjs";
+import { _ as __rest } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
@@ -11,21 +11,21 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { s as setStyle } from "./misc-DBWrv8Kl.mjs";
+import { s as setStyle } from "./misc--ZyHIQmL.mjs";
 
-import "./webRTCStore-FL1z4Odf.mjs";
+import "./webRTCStore-Dms1MoDQ.mjs";
 
-import "./microphoneStore-CO8-b4gt.mjs";
+import "./microphoneStore-B1Dtf36s.mjs";
 
-import "./volumeStore-DHoAeahx.mjs";
+import "./volumeStore-B5cIgXFy.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { B as Button } from "./Button-CZb74NLO.mjs";
+import { B as Button } from "./Button-BZytiaR4.mjs";
 
-import { I as Icon } from "./Icon-CpLHegV5.mjs";
+import { I as Icon } from "./Icon-qVUjH6UY.mjs";
 
-import { I as IconButton } from "./IconButton-h7T_ekPP.mjs";
+import { I as IconButton } from "./IconButton-Ryf6VCg4.mjs";
 
 var css = {
     wrapper: "TextField-module_wrapper__qZ-p- flexBox-module_rowStart__4tcxS",

package/dist/esm/chunks/{Tip-CqfBwJCT.mjs → Tip-B_EP7Vmk.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-l-UorzsO.mjs";
+import { _ as __rest } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { jsx } from "react/jsx-runtime";
 
@@ -7,7 +7,7 @@ import { motion } from "motion/react";
 
 import React, { useState, useRef, useEffect, useMemo } from "react";
 
-import { f as filterClasses } from "./misc-DBWrv8Kl.mjs";
+import { f as filterClasses } from "./misc--ZyHIQmL.mjs";
 
 var css = {
     wrapper: "Tip-module_wrapper__D7ACT flexBox-module_rowStart__4tcxS",

package/dist/esm/chunks/{Toast-B3IqrBpg.mjs → Toast-kgJ0O4Oy.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-l-UorzsO.mjs";
+import { _ as __rest } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -11,19 +11,19 @@ import { useTheme } from "../hooks/useTheme.mjs";
 
 import "../theme/colors.mjs";
 
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc-DBWrv8Kl.mjs";
+import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from "./misc--ZyHIQmL.mjs";
 
-import "./webRTCStore-FL1z4Odf.mjs";
+import "./webRTCStore-Dms1MoDQ.mjs";
 
-import "./microphoneStore-CO8-b4gt.mjs";
+import "./microphoneStore-B1Dtf36s.mjs";
 
-import "./volumeStore-DHoAeahx.mjs";
+import "./volumeStore-B5cIgXFy.mjs";
 
 import "../hooks/useWindow.mjs";
 
-import { I as Icon } from "./Icon-CpLHegV5.mjs";
+import { I as Icon } from "./Icon-qVUjH6UY.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-hbzhNcoD.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-BxIb1MFB.mjs";
 
 var ToastType, css = {
     wrapper: "Toast-module_wrapper__1uj9O flexBox-module_rowBetween__5FEvi",

package/dist/esm/chunks/{ToggleButton-CEDmO_Bq.mjs → ToggleButton-fGSG0TE1.mjs}

@@ -3,9 +3,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import { useMemo } from "react";
 
-import { I as IconButton } from "./IconButton-h7T_ekPP.mjs";
+import { I as IconButton } from "./IconButton-Ryf6VCg4.mjs";
 
-import { L as Label } from "./Label-lWzgZCMd.mjs";
+import { L as Label } from "./Label-CZZymU3Q.mjs";
 
 var css_toggleButton = "ToggleButton-module_toggleButton__H7KgI flexBox-module_rowStart__4tcxS";
 

package/dist/esm/chunks/{UploadArea-CLSF8l5e.mjs → UploadArea-CiB2qjtR.mjs}

@@ -3,13 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useState, useRef, useId, useCallback, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-DBWrv8Kl.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc--ZyHIQmL.mjs";
 
-import { I as Icon } from "./Icon-CpLHegV5.mjs";
+import { F as FileList } from "./FileList-e8S9kUTk.mjs";
 
-import { P as ProgressIndicator } from "./ProgressIndicator-hbzhNcoD.mjs";
+import { I as Icon } from "./Icon-qVUjH6UY.mjs";
 
-import { F as FileList } from "./FileList-Cj2CYY_9.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-BxIb1MFB.mjs";
 
 var css = {
     wrapper: "UploadArea-module_wrapper__aircC flexBox-module_column__ezvMq",

package/dist/esm/chunks/{Video-BZFEreEg.mjs → Video-D-Idnpcz.mjs}

@@ -1,17 +1,17 @@
 'use client';
-import { _ as __rest, a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { _ as __rest, a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-DBWrv8Kl.mjs";
+import { s as setStyle } from "./misc--ZyHIQmL.mjs";
 
-import { I as IconButton } from "./IconButton-h7T_ekPP.mjs";
+import { I as IconButton } from "./IconButton-Ryf6VCg4.mjs";
 
-import { S as Slider } from "./Slider-CO6SEixo.mjs";
+import { S as Slider } from "./Slider-BrTR3O9N.mjs";
 
-import { T as ToggleButton } from "./ToggleButton-CEDmO_Bq.mjs";
+import { T as ToggleButton } from "./ToggleButton-fGSG0TE1.mjs";
 
 var PlayState, css_wrapper = "Video-module_wrapper__a9iH8", css_video = "Video-module_video__hxKME", css_controls = "Video-module_controls__X4yt6", css_controlsHeader = "Video-module_controlsHeader__dD64-", css_controlsFooter = "Video-module_controlsFooter__qJNTa", css_controlsBody = "Video-module_controlsBody__2GbQz", css_right = "Video-module_right__UMhfW", css_left = "Video-module_left__XC33m", css_progress = "Video-module_progress__UTWtq";
 

package/dist/esm/chunks/{VideoController-BabbcQji.mjs → VideoController-BKW28ojb.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { _ as __rest } from "./tslib.es6-l-UorzsO.mjs";
+import { _ as __rest } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -7,19 +7,19 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef, useState, useEffect, useMemo } from "react";
 
-import "./microphoneStore-CO8-b4gt.mjs";
+import "./microphoneStore-B1Dtf36s.mjs";
 
-import "./volumeStore-DHoAeahx.mjs";
+import "./volumeStore-B5cIgXFy.mjs";
 
-import "./webRTCStore-FL1z4Odf.mjs";
+import "./webRTCStore-Dms1MoDQ.mjs";
 
-import { s as setStyle } from "./misc-DBWrv8Kl.mjs";
+import { s as setStyle } from "./misc--ZyHIQmL.mjs";
 
-import { I as IconButton } from "./IconButton-h7T_ekPP.mjs";
+import { I as IconButton } from "./IconButton-Ryf6VCg4.mjs";
 
-import { O as Overlay } from "./Overlay-DQrbl0BZ.mjs";
+import { O as Overlay } from "./Overlay-Dc6fkzIf.mjs";
 
-import { u as useVideo, a as useVideoActions } from "./videoStore-DpIm3vjz.mjs";
+import { u as useVideo, a as useVideoActions } from "./videoStore-BHPpyl3e.mjs";
 
 var css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
 

package/dist/esm/chunks/{WSConnection-CCW9XDFQ.mjs → WSConnection-zS21YO-b.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/esm/chunks/{WebRTCConnection-Bj2D6Sa_.mjs → WebRTCConnection-YLZJFmHZ.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 class WebRTCConnection {
     /**

package/dist/esm/chunks/{localDBStore-Cze9_elI.mjs → localDBStore-BCBsWmHs.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter, _ as __rest } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter, _ as __rest } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { useMemo } from "react";
 
@@ -6,7 +6,7 @@ import { create } from "zustand";
 
 import { useShallow } from "zustand/react/shallow";
 
-import { I as IndexedDB } from "./IndexedDB-45_U7IIq.mjs";
+import { I as IndexedDB } from "./IndexedDB-Vmrc6oKn.mjs";
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));

package/dist/esm/chunks/{microphoneStore-CO8-b4gt.mjs → microphoneStore-B1Dtf36s.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { useEffect } from "react";
 

package/dist/esm/chunks/{misc-DBWrv8Kl.mjs → misc--ZyHIQmL.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 /**
  * Remove scripts, invisible characters, and optional HTML tags from a string.

package/dist/esm/chunks/{sseStore-BNjdKHmN.mjs → sseStore-BZTuP42L.mjs}

@@ -1,8 +1,8 @@
 import { create } from "zustand";
 
-import "./tslib.es6-l-UorzsO.mjs";
+import "./tslib.es6-BdBaT9_q.mjs";
 
-import { S as SSEConnection } from "./SSEConnection-kEyZEEEm.mjs";
+import { S as SSEConnection } from "./SSEConnection-BtDJoiup.mjs";
 
 const useSSEStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{uploads-worker-BJooptoF.mjs → uploads-worker-BYZjIzhr.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 var FileUploadStatus, UploadError, WorkerStatus;
 

package/dist/esm/chunks/{uploadsStore-Cp9U91kx.mjs → uploadsStore-C-G39tsH.mjs}

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-import { W as WorkerStatus } from "./uploads-worker-BJooptoF.mjs";
+import { W as WorkerStatus } from "./uploads-worker-BYZjIzhr.mjs";
 
 let uploadsWorker = null;
 

package/dist/esm/chunks/{viewState-B7gxzYQl.mjs → viewState-94AhBeDg.mjs}

@@ -1,17 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 
-import React, { useState, useMemo, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 
-import { s as setStyle, a as accessibleKeyDown } from "./misc-DBWrv8Kl.mjs";
+import { s as setStyle, a as accessibleKeyDown } from "./misc--ZyHIQmL.mjs";
 
-import { I as Icon } from "./Icon-CpLHegV5.mjs";
+import { I as Icon } from "./Icon-qVUjH6UY.mjs";
 
 var styles = {
     tableWrapper: "DataTable-module_tableWrapper__BzoJE",
+    resizeBar: "DataTable-module_resizeBar__LmzEF",
     table: "DataTable-module_table__oL4Dz",
     baseCell: "DataTable-module_baseCell__DQl-z",
     baseCellWrapper: "DataTable-module_baseCellWrapper__WMgNm",
     headerCellWrapper: "DataTable-module_headerCellWrapper__ytVYY",
+    colResizeHandle: "DataTable-module_colResizeHandle__dF5Es",
     m: "DataTable-module_m__G9QOp type-module_body-m-regular__LuQBA",
     scroll: "DataTable-module_scroll__grEU0 scrollBars-module_scrollbars__c-ZPl"
 };
@@ -36,10 +38,67 @@ const resolveAlignValue = value => {
       case "end":
         return "flex-end";
     }
+}, resolveDragHandleXPos = elements => {
+    const {cell: cell, handle: handle, parent: parent} = null != elements ? elements : {};
+    if (!cell || !parent || !handle) return;
+    const {left: left, width: width} = cell.getBoundingClientRect(), x = left - parent.getBoundingClientRect().left - parent.clientLeft + parent.scrollLeft;
+    handle.style.left = `${x + width}px`;
 };
 
 function DataTable(props) {
-    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver, sort: sort, onSortChange: onSortChange} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [hoveredRow, setHoveredRow] = useState(null), [sortKey, setSortKey] = useState(sort), wrapperRef = React.useRef(null), cornerBoxShadow = useMemo(() => {
+    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", handleHoverColor: handleHoverColor = "var(--core-outline-special)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", colResize: colResize = !0, borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver, sort: sort, onSortChange: onSortChange, onColumnResize: onColumnResize} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [hoveredRow, setHoveredRow] = useState(null), [sortKey, setSortKey] = useState(sort), [draggingCol, setDraggingCol] = useState(null), [columnWidths, setColumnWidths] = useState({}), wrapperRef = React.useRef(null), resizeBarRef = React.useRef(null), colRefs = React.useRef({}), handleResizeEnd = useCallback((id, width) => {
+        setColumnWidths(prev => Object.assign(Object.assign({}, prev), {
+            [id]: width
+        })), setDraggingCol(null), null == onColumnResize || onColumnResize(id, width);
+    }, [ onColumnResize ]);
+    !function(element, onResizeEnd) {
+        const [client, setClient] = useState(null), [dragging, setDragging] = useState(!1), didSetListenersRef = useRef(!1), colStartX = useRef(0), lastWidthRef = useRef(0), hasMovedRef = useRef(!1), resolveStartingXPos = useCallback(() => (null == element ? void 0 : element.cell) ? element.cell.getBoundingClientRect().left : 0, [ element ]), applyHandlePos = useCallback(show => {
+            const {cell: cell, handle: handle, parent: parent} = null != element ? element : {};
+            !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
+                cell: cell,
+                handle: handle,
+                parent: parent
+            });
+        }, [ element ]), applyWidth = useCallback(clientX => {
+            if (!(null == element ? void 0 : element.col)) return;
+            const newWidth = Math.max(0, clientX - colStartX.current);
+            element.col.style.width = `${newWidth}px`, lastWidthRef.current = newWidth, hasMovedRef.current = !0;
+        }, [ element ]), handleMouseMove = useCallback(e => {
+            e.stopPropagation(), e.preventDefault(), setDragging(!0);
+            const nextClientPos = (e => {
+                if (e.type.startsWith("touch")) {
+                    const touchEvent = e;
+                    return {
+                        x: touchEvent.touches[0].clientX,
+                        y: touchEvent.touches[0].clientY
+                    };
+                }
+                const mouseEvent = e;
+                return {
+                    x: mouseEvent.clientX,
+                    y: mouseEvent.clientY
+                };
+            })(e);
+            setClient(nextClientPos), applyWidth(nextClientPos.x), applyHandlePos(!0);
+        }, [ applyWidth, applyHandlePos ]), handleMouseUp = useCallback(e => {
+            e.stopPropagation(), e.preventDefault(), setDragging(!1), setClient(null), element && hasMovedRef.current && (null == onResizeEnd || onResizeEnd(element.id, lastWidthRef.current)), 
+            applyHandlePos(!1), clearListeners();
+        }, [ element, onResizeEnd, applyHandlePos ]), initListeners = useCallback(() => {
+            didSetListenersRef.current || (document.documentElement.addEventListener("mousemove", handleMouseMove, !1), 
+            document.documentElement.addEventListener("mouseup", handleMouseUp, !1), document.documentElement.addEventListener("touchmove", handleMouseMove, !1), 
+            document.documentElement.addEventListener("touchend", handleMouseUp, !1), document.documentElement.style.userSelect = "none", 
+            document.documentElement.style.webkitUserSelect = "none", document.documentElement.style.cursor = "col-resize", 
+            colStartX.current = resolveStartingXPos(), didSetListenersRef.current = !0);
+        }, [ handleMouseMove, handleMouseUp, resolveStartingXPos ]), clearListeners = useCallback(() => {
+            didSetListenersRef.current && (document.documentElement.removeEventListener("mousemove", handleMouseMove), 
+            document.documentElement.removeEventListener("mouseup", handleMouseUp), document.documentElement.removeEventListener("touchmove", handleMouseMove, !1), 
+            document.documentElement.removeEventListener("touchend", handleMouseUp, !1), document.documentElement.style.userSelect = "auto", 
+            document.documentElement.style.webkitUserSelect = "auto", document.documentElement.style.cursor = "default", 
+            colStartX.current = 0, lastWidthRef.current = 0, hasMovedRef.current = !1, didSetListenersRef.current = !1);
+        }, [ handleMouseMove, handleMouseUp ]);
+        useEffect(() => (element ? initListeners() : clearListeners(), () => clearListeners()), [ element, initListeners, clearListeners ]);
+    }(draggingCol, handleResizeEnd);
+    const cornerBoxShadow = useMemo(() => {
         const shadows = [];
         return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
         vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
@@ -68,8 +127,9 @@ function DataTable(props) {
         "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
         "--table-corner-left": freezeColumn ? "0px" : "unset",
         "--table-border-width": "none" === borderStyle ? "0" : "1px",
-        "--table-border-sides": "box" === borderStyle ? "1px" : "0"
-    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle ]), handleScroll = useCallback(() => {
+        "--table-border-sides": "box" === borderStyle ? "1px" : "0",
+        "--table-handle-hover-color": handleHoverColor
+    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle, handleHoverColor ]), handleScroll = useCallback(() => {
         var _a, _b, _c, _d;
         const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
         setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0);
@@ -104,18 +164,51 @@ function DataTable(props) {
     }), []), resolveAriaSort = useCallback(column => {
         const sortable = void 0 !== column.sort, isSortedColumn = sortable && (null == sortKey ? void 0 : sortKey.key) === column.sort;
         if (sortable) return isSortedColumn ? "asc" === (null == sortKey ? void 0 : sortKey.dir) ? "ascending" : "descending" : void 0;
-    }, [ sortKey ]);
+    }, [ sortKey ]), handleStartDrag = useCallback((id, e) => {
+        if (!colResize) return;
+        const cell = e.currentTarget.parentElement, col = colRefs.current[id], handle = resizeBarRef.current, parent = wrapperRef.current;
+        cell && col && parent && setDraggingCol({
+            id: id,
+            cell: cell,
+            col: col,
+            handle: handle,
+            parent: parent
+        });
+    }, [ colResize ]), handleHoverDragHandle = useCallback((show, e) => {
+        if (!colResize || draggingCol) return;
+        const cell = e.currentTarget.parentElement, handle = resizeBarRef.current, parent = wrapperRef.current;
+        !show && handle ? handle.style.left = "-500px" : resolveDragHandleXPos({
+            cell: cell,
+            handle: handle,
+            parent: parent
+        });
+    }, [ draggingCol, colResize ]), handleCreateRefs = useCallback((el, id) => {
+        colRefs.current[id] = el;
+    }, []);
     return useEffect(() => {
         setSortKey(prev => (null == prev ? void 0 : prev.key) === (null == sort ? void 0 : sort.key) && (null == prev ? void 0 : prev.dir) === (null == sort ? void 0 : sort.dir) ? prev : sort);
-    }, [ sort ]), jsx("div", {
+    }, [ sort ]), jsxs("div", {
         ref: wrapperRef,
         className: `${styles.tableWrapper} ${styles.scroll}`,
         style: cssVars,
         onScroll: handleScroll,
-        children: jsxs("table", {
+        children: [ jsx("div", {
+            className: styles.resizeBar,
+            ref: resizeBarRef
+        }), jsxs("table", {
             className: styles.table,
             children: [ jsx("caption", {
                 children: caption
+            }), jsx("colgroup", {
+                children: columnDefinitions.map(column => {
+                    var _a;
+                    return jsx("col", {
+                        ref: el => handleCreateRefs(el, column.id),
+                        style: {
+                            width: setStyle(null !== (_a = columnWidths[column.id]) && void 0 !== _a ? _a : column.width)
+                        }
+                    }, column.id);
+                })
             }), jsx("thead", {
                 children: jsx("tr", {
                     children: columnDefinitions.map(column => {
@@ -145,9 +238,9 @@ function DataTable(props) {
                 children: rows.map((row, rowIndex) => jsx("tr", {
                     children: columnDefinitions.map((col, colIndex) => {
                         var _a;
-                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex);
-                        return jsx("td", {
-                            "data-column-id": `${col.id}.${rowIndex}`,
+                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex), notLast = colIndex !== columnDefinitions.length - 1;
+                        return jsxs("td", {
+                            "data-column-id": `${colIndex}.${rowIndex}`,
                             className: `${styles.baseCell} ${styles.m}`,
                             onClick: () => handleClick(col, colIndex, row, rowIndex, !1),
                             onDoubleClick: () => handleClick(col, colIndex, row, rowIndex, !0),
@@ -159,7 +252,14 @@ function DataTable(props) {
                             style: {
                                 background: background
                             },
-                            children: jsx("div", {
+                            children: [ notLast && colResize && jsx("div", {
+                                className: styles.colResizeHandle,
+                                onMouseDown: e => handleStartDrag(col.id, e),
+                                onMouseOver: e => handleHoverDragHandle(!0, e),
+                                onFocus: e => handleHoverDragHandle(!0, e),
+                                onMouseOut: e => handleHoverDragHandle(!1, e),
+                                onBlur: e => handleHoverDragHandle(!1, e)
+                            }), jsx("div", {
                                 className: styles.baseCellWrapper,
                                 style: {
                                     justifyContent: justifyContent,
@@ -172,12 +272,12 @@ function DataTable(props) {
                                     value: value,
                                     rowIndex: rowIndex
                                 }) : null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : ""
-                            })
+                            }) ]
                         }, col.id);
                     })
                 }, getRowId ? getRowId(row, rowIndex) : rowIndex))
             }) ]
-        })
+        }) ]
     });
 }
 

package/dist/esm/chunks/{volumeStore-DHoAeahx.mjs → volumeStore-B5cIgXFy.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { create } from "zustand";
 

package/dist/esm/chunks/{webRTCStore-FL1z4Odf.mjs → webRTCStore-Dms1MoDQ.mjs}

@@ -1,8 +1,8 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { create } from "zustand";
 
-import { W as WebRTCConnection } from "./WebRTCConnection-Bj2D6Sa_.mjs";
+import { W as WebRTCConnection } from "./WebRTCConnection-YLZJFmHZ.mjs";
 
 const useWebRTCStore = create((set, get) => ({
     connections: [],

package/dist/esm/chunks/{windowStore-DdQixhs7.mjs → windowStore-DYGMzncy.mjs}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from "./tslib.es6-l-UorzsO.mjs";
+import { a as __awaiter } from "./tslib.es6-BdBaT9_q.mjs";
 
 import { create } from "zustand";
 

package/dist/esm/components/AudioBubble/index.mjs

@@ -1,6 +1,6 @@
-export { A as AudioBubble } from "../../chunks/AudioBubble-RmRIS-7d.mjs";
+export { A as AudioBubble } from "../../chunks/AudioBubble-BRFQseqk.mjs";
 
-import "../../chunks/tslib.es6-l-UorzsO.mjs";
+import "../../chunks/tslib.es6-BdBaT9_q.mjs";
 
 import "react/jsx-runtime";
 
@@ -24,18 +24,18 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
-import "../../chunks/colors-oLvyNYnR.mjs";
+import "../../chunks/colors-70dW0TWM.mjs";
 
-import "../../chunks/audioVisualizer-DqfUbZLW.mjs";
+import "../../chunks/audioVisualizer-CXLuOPl4.mjs";
 
-import "../../chunks/webRTCStore-FL1z4Odf.mjs";
+import "../../chunks/webRTCStore-Dms1MoDQ.mjs";
 
 import "zustand";
 
-import "../../chunks/WebRTCConnection-Bj2D6Sa_.mjs";
+import "../../chunks/WebRTCConnection-YLZJFmHZ.mjs";
 
-import "../../chunks/microphoneStore-CO8-b4gt.mjs";
+import "../../chunks/microphoneStore-B1Dtf36s.mjs";
 
-import "../../chunks/volumeStore-DHoAeahx.mjs";
+import "../../chunks/volumeStore-B5cIgXFy.mjs";
 
 import "../../hooks/useWindow.mjs";

package/dist/esm/components/Avatar/index.mjs

@@ -1,9 +1,9 @@
-export { A as Avatar } from "../../chunks/Avatar-BFo6BjmH.mjs";
+export { A as Avatar } from "../../chunks/Avatar-Dt-n9rrn.mjs";
 
-import "../../chunks/tslib.es6-l-UorzsO.mjs";
+import "../../chunks/tslib.es6-BdBaT9_q.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/misc-DBWrv8Kl.mjs";
+import "../../chunks/misc--ZyHIQmL.mjs";

package/dist/esm/components/AvatarGroup/index.mjs

@@ -1,11 +1,11 @@
-export { A as AvatarGroup } from "../../chunks/AvatarGroup-E3J2SSMv.mjs";
+export { A as AvatarGroup } from "../../chunks/AvatarGroup-JrdUh_a7.mjs";
 
-import "../../chunks/tslib.es6-l-UorzsO.mjs";
+import "../../chunks/tslib.es6-BdBaT9_q.mjs";
 
 import "react/jsx-runtime";
 
 import "react";
 
-import "../../chunks/Avatar-BFo6BjmH.mjs";
+import "../../chunks/Avatar-Dt-n9rrn.mjs";
 
-import "../../chunks/misc-DBWrv8Kl.mjs";
+import "../../chunks/misc--ZyHIQmL.mjs";

package/dist/esm/components/Badge/index.mjs

@@ -1,6 +1,6 @@
-export { B as Badge } from "../../chunks/Badge-BNoFISPQ.mjs";
+export { B as Badge } from "../../chunks/Badge-BW2WxvHN.mjs";
 
-import "../../chunks/tslib.es6-l-UorzsO.mjs";
+import "../../chunks/tslib.es6-BdBaT9_q.mjs";
 
 import "react/jsx-runtime";
 

package/dist/esm/components/Button/index.mjs

@@ -1,6 +1,6 @@
-export { B as Button } from "../../chunks/Button-CZb74NLO.mjs";
+export { B as Button } from "../../chunks/Button-BZytiaR4.mjs";
 
-import "../../chunks/tslib.es6-l-UorzsO.mjs";
+import "../../chunks/tslib.es6-BdBaT9_q.mjs";
 
 import "react/jsx-runtime";
 
@@ -8,11 +8,11 @@ import "motion/react";
 
 import "react";
 
-import "../../chunks/Badge-BNoFISPQ.mjs";
+import "../../chunks/Badge-BW2WxvHN.mjs";
 
-import "../../chunks/Dot-DuRIiyRz.mjs";
+import "../../chunks/Dot-fbFT4OcE.mjs";
 
-import "../../chunks/Icon-CpLHegV5.mjs";
+import "../../chunks/Icon-qVUjH6UY.mjs";
 
 import "../../hooks/useTheme.mjs";
 
@@ -32,20 +32,20 @@ import "../../theme/type.mjs";
 
 import "../../hooks/useObserveTheme.mjs";
 
-import "../../chunks/misc-DBWrv8Kl.mjs";
+import "../../chunks/misc--ZyHIQmL.mjs";
 
-import "../../chunks/webRTCStore-FL1z4Odf.mjs";
+import "../../chunks/webRTCStore-Dms1MoDQ.mjs";
 
 import "zustand";
 
-import "../../chunks/WebRTCConnection-Bj2D6Sa_.mjs";
+import "../../chunks/WebRTCConnection-YLZJFmHZ.mjs";
 
-import "../../chunks/microphoneStore-CO8-b4gt.mjs";
+import "../../chunks/microphoneStore-B1Dtf36s.mjs";
 
-import "../../chunks/volumeStore-DHoAeahx.mjs";
+import "../../chunks/volumeStore-B5cIgXFy.mjs";
 
 import "../../hooks/useWindow.mjs";
 
-import "../../chunks/ProgressIndicator-hbzhNcoD.mjs";
+import "../../chunks/ProgressIndicator-BxIb1MFB.mjs";
 
-import "../../chunks/sharedTypes-B6V0j136.mjs";
+import "../../chunks/sharedTypes-C_JoMrsd.mjs";