@mantine/core 9.0.1 → 9.1.0

package/cjs/components/Tree/use-tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree.cjs","names":["getChildrenNodesValues","getAllChildrenNodes","getAllCheckedNodes","memoizedIsNodeChecked","memoizedIsNodeIndeterminate"],"sources":["../../../src/components/Tree/use-tree.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  CheckedNodeStatus,\n  getAllCheckedNodes,\n} from './get-all-checked-nodes/get-all-checked-nodes';\nimport {\n  getAllChildrenNodes,\n  getChildrenNodesValues,\n} from './get-children-nodes-values/get-children-nodes-values';\nimport { memoizedIsNodeChecked } from './is-node-checked/is-node-checked';\nimport { memoizedIsNodeIndeterminate } from './is-node-indeterminate/is-node-indeterminate';\nimport type { TreeNodeData } from './Tree';\n\nexport type TreeExpandedState = Record<string, boolean>;\n\nfunction getInitialTreeExpandedState(\n  initialState: TreeExpandedState,\n  data: TreeNodeData[],\n  value: string | string[] | undefined,\n  acc: TreeExpandedState = {}\n) {\n  data.forEach((node) => {\n    acc[node.value] = node.value in initialState ? initialState[node.value] : node.value === value;\n\n    if (Array.isArray(node.children)) {\n      getInitialTreeExpandedState(initialState, node.children, value, acc);\n    }\n  });\n\n  return acc;\n}\n\nexport function getTreeExpandedState(\n  data: TreeNodeData[],\n  expandedNodesValues: string[] | '*'\n): Record<string, boolean> {\n  const state = getInitialTreeExpandedState({}, data, []);\n\n  if (expandedNodesValues === '*') {\n    return Object.keys(state).reduce((acc, key) => ({ ...acc, [key]: true }), {});\n  }\n\n  expandedNodesValues.forEach((node) => {\n    state[node] = true;\n  });\n\n  return state;\n}\n\nfunction getInitialCheckedState(initialState: string[], data: TreeNodeData[]) {\n  const acc: string[] = [];\n\n  initialState.forEach((node) => acc.push(...getChildrenNodesValues(node, data)));\n\n  return Array.from(new Set(acc));\n}\n\nexport interface UseTreeInput {\n  /** Initial expanded state of all nodes, uncontrolled state */\n  initialExpandedState?: TreeExpandedState;\n\n  /** Expanded state of all nodes, controlled state */\n  expandedState?: TreeExpandedState;\n\n  /** Called when the tree expanded state changes */\n  onExpandedStateChange?: (expandedState: TreeExpandedState) => void;\n\n  /** Initial selected state of nodes */\n  initialSelectedState?: string[];\n\n  /** Selected state of all nodes, controlled state */\n  selectedState?: string[];\n\n  /** Called when the tree selected state changes */\n  onSelectedStateChange?: (selectedState: string[]) => void;\n\n  /** Initial checked state of nodes */\n  initialCheckedState?: string[];\n\n  /** Checked state of all nodes, controlled state */\n  checkedState?: string[];\n\n  /** Called when the tree checked state changes */\n  onCheckedStateChange?: (checkedState: string[]) => void;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple?: boolean;\n\n  /** Called with the node value when it is expanded */\n  onNodeExpand?: (value: string) => void;\n\n  /** Called with the node value when it is collapsed */\n  onNodeCollapse?: (value: string) => void;\n}\n\nexport interface UseTreeReturnType {\n  /** Determines whether multiple node can be selected at a time */\n  multiple: boolean;\n\n  /** A record of `node.value` and boolean values that represent nodes expanded state */\n  expandedState: TreeExpandedState;\n\n  /** An array of selected nodes values */\n  selectedState: string[];\n\n  /** An array of checked nodes values */\n  checkedState: string[];\n\n  /** A value of the node that was last clicked\n   * Anchor node is used to determine range of selected nodes for multiple selection\n   */\n  anchorNode: string | null;\n\n  /** Initializes tree state based on provided data, called automatically by the Tree component */\n  initialize: (data: TreeNodeData[]) => void;\n\n  /** Toggles expanded state of the node with provided value */\n  toggleExpanded: (value: string) => void;\n\n  /** Collapses node with provided value */\n  collapse: (value: string) => void;\n\n  /** Expands node with provided value */\n  expand: (value: string) => void;\n\n  /** Expands all nodes */\n  expandAllNodes: () => void;\n\n  /** Collapses all nodes */\n  collapseAllNodes: () => void;\n\n  /** Sets expanded state */\n  setExpandedState: (value: TreeExpandedState) => void;\n\n  /** Toggles selected state of the node with provided value */\n  toggleSelected: (value: string) => void;\n\n  /** Selects node with provided value */\n  select: (value: string) => void;\n\n  /** Deselects node with provided value */\n  deselect: (value: string) => void;\n\n  /** Clears selected state */\n  clearSelected: () => void;\n\n  /** Sets selected state */\n  setSelectedState: (value: string[]) => void;\n\n  /** Checks node with provided value */\n  checkNode: (value: string) => void;\n\n  /** Unchecks node with provided value */\n  uncheckNode: (value: string) => void;\n\n  /** Checks all nodes */\n  checkAllNodes: () => void;\n\n  /** Unchecks all nodes */\n  uncheckAllNodes: () => void;\n\n  /** Sets checked state */\n  setCheckedState: (value: string[]) => void;\n\n  /** Returns all checked nodes with status */\n  getCheckedNodes: () => CheckedNodeStatus[];\n\n  /** Returns `true` if node with provided value is checked */\n  isNodeChecked: (value: string) => boolean;\n\n  /** Returns `true` if node with provided value is indeterminate */\n  isNodeIndeterminate: (value: string) => boolean;\n}\n\nexport function useTree({\n  initialSelectedState = [],\n  expandedState,\n  initialCheckedState = [],\n  checkedState,\n  initialExpandedState = {},\n  selectedState,\n  multiple = false,\n  onNodeCollapse,\n  onNodeExpand,\n  onCheckedStateChange,\n  onSelectedStateChange,\n  onExpandedStateChange,\n}: UseTreeInput = {}): UseTreeReturnType {\n  const [data, setData] = useState<TreeNodeData[]>([]);\n  const [_expandedState, setExpandedState] = useUncontrolled({\n    value: expandedState,\n    defaultValue: initialExpandedState,\n    finalValue: {},\n    onChange: onExpandedStateChange,\n  });\n\n  const [_selectedState, setSelectedState] = useUncontrolled({\n    value: selectedState,\n    defaultValue: initialSelectedState,\n    finalValue: [],\n    onChange: onSelectedStateChange,\n  });\n\n  const [_checkedState, setCheckedState] = useUncontrolled({\n    value: checkedState,\n    defaultValue: initialCheckedState,\n    finalValue: [],\n    onChange: onCheckedStateChange,\n  });\n\n  const [anchorNode, setAnchorNode] = useState<string | null>(null);\n\n  const initialize = useCallback(\n    (_data: TreeNodeData[]) => {\n      setExpandedState(getInitialTreeExpandedState(_expandedState, _data, _selectedState));\n      setCheckedState(getInitialCheckedState(_checkedState, _data));\n      setData(_data);\n    },\n    [_selectedState, _checkedState, _expandedState]\n  );\n\n  const toggleExpanded = useCallback(\n    (value: string) => {\n      const nextState = { ..._expandedState, [value]: !_expandedState[value] };\n      nextState[value] ? onNodeExpand?.(value) : onNodeCollapse?.(value);\n      setExpandedState(nextState);\n    },\n    [onNodeCollapse, onNodeExpand, _expandedState]\n  );\n\n  const collapse = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== false) {\n        onNodeCollapse?.(value);\n      }\n\n      setExpandedState({ ..._expandedState, [value]: false });\n    },\n    [onNodeCollapse, _expandedState]\n  );\n\n  const expand = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== true) {\n        onNodeExpand?.(value);\n      }\n\n      setExpandedState({ ..._expandedState, [value]: true });\n    },\n    [onNodeExpand, _expandedState]\n  );\n\n  const expandAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = true;\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState]);\n\n  const collapseAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = false;\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState]);\n\n  const toggleSelected = useCallback(\n    (value: string) => {\n      if (!multiple) {\n        if (_selectedState.includes(value)) {\n          setAnchorNode(null);\n          return [];\n        }\n\n        setAnchorNode(value);\n        return [value];\n      }\n\n      if (_selectedState.includes(value)) {\n        setAnchorNode(null);\n        return _selectedState.filter((item) => item !== value);\n      }\n\n      setAnchorNode(value);\n      setSelectedState([..._selectedState, value]);\n    },\n    [_selectedState]\n  );\n\n  const select = useCallback(\n    (value: string) => {\n      setAnchorNode(value);\n      setSelectedState(\n        multiple\n          ? _selectedState.includes(value)\n            ? _selectedState\n            : [..._selectedState, value]\n          : [value]\n      );\n    },\n    [_selectedState]\n  );\n\n  const deselect = useCallback(\n    (value: string) => {\n      anchorNode === value && setAnchorNode(null);\n      setSelectedState(_selectedState.filter((item) => item !== value));\n    },\n    [_selectedState]\n  );\n\n  const clearSelected = useCallback(() => {\n    setSelectedState([]);\n    setAnchorNode(null);\n  }, []);\n\n  const checkNode = useCallback(\n    (value: string) => {\n      const checkedNodes = getChildrenNodesValues(value, data);\n      setCheckedState(Array.from(new Set([..._checkedState, ...checkedNodes])));\n    },\n    [data, _checkedState]\n  );\n\n  const uncheckNode = useCallback(\n    (value: string) => {\n      const checkedNodes = getChildrenNodesValues(value, data);\n      setCheckedState(_checkedState.filter((item) => !checkedNodes.includes(item)));\n    },\n    [data, _checkedState]\n  );\n\n  const checkAllNodes = useCallback(() => {\n    setCheckedState(getAllChildrenNodes(data));\n  }, [data]);\n\n  const uncheckAllNodes = useCallback(() => {\n    setCheckedState([]);\n  }, []);\n\n  const getCheckedNodes = () => getAllCheckedNodes(data, _checkedState).result;\n  const isNodeChecked = (value: string) => memoizedIsNodeChecked(value, data, _checkedState);\n  const isNodeIndeterminate = (value: string) =>\n    memoizedIsNodeIndeterminate(value, data, _checkedState);\n\n  return {\n    multiple,\n    expandedState: _expandedState,\n    selectedState: _selectedState,\n    checkedState: _checkedState,\n    anchorNode,\n    initialize,\n\n    toggleExpanded,\n    collapse,\n    expand,\n    expandAllNodes,\n    collapseAllNodes,\n    setExpandedState,\n\n    checkNode,\n    uncheckNode,\n    checkAllNodes,\n    uncheckAllNodes,\n    setCheckedState,\n\n    toggleSelected,\n    select,\n    deselect,\n    clearSelected,\n    setSelectedState,\n\n    getCheckedNodes,\n    isNodeChecked,\n    isNodeIndeterminate,\n  };\n}\n\nexport type TreeController = ReturnType<typeof useTree>;\n"],"mappings":"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"}
+{"version":3,"file":"use-tree.cjs","names":["getChildrenNodesValues","findTreeNode","getAllChildrenNodes","getAllCheckedNodes","memoizedIsNodeChecked","memoizedIsNodeIndeterminate"],"sources":["../../../src/components/Tree/use-tree.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  CheckedNodeStatus,\n  getAllCheckedNodes,\n} from './get-all-checked-nodes/get-all-checked-nodes';\nimport {\n  findTreeNode,\n  getAllChildrenNodes,\n  getChildrenNodesValues,\n} from './get-children-nodes-values/get-children-nodes-values';\nimport { memoizedIsNodeChecked } from './is-node-checked/is-node-checked';\nimport { memoizedIsNodeIndeterminate } from './is-node-indeterminate/is-node-indeterminate';\nimport type { TreeNodeData } from './Tree';\n\nexport type TreeExpandedState = Record<string, boolean>;\n\nfunction getInitialTreeExpandedState(\n  initialState: TreeExpandedState,\n  data: TreeNodeData[],\n  value: string | string[] | undefined,\n  acc: TreeExpandedState = {}\n) {\n  data.forEach((node) => {\n    acc[node.value] = node.value in initialState ? initialState[node.value] : node.value === value;\n\n    if (Array.isArray(node.children)) {\n      getInitialTreeExpandedState(initialState, node.children, value, acc);\n    }\n  });\n\n  return acc;\n}\n\nexport function getTreeExpandedState(\n  data: TreeNodeData[],\n  expandedNodesValues: string[] | '*'\n): Record<string, boolean> {\n  const state = getInitialTreeExpandedState({}, data, []);\n\n  if (expandedNodesValues === '*') {\n    const result: Record<string, boolean> = {};\n    const keys = Object.keys(state);\n    for (let i = 0; i < keys.length; i++) {\n      result[keys[i]] = true;\n    }\n    return result;\n  }\n\n  expandedNodesValues.forEach((node) => {\n    state[node] = true;\n  });\n\n  return state;\n}\n\nfunction getInitialCheckedState(\n  initialState: string[],\n  data: TreeNodeData[],\n  checkStrictly: boolean\n) {\n  if (checkStrictly) {\n    return initialState;\n  }\n\n  const acc: string[] = [];\n\n  initialState.forEach((node) => acc.push(...getChildrenNodesValues(node, data)));\n\n  return Array.from(new Set(acc));\n}\n\nfunction getAllNodeValues(data: TreeNodeData[]): string[] {\n  const acc: string[] = [];\n  for (const node of data) {\n    acc.push(node.value);\n    if (Array.isArray(node.children) && node.children.length > 0) {\n      acc.push(...getAllNodeValues(node.children));\n    }\n  }\n  return acc;\n}\n\nexport interface UseTreeInput {\n  /** Initial expanded state of all nodes, uncontrolled state */\n  initialExpandedState?: TreeExpandedState;\n\n  /** Expanded state of all nodes, controlled state */\n  expandedState?: TreeExpandedState;\n\n  /** Called when the tree expanded state changes */\n  onExpandedStateChange?: (expandedState: TreeExpandedState) => void;\n\n  /** Initial selected state of nodes */\n  initialSelectedState?: string[];\n\n  /** Selected state of all nodes, controlled state */\n  selectedState?: string[];\n\n  /** Called when the tree selected state changes */\n  onSelectedStateChange?: (selectedState: string[]) => void;\n\n  /** Initial checked state of nodes */\n  initialCheckedState?: string[];\n\n  /** Checked state of all nodes, controlled state */\n  checkedState?: string[];\n\n  /** Called when the tree checked state changes */\n  onCheckedStateChange?: (checkedState: string[]) => void;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple?: boolean;\n\n  /** Called with the node value when it is expanded */\n  onNodeExpand?: (value: string) => void;\n\n  /** Called with the node value when it is collapsed */\n  onNodeCollapse?: (value: string) => void;\n\n  /** Called when a node with `hasChildren: true` is expanded for the first time.\n   * The callback should update the tree data with loaded children.\n   */\n  onLoadChildren?: (nodeValue: string) => Promise<void>;\n\n  /** When `true`, checking a parent does not affect children and vice versa.\n   * Each node's checked state is fully independent. @default false\n   */\n  checkStrictly?: boolean;\n}\n\nexport interface UseTreeReturnType {\n  /** When `true`, each node's checked state is independent (no parent-child cascading) */\n  checkStrictly: boolean;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple: boolean;\n\n  /** A record of `node.value` and boolean values that represent nodes expanded state */\n  expandedState: TreeExpandedState;\n\n  /** An array of selected nodes values */\n  selectedState: string[];\n\n  /** An array of checked nodes values */\n  checkedState: string[];\n\n  /** A value of the node that was last clicked\n   * Anchor node is used to determine range of selected nodes for multiple selection\n   */\n  anchorNode: string | null;\n\n  /** Initializes tree state based on provided data, called automatically by the Tree component */\n  initialize: (data: TreeNodeData[]) => void;\n\n  /** Toggles expanded state of the node with provided value */\n  toggleExpanded: (value: string) => void;\n\n  /** Collapses node with provided value */\n  collapse: (value: string) => void;\n\n  /** Expands node with provided value */\n  expand: (value: string) => void;\n\n  /** Expands all nodes */\n  expandAllNodes: () => void;\n\n  /** Collapses all nodes */\n  collapseAllNodes: () => void;\n\n  /** Sets expanded state */\n  setExpandedState: (value: TreeExpandedState) => void;\n\n  /** Toggles selected state of the node with provided value */\n  toggleSelected: (value: string) => void;\n\n  /** Selects node with provided value */\n  select: (value: string) => void;\n\n  /** Deselects node with provided value */\n  deselect: (value: string) => void;\n\n  /** Clears selected state */\n  clearSelected: () => void;\n\n  /** Sets selected state */\n  setSelectedState: (value: string[]) => void;\n\n  /** Checks node with provided value */\n  checkNode: (value: string) => void;\n\n  /** Unchecks node with provided value */\n  uncheckNode: (value: string) => void;\n\n  /** Checks all nodes */\n  checkAllNodes: () => void;\n\n  /** Unchecks all nodes */\n  uncheckAllNodes: () => void;\n\n  /** Sets checked state */\n  setCheckedState: (value: string[]) => void;\n\n  /** Returns all checked nodes with status */\n  getCheckedNodes: () => CheckedNodeStatus[];\n\n  /** Returns `true` if node with provided value is checked */\n  isNodeChecked: (value: string) => boolean;\n\n  /** Returns `true` if node with provided value is indeterminate */\n  isNodeIndeterminate: (value: string) => boolean;\n\n  /** Returns `true` if the node's children are currently being loaded */\n  isNodeLoading: (value: string) => boolean;\n\n  /** Returns the error from the last failed load attempt for the given node, or `null` */\n  getNodeLoadError: (value: string) => Error | null;\n\n  /** Programmatically triggers loading of a node's children */\n  loadNode: (value: string) => Promise<void>;\n\n  /** Clears the loaded cache for a node, causing it to re-fetch on next expand */\n  invalidateNode: (value: string) => void;\n}\n\nexport function useTree({\n  initialSelectedState = [],\n  expandedState,\n  initialCheckedState = [],\n  checkedState,\n  initialExpandedState = {},\n  selectedState,\n  multiple = false,\n  onNodeCollapse,\n  onNodeExpand,\n  onCheckedStateChange,\n  onSelectedStateChange,\n  onExpandedStateChange,\n  onLoadChildren,\n  checkStrictly = false,\n}: UseTreeInput = {}): UseTreeReturnType {\n  const [data, setData] = useState<TreeNodeData[]>([]);\n  const [_expandedState, setExpandedState] = useUncontrolled({\n    value: expandedState,\n    defaultValue: initialExpandedState,\n    finalValue: {},\n    onChange: onExpandedStateChange,\n  });\n\n  const [_selectedState, setSelectedState] = useUncontrolled({\n    value: selectedState,\n    defaultValue: initialSelectedState,\n    finalValue: [],\n    onChange: onSelectedStateChange,\n  });\n\n  const [_checkedState, setCheckedState] = useUncontrolled({\n    value: checkedState,\n    defaultValue: initialCheckedState,\n    finalValue: [],\n    onChange: onCheckedStateChange,\n  });\n\n  const [anchorNode, setAnchorNode] = useState<string | null>(null);\n\n  const loadingNodesRef = useRef(new Set<string>());\n  const loadedNodesRef = useRef(new Set<string>());\n  const [loadingNodes, setLoadingNodes] = useState<string[]>([]);\n  const [loadErrors, setLoadErrors] = useState<Record<string, Error>>({});\n\n  const initialize = useCallback(\n    (_data: TreeNodeData[]) => {\n      setExpandedState(getInitialTreeExpandedState(_expandedState, _data, _selectedState));\n      setCheckedState(getInitialCheckedState(_checkedState, _data, checkStrictly));\n      setData(_data);\n    },\n    [_selectedState, _checkedState, _expandedState, checkStrictly]\n  );\n\n  const loadNodeImpl = useCallback(\n    async (value: string) => {\n      if (!onLoadChildren) {\n        return;\n      }\n\n      if (loadingNodesRef.current.has(value) || loadedNodesRef.current.has(value)) {\n        return;\n      }\n\n      loadingNodesRef.current.add(value);\n      setLoadingNodes(Array.from(loadingNodesRef.current));\n      setLoadErrors((prev) => {\n        if (!(value in prev)) {\n          return prev;\n        }\n\n        const next = { ...prev };\n        delete next[value];\n        return next;\n      });\n\n      try {\n        await onLoadChildren(value);\n        loadedNodesRef.current.add(value);\n      } catch (error) {\n        const err = error instanceof Error ? error : new Error(String(error));\n        setLoadErrors((prev) => ({ ...prev, [value]: err }));\n      } finally {\n        loadingNodesRef.current.delete(value);\n        setLoadingNodes(Array.from(loadingNodesRef.current));\n      }\n    },\n    [onLoadChildren]\n  );\n\n  const tryLoadAsync = useCallback(\n    (value: string) => {\n      if (!onLoadChildren) {\n        return;\n      }\n\n      const node = findTreeNode(value, data);\n      if (node && node.hasChildren && !Array.isArray(node.children)) {\n        loadNodeImpl(value);\n      }\n    },\n    [onLoadChildren, data, loadNodeImpl]\n  );\n\n  const toggleExpanded = useCallback(\n    (value: string) => {\n      const nextState = { ..._expandedState, [value]: !_expandedState[value] };\n      nextState[value] ? onNodeExpand?.(value) : onNodeCollapse?.(value);\n      if (nextState[value]) {\n        tryLoadAsync(value);\n      }\n      setExpandedState(nextState);\n    },\n    [onNodeCollapse, onNodeExpand, _expandedState, tryLoadAsync]\n  );\n\n  const collapse = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== false) {\n        onNodeCollapse?.(value);\n      }\n\n      setExpandedState({ ..._expandedState, [value]: false });\n    },\n    [onNodeCollapse, _expandedState]\n  );\n\n  const expand = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== true) {\n        onNodeExpand?.(value);\n      }\n\n      tryLoadAsync(value);\n      setExpandedState({ ..._expandedState, [value]: true });\n    },\n    [onNodeExpand, _expandedState, tryLoadAsync]\n  );\n\n  const expandAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = true;\n      tryLoadAsync(key);\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState, tryLoadAsync]);\n\n  const collapseAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = false;\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState]);\n\n  const toggleSelected = useCallback(\n    (value: string) => {\n      if (!multiple) {\n        if (_selectedState.includes(value)) {\n          setAnchorNode(null);\n          return [];\n        }\n\n        setAnchorNode(value);\n        return [value];\n      }\n\n      if (_selectedState.includes(value)) {\n        setAnchorNode(null);\n        return _selectedState.filter((item) => item !== value);\n      }\n\n      setAnchorNode(value);\n      setSelectedState([..._selectedState, value]);\n    },\n    [_selectedState]\n  );\n\n  const select = useCallback(\n    (value: string) => {\n      setAnchorNode(value);\n      setSelectedState(\n        multiple\n          ? _selectedState.includes(value)\n            ? _selectedState\n            : [..._selectedState, value]\n          : [value]\n      );\n    },\n    [_selectedState]\n  );\n\n  const deselect = useCallback(\n    (value: string) => {\n      anchorNode === value && setAnchorNode(null);\n      setSelectedState(_selectedState.filter((item) => item !== value));\n    },\n    [_selectedState]\n  );\n\n  const clearSelected = useCallback(() => {\n    setSelectedState([]);\n    setAnchorNode(null);\n  }, []);\n\n  const checkNode = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        if (!_checkedState.includes(value)) {\n          setCheckedState([..._checkedState, value]);\n        }\n      } else {\n        const checkedNodes = getChildrenNodesValues(value, data);\n        setCheckedState(Array.from(new Set([..._checkedState, ...checkedNodes])));\n      }\n    },\n    [data, _checkedState, checkStrictly]\n  );\n\n  const uncheckNode = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        setCheckedState(_checkedState.filter((item) => item !== value));\n      } else {\n        const checkedNodes = getChildrenNodesValues(value, data);\n        setCheckedState(_checkedState.filter((item) => !checkedNodes.includes(item)));\n      }\n    },\n    [data, _checkedState, checkStrictly]\n  );\n\n  const checkAllNodes = useCallback(() => {\n    if (checkStrictly) {\n      setCheckedState(getAllNodeValues(data));\n    } else {\n      setCheckedState(getAllChildrenNodes(data));\n    }\n  }, [data, checkStrictly]);\n\n  const uncheckAllNodes = useCallback(() => {\n    setCheckedState([]);\n  }, []);\n\n  const getCheckedNodes = useCallback((): CheckedNodeStatus[] => {\n    if (checkStrictly) {\n      return _checkedState.map((value) => {\n        const node = findTreeNode(value, data);\n        return {\n          checked: true,\n          indeterminate: false,\n          value,\n          hasChildren: node\n            ? (Array.isArray(node.children) && node.children.length > 0) || !!node.hasChildren\n            : false,\n        };\n      });\n    }\n    return getAllCheckedNodes(data, _checkedState).result;\n  }, [checkStrictly, _checkedState, data]);\n\n  const isNodeChecked = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        return _checkedState.includes(value);\n      }\n      return memoizedIsNodeChecked(value, data, _checkedState);\n    },\n    [checkStrictly, _checkedState, data]\n  );\n\n  const isNodeIndeterminate = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        return false;\n      }\n      return memoizedIsNodeIndeterminate(value, data, _checkedState);\n    },\n    [checkStrictly, _checkedState, data]\n  );\n\n  const isNodeLoading = useCallback(\n    (value: string) => loadingNodes.includes(value),\n    [loadingNodes]\n  );\n\n  const getNodeLoadError = useCallback((value: string) => loadErrors[value] || null, [loadErrors]);\n\n  const invalidateNode = useCallback((value: string) => {\n    loadedNodesRef.current.delete(value);\n    setLoadErrors((prev) => {\n      if (!(value in prev)) {\n        return prev;\n      }\n\n      const next = { ...prev };\n      delete next[value];\n      return next;\n    });\n  }, []);\n\n  return useMemo(\n    () => ({\n      checkStrictly,\n      multiple,\n      expandedState: _expandedState,\n      selectedState: _selectedState,\n      checkedState: _checkedState,\n      anchorNode,\n      initialize,\n\n      toggleExpanded,\n      collapse,\n      expand,\n      expandAllNodes,\n      collapseAllNodes,\n      setExpandedState,\n\n      checkNode,\n      uncheckNode,\n      checkAllNodes,\n      uncheckAllNodes,\n      setCheckedState,\n\n      toggleSelected,\n      select,\n      deselect,\n      clearSelected,\n      setSelectedState,\n\n      getCheckedNodes,\n      isNodeChecked,\n      isNodeIndeterminate,\n\n      isNodeLoading,\n      getNodeLoadError,\n      loadNode: loadNodeImpl,\n      invalidateNode,\n    }),\n    [\n      checkStrictly,\n      multiple,\n      _expandedState,\n      _selectedState,\n      _checkedState,\n      anchorNode,\n      initialize,\n      toggleExpanded,\n      collapse,\n      expand,\n      expandAllNodes,\n      collapseAllNodes,\n      setExpandedState,\n      checkNode,\n      uncheckNode,\n      checkAllNodes,\n      uncheckAllNodes,\n      setCheckedState,\n      toggleSelected,\n      select,\n      deselect,\n      clearSelected,\n      setSelectedState,\n      getCheckedNodes,\n      isNodeChecked,\n      isNodeIndeterminate,\n      isNodeLoading,\n      getNodeLoadError,\n      loadNodeImpl,\n      invalidateNode,\n    ]\n  );\n}\n\nexport type TreeController = ReturnType<typeof useTree>;\n"],"mappings":"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"}

package/cjs/core/Box/Box.cjs

@@ -4,6 +4,7 @@ const require_is_number_like = require("../utils/is-number-like/is-number-like.c
 const require_Mantine_context = require("../MantineProvider/Mantine.context.cjs");
 const require_MantineThemeProvider = require("../MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
 const require_InlineStyles = require("../InlineStyles/InlineStyles.cjs");
+const require_hash_styles = require("../InlineStyles/hash-styles.cjs");
 const require_extract_style_props = require("./style-props/extract-style-props/extract-style-props.cjs");
 const require_style_props_data = require("./style-props/style-props-data.cjs");
 const require_parse_style_props = require("./style-props/parse-style-props/parse-style-props.cjs");
@@ -20,12 +21,14 @@ function _Box({ component, style, __vars, className, variant, mod, size, hiddenF
 	const Element = component || "div";
 	const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
 	const transformedSx = require_Mantine_context.useMantineSxTransform()?.()?.(styleProps.sx);
-	const responsiveClassName = require_use_random_classname.useRandomClassName();
+	const randomClassName = require_use_random_classname.useRandomClassName();
 	const parsedStyleProps = require_parse_style_props.parseStyleProps({
 		styleProps,
 		theme,
 		data: require_style_props_data.STYlE_PROPS_DATA
 	});
+	const deduplicateInlineStyles = require_Mantine_context.useMantineDeduplicateInlineStyles();
+	const responsiveClassName = deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles ? require_hash_styles.hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media) : randomClassName;
 	const props = {
 		ref,
 		style: require_get_box_style.getBoxStyle({
@@ -50,7 +53,8 @@ function _Box({ component, style, __vars, className, variant, mod, size, hiddenF
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
 		selector: `.${responsiveClassName}`,
 		styles: parsedStyleProps.styles,
-		media: parsedStyleProps.media
+		media: parsedStyleProps.media,
+		deduplicate: deduplicateInlineStyles
 	}), typeof renderRoot === "function" ? renderRoot(props) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, { ...props })] });
 }
 _Box.displayName = "@mantine/core/Box";

package/cjs/core/Box/Box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs","names":["useMantineTheme","extractStyleProps","useMantineSxTransform","useRandomClassName","parseStyleProps","STYlE_PROPS_DATA","getBoxStyle","isNumberLike","getBoxMod","InlineStyles","polymorphic"],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { InlineStyles } from '../InlineStyles';\nimport { MantineBreakpoint, useMantineSxTransform, useMantineTheme } 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 responsiveClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\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        />\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":";;;;;;;;;;;;;;;;;AA6DA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQA,6BAAAA,iBAAiB;CAC/B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CAEtD,MAAM,gBADiBC,wBAAAA,uBAAuB,IACN,GAAG,WAAW,GAAG;CACzD,MAAM,sBAAsBC,6BAAAA,oBAAoB;CAChD,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC;EACA;EACA,MAAMC,yBAAAA;EACP,CAAC;CAEF,MAAM,QAAQ;EACZ;EACA,OAAOC,sBAAAA,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;GAC9B,CAAC;EACF,YAAA,GAAA,KAAA,SAAc,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;GAC1C,CAAC;EACF,gBAAgB;EAChB,aAAaC,uBAAAA,aAAa,KAAK,GAAG,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAGC,oBAAAA,UAAU,IAAI;EACjB,GAAG;EACJ;AAED,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,CAAA,EAGH,OAAO,eAAe,aAAa,WAAW,MAAM,GAAG,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAS,GAAI,OAAS,CAAA,CAC7E,EAAA,CAAA;;AAIP,KAAK,cAAc;AAEnB,MAAa,MAAMC,qCAAAA,YAAsC,KAAK"}
+{"version":3,"file":"Box.cjs","names":["useMantineTheme","extractStyleProps","useMantineSxTransform","useRandomClassName","parseStyleProps","STYlE_PROPS_DATA","useMantineDeduplicateInlineStyles","hashStyleProps","getBoxStyle","isNumberLike","getBoxMod","InlineStyles","polymorphic"],"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,QAAQA,6BAAAA,iBAAiB;CAC/B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CAEtD,MAAM,gBADiBC,wBAAAA,uBAAuB,IACN,GAAG,WAAW,GAAG;CACzD,MAAM,kBAAkBC,6BAAAA,oBAAoB;CAC5C,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC;EACA;EACA,MAAMC,yBAAAA;EACP,CAAC;CAEF,MAAM,0BAA0BC,wBAAAA,mCAAmC;CACnE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxCC,oBAAAA,eAAe,iBAAiB,QAAQ,iBAAiB,MAAM,GAC/D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAOC,sBAAAA,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;GAC9B,CAAC;EACF,YAAA,GAAA,KAAA,SAAc,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;GAC1C,CAAC;EACF,gBAAgB;EAChB,aAAaC,uBAAAA,aAAa,KAAK,GAAG,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAGC,oBAAAA,UAAU,IAAI;EACjB,GAAG;EACJ;AAED,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;EACb,CAAA,EAGH,OAAO,eAAe,aAAa,WAAW,MAAM,GAAG,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAS,GAAI,OAAS,CAAA,CAC7E,EAAA,CAAA;;AAIP,KAAK,cAAc;AAEnB,MAAa,MAAMC,qCAAAA,YAAsC,KAAK"}

package/cjs/core/InlineStyles/InlineStyles.cjs

@@ -4,12 +4,24 @@ const require_Mantine_context = require("../MantineProvider/Mantine.context.cjs"
 const require_styles_to_string = require("./styles-to-string/styles-to-string.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/core/InlineStyles/InlineStyles.tsx
-function InlineStyles(props) {
+function simpleHash(str) {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i) & 4294967295;
+	return (hash >>> 0).toString(36);
+}
+function InlineStyles({ deduplicate, ...props }) {
 	const nonce = require_Mantine_context.useMantineStyleNonce();
+	const css = require_styles_to_string.stylesToString(props);
+	if (deduplicate) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
+		href: `mantine-${simpleHash(css)}`,
+		precedence: "mantine",
+		nonce: nonce?.(),
+		children: css
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
 		"data-mantine-styles": "inline",
 		nonce: nonce?.(),
-		dangerouslySetInnerHTML: { __html: require_styles_to_string.stylesToString(props) }
+		dangerouslySetInnerHTML: { __html: css }
 	});
 }
 //#endregion

package/cjs/core/InlineStyles/InlineStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineStyles.cjs","names":["useMantineStyleNonce","stylesToString"],"sources":["../../../src/core/InlineStyles/InlineStyles.tsx"],"sourcesContent":["import { useMantineStyleNonce } from '../MantineProvider';\nimport { InlineStylesInput, stylesToString } from './styles-to-string/styles-to-string';\n\nexport interface InlineStylesProps\n  extends InlineStylesInput, Omit<React.ComponentProps<'style'>, keyof InlineStylesInput> {}\n\nexport function InlineStyles(props: InlineStylesInput) {\n  const nonce = useMantineStyleNonce();\n  return (\n    <style\n      data-mantine-styles=\"inline\"\n      nonce={nonce?.()}\n      dangerouslySetInnerHTML={{ __html: stylesToString(props) }}\n    />\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,aAAa,OAA0B;CACrD,MAAM,QAAQA,wBAAAA,sBAAsB;AACpC,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,uBAAoB;EACpB,OAAO,SAAS;EAChB,yBAAyB,EAAE,QAAQC,yBAAAA,eAAe,MAAM,EAAE;EAC1D,CAAA"}
+{"version":3,"file":"InlineStyles.cjs","names":["useMantineStyleNonce","stylesToString"],"sources":["../../../src/core/InlineStyles/InlineStyles.tsx"],"sourcesContent":["import { useMantineStyleNonce } from '../MantineProvider';\nimport { InlineStylesInput, stylesToString } from './styles-to-string/styles-to-string';\n\nexport interface InlineStylesProps\n  extends InlineStylesInput, Omit<React.ComponentProps<'style'>, keyof InlineStylesInput> {\n  deduplicate?: boolean;\n}\n\nfunction simpleHash(str: string): string {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = ((hash << 5) + hash + str.charCodeAt(i)) & 0xffffffff;\n  }\n  return (hash >>> 0).toString(36);\n}\n\nexport function InlineStyles({ deduplicate, ...props }: InlineStylesProps) {\n  const nonce = useMantineStyleNonce();\n  const css = stylesToString(props);\n\n  if (deduplicate) {\n    return (\n      <style href={`mantine-${simpleHash(css)}`} precedence=\"mantine\" nonce={nonce?.()}>\n        {css}\n      </style>\n    );\n  }\n\n  return (\n    <style\n      data-mantine-styles=\"inline\"\n      nonce={nonce?.()}\n      dangerouslySetInnerHTML={{ __html: css }}\n    />\n  );\n}\n"],"mappings":";;;;;;AAQA,SAAS,WAAW,KAAqB;CACvC,IAAI,OAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAC9B,SAAS,QAAQ,KAAK,OAAO,IAAI,WAAW,EAAE,GAAI;AAEpD,SAAQ,SAAS,GAAG,SAAS,GAAG;;AAGlC,SAAgB,aAAa,EAAE,aAAa,GAAG,SAA4B;CACzE,MAAM,QAAQA,wBAAAA,sBAAsB;CACpC,MAAM,MAAMC,yBAAAA,eAAe,MAAM;AAEjC,KAAI,YACF,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,MAAM,WAAW,WAAW,IAAI;EAAI,YAAW;EAAU,OAAO,SAAS;YAC7E;EACK,CAAA;AAIZ,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,uBAAoB;EACpB,OAAO,SAAS;EAChB,yBAAyB,EAAE,QAAQ,KAAK;EACxC,CAAA"}

package/cjs/core/InlineStyles/hash-styles.cjs

@@ -0,0 +1,15 @@
+"use client";
+const require_css_object_to_string = require("./css-object-to-string/css-object-to-string.cjs");
+//#region packages/@mantine/core/src/core/InlineStyles/hash-styles.ts
+function djb2Hash(str) {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i) & 4294967295;
+	return (hash >>> 0).toString(36);
+}
+function hashStyleProps(styles, media) {
+	return `__mdi__-${djb2Hash(`${styles ? require_css_object_to_string.cssObjectToString(styles) : ""}|${Array.isArray(media) ? media.map((m) => `${m.query}:${require_css_object_to_string.cssObjectToString(m.styles)}`).join("|") : ""}`)}`;
+}
+//#endregion
+exports.hashStyleProps = hashStyleProps;
+
+//# sourceMappingURL=hash-styles.cjs.map

package/cjs/core/InlineStyles/hash-styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash-styles.cjs","names":["cssObjectToString"],"sources":["../../../src/core/InlineStyles/hash-styles.ts"],"sourcesContent":["import { cssObjectToString } from './css-object-to-string/css-object-to-string';\nimport type { InlineStylesMediaQuery } from './styles-to-string/styles-to-string';\n\nfunction djb2Hash(str: string): string {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = ((hash << 5) + hash + str.charCodeAt(i)) & 0xffffffff;\n  }\n  return (hash >>> 0).toString(36);\n}\n\nexport function hashStyleProps(\n  styles: React.CSSProperties | undefined,\n  media: InlineStylesMediaQuery[] | undefined\n): string {\n  const stylesStr = styles ? cssObjectToString(styles) : '';\n  const mediaStr = Array.isArray(media)\n    ? media.map((m) => `${m.query}:${cssObjectToString(m.styles)}`).join('|')\n    : '';\n  return `__mdi__-${djb2Hash(`${stylesStr}|${mediaStr}`)}`;\n}\n"],"mappings":";;;AAGA,SAAS,SAAS,KAAqB;CACrC,IAAI,OAAO;AACX,MAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAC9B,SAAS,QAAQ,KAAK,OAAO,IAAI,WAAW,EAAE,GAAI;AAEpD,SAAQ,SAAS,GAAG,SAAS,GAAG;;AAGlC,SAAgB,eACd,QACA,OACQ;AAKR,QAAO,WAAW,SAAS,GAJT,SAASA,6BAAAA,kBAAkB,OAAO,GAAG,GAIf,GAHvB,MAAM,QAAQ,MAAM,GACjC,MAAM,KAAK,MAAM,GAAG,EAAE,MAAM,GAAGA,6BAAAA,kBAAkB,EAAE,OAAO,GAAG,CAAC,KAAK,IAAI,GACvE,KACkD"}

package/cjs/core/MantineProvider/Mantine.context.cjs

@@ -32,11 +32,15 @@ function useMantineStylesTransform() {
 function useMantineEnv() {
 	return useMantineContext().env || "default";
 }
+function useMantineDeduplicateInlineStyles() {
+	return useMantineContext().deduplicateInlineStyles;
+}
 //#endregion
 exports.MantineContext = MantineContext;
 exports.useMantineClassNamesPrefix = useMantineClassNamesPrefix;
 exports.useMantineContext = useMantineContext;
 exports.useMantineCssVariablesResolver = useMantineCssVariablesResolver;
+exports.useMantineDeduplicateInlineStyles = useMantineDeduplicateInlineStyles;
 exports.useMantineEnv = useMantineEnv;
 exports.useMantineIsHeadless = useMantineIsHeadless;
 exports.useMantineStyleNonce = useMantineStyleNonce;

package/cjs/core/MantineProvider/Mantine.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Mantine.context.cjs","names":[],"sources":["../../../src/core/MantineProvider/Mantine.context.ts"],"sourcesContent":["import { createContext, use } from 'react';\nimport { ConvertCSSVariablesInput } from './convert-css-variables';\nimport type { MantineColorScheme, MantineTheme } from './theme.types';\n\nexport interface MantineStylesTransform {\n  sx?: () => (sx: any) => string;\n  styles?: () => (styles: any, payload: any) => Record<string, string>;\n}\n\ninterface MantineContextValue {\n  colorScheme: MantineColorScheme;\n  setColorScheme: (colorScheme: MantineColorScheme) => void;\n  clearColorScheme: () => void;\n  getRootElement: () => HTMLElement | undefined;\n  classNamesPrefix: string;\n  getStyleNonce?: () => string | undefined;\n  cssVariablesResolver?: (theme: MantineTheme) => ConvertCSSVariablesInput;\n  cssVariablesSelector: string;\n  withStaticClasses: boolean;\n  headless?: boolean;\n  stylesTransform?: MantineStylesTransform;\n  env?: 'default' | 'test';\n}\n\nexport const MantineContext = createContext<MantineContextValue | null>(null);\n\nexport function useMantineContext() {\n  const ctx = use(MantineContext);\n\n  if (!ctx) {\n    throw new Error('[@mantine/core] MantineProvider was not found in tree');\n  }\n\n  return ctx;\n}\n\nexport function useMantineCssVariablesResolver() {\n  return useMantineContext().cssVariablesResolver;\n}\n\nexport function useMantineClassNamesPrefix() {\n  return useMantineContext().classNamesPrefix;\n}\n\nexport function useMantineStyleNonce() {\n  return useMantineContext().getStyleNonce;\n}\n\nexport function useMantineWithStaticClasses() {\n  return useMantineContext().withStaticClasses;\n}\n\nexport function useMantineIsHeadless() {\n  return useMantineContext().headless;\n}\n\nexport function useMantineSxTransform() {\n  return useMantineContext().stylesTransform?.sx;\n}\n\nexport function useMantineStylesTransform() {\n  return useMantineContext().stylesTransform?.styles;\n}\n\nexport function useMantineEnv() {\n  return useMantineContext().env || 'default';\n}\n"],"mappings":";;;;AAwBA,MAAa,kBAAA,GAAA,MAAA,eAA2D,KAAK;AAE7E,SAAgB,oBAAoB;CAClC,MAAM,OAAA,GAAA,MAAA,KAAU,eAAe;AAE/B,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,wDAAwD;AAG1E,QAAO;;AAGT,SAAgB,iCAAiC;AAC/C,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,6BAA6B;AAC3C,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,uBAAuB;AACrC,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,8BAA8B;AAC5C,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,uBAAuB;AACrC,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,wBAAwB;AACtC,QAAO,mBAAmB,CAAC,iBAAiB;;AAG9C,SAAgB,4BAA4B;AAC1C,QAAO,mBAAmB,CAAC,iBAAiB;;AAG9C,SAAgB,gBAAgB;AAC9B,QAAO,mBAAmB,CAAC,OAAO"}
+{"version":3,"file":"Mantine.context.cjs","names":[],"sources":["../../../src/core/MantineProvider/Mantine.context.ts"],"sourcesContent":["import { createContext, use } from 'react';\nimport { ConvertCSSVariablesInput } from './convert-css-variables';\nimport type { MantineColorScheme, MantineTheme } from './theme.types';\n\nexport interface MantineStylesTransform {\n  sx?: () => (sx: any) => string;\n  styles?: () => (styles: any, payload: any) => Record<string, string>;\n}\n\ninterface MantineContextValue {\n  colorScheme: MantineColorScheme;\n  setColorScheme: (colorScheme: MantineColorScheme) => void;\n  clearColorScheme: () => void;\n  getRootElement: () => HTMLElement | undefined;\n  classNamesPrefix: string;\n  getStyleNonce?: () => string | undefined;\n  cssVariablesResolver?: (theme: MantineTheme) => ConvertCSSVariablesInput;\n  cssVariablesSelector: string;\n  withStaticClasses: boolean;\n  headless?: boolean;\n  stylesTransform?: MantineStylesTransform;\n  env?: 'default' | 'test';\n  deduplicateInlineStyles?: boolean;\n}\n\nexport const MantineContext = createContext<MantineContextValue | null>(null);\n\nexport function useMantineContext() {\n  const ctx = use(MantineContext);\n\n  if (!ctx) {\n    throw new Error('[@mantine/core] MantineProvider was not found in tree');\n  }\n\n  return ctx;\n}\n\nexport function useMantineCssVariablesResolver() {\n  return useMantineContext().cssVariablesResolver;\n}\n\nexport function useMantineClassNamesPrefix() {\n  return useMantineContext().classNamesPrefix;\n}\n\nexport function useMantineStyleNonce() {\n  return useMantineContext().getStyleNonce;\n}\n\nexport function useMantineWithStaticClasses() {\n  return useMantineContext().withStaticClasses;\n}\n\nexport function useMantineIsHeadless() {\n  return useMantineContext().headless;\n}\n\nexport function useMantineSxTransform() {\n  return useMantineContext().stylesTransform?.sx;\n}\n\nexport function useMantineStylesTransform() {\n  return useMantineContext().stylesTransform?.styles;\n}\n\nexport function useMantineEnv() {\n  return useMantineContext().env || 'default';\n}\n\nexport function useMantineDeduplicateInlineStyles() {\n  return useMantineContext().deduplicateInlineStyles;\n}\n"],"mappings":";;;;AAyBA,MAAa,kBAAA,GAAA,MAAA,eAA2D,KAAK;AAE7E,SAAgB,oBAAoB;CAClC,MAAM,OAAA,GAAA,MAAA,KAAU,eAAe;AAE/B,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,wDAAwD;AAG1E,QAAO;;AAGT,SAAgB,iCAAiC;AAC/C,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,6BAA6B;AAC3C,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,uBAAuB;AACrC,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,8BAA8B;AAC5C,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,uBAAuB;AACrC,QAAO,mBAAmB,CAAC;;AAG7B,SAAgB,wBAAwB;AACtC,QAAO,mBAAmB,CAAC,iBAAiB;;AAG9C,SAAgB,4BAA4B;AAC1C,QAAO,mBAAmB,CAAC,iBAAiB;;AAG9C,SAAgB,gBAAgB;AAC9B,QAAO,mBAAmB,CAAC,OAAO;;AAGpC,SAAgB,oCAAoC;AAClD,QAAO,mBAAmB,CAAC"}

package/cjs/core/MantineProvider/MantineProvider.cjs

@@ -12,7 +12,7 @@ const require_MantineCssVariables = require("./MantineCssVariables/MantineCssVar
 const require_use_respect_reduce_motion = require("./use-respect-reduce-motion/use-respect-reduce-motion.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/core/MantineProvider/MantineProvider.tsx
-function MantineProvider({ theme, children, getStyleNonce, withStaticClasses = true, withGlobalClasses = true, deduplicateCssVariables = true, withCssVariables = true, cssVariablesSelector, classNamesPrefix = "mantine", colorSchemeManager = require_local_storage_manager.localStorageColorSchemeManager(), defaultColorScheme = "light", getRootElement = () => document.documentElement, cssVariablesResolver, forceColorScheme, stylesTransform, env }) {
+function MantineProvider({ theme, children, getStyleNonce, withStaticClasses = true, withGlobalClasses = true, deduplicateCssVariables = true, withCssVariables = true, cssVariablesSelector, classNamesPrefix = "mantine", colorSchemeManager = require_local_storage_manager.localStorageColorSchemeManager(), defaultColorScheme = "light", getRootElement = () => document.documentElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, deduplicateInlineStyles = false }) {
 	const { colorScheme, setColorScheme, clearColorScheme } = require_use_provider_color_scheme.useProviderColorScheme({
 		defaultColorScheme,
 		forceColorScheme,
@@ -35,7 +35,8 @@ function MantineProvider({ theme, children, getStyleNonce, withStaticClasses = t
 			cssVariablesSelector: cssVariablesSelector ?? ":root",
 			withStaticClasses,
 			stylesTransform,
-			env
+			env,
+			deduplicateInlineStyles
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_MantineThemeProvider.MantineThemeProvider, {
 			theme,

package/cjs/core/MantineProvider/MantineProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MantineProvider.cjs","names":["localStorageColorSchemeManager","useProviderColorScheme","MantineContext","MantineThemeProvider","MantineCssVariables","MantineClasses"],"sources":["../../../src/core/MantineProvider/MantineProvider.tsx"],"sourcesContent":["import './baseline.css';\nimport './global.css';\nimport './default-css-variables.css';\n\nimport { localStorageColorSchemeManager, MantineColorSchemeManager } from './color-scheme-managers';\nimport { MantineContext, MantineStylesTransform } from './Mantine.context';\nimport { MantineClasses } from './MantineClasses';\nimport { CSSVariablesResolver, MantineCssVariables } from './MantineCssVariables';\nimport { MantineThemeProvider } from './MantineThemeProvider';\nimport type { MantineColorScheme, MantineThemeOverride } from './theme.types';\nimport { useProviderColorScheme } from './use-mantine-color-scheme';\nimport { useRespectReduceMotion } from './use-respect-reduce-motion';\n\nexport interface MantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */\n  colorSchemeManager?: MantineColorSchemeManager;\n\n  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `light` by default */\n  defaultColorScheme?: MantineColorScheme;\n\n  /** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */\n  forceColorScheme?: 'light' | 'dark';\n\n  /** CSS selector to which CSS variables should be added, by default variables are applied to `:root` and `:host` */\n  cssVariablesSelector?: string;\n\n  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector` @default true */\n  withCssVariables?: boolean;\n\n  /** Determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. @default true. */\n  deduplicateCssVariables?: boolean;\n\n  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */\n  getRootElement?: () => HTMLElement | undefined;\n\n  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */\n  classNamesPrefix?: string;\n\n  /** Function to generate nonce attribute added to all generated `style` tags */\n  getStyleNonce?: () => string;\n\n  /** Function to generate CSS variables based on theme object */\n  cssVariablesResolver?: CSSVariablesResolver;\n\n  /** Determines whether components should have static classes, for example, `mantine-Button-root`. @default true */\n  withStaticClasses?: boolean;\n\n  /** Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. @default true. */\n  withGlobalClasses?: boolean;\n\n  /** An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries */\n  stylesTransform?: MantineStylesTransform;\n\n  /** Your application */\n  children?: React.ReactNode;\n\n  /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */\n  env?: 'default' | 'test';\n}\n\nexport function MantineProvider({\n  theme,\n  children,\n  getStyleNonce,\n  withStaticClasses = true,\n  withGlobalClasses = true,\n  deduplicateCssVariables = true,\n  withCssVariables = true,\n  cssVariablesSelector,\n  classNamesPrefix = 'mantine',\n  colorSchemeManager = localStorageColorSchemeManager(),\n  defaultColorScheme = 'light',\n  getRootElement = () => document.documentElement,\n  cssVariablesResolver,\n  forceColorScheme,\n  stylesTransform,\n  env,\n}: MantineProviderProps) {\n  const { colorScheme, setColorScheme, clearColorScheme } = useProviderColorScheme({\n    defaultColorScheme,\n    forceColorScheme,\n    manager: colorSchemeManager,\n    getRootElement,\n  });\n\n  useRespectReduceMotion({\n    respectReducedMotion: theme?.respectReducedMotion || false,\n    getRootElement,\n  });\n\n  return (\n    <MantineContext\n      value={{\n        colorScheme,\n        setColorScheme,\n        clearColorScheme,\n        getRootElement,\n        classNamesPrefix,\n        getStyleNonce,\n        cssVariablesResolver,\n        cssVariablesSelector: cssVariablesSelector ?? ':root',\n        withStaticClasses,\n        stylesTransform,\n        env,\n      }}\n    >\n      <MantineThemeProvider theme={theme}>\n        {withCssVariables && (\n          <MantineCssVariables\n            cssVariablesSelector={cssVariablesSelector}\n            deduplicateCssVariables={deduplicateCssVariables}\n          />\n        )}\n        {withGlobalClasses && <MantineClasses />}\n        {children}\n      </MantineThemeProvider>\n    </MantineContext>\n  );\n}\n\nMantineProvider.displayName = '@mantine/core/MantineProvider';\n\nexport interface HeadlessMantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Your application */\n  children?: React.ReactNode;\n\n  /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */\n  env?: 'default' | 'test';\n}\n\nexport function HeadlessMantineProvider({ children, theme, env }: HeadlessMantineProviderProps) {\n  return (\n    <MantineContext\n      value={{\n        colorScheme: 'auto',\n        setColorScheme: () => {},\n        clearColorScheme: () => {},\n        getRootElement: () => document.documentElement,\n        classNamesPrefix: 'mantine',\n        cssVariablesSelector: ':root',\n        withStaticClasses: false,\n        headless: true,\n        env,\n      }}\n    >\n      <MantineThemeProvider theme={theme}>{children}</MantineThemeProvider>\n    </MantineContext>\n  );\n}\n\nHeadlessMantineProvider.displayName = '@mantine/core/HeadlessMantineProvider';\n"],"mappings":";;;;;;;;;;;;;;AA+DA,SAAgB,gBAAgB,EAC9B,OACA,UACA,eACA,oBAAoB,MACpB,oBAAoB,MACpB,0BAA0B,MAC1B,mBAAmB,MACnB,sBACA,mBAAmB,WACnB,qBAAqBA,8BAAAA,gCAAgC,EACrD,qBAAqB,SACrB,uBAAuB,SAAS,iBAChC,sBACA,kBACA,iBACA,OACuB;CACvB,MAAM,EAAE,aAAa,gBAAgB,qBAAqBC,kCAAAA,uBAAuB;EAC/E;EACA;EACA,SAAS;EACT;EACD,CAAC;AAEF,mCAAA,uBAAuB;EACrB,sBAAsB,OAAO,wBAAwB;EACrD;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,gBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA,sBAAsB,wBAAwB;GAC9C;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,MAACC,6BAAAA,sBAAD;GAA6B;aAA7B;IACG,oBACC,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;KACwB;KACG;KACzB,CAAA;IAEH,qBAAqB,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD,EAAkB,CAAA;IACvC;IACoB;;EACR,CAAA;;AAIrB,gBAAgB,cAAc;AAa9B,SAAgB,wBAAwB,EAAE,UAAU,OAAO,OAAqC;AAC9F,QACE,iBAAA,GAAA,kBAAA,KAACH,wBAAAA,gBAAD;EACE,OAAO;GACL,aAAa;GACb,sBAAsB;GACtB,wBAAwB;GACxB,sBAAsB,SAAS;GAC/B,kBAAkB;GAClB,sBAAsB;GACtB,mBAAmB;GACnB,UAAU;GACV;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,6BAAAA,sBAAD;GAA6B;GAAQ;GAAgC,CAAA;EACtD,CAAA;;AAIrB,wBAAwB,cAAc"}
+{"version":3,"file":"MantineProvider.cjs","names":["localStorageColorSchemeManager","useProviderColorScheme","MantineContext","MantineThemeProvider","MantineCssVariables","MantineClasses"],"sources":["../../../src/core/MantineProvider/MantineProvider.tsx"],"sourcesContent":["import './baseline.css';\nimport './global.css';\nimport './default-css-variables.css';\n\nimport { localStorageColorSchemeManager, MantineColorSchemeManager } from './color-scheme-managers';\nimport { MantineContext, MantineStylesTransform } from './Mantine.context';\nimport { MantineClasses } from './MantineClasses';\nimport { CSSVariablesResolver, MantineCssVariables } from './MantineCssVariables';\nimport { MantineThemeProvider } from './MantineThemeProvider';\nimport type { MantineColorScheme, MantineThemeOverride } from './theme.types';\nimport { useProviderColorScheme } from './use-mantine-color-scheme';\nimport { useRespectReduceMotion } from './use-respect-reduce-motion';\n\nexport interface MantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */\n  colorSchemeManager?: MantineColorSchemeManager;\n\n  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `light` by default */\n  defaultColorScheme?: MantineColorScheme;\n\n  /** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */\n  forceColorScheme?: 'light' | 'dark';\n\n  /** CSS selector to which CSS variables should be added, by default variables are applied to `:root` and `:host` */\n  cssVariablesSelector?: string;\n\n  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector` @default true */\n  withCssVariables?: boolean;\n\n  /** Determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. @default true. */\n  deduplicateCssVariables?: boolean;\n\n  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */\n  getRootElement?: () => HTMLElement | undefined;\n\n  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */\n  classNamesPrefix?: string;\n\n  /** Function to generate nonce attribute added to all generated `style` tags */\n  getStyleNonce?: () => string;\n\n  /** Function to generate CSS variables based on theme object */\n  cssVariablesResolver?: CSSVariablesResolver;\n\n  /** Determines whether components should have static classes, for example, `mantine-Button-root`. @default true */\n  withStaticClasses?: boolean;\n\n  /** Determines whether global classes should be added with `<style />` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. @default true. */\n  withGlobalClasses?: boolean;\n\n  /** An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries */\n  stylesTransform?: MantineStylesTransform;\n\n  /** Determines whether inline styles with identical content should be deduplicated using React 19 style hoisting. When enabled, components with the same responsive style props share a single `<style />` tag instead of each generating their own. @default false */\n  deduplicateInlineStyles?: boolean;\n\n  /** Your application */\n  children?: React.ReactNode;\n\n  /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */\n  env?: 'default' | 'test';\n}\n\nexport function MantineProvider({\n  theme,\n  children,\n  getStyleNonce,\n  withStaticClasses = true,\n  withGlobalClasses = true,\n  deduplicateCssVariables = true,\n  withCssVariables = true,\n  cssVariablesSelector,\n  classNamesPrefix = 'mantine',\n  colorSchemeManager = localStorageColorSchemeManager(),\n  defaultColorScheme = 'light',\n  getRootElement = () => document.documentElement,\n  cssVariablesResolver,\n  forceColorScheme,\n  stylesTransform,\n  env,\n  deduplicateInlineStyles = false,\n}: MantineProviderProps) {\n  const { colorScheme, setColorScheme, clearColorScheme } = useProviderColorScheme({\n    defaultColorScheme,\n    forceColorScheme,\n    manager: colorSchemeManager,\n    getRootElement,\n  });\n\n  useRespectReduceMotion({\n    respectReducedMotion: theme?.respectReducedMotion || false,\n    getRootElement,\n  });\n\n  return (\n    <MantineContext\n      value={{\n        colorScheme,\n        setColorScheme,\n        clearColorScheme,\n        getRootElement,\n        classNamesPrefix,\n        getStyleNonce,\n        cssVariablesResolver,\n        cssVariablesSelector: cssVariablesSelector ?? ':root',\n        withStaticClasses,\n        stylesTransform,\n        env,\n        deduplicateInlineStyles,\n      }}\n    >\n      <MantineThemeProvider theme={theme}>\n        {withCssVariables && (\n          <MantineCssVariables\n            cssVariablesSelector={cssVariablesSelector}\n            deduplicateCssVariables={deduplicateCssVariables}\n          />\n        )}\n        {withGlobalClasses && <MantineClasses />}\n        {children}\n      </MantineThemeProvider>\n    </MantineContext>\n  );\n}\n\nMantineProvider.displayName = '@mantine/core/MantineProvider';\n\nexport interface HeadlessMantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Your application */\n  children?: React.ReactNode;\n\n  /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */\n  env?: 'default' | 'test';\n}\n\nexport function HeadlessMantineProvider({ children, theme, env }: HeadlessMantineProviderProps) {\n  return (\n    <MantineContext\n      value={{\n        colorScheme: 'auto',\n        setColorScheme: () => {},\n        clearColorScheme: () => {},\n        getRootElement: () => document.documentElement,\n        classNamesPrefix: 'mantine',\n        cssVariablesSelector: ':root',\n        withStaticClasses: false,\n        headless: true,\n        env,\n      }}\n    >\n      <MantineThemeProvider theme={theme}>{children}</MantineThemeProvider>\n    </MantineContext>\n  );\n}\n\nHeadlessMantineProvider.displayName = '@mantine/core/HeadlessMantineProvider';\n"],"mappings":";;;;;;;;;;;;;;AAkEA,SAAgB,gBAAgB,EAC9B,OACA,UACA,eACA,oBAAoB,MACpB,oBAAoB,MACpB,0BAA0B,MAC1B,mBAAmB,MACnB,sBACA,mBAAmB,WACnB,qBAAqBA,8BAAAA,gCAAgC,EACrD,qBAAqB,SACrB,uBAAuB,SAAS,iBAChC,sBACA,kBACA,iBACA,KACA,0BAA0B,SACH;CACvB,MAAM,EAAE,aAAa,gBAAgB,qBAAqBC,kCAAAA,uBAAuB;EAC/E;EACA;EACA,SAAS;EACT;EACD,CAAC;AAEF,mCAAA,uBAAuB;EACrB,sBAAsB,OAAO,wBAAwB;EACrD;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,gBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA,sBAAsB,wBAAwB;GAC9C;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,MAACC,6BAAAA,sBAAD;GAA6B;aAA7B;IACG,oBACC,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;KACwB;KACG;KACzB,CAAA;IAEH,qBAAqB,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD,EAAkB,CAAA;IACvC;IACoB;;EACR,CAAA;;AAIrB,gBAAgB,cAAc;AAa9B,SAAgB,wBAAwB,EAAE,UAAU,OAAO,OAAqC;AAC9F,QACE,iBAAA,GAAA,kBAAA,KAACH,wBAAAA,gBAAD;EACE,OAAO;GACL,aAAa;GACb,sBAAsB;GACtB,wBAAwB;GACxB,sBAAsB,SAAS;GAC/B,kBAAkB;GAClB,sBAAsB;GACtB,mBAAmB;GACnB,UAAU;GACV;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,6BAAAA,sBAAD;GAA6B;GAAQ;GAAgC,CAAA;EACtD,CAAA;;AAIrB,wBAAwB,cAAc"}

package/cjs/core/MantineProvider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.cjs

@@ -1,6 +1,5 @@
 "use client";
 const require_rem = require("../../../utils/units-converters/rem.cjs");
-const require_luminance = require("../luminance/luminance.cjs");
 const require_parse_theme_color = require("../parse-theme-color/parse-theme-color.cjs");
 const require_darken = require("../darken/darken.cjs");
 const require_get_gradient = require("../get-gradient/get-gradient.cjs");
@@ -58,9 +57,9 @@ const defaultVariantColorsResolver = ({ color, theme, variant, gradient, autoCon
 			};
 		}
 		return {
-			background: color,
-			hover: require_darken.darken(color, .1),
-			color: require_luminance.isLightColor(color) ? "var(--mantine-color-black)" : "var(--mantine-color-white)",
+			background: require_rgba.rgba(color, .1),
+			hover: require_rgba.rgba(color, .12),
+			color,
 			border: `${require_rem.rem(1)} solid transparent`
 		};
 	}

package/cjs/core/MantineProvider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"default-variant-colors-resolver.cjs","names":["parseThemeColor","rem","darken","isLightColor","rgba","getGradient"],"sources":["../../../../../src/core/MantineProvider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.ts"],"sourcesContent":["import { rem } from '../../../utils';\nimport { MantineColor, MantineGradient, MantineTheme } from '../../theme.types';\nimport { darken } from '../darken/darken';\nimport { getGradient } from '../get-gradient/get-gradient';\nimport { isLightColor } from '../luminance/luminance';\nimport { parseThemeColor } from '../parse-theme-color/parse-theme-color';\nimport { rgba } from '../rgba/rgba';\n\nexport interface VariantColorsResolverInput {\n  color: MantineColor | undefined;\n  theme: MantineTheme;\n  variant: string;\n  gradient?: MantineGradient;\n  autoContrast?: boolean;\n}\n\nexport interface VariantColorResolverResult {\n  background: string;\n  hover: string;\n  color: string;\n  border: string;\n  hoverColor?: string;\n}\n\nexport type VariantColorsResolver = (\n  input: VariantColorsResolverInput\n) => VariantColorResolverResult;\n\nexport const defaultVariantColorsResolver: VariantColorsResolver = ({\n  color,\n  theme,\n  variant,\n  gradient,\n  autoContrast,\n}) => {\n  const parsed = parseThemeColor({ color, theme });\n\n  const _autoContrast = typeof autoContrast === 'boolean' ? autoContrast : theme.autoContrast;\n\n  if (variant === 'none') {\n    return {\n      background: 'transparent',\n      hover: 'transparent',\n      color: 'inherit',\n      border: 'none',\n    };\n  }\n\n  if (variant === 'filled') {\n    const textColor = _autoContrast\n      ? parsed.isLight\n        ? 'var(--mantine-color-black)'\n        : 'var(--mantine-color-white)'\n      : 'var(--mantine-color-white)';\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: `var(--mantine-color-${color}-filled)`,\n          hover: `var(--mantine-color-${color}-filled-hover)`,\n          color: textColor,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      return {\n        background: `var(--mantine-color-${parsed.color}-${parsed.shade})`,\n        hover: `var(--mantine-color-${parsed.color}-${parsed.shade === 9 ? 8 : parsed.shade + 1})`,\n        color: textColor,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: color!,\n      hover: darken(color!, 0.1),\n      color: textColor,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'light') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: `var(--mantine-color-${color}-light)`,\n          hover: `var(--mantine-color-${color}-light-hover)`,\n          color: `var(--mantine-color-${color}-light-color)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      const parsedColor = theme.colors[parsed.color][parsed.shade];\n\n      return {\n        background: parsedColor,\n        hover: darken(parsedColor, 0.1),\n        color: `var(--mantine-color-${parsed.color}-light-color)`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: color!,\n      hover: darken(color!, 0.1),\n      color: isLightColor(color!) ? 'var(--mantine-color-black)' : 'var(--mantine-color-white)',\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'outline') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'transparent',\n          hover: `var(--mantine-color-${color}-outline-hover)`,\n          color: `var(--mantine-color-${color}-outline)`,\n          border: `${rem(1)} solid var(--mantine-color-${color}-outline)`,\n        };\n      }\n\n      return {\n        background: 'transparent',\n        hover: rgba(theme.colors[parsed.color][parsed.shade], 0.05),\n        color: `var(--mantine-color-${parsed.color}-${parsed.shade})`,\n        border: `${rem(1)} solid var(--mantine-color-${parsed.color}-${parsed.shade})`,\n      };\n    }\n\n    return {\n      background: 'transparent',\n      hover: rgba(color!, 0.05),\n      color: color!,\n      border: `${rem(1)} solid ${color}`,\n    };\n  }\n\n  if (variant === 'subtle') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'transparent',\n          hover: `var(--mantine-color-${color}-light-hover)`,\n          color: `var(--mantine-color-${color}-light-color)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      const parsedColor = theme.colors[parsed.color][parsed.shade];\n\n      return {\n        background: 'transparent',\n        hover: rgba(parsedColor, 0.12),\n        color: `var(--mantine-color-${parsed.color}-${Math.min(parsed.shade, 6)})`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: 'transparent',\n      hover: rgba(color!, 0.12),\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'transparent') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'transparent',\n          hover: 'transparent',\n          color: `var(--mantine-color-${color}-light-color)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      return {\n        background: 'transparent',\n        hover: 'transparent',\n        color: `var(--mantine-color-${parsed.color}-${Math.min(parsed.shade, 6)})`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: 'transparent',\n      hover: 'transparent',\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'white') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'var(--mantine-color-white)',\n          hover: darken(theme.white, 0.01),\n          color: `var(--mantine-color-${color}-filled)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      return {\n        background: 'var(--mantine-color-white)',\n        hover: darken(theme.white, 0.01),\n        color: `var(--mantine-color-${parsed.color}-${parsed.shade})`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: 'var(--mantine-color-white)',\n      hover: darken(theme.white, 0.01),\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'gradient') {\n    return {\n      background: getGradient(gradient, theme),\n      hover: getGradient(gradient, theme),\n      color: 'var(--mantine-color-white)',\n      border: 'none',\n    };\n  }\n\n  if (variant === 'default') {\n    return {\n      background: 'var(--mantine-color-default)',\n      hover: 'var(--mantine-color-default-hover)',\n      color: 'var(--mantine-color-default-color)',\n      border: `${rem(1)} solid var(--mantine-color-default-border)`,\n    };\n  }\n\n  return {} as VariantColorResolverResult;\n};\n"],"mappings":"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"}
+{"version":3,"file":"default-variant-colors-resolver.cjs","names":["parseThemeColor","rem","darken","rgba","getGradient"],"sources":["../../../../../src/core/MantineProvider/color-functions/default-variant-colors-resolver/default-variant-colors-resolver.ts"],"sourcesContent":["import { rem } from '../../../utils';\nimport { MantineColor, MantineGradient, MantineTheme } from '../../theme.types';\nimport { darken } from '../darken/darken';\nimport { getGradient } from '../get-gradient/get-gradient';\nimport { parseThemeColor } from '../parse-theme-color/parse-theme-color';\nimport { rgba } from '../rgba/rgba';\n\nexport interface VariantColorsResolverInput {\n  color: MantineColor | undefined;\n  theme: MantineTheme;\n  variant: string;\n  gradient?: MantineGradient;\n  autoContrast?: boolean;\n}\n\nexport interface VariantColorResolverResult {\n  background: string;\n  hover: string;\n  color: string;\n  border: string;\n  hoverColor?: string;\n}\n\nexport type VariantColorsResolver = (\n  input: VariantColorsResolverInput\n) => VariantColorResolverResult;\n\nexport const defaultVariantColorsResolver: VariantColorsResolver = ({\n  color,\n  theme,\n  variant,\n  gradient,\n  autoContrast,\n}) => {\n  const parsed = parseThemeColor({ color, theme });\n\n  const _autoContrast = typeof autoContrast === 'boolean' ? autoContrast : theme.autoContrast;\n\n  if (variant === 'none') {\n    return {\n      background: 'transparent',\n      hover: 'transparent',\n      color: 'inherit',\n      border: 'none',\n    };\n  }\n\n  if (variant === 'filled') {\n    const textColor = _autoContrast\n      ? parsed.isLight\n        ? 'var(--mantine-color-black)'\n        : 'var(--mantine-color-white)'\n      : 'var(--mantine-color-white)';\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: `var(--mantine-color-${color}-filled)`,\n          hover: `var(--mantine-color-${color}-filled-hover)`,\n          color: textColor,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      return {\n        background: `var(--mantine-color-${parsed.color}-${parsed.shade})`,\n        hover: `var(--mantine-color-${parsed.color}-${parsed.shade === 9 ? 8 : parsed.shade + 1})`,\n        color: textColor,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: color!,\n      hover: darken(color!, 0.1),\n      color: textColor,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'light') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: `var(--mantine-color-${color}-light)`,\n          hover: `var(--mantine-color-${color}-light-hover)`,\n          color: `var(--mantine-color-${color}-light-color)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      const parsedColor = theme.colors[parsed.color][parsed.shade];\n\n      return {\n        background: parsedColor,\n        hover: darken(parsedColor, 0.1),\n        color: `var(--mantine-color-${parsed.color}-light-color)`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: rgba(color!, 0.1),\n      hover: rgba(color!, 0.12),\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'outline') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'transparent',\n          hover: `var(--mantine-color-${color}-outline-hover)`,\n          color: `var(--mantine-color-${color}-outline)`,\n          border: `${rem(1)} solid var(--mantine-color-${color}-outline)`,\n        };\n      }\n\n      return {\n        background: 'transparent',\n        hover: rgba(theme.colors[parsed.color][parsed.shade], 0.05),\n        color: `var(--mantine-color-${parsed.color}-${parsed.shade})`,\n        border: `${rem(1)} solid var(--mantine-color-${parsed.color}-${parsed.shade})`,\n      };\n    }\n\n    return {\n      background: 'transparent',\n      hover: rgba(color!, 0.05),\n      color: color!,\n      border: `${rem(1)} solid ${color}`,\n    };\n  }\n\n  if (variant === 'subtle') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'transparent',\n          hover: `var(--mantine-color-${color}-light-hover)`,\n          color: `var(--mantine-color-${color}-light-color)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      const parsedColor = theme.colors[parsed.color][parsed.shade];\n\n      return {\n        background: 'transparent',\n        hover: rgba(parsedColor, 0.12),\n        color: `var(--mantine-color-${parsed.color}-${Math.min(parsed.shade, 6)})`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: 'transparent',\n      hover: rgba(color!, 0.12),\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'transparent') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'transparent',\n          hover: 'transparent',\n          color: `var(--mantine-color-${color}-light-color)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      return {\n        background: 'transparent',\n        hover: 'transparent',\n        color: `var(--mantine-color-${parsed.color}-${Math.min(parsed.shade, 6)})`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: 'transparent',\n      hover: 'transparent',\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'white') {\n    if (parsed.isThemeColor) {\n      if (parsed.shade === undefined) {\n        return {\n          background: 'var(--mantine-color-white)',\n          hover: darken(theme.white, 0.01),\n          color: `var(--mantine-color-${color}-filled)`,\n          border: `${rem(1)} solid transparent`,\n        };\n      }\n\n      return {\n        background: 'var(--mantine-color-white)',\n        hover: darken(theme.white, 0.01),\n        color: `var(--mantine-color-${parsed.color}-${parsed.shade})`,\n        border: `${rem(1)} solid transparent`,\n      };\n    }\n\n    return {\n      background: 'var(--mantine-color-white)',\n      hover: darken(theme.white, 0.01),\n      color: color!,\n      border: `${rem(1)} solid transparent`,\n    };\n  }\n\n  if (variant === 'gradient') {\n    return {\n      background: getGradient(gradient, theme),\n      hover: getGradient(gradient, theme),\n      color: 'var(--mantine-color-white)',\n      border: 'none',\n    };\n  }\n\n  if (variant === 'default') {\n    return {\n      background: 'var(--mantine-color-default)',\n      hover: 'var(--mantine-color-default-hover)',\n      color: 'var(--mantine-color-default-color)',\n      border: `${rem(1)} solid var(--mantine-color-default-border)`,\n    };\n  }\n\n  return {} as VariantColorResolverResult;\n};\n"],"mappings":"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"}

package/cjs/index.cjs

@@ -72,6 +72,7 @@ const require_get_global_class_names = require("./core/styles-api/use-styles/get
 const require_use_styles = require("./core/styles-api/use-styles/use-styles.cjs");
 const require_styles_to_string = require("./core/InlineStyles/styles-to-string/styles-to-string.cjs");
 const require_InlineStyles = require("./core/InlineStyles/InlineStyles.cjs");
+const require_hash_styles = require("./core/InlineStyles/hash-styles.cjs");
 const require_extract_style_props = require("./core/Box/style-props/extract-style-props/extract-style-props.cjs");
 const require_style_props_data = require("./core/Box/style-props/style-props-data.cjs");
 const require_parse_style_props = require("./core/Box/style-props/parse-style-props/parse-style-props.cjs");
@@ -243,6 +244,7 @@ const require_ListItem = require("./components/List/ListItem/ListItem.cjs");
 const require_List = require("./components/List/List.cjs");
 const require_LoadingOverlay = require("./components/LoadingOverlay/LoadingOverlay.cjs");
 const require_Marquee = require("./components/Marquee/Marquee.cjs");
+const require_MaskInput = require("./components/MaskInput/MaskInput.cjs");
 const require_Menu_context = require("./components/Menu/Menu.context.cjs");
 const require_MenuDivider = require("./components/Menu/MenuDivider/MenuDivider.cjs");
 const require_MenuDropdown = require("./components/Menu/MenuDropdown/MenuDropdown.cjs");
@@ -336,6 +338,11 @@ const require_Timeline = require("./components/Timeline/Timeline.cjs");
 const require_Title = require("./components/Title/Title.cjs");
 const require_use_tree = require("./components/Tree/use-tree.cjs");
 const require_Tree = require("./components/Tree/Tree.cjs");
+const require_merge_async_children = require("./components/Tree/merge-async-children/merge-async-children.cjs");
+const require_move_tree_node = require("./components/Tree/move-tree-node/move-tree-node.cjs");
+const require_filter_tree_data = require("./components/Tree/filter-tree-data/filter-tree-data.cjs");
+const require_flatten_tree_data = require("./components/Tree/flatten-tree-data/flatten-tree-data.cjs");
+const require_FlatTreeNode = require("./components/Tree/FlatTreeNode.cjs");
 const require_Typography = require("./components/Typography/Typography.cjs");
 let react_remove_scroll = require("react-remove-scroll");
 exports.Accordion = require_Accordion.Accordion;
@@ -430,6 +437,7 @@ exports.FOCUS_CLASS_NAMES = require_get_global_class_names.FOCUS_CLASS_NAMES;
 exports.Fieldset = require_Fieldset.Fieldset;
 exports.FileButton = require_FileButton.FileButton;
 exports.FileInput = require_FileInput.FileInput;
+exports.FlatTreeNode = require_FlatTreeNode.FlatTreeNode;
 exports.Flex = require_Flex.Flex;
 exports.FloatingArrow = require_FloatingArrow.FloatingArrow;
 exports.FloatingIndicator = require_FloatingIndicator.FloatingIndicator;
@@ -473,6 +481,7 @@ exports.MantineThemeContext = require_MantineThemeProvider.MantineThemeContext;
 exports.MantineThemeProvider = require_MantineThemeProvider.MantineThemeProvider;
 exports.Mark = require_Mark.Mark;
 exports.Marquee = require_Marquee.Marquee;
+exports.MaskInput = require_MaskInput.MaskInput;
 exports.Menu = require_Menu.Menu;
 exports.MenuDivider = require_MenuDivider.MenuDivider;
 exports.MenuDropdown = require_MenuDropdown.MenuDropdown;
@@ -620,15 +629,18 @@ exports.deepMerge = require_deep_merge.deepMerge;
 exports.defaultCssVariablesResolver = require_default_css_variables_resolver.defaultCssVariablesResolver;
 exports.defaultLoaders = require_Loader.defaultLoaders;
 exports.defaultOptionsFilter = require_default_options_filter.defaultOptionsFilter;
+exports.defaultTreeNodeFilter = require_filter_tree_data.defaultTreeNodeFilter;
 exports.defaultVariantColorsResolver = require_default_variant_colors_resolver.defaultVariantColorsResolver;
 exports.em = require_rem.em;
 exports.extractStyleProps = require_extract_style_props.extractStyleProps;
 exports.factory = require_factory.factory;
 exports.filterProps = require_filter_props.filterProps;
+exports.filterTreeData = require_filter_tree_data.filterTreeData;
 exports.findClosestNumber = require_find_closest_number.findClosestNumber;
 exports.findElementAncestor = require_find_element_ancestor.findElementAncestor;
 exports.findElementBySelector = require_find_element_in_shadow_dom.findElementBySelector;
 exports.findElementsBySelector = require_find_element_in_shadow_dom.findElementsBySelector;
+exports.flattenTreeData = require_flatten_tree_data.flattenTreeData;
 exports.genericFactory = require_factory.genericFactory;
 exports.getAutoContrastValue = require_get_auto_contrast_value.getAutoContrastValue;
 exports.getBaseValue = require_get_base_value.getBaseValue;
@@ -659,6 +671,7 @@ exports.getStyleObject = require_get_style_object.getStyleObject;
 exports.getThemeColor = require_get_theme_color.getThemeColor;
 exports.getTransitionProps = require_get_transition_props.getTransitionProps;
 exports.getTreeExpandedState = require_use_tree.getTreeExpandedState;
+exports.hashStyleProps = require_hash_styles.hashStyleProps;
 exports.isColorValid = require_parsers.isColorValid;
 exports.isElement = require_is_element.isElement;
 exports.isLightColor = require_luminance.isLightColor;
@@ -673,8 +686,10 @@ exports.localStorageColorSchemeManager = require_local_storage_manager.localStor
 exports.luminance = require_luminance.luminance;
 exports.mantineHtmlProps = require_mantine_html_props.mantineHtmlProps;
 exports.memoize = require_memoize.memoize;
+exports.mergeAsyncChildren = require_merge_async_children.mergeAsyncChildren;
 exports.mergeMantineTheme = require_merge_mantine_theme.mergeMantineTheme;
 exports.mergeThemeOverrides = require_merge_theme_overrides.mergeThemeOverrides;
+exports.moveTreeNode = require_move_tree_node.moveTreeNode;
 exports.noop = require_noop.noop;
 exports.parseColor = require_parsers.parseColor;
 exports.parseStyleProps = require_parse_style_props.parseStyleProps;
@@ -708,6 +723,7 @@ exports.useMantineClassNamesPrefix = require_Mantine_context.useMantineClassName
 exports.useMantineColorScheme = require_use_mantine_color_scheme.useMantineColorScheme;
 exports.useMantineContext = require_Mantine_context.useMantineContext;
 exports.useMantineCssVariablesResolver = require_Mantine_context.useMantineCssVariablesResolver;
+exports.useMantineDeduplicateInlineStyles = require_Mantine_context.useMantineDeduplicateInlineStyles;
 exports.useMantineEnv = require_Mantine_context.useMantineEnv;
 exports.useMantineIsHeadless = require_Mantine_context.useMantineIsHeadless;
 exports.useMantineStyleNonce = require_Mantine_context.useMantineStyleNonce;

package/esm/components/Blockquote/Blockquote.mjs

@@ -19,13 +19,12 @@ const varsResolver = createVarsResolver((theme, { color, iconSize, radius }) =>
 		theme,
 		colorScheme: "dark"
 	});
-	const lightParsed = parseThemeColor({
-		color: color || theme.primaryColor,
-		theme,
-		colorScheme: "light"
-	});
 	return { root: {
-		"--bq-bg-light": rgba(lightParsed.value, .07),
+		"--bq-bg-light": rgba(parseThemeColor({
+			color: color || theme.primaryColor,
+			theme,
+			colorScheme: "light"
+		}).value, .07),
 		"--bq-bg-dark": rgba(darkParsed.value, .06),
 		"--bq-bd": getThemeColor(color, theme),
 		"--bq-icon-size": rem(iconSize),

package/esm/components/Blockquote/Blockquote.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.mjs","names":["classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  parseThemeColor,\n  rem,\n  rgba,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n  root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\n};\n\nexport interface BlockquoteProps\n  extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n  /** Blockquote icon, displayed at the top left side */\n  icon?: React.ReactNode;\n\n  /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n  iconSize?: number | string;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Reference to a cited quote */\n  cite?: React.ReactNode;\n}\n\nexport type BlockquoteFactory = Factory<{\n  props: BlockquoteProps;\n  ref: HTMLQuoteElement;\n  stylesNames: BlockquoteStylesNames;\n  vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n  iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>((theme, { color, iconSize, radius }) => {\n  const darkParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'dark',\n  });\n\n  const lightParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'light',\n  });\n\n  return {\n    root: {\n      '--bq-bg-light': rgba(lightParsed.value, 0.07),\n      '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n      '--bq-bd': getThemeColor(color, theme),\n      '--bq-icon-size': rem(iconSize),\n      '--bq-radius': getRadius(radius),\n    },\n  };\n});\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n  const props = useProps('Blockquote', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    icon,\n    iconSize,\n    cite,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BlockquoteFactory>({\n    name: 'Blockquote',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n      {icon && <span {...getStyles('icon')}>{icon}</span>}\n      {children}\n      {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n    </Box>\n  );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n  export type Props = BlockquoteProps;\n  export type StylesNames = BlockquoteStylesNames;\n  export type CssVariables = BlockquoteCssVariables;\n  export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAe,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;CAEF,MAAM,cAAc,gBAAgB;EAClC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,iBAAiB,KAAK,YAAY,OAAO,IAAK;EAC9C,gBAAgB,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAW,cAAc,OAAO,MAAM;EACtC,kBAAkB,IAAI,SAAS;EAC/B,eAAe,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"Blockquote.mjs","names":["classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  parseThemeColor,\n  rem,\n  rgba,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n  root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\n};\n\nexport interface BlockquoteProps\n  extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n  /** Blockquote icon, displayed at the top left side */\n  icon?: React.ReactNode;\n\n  /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n  iconSize?: number | string;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Reference to a cited quote */\n  cite?: React.ReactNode;\n}\n\nexport type BlockquoteFactory = Factory<{\n  props: BlockquoteProps;\n  ref: HTMLQuoteElement;\n  stylesNames: BlockquoteStylesNames;\n  vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n  iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>((theme, { color, iconSize, radius }) => {\n  const darkParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'dark',\n  });\n\n  const lightParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'light',\n  });\n\n  return {\n    root: {\n      '--bq-bg-light': rgba(lightParsed.value, 0.07),\n      '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n      '--bq-bd': getThemeColor(color, theme),\n      '--bq-icon-size': rem(iconSize),\n      '--bq-radius': getRadius(radius),\n    },\n  };\n});\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n  const props = useProps('Blockquote', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    icon,\n    iconSize,\n    cite,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BlockquoteFactory>({\n    name: 'Blockquote',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n      {icon && <span {...getStyles('icon')}>{icon}</span>}\n      {children}\n      {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n    </Box>\n  );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n  export type Props = BlockquoteProps;\n  export type StylesNames = BlockquoteStylesNames;\n  export type CssVariables = BlockquoteCssVariables;\n  export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAe,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAQF,QAAO,EACL,MAAM;EACJ,iBAAiB,KARD,gBAAgB;GAClC,OAAO,SAAS,MAAM;GACtB;GACA,aAAa;GACd,CAAC,CAIoC,OAAO,IAAK;EAC9C,gBAAgB,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAW,cAAc,OAAO,MAAM;EACtC,kBAAkB,IAAI,SAAS;EAC/B,eAAe,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/esm/components/Flex/Flex.mjs

@@ -1,9 +1,11 @@
 "use client";
 import { filterProps } from "../../core/utils/filter-props/filter-props.mjs";
+import { useMantineDeduplicateInlineStyles } from "../../core/MantineProvider/Mantine.context.mjs";
 import { useMantineTheme } from "../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
 import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
 import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import { InlineStyles } from "../../core/InlineStyles/InlineStyles.mjs";
+import { hashStyleProps } from "../../core/InlineStyles/hash-styles.mjs";
 import { parseStyleProps } from "../../core/Box/style-props/parse-style-props/parse-style-props.mjs";
 import { useRandomClassName } from "../../core/Box/use-random-classname/use-random-classname.mjs";
 import { polymorphicFactory } from "../../core/factory/polymorphic-factory.mjs";
@@ -28,7 +30,7 @@ const Flex = polymorphicFactory((_props) => {
 		vars
 	});
 	const theme = useMantineTheme();
-	const responsiveClassName = useRandomClassName();
+	const randomClassName = useRandomClassName();
 	const parsedStyleProps = parseStyleProps({
 		styleProps: {
 			gap,
@@ -42,10 +44,13 @@ const Flex = polymorphicFactory((_props) => {
 		theme,
 		data: FLEX_STYLE_PROPS_DATA
 	});
+	const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();
+	const responsiveClassName = deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media) : randomClassName;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ jsx(InlineStyles, {
 		selector: `.${responsiveClassName}`,
 		styles: parsedStyleProps.styles,
-		media: parsedStyleProps.media
+		media: parsedStyleProps.media,
+		deduplicate: deduplicateInlineStyles
 	}), /* @__PURE__ */ jsx(Box, {
 		...getStyles("root", {
 			className: responsiveClassName,

package/esm/components/Flex/Flex.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","names":["classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  filterProps,\n  InlineStyles,\n  MantineSpacing,\n  parseStyleProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StyleProp,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useRandomClassName,\n  useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n  /** `gap` CSS property */\n  gap?: StyleProp<MantineSpacing>;\n\n  /** `row-gap` CSS property */\n  rowGap?: StyleProp<MantineSpacing>;\n\n  /** `column-gap` CSS property */\n  columnGap?: StyleProp<MantineSpacing>;\n\n  /** `align-items` CSS property */\n  align?: StyleProp<React.CSSProperties['alignItems']>;\n\n  /** `justify-content` CSS property */\n  justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n  /** `flex-wrap` CSS property */\n  wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n  /** `flex-direction` CSS property */\n  direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n  props: FlexProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n  const props = useProps('Flex', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    gap,\n    rowGap,\n    columnGap,\n    align,\n    justify,\n    wrap,\n    direction,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<FlexFactory>({\n    name: 'Flex',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const theme = useMantineTheme();\n  const responsiveClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n    theme,\n    data: FLEX_STYLE_PROPS_DATA,\n  });\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n        />\n      )}\n      <Box\n        {...getStyles('root', {\n          className: responsiveClassName,\n          style: filterProps(parsedStyleProps.inlineStyles),\n        })}\n        {...others}\n      />\n    </>\n  );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n\nexport namespace Flex {\n  export type Props = FlexProps;\n  export type StylesNames = FlexStylesNames;\n  export type Factory = FlexFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,sBAAsB,oBAAoB;CAChD,MAAM,mBAAmB,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAM;EACP,CAAC;AAEF,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,CAAA,EAEJ,oBAAC,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAO,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUA;AACf,KAAK,cAAc"}
+{"version":3,"file":"Flex.mjs","names":["classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  filterProps,\n  hashStyleProps,\n  InlineStyles,\n  MantineSpacing,\n  parseStyleProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StyleProp,\n  StylesApiProps,\n  useMantineDeduplicateInlineStyles,\n  useMantineTheme,\n  useProps,\n  useRandomClassName,\n  useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n  /** `gap` CSS property */\n  gap?: StyleProp<MantineSpacing>;\n\n  /** `row-gap` CSS property */\n  rowGap?: StyleProp<MantineSpacing>;\n\n  /** `column-gap` CSS property */\n  columnGap?: StyleProp<MantineSpacing>;\n\n  /** `align-items` CSS property */\n  align?: StyleProp<React.CSSProperties['alignItems']>;\n\n  /** `justify-content` CSS property */\n  justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n  /** `flex-wrap` CSS property */\n  wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n  /** `flex-direction` CSS property */\n  direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n  props: FlexProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n  const props = useProps('Flex', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    gap,\n    rowGap,\n    columnGap,\n    align,\n    justify,\n    wrap,\n    direction,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<FlexFactory>({\n    name: 'Flex',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const theme = useMantineTheme();\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n    theme,\n    data: FLEX_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  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n      <Box\n        {...getStyles('root', {\n          className: responsiveClassName,\n          style: filterProps(parsedStyleProps.inlineStyles),\n        })}\n        {...others}\n      />\n    </>\n  );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n\nexport namespace Flex {\n  export type Props = FlexProps;\n  export type StylesNames = FlexStylesNames;\n  export type Factory = FlexFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsDA,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,mBAAmB,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAM;EACP,CAAC;CAEF,MAAM,0BAA0B,mCAAmC;CACnE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,MAAM,GAC/D;AAEN,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;EACb,CAAA,EAEJ,oBAAC,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAO,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUA;AACf,KAAK,cAAc"}

package/esm/components/FloatingIndicator/FloatingIndicator.mjs

@@ -11,8 +11,7 @@ import { useMergedRef, useReducedMotion } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx
 const varsResolver = createVarsResolver((theme, { transitionDuration }, { shouldReduceMotion }) => {
-	const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? "0ms" : typeof transitionDuration === "number" ? `${transitionDuration}ms` : transitionDuration || "150ms";
-	return { root: { "--transition-duration": duration } };
+	return { root: { "--transition-duration": (theme.respectReducedMotion ? shouldReduceMotion : false) ? "0ms" : typeof transitionDuration === "number" ? `${transitionDuration}ms` : transitionDuration || "150ms" } };
 });
 const FloatingIndicator = factory((_props) => {
 	const props = useProps("FloatingIndicator", null, _props);