@mantine/core 9.6.3 → 9.7.0

package/esm/components/AppShell/use-app-shell-resize/clamp-resize-size.mjs

@@ -0,0 +1,14 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/clamp-resize-size.ts
+function clampResizeSize({ size, min, max, viewportMax }) {
+	const upperBound = Math.min(max ?? Number.POSITIVE_INFINITY, viewportMax);
+	return Math.max(Math.min(min ?? 0, upperBound), Math.min(size, upperBound));
+}
+function getCollapseState(size, collapseThreshold) {
+	if (collapseThreshold === void 0) return false;
+	return size < collapseThreshold;
+}
+//#endregion
+export { clampResizeSize, getCollapseState };
+
+//# sourceMappingURL=clamp-resize-size.mjs.map

package/esm/components/AppShell/use-app-shell-resize/clamp-resize-size.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp-resize-size.mjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/clamp-resize-size.ts"],"sourcesContent":["interface ClampResizeSizeInput {\n  size: number;\n  min: number | undefined;\n  max: number | undefined;\n  viewportMax: number;\n}\n\nexport function clampResizeSize({ size, min, max, viewportMax }: ClampResizeSizeInput) {\n  const upperBound = Math.min(max ?? Number.POSITIVE_INFINITY, viewportMax);\n  const lowerBound = Math.min(min ?? 0, upperBound);\n  return Math.max(lowerBound, Math.min(size, upperBound));\n}\n\nexport function getCollapseState(size: number, collapseThreshold: number | undefined) {\n  if (collapseThreshold === undefined) {\n    return false;\n  }\n\n  return size < collapseThreshold;\n}\n"],"mappings":";;AAOA,SAAgB,gBAAgB,EAAE,MAAM,KAAK,KAAK,eAAqC;CACrF,MAAM,aAAa,KAAK,IAAI,OAAO,OAAO,mBAAmB,WAAW;CAExE,OAAO,KAAK,IADO,KAAK,IAAI,OAAO,GAAG,UACb,GAAG,KAAK,IAAI,MAAM,UAAU,CAAC;AACxD;AAEA,SAAgB,iBAAiB,MAAc,mBAAuC;CACpF,IAAI,sBAAsB,KAAA,GACxB,OAAO;CAGT,OAAO,OAAO;AAChB"}

package/esm/components/AppShell/use-app-shell-resize/resize-section-config.mjs

@@ -0,0 +1,49 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/resize-section-config.ts
+const RESIZE_SECTIONS = {
+	navbar: {
+		axis: "horizontal",
+		orientation: "vertical",
+		sizeVariable: "--app-shell-navbar-width",
+		offsetVariable: "--app-shell-navbar-offset",
+		gridWidthVariable: "--app-shell-navbar-grid-width",
+		handleDisplayVariable: "--app-shell-navbar-resize-handle-display",
+		sign: 1
+	},
+	aside: {
+		axis: "horizontal",
+		orientation: "vertical",
+		sizeVariable: "--app-shell-aside-width",
+		offsetVariable: "--app-shell-aside-offset",
+		gridWidthVariable: "--app-shell-aside-grid-width",
+		handleDisplayVariable: "--app-shell-aside-resize-handle-display",
+		sign: -1
+	},
+	header: {
+		axis: "vertical",
+		orientation: "horizontal",
+		sizeVariable: "--app-shell-header-height",
+		offsetVariable: "--app-shell-header-offset",
+		handleDisplayVariable: "--app-shell-header-resize-handle-display",
+		sign: 1
+	},
+	footer: {
+		axis: "vertical",
+		orientation: "horizontal",
+		sizeVariable: "--app-shell-footer-height",
+		offsetVariable: "--app-shell-footer-offset",
+		handleDisplayVariable: "--app-shell-footer-resize-handle-display",
+		safeAreaVariable: "--app-shell-footer-safe-area",
+		sign: -1
+	}
+};
+const RESIZE_SECTION_NAMES = Object.keys(RESIZE_SECTIONS);
+function getResizeDelta({ section, deltaX, deltaY, dir }) {
+	const config = RESIZE_SECTIONS[section];
+	if (config.axis === "vertical") return deltaY * config.sign;
+	return deltaX * config.sign * (dir === "rtl" ? -1 : 1);
+}
+//#endregion
+export { RESIZE_SECTIONS, RESIZE_SECTION_NAMES, getResizeDelta };
+
+//# sourceMappingURL=resize-section-config.mjs.map

package/esm/components/AppShell/use-app-shell-resize/resize-section-config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-section-config.mjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/resize-section-config.ts"],"sourcesContent":["import type { AppShellResizeSection } from '../AppShell.types';\n\nexport interface ResizeSectionConfig {\n  /** Axis the pointer moves along to resize the section */\n  axis: 'horizontal' | 'vertical';\n\n  /** `aria-orientation` of the separator element */\n  orientation: 'vertical' | 'horizontal';\n\n  /** CSS variable that controls the section size */\n  sizeVariable: string;\n\n  /** CSS variable that controls the space reserved for the section */\n  offsetVariable: string;\n\n  /** CSS variable that controls the grid track size in `mode=\"static\"` */\n  gridWidthVariable?: string;\n\n  /** CSS variable that controls whether the resize handle is displayed */\n  handleDisplayVariable: string;\n\n  /** CSS variable that exposes a safe-area inset baked into the section's measured size, if any */\n  safeAreaVariable?: string;\n\n  /** `1` when moving towards the end of the axis grows the section, `-1` otherwise */\n  sign: 1 | -1;\n}\n\nexport const RESIZE_SECTIONS: Record<AppShellResizeSection, ResizeSectionConfig> = {\n  navbar: {\n    axis: 'horizontal',\n    orientation: 'vertical',\n    sizeVariable: '--app-shell-navbar-width',\n    offsetVariable: '--app-shell-navbar-offset',\n    gridWidthVariable: '--app-shell-navbar-grid-width',\n    handleDisplayVariable: '--app-shell-navbar-resize-handle-display',\n    sign: 1,\n  },\n  aside: {\n    axis: 'horizontal',\n    orientation: 'vertical',\n    sizeVariable: '--app-shell-aside-width',\n    offsetVariable: '--app-shell-aside-offset',\n    gridWidthVariable: '--app-shell-aside-grid-width',\n    handleDisplayVariable: '--app-shell-aside-resize-handle-display',\n    sign: -1,\n  },\n  header: {\n    axis: 'vertical',\n    orientation: 'horizontal',\n    sizeVariable: '--app-shell-header-height',\n    offsetVariable: '--app-shell-header-offset',\n    handleDisplayVariable: '--app-shell-header-resize-handle-display',\n    sign: 1,\n  },\n  footer: {\n    axis: 'vertical',\n    orientation: 'horizontal',\n    sizeVariable: '--app-shell-footer-height',\n    offsetVariable: '--app-shell-footer-offset',\n    handleDisplayVariable: '--app-shell-footer-resize-handle-display',\n    safeAreaVariable: '--app-shell-footer-safe-area',\n    sign: -1,\n  },\n};\n\nexport const RESIZE_SECTION_NAMES = Object.keys(RESIZE_SECTIONS) as AppShellResizeSection[];\n\ninterface GetResizeDeltaInput {\n  section: AppShellResizeSection;\n  deltaX: number;\n  deltaY: number;\n  dir: 'ltr' | 'rtl';\n}\n\nexport function getResizeDelta({ section, deltaX, deltaY, dir }: GetResizeDeltaInput) {\n  const config = RESIZE_SECTIONS[section];\n\n  if (config.axis === 'vertical') {\n    return deltaY * config.sign;\n  }\n\n  return deltaX * config.sign * (dir === 'rtl' ? -1 : 1);\n}\n"],"mappings":";;AA4BA,MAAa,kBAAsE;CACjF,QAAQ;EACN,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB;EACvB,MAAM;CACR;CACA,OAAO;EACL,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB;EACvB,MAAM;CACR;CACA,QAAQ;EACN,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,uBAAuB;EACvB,MAAM;CACR;CACA,QAAQ;EACN,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,uBAAuB;EACvB,kBAAkB;EAClB,MAAM;CACR;AACF;AAEA,MAAa,uBAAuB,OAAO,KAAK,eAAe;AAS/D,SAAgB,eAAe,EAAE,SAAS,QAAQ,QAAQ,OAA4B;CACpF,MAAM,SAAS,gBAAgB;CAE/B,IAAI,OAAO,SAAS,YAClB,OAAO,SAAS,OAAO;CAGzB,OAAO,SAAS,OAAO,QAAQ,QAAQ,QAAQ,KAAK;AACtD"}

package/esm/components/AppShell/use-app-shell-resize/safe-area-inset.mjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/safe-area-inset.ts
+function getSafeAreaInset(element, variable) {
+	if (!variable) return 0;
+	const value = window.getComputedStyle(element).getPropertyValue(variable);
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+//#endregion
+export { getSafeAreaInset };
+
+//# sourceMappingURL=safe-area-inset.mjs.map

package/esm/components/AppShell/use-app-shell-resize/safe-area-inset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-area-inset.mjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/safe-area-inset.ts"],"sourcesContent":["export function getSafeAreaInset(element: Element, variable: string | undefined) {\n  if (!variable) {\n    return 0;\n  }\n\n  const value = window.getComputedStyle(element).getPropertyValue(variable);\n  const parsed = Number.parseFloat(value);\n  return Number.isFinite(parsed) ? parsed : 0;\n}\n"],"mappings":";;AAAA,SAAgB,iBAAiB,SAAkB,UAA8B;CAC/E,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,QAAQ,OAAO,iBAAiB,OAAO,CAAC,CAAC,iBAAiB,QAAQ;CACxE,MAAM,SAAS,OAAO,WAAW,KAAK;CACtC,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C"}

package/esm/components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs

@@ -0,0 +1,127 @@
+"use client";
+import { RESIZE_SECTION_NAMES } from "./resize-section-config.mjs";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallbackRef } from "@mantine/hooks";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/use-app-shell-resize.ts
+function useAppShellResize(input = {}) {
+	const { navbar, aside, header, footer, initialSizes, onResize, onResizeEnd, onCollapseChange } = input;
+	const [sizes, setSizes] = useState({});
+	const [touched, setTouched] = useState({});
+	const [activeSection, setActiveSection] = useState(null);
+	const collapsedRef = useRef({});
+	const handleResize = useCallbackRef(onResize);
+	const handleResizeEnd = useCallbackRef(onResizeEnd);
+	const handleCollapseChange = useCallbackRef(onCollapseChange);
+	const options = useMemo(() => ({
+		navbar,
+		aside,
+		header,
+		footer
+	}), [
+		navbar,
+		aside,
+		header,
+		footer
+	]);
+	const resolvedSizes = useMemo(() => {
+		const result = {};
+		RESIZE_SECTION_NAMES.forEach((section) => {
+			if (sizes[section] !== void 0) {
+				result[section] = sizes[section];
+				return;
+			}
+			if (!touched[section] && initialSizes?.[section] !== void 0) result[section] = initialSizes[section];
+		});
+		return result;
+	}, [
+		sizes,
+		touched,
+		initialSizes
+	]);
+	const resolvedSizesRef = useRef(resolvedSizes);
+	resolvedSizesRef.current = resolvedSizes;
+	const commitSize = useCallback((section, size) => {
+		setTouched((current) => ({
+			...current,
+			[section]: true
+		}));
+		setSizes((current) => ({
+			...current,
+			[section]: size
+		}));
+	}, []);
+	const clearSize = useCallback((section) => {
+		setTouched((current) => ({
+			...current,
+			[section]: true
+		}));
+		setSizes((current) => {
+			const next = { ...current };
+			delete next[section];
+			return next;
+		});
+	}, []);
+	const startResize = useCallback((section) => {
+		setActiveSection(section);
+	}, []);
+	const previewResize = useCallback((section, size) => {
+		handleResize({
+			...resolvedSizesRef.current,
+			[section]: size
+		});
+	}, [handleResize]);
+	const endResize = useCallback((section, size) => {
+		setActiveSection(null);
+		delete collapsedRef.current[section];
+		if (size === null) return;
+		commitSize(section, size);
+		handleResizeEnd({
+			...resolvedSizesRef.current,
+			[section]: size
+		});
+	}, [commitSize, handleResizeEnd]);
+	const initCollapse = useCallback((section, collapsed) => {
+		collapsedRef.current[section] = collapsed;
+	}, []);
+	const reportCollapse = useCallback((section, collapsed) => {
+		if (collapsedRef.current[section] === collapsed) return;
+		collapsedRef.current[section] = collapsed;
+		handleCollapseChange(section, collapsed);
+	}, [handleCollapseChange]);
+	const resetAll = useCallback(() => {
+		setTouched(() => {
+			const next = {};
+			RESIZE_SECTION_NAMES.forEach((section) => {
+				next[section] = true;
+			});
+			return next;
+		});
+		setSizes({});
+	}, []);
+	const getSectionController = (section) => ({
+		enabled: options[section] !== void 0,
+		size: resolvedSizes[section],
+		active: activeSection === section,
+		setSize: (size) => commitSize(section, size),
+		reset: () => clearSize(section)
+	});
+	return {
+		navbar: getSectionController("navbar"),
+		aside: getSectionController("aside"),
+		header: getSectionController("header"),
+		footer: getSectionController("footer"),
+		sizes: resolvedSizes,
+		resetAll,
+		options,
+		activeSection,
+		startResize,
+		previewResize,
+		endResize,
+		initCollapse,
+		reportCollapse
+	};
+}
+//#endregion
+export { useAppShellResize };
+
+//# sourceMappingURL=use-app-shell-resize.mjs.map

package/esm/components/AppShell/use-app-shell-resize/use-app-shell-resize.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-app-shell-resize.mjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/use-app-shell-resize.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useCallbackRef } from '@mantine/hooks';\nimport type {\n  AppShellResizeController,\n  AppShellResizeSection,\n  AppShellResizeSectionController,\n  AppShellResizeSizes,\n  UseAppShellResizeInput,\n} from '../AppShell.types';\nimport { RESIZE_SECTION_NAMES } from './resize-section-config';\n\ntype SectionFlags = Partial<Record<AppShellResizeSection, boolean>>;\n\nexport function useAppShellResize(input: UseAppShellResizeInput = {}): AppShellResizeController {\n  const { navbar, aside, header, footer, initialSizes, onResize, onResizeEnd, onCollapseChange } =\n    input;\n\n  const [sizes, setSizes] = useState<AppShellResizeSizes>({});\n  const [touched, setTouched] = useState<SectionFlags>({});\n  const [activeSection, setActiveSection] = useState<AppShellResizeSection | null>(null);\n  const collapsedRef = useRef<SectionFlags>({});\n  const handleResize = useCallbackRef(onResize);\n  const handleResizeEnd = useCallbackRef(onResizeEnd);\n  const handleCollapseChange = useCallbackRef(onCollapseChange);\n\n  const options = useMemo(\n    () => ({ navbar, aside, header, footer }),\n    [navbar, aside, header, footer]\n  );\n\n  const resolvedSizes = useMemo(() => {\n    const result: AppShellResizeSizes = {};\n\n    RESIZE_SECTION_NAMES.forEach((section) => {\n      if (sizes[section] !== undefined) {\n        result[section] = sizes[section];\n        return;\n      }\n\n      if (!touched[section] && initialSizes?.[section] !== undefined) {\n        result[section] = initialSizes[section];\n      }\n    });\n\n    return result;\n  }, [sizes, touched, initialSizes]);\n\n  const resolvedSizesRef = useRef(resolvedSizes);\n  resolvedSizesRef.current = resolvedSizes;\n\n  const commitSize = useCallback((section: AppShellResizeSection, size: number) => {\n    setTouched((current) => ({ ...current, [section]: true }));\n    setSizes((current) => ({ ...current, [section]: size }));\n  }, []);\n\n  const clearSize = useCallback((section: AppShellResizeSection) => {\n    setTouched((current) => ({ ...current, [section]: true }));\n    setSizes((current) => {\n      const next = { ...current };\n      delete next[section];\n      return next;\n    });\n  }, []);\n\n  const startResize = useCallback((section: AppShellResizeSection) => {\n    setActiveSection(section);\n  }, []);\n\n  const previewResize = useCallback(\n    (section: AppShellResizeSection, size: number) => {\n      handleResize({ ...resolvedSizesRef.current, [section]: size });\n    },\n    [handleResize]\n  );\n\n  const endResize = useCallback(\n    (section: AppShellResizeSection, size: number | null) => {\n      setActiveSection(null);\n      delete collapsedRef.current[section];\n\n      if (size === null) {\n        return;\n      }\n\n      commitSize(section, size);\n      handleResizeEnd({ ...resolvedSizesRef.current, [section]: size });\n    },\n    [commitSize, handleResizeEnd]\n  );\n\n  const initCollapse = useCallback((section: AppShellResizeSection, collapsed: boolean) => {\n    collapsedRef.current[section] = collapsed;\n  }, []);\n\n  const reportCollapse = useCallback(\n    (section: AppShellResizeSection, collapsed: boolean) => {\n      if (collapsedRef.current[section] === collapsed) {\n        return;\n      }\n\n      collapsedRef.current[section] = collapsed;\n      handleCollapseChange(section, collapsed);\n    },\n    [handleCollapseChange]\n  );\n\n  const resetAll = useCallback(() => {\n    setTouched(() => {\n      const next: SectionFlags = {};\n      RESIZE_SECTION_NAMES.forEach((section) => {\n        next[section] = true;\n      });\n      return next;\n    });\n    setSizes({});\n  }, []);\n\n  const getSectionController = (\n    section: AppShellResizeSection\n  ): AppShellResizeSectionController => ({\n    enabled: options[section] !== undefined,\n    size: resolvedSizes[section],\n    active: activeSection === section,\n    setSize: (size: number) => commitSize(section, size),\n    reset: () => clearSize(section),\n  });\n\n  return {\n    navbar: getSectionController('navbar'),\n    aside: getSectionController('aside'),\n    header: getSectionController('header'),\n    footer: getSectionController('footer'),\n    sizes: resolvedSizes,\n    resetAll,\n    options,\n    activeSection,\n    startResize,\n    previewResize,\n    endResize,\n    initCollapse,\n    reportCollapse,\n  };\n}\n"],"mappings":"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"}

package/esm/components/AppShell/use-resizing/use-resizing.mjs

@@ -1,11 +1,29 @@
 "use client";
-import { startTransition, useRef, useState } from "react";
+import { startTransition, useEffect, useRef, useState } from "react";
 import { useIsomorphicEffect, useWindowEvent } from "@mantine/hooks";
 //#region packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx
-function useResizing({ transitionDuration, disabled }) {
+function useResizing({ transitionDuration, disabled, resizeKey }) {
 	const [resizing, setResizing] = useState(true);
+	const [settling, setSettling] = useState({
+		key: resizeKey,
+		active: false
+	});
 	const resizingTimeout = useRef(-1);
 	const disabledTimeout = useRef(-1);
+	if (settling.key !== resizeKey) setSettling({
+		key: resizeKey,
+		active: true
+	});
+	useEffect(() => {
+		if (!settling.active) return;
+		const settlingTimeout = window.setTimeout(() => startTransition(() => {
+			setSettling((current) => ({
+				...current,
+				active: false
+			}));
+		}), transitionDuration || 0);
+		return () => window.clearTimeout(settlingTimeout);
+	}, [settling, transitionDuration]);
 	useWindowEvent("resize", () => {
 		setResizing(true);
 		clearTimeout(resizingTimeout.current);
@@ -20,7 +38,7 @@ function useResizing({ transitionDuration, disabled }) {
 			setResizing(false);
 		}), transitionDuration || 0);
 	}, [disabled, transitionDuration]);
-	return resizing;
+	return resizing || settling.active;
 }
 //#endregion
 export { useResizing };

package/esm/components/AppShell/use-resizing/use-resizing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-resizing.mjs","names":[],"sources":["../../../../src/components/AppShell/use-resizing/use-resizing.tsx"],"sourcesContent":["import { startTransition, useRef, useState } from 'react';\nimport { useIsomorphicEffect, useWindowEvent } from '@mantine/hooks';\n\ninterface UseResizingInput {\n  transitionDuration: number | undefined;\n  disabled: boolean | undefined;\n}\n\nexport function useResizing({ transitionDuration, disabled }: UseResizingInput) {\n  const [resizing, setResizing] = useState(true);\n  const resizingTimeout = useRef<number>(-1);\n  const disabledTimeout = useRef<number>(-1);\n\n  useWindowEvent('resize', () => {\n    setResizing(true);\n    clearTimeout(resizingTimeout.current);\n    resizingTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      200\n    );\n  });\n\n  useIsomorphicEffect(() => {\n    setResizing(true);\n    clearTimeout(disabledTimeout.current);\n    disabledTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      transitionDuration || 0\n    );\n  }, [disabled, transitionDuration]);\n\n  return resizing;\n}\n"],"mappings":";;;;AAQA,SAAgB,YAAY,EAAE,oBAAoB,YAA8B;CAC9E,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAC7C,MAAM,kBAAkB,OAAe,EAAE;CACzC,MAAM,kBAAkB,OAAe,EAAE;CAEzC,eAAe,gBAAgB;EAC7B,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,iBAE7B,sBAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,GACF;CACF,CAAC;CAED,0BAA0B;EACxB,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,iBAE7B,sBAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,sBAAsB,CACxB;CACF,GAAG,CAAC,UAAU,kBAAkB,CAAC;CAEjC,OAAO;AACT"}
+{"version":3,"file":"use-resizing.mjs","names":[],"sources":["../../../../src/components/AppShell/use-resizing/use-resizing.tsx"],"sourcesContent":["import { startTransition, useEffect, useRef, useState } from 'react';\nimport { useIsomorphicEffect, useWindowEvent } from '@mantine/hooks';\n\ninterface UseResizingInput {\n  transitionDuration: number | undefined;\n  disabled: boolean | undefined;\n  resizeKey?: string;\n}\n\nexport function useResizing({ transitionDuration, disabled, resizeKey }: UseResizingInput) {\n  const [resizing, setResizing] = useState(true);\n  const [settling, setSettling] = useState({ key: resizeKey, active: false });\n  const resizingTimeout = useRef<number>(-1);\n  const disabledTimeout = useRef<number>(-1);\n\n  if (settling.key !== resizeKey) {\n    setSettling({ key: resizeKey, active: true });\n  }\n\n  useEffect(() => {\n    if (!settling.active) {\n      return undefined;\n    }\n\n    const settlingTimeout = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setSettling((current) => ({ ...current, active: false }));\n        }),\n      transitionDuration || 0\n    );\n\n    return () => window.clearTimeout(settlingTimeout);\n  }, [settling, transitionDuration]);\n\n  useWindowEvent('resize', () => {\n    setResizing(true);\n    clearTimeout(resizingTimeout.current);\n    resizingTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      200\n    );\n  });\n\n  useIsomorphicEffect(() => {\n    setResizing(true);\n    clearTimeout(disabledTimeout.current);\n    disabledTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      transitionDuration || 0\n    );\n  }, [disabled, transitionDuration]);\n\n  return resizing || settling.active;\n}\n"],"mappings":";;;;AASA,SAAgB,YAAY,EAAE,oBAAoB,UAAU,aAA+B;CACzF,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,KAAK;EAAW,QAAQ;CAAM,CAAC;CAC1E,MAAM,kBAAkB,OAAe,EAAE;CACzC,MAAM,kBAAkB,OAAe,EAAE;CAEzC,IAAI,SAAS,QAAQ,WACnB,YAAY;EAAE,KAAK;EAAW,QAAQ;CAAK,CAAC;CAG9C,gBAAgB;EACd,IAAI,CAAC,SAAS,QACZ;EAGF,MAAM,kBAAkB,OAAO,iBAE3B,sBAAsB;GACpB,aAAa,aAAa;IAAE,GAAG;IAAS,QAAQ;GAAM,EAAE;EAC1D,CAAC,GACH,sBAAsB,CACxB;EAEA,aAAa,OAAO,aAAa,eAAe;CAClD,GAAG,CAAC,UAAU,kBAAkB,CAAC;CAEjC,eAAe,gBAAgB;EAC7B,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,iBAE7B,sBAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,GACF;CACF,CAAC;CAED,0BAA0B;EACxB,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,iBAE7B,sBAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,sBAAsB,CACxB;CACF,GAAG,CAAC,UAAU,kBAAkB,CAAC;CAEjC,OAAO,YAAY,SAAS;AAC9B"}

package/esm/components/Checkbox/Checkbox.mjs

@@ -33,11 +33,19 @@ const varsResolver = createVarsResolver((theme, { radius, color, size, iconColor
 		theme
 	});
 	const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
+	const lightColors = variant === "light" ? theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: "light",
+		autoContrast
+	}) : void 0;
+	const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : getThemeColor(color, theme);
 	return { root: {
 		"--checkbox-size": getSize(size, "checkbox-size"),
 		"--checkbox-radius": radius === void 0 ? void 0 : getRadius(radius),
-		"--checkbox-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
-		"--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
+		"--checkbox-color": resolvedColor,
+		"--checkbox-bg": lightColors?.background,
+		"--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : lightColors ? lightColors.color : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
 			color,
 			theme,
 			autoContrast

package/esm/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          aria-describedby={describedBy}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly && withContextProps.checked === undefined) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline' | 'light';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root:\n    | '--checkbox-size'\n    | '--checkbox-radius'\n    | '--checkbox-color'\n    | '--checkbox-icon-color'\n    | '--checkbox-bg';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    const lightColors =\n      variant === 'light'\n        ? theme.variantColorResolver({\n            color: color || theme.primaryColor,\n            theme,\n            variant: 'light',\n            autoContrast,\n          })\n        : undefined;\n\n    const resolvedColor =\n      variant === 'outline'\n        ? outlineColor\n        : lightColors\n          ? lightColors.color\n          : getThemeColor(color, theme);\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': resolvedColor,\n        '--checkbox-bg': lightColors?.background,\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : lightColors\n            ? lightColors.color\n            : getAutoContrastValue(autoContrast, theme)\n              ? getContrastColor({ color, theme, autoContrast })\n              : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          aria-describedby={describedBy}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly && withContextProps.checked === undefined) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Checkbox/Checkbox.module.mjs

@@ -5,6 +5,7 @@ var Checkbox_module_default = {
 	"inner": "m_26062bec",
 	"input": "m_26063560",
 	"icon": "m_bf295423",
+	"input--light": "m_595ab216",
 	"input--outline": "m_215c4542"
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.module.mjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":[".root {\n  --checkbox-size-xs: 16px;\n  --checkbox-size-sm: 20px;\n  --checkbox-size-md: 24px;\n  --checkbox-size-lg: 30px;\n  --checkbox-size-xl: 36px;\n\n  --checkbox-size: var(--checkbox-size-sm);\n  --checkbox-color: var(--mantine-primary-color-filled);\n\n  &:where([data-variant='filled']) {\n    --checkbox-icon-color: var(--mantine-color-white);\n  }\n\n  &:where([data-variant='outline']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n}\n\n.inner {\n  position: relative;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.input {\n  appearance: none;\n  border: 1px solid transparent;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n  padding: 0;\n  display: block;\n  margin: 0;\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n\n  &[data-indeterminate],\n  &:checked {\n    background-color: var(--checkbox-color);\n    border-color: var(--checkbox-color);\n\n    & + .icon {\n      opacity: 1;\n      transform: none;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: var(--mantine-color-disabled-border);\n    background-color: var(--mantine-color-disabled);\n\n    & + .icon {\n      color: var(--mantine-color-disabled-color);\n    }\n  }\n}\n\n.input--outline {\n  & + .icon {\n    color: var(--checkbox-color);\n  }\n\n  &[data-indeterminate]:not(:disabled),\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--checkbox-color);\n\n    & + .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  position: absolute;\n  inset: 0;\n  width: 60%;\n  margin: auto;\n  color: var(--checkbox-icon-color);\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 0;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}
+{"version":3,"file":"Checkbox.module.mjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":[".root {\n  --checkbox-size-xs: 16px;\n  --checkbox-size-sm: 20px;\n  --checkbox-size-md: 24px;\n  --checkbox-size-lg: 30px;\n  --checkbox-size-xl: 36px;\n\n  --checkbox-size: var(--checkbox-size-sm);\n  --checkbox-color: var(--mantine-primary-color-filled);\n\n  &:where([data-variant='filled']) {\n    --checkbox-icon-color: var(--mantine-color-white);\n  }\n\n  &:where([data-variant='outline']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n\n  &:where([data-variant='light']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n}\n\n.inner {\n  position: relative;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.input {\n  appearance: none;\n  border: 1px solid transparent;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n  padding: 0;\n  display: block;\n  margin: 0;\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n\n  &[data-indeterminate],\n  &:checked {\n    background-color: var(--checkbox-color);\n    border-color: var(--checkbox-color);\n\n    & + .icon {\n      opacity: 1;\n      transform: none;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: var(--mantine-color-disabled-border);\n    background-color: var(--mantine-color-disabled);\n\n    & + .icon {\n      color: var(--mantine-color-disabled-color);\n    }\n  }\n}\n\n.input--light {\n  & + .icon {\n    color: var(--checkbox-color);\n  }\n\n  &[data-indeterminate]:not(:disabled),\n  &:checked:not(:disabled) {\n    background-color: var(--checkbox-bg);\n    border-color: transparent;\n\n    & + .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.input--outline {\n  & + .icon {\n    color: var(--checkbox-color);\n  }\n\n  &[data-indeterminate]:not(:disabled),\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--checkbox-color);\n\n    & + .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  position: absolute;\n  inset: 0;\n  width: 60%;\n  margin: auto;\n  color: var(--checkbox-icon-color);\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 0;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs

@@ -26,11 +26,19 @@ const varsResolver = createVarsResolver((theme, { radius, color, size, iconColor
 		theme
 	});
 	const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
+	const lightColors = variant === "light" ? theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: "light",
+		autoContrast
+	}) : void 0;
+	const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : getThemeColor(color, theme);
 	return { indicator: {
 		"--checkbox-size": getSize(size, "checkbox-size"),
 		"--checkbox-radius": radius === void 0 ? void 0 : getRadius(radius),
-		"--checkbox-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
-		"--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
+		"--checkbox-color": resolvedColor,
+		"--checkbox-bg": lightColors?.background,
+		"--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : lightColors ? lightColors.color : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
 			color,
 			theme,
 			autoContrast

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _indeterminate = typeof indeterminate === 'boolean' ? indeterminate : ctx?.indeterminate;\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || ctx?.indeterminate || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={_indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACxE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EACrF,yBAAyB,YACrB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,iBAAiB,OAAO,kBAAkB,YAAY,gBAAgB,KAAK;CACjF,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW,KAAK,iBAAiB;CAE5C,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAM,eAAe;GAAgB,GAAI,UAAU,MAAM;EAAI,CAAA;CAC1D,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline' | 'light';\nexport type CheckboxIndicatorCssVariables = {\n  indicator:\n    | '--checkbox-size'\n    | '--checkbox-radius'\n    | '--checkbox-color'\n    | '--checkbox-icon-color'\n    | '--checkbox-bg';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    const lightColors =\n      variant === 'light'\n        ? theme.variantColorResolver({\n            color: color || theme.primaryColor,\n            theme,\n            variant: 'light',\n            autoContrast,\n          })\n        : undefined;\n\n    const resolvedColor =\n      variant === 'outline'\n        ? outlineColor\n        : lightColors\n          ? lightColors.color\n          : getThemeColor(color, theme);\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': resolvedColor,\n        '--checkbox-bg': lightColors?.background,\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : lightColors\n            ? lightColors.color\n            : getAutoContrastValue(autoContrast, theme)\n              ? getContrastColor({ color, theme, autoContrast })\n              : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _indeterminate = typeof indeterminate === 'boolean' ? indeterminate : ctx?.indeterminate;\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || ctx?.indeterminate || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={_indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2EA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,MAAM,cACJ,YAAY,UACR,MAAM,qBAAqB;EACzB,OAAO,SAAS,MAAM;EACtB;EACA,SAAS;EACT;CACF,CAAC,IACD,KAAA;CAEN,MAAM,gBACJ,YAAY,YACR,eACA,cACE,YAAY,QACZ,cAAc,OAAO,KAAK;CAElC,OAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACxE,oBAAoB;EACpB,iBAAiB,aAAa;EAC9B,yBAAyB,YACrB,cAAc,WAAW,KAAK,IAC9B,cACE,YAAY,QACZ,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACV,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,iBAAiB,OAAO,kBAAkB,YAAY,gBAAgB,KAAK;CACjF,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW,KAAK,iBAAiB;CAE5C,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAM,eAAe;GAAgB,GAAI,UAAU,MAAM;EAAI,CAAA;CAC1D,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.mjs

@@ -3,6 +3,7 @@
 var CheckboxIndicator_module_default = {
 	"indicator": "m_5e5256ee",
 	"icon": "m_1b1c543a",
+	"indicator--light": "m_193e54c8",
 	"indicator--outline": "m_76e20374"
 };
 //#endregion

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.module.mjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css"],"sourcesContent":[".indicator {\n  --checkbox-size-xs: 16px;\n  --checkbox-size-sm: 20px;\n  --checkbox-size-md: 24px;\n  --checkbox-size-lg: 30px;\n  --checkbox-size-xl: 36px;\n\n  --checkbox-size: var(--checkbox-size-sm);\n  --checkbox-color: var(--mantine-primary-color-filled);\n\n  &:where([data-variant='filled']) {\n    --checkbox-icon-color: var(--mantine-color-white);\n  }\n\n  &:where([data-variant='outline']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n\n  position: relative;\n  border: 1px solid transparent;\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &[data-indeterminate],\n  &[data-checked] {\n    background-color: var(--checkbox-color);\n    border-color: var(--checkbox-color);\n\n    & > .icon {\n      opacity: 1;\n      transform: none;\n      color: var(--checkbox-icon-color);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    border-color: var(--mantine-color-disabled-border);\n    background-color: var(--mantine-color-disabled);\n\n    &[data-checked] > .icon {\n      @mixin light {\n        color: var(--mantine-color-gray-5);\n      }\n\n      @mixin dark {\n        color: var(--mantine-color-dark-3);\n      }\n    }\n  }\n}\n\n.indicator--outline {\n  &[data-indeterminate]:not([data-disabled]),\n  &[data-checked]:not([data-disabled]) {\n    background-color: transparent;\n    border-color: var(--checkbox-color);\n\n    & > .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  display: block;\n  width: 60%;\n  color: transparent;\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 1;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}
+{"version":3,"file":"CheckboxIndicator.module.mjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css"],"sourcesContent":[".indicator {\n  --checkbox-size-xs: 16px;\n  --checkbox-size-sm: 20px;\n  --checkbox-size-md: 24px;\n  --checkbox-size-lg: 30px;\n  --checkbox-size-xl: 36px;\n\n  --checkbox-size: var(--checkbox-size-sm);\n  --checkbox-color: var(--mantine-primary-color-filled);\n\n  &:where([data-variant='filled']) {\n    --checkbox-icon-color: var(--mantine-color-white);\n  }\n\n  &:where([data-variant='outline']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n\n  &:where([data-variant='light']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n\n  position: relative;\n  border: 1px solid transparent;\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &[data-indeterminate],\n  &[data-checked] {\n    background-color: var(--checkbox-color);\n    border-color: var(--checkbox-color);\n\n    & > .icon {\n      opacity: 1;\n      transform: none;\n      color: var(--checkbox-icon-color);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    border-color: var(--mantine-color-disabled-border);\n    background-color: var(--mantine-color-disabled);\n\n    &[data-checked] > .icon {\n      @mixin light {\n        color: var(--mantine-color-gray-5);\n      }\n\n      @mixin dark {\n        color: var(--mantine-color-dark-3);\n      }\n    }\n  }\n}\n\n.indicator--light {\n  &[data-indeterminate]:not([data-disabled]),\n  &[data-checked]:not([data-disabled]) {\n    background-color: var(--checkbox-bg);\n    border-color: transparent;\n\n    & > .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.indicator--outline {\n  &[data-indeterminate]:not([data-disabled]),\n  &[data-checked]:not([data-disabled]) {\n    background-color: transparent;\n    border-color: var(--checkbox-color);\n\n    & > .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  display: block;\n  width: 60%;\n  color: transparent;\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 1;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}

package/esm/components/Dialog/Dialog.mjs

@@ -13,7 +13,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Dialog/Dialog.tsx
 const defaultProps = {
 	shadow: "md",
-	p: "md",
 	withBorder: true,
 	transitionProps: {
 		transition: "pop-top-right",

package/esm/components/Dialog/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' | 'closeButton';\nexport type DialogCssVariables = {\n  root: '--dialog-size';\n};\n\nexport interface DialogProps\n  extends\n    BoxProps,\n    AffixBaseProps,\n    PaperBaseProps,\n    StylesApiProps<DialogFactory>,\n    ElementProps<'div'> {\n  /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */\n  keepMounted?: boolean;\n\n  /** If set, displays the close button @default false */\n  withCloseButton?: boolean;\n\n  /** Called on close button click */\n  onClose?: () => void;\n\n  /** Dialog content */\n  children?: React.ReactNode;\n\n  /** Opened state */\n  opened: boolean;\n\n  /** Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } */\n  transitionProps?: TransitionOverride;\n\n  /** Controls `width` of the dialog @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n}\n\nexport type DialogFactory = Factory<{\n  props: DialogProps;\n  ref: HTMLDivElement;\n  stylesNames: DialogStylesNames;\n  vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n  shadow: 'md',\n  p: 'md',\n  withBorder: true,\n  transitionProps: { transition: 'pop-top-right', duration: 200 },\n  position: {\n    bottom: 30,\n    right: 30,\n  },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n  root: {\n    '--dialog-size': getSize(size, 'dialog-size'),\n  },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n  const props = useProps('Dialog', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    zIndex,\n    position,\n    keepMounted,\n    opened,\n    transitionProps,\n    withCloseButton,\n    withinPortal,\n    children,\n    onClose,\n    portalProps,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<DialogFactory>({\n    name: 'Dialog',\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    <Affix\n      zIndex={zIndex}\n      position={position}\n      withinPortal={withinPortal}\n      portalProps={portalProps}\n      unstyled={unstyled}\n    >\n      <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n        {(transitionStyles) => (\n          <Paper\n            unstyled={unstyled}\n            {...getStyles('root', { style: transitionStyles })}\n            {...others}\n          >\n            {withCloseButton && (\n              <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n            )}\n            {children}\n          </Paper>\n        )}\n      </Transition>\n    </Affix>\n  );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n  export type Props = DialogProps;\n  export type StylesNames = DialogStylesNames;\n  export type CssVariables = DialogCssVariables;\n  export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;EAEV,UAAA,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;GACvD,WAAA,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;IAHN,UAAA,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
+{"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' | 'closeButton';\nexport type DialogCssVariables = {\n  root: '--dialog-size';\n};\n\nexport interface DialogProps\n  extends\n    BoxProps,\n    AffixBaseProps,\n    PaperBaseProps,\n    StylesApiProps<DialogFactory>,\n    ElementProps<'div'> {\n  /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */\n  keepMounted?: boolean;\n\n  /** If set, displays the close button @default false */\n  withCloseButton?: boolean;\n\n  /** Called on close button click */\n  onClose?: () => void;\n\n  /** Dialog content */\n  children?: React.ReactNode;\n\n  /** Opened state */\n  opened: boolean;\n\n  /** Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } */\n  transitionProps?: TransitionOverride;\n\n  /** Controls `width` of the dialog @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n}\n\nexport type DialogFactory = Factory<{\n  props: DialogProps;\n  ref: HTMLDivElement;\n  stylesNames: DialogStylesNames;\n  vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n  shadow: 'md',\n  withBorder: true,\n  transitionProps: { transition: 'pop-top-right', duration: 200 },\n  position: {\n    bottom: 30,\n    right: 30,\n  },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n  root: {\n    '--dialog-size': getSize(size, 'dialog-size'),\n  },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n  const props = useProps('Dialog', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    zIndex,\n    position,\n    keepMounted,\n    opened,\n    transitionProps,\n    withCloseButton,\n    withinPortal,\n    children,\n    onClose,\n    portalProps,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<DialogFactory>({\n    name: 'Dialog',\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    <Affix\n      zIndex={zIndex}\n      position={position}\n      withinPortal={withinPortal}\n      portalProps={portalProps}\n      unstyled={unstyled}\n    >\n      <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n        {(transitionStyles) => (\n          <Paper\n            unstyled={unstyled}\n            {...getStyles('root', { style: transitionStyles })}\n            {...others}\n          >\n            {withCloseButton && (\n              <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n            )}\n            {children}\n          </Paper>\n        )}\n      </Transition>\n    </Affix>\n  );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n  export type Props = DialogProps;\n  export type StylesNames = DialogStylesNames;\n  export type CssVariables = DialogCssVariables;\n  export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;EAEV,UAAA,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;GACvD,WAAA,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;IAHN,UAAA,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.module.mjs","names":[],"sources":["../../../src/components/Dialog/Dialog.module.css"],"sourcesContent":[".root {\n  --dialog-size-xs: 160px;\n  --dialog-size-sm: 200px;\n  --dialog-size-md: 340px;\n  --dialog-size-lg: 400px;\n  --dialog-size-xl: 500px;\n  --dialog-size: var(--dialog-size-md);\n\n  position: relative;\n  width: var(--dialog-size);\n  max-width: calc(100vw - var(--mantine-spacing-xl) * 2);\n  min-height: 50px;\n}\n\n.closeButton {\n  position: absolute;\n  top: calc(var(--mantine-spacing-md) / 2);\n  inset-inline-end: calc(var(--mantine-spacing-md) / 2);\n}\n"],"mappings":""}
+{"version":3,"file":"Dialog.module.mjs","names":[],"sources":["../../../src/components/Dialog/Dialog.module.css"],"sourcesContent":[".root {\n  --dialog-size-xs: 160px;\n  --dialog-size-sm: 200px;\n  --dialog-size-md: 340px;\n  --dialog-size-lg: 400px;\n  --dialog-size-xl: 500px;\n  --dialog-size: var(--dialog-size-md);\n\n  position: relative;\n  width: var(--dialog-size);\n  max-width: calc(100vw - var(--mantine-spacing-xl) * 2);\n  min-height: 50px;\n  padding: var(--mantine-spacing-md);\n}\n\n.closeButton {\n  position: absolute;\n  top: calc(var(--mantine-spacing-md) / 2);\n  inset-inline-end: calc(var(--mantine-spacing-md) / 2);\n}\n"],"mappings":""}

package/esm/components/HoverCard/HoverCard.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.context.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface HoverCardContextValue {\n  openDropdown: () => void;\n  closeDropdown: () => void;\n  assignTarget: (node: HTMLElement | null) => void;\n  getReferenceProps?: () => any;\n  getFloatingProps?: () => any;\n  reference?: (node: HTMLElement | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n}\n\nexport const [HoverCardContext, useHoverCardContext] = createSafeContext<HoverCardContextValue>(\n  'HoverCard component was not found in the tree'\n);\n"],"mappings":";;;AAYA,MAAa,CAAC,kBAAkB,uBAAuB,kBACrD,+CACF"}
+{"version":3,"file":"HoverCard.context.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface HoverCardContextValue {\n  openDropdown: () => void;\n  closeDropdown: () => void;\n  assignTarget: (node: HTMLElement | null) => void;\n  getReferenceProps: (userProps?: Record<string, any>) => Record<string, any>;\n  getFloatingProps: (userProps?: Record<string, any>) => Record<string, any>;\n  reference: (node: HTMLElement | null) => void;\n  floating: (node: HTMLElement | null) => void;\n  opened: boolean;\n  role: 'dialog' | 'tooltip';\n  withRoles: boolean;\n  dropdownId: string;\n}\n\nexport const [HoverCardContext, useHoverCardContext] = createSafeContext<HoverCardContextValue>(\n  'HoverCard component was not found in the tree'\n);\n"],"mappings":";;;AAgBA,MAAa,CAAC,kBAAkB,uBAAuB,kBACrD,+CACF"}

package/esm/components/HoverCard/HoverCard.mjs

@@ -2,25 +2,45 @@
 import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
 import { Popover } from "../Popover/Popover.mjs";
 import { HoverCardContext } from "./HoverCard.context.mjs";
-import { HoverCardGroup } from "./HoverCardGroup/HoverCardGroup.mjs";
 import { HoverCardDropdown } from "./HoverCardDropdown/HoverCardDropdown.mjs";
+import { HoverCardGroup } from "./HoverCardGroup/HoverCardGroup.mjs";
 import { HoverCardTarget } from "./HoverCardTarget/HoverCardTarget.mjs";
 import { useHoverCard } from "./use-hover-card.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/HoverCard/HoverCard.tsx
+const DEFAULT_EVENTS = {
+	hover: true,
+	focus: true,
+	touch: false
+};
 const defaultProps = {
 	openDelay: 0,
 	closeDelay: 150,
-	initiallyOpened: false
+	initiallyOpened: false,
+	interactive: false,
+	closeOnEscape: true,
+	closeOnClickOutside: true,
+	role: "dialog"
 };
 function HoverCard(props) {
-	const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps("HoverCard", defaultProps, props);
+	const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, events, interactive, closeOnEscape, closeOnClickOutside, returnFocus, onDismiss, id, role, withRoles, ...others } = useProps("HoverCard", defaultProps, props);
+	const resolvedEvents = {
+		...DEFAULT_EVENTS,
+		...events
+	};
+	const rolesEnabled = withRoles !== false;
 	const hoverCard = useHoverCard({
 		openDelay,
 		closeDelay,
 		defaultOpened: initiallyOpened,
 		onOpen,
-		onClose
+		onClose,
+		events: resolvedEvents,
+		interactive,
+		closeOnEscape,
+		closeOnClickOutside,
+		onDismiss,
+		id
 	});
 	return /* @__PURE__ */ jsx(HoverCardContext, {
 		value: {
@@ -30,10 +50,19 @@ function HoverCard(props) {
 			getReferenceProps: hoverCard.getReferenceProps,
 			getFloatingProps: hoverCard.getFloatingProps,
 			reference: hoverCard.reference,
-			floating: hoverCard.floating
+			floating: hoverCard.floating,
+			opened: hoverCard.opened,
+			dropdownId: hoverCard.dropdownId,
+			role,
+			withRoles: rolesEnabled
 		},
 		children: /* @__PURE__ */ jsx(Popover, {
 			...others,
+			id,
+			closeOnEscape,
+			closeOnClickOutside,
+			returnFocus: resolvedEvents.focus ? false : returnFocus,
+			withRoles: role === "tooltip" ? false : withRoles,
 			opened: hoverCard.opened,
 			__staticSelector: "HoverCard",
 			children