@mantine/core 9.2.2 → 9.3.0

package/lib/components/Splitter/Splitter.context.d.ts

@@ -0,0 +1,9 @@
+import { GetStylesApi } from '../../core';
+import type { SplitterFactory } from './Splitter';
+export interface SplitterContextValue {
+    getStyles: GetStylesApi<SplitterFactory>;
+    sizes: number[];
+    collapsed: boolean[];
+    orientation: 'horizontal' | 'vertical';
+}
+export declare const SplitterProvider: import("react").Context<SplitterContextValue | null>, useSplitterContext: () => SplitterContextValue;

package/lib/components/Splitter/Splitter.d.ts

@@ -0,0 +1,57 @@
+import { UseSplitterRedistributeFn, UseSplitterReturnValue } from '@mantine/hooks';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+import { SplitterPane, SplitterPaneStylesNames } from './SplitterPane/SplitterPane';
+export type SplitterStylesNames = 'root' | 'handle' | 'thumb' | SplitterPaneStylesNames;
+export type SplitterCssVariables = {
+    root: '--splitter-line-size' | '--splitter-handle-color';
+};
+export interface SplitterProps extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {
+    /** Layout direction @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Controlled sizes (percentages summing to 100) */
+    sizes?: number[];
+    /** Called during resize with updated sizes */
+    onSizeChange?: (sizes: number[]) => void;
+    /** Called when drag starts */
+    onResizeStart?: (handleIndex: number) => void;
+    /** Called when drag ends */
+    onResizeEnd?: (handleIndex: number, sizes: number[]) => void;
+    /** Called when a panel collapses or expands */
+    onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
+    /** How to redistribute space when immediate neighbor is at its min/max */
+    redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
+    /** Keyboard step size in percentage @default 1 */
+    step?: number;
+    /** Shift+arrow step size in percentage @default 10 */
+    shiftStep?: number;
+    /** CSS value for separator line thickness between panes @default 2 */
+    lineSize?: number | string;
+    /** Key of `theme.colors` or any valid CSS color for the separator line */
+    handleColor?: MantineColor;
+    /** Custom icon displayed in the handle thumb, by default uses grip icon based on orientation */
+    handleIcon?: React.ReactNode;
+    /** Determines whether the thumb with grip icon is displayed on the handle @default true */
+    withHandle?: boolean;
+    /** Ref to imperative splitter API (sizes, collapse, expand, etc.) */
+    splitterRef?: React.RefObject<UseSplitterReturnValue | null>;
+    /** Splitter panes */
+    children?: React.ReactNode;
+}
+export type SplitterFactory = Factory<{
+    props: SplitterProps;
+    ref: HTMLDivElement;
+    stylesNames: SplitterStylesNames;
+    vars: SplitterCssVariables;
+    staticComponents: {
+        Pane: typeof SplitterPane;
+    };
+}>;
+export declare const Splitter: import("../..").MantineComponent<{
+    props: SplitterProps;
+    ref: HTMLDivElement;
+    stylesNames: SplitterStylesNames;
+    vars: SplitterCssVariables;
+    staticComponents: {
+        Pane: typeof SplitterPane;
+    };
+}>;

package/lib/components/Splitter/SplitterPane/SplitterPane.d.ts

@@ -0,0 +1,30 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type SplitterPaneStylesNames = 'pane';
+export interface SplitterPaneProps extends BoxProps, CompoundStylesApiProps<SplitterPaneFactory>, ElementProps<'div'> {
+    /** Initial size as percentage (0-100). All panes must sum to 100. */
+    defaultSize: number;
+    /** Minimum size percentage @default 0 */
+    min?: number;
+    /** Maximum size percentage @default 100 */
+    max?: number;
+    /** Whether this pane can be collapsed @default false */
+    collapsible?: boolean;
+    /** Size below which the pane snaps to collapsed (percentage), defaults to `min` */
+    collapseThreshold?: number;
+    /** Pane content */
+    children?: React.ReactNode;
+    /** @internal Index set by parent */
+    __index?: number;
+}
+export type SplitterPaneFactory = Factory<{
+    props: SplitterPaneProps;
+    ref: HTMLDivElement;
+    stylesNames: SplitterPaneStylesNames;
+    compound: true;
+}>;
+export declare const SplitterPane: import("../../..").MantineComponent<{
+    props: SplitterPaneProps;
+    ref: HTMLDivElement;
+    stylesNames: SplitterPaneStylesNames;
+    compound: true;
+}>;

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

@@ -0,0 +1,18 @@
+import type { SplitterCssVariables, SplitterFactory, SplitterProps, SplitterStylesNames } from './Splitter';
+import type { SplitterContextValue } from './Splitter.context';
+import type { SplitterPaneProps, SplitterPaneStylesNames } from './SplitterPane/SplitterPane';
+export { Splitter } from './Splitter';
+export { SplitterPane } from './SplitterPane/SplitterPane';
+export { useSplitterContext } from './Splitter.context';
+export type { SplitterProps, SplitterStylesNames, SplitterCssVariables, SplitterFactory, SplitterPaneProps, SplitterPaneStylesNames, SplitterContextValue, };
+export declare namespace Splitter {
+    type Props = SplitterProps;
+    type StylesNames = SplitterStylesNames;
+    type CssVariables = SplitterCssVariables;
+    type Factory = SplitterFactory;
+    type ContextValue = SplitterContextValue;
+    namespace Pane {
+        type Props = SplitterPaneProps;
+        type StylesNames = SplitterPaneStylesNames;
+    }
+}

package/lib/components/Text/Text.d.ts

@@ -3,7 +3,7 @@ type TextTruncate = 'end' | 'start' | boolean;
 export type TextStylesNames = 'root';
 export type TextVariant = 'text' | 'gradient';
 export type TextCssVariables = {
-    root: '--text-gradient' | '--text-line-clamp' | '--text-fz' | '--text-lh';
+    root: '--text-gradient' | '--text-line-clamp' | '--text-fz' | '--text-lh' | '--text-text-wrap';
 };
 export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
     __staticSelector?: string;
@@ -21,6 +21,8 @@ export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
     gradient?: MantineGradient;
     /** Shorthand for `component="span"` */
     span?: boolean;
+    /** Controls `text-wrap` CSS property */
+    textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
 }
 export type TextFactory = PolymorphicFactory<{
     props: TextProps;

package/lib/components/Textarea/Textarea.d.ts

@@ -10,6 +10,10 @@ export interface TextareaProps extends BoxProps, __BaseInputProps, StylesApiProp
     minRows?: number;
     /** Controls `resize` CSS property @default 'none' */
     resize?: React.CSSProperties['resize'];
+    /** Content rendered at the bottom of the input, inside the border */
+    bottomSection?: React.ReactNode;
+    /** Props passed down to the `bottomSection` element */
+    bottomSectionProps?: React.ComponentProps<'div'>;
 }
 export type TextareaFactory = Factory<{
     props: TextareaProps;

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

@@ -1,3 +1,4 @@
+import type { FlatTreeLineState } from './flatten-tree-data/flatten-tree-data';
 import type { RenderNode, TreeNodeData } from './Tree';
 import type { TreeController } from './use-tree';
 export interface FlatTreeNodeProps {
@@ -27,5 +28,8 @@ export interface FlatTreeNodeProps {
     style?: React.CSSProperties;
     /** Tab index for the node */
     tabIndex?: number;
+    /** Line state per ancestor + own level, computed by `flattenTreeData`.
+     * When provided and the tree root has `data-with-lines`, connector lines are rendered. */
+    linesPath?: FlatTreeLineState[];
 }
-export declare const FlatTreeNode: import("react").MemoExoticComponent<({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, }: FlatTreeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FlatTreeNode: import("react").MemoExoticComponent<({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, linesPath, }: FlatTreeNodeProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -18,6 +18,8 @@ export interface RenderTreeNodePayload {
     hasChildren: boolean;
     /** `true` if the node is selected */
     selected: boolean;
+    /** `true` if the node is at the top-most level of the tree (level 1) */
+    isRoot: boolean;
     /** `true` if the node's children are currently being loaded */
     isLoading: boolean;
     /** Error from the last failed load attempt, or `null` */

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

@@ -1,5 +1,6 @@
 import type { TreeNodeData } from '../Tree';
 import type { TreeExpandedState } from '../use-tree';
+export type FlatTreeLineState = 'continuing' | 'closing' | 'none';
 export interface FlattenedTreeNodeData {
     /** Node data from tree data */
     node: TreeNodeData;
@@ -11,5 +12,14 @@ export interface FlattenedTreeNodeData {
     hasChildren: boolean;
     /** Whether the node is expanded */
     expanded: boolean;
+    /** For each level from 2 to this node's `level`, indicates whether a connector
+     * line should be drawn at that column for this row:
+     * - `'continuing'`: full vertical line passes through this row
+     * - `'closing'`: line ends at this row (truncated to the connector level)
+     * - `'none'`: no line at this column for this row
+     *
+     * Index 0 corresponds to level 2, index 1 to level 3, etc.
+     * Empty for level-1 (root) nodes. */
+    linesPath: FlatTreeLineState[];
 }
 export declare function flattenTreeData(data: TreeNodeData[], expandedState: TreeExpandedState): FlattenedTreeNodeData[];

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

@@ -11,6 +11,6 @@ export { FlatTreeNode } from './FlatTreeNode';
 export type { TreeProps, TreeStylesNames, TreeFactory, TreeCssVariables, TreeNodeData, RenderTreeNodePayload, UseTreeInput, UseTreeReturnType, CheckedNodeStatus, };
 export type { TreeNodeFilter } from './filter-tree-data/filter-tree-data';
 export type { TreeDragDropPosition, TreeDragDropPayload } from './move-tree-node/move-tree-node';
-export type { FlattenedTreeNodeData } from './flatten-tree-data/flatten-tree-data';
+export type { FlattenedTreeNodeData, FlatTreeLineState, } from './flatten-tree-data/flatten-tree-data';
 export type { FlatTreeNodeProps } from './FlatTreeNode';
 export type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';

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

@@ -4,6 +4,7 @@ export type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;
 interface UseTreeNodeDragDropInput {
     nodeValue: string;
     hasChildren: boolean;
+    isExpanded: boolean;
     data: TreeNodeData[];
     onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
     dragStateRef: React.RefObject<TreeDragState>;
@@ -13,7 +14,7 @@ interface UseTreeNodeDragDropInput {
 export interface TreeDragHandleProps {
     onMouseDown: (event: React.MouseEvent) => void;
 }
-export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, allowDrop, withDragHandle, }: UseTreeNodeDragDropInput): {
+export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, isExpanded, data, onDragDrop, dragStateRef, allowDrop, withDragHandle, }: UseTreeNodeDragDropInput): {
     readonly elementProps: {};
     readonly dragHandleProps: undefined;
 } | {

package/lib/components/index.d.ts

@@ -89,6 +89,7 @@ export * from './SimpleGrid';
 export * from './Skeleton';
 export * from './Slider';
 export * from './Space';
+export * from './Splitter';
 export * from './Spoiler';
 export * from './Stack';
 export * from './Stepper';

package/lib/utils/Floating/FloatingArrow/get-arrow-position-styles.d.ts

@@ -9,3 +9,7 @@ export declare function getArrowPositionStyles({ position, arrowSize, arrowOffse
     arrowY: number | undefined;
     dir: 'rtl' | 'ltr';
 }): {};
+export declare function getArrowMergeDropdownStyles({ position, dir, }: {
+    position: FloatingPosition;
+    dir: 'rtl' | 'ltr';
+}): React.CSSProperties | undefined;

package/lib/utils/Floating/create-context-menu-handlers.d.ts

@@ -0,0 +1,18 @@
+interface CreateContextMenuHandlersOptions {
+    /** Props of the child element that opens the dropdown */
+    childProps: Record<string, any>;
+    /** If set, right-click trigger is disabled and the browser's default context menu is shown */
+    disabled: boolean | undefined;
+    /** Current opened state, used to set `data-expanded` on the child */
+    opened: boolean;
+    /** Sets the floating reference to a virtual element positioned at the cursor */
+    setReference: (node: object) => void;
+    /** Called to open the dropdown after the reference has been set */
+    open: () => void;
+}
+export declare function createContextMenuHandlers({ childProps, disabled, opened, setReference, open, }: CreateContextMenuHandlersOptions): {
+    onContextMenu: (event?: any) => void;
+    onMouseDown: (event?: any) => void;
+    'data-expanded': boolean | undefined;
+};
+export {};

package/lib/utils/Floating/index.d.ts

@@ -1,4 +1,5 @@
 export { FloatingArrow } from './FloatingArrow/FloatingArrow';
+export { getArrowMergeDropdownStyles } from './FloatingArrow/get-arrow-position-styles';
 export { getFloatingPosition } from './get-floating-position/get-floating-position';
 export { useDelayedHover } from './use-delayed-hover';
 export type { ArrowPosition, FloatingAxesOffsets, FloatingPlacement, FloatingPosition, FloatingSide, FloatingStrategy, } from './types';

package/lib/utils/Floating/types.d.ts

@@ -1,7 +1,7 @@
 export type FloatingPlacement = 'end' | 'start';
 export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
 export type FloatingPosition = FloatingSide | `${FloatingSide}-${FloatingPlacement}`;
-export type ArrowPosition = 'center' | 'side';
+export type ArrowPosition = 'center' | 'side' | 'merge';
 export type FloatingStrategy = 'absolute' | 'fixed';
 export interface FloatingAxesOffsets {
     mainAxis?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.2.2",
+  "version": "9.3.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.2.2",
+    "@mantine/hooks": "9.3.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Blockquote.css

@@ -3,6 +3,7 @@
 
   position: relative;
   margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));
   border-inline-start: var(--blockquote-border);
   border-start-end-radius: var(--bq-radius);
   border-end-end-radius: var(--bq-radius);

package/styles/Blockquote.layer.css

@@ -3,6 +3,7 @@
 
   position: relative;
   margin: 0;
+  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));
   border-inline-start: var(--blockquote-border);
   border-start-end-radius: var(--bq-radius);
   border-end-end-radius: var(--bq-radius);

package/styles/Combobox.css

@@ -15,6 +15,14 @@
     display: none;
   }
 
+  .m_88b62a41[data-floating-height='viewport']:not([data-hidden]) {
+    --combobox-floating-options-max-height: calc(
+      var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2
+    );
+    max-height: var(--combobox-floating-max-height, none);
+    overflow: hidden;
+  }
+
 /* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
 .m_88b62a41,
 .m_b2821a6e {

package/styles/Combobox.layer.css

@@ -15,6 +15,14 @@
     display: none;
   }
 
+  .m_88b62a41[data-floating-height='viewport']:not([data-hidden]) {
+    --combobox-floating-options-max-height: calc(
+      var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2
+    );
+    max-height: var(--combobox-floating-max-height, none);
+    overflow: hidden;
+  }
+
 /* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
 .m_88b62a41,
 .m_b2821a6e {

package/styles/Input.css

@@ -19,7 +19,6 @@
   --input-radius: var(--mantine-radius-default);
 
   --input-cursor: text;
-  --input-text-align: left;
   --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
   --input-padding: calc(var(--input-height) / 3);
   --input-padding-inline-start: var(--input-padding);
@@ -57,6 +56,10 @@
     --input-cursor: pointer;
   }
 
+  .m_6c018570[data-with-bottom-section] {
+    --input-bottom-section-height: 28px;
+  }
+
   .m_6c018570[data-multiline] {
     --input-padding-y-xs: 4.5px;
     --input-padding-y-sm: 5.5px;
@@ -144,13 +147,11 @@
 }
 
   :where([dir="rtl"]) .m_6c018570 {
-    --input-text-align: right;
     --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
   .m_6c018570[dir='ltr'] {
-    --input-text-align: left;
     --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
     --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
   }
@@ -163,7 +164,7 @@
   width: 100%;
   transition: border-color 100ms ease;
 
-  text-align: var(--input-text-align);
+  text-align: start;
   color: var(--input-color);
   border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
   background-color: var(--input-bg);
@@ -243,6 +244,26 @@
     caret-color: transparent;
   }
 
+[data-with-bottom-section] .m_8fb7ebe7 {
+    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));
+  }
+
+.m_93f4ed57 {
+  position: absolute;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+  height: var(--input-bottom-section-height);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: var(--input-padding);
+  border-radius: 0 0 var(--input-radius) var(--input-radius);
+  pointer-events: all;
+  color: var(--mantine-color-dimmed);
+  font-size: var(--input-fz, var(--mantine-font-size-sm));
+}
+
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;

package/styles/Input.layer.css

@@ -19,7 +19,6 @@
   --input-radius: var(--mantine-radius-default);
 
   --input-cursor: text;
-  --input-text-align: left;
   --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
   --input-padding: calc(var(--input-height) / 3);
   --input-padding-inline-start: var(--input-padding);
@@ -57,6 +56,10 @@
     --input-cursor: pointer;
   }
 
+  .m_6c018570[data-with-bottom-section] {
+    --input-bottom-section-height: 28px;
+  }
+
   .m_6c018570[data-multiline] {
     --input-padding-y-xs: 4.5px;
     --input-padding-y-sm: 5.5px;
@@ -144,13 +147,11 @@
 }
 
   :where([dir="rtl"]) .m_6c018570 {
-    --input-text-align: right;
     --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 }
 
   .m_6c018570[dir='ltr'] {
-    --input-text-align: left;
     --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
     --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
   }
@@ -163,7 +164,7 @@
   width: 100%;
   transition: border-color 100ms ease;
 
-  text-align: var(--input-text-align);
+  text-align: start;
   color: var(--input-color);
   border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
   background-color: var(--input-bg);
@@ -243,6 +244,26 @@
     caret-color: transparent;
   }
 
+[data-with-bottom-section] .m_8fb7ebe7 {
+    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));
+  }
+
+.m_93f4ed57 {
+  position: absolute;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+  height: var(--input-bottom-section-height);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline: var(--input-padding);
+  border-radius: 0 0 var(--input-radius) var(--input-radius);
+  pointer-events: all;
+  color: var(--mantine-color-dimmed);
+  font-size: var(--input-fz, var(--mantine-font-size-sm));
+}
+
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;

package/styles/Menu.css

@@ -41,11 +41,11 @@
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
@@ -53,10 +53,49 @@
     padding-inline-end: 5px;
   }
 
+.m_ef8769b6 {
+  --menu-search-padding: var(--popover-padding, 4px);
+
+  margin-inline: calc(var(--menu-search-padding) * -1);
+  margin-top: calc(var(--menu-search-padding) * -1);
+  width: calc(100% + var(--menu-search-padding) * 2);
+  border-top-width: 0;
+  border-inline-width: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  margin-bottom: var(--menu-search-padding);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6, :where([data-mantine-color-scheme='light']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6, :where([data-mantine-color-scheme='dark']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-dark-4);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6 {
+    background-color: var(--mantine-color-white);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6 {
+    background-color: var(--mantine-color-dark-7);
+}
+
 .m_5476e0d3 {
   flex: 1;
 }
 
+.m_8395186e {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 8px;
+}
+
 .m_8b75e504 {
   display: flex;
   justify-content: center;

package/styles/Menu.layer.css

@@ -41,11 +41,11 @@
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
@@ -53,10 +53,49 @@
     padding-inline-end: 5px;
   }
 
+.m_ef8769b6 {
+  --menu-search-padding: var(--popover-padding, 4px);
+
+  margin-inline: calc(var(--menu-search-padding) * -1);
+  margin-top: calc(var(--menu-search-padding) * -1);
+  width: calc(100% + var(--menu-search-padding) * 2);
+  border-top-width: 0;
+  border-inline-width: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  margin-bottom: var(--menu-search-padding);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6, :where([data-mantine-color-scheme='light']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6, :where([data-mantine-color-scheme='dark']) .m_ef8769b6:focus {
+      border-color: var(--mantine-color-dark-4);
+}
+
+:where([data-mantine-color-scheme='light']) .m_ef8769b6 {
+    background-color: var(--mantine-color-white);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_ef8769b6 {
+    background-color: var(--mantine-color-dark-7);
+}
+
 .m_5476e0d3 {
   flex: 1;
 }
 
+.m_8395186e {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 8px;
+}
+
 .m_8b75e504 {
   display: flex;
   justify-content: center;

package/styles/Pagination.css

@@ -16,6 +16,10 @@
   --pagination-active-bg: var(--mantine-primary-color-filled);
 }
 
+  .m_4addd315:where([data-layout='responsive']) {
+    container-type: inline-size;
+  }
+
 .m_326d024a {
   display: flex;
   align-items: center;
@@ -101,3 +105,32 @@
   justify-content: center;
   pointer-events: none;
 }
+
+.m_105fdbed {
+  display: flex;
+  gap: inherit;
+  align-items: center;
+}
+
+@container (width <= 400px) {
+
+.m_105fdbed {
+    display: none
+}
+  }
+
+.m_10817321 {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  height: var(--pagination-control-size);
+  font-size: var(--pagination-control-fz);
+  white-space: nowrap;
+}
+
+@container (width <= 400px) {
+
+.m_10817321 {
+    display: flex
+}
+  }