@mantine/core 9.0.0-alpha.4 → 9.0.0-alpha.6

package/lib/components/Transition/Transition.d.ts

@@ -1,6 +1,6 @@
 import { MantineTransition } from './transitions';
 export interface TransitionProps {
-    /** If set, the element is not unmounted from the DOM when hidden, `display: none` styles are applied instead */
+    /** If set, the element is kept in the DOM when hidden. React 19 `Activity` is used to preserve state while the element is not visible. */
     keepMounted?: boolean;
     /** Transition name or object */
     transition?: MantineTransition;

package/lib/components/Tree/FlatTreeNode.d.ts

@@ -0,0 +1,34 @@
+import type { RenderNode, TreeNodeData } from './Tree';
+import type { TreeController } from './use-tree';
+export interface FlatTreeNodeProps {
+    /** Node data from tree data */
+    node: TreeNodeData;
+    /** Nesting level of the node, starts at 1 */
+    level: number;
+    /** Value of the parent node, `null` for root nodes */
+    parent: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is expanded */
+    expanded: boolean;
+    /** Tree controller instance, return value of `useTree` hook */
+    tree: TreeController;
+    /** If set, tree node with children is expanded on click @default true */
+    expandOnClick?: boolean;
+    /** If set, tree node is selected on click @default false */
+    selectOnClick?: boolean;
+    /** If set, tree node with children is expanded on space key press @default true */
+    expandOnSpace?: boolean;
+    /** If set, tree node is checked on space key press @default false */
+    checkOnSpace?: boolean;
+    /** A function to render tree node label */
+    renderNode?: RenderNode;
+    /** Style to apply to the root element, used for virtualizer positioning */
+    style?: React.CSSProperties;
+    /** Tab index for the node */
+    tabIndex?: number;
+}
+export declare function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, }: FlatTreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FlatTreeNode {
+    var displayName: string;
+}

package/lib/components/Tree/Tree.d.ts

@@ -54,6 +54,8 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     clearSelectionOnOutsideClick?: boolean;
     /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default true */
     allowRangeSelection?: boolean;
+    /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */
+    keepMounted?: boolean;
 }
 export type TreeFactory = Factory<{
     props: TreeProps;

package/lib/components/Tree/TreeNode.d.ts

@@ -15,8 +15,9 @@ interface TreeNodeProps {
     allowRangeSelection: boolean | undefined;
     expandOnSpace: boolean | undefined;
     checkOnSpace: boolean | undefined;
+    keepMounted: boolean | undefined;
 }
-export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeNode {
     var displayName: string;
 }

package/lib/components/Tree/filter-tree-data/filter-tree-data.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeData } from '../Tree';
+export type TreeNodeFilter = (query: string, node: TreeNodeData) => boolean;
+export declare function defaultTreeNodeFilter(query: string, node: TreeNodeData): boolean;
+export declare function filterTreeData(data: TreeNodeData[], query: string, filter?: TreeNodeFilter): TreeNodeData[];

package/lib/components/Tree/flatten-tree-data/flatten-tree-data.d.ts

@@ -0,0 +1,15 @@
+import type { TreeNodeData } from '../Tree';
+import type { TreeExpandedState } from '../use-tree';
+export interface FlattenedTreeNodeData {
+    /** Node data from tree data */
+    node: TreeNodeData;
+    /** Nesting level of the node, starts at 1 */
+    level: number;
+    /** Value of the parent node, `null` for root nodes */
+    parent: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is expanded */
+    expanded: boolean;
+}
+export declare function flattenTreeData(data: TreeNodeData[], expandedState: TreeExpandedState): FlattenedTreeNodeData[];

package/lib/components/Tree/merge-async-children/merge-async-children.d.ts

@@ -0,0 +1,2 @@
+import type { TreeNodeData } from '../Tree';
+export declare function mergeAsyncChildren(data: TreeNodeData[], parentValue: string, children: TreeNodeData[]): TreeNodeData[];

package/lib/components/Tree/move-tree-node/move-tree-node.d.ts

@@ -0,0 +1,11 @@
+import type { TreeNodeData } from '../Tree';
+export type TreeDragDropPosition = 'before' | 'after' | 'inside';
+export interface TreeDragDropPayload {
+    /** Value of the dragged node */
+    draggedNode: string;
+    /** Value of the target node */
+    targetNode: string;
+    /** Position relative to the target node */
+    position: TreeDragDropPosition;
+}
+export declare function moveTreeNode(data: TreeNodeData[], payload: TreeDragDropPayload): TreeNodeData[];

package/lib/components/Tree/use-tree-node-drag-drop.d.ts

@@ -0,0 +1,18 @@
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeDragState, TreeNodeData } from './Tree';
+interface UseTreeNodeDragDropInput {
+    nodeValue: string;
+    hasChildren: boolean;
+    data: TreeNodeData[];
+    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    dragStateRef: React.RefObject<TreeDragState>;
+}
+export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, }: UseTreeNodeDragDropInput): Record<string, never> | {
+    draggable: true;
+    onDragStart: (event: React.DragEvent) => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDragLeave: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
+    onDragEnd: (event: React.DragEvent) => void;
+};
+export {};

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,122 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+import { ComboboxLikeStylesNames } from '../Combobox';
+import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
+import { ScrollAreaProps } from '../ScrollArea';
+import type { TreeNodeData } from '../Tree';
+import { CheckedStrategy } from './get-checked-values-by-strategy';
+import { TreeSelectRenderNodePayload } from './TreeSelectOption';
+export type TreeSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
+export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
+export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
+export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends BoxProps, __BaseInputProps, StylesApiProps<TreeSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Tree data */
+    data: TreeNodeData[];
+    /** Selection mode: 'single', 'multiple', or 'checkbox' (with cascade) @default 'single' */
+    mode?: Mode;
+    /** Controlled value */
+    value?: TreeSelectValue<Mode>;
+    /** Default value */
+    defaultValue?: TreeSelectValue<Mode>;
+    /** Called when value changes */
+    onChange?: (value: TreeSelectValue<Mode>) => void;
+    /** Disables parent-child cascade in checkbox mode @default false */
+    checkStrictly?: boolean;
+    /** Controls which checked nodes appear in value/pills in checkbox mode @default 'child' */
+    checkedStrategy?: CheckedStrategy;
+    /** Default expanded node values */
+    defaultExpandedValues?: string[];
+    /** Expand all nodes by default @default false */
+    defaultExpandAll?: boolean;
+    /** Controlled expanded state */
+    expandedValues?: string[];
+    /** Called when expanded state changes */
+    onExpandedChange?: (values: string[]) => void;
+    /** Also toggle expand when clicking a parent node (not just the chevron) @default false */
+    expandOnClick?: boolean;
+    /** Enables search filtering @default false */
+    searchable?: boolean;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Default search value */
+    defaultSearchValue?: string;
+    /** Called when search changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom filter function */
+    filter?: (query: string, node: TreeNodeData) => boolean;
+    /** Message when no nodes match search */
+    nothingFoundMessage?: React.ReactNode;
+    /** Allows deselecting in single mode @default true */
+    allowDeselect?: boolean;
+    /** Shows clear button @default false */
+    clearable?: boolean;
+    /** Determines how the clear button and rightSection are rendered @default 'both' */
+    clearSectionMode?: ClearSectionMode;
+    /** Props for the clear button */
+    clearButtonProps?: InputClearButtonProps;
+    /** Maximum selectable values (multiple/checkbox mode) */
+    maxValues?: number;
+    /** Maximum displayed pills before "+N more" */
+    maxDisplayedValues?: number;
+    /** Content shown when values overflow maxDisplayedValues */
+    maxDisplayedValuesContent?: React.ReactNode | ((overflow: number) => React.ReactNode);
+    /** Called with removed value in multiple/checkbox mode */
+    onRemove?: (value: string) => void;
+    /** Called when clear button is clicked */
+    onClear?: () => void;
+    /** Custom node rendering in the dropdown */
+    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+    /** Show tree connection lines between parent and child nodes @default true */
+    withLines?: boolean;
+    /** Props for the hidden input */
+    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
+    /** Divider for hidden input values @default ',' */
+    hiddenInputValuesDivider?: string;
+    /** Props for the ScrollArea in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
+    /** Controls the default chevron color */
+    chevronColor?: MantineColor;
+    /** Max dropdown height @default 220 */
+    maxDropdownHeight?: number | string;
+    /** Controlled dropdown state */
+    dropdownOpened?: boolean;
+    /** Default dropdown state */
+    defaultDropdownOpened?: boolean;
+    /** Called when dropdown opens */
+    onDropdownOpen?: () => void;
+    /** Called when dropdown closes */
+    onDropdownClose?: () => void;
+    /** Props passed to the underlying Combobox */
+    comboboxProps?: Record<string, any>;
+    /** Clear search on selection change @default true */
+    clearSearchOnChange?: boolean;
+    /** Opens dropdown on focus (searchable mode) @default true */
+    openOnFocus?: boolean;
+}
+export type TreeSelectFactory = Factory<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = 'single'>(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}>;
+export declare const TreeSelect: (<Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element) & import("../..").ThemeExtend<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & import("../..").ComponentClasses<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & Record<string, never> & import("../..").FactoryComponentWithProps<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & {
+    displayName?: string;
+};

package/lib/components/TreeSelect/TreeSelectOption.d.ts

@@ -0,0 +1,29 @@
+import type { TreeNodeData } from '../Tree';
+export interface TreeSelectOptionProps {
+    node: TreeNodeData;
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    showCheckbox: boolean;
+    isLastChild: boolean;
+    lineGuides: boolean[];
+    withLines: boolean;
+    onToggleExpand: (value: string) => void;
+    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+}
+export interface TreeSelectRenderNodePayload {
+    node: TreeNodeData;
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+}
+export declare function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, }: TreeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeSelectOption {
+    var displayName: string;
+}

package/lib/components/TreeSelect/flatten-tree-select-data.d.ts

@@ -0,0 +1,12 @@
+import type { TreeNodeData } from '../Tree';
+import type { TreeExpandedState } from '../Tree/use-tree';
+export interface TreeSelectFlatNode {
+    node: TreeNodeData;
+    level: number;
+    parent: string | null;
+    hasChildren: boolean;
+    expanded: boolean;
+    isLastChild: boolean;
+    lineGuides: boolean[];
+}
+export declare function flattenTreeSelectData(data: TreeNodeData[], expandedState: TreeExpandedState): TreeSelectFlatNode[];

package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeData } from '../Tree';
+export type CheckedStrategy = 'all' | 'parent' | 'child';
+export declare function expandToLeafChecked(value: string[], data: TreeNodeData[]): string[];
+export declare function checkedToValue(checkedState: string[], data: TreeNodeData[], strategy: CheckedStrategy): string[];

package/lib/components/TreeSelect/index.d.ts

@@ -0,0 +1,13 @@
+import type { TreeSelectFactory, TreeSelectMode, TreeSelectProps, TreeSelectStylesNames, TreeSelectValue } from './TreeSelect';
+export { TreeSelect } from './TreeSelect';
+export { TreeSelectOption } from './TreeSelectOption';
+export type { TreeSelectRenderNodePayload } from './TreeSelectOption';
+export type { CheckedStrategy } from './get-checked-values-by-strategy';
+export type { TreeSelectProps, TreeSelectStylesNames, TreeSelectFactory, TreeSelectMode, TreeSelectValue, };
+export declare namespace TreeSelect {
+    type Props = TreeSelectProps;
+    type StylesNames = TreeSelectStylesNames;
+    type Factory = TreeSelectFactory;
+    type Mode = TreeSelectMode;
+    type Value<Mode extends TreeSelectMode> = TreeSelectValue<Mode>;
+}

package/lib/core/MantineProvider/index.d.ts

@@ -16,6 +16,7 @@ export type { ConvertCSSVariablesInput } from './convert-css-variables';
 export { createTheme } from './create-theme/create-theme';
 export { mergeThemeOverrides } from './merge-theme-overrides/merge-theme-overrides';
 export { defaultCssVariablesResolver } from './MantineCssVariables/default-css-variables-resolver';
+export { v8CssVariablesResolver } from './MantineCssVariables/v8-css-variables-resolver';
 export type { CSSVariablesResolver } from './MantineCssVariables/default-css-variables-resolver';
 export { virtualColor, getCSSColorVariables, isVirtualColor } from './MantineCssVariables';
 export { useMatches } from './use-matches/use-matches';

package/lib/core/styles-api/use-styles/get-class-name/get-class-name.d.ts

@@ -13,8 +13,10 @@ export interface GetClassNameOptions {
     selector: string;
     /** Prefix for all class names, resolved by hook, `mantine` by default */
     classNamesPrefix: string;
-    /** `classNames` specified in the hook, only resolved `classNames[selector]` is added to the list */
-    classNames: _ClassNames;
+    /** Precomputed resolved `classNames` map (from the component `classNames` prop) */
+    resolvedClassNames: Partial<Record<string, string>>;
+    /** Precomputed resolved theme `classNames` maps (from `theme.components[name].classNames`) */
+    resolvedThemeClassNames: Partial<Record<string, string>>[];
     /** Classes object, usually imported from `*.module.css` */
     classes: Record<string, string>;
     /** Determines whether classes from `classes` should be added to the list */
@@ -23,9 +25,9 @@ export interface GetClassNameOptions {
     className: string | undefined;
     /** `rootSelector` specified in the hook, determines whether `className` should be added to the list */
     rootSelector: string;
-    /** Component props, used as context for `classNames` and `options.classNames` */
+    /** Component props, used as context for `options.classNames` */
     props: Record<string, any>;
-    /** Component styles context, used as context for `classNames` and `options.classNames` */
+    /** Component styles context, used as context for `options.classNames` */
     stylesCtx?: Record<string, any> | undefined;
     /** Determines whether static classes should be added */
     withStaticClasses?: boolean;
@@ -34,5 +36,5 @@ export interface GetClassNameOptions {
     /** `styles` prop transformed into classes with CSS-in-JS library, for example, emotion */
     transformedStyles?: Record<string, string>[];
 }
-export declare function getClassName({ theme, options, themeName, selector, classNamesPrefix, classNames, classes, unstyled, className, rootSelector, props, stylesCtx, withStaticClasses, headless, transformedStyles, }: GetClassNameOptions): string;
+export declare function getClassName({ theme, options, themeName, selector, classNamesPrefix, resolvedClassNames, resolvedThemeClassNames, classes, unstyled, className, rootSelector, props, stylesCtx, withStaticClasses, headless, transformedStyles, }: GetClassNameOptions): string;
 export {};

package/lib/core/styles-api/use-styles/get-style/get-style.d.ts

@@ -1,22 +1,18 @@
 import { CSSProperties } from 'react';
-import { MantineStyleProp } from '../../../Box';
 import { MantineTheme } from '../../../MantineProvider';
 import { GetStylesApiOptions } from '../../styles-api.types';
-import { VarsResolver } from './resolve-vars/resolve-vars';
 export type _Styles = undefined | Partial<Record<string, CSSProperties>> | ((theme: MantineTheme, props: Record<string, any>, ctx: Record<string, any> | undefined) => Partial<Record<string, CSSProperties>>);
 export interface GetStyleInput {
     theme: MantineTheme;
-    themeName: string[];
     selector: string;
     rootSelector: string;
     options: GetStylesApiOptions | undefined;
     props: Record<string, any>;
     stylesCtx: Record<string, any> | undefined;
-    styles: _Styles;
-    style: MantineStyleProp | undefined;
-    vars: VarsResolver | undefined;
-    varsResolver: VarsResolver | undefined;
-    headless?: boolean;
     withStylesTransform?: boolean;
+    resolvedStyles: Record<string, any>;
+    resolvedThemeStyles: Record<string, any>;
+    resolvedVars: Record<string, any>;
+    resolvedRootStyle: CSSProperties;
 }
-export declare function getStyle({ theme, themeName, selector, options, props, stylesCtx, rootSelector, styles, style, vars, varsResolver, headless, withStylesTransform, }: GetStyleInput): CSSProperties;
+export declare function getStyle({ theme, selector, options, props, stylesCtx, rootSelector, withStylesTransform, resolvedStyles, resolvedThemeStyles, resolvedVars, resolvedRootStyle, }: GetStyleInput): CSSProperties;

package/lib/core/styles-api/use-styles/use-transformed-styles.d.ts

@@ -1,9 +1,11 @@
+import { MantineTheme } from '../../MantineProvider';
 interface UseTransformedStylesInput {
     props: Record<string, any>;
     stylesCtx: Record<string, any> | undefined;
     themeName: string[];
+    theme: MantineTheme;
 }
-export declare function useStylesTransform({ props, stylesCtx, themeName }: UseTransformedStylesInput): {
+export declare function useStylesTransform({ props, stylesCtx, themeName, theme, }: UseTransformedStylesInput): {
     getTransformedStyles: (styles: any[]) => Record<string, string>[];
     withStylesTransform: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.6",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,22 +43,21 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.0-alpha.4",
-    "react": "^18.x || ^19.x",
-    "react-dom": "^18.x || ^19.x"
+    "@mantine/hooks": "9.0.0-alpha.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
+    "@floating-ui/react": "^0.27.19",
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.4",
     "react-remove-scroll": "^2.7.2",
-    "react-textarea-autosize": "8.5.9",
     "type-fest": "^4.41.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.1",
-    "react-dom": "19.2.1"
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   }
 }

package/styles/RollingNumber.css

@@ -0,0 +1,50 @@
+.m_47dd3981 {
+  display: inline-flex;
+  align-items: baseline;
+  overflow: hidden;
+}
+
+  .m_47dd3981[data-tabular-numbers] {
+    font-variant-numeric: tabular-nums;
+  }
+
+.m_b301d46e {
+  display: inline-block;
+  width: 1ch;
+  height: 1em;
+  overflow: hidden;
+  line-height: 1;
+  transition:
+    width var(--rn-duration) var(--rn-timing-function),
+    opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_b301d46e[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+
+.m_8ae40964 {
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_8ae40964 > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1em;
+  }
+
+.m_47d64bf5 {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre;
+  transition: opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_47d64bf5[data-empty] {
+    width: 0;
+    opacity: 0;
+  }

package/styles/RollingNumber.layer.css

@@ -0,0 +1,51 @@
+@layer mantine {.m_47dd3981 {
+  display: inline-flex;
+  align-items: baseline;
+  overflow: hidden;
+}
+
+  .m_47dd3981[data-tabular-numbers] {
+    font-variant-numeric: tabular-nums;
+  }
+
+.m_b301d46e {
+  display: inline-block;
+  width: 1ch;
+  height: 1em;
+  overflow: hidden;
+  line-height: 1;
+  transition:
+    width var(--rn-duration) var(--rn-timing-function),
+    opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_b301d46e[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+
+.m_8ae40964 {
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_8ae40964 > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1em;
+  }
+
+.m_47d64bf5 {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre;
+  transition: opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_47d64bf5[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+}

package/styles/Scroller.css

@@ -6,6 +6,7 @@
   align-items: center;
   position: relative;
   overflow: hidden;
+  max-width: 100%;
 }
 
 .m_ee44dece {

package/styles/Scroller.layer.css

@@ -6,6 +6,7 @@
   align-items: center;
   position: relative;
   overflow: hidden;
+  max-width: 100%;
 }
 
 .m_ee44dece {