@rocket.chat/fuselage 0.82.0 → 0.83.0

package/dist/fuselage.development.js

@@ -452,7 +452,7 @@ const AnimatedVisibility = (props) => {
     if (visibility === AnimatedVisibility.HIDDEN) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: props.children, value: composedFn }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: composedFn, children: props.children }));
 };
 AnimatedVisibility.HIDDEN = 'hidden';
 AnimatedVisibility.VISIBLE = 'visible';
@@ -568,7 +568,7 @@ const AudioPlayer = ({ ref, src, type = 'audio/mpeg', maxPlaybackSpeed = 2, minP
         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)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
+    return ((0, jsx_runtime_1.jsxs)(__1.Box, { borderWidth: 'default', backgroundColor: 'tint', borderColor: 'extra-light', paddingBlock: 12, paddingInlineEnd: 8, paddingInlineStart: 16, borderRadius: 'x4', width: '100%', maxWidth: 'x300', ref: containerRef, display: 'flex', alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(AudioPlayerControls_1.default, { isPlaying: isPlaying, currentTime: currentTime, durationTime: durationTime, playbackSpeed: playbackSpeed, onTogglePlay: handlePlay, onSeek: (time) => {
                     if (audioRef.current) {
                         audioRef.current.currentTime = time;
                     }
@@ -620,9 +620,9 @@ const getMaskTime = (durationTime) => new Date(durationTime * 1000)
  * shared/persistent one. `AudioPlayer` wraps this with its own element for the
  * common self-contained case.
  */
-const AudioPlayerControls = ({ isPlaying, currentTime, durationTime, playbackSpeed, onTogglePlay, onSeek, onChangePlaybackSpeed, download = false, downloadHref, onDownload, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', }) => ((0, jsx_runtime_1.jsxs)(__1.Box, { display: 'flex', alignItems: 'center', w: 'full', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: onTogglePlay, "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
+const AudioPlayerControls = ({ isPlaying, currentTime, durationTime, playbackSpeed, onTogglePlay, onSeek, onChangePlaybackSpeed, download = false, downloadHref, onDownload, playLabel = 'Play', pauseLabel = 'Pause', audioPlaybackRangeLabel = 'Audio Playback Range', changePlaybackSpeedLabel = 'Change Playback Speed', downloadAudioFileLabel = 'Download Audio File', }) => ((0, jsx_runtime_1.jsxs)(__1.Box, { display: 'flex', alignItems: 'center', width: 'full', children: [(0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, onClick: onTogglePlay, "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) => onSeek(Array.isArray(value) ? value[0] : value) }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: onChangePlaybackSpeed, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, is: 'a', href: downloadHref, download: true, icon: 'download', "aria-label": downloadAudioFileLabel, onClick: onDownload }))] }));
+                        : getMaskTime(durationTime) }), (0, jsx_runtime_1.jsx)(__1.Box, { width: 'full', children: (0, jsx_runtime_1.jsx)(Slider_1.Slider, { "aria-label": audioPlaybackRangeLabel, showOutput: false, value: currentTime, maxValue: durationTime, onChange: (value) => onSeek(Array.isArray(value) ? value[0] : value) }) }), (0, jsx_runtime_1.jsxs)(__1.Button, { secondary: true, small: true, onClick: onChangePlaybackSpeed, "aria-label": changePlaybackSpeedLabel, children: [playbackSpeed, "x"] })] }), download && ((0, jsx_runtime_1.jsx)(__1.IconButton, { primary: true, medium: true, is: 'a', href: downloadHref, download: true, icon: 'download', "aria-label": downloadAudioFileLabel, onClick: onDownload }))] }));
 exports["default"] = AudioPlayerControls;
 
 
@@ -736,7 +736,7 @@ function AutoComplete({ ref, value, filter, setFilter, options = [], renderItem,
     (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)(() => 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
+                                : 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, onClick: handleRemove, children: itemSelected.label }, 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 }) })] }));
 }
@@ -991,7 +991,7 @@ function Box({ is = 'div', ...props }) {
     const propsWithoutBoxOnlyProps = (0, useBoxOnlyProps_1.useBoxOnlyProps)(propsWithoutStylingProps);
     const element = (0, react_1.createElement)(is, propsWithoutBoxOnlyProps);
     if (transformFn) {
-        return (0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: element, value: null });
+        return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: null, children: element }));
     }
     return element;
 }
@@ -1154,9 +1154,6 @@ const lineHeightProp = {
 const letterSpacingProp = {
     toCSSValue: (value) => value ? String((0, styleTokens_1.fontScale)(value)?.letterSpacing || value) : undefined,
 };
-const aliasOf = (propName) => ({
-    aliasOf: propName,
-});
 exports.propDefs = {
     border: stringProp,
     borderBlock: stringProp,
@@ -1193,7 +1190,6 @@ exports.propDefs = {
     borderEndEndRadius: borderRadiusProp,
     color: fontColorProp,
     backgroundColor: backgroundColorProp,
-    bg: aliasOf('backgroundColor'),
     opacity: numberOrStringProp,
     alignItems: stringProp,
     alignContent: stringProp,
@@ -1210,11 +1206,9 @@ exports.propDefs = {
     gap: gapProp,
     rowGap: gapProp,
     columnGap: gapProp,
-    w: aliasOf('width'),
     width: sizeProp,
     minWidth: sizeProp,
     maxWidth: sizeProp,
-    h: aliasOf('height'),
     height: sizeProp,
     minHeight: sizeProp,
     maxHeight: sizeProp,
@@ -1233,33 +1227,19 @@ exports.propDefs = {
     insetInline: insetProp,
     insetInlineStart: insetProp,
     insetInlineEnd: insetProp,
-    m: aliasOf('margin'),
     margin: marginProp,
-    mb: aliasOf('marginBlock'),
     marginBlock: marginProp,
-    mbs: aliasOf('marginBlockStart'),
     marginBlockStart: marginProp,
-    mbe: aliasOf('marginBlockEnd'),
     marginBlockEnd: marginProp,
-    mi: aliasOf('marginInline'),
     marginInline: marginProp,
-    mis: aliasOf('marginInlineStart'),
     marginInlineStart: marginProp,
-    mie: aliasOf('marginInlineEnd'),
     marginInlineEnd: marginProp,
-    p: aliasOf('padding'),
     padding: paddingProp,
-    pb: aliasOf('paddingBlock'),
     paddingBlock: paddingProp,
-    pbs: aliasOf('paddingBlockStart'),
     paddingBlockStart: paddingProp,
-    pbe: aliasOf('paddingBlockEnd'),
     paddingBlockEnd: paddingProp,
-    pi: aliasOf('paddingInline'),
     paddingInline: paddingProp,
-    pis: aliasOf('paddingInlineStart'),
     paddingInlineStart: paddingProp,
-    pie: aliasOf('paddingInlineEnd'),
     paddingInlineEnd: paddingProp,
     fontFamily: fontFamilyProp,
     fontSize: fontSizeProp,
@@ -1358,19 +1338,6 @@ exports.propDefs = {
     },
 };
 const compiledPropDefs = new Map(Object.entries(exports.propDefs).map(([propName, propDef]) => {
-    if ('aliasOf' in propDef) {
-        const { aliasOf: effectivePropName } = propDef;
-        return [
-            propName,
-            (value, stylingProps) => {
-                if (stylingProps.has(effectivePropName)) {
-                    return;
-                }
-                const inject = compiledPropDefs.get(effectivePropName);
-                inject?.(value, stylingProps);
-            },
-        ];
-    }
     if ('toCSSValue' in propDef) {
         const cssProperty = (0, fromCamelToKebab_1.fromCamelToKebab)(propName);
         const { toCSSValue } = propDef;
@@ -1529,7 +1496,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.BubbleItem = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const BubbleItem = ({ secondary, label, icon, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: `rcx-bubble__item ${secondary ? 'rcx-bubble__item--secondary' : 'rcx-bubble__item--primary'}`, ...props, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x16', mie: 8 }), label && (0, jsx_runtime_1.jsx)("span", { children: label })] }));
+const BubbleItem = ({ secondary, label, icon, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: `rcx-bubble__item ${secondary ? 'rcx-bubble__item--secondary' : 'rcx-bubble__item--primary'}`, ...props, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 'x16', marginInlineEnd: 8 }), label && (0, jsx_runtime_1.jsx)("span", { children: label })] }));
 exports.BubbleItem = BubbleItem;
 
 
@@ -1593,7 +1560,7 @@ function Button({ ref, primary, secondary, danger, warning, success, external, i
         }
         return {};
     }, [primary, secondary, danger, warning, success]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, mie: 4 }), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', mie: 4 }), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: is, type: 'button', "rcx-button": true, ...kindAndVariantProps, "rcx-button--small": small, "rcx-button--medium": medium, "rcx-button--large": large, "rcx-button--square": square, "rcx-button--tiny-square": tiny && square, "rcx-button--mini-square": mini && square, "rcx-button--small-square": small && square, "rcx-button--medium-square": medium && square, "rcx-button--large-square": large && square, "rcx-button--loading": loading, disabled: disabled || loading, ref: ref, ...extraProps, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: 'rcx-button--content', children: [icon && !loading && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: icon, marginInlineEnd: 4 })), loading && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 'x16', name: 'loading', marginInlineEnd: 4 }), children] }) }));
 }
 exports["default"] = Button;
 
@@ -1944,7 +1911,7 @@ 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 Grid_1 = __webpack_require__(/*! ../Grid */ "./src/components/Grid/index.ts");
-const CardGrid = ({ children, breakpoints, ...props }) => ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { "rcx-card-grid": true, m: -8, ...props, children: react_1.Children.map(children, (child) => ((0, jsx_runtime_1.jsx)(Grid_1.GridItem, { "rcx-card-grid__item": true, p: 8, ...breakpoints, children: child }))) }));
+const CardGrid = ({ children, breakpoints, ...props }) => ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { "rcx-card-grid": true, margin: -8, ...props, children: react_1.Children.map(children, (child) => ((0, jsx_runtime_1.jsx)(Grid_1.GridItem, { "rcx-card-grid__item": true, padding: 8, ...breakpoints, children: child }))) }));
 exports["default"] = CardGrid;
 
 
@@ -2071,7 +2038,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
 function Chevron({ up, right, down, left, size, ...props }) {
     const children = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: 'chevron-down', size: size }), [size]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', children: children, "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-chevron": true, "rcx-chevron--up": up, "rcx-chevron--right": right, "rcx-chevron--down": down, "rcx-chevron--left": left, ...props, children: children }));
 }
 exports["default"] = Chevron;
 
@@ -2161,7 +2128,7 @@ const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skel
  */
 const CodeSnippet = ({ children, onClick, buttonText = 'Copy', buttonDisabled = false, ...props }) => {
     if (!children) {
-        return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { w: '100%', "aria-hidden": true, "aria-busy": true }) }));
+        return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%', "aria-hidden": true, "aria-busy": true }) }));
     }
     return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'pre', "rcx-code-snippet": true, ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { role: 'code', "rcx-code-snippet__codebox": true, children: children }), onClick && children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { small: true, primary: true, onClick: onClick, disabled: buttonDisabled, children: buttonText }) }))] }));
 };
@@ -2202,8 +2169,8 @@ const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 /**
  * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
  */
-function Contextualbar({ width, position, bg = 'room', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Box, { "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
+function Contextualbar({ width, position, backgroundColor = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(__1.Box, { "rcx-vertical-bar": true, backgroundColor: backgroundColor, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
 }
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -2315,7 +2282,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(__1.Box, { p: 24, ...props });
+    return (0, jsx_runtime_1.jsx)(__1.Box, { padding: 24, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2334,7 +2301,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Margins_1 = __webpack_require__(/*! ../Margins */ "./src/components/Margins/index.ts");
-const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x56', pi: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: children }) }) }));
+const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x56', paddingInline: 24, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x4', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', children: (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: children }) }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
 
 
@@ -2351,7 +2318,7 @@ 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 Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, pi: 2, size: 'x24' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x24' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2369,7 +2336,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarSection(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, pi: 24, pb: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, paddingInline: 24, paddingBlock: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
@@ -2393,7 +2360,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
 const Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/Contextualbar/Contextualbar.tsx"));
 const ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/Contextualbar/ContextualbarHeader.tsx"));
-const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { marginBlockEnd: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)))] })] }));
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
@@ -2472,8 +2439,8 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 /**
  * The `Contextualbar` has the purpose to persist and input information about the scope of the related page.
  */
-function Contextualbar({ width, position, bg = 'room', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar": true, bg: bg, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
+function Contextualbar({ width, position, backgroundColor = 'room', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar": true, backgroundColor: backgroundColor, color: 'default', display: 'flex', flexDirection: 'column', flexShrink: 0, width: width, borderInlineStartWidth: 'default', borderInlineStartColor: 'extra-light', borderInlineStartStyle: 'solid', height: 'full', position: position, insetInlineEnd: 'none', insetBlockStart: 'none', zIndex: 10, ...props }));
 }
 exports["default"] = (0, react_1.memo)(Contextualbar);
 
@@ -2585,7 +2552,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarFooter(props) {
-    return (0, jsx_runtime_1.jsx)(Box_1.Box, { pi: 16, pb: 20, ...props });
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInline: 16, paddingBlock: 20, ...props });
 }
 exports["default"] = (0, react_1.memo)(ContextualbarFooter);
 
@@ -2604,7 +2571,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 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 Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
-const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x44', pi: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', mi: -4, pi: 4, className: (0, css_in_js_1.css) `
+const ContextualbarHeader = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', height: 'x44', paddingInline: 16, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', flexShrink: 0, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexGrow: 1, height: '100%', overflow: 'hidden', marginInline: -4, paddingInline: 4, className: (0, css_in_js_1.css) `
         gap: 8px;
       `, children: children }) }));
 exports["default"] = (0, react_1.memo)(ContextualbarHeader);
@@ -2623,7 +2590,7 @@ 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 Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, pi: 2, size: 'x20' }));
+const ContextualbarIcon = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, paddingInline: 2, size: 'x20' }));
 exports["default"] = (0, react_1.memo)(ContextualbarIcon);
 
 
@@ -2641,7 +2608,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const react_1 = __webpack_require__(/*! react */ "react");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function ContextualbarSection(props) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, p: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-vertical-bar__section": true, padding: 16, display: 'flex', alignItems: 'center', flexGrow: 1, borderBlockEndWidth: 'default', borderBlockColor: 'extra-light', ...props }));
 }
 exports["default"] = (0, react_1.memo)(ContextualbarSection);
 
@@ -2665,7 +2632,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
 const Skeleton_1 = __webpack_require__(/*! ../Skeleton */ "./src/components/Skeleton/index.ts");
 const Contextualbar_1 = __importDefault(__webpack_require__(/*! ./Contextualbar */ "./src/components/ContextualbarV2/Contextualbar.tsx"));
 const ContextualbarHeader_1 = __importDefault(__webpack_require__(/*! ./ContextualbarHeader */ "./src/components/ContextualbarV2/ContextualbarHeader.tsx"));
-const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { p: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mbe: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
+const ContextualbarSkeleton = (props) => ((0, jsx_runtime_1.jsxs)(Contextualbar_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(ContextualbarHeader_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: '100%' }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: 24, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { marginBlockEnd: 4, width: '32px', height: '32px', variant: 'rect' }), Array(5)
                     .fill(5)
                     .map((_, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, index)))] })] }));
 exports["default"] = (0, react_1.memo)(ContextualbarSkeleton);
@@ -2783,7 +2750,7 @@ const DropdownDesktopWrapper_1 = __webpack_require__(/*! ./DropdownDesktopWrappe
 const DropdownMobile_1 = __webpack_require__(/*! ./DropdownMobile */ "./src/components/Dropdown/DropdownMobile.tsx");
 function Dropdown({ ref, children, reference, placement = 'bottom-start', }) {
     const notSmall = (0, fuselage_hooks_1.useMediaQuery)('(min-width: 500px)');
-    return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, children: children, placement: placement, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { children: children, ref: ref }));
+    return notSmall ? ((0, jsx_runtime_1.jsx)(DropdownDesktopWrapper_1.DropdownDesktopWrapper, { reference: reference, placement: placement, ref: ref, children: children })) : ((0, jsx_runtime_1.jsx)(DropdownMobile_1.DropdownMobile, { ref: ref, children: children }));
 }
 exports["default"] = Dropdown;
 
@@ -2802,7 +2769,7 @@ exports.DropdownDesktop = DropdownDesktop;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function DropdownDesktop({ children, style, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', pi: '0', pb: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 12, children: style?.visibility === 'hidden' ? null : children }) }));
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { style: style, elevation: '2', paddingInline: '0', paddingBlock: '0', display: 'flex', flexDirection: 'column', overflow: 'auto', "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, paddingBlock: 12, children: style?.visibility === 'hidden' ? null : children }) }));
 }
 
 
@@ -2842,7 +2809,7 @@ exports.DropdownMobile = DropdownMobile;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const __1 = __webpack_require__(/*! .. */ "./src/components/index.ts");
 function DropdownMobile({ children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', pi: '0', pb: '0', w: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, pb: 16, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(__1.Tile, { elevation: '2', paddingInline: '0', paddingBlock: '0', width: '100vw', maxHeight: '80%', position: 'fixed', display: 'flex', flexDirection: 'column', overflow: 'auto', style: { bottom: 0, left: 0 }, zIndex: 2, "data-testid": 'dropdown', ...props, children: (0, jsx_runtime_1.jsx)(__1.Box, { flexShrink: 1, paddingBlock: 16, children: children }) }));
 }
 
 
@@ -3240,7 +3207,7 @@ function FlexContainer({ inline = false, children, direction, wrap, alignItems,
         }
         return props;
     }, [alignContent, alignItems, direction, inline, justifyContent, wrap]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 }
 exports["default"] = FlexContainer;
 
@@ -3280,7 +3247,7 @@ function FlexItem({ children, order, grow, shrink, basis, align, }) {
         }
         return props;
     }, [align, basis, grow, order, shrink]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 }
 exports["default"] = FlexItem;
 
@@ -3413,7 +3380,7 @@ const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-ru
 const icons_1 = __importDefault(__webpack_require__(/*! @rocket.chat/icons */ "@rocket.chat/icons"));
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 function Icon({ name, size, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, children: icons_1.default[name], "aria-hidden": 'true', fontSize: size, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'i', "rcx-icon": true, "rcx-icon--name": name, "aria-hidden": 'true', fontSize: size, ...props, children: icons_1.default[name] }));
 }
 exports["default"] = Icon;
 
@@ -3620,7 +3587,7 @@ const LabelContext = (0, react_1.createContext)(false);
 function Label({ disabled, is, required, children, ...props }) {
     const isInsideLabel = (0, react_1.useContext)(LabelContext);
     const component = is || (isInsideLabel && 'span') || 'label';
-    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, mis: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(LabelContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { is: component, "rcx-label": true, "rcx-label--disabled": disabled, ...props, children: [children, required && ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'span', "rcx-label__required": true, marginInlineStart: 'x4', "aria-hidden": 'true', children: "*" }))] }) }));
 }
 exports["default"] = Label;
 
@@ -3639,7 +3606,7 @@ exports.LabelInfo = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const LabelInfo = ({ title, id, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'span', mi: 2, "rcx-label__info": true, children: [(0, jsx_runtime_1.jsx)("span", { hidden: true, id: id, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, name: 'info-circled', title: title })] }));
+const LabelInfo = ({ title, id, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { is: 'span', marginInline: 2, "rcx-label__info": true, children: [(0, jsx_runtime_1.jsx)("span", { hidden: true, id: id, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...props, name: 'info-circled', title: title })] }));
 exports.LabelInfo = LabelInfo;
 
 
@@ -3743,7 +3710,7 @@ const Margins = (props) => {
     const patchedChildren = (0, patchChildren_1.patchChildren)(children, (childProps) => ({
         className: (0, appendClassName_1.appendClassName)(childProps.className, (0, appendClassName_1.appendClassName)(className, marginsClassName)),
     }));
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: patchedChildren, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: patchedChildren }));
 };
 exports["default"] = Margins;
 
@@ -3960,7 +3927,7 @@ function MenuSection({ section, state, }) {
         elementType: 'span',
     });
     // If the section is not the first, add a separator element.
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, p: '0', children: [...section.childNodes].map((node) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.key !== state.collection.getFirstKey() && ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { ...separatorProps })), (0, jsx_runtime_1.jsxs)("div", { ...itemProps, children: [section.rendered && ((0, jsx_runtime_1.jsx)(Option_1.OptionTitle, { ...headingProps, children: section.rendered })), (0, jsx_runtime_1.jsx)(Box_1.Box, { ...groupProps, padding: '0', children: [...section.childNodes].map((node) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { item: node, state: state }, node.key))) })] })] }));
 }
 exports["default"] = MenuSection;
 
@@ -5671,7 +5638,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Scrollable_1 = __webpack_require__(/*! ../Scrollable */ "./src/components/Scrollable/index.ts");
-const ModalContent = ({ children, onScrollContent, ...props }) => ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, onScrollContent: onScrollContent, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content-wrapper": true, mi: 24, ...props, children: children }) }) }));
+const ModalContent = ({ children, onScrollContent, ...props }) => ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, onScrollContent: onScrollContent, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-modal__content-wrapper": true, marginInline: 24, ...props, children: children }) }) }));
 exports["default"] = ModalContent;
 
 
@@ -5785,7 +5752,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts");
 const Icon_1 = __webpack_require__(/*! ../Icon */ "./src/components/Icon/index.ts");
-const ModalIcon = ({ size = 'x20', name, alignItems = 'center', ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...props, display: 'flex', alignItems: alignItems, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { mb: 4, name: name, size: size }) }));
+const ModalIcon = ({ size = 'x20', name, alignItems = 'center', ...props }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { ...props, display: 'flex', alignItems: alignItems, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { marginBlock: 4, name: name, size: size }) }));
 exports["default"] = ModalIcon;
 
 
@@ -7081,7 +7048,7 @@ const PaginatedSelect = ({ value, withTitle, filter, setFilter: _setFilter, erro
             return show();
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(PaginatedSelectWrapper_1.default, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText && ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint', children: visibleText })), (0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(PaginatedSelectWrapper_1.default, { display: 'flex', marginInline: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText && ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', marginInline: 4, "rcx-select__item": true, fontScale: 'p2m', color: valueLabel ? 'default' : 'hint', children: visibleText })), (0, jsx_runtime_1.jsx)(Anchor, { disabled: disabled, "rcx-input-box--undecorated": true, filter: filter, ref: ref, "aria-haspopup": 'listbox', onClick: show, onBlur: hide }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                     ? 'chevron-up'
                                     : 'chevron-down', size: 'x20' }) }) })] }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { withTitle: withTitle, width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: options, onSelect: internalChangedByClick, endReached: endReached, onMouseDown: prevent_1.prevent, renderItem: renderItem }) })] }));
 };
@@ -7103,7 +7070,7 @@ const react_1 = __webpack_require__(/*! react */ "react");
 const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/InputBox/index.ts");
 const PaginatedSelect_1 = __webpack_require__(/*! ./PaginatedSelect */ "./src/components/PaginatedSelect/PaginatedSelect.tsx");
 const PaginatedSelectFiltered = ({ filter, setFilter, options, placeholder, ...props }) => {
-    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
+    const anchor = (0, react_1.useMemo)(() => ({ filter, onChange: _onChange, ...props }) => ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { marginInline: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onChange: (e) => {
             setFilter(e.currentTarget.value);
         }, ...props, "rcx-input-box--undecorated": true })), [placeholder, setFilter]);
     return ((0, jsx_runtime_1.jsx)(PaginatedSelect_1.PaginatedSelect, { placeholder: undefined, filter: filter, options: options, ...props, anchor: anchor }));
@@ -7931,7 +7898,7 @@ const getColor = (isLight, variant, error) => {
  * The `ProgressBar` is used to inform the user the progress of an operation.
  */
 function ProgressBar({ percentage, variant = 'info', error, animated, light = false, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden', ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { bg: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-progress-bar": true, title: error || undefined, overflow: 'hidden', ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: getColor(light, variant, error), "rcx-progress-bar__fill--animated": animated, "rcx-progress-bar__fill": true, width: getWidth(percentage) }) }));
 }
 exports["default"] = ProgressBar;
 
@@ -8096,7 +8063,7 @@ const Scrollable = ({ children, horizontal, vertical, smooth, onScrollContent, }
         }
         return props;
     }, [className, handleScroll, onScrollContent]);
-    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { children: children, value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn) }));
+    return ((0, jsx_runtime_1.jsx)(BoxTransforms_1.BoxTransforms.Provider, { value: (0, BoxTransforms_1.useComposedBoxTransform)(transformFn), children: children }));
 };
 exports["default"] = Scrollable;
 
@@ -8322,7 +8289,7 @@ const InputBox_1 = __webpack_require__(/*! ../InputBox */ "./src/components/Inpu
 const SelectFilteredContext_1 = __webpack_require__(/*! ./SelectFilteredContext */ "./src/components/Select/SelectFilteredContext.ts");
 function SelectFilteredAnchor({ children: _children, ...props }) {
     const { placeholder, filter, setFilter } = (0, react_1.use)(SelectFilteredContext_1.SelectFilteredContext);
-    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { mi: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
+    return ((0, jsx_runtime_1.jsx)(InputBox_1.Input, { marginInline: 4, flexGrow: 1, className: 'rcx-select__focus', placeholder: placeholder, value: filter, onInput: (e) => setFilter?.(e.currentTarget.value), ...props, "rcx-input-box--undecorated": true }));
 }
 exports["default"] = SelectFilteredAnchor;
 
@@ -8438,8 +8405,8 @@ function SelectLegacy({ ref, value, filter, error, disabled, options = [], ancho
         innerRef.current?.focus();
         return show();
     });
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', mi: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
-                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', mi: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), (0, jsx_runtime_1.jsx)(Anchor, { ref: anchorRef, disabled: disabled ?? false, onClick: show, onBlur: hide, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: !value ? option || placeholder : null }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-select": true, disabled: disabled, ref: containerRef, onClick: handleClick, className: (0, react_1.useMemo)(() => [error && 'invalid', disabled && 'disabled'], [error, disabled]), ...props, children: [(0, jsx_runtime_1.jsxs)(Wrapper, { display: 'flex', marginInline: 'neg-x4', "rcx-select__wrapper--hidden": !!visibleText, children: [visibleText &&
+                        (RenderSelected ? ((0, jsx_runtime_1.jsx)(RenderSelected, { role: 'option', value: getValue(option), label: valueLabel, onClick: internalChangedByClick }, getValue(option))) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { flexGrow: 1, is: 'span', marginInline: 4, "rcx-select__item": true, fontScale: 'p2', color: valueLabel ? 'default' : 'hint', children: visibleText }))), (0, jsx_runtime_1.jsx)(Anchor, { ref: anchorRef, disabled: disabled ?? false, onClick: show, onBlur: hide, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: !value ? option || placeholder : null }), (0, jsx_runtime_1.jsx)(Margins_1.Margins, { inline: 'x4', children: (0, jsx_runtime_1.jsx)(SelectAddon_1.default, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: visible === AnimatedVisibility_1.AnimatedVisibility.VISIBLE
                                     ? 'chevron-up'
                                     : addonIcon || 'chevron-down', size: 'x20' }) }) })] }), (0, jsx_runtime_1.jsx)(PositionAnimated_1.PositionAnimated, { visible: visible, anchor: containerRef, children: (0, jsx_runtime_1.jsx)(_Options, { width: borderBoxSize.inlineSize, role: 'listbox', filter: filter, options: filteredOptions, onSelect: internalChangedByClick, renderItem: renderItem, cursor: cursor, customEmpty: customEmpty }) })] }));
 }
@@ -8641,7 +8608,7 @@ exports["default"] = SidebarBanner;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidebarDivider = () => (0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, mbs: -2, mbe: 0 });
+const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidebarDivider;
 
 
@@ -9103,7 +9070,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarDivider = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar-v2--divider": true, mbs: -2, mbe: 0 }));
+const SidebarDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidebar-v2--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports.SidebarDivider = SidebarDivider;
 
 
@@ -9743,7 +9710,7 @@ exports["default"] = Sidepanel;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Divider_1 = __webpack_require__(/*! ../Divider */ "./src/components/Divider/index.ts");
-const SidepanelDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidepanel--divider": true, mbs: -2, mbe: 0 }));
+const SidepanelDivider = () => ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { "rcx-sidepanel--divider": true, marginBlockStart: -2, marginBlockEnd: 0 }));
 exports["default"] = SidepanelDivider;
 
 
@@ -10576,7 +10543,7 @@ const TableCell = ({ align, clickable, children, ...props }) => {
     const isInsideHead = (0, react_1.useContext)(TableHead_1.TableHeadContext);
     const innerElement = children ??
         (!isInsideHead ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { display: 'inline-block', is: 'hr', width: 'x14', borderWidth: 1 })) : undefined);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable, children: innerElement, ...props }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: isInsideHead ? 'th' : 'td', "rcx-table__cell": true, "rcx-table__cell--align": align, "rcx-table__cell--header": isInsideHead, "rcx-table__cell--clickable": clickable, ...props, children: innerElement }));
 };
 exports["default"] = TableCell;
 
@@ -10644,7 +10611,7 @@ exports["default"] = TableRow;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Box_1 = __webpack_require__(/*! ../../Box */ "./src/components/Box/index.ts");
-const TableSelection = ({ children, text, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between', pi: 24, elevation: '2', ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2b', mb: 16, flexShrink: 1, withTruncatedText: true, children: text }), children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { mi: 'neg-x8', fontScale: 'p2m', flexShrink: 0, children: children }))] }));
+const TableSelection = ({ children, text, ...props }) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { "rcx-table__selection": true, display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingInline: 24, elevation: '2', ...props, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { fontScale: 'p2b', marginBlock: 16, flexShrink: 1, withTruncatedText: true, children: text }), children && ((0, jsx_runtime_1.jsx)(Box_1.Box, { marginInline: 'neg-x8', fontScale: 'p2m', flexShrink: 0, children: children }))] }));
 exports["default"] = TableSelection;
 
 
@@ -10761,7 +10728,7 @@ const Box_1 = __webpack_require__(/*! ../Box */ "./src/components/Box/index.ts")
  * Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
  */
 function Tabs({ children, divider = true, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs": true, "rcx-tabs--with-divider": divider, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__scroll-box": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__wrapper": true, children: children, role: 'tablist' }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs": true, "rcx-tabs--with-divider": divider, ...props, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__scroll-box": true, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { is: 'div', "rcx-tabs__wrapper": true, role: 'tablist', children: children }) }) }));
 }
 exports["default"] = Tabs;