@mantine/core 9.0.0-alpha.3 → 9.0.0-alpha.5

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/MantineCssVariables/index.d.ts

@@ -1,5 +1,6 @@
 export { MantineCssVariables } from './MantineCssVariables';
 export { defaultCssVariablesResolver } from './default-css-variables-resolver';
+export { v8CssVariablesResolver } from './v8-css-variables-resolver';
 export { getCSSColorVariables } from './get-css-color-variables';
 export { virtualColor, isVirtualColor } from './virtual-color/virtual-color';
 export type { CSSVariablesResolver } from './default-css-variables-resolver';

package/lib/core/MantineProvider/MantineCssVariables/v8-css-variables-resolver.d.ts

@@ -0,0 +1,2 @@
+import { CSSVariablesResolver } from './default-css-variables-resolver';
+export declare const v8CssVariablesResolver: CSSVariablesResolver;

package/lib/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.d.ts

@@ -4,6 +4,6 @@ interface GetContrastColorInput {
     theme: MantineTheme;
     autoContrast?: boolean | undefined | null;
 }
-export declare function getContrastColor({ color, theme, autoContrast }: GetContrastColorInput): "var(--mantine-color-black)" | "var(--mantine-color-white)";
-export declare function getPrimaryContrastColor(theme: MantineTheme, colorScheme: 'light' | 'dark'): "var(--mantine-color-black)" | "var(--mantine-color-white)";
+export declare function getContrastColor({ color, theme, autoContrast }: GetContrastColorInput): "var(--mantine-color-white)" | "var(--mantine-color-black)";
+export declare function getPrimaryContrastColor(theme: MantineTheme, colorScheme: 'light' | 'dark'): "var(--mantine-color-white)" | "var(--mantine-color-black)";
 export {};

package/lib/core/MantineProvider/color-functions/index.d.ts

@@ -2,7 +2,6 @@ export { getPrimaryShade } from './get-primary-shade/get-primary-shade';
 export { parseThemeColor } from './parse-theme-color/parse-theme-color';
 export { getThemeColor } from './get-theme-color/get-theme-color';
 export { defaultVariantColorsResolver } from './default-variant-colors-resolver/default-variant-colors-resolver';
-export { v8defaultVariantColorsResolver } from './default-variant-colors-resolver/v8-default-variant-colors-resolver';
 export { getGradient } from './get-gradient/get-gradient';
 export { toRgba } from './to-rgba/to-rgba';
 export { rgba, alpha } from './rgba/rgba';

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.3",
+  "version": "9.0.0-alpha.5",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,12 +43,12 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.0-alpha.3",
-    "react": "^18.x || ^19.x",
-    "react-dom": "^18.x || ^19.x"
+    "@mantine/hooks": "9.0.0-alpha.5",
+    "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",
@@ -58,7 +58,7 @@
   "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/AppShell.css

@@ -56,7 +56,8 @@
   }
 
 :where([data-mode='static'][data-layout='alt']) .m_45252eee, :where([data-mode='static'][data-layout='alt']) .m_9cdde9a {
-    grid-row: var(--app-shell-navbar-grid-row-alt, var(--app-shell-navbar-grid-row, auto));
+    grid-row: 1 / -1;
+    height: 100%;
   }
 
 .m_45252eee {
@@ -102,6 +103,10 @@
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
+:where([data-mode='static'][data-layout='alt']) .m_9cdde9a {
+    grid-row: 1 / -1;
+  }
+
 :where([data-scroll-locked]) .m_9cdde9a {
     visibility: var(--app-shell-aside-scroll-locked-visibility);
   }
@@ -144,6 +149,7 @@
   }
 
 :where([data-mode='static'][data-layout='alt']) .m_3b16f56b, :where([data-mode='static'][data-layout='alt']) .m_3840c879 {
+    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
     margin-inline-start: 0rem;
     margin-inline-end: 0rem;
   }
@@ -178,6 +184,10 @@
     grid-row: var(--app-shell-footer-grid-row, auto);
   }
 
+:where([data-mode='static'][data-layout='alt']) .m_3840c879 {
+    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
+  }
+
 .m_3840c879:where([data-with-border]) {
     border-top: 1px solid var(--app-shell-border-color);
   }

package/styles/AppShell.layer.css

@@ -56,7 +56,8 @@
   }
 
 :where([data-mode='static'][data-layout='alt']) .m_45252eee, :where([data-mode='static'][data-layout='alt']) .m_9cdde9a {
-    grid-row: var(--app-shell-navbar-grid-row-alt, var(--app-shell-navbar-grid-row, auto));
+    grid-row: 1 / -1;
+    height: 100%;
   }
 
 .m_45252eee {
@@ -102,6 +103,10 @@
     border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
+:where([data-mode='static'][data-layout='alt']) .m_9cdde9a {
+    grid-row: 1 / -1;
+  }
+
 :where([data-scroll-locked]) .m_9cdde9a {
     visibility: var(--app-shell-aside-scroll-locked-visibility);
   }
@@ -144,6 +149,7 @@
   }
 
 :where([data-mode='static'][data-layout='alt']) .m_3b16f56b, :where([data-mode='static'][data-layout='alt']) .m_3840c879 {
+    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
     margin-inline-start: 0rem;
     margin-inline-end: 0rem;
   }
@@ -178,6 +184,10 @@
     grid-row: var(--app-shell-footer-grid-row, auto);
   }
 
+:where([data-mode='static'][data-layout='alt']) .m_3840c879 {
+    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
+  }
+
 .m_3840c879:where([data-with-border]) {
     border-top: 1px solid var(--app-shell-border-color);
   }

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 {