@rocket.chat/fuselage 0.77.0 → 0.78.1

package/dist/fuselage.development.js

@@ -500,25 +500,26 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! ../.. */ "./src/index.ts");
+const contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
 const Slider_1 = __webpack_require__(/*! ../Slider */ "./src/components/Slider/index.ts");
 const getMaskTime = (durationTime) => new Date(durationTime * 1000)
     .toISOString()
     .slice(durationTime > 60 * 60 ? 11 : 14, 19);
-function forceDownload(url, fileName) {
+function forceDownload(ownerDocument, url, fileName) {
     const xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
     xhr.responseType = 'blob';
     xhr.onload = function () {
         const urlCreator = window.URL || window.webkitURL;
         const imageUrl = urlCreator.createObjectURL(this.response);
-        const tag = document.createElement('a');
+        const tag = ownerDocument.createElement('a');
         tag.href = imageUrl;
         if (fileName) {
             tag.download = fileName;
         }
-        document.body.appendChild(tag);
+        ownerDocument.body.appendChild(tag);
         tag.click();
-        document.body.removeChild(tag);
+        ownerDocument.body.removeChild(tag);
     };
     xhr.send();
 }
@@ -571,6 +572,7 @@ const AudioPlayer = (0, react_1.forwardRef)(({ src, type = 'audio/mpeg', maxPlay
         }
         handlePlaybackSpeed(1);
     };
+    const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
     return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', bg: 'tint', borderColor: 'extra-light', pb: 12, pie: 8, pis: 16, borderRadius: 'x4', w: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: handlePlay, "aria-label": isPlaying ? pauseLabel : playLabel, icon: isPlaying ? 'pause-shape-filled' : 'play-shape-filled' }), (0, jsx_runtime_1.jsxs)(__1.Margins, { inline: 8, children: [(0, jsx_runtime_1.jsx)(__1.Box, { fontScale: 'p2', color: 'secondary-info', children: isPlaying || currentTime > 0
                             ? getMaskTime(currentTime)
                             : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { mi: 16, w: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => {
@@ -579,9 +581,9 @@ const AudioPlayer = (0, react_1.forwardRef)(({ src, type = 'audio/mpeg', maxPlay
                                 }
                             } }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: handlePlaybackSpeedSingleControl, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, "aria-label": downloadAudioFileLabel, is: 'a', href: src, download: true, icon: 'download', medium: true, onClick: (e) => {
                     const { host } = new URL(src);
-                    if (host !== window.location.host) {
+                    if (host !== ownerDocument.defaultView?.location.host) {
                         e.preventDefault();
-                        forceDownload(src);
+                        forceDownload(ownerDocument, src);
                     }
                 } })), (0, jsx_runtime_1.jsxs)("audio", { style: { display: 'none' }, onTimeUpdate: (e) => {
                     setCurrentTime(e.target.currentTime);
@@ -657,8 +659,9 @@ const isSelectedValid = (value) => (selected) => {
         ? selected.value === value
         : value.includes(selected.value);
 };
-function AutoComplete({ value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }) {
-    const ref = (0, react_1.useRef)(null);
+const AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ value, filter, setFilter, options = [], renderItem, renderSelected: RenderSelected, onChange, renderEmpty, placeholder, error, disabled, multiple, onBlur: onBlurAction = () => { }, ...props }, ref) {
+    const innerRef = (0, react_1.useRef)(null);
+    const mergedRefs = (0, fuselage_hooks_1.useMergedRefs)(ref, innerRef);
     const { ref: containerRef, borderBoxSize } = (0, fuselage_hooks_1.useResizeObserver)();
     const [selected, setSelected] = (0, react_1.useState)(() => getSelected(value, options) || []);
     (0, react_1.useEffect)(() => {
@@ -703,12 +706,12 @@ function AutoComplete({ value, filter, setFilter, options = [], renderItem, rend
         onBlurAction(event);
     });
     (0, react_1.useEffect)(reset, [filter, reset]);
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useStableCallback)(() => ref.current?.focus()), flexGrow: 1, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-autocomplete": true, ref: containerRef, onClick: (0, fuselage_hooks_1.useStableCallback)(() => innerRef.current?.focus()), flexGrow: 1, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', margin: 'neg-x4', role: 'group', children: (0, jsx_runtime_1.jsxs)(Margins_1.Margins, { all: 'x4', children: [(0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: mergedRefs, onChange: (0, fuselage_hooks_1.useStableCallback)((e) => setFilter?.(e.currentTarget.value)), onBlur: handleOnBlur, onFocus: show, onKeyDown: handleKeyDown, placeholder: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.HIDDEN || !value
                                 ? placeholder
                                 : undefined, order: 1, "rcx-input-box--undecorated": true, value: filter, disabled: disabled, ...props }), selected.map((itemSelected) => RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { selected: itemSelected, onRemove: handleRemove }, itemSelected.value)) : ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { value: itemSelected.value, children: itemSelected.label, onClick: handleRemove }, itemSelected.value)))] }) }), (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-autocomplete__addon": true, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: optionsAreVisible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                         ? 'cross'
                         : 'magnifier', size: 'x20', color: 'default' }) }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: optionsAreVisible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(Options_1.Options, { width: borderBoxSize.inlineSize, onSelect: handleSelect, renderItem: renderItem, renderEmpty: renderEmpty, cursor: cursor, value: value, options: memoizedOptions }) })] }));
-}
+});
 exports["default"] = AutoComplete;
 
 
@@ -3747,6 +3750,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
 const react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
 const react_stately_1 = __webpack_require__(/*! react-stately */ "react-stately");
+const contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
 const Button_1 = __webpack_require__(/*! ../Button */ "./src/components/Button/index.ts");
 const MenuDropdown_1 = __importDefault(__webpack_require__(/*! ./MenuDropdown */ "./src/components/Menu/MenuDropdown.tsx"));
 const MenuPopover_1 = __importDefault(__webpack_require__(/*! ./MenuPopover */ "./src/components/Menu/MenuPopover.tsx"));
@@ -3763,6 +3767,7 @@ const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButto
     const { large, medium, tiny, mini } = props;
     const sizes = { large, medium, tiny, mini };
     const defaultSmall = !large && !medium && !tiny && !mini;
+    const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
     const popover = state.isOpen && ((0, jsx_runtime_1.jsx)(MenuPopover_1.default, { state: state, triggerRef: ref, placement: (0, helpers_1.getPlacement)(placement), maxWidth: maxWidth, children: (0, jsx_runtime_1.jsx)(MenuDropdown_1.default, { ...props, ...menuProps }) }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [button ? ((0, react_1.cloneElement)(button, {
                 ...buttonProps,
@@ -3771,7 +3776,9 @@ const Menu = ({ icon = 'kebab', placement = 'bottom-start', title, is: MenuButto
                 className,
                 title,
                 pressed: pressed || state.isOpen,
-            })) : ((0, jsx_runtime_1.jsx)(MenuButton, { ...buttonProps, ref: ref, icon: icon, className: className, title: title, pressed: pressed || state.isOpen, small: defaultSmall, ...sizes })), detached ? (0, react_dom_1.createPortal)(popover, document.body) : popover] }));
+            })) : ((0, jsx_runtime_1.jsx)(MenuButton, { ...buttonProps, ref: ref, icon: icon, className: className, title: title, pressed: pressed || state.isOpen, small: defaultSmall, ...sizes })), detached
+                ? (0, react_dom_1.createPortal)(popover, ownerDocument?.body || document.body)
+                : popover] }));
 };
 exports["default"] = Menu;
 
@@ -6024,7 +6031,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const Flex_1 = __webpack_require__(/*! ../Flex */ "./src/components/Flex/index.ts");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const MultiSelectFilteredAnchor = (0, react_1.forwardRef)(function MultiSelectFilteredAnchor({ children: _children, filter, onChangeFilter, placeholder, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1 }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.FlexItem, { grow: 1, children: (0, jsx_runtime_1.jsx)(InputBox_1.Input, { ref: ref, placeholder: placeholder, value: filter, onInput: (e) => onChangeFilter(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true, order: 1, autoComplete: 'off' }) }));
 });
 exports["default"] = MultiSelectFilteredAnchor;
 
@@ -7623,18 +7630,23 @@ exports.getThemePalette = getThemePalette;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.useCreateStyleContainer = void 0;
 const react_1 = __webpack_require__(/*! react */ "react");
-const useCreateStyleContainer = (id) => (0, react_1.useMemo)(() => {
-    const refElement = document.getElementById('rcx-styles') || document.head.lastChild;
-    const el = document.getElementById(id);
-    if (el) {
-        return el;
-    }
-    const styleElement = document.createElement('style');
-    styleElement.setAttribute('id', id);
-    document.head.insertBefore(styleElement, refElement);
-    document.head.appendChild(document.createElement('style'));
-    return styleElement;
-}, [id]);
+const contexts_1 = __webpack_require__(/*! ../../../contexts */ "./src/contexts/index.ts");
+const useCreateStyleContainer = (id) => {
+    const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
+    return (0, react_1.useMemo)(() => {
+        const refElement = ownerDocument.getElementById('rcx-styles') ||
+            ownerDocument.head.lastChild;
+        const el = ownerDocument.getElementById(id);
+        if (el) {
+            return el;
+        }
+        const styleElement = ownerDocument.createElement('style');
+        styleElement.setAttribute('id', id);
+        ownerDocument.head.insertBefore(styleElement, refElement);
+        ownerDocument.head.appendChild(ownerDocument.createElement('style'));
+        return styleElement;
+    }, [id, ownerDocument]);
+};
 exports.useCreateStyleContainer = useCreateStyleContainer;
 
 
@@ -7729,14 +7741,17 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_aria_1 = __webpack_require__(/*! react-aria */ "react-aria");
-function Popover(props) {
+const contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
+function Popover({ portalContainer, ...props }) {
     const popoverRef = (0, react_1.useRef)(null);
     const { state, children, isNonModal } = props;
+    const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
     const { popoverProps, underlayProps } = (0, react_aria_1.usePopover)({
         ...props,
         popoverRef,
+        boundaryElement: ownerDocument?.body,
     }, state);
-    return ((0, jsx_runtime_1.jsxs)(react_aria_1.Overlay, { children: [!isNonModal && (0, jsx_runtime_1.jsx)("div", { ...underlayProps }), (0, jsx_runtime_1.jsxs)("div", { ...popoverProps, ref: popoverRef, children: [!isNonModal && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close }), children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_1.Overlay, { portalContainer: ownerDocument?.body, children: [!isNonModal && (0, jsx_runtime_1.jsx)("div", { ...underlayProps }), (0, jsx_runtime_1.jsxs)("div", { ...popoverProps, ref: popoverRef, children: [!isNonModal && (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close }), children, (0, jsx_runtime_1.jsx)(react_aria_1.DismissButton, { onDismiss: state.close })] })] }));
 }
 exports["default"] = Popover;
 
@@ -7772,25 +7787,27 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const fuselage_hooks_1 = __webpack_require__(/*! @rocket.chat/fuselage-hooks */ "@rocket.chat/fuselage-hooks");
 const react_1 = __webpack_require__(/*! react */ "react");
 const react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
+const contexts_1 = __webpack_require__(/*! ../../contexts */ "./src/contexts/index.ts");
 const Position = ({ anchor, children, placement, margin, className: _className, ...props }) => {
     const target = (0, react_1.useRef)(null);
     const { style: positionStyle, placement: positionPlacement } = (0, fuselage_hooks_1.usePosition)(anchor, target, (0, react_1.useMemo)(() => ({ placement, margin }), [placement, margin])) || {};
     const style = (0, react_1.useMemo)(() => ({ position: 'fixed', ...positionStyle }), [positionStyle]);
+    const { document: ownerDocument } = (0, contexts_1.useOwnerDocument)();
     const [portalContainer] = (0, react_1.useState)(() => {
-        const prev = document.getElementById('position-container');
+        const prev = ownerDocument.getElementById('position-container');
         if (prev) {
             return prev;
         }
-        const element = document.createElement('div');
+        const element = ownerDocument.createElement('div');
         element.id = 'position-container';
-        document.body.appendChild(element);
+        ownerDocument.body.appendChild(element);
         return element;
     });
     (0, react_1.useEffect)(() => () => {
         if (portalContainer.childNodes.length === 0) {
-            document.body.removeChild(portalContainer);
+            ownerDocument.body.removeChild(portalContainer);
         }
-    }, [portalContainer]);
+    }, [portalContainer, ownerDocument]);
     return (0, react_dom_1.createPortal)((0, react_1.cloneElement)(children, {
         ref: target,
         style,
@@ -8222,7 +8239,7 @@ exports.SelectAria = (0, react_1.forwardRef)(function SelectAria({ error, placeh
     const mergedRef = (0, fuselage_hooks_1.useMergedRefs)(outerRef, ref);
     const { triggerProps, valueProps, menuProps } = (0, react_aria_1.useSelect)({ isDisabled, ...props }, state, ref);
     const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }), (0, jsx_runtime_1.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(small && { fontScale: 'c1' }), children: state.selectedItem ? state.selectedItem.rendered : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { position: 'relative', size: 0, children: (0, jsx_runtime_1.jsx)(react_aria_1.HiddenSelect, { state: state, triggerRef: ref, label: props.label, name: props.name, isDisabled: isDisabled }) }), (0, jsx_runtime_1.jsxs)(SelectTrigger_1.SelectTrigger, { ...(0, react_aria_1.mergeProps)(focusProps, triggerProps), ref: mergedRef, small: small, focus: isFocusVisible || state.isOpen, error: error, id: id, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', color: state.selectedItem ? 'default' : 'hint', ...valueProps, ...(small && { fontScale: 'c1' }), children: state.selectedItem ? state.selectedItem.rendered : placeholder }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'default', name: state.isOpen ? 'chevron-up' : 'chevron-down', size: 'x20' })] }), state.isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { state: state, triggerRef: ref, placement: 'bottom', offset: 4, containerPadding: 8, children: (0, jsx_runtime_1.jsx)(Options_1.OptionContainer, { style: {
                         width: borderBoxSize?.inlineSize,
                     }, children: (0, jsx_runtime_1.jsx)(Listbox_1.ListBox, { ...menuProps, state: state }) }) }))] }));
 });
@@ -10507,7 +10524,7 @@ exports["default"] = StatusBullet;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const Away = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '10', height: '10', viewBox: '0 0 10 10', className: `rcx-status-bullet rcx-status-bullet--away ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM5.80004 2.33325C5.80004 1.96506 5.50156 1.66659 5.13337 1.66659C4.76518 1.66659 4.46671 1.96506 4.46671 2.33325V5.13325V5.45367L4.71691 5.65383L6.71691 7.25383C7.00442 7.48384 7.42395 7.43722 7.65395 7.14972C7.88396 6.86221 7.83735 6.44268 7.54984 6.21267L5.80004 4.81284V2.33325Z' }) }));
+const Away = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '10', height: '10', viewBox: '0 0 10 10', "aria-hidden": 'true', className: `rcx-status-bullet rcx-status-bullet--away ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM5.80004 2.33325C5.80004 1.96506 5.50156 1.66659 5.13337 1.66659C4.76518 1.66659 4.46671 1.96506 4.46671 2.33325V5.13325V5.45367L4.71691 5.65383L6.71691 7.25383C7.00442 7.48384 7.42395 7.43722 7.65395 7.14972C7.88396 6.86221 7.83735 6.44268 7.54984 6.21267L5.80004 4.81284V2.33325Z' }) }));
 exports["default"] = Away;
 
 
@@ -10522,7 +10539,7 @@ exports["default"] = Away;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const Busy = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '10', height: '10', viewBox: '0 0 10 10', className: `rcx-status-bullet rcx-status-bullet--busy ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM3.53338 4.46655C3.16519 4.46655 2.86671 4.76503 2.86671 5.13322C2.86671 5.50141 3.16519 5.79989 3.53338 5.79989H6.73338C7.10157 5.79989 7.40004 5.50141 7.40004 5.13322C7.40004 4.76503 7.10157 4.46655 6.73338 4.46655H3.53338Z' }) }));
+const Busy = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '10', height: '10', viewBox: '0 0 10 10', "aria-hidden": 'true', className: `rcx-status-bullet rcx-status-bullet--busy ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM3.53338 4.46655C3.16519 4.46655 2.86671 4.76503 2.86671 5.13322C2.86671 5.50141 3.16519 5.79989 3.53338 5.79989H6.73338C7.10157 5.79989 7.40004 5.50141 7.40004 5.13322C7.40004 4.76503 7.10157 4.46655 6.73338 4.46655H3.53338Z' }) }));
 exports["default"] = Busy;
 
 
@@ -10537,7 +10554,7 @@ exports["default"] = Busy;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const Disabled = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '24', height: '24', viewBox: '0 0 24 24', className: `rcx-status-bullet rcx-status-bullet--disabled ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM13.3367 5.33333C13.3367 4.59695 12.7398 4 12.0034 4C11.267 4 10.67 4.59695 10.67 5.33333V14.6667C10.67 15.403 11.267 16 12.0034 16C12.7398 16 13.3367 15.403 13.3367 14.6667V5.33333ZM13.3367 18.6667C13.3367 17.9303 12.7398 17.3333 12.0034 17.3333C11.267 17.3333 10.67 17.9303 10.67 18.6667C10.67 19.403 11.267 20 12.0034 20C12.7398 20 13.3367 19.403 13.3367 18.6667Z' }) }));
+const Disabled = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '24', height: '24', viewBox: '0 0 24 24', "aria-hidden": 'true', className: `rcx-status-bullet rcx-status-bullet--disabled ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM13.3367 5.33333C13.3367 4.59695 12.7398 4 12.0034 4C11.267 4 10.67 4.59695 10.67 5.33333V14.6667C10.67 15.403 11.267 16 12.0034 16C12.7398 16 13.3367 15.403 13.3367 14.6667V5.33333ZM13.3367 18.6667C13.3367 17.9303 12.7398 17.3333 12.0034 17.3333C11.267 17.3333 10.67 17.9303 10.67 18.6667C10.67 19.403 11.267 20 12.0034 20C12.7398 20 13.3367 19.403 13.3367 18.6667Z' }) }));
 exports["default"] = Disabled;
 
 
@@ -10552,7 +10569,7 @@ exports["default"] = Disabled;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const Loading = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: `rcx-status-bullet rcx-status-bullet--loading ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, children: (0, jsx_runtime_1.jsx)("circle", { cx: '6', cy: '6', r: '5', className: 'rcx-status-bullet rcx-status-bullet--loading', strokeWidth: '2', strokeDasharray: '2 2' }) }));
+const Loading = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', "aria-hidden": 'true', xmlns: 'http://www.w3.org/2000/svg', className: `rcx-status-bullet rcx-status-bullet--loading ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, children: (0, jsx_runtime_1.jsx)("circle", { cx: '6', cy: '6', r: '5', className: 'rcx-status-bullet rcx-status-bullet--loading', strokeWidth: '2', strokeDasharray: '2 2' }) }));
 exports["default"] = Loading;
 
 
@@ -10567,7 +10584,7 @@ exports["default"] = Loading;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const Offline = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: `rcx-status-bullet rcx-status-bullet--offline ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, children: (0, jsx_runtime_1.jsx)("circle", { cx: '6', cy: '6', r: '5', className: `rcx-status-bullet rcx-status-bullet--offline`, strokeWidth: '2' }) }));
+const Offline = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none', "aria-hidden": 'true', xmlns: 'http://www.w3.org/2000/svg', className: `rcx-status-bullet rcx-status-bullet--offline ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, children: (0, jsx_runtime_1.jsx)("circle", { cx: '6', cy: '6', r: '5', className: `rcx-status-bullet rcx-status-bullet--offline`, strokeWidth: '2' }) }));
 exports["default"] = Offline;
 
 
@@ -10582,7 +10599,7 @@ exports["default"] = Offline;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
-const Online = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '24', height: '24', viewBox: '0 0 24 24', className: `rcx-status-bullet rcx-status-bullet--online ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { d: 'M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z' }) }));
+const Online = ({ size, className, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { ...props, width: '24', height: '24', viewBox: '0 0 24 24', "aria-hidden": 'true', className: `rcx-status-bullet rcx-status-bullet--online ${className} ${size === 'small' ? 'rcx-status-bullet--small' : ''}`, xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { d: 'M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z' }) }));
 exports["default"] = Online;
 
 
@@ -11422,6 +11439,52 @@ __exportStar(__webpack_require__(/*! ./Tooltip */ "./src/components/Tooltip/inde
 __exportStar(__webpack_require__(/*! ./UrlInput */ "./src/components/UrlInput/index.ts"), exports);
 
 
+/***/ },
+
+/***/ "./src/contexts/OwnerDocument.ts"
+/*!***************************************!*\
+  !*** ./src/contexts/OwnerDocument.ts ***!
+  \***************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.useOwnerDocument = exports.OwnerDocument = void 0;
+const react_1 = __webpack_require__(/*! react */ "react");
+exports.OwnerDocument = (0, react_1.createContext)({ document: window.document });
+const useOwnerDocument = () => {
+    return (0, react_1.useContext)(exports.OwnerDocument);
+};
+exports.useOwnerDocument = useOwnerDocument;
+
+
+/***/ },
+
+/***/ "./src/contexts/index.ts"
+/*!*******************************!*\
+  !*** ./src/contexts/index.ts ***!
+  \*******************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__exportStar(__webpack_require__(/*! ./OwnerDocument */ "./src/contexts/OwnerDocument.ts"), exports);
+
+
 /***/ },
 
 /***/ "./src/getPaletteColor.ts"
@@ -11894,6 +11957,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.useStyle = void 0;
 const css_in_js_1 = __webpack_require__(/*! @rocket.chat/css-in-js */ "@rocket.chat/css-in-js");
 const react_1 = __webpack_require__(/*! react */ "react");
+const contexts_1 = __webpack_require__(/*! ../contexts */ "./src/contexts/index.ts");
 const useStyle = (cssFn, arg) => {
     const content = (0, react_1.useMemo)(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
     const className = (0, react_1.useMemo)(() => {
@@ -11903,17 +11967,18 @@ const useStyle = (cssFn, arg) => {
         return content ? (0, css_in_js_1.createClassName)(content) : undefined;
     }, [content]);
     (0, react_1.useDebugValue)(className);
+    const { document } = (0, contexts_1.useOwnerDocument)();
     (0, react_1.useInsertionEffect)(() => {
         if (!content || !className) {
             return;
         }
         const escapedClassName = (0, css_in_js_1.escapeName)(className);
         const transpiledContent = (0, css_in_js_1.transpile)(`.${escapedClassName}`, content);
-        const detach = (0, css_in_js_1.attachRules)(transpiledContent);
+        const detach = (0, css_in_js_1.attachRules)(transpiledContent, { document });
         return () => {
             setTimeout(detach, 1000);
         };
-    }, [className, content]);
+    }, [className, content, document]);
     return className;
 };
 exports.useStyle = useStyle;
@@ -11943,13 +12008,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.useArrayLikeClassNameProp = exports.__setThrowErrorOnInvalidToken__ = exports.Palette = void 0;
+exports.useArrayLikeClassNameProp = exports.Var = exports.__setThrowErrorOnInvalidToken__ = exports.Palette = void 0;
 __webpack_require__(/*! ./index.scss */ "./src/index.scss");
 __exportStar(__webpack_require__(/*! ./components */ "./src/components/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./styleTokens */ "./src/styleTokens.ts"), exports);
+__exportStar(__webpack_require__(/*! ./contexts */ "./src/contexts/index.ts"), exports);
 var Theme_1 = __webpack_require__(/*! ./Theme */ "./src/Theme.ts");
 Object.defineProperty(exports, "Palette", ({ enumerable: true, get: function () { return Theme_1.Palette; } }));
 Object.defineProperty(exports, "__setThrowErrorOnInvalidToken__", ({ enumerable: true, get: function () { return Theme_1.__setThrowErrorOnInvalidToken__; } }));
+Object.defineProperty(exports, "Var", ({ enumerable: true, get: function () { return Theme_1.Var; } }));
 var useArrayLikeClassNameProp_1 = __webpack_require__(/*! ./hooks/useArrayLikeClassNameProp */ "./src/hooks/useArrayLikeClassNameProp.ts");
 Object.defineProperty(exports, "useArrayLikeClassNameProp", ({ enumerable: true, get: function () { return useArrayLikeClassNameProp_1.useArrayLikeClassNameProp; } }));