@mantine/core 9.6.2 → 9.7.0

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":";;;;;;;;;;;;;;;;;;;;;;AA+HA,MAAM,eAAe;CACnB,eAAe;CACf,MAAM;CACN,iBAAiB;CACjB,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,MAAM;EACJ,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,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,IACA,MACA,QACA,cACA,SACA,eACA,aACA,OACA,UACA,SACA,eACA,MAAM,MACN,SACA,WACA,UACA,cACA,KACA,YACA,UACA,SACA,iBACA,KACA,GAAG,WACD;CAEJ,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,OAAOA,QAAM,EAAE;CAGrB,MAAM,cACJ;EAHoB,cAAc,GAAG,KAAK,gBAAgB,KAAA;EAC5C,SAAS,OAAO,UAAU,YAAY,GAAG,KAAK,UAAU,KAAA;EAE7C,KAAK;CAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAElF,MAAM,mBAAmB;EACvB,SAAS,KAAK,MAAM,SAAS,KAAK,KAAe,KAAK;EACtD,WAAW,UAA+C;GACxD,IAAI,UACF;GAGF,KAAK,SAAS,KAAK;GACnB,WAAW,KAAK;EAClB;CACF;CAEA,MAAM,oBAAoB,KAAK,aAAa,KAAK,KAAe,KAAK;CACrE,MAAM,gBAAgB,YAAY;CAElC,gBAAgB;EACd,IAAI,SAAS,SAAS;GACpB,SAAS,QAAQ,gBAAgB,iBAAiB;GAElD,IAAI,eACF,SAAS,QAAQ,aAAa,sBAAsB,MAAM;QAE1D,SAAS,QAAQ,gBAAgB,oBAAoB;EAEzD;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,aAAD;EACE,GAAI,UAAU,MAAM;EACpB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU;EACE;EACJ;EACE;EACV,gBAAc,iBAAiB,WAAW,WAAW,KAAA;EAC5C;EACT,KAAK;EACA;EACO;EACZ,OAAO,KAAK;EACZ,GAAI;EACJ,GAAI;EAEJ,UAAA,qBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAG,KAAK,EAAE,cAAc;GAAlD,UAAA,CACE,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;IACJ,KAAK,aAAa,UAAU,GAAG;IAC/B,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;IAAgB;IAC5D,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;IAAQ,CAAC;IACnD,GAAI;IACJ,GAAI;IACJ,oBAAkB;IAClB,UAAU;IACV,OAAO,KAAK;IACZ,MAAK;IACL,UAAU,UAAU;KAClB,IAAI,YAAY,iBAAiB,YAAY,KAAA,GAC3C,MAAM,eAAe;KAGvB,UAAU,KAAK;IACjB;GACD,CAAA,GAED,oBAAC,MAAD;IAAqB;IAAe,GAAI,UAAU,MAAM;GAAI,CAAA,CACzD;;CACM,CAAA;AAEjB,CAAC;AAED,SAAS,UAAU;CAAE,GAAGC;CAAS,GAAG;AAAmB;AACvD,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,QAAQ;AACjB,SAAS,YAAY;AACrB,SAAS,OAAO"}

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/ComboboxPopover/ComboboxPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.mjs","names":["comboboxClasses"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopover.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  Factory,\n  genericFactory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  Combobox,\n  ComboboxData,\n  ComboboxItem,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxProps,\n  defaultOptionsFilter,\n  getOptionsLockup,\n  getParsedComboboxData,\n  isOptionsGroup,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport { ComboboxParsedItem } from '../Combobox/Combobox.types';\nimport { isEmptyComboboxData } from '../Combobox/OptionsDropdown/is-empty-combobox-data';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { ComboboxPopoverValue } from './ComboboxPopover.types';\nimport { ComboboxPopoverTarget } from './ComboboxPopoverTarget';\nimport comboboxClasses from '../Combobox/Combobox.module.css';\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\ninterface OptionProps {\n  data: ComboboxParsedItem<Primitive>;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (isOptionsGroup(data)) {\n    const options = data.items.map((item) => (\n      <Option\n        data={item}\n        value={value}\n        key={`${item.value}`}\n        unstyled={unstyled}\n        withCheckIcon={withCheckIcon}\n        withAlignedLabels={withAlignedLabels}\n        checkIconPosition={checkIconPosition}\n        renderOption={renderOption}\n      />\n    ));\n    return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n  }\n\n  const checked = isValueChecked(value, data.value);\n  const check =\n    withCheckIcon &&\n    (checked ? (\n      <CheckIcon className={comboboxClasses.optionsDropdownCheckIcon} />\n    ) : withAlignedLabels ? (\n      <div className={comboboxClasses.optionsDropdownCheckPlaceholder} />\n    ) : null);\n\n  const defaultContent = (\n    <>\n      {checkIconPosition === 'left' && check}\n      <span>{data.label}</span>\n      {checkIconPosition === 'right' && check}\n    </>\n  );\n\n  return (\n    <Combobox.Option\n      value={data.value}\n      disabled={data.disabled}\n      className={cx({ [comboboxClasses.optionsDropdownOption]: !unstyled })}\n      data-reverse={checkIconPosition === 'right' || undefined}\n      data-checked={checked || undefined}\n      aria-selected={checked}\n      active={checked}\n    >\n      {typeof renderOption === 'function'\n        ? renderOption({ option: data, checked })\n        : defaultContent}\n    </Combobox.Option>\n  );\n}\n\ninterface SearchableDropdownProps {\n  data: ComboboxParsedItem<Primitive>[];\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string;\n  limit: number | undefined;\n  nothingFoundMessage: React.ReactNode | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  value: Primitive | Primitive[] | null;\n  checkIconPosition: 'left' | 'right' | undefined;\n  withCheckIcon: boolean | undefined;\n  withAlignedLabels: boolean | undefined;\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction SearchableDropdown({\n  data,\n  filter,\n  search,\n  limit,\n  nothingFoundMessage,\n  withScrollArea = true,\n  maxDropdownHeight,\n  value,\n  checkIconPosition,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  unstyled,\n  renderOption,\n  scrollAreaProps,\n  onSearchChange,\n}: SearchableDropdownProps) {\n  const filteredData = (filter || defaultOptionsFilter)({\n    options: data,\n    search,\n    limit: limit ?? Infinity,\n  });\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item, index) => (\n    <Option\n      data={item}\n      key={\n        isOptionsGroup(item)\n          ? `group-${typeof item.group === 'string' ? item.group : index}`\n          : `${item.value}`\n      }\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      value={value}\n      checkIconPosition={checkIconPosition}\n      unstyled={unstyled}\n      renderOption={renderOption}\n    />\n  ));\n\n  return (\n    <Combobox.Dropdown data-composed>\n      <Combobox.Search value={search} onChange={onSearchChange} placeholder=\"Search...\" />\n      <Combobox.Options>\n        {withScrollArea ? (\n          <ScrollArea.Autosize\n            mah={maxDropdownHeight ?? 220}\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {options}\n          </ScrollArea.Autosize>\n        ) : (\n          options\n        )}\n        {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n      </Combobox.Options>\n    </Combobox.Dropdown>\n  );\n}\n\nexport type ComboboxPopoverStylesNames = ComboboxLikeStylesNames | 'search';\n\nexport interface ComboboxPopoverProps<\n  Multiple extends boolean = false,\n  Value extends Primitive = string,\n> extends StylesApiProps<ComboboxPopoverFactory> {\n  /** If set, multiple items can be selected at the same time */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Called when value changes */\n  onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;\n\n  /** Data used to generate options */\n  data?: ComboboxData<Value>;\n\n  /** Controlled dropdown opened state */\n  dropdownOpened?: boolean;\n\n  /** Uncontrolled dropdown initial opened state */\n  defaultDropdownOpened?: boolean;\n\n  /** Called when dropdown opens */\n  onDropdownOpen?: () => void;\n\n  /** Called when dropdown closes */\n  onDropdownClose?: () => void;\n\n  /** Called when option is submitted from dropdown with mouse click or Enter key */\n  onOptionSubmit?: (value: Value) => void;\n\n  /** Props passed down to Combobox component */\n  comboboxProps?: ComboboxProps;\n\n  /** Function based on which items are filtered and sorted */\n  filter?: OptionsFilter<Value>;\n\n  /** Maximum number of options displayed at a time @default Infinity */\n  limit?: number;\n\n  /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */\n  withScrollArea?: boolean;\n\n  /** max-height of the dropdown @default 250 */\n  maxDropdownHeight?: number | string;\n\n  /** If set, the first option is selected when dropdown opens @default false */\n  selectFirstOptionOnDropdownOpen?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Allows searching through options @default false */\n  searchable?: boolean;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it (only for single mode) @default true */\n  allowDeselect?: boolean;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** Props passed down to the underlying ScrollArea component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Hidden input name for form submission */\n  name?: string;\n\n  /** Hidden input form for form submission */\n  form?: string;\n\n  /** Content of the component */\n  children?: React.ReactNode;\n\n  /** Divider used to separate values in the hidden input value attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n}\n\nexport type ComboboxPopoverFactory = Factory<{\n  props: ComboboxPopoverProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxPopoverStylesNames;\n  signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n    props: ComboboxPopoverProps<Multiple, Value>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Target: typeof ComboboxPopoverTarget;\n  };\n}>;\n\nconst defaultProps = {\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n} satisfies Partial<ComboboxPopoverProps>;\n\nexport const ComboboxPopover = genericFactory<ComboboxPopoverFactory>((_props) => {\n  const props = useProps('ComboboxPopover', defaultProps as any, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    selectFirstOptionOnDropdownOpen,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    nothingFoundMessage,\n    searchable,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    renderOption,\n    scrollAreaProps,\n    hiddenInputProps,\n    name,\n    form,\n    hiddenInputValuesDivider,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (searchable) {\n        combobox.focusSearchInput();\n      }\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const handleSearchChange = (val: string) => {\n    setSearchValue(val);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ComboboxPopoverFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleOptionSubmit = (val: string) => {\n    onOptionSubmit?.(val as any);\n    const option = optionsLockup[val];\n\n    if (multiple) {\n      const currentValue = Array.isArray(_value) ? _value : [];\n      if (currentValue.includes(option.value)) {\n        setValue(currentValue.filter((v: any) => v !== option.value) as any);\n      } else {\n        setValue([...currentValue, option.value] as any);\n      }\n      combobox.updateSelectedOptionIndex('selected');\n    } else {\n      const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;\n      setValue(nextValue as any);\n      combobox.closeDropdown();\n    }\n\n    if (searchable) {\n      handleSearchChange('');\n    }\n  };\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"ComboboxPopover\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        attributes={attributes}\n        onOptionSubmit={handleOptionSubmit}\n        returnFocus\n        {...comboboxProps}\n        {...others}\n      >\n        {children}\n        {searchable ? (\n          <SearchableDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={_searchValue}\n            limit={limit}\n            nothingFoundMessage={nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            onSearchChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n            }}\n          />\n        ) : (\n          <OptionsDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={undefined}\n            limit={limit}\n            hiddenWhenEmpty={!nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            filterOptions={false}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            nothingFoundMessage={nothingFoundMessage}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            labelId={undefined}\n            aria-label={undefined}\n          />\n        )}\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        value={_value}\n        form={form}\n        valuesDivider={hiddenInputValuesDivider}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nComboboxPopover.classes = Combobox.classes;\nComboboxPopover.displayName = '@mantine/core/ComboboxPopover';\nComboboxPopover.Target = ComboboxPopoverTarget;\n"],"mappings":"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"}
+{"version":3,"file":"ComboboxPopover.mjs","names":["comboboxClasses"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopover.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  Factory,\n  genericFactory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  Combobox,\n  ComboboxData,\n  ComboboxItem,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxProps,\n  defaultOptionsFilter,\n  getOptionsLockup,\n  getParsedComboboxData,\n  isOptionsGroup,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport { ComboboxParsedItem } from '../Combobox/Combobox.types';\nimport { isEmptyComboboxData } from '../Combobox/OptionsDropdown/is-empty-combobox-data';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { ComboboxPopoverValue } from './ComboboxPopover.types';\nimport { ComboboxPopoverTarget } from './ComboboxPopoverTarget';\nimport comboboxClasses from '../Combobox/Combobox.module.css';\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\ninterface OptionProps {\n  data: ComboboxParsedItem<Primitive>;\n  withCheckIcon?: boolean;\n  withAlignedLabels?: boolean;\n  value?: Primitive | Primitive[] | null;\n  checkIconPosition?: 'left' | 'right';\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction Option({\n  data,\n  withCheckIcon,\n  withAlignedLabels,\n  value,\n  checkIconPosition,\n  unstyled,\n  renderOption,\n}: OptionProps) {\n  if (isOptionsGroup(data)) {\n    const options = data.items.map((item) => (\n      <Option\n        data={item}\n        value={value}\n        key={`${item.value}`}\n        unstyled={unstyled}\n        withCheckIcon={withCheckIcon}\n        withAlignedLabels={withAlignedLabels}\n        checkIconPosition={checkIconPosition}\n        renderOption={renderOption}\n      />\n    ));\n    return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n  }\n\n  const checked = isValueChecked(value, data.value);\n  const check =\n    withCheckIcon &&\n    (checked ? (\n      <CheckIcon className={comboboxClasses.optionsDropdownCheckIcon} />\n    ) : withAlignedLabels ? (\n      <div className={comboboxClasses.optionsDropdownCheckPlaceholder} />\n    ) : null);\n\n  const defaultContent = (\n    <>\n      {checkIconPosition === 'left' && check}\n      <span>{data.label}</span>\n      {checkIconPosition === 'right' && check}\n    </>\n  );\n\n  return (\n    <Combobox.Option\n      value={data.value}\n      disabled={data.disabled}\n      className={cx({ [comboboxClasses.optionsDropdownOption]: !unstyled })}\n      data-reverse={checkIconPosition === 'right' || undefined}\n      data-checked={checked || undefined}\n      aria-selected={checked}\n      active={checked}\n    >\n      {typeof renderOption === 'function'\n        ? renderOption({ option: data, checked })\n        : defaultContent}\n    </Combobox.Option>\n  );\n}\n\ninterface SearchableDropdownProps {\n  data: ComboboxParsedItem<Primitive>[];\n  filter: OptionsFilter<Primitive> | undefined;\n  search: string;\n  limit: number | undefined;\n  nothingFoundMessage: React.ReactNode | undefined;\n  withScrollArea: boolean | undefined;\n  maxDropdownHeight: number | string | undefined;\n  value: Primitive | Primitive[] | null;\n  checkIconPosition: 'left' | 'right' | undefined;\n  withCheckIcon: boolean | undefined;\n  withAlignedLabels: boolean | undefined;\n  unstyled: boolean | undefined;\n  renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n  scrollAreaProps: ScrollAreaProps | undefined;\n  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction SearchableDropdown({\n  data,\n  filter,\n  search,\n  limit,\n  nothingFoundMessage,\n  withScrollArea = true,\n  maxDropdownHeight,\n  value,\n  checkIconPosition,\n  withCheckIcon = false,\n  withAlignedLabels = false,\n  unstyled,\n  renderOption,\n  scrollAreaProps,\n  onSearchChange,\n}: SearchableDropdownProps) {\n  const filteredData = (filter || defaultOptionsFilter)({\n    options: data,\n    search,\n    limit: limit ?? Infinity,\n  });\n  const isEmpty = isEmptyComboboxData(filteredData);\n\n  const options = filteredData.map((item, index) => (\n    <Option\n      data={item}\n      key={\n        isOptionsGroup(item)\n          ? `group-${typeof item.group === 'string' ? item.group : index}`\n          : `${item.value}`\n      }\n      withCheckIcon={withCheckIcon}\n      withAlignedLabels={withAlignedLabels}\n      value={value}\n      checkIconPosition={checkIconPosition}\n      unstyled={unstyled}\n      renderOption={renderOption}\n    />\n  ));\n\n  return (\n    <Combobox.Dropdown data-composed>\n      <Combobox.Search value={search} onChange={onSearchChange} placeholder=\"Search...\" />\n      <Combobox.Options>\n        {withScrollArea ? (\n          <ScrollArea.Autosize\n            mah={maxDropdownHeight ?? 220}\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {options}\n          </ScrollArea.Autosize>\n        ) : (\n          options\n        )}\n        {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n      </Combobox.Options>\n    </Combobox.Dropdown>\n  );\n}\n\nexport type ComboboxPopoverStylesNames = ComboboxLikeStylesNames | 'search';\n\nexport interface ComboboxPopoverProps<\n  Multiple extends boolean = false,\n  Value extends Primitive = string,\n> extends StylesApiProps<ComboboxPopoverFactory> {\n  /** If set, multiple items can be selected at the same time */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: ComboboxPopoverValue<Multiple, Value>;\n\n  /** Called when value changes */\n  onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;\n\n  /** Data used to generate options */\n  data?: ComboboxData<Value>;\n\n  /** Controlled dropdown opened state */\n  dropdownOpened?: boolean;\n\n  /** Uncontrolled dropdown initial opened state */\n  defaultDropdownOpened?: boolean;\n\n  /** Called when dropdown opens */\n  onDropdownOpen?: () => void;\n\n  /** Called when dropdown closes */\n  onDropdownClose?: () => void;\n\n  /** Called when option is submitted from dropdown with mouse click or Enter key */\n  onOptionSubmit?: (value: Value) => void;\n\n  /** Props passed down to Combobox component */\n  comboboxProps?: ComboboxProps;\n\n  /** Function based on which items are filtered and sorted */\n  filter?: OptionsFilter<Value>;\n\n  /** Maximum number of options displayed at a time @default Infinity */\n  limit?: number;\n\n  /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */\n  withScrollArea?: boolean;\n\n  /** max-height of the dropdown @default 220 */\n  maxDropdownHeight?: number | string;\n\n  /** If set, the first option is selected when dropdown opens @default false */\n  selectFirstOptionOnDropdownOpen?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Allows searching through options @default false */\n  searchable?: boolean;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it (only for single mode) @default true */\n  allowDeselect?: boolean;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** Props passed down to the underlying ScrollArea component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Hidden input name for form submission */\n  name?: string;\n\n  /** Hidden input form for form submission */\n  form?: string;\n\n  /** Content of the component */\n  children?: React.ReactNode;\n\n  /** Divider used to separate values in the hidden input value attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n}\n\nexport type ComboboxPopoverFactory = Factory<{\n  props: ComboboxPopoverProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxPopoverStylesNames;\n  signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n    props: ComboboxPopoverProps<Multiple, Value>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Target: typeof ComboboxPopoverTarget;\n  };\n}>;\n\nconst defaultProps = {\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n} satisfies Partial<ComboboxPopoverProps>;\n\nexport const ComboboxPopover = genericFactory<ComboboxPopoverFactory>((_props) => {\n  const props = useProps('ComboboxPopover', defaultProps as any, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    selectFirstOptionOnDropdownOpen,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    nothingFoundMessage,\n    searchable,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    renderOption,\n    scrollAreaProps,\n    hiddenInputProps,\n    name,\n    form,\n    hiddenInputValuesDivider,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (searchable) {\n        combobox.focusSearchInput();\n      }\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const handleSearchChange = (val: string) => {\n    setSearchValue(val);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ComboboxPopoverFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleOptionSubmit = (val: string) => {\n    onOptionSubmit?.(val as any);\n    const option = optionsLockup[val];\n\n    if (multiple) {\n      const currentValue = Array.isArray(_value) ? _value : [];\n      if (currentValue.includes(option.value)) {\n        setValue(currentValue.filter((v: any) => v !== option.value) as any);\n      } else {\n        setValue([...currentValue, option.value] as any);\n      }\n      combobox.updateSelectedOptionIndex('selected');\n    } else {\n      const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;\n      setValue(nextValue as any);\n      combobox.closeDropdown();\n    }\n\n    if (searchable) {\n      handleSearchChange('');\n    }\n  };\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"ComboboxPopover\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        attributes={attributes}\n        onOptionSubmit={handleOptionSubmit}\n        returnFocus\n        {...comboboxProps}\n        {...others}\n      >\n        {children}\n        {searchable ? (\n          <SearchableDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={_searchValue}\n            limit={limit}\n            nothingFoundMessage={nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            onSearchChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n            }}\n          />\n        ) : (\n          <OptionsDropdown\n            data={parsedData as any}\n            filter={filter as OptionsFilter<Primitive> | undefined}\n            search={undefined}\n            limit={limit}\n            hiddenWhenEmpty={!nothingFoundMessage}\n            withScrollArea={withScrollArea}\n            maxDropdownHeight={maxDropdownHeight}\n            filterOptions={false}\n            value={_value}\n            checkIconPosition={checkIconPosition}\n            withCheckIcon={withCheckIcon}\n            withAlignedLabels={withAlignedLabels}\n            nothingFoundMessage={nothingFoundMessage}\n            unstyled={unstyled}\n            renderOption={renderOption}\n            scrollAreaProps={scrollAreaProps}\n            labelId={undefined}\n            aria-label={undefined}\n          />\n        )}\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        value={_value}\n        form={form}\n        valuesDivider={hiddenInputValuesDivider}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nComboboxPopover.classes = Combobox.classes;\nComboboxPopover.displayName = '@mantine/core/ComboboxPopover';\nComboboxPopover.Target = ComboboxPopoverTarget;\n"],"mappings":"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"}

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