@mantine/core 9.3.1 → 9.3.2

package/esm/components/Popover/use-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  Middleware,\n  offset,\n  shift,\n  size,\n  useFloating,\n  UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n  offset: number | FloatingAxesOffsets;\n  position: FloatingPosition;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened: boolean | undefined;\n  defaultOpened: boolean | undefined;\n  onChange?: (opened: boolean) => void;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  onOpen?: () => void;\n  width: PopoverWidth;\n  middlewares: PopoverMiddlewares | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  arrowOffset: number;\n  strategy?: FloatingStrategy;\n  disabled: boolean | undefined;\n  preventPositionChangeWhenVisible: boolean | undefined;\n  keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getPopoverMiddlewares(\n  options: UsePopoverOptions,\n  getFloating: () => UseFloatingReturn<Element>,\n  disableFlip: boolean,\n  lockEnabled: boolean\n) {\n  const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n  const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n  if (middlewaresOptions.flip && !disableFlip) {\n    const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n    const flipOptions = lockEnabled\n      ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n      : userFlip;\n    middlewares.push(flip(flipOptions));\n  }\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { limiter: limitShift(), padding: 5 }\n          : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  }\n\n  middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n  if (middlewaresOptions.size || options.width === 'target') {\n    middlewares.push(\n      size({\n        ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n        apply({ rects, availableWidth, availableHeight, ...rest }) {\n          const floating = getFloating();\n          const styles = floating.refs.floating.current?.style ?? {};\n\n          if (middlewaresOptions.size) {\n            // If custom apply function is given use that else set defaults\n            if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n              middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n            } else {\n              Object.assign(styles, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`,\n              });\n            }\n          }\n\n          if (options.width === 'target') {\n            Object.assign(styles, {\n              width: `${rects.reference.width}px`,\n            });\n          }\n        },\n      })\n    );\n  }\n\n  return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n  const [_opened, setOpened] = useUncontrolled({\n    value: options.opened,\n    defaultValue: options.defaultOpened,\n    finalValue: false,\n    onChange: options.onChange,\n  });\n\n  const previouslyOpened = useRef(_opened);\n\n  const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n  const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n  const wasOpenedRef = useRef(_opened);\n  if (_opened !== wasOpenedRef.current) {\n    wasOpenedRef.current = _opened;\n    if (_opened && lockedPlacement !== null) {\n      setLockedPlacement(null);\n    }\n  }\n\n  const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n  const onClose = () => {\n    if (_opened && !options.disabled) {\n      setOpened(false);\n    }\n  };\n\n  const onToggle = () => {\n    if (!options.disabled) {\n      setOpened(!_opened);\n    }\n  };\n\n  const floating: UseFloatingReturn<Element> = useFloating({\n    open: _opened,\n    strategy: options.strategy,\n    placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n    middleware: getPopoverMiddlewares(\n      options,\n      () => floating,\n      lockEnabled && lockedPlacement !== null,\n      lockEnabled\n    ),\n    whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n  });\n\n  useEffect(() => {\n    if (!floating.refs.reference.current || !floating.refs.floating.current) {\n      return;\n    }\n\n    if (_opened) {\n      return autoUpdate(\n        floating.refs.reference.current,\n        floating.refs.floating.current,\n        floating.update\n      );\n    }\n  }, [_opened, floating.update]);\n\n  const measuredAfterShowRef = useRef(false);\n\n  useIsomorphicEffect(() => {\n    if (!_opened) {\n      measuredAfterShowRef.current = false;\n      return;\n    }\n\n    if (!lockEnabled || lockedPlacement !== null) {\n      return;\n    }\n\n    const flEl = floating.refs.floating.current as HTMLElement | null;\n    if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n      return;\n    }\n\n    if (!measuredAfterShowRef.current) {\n      measuredAfterShowRef.current = true;\n      floating.update();\n      return;\n    }\n\n    if (floating.isPositioned) {\n      setLockedPlacement(floating.placement);\n    }\n  }, [\n    lockEnabled,\n    _opened,\n    floating.isPositioned,\n    floating.placement,\n    lockedPlacement,\n    floating.update,\n  ]);\n\n  const previousPlacementRef = useRef(floating.placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== floating.placement) {\n      previousPlacementRef.current = floating.placement;\n      options.onPositionChange?.(floating.placement);\n    }\n  }, [floating.placement]);\n\n  useDidUpdate(() => {\n    if (_opened !== previouslyOpened.current) {\n      if (!_opened) {\n        options.onClose?.();\n      } else {\n        options.onOpen?.();\n      }\n    }\n\n    previouslyOpened.current = _opened;\n  }, [_opened, options.onClose, options.onOpen]);\n\n  return {\n    floating,\n    controlled: typeof options.opened === 'boolean',\n    opened: _opened,\n    onClose,\n    onToggle,\n    resetLockedPlacement,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  Middleware,\n  offset,\n  shift,\n  size,\n  useFloating,\n  UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n  offset: number | FloatingAxesOffsets;\n  position: FloatingPosition;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened: boolean | undefined;\n  defaultOpened: boolean | undefined;\n  onChange?: (opened: boolean) => void;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  onOpen?: () => void;\n  width: PopoverWidth;\n  middlewares: PopoverMiddlewares | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  arrowOffset: number;\n  strategy?: FloatingStrategy;\n  disabled: boolean | undefined;\n  preventPositionChangeWhenVisible: boolean | undefined;\n  keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getPopoverMiddlewares(\n  options: UsePopoverOptions,\n  getFloating: () => UseFloatingReturn<Element>,\n  disableFlip: boolean,\n  lockEnabled: boolean\n) {\n  const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n  const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n  if (middlewaresOptions.flip && !disableFlip) {\n    const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n    const flipOptions = lockEnabled\n      ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n      : userFlip;\n    middlewares.push(flip(flipOptions));\n  }\n\n  if (middlewaresOptions.shift) {\n    const shiftOptions =\n      typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n    middlewares.push(\n      shift((state) => {\n        const isVerticalPlacement =\n          state.placement.startsWith('top') || state.placement.startsWith('bottom');\n        return {\n          limiter: limitShift(),\n          padding: 5,\n          ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n          ...shiftOptions,\n        };\n      })\n    );\n  }\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  }\n\n  middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n  if (middlewaresOptions.size || options.width === 'target') {\n    middlewares.push(\n      size({\n        ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n        apply({ rects, availableWidth, availableHeight, ...rest }) {\n          const floating = getFloating();\n          const styles = floating.refs.floating.current?.style ?? {};\n\n          if (middlewaresOptions.size) {\n            // If custom apply function is given use that else set defaults\n            if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n              middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n            } else {\n              Object.assign(styles, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`,\n              });\n            }\n          }\n\n          if (options.width === 'target') {\n            Object.assign(styles, {\n              width: `${rects.reference.width}px`,\n            });\n          }\n        },\n      })\n    );\n  }\n\n  return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n  const [_opened, setOpened] = useUncontrolled({\n    value: options.opened,\n    defaultValue: options.defaultOpened,\n    finalValue: false,\n    onChange: options.onChange,\n  });\n\n  const previouslyOpened = useRef(_opened);\n\n  const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n  const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n  const wasOpenedRef = useRef(_opened);\n  if (_opened !== wasOpenedRef.current) {\n    wasOpenedRef.current = _opened;\n    if (_opened && lockedPlacement !== null) {\n      setLockedPlacement(null);\n    }\n  }\n\n  const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n  const onClose = () => {\n    if (_opened && !options.disabled) {\n      setOpened(false);\n    }\n  };\n\n  const onToggle = () => {\n    if (!options.disabled) {\n      setOpened(!_opened);\n    }\n  };\n\n  const floating: UseFloatingReturn<Element> = useFloating({\n    open: _opened,\n    strategy: options.strategy,\n    placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n    middleware: getPopoverMiddlewares(\n      options,\n      () => floating,\n      lockEnabled && lockedPlacement !== null,\n      lockEnabled\n    ),\n    whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n  });\n\n  useEffect(() => {\n    if (!options.keepMounted) {\n      return undefined;\n    }\n\n    const referenceElement = floating.refs.reference.current;\n    const floatingElement = floating.refs.floating.current;\n\n    if (_opened && referenceElement && floatingElement) {\n      return autoUpdate(referenceElement, floatingElement, floating.update);\n    }\n\n    return undefined;\n  }, [\n    options.keepMounted,\n    _opened,\n    floating.update,\n    floating.elements.reference,\n    floating.elements.floating,\n  ]);\n\n  const measuredAfterShowRef = useRef(false);\n\n  useIsomorphicEffect(() => {\n    if (!_opened) {\n      measuredAfterShowRef.current = false;\n      return;\n    }\n\n    if (!lockEnabled || lockedPlacement !== null) {\n      return;\n    }\n\n    const flEl = floating.refs.floating.current as HTMLElement | null;\n    if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n      return;\n    }\n\n    if (!measuredAfterShowRef.current) {\n      measuredAfterShowRef.current = true;\n      floating.update();\n      return;\n    }\n\n    if (floating.isPositioned) {\n      setLockedPlacement(floating.placement);\n    }\n  }, [\n    lockEnabled,\n    _opened,\n    floating.isPositioned,\n    floating.placement,\n    lockedPlacement,\n    floating.update,\n  ]);\n\n  const previousPlacementRef = useRef(floating.placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== floating.placement) {\n      previousPlacementRef.current = floating.placement;\n      options.onPositionChange?.(floating.placement);\n    }\n  }, [floating.placement]);\n\n  useDidUpdate(() => {\n    if (_opened !== previouslyOpened.current) {\n      if (!_opened) {\n        options.onClose?.();\n      } else {\n        options.onOpen?.();\n      }\n    }\n\n    previouslyOpened.current = _opened;\n  }, [_opened, options.onClose, options.onOpen]);\n\n  return {\n    floating,\n    controlled: typeof options.opened === 'boolean',\n    opened: _opened,\n    onClose,\n    onToggle,\n    resetLockedPlacement,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Slider/Thumb/Thumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.mjs","names":[],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  label: React.ReactNode;\n  thumbValueText?: string | ((value: number) => string);\n  onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onMouseDown?: (event: any) => void;\n  labelTransitionProps: TransitionOverride | undefined;\n  labelAlwaysOn: boolean | undefined;\n  thumbLabel: string | undefined;\n  showLabelOnHover: boolean | undefined;\n  isHovered?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean | undefined;\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function Thumb({\n  max,\n  min,\n  value,\n  position,\n  label,\n  dragging,\n  onMouseDown,\n  onKeyDownCapture,\n  labelTransitionProps,\n  labelAlwaysOn,\n  thumbLabel,\n  thumbValueText,\n  onFocus,\n  onBlur,\n  showLabelOnHover,\n  isHovered,\n  children = null,\n  disabled,\n  orientation = 'horizontal',\n  ref,\n}: ThumbProps) {\n  const { getStyles } = useSliderContext();\n\n  const [focused, setFocused] = useState(false);\n\n  const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n  const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n  return (\n    <Box<'div'>\n      tabIndex={disabled ? -1 : 0}\n      role=\"slider\"\n      aria-label={thumbLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled}\n      aria-orientation={orientation}\n      ref={ref}\n      __vars={{ '--slider-thumb-offset': `${position}%` }}\n      {...getStyles('thumb', { focusable: true })}\n      mod={{ dragging, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        typeof onFocus === 'function' && onFocus(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        typeof onBlur === 'function' && onBlur(event);\n      }}\n      onTouchStart={onMouseDown}\n      onMouseDown={onMouseDown}\n      onKeyDownCapture={onKeyDownCapture}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {children}\n      <Transition\n        mounted={label != null && !!isVisible}\n        transition=\"fade\"\n        duration={0}\n        {...labelTransitionProps}\n      >\n        {(transitionStyles) => (\n          <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n        )}\n      </Transition>\n    </Box>\n  );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAc,iBAAiB;CAEvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,qBAAC,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAC1C,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;YAzB5C,CA2BG,UACD,oBAAC,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,oBAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;cAAI;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Thumb.mjs","names":[],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  label: React.ReactNode;\n  thumbValueText?: string | ((value: number) => string);\n  onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onMouseDown?: (event: any) => void;\n  labelTransitionProps: TransitionOverride | undefined;\n  labelAlwaysOn: boolean | undefined;\n  thumbLabel: string | undefined;\n  showLabelOnHover: boolean | undefined;\n  isHovered?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean | undefined;\n  orientation?: 'horizontal' | 'vertical';\n  className?: string | undefined;\n  style?: React.CSSProperties;\n}\n\nexport function Thumb({\n  max,\n  min,\n  value,\n  position,\n  label,\n  dragging,\n  onMouseDown,\n  onKeyDownCapture,\n  labelTransitionProps,\n  labelAlwaysOn,\n  thumbLabel,\n  thumbValueText,\n  onFocus,\n  onBlur,\n  showLabelOnHover,\n  isHovered,\n  children = null,\n  disabled,\n  orientation = 'horizontal',\n  ref,\n}: ThumbProps) {\n  const { getStyles } = useSliderContext();\n\n  const [focused, setFocused] = useState(false);\n\n  const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n  const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n  return (\n    <Box<'div'>\n      tabIndex={disabled ? -1 : 0}\n      role=\"slider\"\n      aria-label={thumbLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled}\n      aria-orientation={orientation}\n      ref={ref}\n      __vars={{ '--slider-thumb-offset': `${position}%` }}\n      {...getStyles('thumb', { focusable: true })}\n      mod={{ dragging, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        typeof onFocus === 'function' && onFocus(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        typeof onBlur === 'function' && onBlur(event);\n      }}\n      onTouchStart={onMouseDown}\n      onMouseDown={onMouseDown}\n      onKeyDownCapture={onKeyDownCapture}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {children}\n      <Transition\n        mounted={label != null && !!isVisible}\n        transition=\"fade\"\n        duration={0}\n        {...labelTransitionProps}\n      >\n        {(transitionStyles) => (\n          <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n        )}\n      </Transition>\n    </Box>\n  );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAc,iBAAiB;CAEvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,qBAAC,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAC1C,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;YAzB5C,CA2BG,UACD,oBAAC,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,oBAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;cAAI;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}

package/esm/components/Splitter/Splitter.mjs

@@ -18,7 +18,8 @@ import { jsx } from "react/jsx-runtime";
 const defaultProps = {
 	orientation: "horizontal",
 	lineSize: 2,
-	withHandle: true
+	withHandle: true,
+	resetOnDoubleClick: true
 };
 const varsResolver = createVarsResolver((theme, { lineSize, handleColor }) => ({ root: {
 	"--splitter-line-size": rem(lineSize),
@@ -26,7 +27,7 @@ const varsResolver = createVarsResolver((theme, { lineSize, handleColor }) => ({
 } }));
 const Splitter = factory((_props) => {
 	const props = useProps("Splitter", defaultProps, _props);
-	const { orientation, sizes: controlledSizes, onSizeChange, onResizeStart, onResizeEnd, onCollapseChange, redistribute, step, shiftStep, lineSize, handleColor, handleIcon, withHandle, splitterRef, children, className, classNames, style, styles, unstyled, vars, mod, attributes, ref, ...others } = props;
+	const { orientation, sizes: controlledSizes, onSizeChange, onResizeStart, onResizeEnd, onCollapseChange, redistribute, step, shiftStep, lineSize, handleColor, handleIcon, withHandle, resetOnDoubleClick, splitterRef, children, className, classNames, style, styles, unstyled, vars, mod, attributes, ref, ...others } = props;
 	const { dir } = useDirection();
 	const paneChildren = Children.toArray(children);
 	const splitter = useSplitter({
@@ -46,7 +47,8 @@ const Splitter = factory((_props) => {
 		redistribute,
 		step,
 		shiftStep,
-		dir
+		dir,
+		resetOnDoubleClick
 	});
 	useImperativeHandle(splitterRef, () => splitter, [splitter]);
 	const mergedRef = useMergedRef(ref, splitter.ref);

package/esm/components/Splitter/Splitter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Splitter.mjs","names":["classes"],"sources":["../../../src/components/Splitter/Splitter.tsx"],"sourcesContent":["import { Children, cloneElement, useImperativeHandle } from 'react';\nimport {\n  useMergedRef,\n  useSplitter,\n  UseSplitterRedistributeFn,\n  UseSplitterReturnValue,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { GripHorizontalIcon, GripVerticalIcon } from './GripIcon';\nimport { SplitterProvider } from './Splitter.context';\nimport {\n  SplitterPane,\n  SplitterPaneProps,\n  SplitterPaneStylesNames,\n} from './SplitterPane/SplitterPane';\nimport classes from './Splitter.module.css';\n\nexport type SplitterStylesNames = 'root' | 'handle' | 'thumb' | SplitterPaneStylesNames;\n\nexport type SplitterCssVariables = {\n  root: '--splitter-line-size' | '--splitter-handle-color';\n};\n\nexport interface SplitterProps\n  extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {\n  /** Layout direction @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Controlled sizes (percentages summing to 100) */\n  sizes?: number[];\n\n  /** Called during resize with updated sizes */\n  onSizeChange?: (sizes: number[]) => void;\n\n  /** Called when drag starts */\n  onResizeStart?: (handleIndex: number) => void;\n\n  /** Called when drag ends */\n  onResizeEnd?: (handleIndex: number, sizes: number[]) => void;\n\n  /** Called when a panel collapses or expands */\n  onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;\n\n  /** How to redistribute space when immediate neighbor is at its min/max */\n  redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;\n\n  /** Keyboard step size in percentage @default 1 */\n  step?: number;\n\n  /** Shift+arrow step size in percentage @default 10 */\n  shiftStep?: number;\n\n  /** CSS value for separator line thickness between panes @default 2 */\n  lineSize?: number | string;\n\n  /** Key of `theme.colors` or any valid CSS color for the separator line */\n  handleColor?: MantineColor;\n\n  /** Custom icon displayed in the handle thumb, by default uses grip icon based on orientation */\n  handleIcon?: React.ReactNode;\n\n  /** Determines whether the thumb with grip icon is displayed on the handle @default true */\n  withHandle?: boolean;\n\n  /** Ref to imperative splitter API (sizes, collapse, expand, etc.) */\n  splitterRef?: React.RefObject<UseSplitterReturnValue | null>;\n\n  /** Splitter panes */\n  children?: React.ReactNode;\n}\n\nexport type SplitterFactory = Factory<{\n  props: SplitterProps;\n  ref: HTMLDivElement;\n  stylesNames: SplitterStylesNames;\n  vars: SplitterCssVariables;\n  staticComponents: {\n    Pane: typeof SplitterPane;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  lineSize: 2,\n  withHandle: true,\n} satisfies Partial<SplitterProps>;\n\nconst varsResolver = createVarsResolver<SplitterFactory>((theme, { lineSize, handleColor }) => ({\n  root: {\n    '--splitter-line-size': rem(lineSize),\n    '--splitter-handle-color': handleColor ? getThemeColor(handleColor, theme) : undefined,\n  },\n}));\n\nexport const Splitter = factory<SplitterFactory>((_props) => {\n  const props = useProps('Splitter', defaultProps, _props);\n  const {\n    orientation,\n    sizes: controlledSizes,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    onCollapseChange,\n    redistribute,\n    step,\n    shiftStep,\n    lineSize,\n    handleColor,\n    handleIcon,\n    withHandle,\n    splitterRef,\n    children,\n    className,\n    classNames,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const paneChildren = Children.toArray(children) as React.ReactElement<SplitterPaneProps>[];\n\n  const panels = paneChildren.map((child) => ({\n    defaultSize: child.props.defaultSize,\n    min: child.props.min,\n    max: child.props.max,\n    collapsible: child.props.collapsible,\n    collapseThreshold: child.props.collapseThreshold,\n  }));\n\n  const splitter = useSplitter({\n    panels,\n    orientation,\n    sizes: controlledSizes,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    onCollapseChange,\n    redistribute,\n    step,\n    shiftStep,\n    dir,\n  });\n\n  useImperativeHandle(splitterRef, () => splitter, [splitter]);\n\n  const mergedRef = useMergedRef(ref, splitter.ref);\n\n  const getStyles = useStyles<SplitterFactory>({\n    name: 'Splitter',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const defaultIcon = orientation === 'vertical' ? <GripHorizontalIcon /> : <GripVerticalIcon />;\n  const thumbIcon = handleIcon !== undefined ? handleIcon : defaultIcon;\n\n  const items: React.ReactNode[] = [];\n\n  paneChildren.forEach((child, index) => {\n    if (index > 0) {\n      const handleProps = splitter.getHandleProps({ index: index - 1 });\n      const isActive = splitter.activeHandle === index - 1;\n      items.push(\n        <Box {...getStyles('handle')} key={`handle-${index - 1}`} {...handleProps}>\n          {withHandle && (\n            <div\n              {...getStyles('thumb')}\n              data-orientation={orientation}\n              data-active={isActive || undefined}\n            >\n              {thumbIcon}\n            </div>\n          )}\n        </Box>\n      );\n    }\n\n    items.push(\n      cloneElement(child, {\n        key: `pane-${index}`,\n        __index: index,\n      })\n    );\n  });\n\n  return (\n    <SplitterProvider\n      value={{\n        getStyles,\n        sizes: splitter.sizes,\n        collapsed: splitter.collapsed,\n        orientation: orientation!,\n      }}\n    >\n      <Box ref={mergedRef} {...getStyles('root')} mod={[{ orientation }, mod]} {...others}>\n        {items}\n      </Box>\n    </SplitterProvider>\n  );\n});\n\nSplitter.classes = classes;\nSplitter.varsResolver = varsResolver;\nSplitter.displayName = '@mantine/core/Splitter';\nSplitter.Pane = SplitterPane;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+FA,MAAM,eAAe;CACnB,aAAa;CACb,UAAU;CACV,YAAY;AACd;AAEA,MAAM,eAAe,oBAAqC,OAAO,EAAE,UAAU,mBAAmB,EAC9F,MAAM;CACJ,wBAAwB,IAAI,QAAQ;CACpC,2BAA2B,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;AAC/E,EACF,EAAE;AAEF,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,aACA,OAAO,iBACP,cACA,eACA,aACA,kBACA,cACA,MACA,WACA,UACA,aACA,YACA,YACA,aACA,UACA,WACA,YACA,OACA,QACA,UACA,MACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,eAAe,SAAS,QAAQ,QAAQ;CAU9C,MAAM,WAAW,YAAY;EAC3B,QATa,aAAa,KAAK,WAAW;GAC1C,aAAa,MAAM,MAAM;GACzB,KAAK,MAAM,MAAM;GACjB,KAAK,MAAM,MAAM;GACjB,aAAa,MAAM,MAAM;GACzB,mBAAmB,MAAM,MAAM;EACjC,EAGO;EACL;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,oBAAoB,mBAAmB,UAAU,CAAC,QAAQ,CAAC;CAE3D,MAAM,YAAY,aAAa,KAAK,SAAS,GAAG;CAEhD,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,YAAY,eAAe,KAAA,IAAY,aADzB,gBAAgB,aAAa,oBAAC,oBAAD,CAAqB,CAAA,IAAI,oBAAC,kBAAD,CAAmB,CAAA;CAG7F,MAAM,QAA2B,CAAC;CAElC,aAAa,SAAS,OAAO,UAAU;EACrC,IAAI,QAAQ,GAAG;GACb,MAAM,cAAc,SAAS,eAAe,EAAE,OAAO,QAAQ,EAAE,CAAC;GAChE,MAAM,WAAW,SAAS,iBAAiB,QAAQ;GACnD,MAAM,KACJ,8BAAC,KAAD;IAAK,GAAI,UAAU,QAAQ;IAAG,KAAK,UAAU,QAAQ;IAAK,GAAI;GAUzD,GATF,cACC,oBAAC,OAAD;IACE,GAAI,UAAU,OAAO;IACrB,oBAAkB;IAClB,eAAa,YAAY,KAAA;cAExB;GACE,CAAA,CAEJ,CACP;EACF;EAEA,MAAM,KACJ,aAAa,OAAO;GAClB,KAAK,QAAQ;GACb,SAAS;EACX,CAAC,CACH;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA,OAAO,SAAS;GAChB,WAAW,SAAS;GACP;EACf;YAEA,oBAAC,KAAD;GAAK,KAAK;GAAW,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,YAAY,GAAG,GAAG;GAAG,GAAI;aAC1E;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}
+{"version":3,"file":"Splitter.mjs","names":["classes"],"sources":["../../../src/components/Splitter/Splitter.tsx"],"sourcesContent":["import { Children, cloneElement, useImperativeHandle } from 'react';\nimport {\n  useMergedRef,\n  useSplitter,\n  UseSplitterRedistributeFn,\n  UseSplitterReturnValue,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { GripHorizontalIcon, GripVerticalIcon } from './GripIcon';\nimport { SplitterProvider } from './Splitter.context';\nimport {\n  SplitterPane,\n  SplitterPaneProps,\n  SplitterPaneStylesNames,\n} from './SplitterPane/SplitterPane';\nimport classes from './Splitter.module.css';\n\nexport type SplitterStylesNames = 'root' | 'handle' | 'thumb' | SplitterPaneStylesNames;\n\nexport type SplitterCssVariables = {\n  root: '--splitter-line-size' | '--splitter-handle-color';\n};\n\nexport interface SplitterProps\n  extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {\n  /** Layout direction @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Controlled sizes (percentages summing to 100) */\n  sizes?: number[];\n\n  /** Called during resize with updated sizes */\n  onSizeChange?: (sizes: number[]) => void;\n\n  /** Called when drag starts */\n  onResizeStart?: (handleIndex: number) => void;\n\n  /** Called when drag ends */\n  onResizeEnd?: (handleIndex: number, sizes: number[]) => void;\n\n  /** Called when a panel collapses or expands */\n  onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;\n\n  /** How to redistribute space when immediate neighbor is at its min/max */\n  redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;\n\n  /** Keyboard step size in percentage @default 1 */\n  step?: number;\n\n  /** Shift+arrow step size in percentage @default 10 */\n  shiftStep?: number;\n\n  /** CSS value for separator line thickness between panes @default 2 */\n  lineSize?: number | string;\n\n  /** Key of `theme.colors` or any valid CSS color for the separator line */\n  handleColor?: MantineColor;\n\n  /** Custom icon displayed in the handle thumb, by default uses grip icon based on orientation */\n  handleIcon?: React.ReactNode;\n\n  /** Determines whether the thumb with grip icon is displayed on the handle @default true */\n  withHandle?: boolean;\n\n  /** Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked @default true */\n  resetOnDoubleClick?: boolean;\n\n  /** Ref to imperative splitter API (sizes, collapse, expand, etc.) */\n  splitterRef?: React.RefObject<UseSplitterReturnValue | null>;\n\n  /** Splitter panes */\n  children?: React.ReactNode;\n}\n\nexport type SplitterFactory = Factory<{\n  props: SplitterProps;\n  ref: HTMLDivElement;\n  stylesNames: SplitterStylesNames;\n  vars: SplitterCssVariables;\n  staticComponents: {\n    Pane: typeof SplitterPane;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  lineSize: 2,\n  withHandle: true,\n  resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>;\n\nconst varsResolver = createVarsResolver<SplitterFactory>((theme, { lineSize, handleColor }) => ({\n  root: {\n    '--splitter-line-size': rem(lineSize),\n    '--splitter-handle-color': handleColor ? getThemeColor(handleColor, theme) : undefined,\n  },\n}));\n\nexport const Splitter = factory<SplitterFactory>((_props) => {\n  const props = useProps('Splitter', defaultProps, _props);\n  const {\n    orientation,\n    sizes: controlledSizes,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    onCollapseChange,\n    redistribute,\n    step,\n    shiftStep,\n    lineSize,\n    handleColor,\n    handleIcon,\n    withHandle,\n    resetOnDoubleClick,\n    splitterRef,\n    children,\n    className,\n    classNames,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const paneChildren = Children.toArray(children) as React.ReactElement<SplitterPaneProps>[];\n\n  const panels = paneChildren.map((child) => ({\n    defaultSize: child.props.defaultSize,\n    min: child.props.min,\n    max: child.props.max,\n    collapsible: child.props.collapsible,\n    collapseThreshold: child.props.collapseThreshold,\n  }));\n\n  const splitter = useSplitter({\n    panels,\n    orientation,\n    sizes: controlledSizes,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    onCollapseChange,\n    redistribute,\n    step,\n    shiftStep,\n    dir,\n    resetOnDoubleClick,\n  });\n\n  useImperativeHandle(splitterRef, () => splitter, [splitter]);\n\n  const mergedRef = useMergedRef(ref, splitter.ref);\n\n  const getStyles = useStyles<SplitterFactory>({\n    name: 'Splitter',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const defaultIcon = orientation === 'vertical' ? <GripHorizontalIcon /> : <GripVerticalIcon />;\n  const thumbIcon = handleIcon !== undefined ? handleIcon : defaultIcon;\n\n  const items: React.ReactNode[] = [];\n\n  paneChildren.forEach((child, index) => {\n    if (index > 0) {\n      const handleProps = splitter.getHandleProps({ index: index - 1 });\n      const isActive = splitter.activeHandle === index - 1;\n      items.push(\n        <Box {...getStyles('handle')} key={`handle-${index - 1}`} {...handleProps}>\n          {withHandle && (\n            <div\n              {...getStyles('thumb')}\n              data-orientation={orientation}\n              data-active={isActive || undefined}\n            >\n              {thumbIcon}\n            </div>\n          )}\n        </Box>\n      );\n    }\n\n    items.push(\n      cloneElement(child, {\n        key: `pane-${index}`,\n        __index: index,\n      })\n    );\n  });\n\n  return (\n    <SplitterProvider\n      value={{\n        getStyles,\n        sizes: splitter.sizes,\n        collapsed: splitter.collapsed,\n        orientation: orientation!,\n      }}\n    >\n      <Box ref={mergedRef} {...getStyles('root')} mod={[{ orientation }, mod]} {...others}>\n        {items}\n      </Box>\n    </SplitterProvider>\n  );\n});\n\nSplitter.classes = classes;\nSplitter.varsResolver = varsResolver;\nSplitter.displayName = '@mantine/core/Splitter';\nSplitter.Pane = SplitterPane;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkGA,MAAM,eAAe;CACnB,aAAa;CACb,UAAU;CACV,YAAY;CACZ,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAAqC,OAAO,EAAE,UAAU,mBAAmB,EAC9F,MAAM;CACJ,wBAAwB,IAAI,QAAQ;CACpC,2BAA2B,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;AAC/E,EACF,EAAE;AAEF,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,aACA,OAAO,iBACP,cACA,eACA,aACA,kBACA,cACA,MACA,WACA,UACA,aACA,YACA,YACA,oBACA,aACA,UACA,WACA,YACA,OACA,QACA,UACA,MACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,eAAe,SAAS,QAAQ,QAAQ;CAU9C,MAAM,WAAW,YAAY;EAC3B,QATa,aAAa,KAAK,WAAW;GAC1C,aAAa,MAAM,MAAM;GACzB,KAAK,MAAM,MAAM;GACjB,KAAK,MAAM,MAAM;GACjB,aAAa,MAAM,MAAM;GACzB,mBAAmB,MAAM,MAAM;EACjC,EAGO;EACL;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,oBAAoB,mBAAmB,UAAU,CAAC,QAAQ,CAAC;CAE3D,MAAM,YAAY,aAAa,KAAK,SAAS,GAAG;CAEhD,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,YAAY,eAAe,KAAA,IAAY,aADzB,gBAAgB,aAAa,oBAAC,oBAAD,CAAqB,CAAA,IAAI,oBAAC,kBAAD,CAAmB,CAAA;CAG7F,MAAM,QAA2B,CAAC;CAElC,aAAa,SAAS,OAAO,UAAU;EACrC,IAAI,QAAQ,GAAG;GACb,MAAM,cAAc,SAAS,eAAe,EAAE,OAAO,QAAQ,EAAE,CAAC;GAChE,MAAM,WAAW,SAAS,iBAAiB,QAAQ;GACnD,MAAM,KACJ,8BAAC,KAAD;IAAK,GAAI,UAAU,QAAQ;IAAG,KAAK,UAAU,QAAQ;IAAK,GAAI;GAUzD,GATF,cACC,oBAAC,OAAD;IACE,GAAI,UAAU,OAAO;IACrB,oBAAkB;IAClB,eAAa,YAAY,KAAA;cAExB;GACE,CAAA,CAEJ,CACP;EACF;EAEA,MAAM,KACJ,aAAa,OAAO;GAClB,KAAK,QAAQ;GACb,SAAS;EACX,CAAC,CACH;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA,OAAO,SAAS;GAChB,WAAW,SAAS;GACP;EACf;YAEA,oBAAC,KAAD;GAAK,KAAK;GAAW,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,YAAY,GAAG,GAAG;GAAG,GAAI;aAC1E;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}

package/esm/components/Text/Text.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../src/components/Text/Text.module.css"],"sourcesContent":[".root {\n  -webkit-tap-highlight-color: transparent;\n  text-decoration: none;\n  font-size: var(--text-fz, var(--mantine-font-size-md));\n  line-height: var(--text-lh, var(--mantine-line-height-md));\n  font-weight: var(--mantine-font-weight-regular);\n  text-wrap: var(--text-text-wrap, var(--mantine-text-wrap, wrap));\n  margin: 0;\n  padding: 0;\n\n  &:where([data-truncate]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate='start']) {\n    direction: rtl;\n    text-align: end;\n\n    @mixin where-rtl {\n      direction: ltr;\n      text-align: start;\n    }\n  }\n\n  &:where([data-variant='gradient']) {\n    background-image: var(--text-gradient);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  &:where([data-line-clamp]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: var(--text-line-clamp);\n    -webkit-box-orient: vertical;\n  }\n\n  &:where([data-inherit]) {\n    line-height: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n  }\n\n  &:where([data-inline]) {\n    line-height: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../src/components/Text/Text.module.css"],"sourcesContent":[".root {\n  -webkit-tap-highlight-color: transparent;\n  text-decoration: none;\n  font-size: var(--text-fz, var(--mantine-font-size-md));\n  line-height: var(--text-lh, var(--mantine-line-height-md));\n  font-weight: var(--mantine-font-weight-regular);\n  text-wrap: var(--text-text-wrap, var(--mantine-text-wrap));\n  margin: 0;\n  padding: 0;\n\n  &:where([data-truncate]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate='start']) {\n    direction: rtl;\n    text-align: end;\n\n    @mixin where-rtl {\n      direction: ltr;\n      text-align: start;\n    }\n  }\n\n  &:where([data-variant='gradient']) {\n    background-image: var(--text-gradient);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  &:where([data-line-clamp]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: var(--text-line-clamp);\n    -webkit-box-orient: vertical;\n  }\n\n  &:where([data-inherit]) {\n    line-height: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n  }\n\n  &:where([data-inline]) {\n    line-height: 1;\n  }\n}\n"],"mappings":""}

package/esm/components/Textarea/Autosize.mjs

@@ -92,6 +92,7 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
 	const libRef = useRef(null);
 	const ref = useMergedRef(libRef, userRef);
 	const heightRef = useRef(0);
+	const widthRef = useRef(0);
 	const resizeTextarea = () => {
 		const node = libRef.current;
 		if (!node) return;
@@ -113,6 +114,19 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
 		window.addEventListener("resize", handleResize);
 		return () => window.removeEventListener("resize", handleResize);
 	}, []);
+	useEffect(() => {
+		const node = libRef.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		widthRef.current = node.offsetWidth;
+		const observer = new ResizeObserver(() => {
+			if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {
+				widthRef.current = libRef.current.offsetWidth;
+				resizeTextarea();
+			}
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
 	useEffect(() => {
 		const handleFontsLoaded = () => resizeTextarea();
 		document.fonts.addEventListener("loadingdone", handleFontsLoaded);

package/esm/components/Textarea/Autosize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autosize.mjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n  ref?: React.Ref<HTMLTextAreaElement>;\n  maxRows?: number;\n  minRows?: number;\n  style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n    height?: number;\n  };\n}\n\nconst SIZING_STYLE_KEYS = [\n  'borderBottomWidth',\n  'borderLeftWidth',\n  'borderRightWidth',\n  'borderTopWidth',\n  'boxSizing',\n  'fontFamily',\n  'fontSize',\n  'fontStyle',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'paddingTop',\n  'tabSize',\n  'textIndent',\n  'textRendering',\n  'textTransform',\n  'width',\n  'wordBreak',\n  'wordSpacing',\n  'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n  sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n  paddingSize: number;\n  borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n  'min-height': '0',\n  'max-height': 'none',\n  height: '0',\n  visibility: 'hidden',\n  overflow: 'hidden',\n  position: 'absolute',\n  'z-index': '-1000',\n  top: '0',\n  right: '0',\n  display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n  });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n  const style = window.getComputedStyle(node);\n\n  if (style === null) {\n    return null;\n  }\n\n  const sizingStyle = {} as SizingData['sizingStyle'];\n  for (const key of SIZING_STYLE_KEYS) {\n    (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n  }\n\n  if ((sizingStyle as any).boxSizing === '') {\n    return null;\n  }\n\n  const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n  const borderSize =\n    parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n  return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n  sizingData: SizingData,\n  value: string,\n  minRows = 1,\n  maxRows = Infinity\n): [number, number] {\n  if (!hiddenTextarea) {\n    hiddenTextarea = document.createElement('textarea');\n    hiddenTextarea.setAttribute('tabindex', '-1');\n    hiddenTextarea.setAttribute('aria-hidden', 'true');\n    hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n    forceHiddenStyles(hiddenTextarea);\n  }\n\n  if (hiddenTextarea.parentNode === null) {\n    document.body.appendChild(hiddenTextarea);\n  }\n\n  const { paddingSize, borderSize, sizingStyle } = sizingData;\n  const { boxSizing } = sizingStyle;\n\n  Object.keys(sizingStyle).forEach((key) => {\n    (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n  });\n\n  forceHiddenStyles(hiddenTextarea);\n\n  hiddenTextarea.value = value;\n  let height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n  hiddenTextarea.value = value;\n  height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  hiddenTextarea.value = 'x';\n  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n  let minHeight = rowHeight * minRows;\n  if (boxSizing === 'border-box') {\n    minHeight = minHeight + paddingSize + borderSize;\n  }\n  height = Math.max(minHeight, height);\n\n  let maxHeight = rowHeight * maxRows;\n  if (boxSizing === 'border-box') {\n    maxHeight = maxHeight + paddingSize + borderSize;\n  }\n  height = Math.min(maxHeight, height);\n\n  return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n  maxRows,\n  minRows,\n  onChange,\n  ref: userRef,\n  ...props\n}: TextareaAutosizeProps) {\n  const isControlled = props.value !== undefined;\n  const libRef = useRef<HTMLTextAreaElement | null>(null);\n  const ref = useMergedRef(libRef, userRef);\n  const heightRef = useRef(0);\n\n  const resizeTextarea = () => {\n    const node = libRef.current;\n\n    if (!node) {\n      return;\n    }\n\n    const nodeSizingData = getSizingData(node);\n\n    if (!nodeSizingData) {\n      return;\n    }\n\n    const [height] = calculateNodeHeight(\n      nodeSizingData,\n      node.value || node.placeholder || 'x',\n      minRows,\n      maxRows\n    );\n\n    if (heightRef.current !== height) {\n      heightRef.current = height;\n      node.style.setProperty('height', `${height}px`, 'important');\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) {\n      resizeTextarea();\n    }\n    onChange?.(event);\n  };\n\n  useLayoutEffect(resizeTextarea);\n\n  useEffect(() => {\n    const handleResize = () => resizeTextarea();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  useEffect(() => {\n    const handleFontsLoaded = () => resizeTextarea();\n    document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n    return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n  }, []);\n\n  useEffect(() => {\n    const handleReset = (event: Event) => {\n      if (libRef.current?.form === event.target && !isControlled) {\n        const currentValue = libRef.current!.value;\n        requestAnimationFrame(() => {\n          if (libRef.current && currentValue !== libRef.current.value) {\n            resizeTextarea();\n          }\n        });\n      }\n    };\n    document.body.addEventListener('reset', handleReset);\n    return () => document.body.removeEventListener('reset', handleReset);\n  }, [isControlled]);\n\n  return <textarea {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Autosize.mjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n  ref?: React.Ref<HTMLTextAreaElement>;\n  maxRows?: number;\n  minRows?: number;\n  style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n    height?: number;\n  };\n}\n\nconst SIZING_STYLE_KEYS = [\n  'borderBottomWidth',\n  'borderLeftWidth',\n  'borderRightWidth',\n  'borderTopWidth',\n  'boxSizing',\n  'fontFamily',\n  'fontSize',\n  'fontStyle',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'paddingTop',\n  'tabSize',\n  'textIndent',\n  'textRendering',\n  'textTransform',\n  'width',\n  'wordBreak',\n  'wordSpacing',\n  'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n  sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n  paddingSize: number;\n  borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n  'min-height': '0',\n  'max-height': 'none',\n  height: '0',\n  visibility: 'hidden',\n  overflow: 'hidden',\n  position: 'absolute',\n  'z-index': '-1000',\n  top: '0',\n  right: '0',\n  display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n  });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n  const style = window.getComputedStyle(node);\n\n  if (style === null) {\n    return null;\n  }\n\n  const sizingStyle = {} as SizingData['sizingStyle'];\n  for (const key of SIZING_STYLE_KEYS) {\n    (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n  }\n\n  if ((sizingStyle as any).boxSizing === '') {\n    return null;\n  }\n\n  const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n  const borderSize =\n    parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n  return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n  sizingData: SizingData,\n  value: string,\n  minRows = 1,\n  maxRows = Infinity\n): [number, number] {\n  if (!hiddenTextarea) {\n    hiddenTextarea = document.createElement('textarea');\n    hiddenTextarea.setAttribute('tabindex', '-1');\n    hiddenTextarea.setAttribute('aria-hidden', 'true');\n    hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n    forceHiddenStyles(hiddenTextarea);\n  }\n\n  if (hiddenTextarea.parentNode === null) {\n    document.body.appendChild(hiddenTextarea);\n  }\n\n  const { paddingSize, borderSize, sizingStyle } = sizingData;\n  const { boxSizing } = sizingStyle;\n\n  Object.keys(sizingStyle).forEach((key) => {\n    (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n  });\n\n  forceHiddenStyles(hiddenTextarea);\n\n  hiddenTextarea.value = value;\n  let height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n  hiddenTextarea.value = value;\n  height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  hiddenTextarea.value = 'x';\n  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n  let minHeight = rowHeight * minRows;\n  if (boxSizing === 'border-box') {\n    minHeight = minHeight + paddingSize + borderSize;\n  }\n  height = Math.max(minHeight, height);\n\n  let maxHeight = rowHeight * maxRows;\n  if (boxSizing === 'border-box') {\n    maxHeight = maxHeight + paddingSize + borderSize;\n  }\n  height = Math.min(maxHeight, height);\n\n  return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n  maxRows,\n  minRows,\n  onChange,\n  ref: userRef,\n  ...props\n}: TextareaAutosizeProps) {\n  const isControlled = props.value !== undefined;\n  const libRef = useRef<HTMLTextAreaElement | null>(null);\n  const ref = useMergedRef(libRef, userRef);\n  const heightRef = useRef(0);\n  const widthRef = useRef(0);\n\n  const resizeTextarea = () => {\n    const node = libRef.current;\n\n    if (!node) {\n      return;\n    }\n\n    const nodeSizingData = getSizingData(node);\n\n    if (!nodeSizingData) {\n      return;\n    }\n\n    const [height] = calculateNodeHeight(\n      nodeSizingData,\n      node.value || node.placeholder || 'x',\n      minRows,\n      maxRows\n    );\n\n    if (heightRef.current !== height) {\n      heightRef.current = height;\n      node.style.setProperty('height', `${height}px`, 'important');\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) {\n      resizeTextarea();\n    }\n    onChange?.(event);\n  };\n\n  useLayoutEffect(resizeTextarea);\n\n  useEffect(() => {\n    const handleResize = () => resizeTextarea();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  useEffect(() => {\n    const node = libRef.current;\n\n    if (!node || typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    widthRef.current = node.offsetWidth;\n\n    const observer = new ResizeObserver(() => {\n      if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n        widthRef.current = libRef.current.offsetWidth;\n        resizeTextarea();\n      }\n    });\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    const handleFontsLoaded = () => resizeTextarea();\n    document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n    return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n  }, []);\n\n  useEffect(() => {\n    const handleReset = (event: Event) => {\n      if (libRef.current?.form === event.target && !isControlled) {\n        const currentValue = libRef.current!.value;\n        requestAnimationFrame(() => {\n          if (libRef.current && currentValue !== libRef.current.value) {\n            resizeTextarea();\n          }\n        });\n      }\n    };\n    document.body.addEventListener('reset', handleReset);\n    return () => document.body.removeEventListener('reset', handleReset);\n  }, [isControlled]);\n\n  return <textarea {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}

package/esm/components/Transition/Transition.mjs

@@ -5,7 +5,7 @@ import { useTransition } from "./use-transition.mjs";
 import { Activity } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Transition/Transition.tsx
-function Transition({ keepMounted, transition = "fade", duration = 250, exitDuration = duration, mounted, children, timingFunction = "ease", onExit, onEntered, onEnter, onExited, enterDelay, exitDelay }) {
+function Transition({ keepMounted, keepMountedMode = "activity", transition = "fade", duration = 250, exitDuration = duration, mounted, children, timingFunction = "ease", onExit, onEntered, onEnter, onExited, enterDelay, exitDelay }) {
 	const env = useMantineEnv();
 	const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({
 		mounted,
@@ -21,22 +21,29 @@ function Transition({ keepMounted, transition = "fade", duration = 250, exitDura
 	});
 	if (env === "test") return mounted ? /* @__PURE__ */ jsx(Fragment$1, { children: children({}) }) : keepMounted ? children({ display: "none" }) : null;
 	if (transitionDuration === 0) {
-		if (keepMounted) return /* @__PURE__ */ jsx(Activity, {
-			mode: mounted ? "visible" : "hidden",
-			children: children({})
-		});
+		if (keepMounted) {
+			if (keepMountedMode === "display-none") return mounted ? /* @__PURE__ */ jsx(Fragment$1, { children: children({}) }) : children({ display: "none" });
+			return /* @__PURE__ */ jsx(Activity, {
+				mode: mounted ? "visible" : "hidden",
+				children: children({})
+			});
+		}
 		return mounted ? /* @__PURE__ */ jsx(Fragment$1, { children: children({}) }) : null;
 	}
 	const isExited = transitionStatus === "exited";
-	if (keepMounted) return /* @__PURE__ */ jsx(Activity, {
-		mode: isExited ? "hidden" : "visible",
-		children: children(isExited ? {} : getTransitionStyles({
+	if (keepMounted) {
+		const keepMountedChildren = children(isExited ? keepMountedMode === "display-none" ? { display: "none" } : {} : getTransitionStyles({
 			transition,
 			duration: transitionDuration,
 			state: transitionStatus,
 			timingFunction: transitionTimingFunction
-		}))
-	});
+		}));
+		if (keepMountedMode === "display-none") return keepMountedChildren;
+		return /* @__PURE__ */ jsx(Activity, {
+			mode: isExited ? "hidden" : "visible",
+			children: keepMountedChildren
+		});
+	}
 	return isExited ? null : /* @__PURE__ */ jsx(Fragment$1, { children: children(getTransitionStyles({
 		transition,
 		duration: transitionDuration,

package/esm/components/Transition/Transition.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Transition.mjs","names":[],"sources":["../../../src/components/Transition/Transition.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useMantineEnv } from '../../core';\nimport { getTransitionStyles } from './get-transition-styles/get-transition-styles';\nimport { MantineTransition } from './transitions';\nimport { useTransition } from './use-transition';\n\nexport interface TransitionProps {\n  /** 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. */\n  keepMounted?: boolean;\n\n  /** Transition name or object */\n  transition?: MantineTransition;\n\n  /** Transition duration in ms @default 250 */\n  duration?: number;\n\n  /** Exit transition duration in ms @default 250 */\n  exitDuration?: number;\n\n  /** Transition timing function @default theme.transitionTimingFunction */\n  timingFunction?: string;\n\n  /** Determines whether component should be mounted to the DOM */\n  mounted: boolean;\n\n  /** Render function with transition styles argument */\n  children: (styles: React.CSSProperties) => React.JSX.Element;\n\n  /** Called when exit transition ends */\n  onExited?: () => void;\n\n  /** Called when exit transition starts */\n  onExit?: () => void;\n\n  /** Called when enter transition starts */\n  onEnter?: () => void;\n\n  /** Called when enter transition ends */\n  onEntered?: () => void;\n\n  /** Delay in ms before enter transition starts */\n  enterDelay?: number;\n\n  /** Delay in ms before exit transition starts */\n  exitDelay?: number;\n}\n\nexport type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;\n\nexport function Transition({\n  keepMounted,\n  transition = 'fade',\n  duration = 250,\n  exitDuration = duration,\n  mounted,\n  children,\n  timingFunction = 'ease',\n  onExit,\n  onEntered,\n  onEnter,\n  onExited,\n  enterDelay,\n  exitDelay,\n}: TransitionProps) {\n  const env = useMantineEnv();\n  const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({\n    mounted,\n    exitDuration,\n    duration,\n    timingFunction,\n    onExit,\n    onEntered,\n    onEnter,\n    onExited,\n    enterDelay,\n    exitDelay,\n  });\n\n  if (env === 'test') {\n    return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;\n  }\n\n  if (transitionDuration === 0) {\n    if (keepMounted) {\n      return <Activity mode={mounted ? 'visible' : 'hidden'}>{children({})}</Activity>;\n    }\n    return mounted ? <>{children({})}</> : null;\n  }\n\n  const isExited = transitionStatus === 'exited';\n\n  if (keepMounted) {\n    return (\n      <Activity mode={isExited ? 'hidden' : 'visible'}>\n        {children(\n          isExited\n            ? {}\n            : getTransitionStyles({\n                transition,\n                duration: transitionDuration,\n                state: transitionStatus,\n                timingFunction: transitionTimingFunction,\n              })\n        )}\n      </Activity>\n    );\n  }\n\n  return isExited ? null : (\n    <>\n      {children(\n        getTransitionStyles({\n          transition,\n          duration: transitionDuration,\n          state: transitionStatus,\n          timingFunction: transitionTimingFunction,\n        })\n      )}\n    </>\n  );\n}\n\nTransition.displayName = '@mantine/core/Transition';\n\nexport namespace Transition {\n  export type Props = TransitionProps;\n  export type Override = TransitionOverride;\n}\n"],"mappings":";;;;;;;AAiDA,SAAgB,WAAW,EACzB,aACA,aAAa,QACb,WAAW,KACX,eAAe,UACf,SACA,UACA,iBAAiB,QACjB,QACA,WACA,SACA,UACA,YACA,aACkB;CAClB,MAAM,MAAM,cAAc;CAC1B,MAAM,EAAE,oBAAoB,kBAAkB,6BAA6B,cAAc;EACvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,QAAQ,QACV,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,cAAc,SAAS,EAAE,SAAS,OAAO,CAAC,IAAI;CAGvF,IAAI,uBAAuB,GAAG;EAC5B,IAAI,aACF,OAAO,oBAAC,UAAD;GAAU,MAAM,UAAU,YAAY;aAAW,SAAS,CAAC,CAAC;EAAY,CAAA;EAEjF,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI;CACzC;CAEA,MAAM,WAAW,qBAAqB;CAEtC,IAAI,aACF,OACE,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;YACnC,SACC,WACI,CAAC,IACD,oBAAoB;GAClB;GACA,UAAU;GACV,OAAO;GACP,gBAAgB;EAClB,CAAC,CACP;CACQ,CAAA;CAId,OAAO,WAAW,OAChB,oBAAA,YAAA,EAAA,UACG,SACC,oBAAoB;EAClB;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;CAClB,CAAC,CACH,EACA,CAAA;AAEN;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Transition.mjs","names":[],"sources":["../../../src/components/Transition/Transition.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useMantineEnv } from '../../core';\nimport { getTransitionStyles } from './get-transition-styles/get-transition-styles';\nimport { MantineTransition } from './transitions';\nimport { useTransition } from './use-transition';\n\nexport interface TransitionProps {\n  /** 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. */\n  keepMounted?: boolean;\n\n  /**\n   * Controls how the element is hidden when `keepMounted` is set:\n   * `'activity'` – hidden with React 19 `Activity` component,\n   * `'display-none'` – hidden with `display: none` styles\n   * @default 'activity'\n   */\n  keepMountedMode?: 'activity' | 'display-none';\n\n  /** Transition name or object */\n  transition?: MantineTransition;\n\n  /** Transition duration in ms @default 250 */\n  duration?: number;\n\n  /** Exit transition duration in ms @default 250 */\n  exitDuration?: number;\n\n  /** Transition timing function @default theme.transitionTimingFunction */\n  timingFunction?: string;\n\n  /** Determines whether component should be mounted to the DOM */\n  mounted: boolean;\n\n  /** Render function with transition styles argument */\n  children: (styles: React.CSSProperties) => React.JSX.Element;\n\n  /** Called when exit transition ends */\n  onExited?: () => void;\n\n  /** Called when exit transition starts */\n  onExit?: () => void;\n\n  /** Called when enter transition starts */\n  onEnter?: () => void;\n\n  /** Called when enter transition ends */\n  onEntered?: () => void;\n\n  /** Delay in ms before enter transition starts */\n  enterDelay?: number;\n\n  /** Delay in ms before exit transition starts */\n  exitDelay?: number;\n}\n\nexport type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;\n\nexport function Transition({\n  keepMounted,\n  keepMountedMode = 'activity',\n  transition = 'fade',\n  duration = 250,\n  exitDuration = duration,\n  mounted,\n  children,\n  timingFunction = 'ease',\n  onExit,\n  onEntered,\n  onEnter,\n  onExited,\n  enterDelay,\n  exitDelay,\n}: TransitionProps) {\n  const env = useMantineEnv();\n  const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({\n    mounted,\n    exitDuration,\n    duration,\n    timingFunction,\n    onExit,\n    onEntered,\n    onEnter,\n    onExited,\n    enterDelay,\n    exitDelay,\n  });\n\n  if (env === 'test') {\n    return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;\n  }\n\n  if (transitionDuration === 0) {\n    if (keepMounted) {\n      if (keepMountedMode === 'display-none') {\n        return mounted ? <>{children({})}</> : children({ display: 'none' });\n      }\n\n      return <Activity mode={mounted ? 'visible' : 'hidden'}>{children({})}</Activity>;\n    }\n    return mounted ? <>{children({})}</> : null;\n  }\n\n  const isExited = transitionStatus === 'exited';\n\n  if (keepMounted) {\n    const keepMountedChildren = children(\n      isExited\n        ? keepMountedMode === 'display-none'\n          ? { display: 'none' }\n          : {}\n        : getTransitionStyles({\n            transition,\n            duration: transitionDuration,\n            state: transitionStatus,\n            timingFunction: transitionTimingFunction,\n          })\n    );\n\n    if (keepMountedMode === 'display-none') {\n      return keepMountedChildren;\n    }\n\n    return <Activity mode={isExited ? 'hidden' : 'visible'}>{keepMountedChildren}</Activity>;\n  }\n\n  return isExited ? null : (\n    <>\n      {children(\n        getTransitionStyles({\n          transition,\n          duration: transitionDuration,\n          state: transitionStatus,\n          timingFunction: transitionTimingFunction,\n        })\n      )}\n    </>\n  );\n}\n\nTransition.displayName = '@mantine/core/Transition';\n\nexport namespace Transition {\n  export type Props = TransitionProps;\n  export type Override = TransitionOverride;\n}\n"],"mappings":";;;;;;;AAyDA,SAAgB,WAAW,EACzB,aACA,kBAAkB,YAClB,aAAa,QACb,WAAW,KACX,eAAe,UACf,SACA,UACA,iBAAiB,QACjB,QACA,WACA,SACA,UACA,YACA,aACkB;CAClB,MAAM,MAAM,cAAc;CAC1B,MAAM,EAAE,oBAAoB,kBAAkB,6BAA6B,cAAc;EACvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,QAAQ,QACV,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,cAAc,SAAS,EAAE,SAAS,OAAO,CAAC,IAAI;CAGvF,IAAI,uBAAuB,GAAG;EAC5B,IAAI,aAAa;GACf,IAAI,oBAAoB,gBACtB,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,SAAS,EAAE,SAAS,OAAO,CAAC;GAGrE,OAAO,oBAAC,UAAD;IAAU,MAAM,UAAU,YAAY;cAAW,SAAS,CAAC,CAAC;GAAY,CAAA;EACjF;EACA,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI;CACzC;CAEA,MAAM,WAAW,qBAAqB;CAEtC,IAAI,aAAa;EACf,MAAM,sBAAsB,SAC1B,WACI,oBAAoB,iBAClB,EAAE,SAAS,OAAO,IAClB,CAAC,IACH,oBAAoB;GAClB;GACA,UAAU;GACV,OAAO;GACP,gBAAgB;EAClB,CAAC,CACP;EAEA,IAAI,oBAAoB,gBACtB,OAAO;EAGT,OAAO,oBAAC,UAAD;GAAU,MAAM,WAAW,WAAW;aAAY;EAA8B,CAAA;CACzF;CAEA,OAAO,WAAW,OAChB,oBAAA,YAAA,EAAA,UACG,SACC,oBAAoB;EAClB;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;CAClB,CAAC,CACH,EACA,CAAA;AAEN;AAEA,WAAW,cAAc"}

package/esm/core/Box/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","names":[],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,gBADiB,sBACY,IAAI,IAAI,WAAW,EAAE;CACxD,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,mBAAmB,gBAAgB;EACvC;EACA;EACA,MAAM;CACR,CAAC;CAED,MAAM,0BAA0B,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAO,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,WAAW,GAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAG,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAM,YAAsC,IAAI"}
+{"version":3,"file":"Box.mjs","names":[],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string | undefined;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,gBADiB,sBACY,IAAI,IAAI,WAAW,EAAE;CACxD,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,mBAAmB,gBAAgB;EACvC;EACA;EACA,MAAM;CACR,CAAC;CAED,MAAM,0BAA0B,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAO,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,WAAW,GAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAG,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAM,YAAsC,IAAI"}

package/esm/core/styles-api/use-styles/use-styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport type { MantineStyleProp } from '../../Box';\nimport { FactoryPayload } from '../../factory';\nimport {\n  useMantineClassNamesPrefix,\n  useMantineIsHeadless,\n  useMantineTheme,\n  useMantineWithStaticClasses,\n} from '../../MantineProvider';\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types';\nimport { getClassName } from './get-class-name/get-class-name';\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names';\nimport { getStyle } from './get-style/get-style';\nimport { resolveStyle } from './get-style/resolve-style/resolve-style';\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles';\nimport { mergeVars } from './get-style/resolve-vars/merge-vars';\nimport { useStylesTransform } from './use-transformed-styles';\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[];\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never;\n  props: Payload['props'];\n  stylesCtx?: Payload['ctx'];\n  className?: string;\n  style?: MantineStyleProp;\n  rootSelector?: Payload['stylesNames'];\n  unstyled?: boolean;\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;\n  styles?: Styles<Payload>;\n  vars?: PartialVarsResolver<Payload>;\n  varsResolver?: VarsResolver<Payload>;\n  attributes?: Attributes<Payload>;\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string;\n  style: CSSProperties;\n};\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = useMantineTheme();\n  const classNamesPrefix = useMantineClassNamesPrefix();\n  const withStaticClasses = useMantineWithStaticClasses();\n  const headless = useMantineIsHeadless();\n  const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  });\n\n  const resolvedClassNames = resolveClassNames({ theme, classNames, props, stylesCtx });\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({ theme, classNames: theme.components[n]?.classNames, props, stylesCtx })\n  );\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx });\n\n  const resolvedThemeStyles: Record<string, any> = {};\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components[n]?.styles,\n        props,\n        stylesCtx,\n      });\n\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = { ...resolvedThemeStyles[key], ...resolved[key] };\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ]);\n\n  const resolvedRootStyle = resolveStyle({ style, theme });\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  });\n}\n"],"mappings":";;;;;;;;;;;AAiDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CACjD,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,mBAAmB,2BAA2B;CACpD,MAAM,oBAAoB,4BAA4B;CACtD,MAAM,WAAW,qBAAqB;CACtC,MAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,GAAG,QAAQ,MAAM,CAAC;CACvE,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,kBAAkB;EAAE;EAAO;EAAY;EAAO;CAAU,CAAC;CACpF,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;EAAE;EAAO,YAAY,MAAM,WAAW,IAAI;EAAY;EAAO;CAAU,CAAC,CAC5F;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAW,cAAc;GAC7B;GACA,QAAQ,MAAM,WAAW,IAAI;GAC7B;GACA;EACF,CAAC;EAED,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GAAE,GAAG,oBAAoB;GAAM,GAAG,SAAS;EAAK;CAE/E;CAGF,MAAM,eAAe,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,IAAI,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoB,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAW,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAO,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}
+{"version":3,"file":"use-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport type { MantineStyleProp } from '../../Box';\nimport { FactoryPayload } from '../../factory';\nimport {\n  useMantineClassNamesPrefix,\n  useMantineIsHeadless,\n  useMantineTheme,\n  useMantineWithStaticClasses,\n} from '../../MantineProvider';\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types';\nimport { getClassName } from './get-class-name/get-class-name';\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names';\nimport { getStyle } from './get-style/get-style';\nimport { resolveStyle } from './get-style/resolve-style/resolve-style';\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles';\nimport { mergeVars } from './get-style/resolve-vars/merge-vars';\nimport { useStylesTransform } from './use-transformed-styles';\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[];\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never;\n  props: Payload['props'];\n  stylesCtx?: Payload['ctx'];\n  className?: string | undefined;\n  style?: MantineStyleProp;\n  rootSelector?: Payload['stylesNames'];\n  unstyled?: boolean;\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;\n  styles?: Styles<Payload>;\n  vars?: PartialVarsResolver<Payload>;\n  varsResolver?: VarsResolver<Payload>;\n  attributes?: Attributes<Payload>;\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string;\n  style: CSSProperties;\n};\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = useMantineTheme();\n  const classNamesPrefix = useMantineClassNamesPrefix();\n  const withStaticClasses = useMantineWithStaticClasses();\n  const headless = useMantineIsHeadless();\n  const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  });\n\n  const resolvedClassNames = resolveClassNames({ theme, classNames, props, stylesCtx });\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({ theme, classNames: theme.components[n]?.classNames, props, stylesCtx })\n  );\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx });\n\n  const resolvedThemeStyles: Record<string, any> = {};\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components[n]?.styles,\n        props,\n        stylesCtx,\n      });\n\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = { ...resolvedThemeStyles[key], ...resolved[key] };\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ]);\n\n  const resolvedRootStyle = resolveStyle({ style, theme });\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  });\n}\n"],"mappings":";;;;;;;;;;;AAiDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CACjD,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,mBAAmB,2BAA2B;CACpD,MAAM,oBAAoB,4BAA4B;CACtD,MAAM,WAAW,qBAAqB;CACtC,MAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,GAAG,QAAQ,MAAM,CAAC;CACvE,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,kBAAkB;EAAE;EAAO;EAAY;EAAO;CAAU,CAAC;CACpF,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;EAAE;EAAO,YAAY,MAAM,WAAW,IAAI;EAAY;EAAO;CAAU,CAAC,CAC5F;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAW,cAAc;GAC7B;GACA,QAAQ,MAAM,WAAW,IAAI;GAC7B;GACA;EACF,CAAC;EAED,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GAAE,GAAG,oBAAoB;GAAM,GAAG,SAAS;EAAK;CAE/E;CAGF,MAAM,eAAe,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,IAAI,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoB,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAW,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAO,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}

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

@@ -1,6 +1,7 @@
 export interface HoverCardContextValue {
     openDropdown: () => void;
     closeDropdown: () => void;
+    assignTarget: (node: HTMLElement | null) => void;
     getReferenceProps?: () => any;
     getFloatingProps?: () => any;
     reference?: (node: HTMLElement | null) => void;

package/lib/components/HoverCard/use-hover-card.d.ts

@@ -10,6 +10,7 @@ export declare function useHoverCard(settings: UseHoverCard): {
     opened: boolean | undefined;
     reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
     floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    assignTarget: (node: HTMLElement | null) => void;
     getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     openDropdown: () => void;

package/lib/components/Input/use-input-props.d.ts

@@ -9,7 +9,7 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     id?: string;
 }
 export declare function useInputProps<T extends BaseProps, U extends Partial<T> | null>(component: string, defaultProps: U, _props: T): Omit<T & (U extends null | undefined ? {} : { [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>; }), "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "attributes" | "classNames" | "mod" | "description" | "error" | "__staticSelector" | "required" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
-    classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+    classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
     styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
     wrapperProps: {
@@ -299,7 +299,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         description: import("react").ReactNode;
         error: import("react").ReactNode;
         required: boolean | undefined;
-        classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+        classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any> | BaseProps;
         errorProps: (import(".").InputErrorProps & import("../..").DataAttributes) | undefined;
@@ -319,7 +319,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
     } & BoxProps;
     inputProps: {
         required: boolean | undefined;
-        classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+        classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
         size: (string & {}) | import("../..").MantineSize | undefined;

package/lib/components/MaskInput/use-mask-input-props.d.ts

@@ -4,7 +4,7 @@ export declare function useMaskInputProps(props: MaskInputProps & {
 }): {
     maskRef: import("react").RefCallback<HTMLInputElement>;
     elementProps: {
-        className?: string;
+        className?: string | undefined;
         style?: import("../..").MantineStyleProp;
         __vars?: import("../..").CssVarsProp;
         __size?: string;
@@ -102,7 +102,7 @@ export declare function useMaskInputProps(props: MaskInputProps & {
         __bottomSectionProps?: React.ComponentProps<"div">;
         unstyled?: boolean;
         variant?: (string & {}) | import("..").InputVariant | undefined;
-        classNames?: Partial<Record<import("..").__InputStylesNames, string>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, string>>) | undefined;
+        classNames?: Partial<Record<import("..").__InputStylesNames, string | undefined>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, string | undefined>>) | undefined;
         styles?: Partial<Record<import("..").__InputStylesNames, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, import("../..").CSSProperties>>) | undefined;
         vars?: import("../..").PartialVarsResolver<{
             props: MaskInputProps;

package/lib/components/Pagination/Pagination.icons.d.ts

@@ -2,7 +2,7 @@ interface _PaginationIconProps {
     path: string;
     stroke?: any;
     style?: React.CSSProperties;
-    className?: string;
+    className?: string | undefined;
     children?: React.ReactNode;
 }
 export type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;

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

@@ -44,6 +44,7 @@ export interface PopoverContextValue {
     __staticSelector: string;
     variant: string | undefined;
     keepMounted: boolean | undefined;
+    keepMountedMode: 'activity' | 'display-none' | undefined;
     getStyles: GetStylesApi<PopoverFactory>;
     resolvedStyles: Record<string, any> | undefined;
     floatingStrategy: FloatingStrategy | undefined;

package/lib/components/Popover/Popover.d.ts

@@ -27,6 +27,13 @@ export interface __PopoverProps {
     onOpen?: () => void;
     /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */
     keepMounted?: boolean;
+    /**
+     * Controls how the dropdown is hidden when `keepMounted` is set:
+     * `'activity'` – hidden with React 19 `Activity` component,
+     * `'display-none'` – hidden with `display: none` styles
+     * @default 'activity'
+     */
+    keepMountedMode?: 'activity' | 'display-none';
     /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */
     transitionProps?: TransitionOverride;
     /** Called when exit transition ends */

package/lib/components/Slider/Thumb/Thumb.d.ts

@@ -17,7 +17,7 @@ export interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {
     children?: React.ReactNode;
     disabled: boolean | undefined;
     orientation?: 'horizontal' | 'vertical';
-    className?: string;
+    className?: string | undefined;
     style?: React.CSSProperties;
 }
 export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react/jsx-runtime").JSX.Element;

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

@@ -32,6 +32,8 @@ export interface SplitterProps extends BoxProps, StylesApiProps<SplitterFactory>
     handleIcon?: React.ReactNode;
     /** Determines whether the thumb with grip icon is displayed on the handle @default true */
     withHandle?: boolean;
+    /** Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked @default true */
+    resetOnDoubleClick?: boolean;
     /** Ref to imperative splitter API (sizes, collapse, expand, etc.) */
     splitterRef?: React.RefObject<UseSplitterReturnValue | null>;
     /** Splitter panes */

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

@@ -2,6 +2,13 @@ import { MantineTransition } from './transitions';
 export interface TransitionProps {
     /** 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;
+    /**
+     * Controls how the element is hidden when `keepMounted` is set:
+     * `'activity'` – hidden with React 19 `Activity` component,
+     * `'display-none'` – hidden with `display: none` styles
+     * @default 'activity'
+     */
+    keepMountedMode?: 'activity' | 'display-none';
     /** Transition name or object */
     transition?: MantineTransition;
     /** Transition duration in ms @default 250 */
@@ -28,7 +35,7 @@ export interface TransitionProps {
     exitDelay?: number;
 }
 export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
-export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Transition({ keepMounted, keepMountedMode, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Transition {
     var displayName: string;
 }

package/lib/core/Box/Box.d.ts

@@ -5,7 +5,7 @@ export type Mod = Record<string, any> | string;
 export type BoxMod = Mod | Mod[] | BoxMod[];
 export interface BoxProps extends MantineStyleProps {
     /** Class added to the root element, if applicable */
-    className?: string;
+    className?: string | undefined;
     /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */
     style?: MantineStyleProp;
     /** CSS variables defined on root component element */

package/lib/core/styles-api/styles-api.types.d.ts

@@ -3,7 +3,7 @@ import type { FactoryPayload } from '../factory';
 import type { MantineTheme } from '../MantineProvider';
 import { PartialVarsResolver } from './create-vars-resolver/create-vars-resolver';
 export interface GetStylesApiOptions {
-    className?: string;
+    className?: string | undefined;
     style?: MantineStyleProp;
     focusable?: boolean;
     active?: boolean;
@@ -21,7 +21,7 @@ export interface GetStylesApiOptions {
 }
 export type StylesApiRecord<Payload extends FactoryPayload, DataType> = Payload['compound'] extends true ? Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> : never : Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> | ((theme: MantineTheme, props: Payload['props'], ctx: Payload['ctx']) => StylesRecord<Payload['stylesNames'], DataType>) : never;
 export type Styles<Payload extends FactoryPayload> = StylesApiRecord<Payload, CSSProperties>;
-export type ClassNames<Payload extends FactoryPayload> = StylesApiRecord<Payload, string>;
+export type ClassNames<Payload extends FactoryPayload> = StylesApiRecord<Payload, string | undefined>;
 export type ClassNamesArray<Payload extends FactoryPayload> = (StylesApiRecord<Payload, string> | undefined)[];
 export type Attributes<Payload extends FactoryPayload> = Payload['stylesNames'] extends string ? Payload['compound'] extends true ? never : {
     [K in Payload['stylesNames']]?: Record<string, any>;

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

@@ -8,7 +8,7 @@ export interface UseStylesInput<Payload extends FactoryPayload> {
     classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
     props: Payload['props'];
     stylesCtx?: Payload['ctx'];
-    className?: string;
+    className?: string | undefined;
     style?: MantineStyleProp;
     rootSelector?: Payload['stylesNames'];
     unstyled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.3.1",
+  "version": "9.3.2",
   "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.3.1",
+    "@mantine/hooks": "9.3.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Blockquote.css

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