@mantine/core 9.6.2 → 9.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n  HoverCardGroup,\n  HoverCardGroupContextValue,\n  HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n  /** Initial opened state */\n  initiallyOpened?: boolean;\n\n  /** Called when the dropdown is opened */\n  onOpen?: () => void;\n\n  /** Called when the dropdown is closed */\n  onClose?: () => void;\n\n  /**\n   * Delay in ms before the dropdown opens after mouse enters the target.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 0\n   */\n  openDelay?: number;\n\n  /**\n   * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 150\n   */\n  closeDelay?: number;\n}\n\nexport type HoverCardFactory = Factory<{\n  props: HoverCardProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  openDelay: 0,\n  closeDelay: 150,\n  initiallyOpened: false,\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n  const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(\n    'HoverCard',\n    defaultProps,\n    props\n  );\n\n  const hoverCard = useHoverCard({\n    openDelay,\n    closeDelay,\n    defaultOpened: initiallyOpened,\n    onOpen,\n    onClose,\n  });\n\n  return (\n    <HoverCardContext\n      value={{\n        openDropdown: hoverCard.openDropdown,\n        closeDropdown: hoverCard.closeDropdown,\n        assignTarget: hoverCard.assignTarget,\n        getReferenceProps: hoverCard.getReferenceProps,\n        getFloatingProps: hoverCard.getFloatingProps,\n        reference: hoverCard.reference,\n        floating: hoverCard.floating,\n      }}\n    >\n      <Popover {...others} opened={hoverCard.opened} __staticSelector=\"HoverCard\">\n        {children}\n      </Popover>\n    </HoverCardContext>\n  );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n  export type Props = HoverCardProps;\n  export type DropdownProps = HoverCardDropdownProps;\n  export type TargetProps = HoverCardTargetProps;\n  export type GroupProps = HoverCardGroupProps;\n  export type ContextValue = HoverCardContextValue;\n\n  export namespace Group {\n    export type Props = HoverCardGroupProps;\n    export type ContextValue = HoverCardGroupContextValue;\n  }\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;AACnB;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,WAAW,YAAY,iBAAiB,GAAG,WAAW,SACvF,aACA,cACA,KACF;CAEA,MAAM,YAAY,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;EACtB;EAEA,UAAA,oBAAC,SAAD;GAAS,GAAI;GAAQ,QAAQ,UAAU;GAAQ,kBAAiB;GAC7D;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AACnB,UAAU,WAAW;AACrB,UAAU,QAAQ;AAClB,UAAU,UAAU,UAA6C"}
+{"version":3,"file":"HoverCard.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n  HoverCardGroup,\n  HoverCardGroupContextValue,\n  HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardEvents {\n  /** Determines whether the dropdown should be opened when the target is hovered @default true */\n  hover?: boolean;\n\n  /** Determines whether the dropdown should be opened when the target is focused with the keyboard @default true */\n  focus?: boolean;\n\n  /** Determines whether the dropdown should be opened when the target is tapped on touch devices. Requires `hover` to be enabled @default false */\n  touch?: boolean;\n}\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n  /** Initial opened state */\n  initiallyOpened?: boolean;\n\n  /** Called when the dropdown is opened */\n  onOpen?: () => void;\n\n  /** Called when the dropdown is closed */\n  onClose?: () => void;\n\n  /**\n   * Delay in ms before the dropdown opens after mouse enters the target.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 0\n   */\n  openDelay?: number;\n\n  /**\n   * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 150\n   */\n  closeDelay?: number;\n\n  /**\n   * Determines which events open the dropdown. Fields that are not specified keep their default values.\n   * @default { hover: true, focus: true, touch: false }\n   */\n  events?: HoverCardEvents;\n\n  /**\n   * If set, the dropdown stays open while the pointer travels from the target to the dropdown\n   * and remains over it. Set it if the dropdown contains interactive content.\n   * @default false\n   */\n  interactive?: boolean;\n\n  /**\n   * Accessible relation between the target and the dropdown. `dialog` sets `aria-haspopup`,\n   * `aria-expanded` and `aria-controls` on the target, `tooltip` sets `aria-describedby` instead\n   * and should be used if the dropdown contains only descriptive content.\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'tooltip';\n\n  /** Determines whether the dropdown should be closed when the user presses outside of the target and the dropdown @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Not supported by `HoverCard`: outside press is always detected with the `pointerdown` event. Use `closeOnClickOutside` to disable it. */\n  clickOutsideEvents?: string[];\n\n  /**\n   * Determines whether focus should be returned to the target when the dropdown closes.\n   * Ignored when focus activation is enabled (`events.focus`, the default), otherwise moving\n   * focus away from the target would return it and reopen the dropdown.\n   * `Escape` pressed inside the dropdown always returns focus to the target.\n   * @default false\n   */\n  returnFocus?: boolean;\n\n  /** Called when the dropdown is closed with `Escape` key or with a press outside of the target and the dropdown */\n  onDismiss?: () => void;\n}\n\nexport type HoverCardFactory = Factory<{\n  props: HoverCardProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst DEFAULT_EVENTS = { hover: true, focus: true, touch: false };\n\nconst defaultProps = {\n  openDelay: 0,\n  closeDelay: 150,\n  initiallyOpened: false,\n  interactive: false,\n  closeOnEscape: true,\n  closeOnClickOutside: true,\n  role: 'dialog',\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n  const {\n    children,\n    onOpen,\n    onClose,\n    openDelay,\n    closeDelay,\n    initiallyOpened,\n    events,\n    interactive,\n    closeOnEscape,\n    closeOnClickOutside,\n    returnFocus,\n    onDismiss,\n    id,\n    role,\n    withRoles,\n    ...others\n  } = useProps('HoverCard', defaultProps, props);\n\n  const resolvedEvents = { ...DEFAULT_EVENTS, ...events };\n  const rolesEnabled = withRoles !== false;\n\n  const hoverCard = useHoverCard({\n    openDelay,\n    closeDelay,\n    defaultOpened: initiallyOpened,\n    onOpen,\n    onClose,\n    events: resolvedEvents,\n    interactive,\n    closeOnEscape,\n    closeOnClickOutside,\n    onDismiss,\n    id,\n  });\n\n  return (\n    <HoverCardContext\n      value={{\n        openDropdown: hoverCard.openDropdown,\n        closeDropdown: hoverCard.closeDropdown,\n        assignTarget: hoverCard.assignTarget,\n        getReferenceProps: hoverCard.getReferenceProps,\n        getFloatingProps: hoverCard.getFloatingProps,\n        reference: hoverCard.reference,\n        floating: hoverCard.floating,\n        opened: hoverCard.opened!,\n        dropdownId: hoverCard.dropdownId,\n        role,\n        withRoles: rolesEnabled,\n      }}\n    >\n      <Popover\n        {...others}\n        id={id}\n        closeOnEscape={closeOnEscape}\n        closeOnClickOutside={closeOnClickOutside}\n        returnFocus={resolvedEvents.focus ? false : returnFocus}\n        withRoles={role === 'tooltip' ? false : withRoles}\n        opened={hoverCard.opened}\n        __staticSelector=\"HoverCard\"\n      >\n        {children}\n      </Popover>\n    </HoverCardContext>\n  );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n  export type Props = HoverCardProps;\n  export type Events = HoverCardEvents;\n  export type DropdownProps = HoverCardDropdownProps;\n  export type TargetProps = HoverCardTargetProps;\n  export type GroupProps = HoverCardGroupProps;\n  export type ContextValue = HoverCardContextValue;\n\n  export namespace Group {\n    export type Props = HoverCardGroupProps;\n    export type ContextValue = HoverCardGroupContextValue;\n  }\n}\n"],"mappings":";;;;;;;;;;AA8FA,MAAM,iBAAiB;CAAE,OAAO;CAAM,OAAO;CAAM,OAAO;AAAM;AAEhE,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;CACjB,aAAa;CACb,eAAe;CACf,qBAAqB;CACrB,MAAM;AACR;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,UACA,QACA,SACA,WACA,YACA,iBACA,QACA,aACA,eACA,qBACA,aACA,WACA,IACA,MACA,WACA,GAAG,WACD,SAAS,aAAa,cAAc,KAAK;CAE7C,MAAM,iBAAiB;EAAE,GAAG;EAAgB,GAAG;CAAO;CACtD,MAAM,eAAe,cAAc;CAEnC,MAAM,YAAY,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;GACpB,QAAQ,UAAU;GAClB,YAAY,UAAU;GACtB;GACA,WAAW;EACb;EAEA,UAAA,oBAAC,SAAD;GACE,GAAI;GACA;GACW;GACM;GACrB,aAAa,eAAe,QAAQ,QAAQ;GAC5C,WAAW,SAAS,YAAY,QAAQ;GACxC,QAAQ,UAAU;GAClB,kBAAiB;GAEhB;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AACnB,UAAU,WAAW;AACrB,UAAU,QAAQ;AAClB,UAAU,UAAU,UAA6C"}

package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs

@@ -3,29 +3,24 @@ import { createEventHandler } from "../../../core/utils/create-event-handler/cre
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { Popover } from "../../Popover/Popover.mjs";
 import { useHoverCardContext } from "../HoverCard.context.mjs";
-import { HoverCardGroupContext } from "../HoverCardGroup/HoverCardGroup.mjs";
-import { use } from "react";
+import { useMergedRef } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx
 function HoverCardDropdown(props) {
-	const { children, onMouseEnter, onMouseLeave, ...others } = useProps("HoverCardDropdown", null, props);
+	const { children, onMouseEnter, onMouseLeave, ref, ...others } = useProps("HoverCardDropdown", null, props);
 	const ctx = useHoverCardContext();
-	if (use(HoverCardGroupContext).withinGroup && ctx.getFloatingProps && ctx.floating) {
-		const floatingProps = ctx.getFloatingProps();
-		return /* @__PURE__ */ jsx(Popover.Dropdown, {
-			ref: ctx.floating,
-			...floatingProps,
-			onMouseEnter: createEventHandler(onMouseEnter, floatingProps.onMouseEnter),
-			onMouseLeave: createEventHandler(onMouseLeave, floatingProps.onMouseLeave),
-			...others,
-			children
-		});
-	}
-	const handleMouseEnter = createEventHandler(onMouseEnter, ctx.openDropdown);
-	const handleMouseLeave = createEventHandler(onMouseLeave, ctx.closeDropdown);
+	const floatingProps = ctx.getFloatingProps();
+	const mergedRef = useMergedRef(ctx.floating, ref);
+	const accessibleProps = ctx.withRoles && ctx.role === "tooltip" ? {
+		role: "tooltip",
+		id: ctx.dropdownId
+	} : void 0;
 	return /* @__PURE__ */ jsx(Popover.Dropdown, {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
+		ref: mergedRef,
+		...floatingProps,
+		...accessibleProps,
+		onMouseEnter: createEventHandler(onMouseEnter, floatingProps.onMouseEnter),
+		onMouseLeave: createEventHandler(onMouseLeave, floatingProps.onMouseLeave),
 		...others,
 		children
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"HoverCardDropdown.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx"],"sourcesContent":["import { use } from 'react';\nimport { createEventHandler, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardDropdownProps extends PopoverDropdownProps {\n  /** Dropdown content */\n  children?: React.ReactNode;\n}\n\nexport function HoverCardDropdown(props: HoverCardDropdownProps) {\n  const { children, onMouseEnter, onMouseLeave, ...others } = useProps(\n    'HoverCardDropdown',\n    null,\n    props\n  );\n\n  const ctx = useHoverCardContext();\n  const groupCtx = use(HoverCardGroupContext);\n\n  if (groupCtx.withinGroup && ctx.getFloatingProps && ctx.floating) {\n    const floatingProps = ctx.getFloatingProps();\n\n    return (\n      <Popover.Dropdown\n        ref={ctx.floating}\n        {...floatingProps}\n        onMouseEnter={createEventHandler<any>(onMouseEnter, floatingProps.onMouseEnter)}\n        onMouseLeave={createEventHandler<any>(onMouseLeave, floatingProps.onMouseLeave)}\n        {...others}\n      >\n        {children}\n      </Popover.Dropdown>\n    );\n  }\n\n  const handleMouseEnter = createEventHandler<any>(onMouseEnter, ctx.openDropdown);\n  const handleMouseLeave = createEventHandler<any>(onMouseLeave!, ctx.closeDropdown);\n\n  return (\n    <Popover.Dropdown onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...others}>\n      {children}\n    </Popover.Dropdown>\n  );\n}\n\nHoverCardDropdown.displayName = '@mantine/core/HoverCardDropdown';\n"],"mappings":";;;;;;;;;AAWA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,EAAE,UAAU,cAAc,cAAc,GAAG,WAAW,SAC1D,qBACA,MACA,KACF;CAEA,MAAM,MAAM,oBAAoB;CAGhC,IAFiB,IAAI,qBAEV,CAAC,CAAC,eAAe,IAAI,oBAAoB,IAAI,UAAU;EAChE,MAAM,gBAAgB,IAAI,iBAAiB;EAE3C,OACE,oBAAC,QAAQ,UAAT;GACE,KAAK,IAAI;GACT,GAAI;GACJ,cAAc,mBAAwB,cAAc,cAAc,YAAY;GAC9E,cAAc,mBAAwB,cAAc,cAAc,YAAY;GAC9E,GAAI;GAEH;EACe,CAAA;CAEtB;CAEA,MAAM,mBAAmB,mBAAwB,cAAc,IAAI,YAAY;CAC/E,MAAM,mBAAmB,mBAAwB,cAAe,IAAI,aAAa;CAEjF,OACE,oBAAC,QAAQ,UAAT;EAAkB,cAAc;EAAkB,cAAc;EAAkB,GAAI;EACnF;CACe,CAAA;AAEtB;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"HoverCardDropdown.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\n\nexport interface HoverCardDropdownProps extends PopoverDropdownProps {\n  /** Dropdown content */\n  children?: React.ReactNode;\n}\n\nexport function HoverCardDropdown(props: HoverCardDropdownProps) {\n  const { children, onMouseEnter, onMouseLeave, ref, ...others } = useProps(\n    'HoverCardDropdown',\n    null,\n    props\n  );\n\n  const ctx = useHoverCardContext();\n  const floatingProps = ctx.getFloatingProps();\n  const mergedRef = useMergedRef(ctx.floating, ref);\n\n  const accessibleProps =\n    ctx.withRoles && ctx.role === 'tooltip' ? { role: 'tooltip', id: ctx.dropdownId } : undefined;\n\n  return (\n    <Popover.Dropdown\n      ref={mergedRef}\n      {...floatingProps}\n      {...accessibleProps}\n      onMouseEnter={createEventHandler<any>(onMouseEnter, floatingProps.onMouseEnter)}\n      onMouseLeave={createEventHandler<any>(onMouseLeave, floatingProps.onMouseLeave)}\n      {...others}\n    >\n      {children}\n    </Popover.Dropdown>\n  );\n}\n\nHoverCardDropdown.displayName = '@mantine/core/HoverCardDropdown';\n"],"mappings":";;;;;;;;AAUA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,EAAE,UAAU,cAAc,cAAc,KAAK,GAAG,WAAW,SAC/D,qBACA,MACA,KACF;CAEA,MAAM,MAAM,oBAAoB;CAChC,MAAM,gBAAgB,IAAI,iBAAiB;CAC3C,MAAM,YAAY,aAAa,IAAI,UAAU,GAAG;CAEhD,MAAM,kBACJ,IAAI,aAAa,IAAI,SAAS,YAAY;EAAE,MAAM;EAAW,IAAI,IAAI;CAAW,IAAI,KAAA;CAEtF,OACE,oBAAC,QAAQ,UAAT;EACE,KAAK;EACL,GAAI;EACJ,GAAI;EACJ,cAAc,mBAAwB,cAAc,cAAc,YAAY;EAC9E,cAAc,mBAAwB,cAAc,cAAc,YAAY;EAC9E,GAAI;EAEH;CACe,CAAA;AAEtB;AAEA,kBAAkB,cAAc"}

package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs

@@ -1,12 +1,10 @@
 "use client";
-import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
 import { getRefProp } from "../../../core/utils/get-ref-prop/get-ref-prop.mjs";
 import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { Popover } from "../../Popover/Popover.mjs";
 import { useHoverCardContext } from "../HoverCard.context.mjs";
-import { HoverCardGroupContext } from "../HoverCardGroup/HoverCardGroup.mjs";
-import { cloneElement, use } from "react";
+import { cloneElement } from "react";
 import { useMergedRef } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx
@@ -16,28 +14,13 @@ function HoverCardTarget(props) {
 	const child = getSingleElementChild(children);
 	if (!child) throw new Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
 	const ctx = useHoverCardContext();
-	const groupContext = use(HoverCardGroupContext);
-	const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);
-	if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {
-		const referenceProps = ctx.getReferenceProps();
-		return /* @__PURE__ */ jsx(Popover.Target, {
-			refProp,
-			...others,
-			children: cloneElement(child, eventPropsWrapperName ? { [eventPropsWrapperName]: {
-				...referenceProps,
-				ref: ctx.reference
-			} } : {
-				...referenceProps,
-				ref: ctx.reference
-			})
-		});
-	}
-	const eventListeners = {
-		onMouseEnter: createEventHandler(child.props.onMouseEnter, ctx.openDropdown),
-		onMouseLeave: createEventHandler(child.props.onMouseLeave, ctx.closeDropdown)
-	};
+	const childProps = child.props;
+	const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget, ctx.reference);
+	const referenceProps = ctx.getReferenceProps(eventPropsWrapperName ? childProps[eventPropsWrapperName] : childProps);
+	const accessibleProps = ctx.withRoles && ctx.role === "tooltip" ? { "aria-describedby": [childProps["aria-describedby"], ctx.opened ? ctx.dropdownId : null].filter(Boolean).join(" ") || void 0 } : void 0;
 	const clonedProps = {
-		...eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners,
+		...eventPropsWrapperName ? { [eventPropsWrapperName]: referenceProps } : referenceProps,
+		...accessibleProps,
 		ref: targetRef
 	};
 	return /* @__PURE__ */ jsx(Popover.Target, {

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

@@ -1 +1 @@
-{"version":3,"file":"HoverCardTarget.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement, use } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n  /**\n   * Name of the prop to wrap event listeners in.\n   * Use when the target component expects event listeners in a nested object.\n   * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n   * @default undefined (event listeners passed directly to component)\n   */\n  eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n  const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n    'HoverCardTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useHoverCardContext();\n  const groupContext = use(HoverCardGroupContext);\n  const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);\n\n  if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {\n    const referenceProps = ctx.getReferenceProps();\n\n    return (\n      <Popover.Target refProp={refProp} {...others}>\n        {cloneElement(\n          child,\n          eventPropsWrapperName\n            ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }\n            : { ...referenceProps, ref: ctx.reference }\n        )}\n      </Popover.Target>\n    );\n  }\n\n  const onMouseEnter = createEventHandler((child.props as any).onMouseEnter, ctx.openDropdown);\n  const onMouseLeave = createEventHandler((child.props as any).onMouseLeave, ctx.closeDropdown);\n\n  const eventListeners = { onMouseEnter, onMouseLeave };\n\n  const clonedProps: any = {\n    ...(eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners),\n    ref: targetRef,\n  };\n\n  return (\n    <Popover.Target refProp={refProp} {...others}>\n      {cloneElement(child, clonedProps)}\n    </Popover.Target>\n  );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAW,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAM,oBAAoB;CAChC,MAAM,eAAe,IAAI,qBAAqB;CAC9C,MAAM,YAAY,aAAa,WAAW,KAAK,GAAG,IAAI,YAAY;CAElE,IAAI,aAAa,eAAe,IAAI,qBAAqB,IAAI,WAAW;EACtE,MAAM,iBAAiB,IAAI,kBAAkB;EAE7C,OACE,oBAAC,QAAQ,QAAT;GAAyB;GAAS,GAAI;GACnC,UAAA,aACC,OACA,wBACI,GAAG,wBAAwB;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,EAAE,IACrE;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,CAC9C;EACc,CAAA;CAEpB;CAKA,MAAM,iBAAiB;EAAE,cAHJ,mBAAoB,MAAM,MAAc,cAAc,IAAI,YAG3C;EAAG,cAFlB,mBAAoB,MAAM,MAAc,cAAc,IAAI,aAE7B;CAAE;CAEpD,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,KAAK;CACP;CAEA,OACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,GAAI;EACnC,UAAA,aAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"HoverCardTarget.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n  /**\n   * Name of the prop to wrap event listeners in.\n   * Use when the target component expects event listeners in a nested object.\n   * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n   * @default undefined (event listeners passed directly to component)\n   */\n  eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n  const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n    'HoverCardTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useHoverCardContext();\n  const childProps = child.props as any;\n  const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget, ctx.reference);\n\n  const referenceProps = ctx.getReferenceProps(\n    eventPropsWrapperName ? childProps[eventPropsWrapperName] : childProps\n  );\n\n  const accessibleProps =\n    ctx.withRoles && ctx.role === 'tooltip'\n      ? {\n          'aria-describedby':\n            [childProps['aria-describedby'], ctx.opened ? ctx.dropdownId : null]\n              .filter(Boolean)\n              .join(' ') || undefined,\n        }\n      : undefined;\n\n  const clonedProps: any = {\n    ...(eventPropsWrapperName ? { [eventPropsWrapperName]: referenceProps } : referenceProps),\n    ...accessibleProps,\n    ref: targetRef,\n  };\n\n  return (\n    <Popover.Target refProp={refProp} {...others}>\n      {cloneElement(child, clonedProps)}\n    </Popover.Target>\n  );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAW,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAM,oBAAoB;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,aAAa,WAAW,KAAK,GAAG,IAAI,cAAc,IAAI,SAAS;CAEjF,MAAM,iBAAiB,IAAI,kBACzB,wBAAwB,WAAW,yBAAyB,UAC9D;CAEA,MAAM,kBACJ,IAAI,aAAa,IAAI,SAAS,YAC1B,EACE,oBACE,CAAC,WAAW,qBAAqB,IAAI,SAAS,IAAI,aAAa,IAAI,CAAC,CACjE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA,EACpB,IACA,KAAA;CAEN,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,GAAG;EACH,KAAK;CACP;CAEA,OACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,GAAI;EACnC,UAAA,aAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}

package/esm/components/HoverCard/use-hover-card.mjs

@@ -2,13 +2,15 @@
 import { HoverCardGroupContext } from "./HoverCardGroup/HoverCardGroup.mjs";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import { useId as useId$1 } from "@mantine/hooks";
-import { useDelayGroup, useDismiss, useFloating, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { safePolygon, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/HoverCard/use-hover-card.ts
 function useHoverCard(settings) {
 	const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);
 	const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
 	const withinGroup = use(HoverCardGroupContext).withinGroup;
-	const uid = useId$1();
+	const uid = useId$1(settings.id);
+	const openedRef = useRef(opened);
+	openedRef.current = opened;
 	const openTimeout = useRef(-1);
 	const closeTimeout = useRef(-1);
 	const targetRef = useRef(null);
@@ -20,6 +22,8 @@ function useHoverCard(settings) {
 		window.clearTimeout(closeTimeout.current);
 	}, []);
 	const onChange = useCallback((_opened) => {
+		if (openedRef.current === _opened) return;
+		openedRef.current = _opened;
 		setUncontrolledOpened(_opened);
 		if (_opened) {
 			setCurrentId(uid);
@@ -30,40 +34,49 @@ function useHoverCard(settings) {
 		settings.onOpen,
 		settings.onClose
 	]);
+	const onOpenChange = useCallback((_opened, _event, reason) => {
+		const wasOpened = openedRef.current;
+		onChange(_opened);
+		if (wasOpened && !_opened && (reason === "escape-key" || reason === "outside-press")) settings.onDismiss?.();
+	}, [onChange, settings.onDismiss]);
 	const { context, refs } = useFloating({
 		open: opened,
-		onOpenChange: onChange
+		onOpenChange
 	});
 	const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });
 	const { getReferenceProps, getFloatingProps } = useInteractions([
 		useHover(context, {
-			enabled: true,
+			enabled: settings.events.hover,
 			delay: withinGroup ? groupDelay : {
 				open: settings.openDelay,
 				close: settings.closeDelay
-			}
+			},
+			mouseOnly: !settings.events.touch,
+			handleClose: settings.interactive ? safePolygon() : null
+		}),
+		useFocus(context, {
+			enabled: settings.events.focus,
+			visibleOnly: true
 		}),
-		useRole(context, { role: "dialog" }),
-		useDismiss(context, { enabled: withinGroup })
+		useDismiss(context, {
+			escapeKey: settings.closeOnEscape,
+			outsidePress: settings.closeOnClickOutside
+		})
 	]);
 	const openDropdown = useCallback(() => {
-		if (withinGroup) return;
 		clearTimeouts();
-		if (settings.openDelay === 0 || settings.openDelay === void 0) onChange(true);
+		if (!settings.openDelay) onChange(true);
 		else openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);
 	}, [
-		withinGroup,
 		clearTimeouts,
 		settings.openDelay,
 		onChange
 	]);
 	const closeDropdown = useCallback(() => {
-		if (withinGroup) return;
 		clearTimeouts();
-		if (settings.closeDelay === 0 || settings.closeDelay === void 0) onChange(false);
+		if (!settings.closeDelay) onChange(false);
 		else closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);
 	}, [
-		withinGroup,
 		clearTimeouts,
 		settings.closeDelay,
 		onChange
@@ -90,6 +103,7 @@ function useHoverCard(settings) {
 	]);
 	return {
 		opened,
+		dropdownId: `${uid}-dropdown`,
 		reference: refs.setReference,
 		floating: refs.setFloating,
 		assignTarget,

package/esm/components/HoverCard/use-hover-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-hover-card.mjs","names":["useId"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n  openDelay?: number;\n  closeDelay?: number;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(HoverCardGroupContext).withinGroup;\n  const uid = useId();\n\n  const openTimeout = useRef(-1);\n  const closeTimeout = useRef(-1);\n  const targetRef = useRef<HTMLElement | null>(null);\n\n  const assignTarget = useCallback((node: HTMLElement | null) => {\n    targetRef.current = node;\n  }, []);\n\n  const clearTimeouts = useCallback(() => {\n    window.clearTimeout(openTimeout.current);\n    window.clearTimeout(closeTimeout.current);\n  }, []);\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n        settings.onOpen?.();\n      } else {\n        settings.onClose?.();\n      }\n    },\n    [uid, settings.onOpen, settings.onClose]\n  );\n\n  const { context, refs } = useFloating({\n    open: opened,\n    onOpenChange: onChange,\n  });\n\n  const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: true,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n    }),\n    useRole(context, { role: 'dialog' }),\n    useDismiss(context, { enabled: withinGroup }),\n  ]);\n\n  const openDropdown = useCallback(() => {\n    if (withinGroup) {\n      return; // Group mode handles this automatically\n    }\n\n    clearTimeouts();\n    if (settings.openDelay === 0 || settings.openDelay === undefined) {\n      onChange(true);\n    } else {\n      openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n    }\n  }, [withinGroup, clearTimeouts, settings.openDelay, onChange]);\n\n  const closeDropdown = useCallback(() => {\n    if (withinGroup) {\n      return; // Group mode handles this automatically\n    }\n\n    clearTimeouts();\n    if (settings.closeDelay === 0 || settings.closeDelay === undefined) {\n      onChange(false);\n    } else {\n      closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n    }\n  }, [withinGroup, clearTimeouts, settings.closeDelay, onChange]);\n\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n  useEffect(() => {\n    if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n      return undefined;\n    }\n\n    const node = targetRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    const observer = new IntersectionObserver(() => {\n      if (!node.isConnected || node.getClientRects().length === 0) {\n        clearTimeouts();\n        onChangeRef.current(false);\n      }\n    });\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [opened, withinGroup, clearTimeouts]);\n\n  return {\n    opened,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    assignTarget,\n    getReferenceProps,\n    getFloatingProps,\n    openDropdown,\n    closeDropdown,\n  };\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,aAAa,UAAwB;CACnD,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,qBAAqB,CAAC,CAAC;CAC/C,MAAM,MAAMA,QAAM;CAElB,MAAM,cAAc,OAAO,EAAE;CAC7B,MAAM,eAAe,OAAO,EAAE;CAC9B,MAAM,YAAY,OAA2B,IAAI;CAEjD,MAAM,eAAe,aAAa,SAA6B;EAC7D,UAAU,UAAU;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,kBAAkB;EACtC,OAAO,aAAa,YAAY,OAAO;EACvC,OAAO,aAAa,aAAa,OAAO;CAC1C,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SAAS;GACX,aAAa,GAAG;GAChB,SAAS,SAAS;EACpB,OACE,SAAS,UAAU;CAEvB,GACA;EAAC;EAAK,SAAS;EAAQ,SAAS;CAAO,CACzC;CAEA,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,MAAM;EACN,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAE9E,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS;GACT,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;EAC3F,CAAC;EACD,QAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;EACnC,WAAW,SAAS,EAAE,SAAS,YAAY,CAAC;CAC9C,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,aACF;EAGF,cAAc;EACd,IAAI,SAAS,cAAc,KAAK,SAAS,cAAc,KAAA,GACrD,SAAS,IAAI;OAEb,YAAY,UAAU,OAAO,iBAAiB,SAAS,IAAI,GAAG,SAAS,SAAS;CAEpF,GAAG;EAAC;EAAa;EAAe,SAAS;EAAW;CAAQ,CAAC;CAE7D,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,aACF;EAGF,cAAc;EACd,IAAI,SAAS,eAAe,KAAK,SAAS,eAAe,KAAA,GACvD,SAAS,KAAK;OAEd,aAAa,UAAU,OAAO,iBAAiB,SAAS,KAAK,GAAG,SAAS,UAAU;CAEvF,GAAG;EAAC;EAAa;EAAe,SAAS;EAAY;CAAQ,CAAC;CAE9D,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,sBAAsB,cAAc,GAAG,CAAC,aAAa,CAAC;CAEtD,gBAAgB;EACd,IAAI,CAAC,UAAU,eAAe,OAAO,yBAAyB,aAC5D;EAGF,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MACH;EAGF,MAAM,WAAW,IAAI,2BAA2B;GAC9C,IAAI,CAAC,KAAK,eAAe,KAAK,eAAe,CAAC,CAAC,WAAW,GAAG;IAC3D,cAAc;IACd,YAAY,QAAQ,KAAK;GAC3B;EACF,CAAC;EAED,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,OAAO;EACL;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-hover-card.mjs","names":["useId"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  OpenChangeReason,\n  safePolygon,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n  openDelay?: number;\n  closeDelay?: number;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  events: { hover: boolean; focus: boolean; touch: boolean };\n  interactive: boolean;\n  closeOnEscape: boolean;\n  closeOnClickOutside: boolean;\n  onDismiss?: () => void;\n  id?: string;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(HoverCardGroupContext).withinGroup;\n  const uid = useId(settings.id);\n\n  const openedRef = useRef(opened);\n  openedRef.current = opened;\n\n  const openTimeout = useRef(-1);\n  const closeTimeout = useRef(-1);\n  const targetRef = useRef<HTMLElement | null>(null);\n\n  const assignTarget = useCallback((node: HTMLElement | null) => {\n    targetRef.current = node;\n  }, []);\n\n  const clearTimeouts = useCallback(() => {\n    window.clearTimeout(openTimeout.current);\n    window.clearTimeout(closeTimeout.current);\n  }, []);\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      if (openedRef.current === _opened) {\n        return;\n      }\n\n      openedRef.current = _opened;\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n        settings.onOpen?.();\n      } else {\n        settings.onClose?.();\n      }\n    },\n    [uid, settings.onOpen, settings.onClose]\n  );\n\n  const onOpenChange = useCallback(\n    (_opened: boolean, _event?: Event, reason?: OpenChangeReason) => {\n      const wasOpened = openedRef.current;\n      onChange(_opened);\n\n      if (wasOpened && !_opened && (reason === 'escape-key' || reason === 'outside-press')) {\n        settings.onDismiss?.();\n      }\n    },\n    [onChange, settings.onDismiss]\n  );\n\n  const { context, refs } = useFloating({\n    open: opened,\n    onOpenChange,\n  });\n\n  const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events.focus, visibleOnly: true }),\n    useDismiss(context, {\n      escapeKey: settings.closeOnEscape,\n      outsidePress: settings.closeOnClickOutside,\n    }),\n  ]);\n\n  const openDropdown = useCallback(() => {\n    clearTimeouts();\n    if (!settings.openDelay) {\n      onChange(true);\n    } else {\n      openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n    }\n  }, [clearTimeouts, settings.openDelay, onChange]);\n\n  const closeDropdown = useCallback(() => {\n    clearTimeouts();\n    if (!settings.closeDelay) {\n      onChange(false);\n    } else {\n      closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n    }\n  }, [clearTimeouts, settings.closeDelay, onChange]);\n\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n  useEffect(() => {\n    if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n      return undefined;\n    }\n\n    const node = targetRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    const observer = new IntersectionObserver(() => {\n      if (!node.isConnected || node.getClientRects().length === 0) {\n        clearTimeouts();\n        onChangeRef.current(false);\n      }\n    });\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [opened, withinGroup, clearTimeouts]);\n\n  return {\n    opened,\n    dropdownId: `${uid}-dropdown`,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    assignTarget,\n    getReferenceProps,\n    getFloatingProps,\n    openDropdown,\n    closeDropdown,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Input/InputWrapper/InputWrapper.mjs

@@ -117,7 +117,7 @@ const InputWrapper = factory((_props) => {
 			getStyles,
 			describedBy,
 			inputId,
-			labelId,
+			labelId: _label && inputWrapperOrder.includes("label") ? labelId : void 0,
 			...getInputOffsets(inputWrapperOrder, {
 				hasDescription,
 				hasError: hasError || hasSuccess

package/esm/components/Input/InputWrapper/InputWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.mjs","names":["useId","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  PlaceholderPolymorphicProps,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}
+{"version":3,"file":"InputWrapper.mjs","names":["useId","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  PlaceholderPolymorphicProps,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId: _label && inputWrapperOrder.includes('label') ? labelId : undefined,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}

package/esm/components/Marquee/Marquee.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Marquee.mjs","names":["classes"],"sources":["../../../src/components/Marquee/Marquee.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Marquee.module.css';\n\nexport type MarqueeStylesNames = 'root' | 'content' | 'group';\nexport type MarqueeCssVariables = {\n  root:\n    | '--marquee-duration'\n    | '--marquee-gap'\n    | '--marquee-repeat'\n    | '--marquee-fade-color'\n    | '--marquee-fade-size';\n};\n\nexport interface MarqueeProps\n  extends BoxProps, StylesApiProps<MarqueeFactory>, ElementProps<'div'> {\n  /** Reverses animation direction @default false */\n  reverse?: boolean;\n\n  /** Pauses animation on hover @default false */\n  pauseOnHover?: boolean;\n\n  /** Content to scroll */\n  children: React.ReactNode;\n\n  /** Scroll orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Number of times children are repeated inline for seamless scrolling @default 4 */\n  repeat?: number;\n\n  /** Animation duration in ms @default 40000 */\n  duration?: number;\n\n  /** Gap between repeated children, key of `theme.spacing` or any valid CSS value @default 'md' */\n  gap?: MantineSpacing;\n\n  /** Whether to show gradient fade on edges, @default true */\n  fadeEdges?: boolean;\n\n  /** Color of the fade gradient, @default 'var(--mantine-color-body)' */\n  fadeEdgeColor?: string;\n\n  /** Size of the fade gradient, @default '5%' */\n  fadeEdgeSize?: string;\n}\n\nexport type MarqueeFactory = Factory<{\n  props: MarqueeProps;\n  ref: HTMLDivElement;\n  stylesNames: MarqueeStylesNames;\n  vars: MarqueeCssVariables;\n}>;\n\nconst defaultProps = {\n  repeat: 4,\n  duration: 100_000,\n  orientation: 'horizontal',\n  fadeEdges: true,\n} satisfies Partial<MarqueeProps>;\n\nconst varsResolver = createVarsResolver<MarqueeFactory>(\n  (_, { duration, gap, repeat, fadeEdgeColor, fadeEdgeSize }) => ({\n    root: {\n      '--marquee-duration': `${duration}ms`,\n      '--marquee-gap': getSpacing(gap),\n      '--marquee-repeat': (repeat ?? 4).toString(),\n      '--marquee-fade-color': fadeEdgeColor,\n      '--marquee-fade-size': fadeEdgeSize,\n    },\n  })\n);\n\nexport const Marquee = factory<MarqueeFactory>((_props) => {\n  const props = useProps('Marquee', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    reverse,\n    pauseOnHover,\n    orientation,\n    repeat,\n    duration,\n    gap,\n    fadeEdges,\n    fadeEdgeColor,\n    fadeEdgeSize,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MarqueeFactory>({\n    name: 'Marquee',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const repeatedChildren = Array(repeat)\n    .fill(0)\n    .map((_, index) => (\n      <div key={index} {...getStyles('group')}>\n        {children}\n      </div>\n    ));\n\n  return (\n    <Box\n      {...getStyles('root')}\n      mod={[{ orientation, reverse, pauseOnHover, 'fade-edges': fadeEdges }, mod]}\n      {...others}\n    >\n      <div {...getStyles('content')}>{repeatedChildren}</div>\n    </Box>\n  );\n});\n\nMarquee.classes = classes;\nMarquee.varsResolver = varsResolver;\nMarquee.displayName = '@mantine/core/Marquee';\n\nexport namespace Marquee {\n  export type Props = MarqueeProps;\n  export type StylesNames = MarqueeStylesNames;\n  export type CssVariables = MarqueeCssVariables;\n  export type Factory = MarqueeFactory;\n}\n"],"mappings":";;;;;;;;;;AAiEA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,aAAa;CACb,WAAW;AACb;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,UAAU,KAAK,QAAQ,eAAe,oBAAoB,EAC9D,MAAM;CACJ,sBAAsB,GAAG,SAAS;CAClC,iBAAiB,WAAW,GAAG;CAC/B,qBAAqB,UAAU,EAAA,CAAG,SAAS;CAC3C,wBAAwB;CACxB,uBAAuB;AACzB,EACF,EACF;AAEA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,cACA,aACA,QACA,UACA,KACA,WACA,eACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,MAAM,MAAM,CAAC,CACnC,KAAK,CAAC,CAAC,CACP,KAAK,GAAG,UACP,oBAAC,OAAD;EAAiB,GAAI,UAAU,OAAO;EACnC;CACE,GAFK,KAEL,CACN;CAEH,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,CAAC;GAAE;GAAa;GAAS;GAAc,cAAc;EAAU,GAAG,GAAG;EAC1E,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,GAAI,UAAU,SAAS;GAAI,UAAA;EAAsB,CAAA;CACnD,CAAA;AAET,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}
+{"version":3,"file":"Marquee.mjs","names":["classes"],"sources":["../../../src/components/Marquee/Marquee.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Marquee.module.css';\n\nexport type MarqueeStylesNames = 'root' | 'content' | 'group';\nexport type MarqueeCssVariables = {\n  root:\n    | '--marquee-duration'\n    | '--marquee-gap'\n    | '--marquee-repeat'\n    | '--marquee-fade-color'\n    | '--marquee-fade-size';\n};\n\nexport interface MarqueeProps\n  extends BoxProps, StylesApiProps<MarqueeFactory>, ElementProps<'div'> {\n  /** Reverses animation direction @default false */\n  reverse?: boolean;\n\n  /** Pauses animation on hover @default false */\n  pauseOnHover?: boolean;\n\n  /** Content to scroll */\n  children: React.ReactNode;\n\n  /** Scroll orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Number of times children are repeated inline for seamless scrolling @default 4 */\n  repeat?: number;\n\n  /** Animation duration in ms @default 100000 */\n  duration?: number;\n\n  /** Gap between repeated children, key of `theme.spacing` or any valid CSS value @default 'md' */\n  gap?: MantineSpacing;\n\n  /** Whether to show gradient fade on edges, @default true */\n  fadeEdges?: boolean;\n\n  /** Color of the fade gradient, @default 'var(--mantine-color-body)' */\n  fadeEdgeColor?: string;\n\n  /** Size of the fade gradient, @default '5%' */\n  fadeEdgeSize?: string;\n}\n\nexport type MarqueeFactory = Factory<{\n  props: MarqueeProps;\n  ref: HTMLDivElement;\n  stylesNames: MarqueeStylesNames;\n  vars: MarqueeCssVariables;\n}>;\n\nconst defaultProps = {\n  repeat: 4,\n  duration: 100_000,\n  orientation: 'horizontal',\n  fadeEdges: true,\n} satisfies Partial<MarqueeProps>;\n\nconst varsResolver = createVarsResolver<MarqueeFactory>(\n  (_, { duration, gap, repeat, fadeEdgeColor, fadeEdgeSize }) => ({\n    root: {\n      '--marquee-duration': `${duration}ms`,\n      '--marquee-gap': getSpacing(gap),\n      '--marquee-repeat': (repeat ?? 4).toString(),\n      '--marquee-fade-color': fadeEdgeColor,\n      '--marquee-fade-size': fadeEdgeSize,\n    },\n  })\n);\n\nexport const Marquee = factory<MarqueeFactory>((_props) => {\n  const props = useProps('Marquee', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    reverse,\n    pauseOnHover,\n    orientation,\n    repeat,\n    duration,\n    gap,\n    fadeEdges,\n    fadeEdgeColor,\n    fadeEdgeSize,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MarqueeFactory>({\n    name: 'Marquee',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const repeatedChildren = Array(repeat)\n    .fill(0)\n    .map((_, index) => (\n      <div key={index} {...getStyles('group')}>\n        {children}\n      </div>\n    ));\n\n  return (\n    <Box\n      {...getStyles('root')}\n      mod={[{ orientation, reverse, pauseOnHover, 'fade-edges': fadeEdges }, mod]}\n      {...others}\n    >\n      <div {...getStyles('content')}>{repeatedChildren}</div>\n    </Box>\n  );\n});\n\nMarquee.classes = classes;\nMarquee.varsResolver = varsResolver;\nMarquee.displayName = '@mantine/core/Marquee';\n\nexport namespace Marquee {\n  export type Props = MarqueeProps;\n  export type StylesNames = MarqueeStylesNames;\n  export type CssVariables = MarqueeCssVariables;\n  export type Factory = MarqueeFactory;\n}\n"],"mappings":";;;;;;;;;;AAiEA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,aAAa;CACb,WAAW;AACb;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,UAAU,KAAK,QAAQ,eAAe,oBAAoB,EAC9D,MAAM;CACJ,sBAAsB,GAAG,SAAS;CAClC,iBAAiB,WAAW,GAAG;CAC/B,qBAAqB,UAAU,EAAA,CAAG,SAAS;CAC3C,wBAAwB;CACxB,uBAAuB;AACzB,EACF,EACF;AAEA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,cACA,aACA,QACA,UACA,KACA,WACA,eACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,MAAM,MAAM,CAAC,CACnC,KAAK,CAAC,CAAC,CACP,KAAK,GAAG,UACP,oBAAC,OAAD;EAAiB,GAAI,UAAU,OAAO;EACnC;CACE,GAFK,KAEL,CACN;CAEH,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,CAAC;GAAE;GAAa;GAAS;GAAc,cAAc;EAAU,GAAG,GAAG;EAC1E,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,GAAI,UAAU,SAAS;GAAI,UAAA;EAAsB,CAAA;CACnD,CAAA;AAET,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Marquee.module.mjs","names":[],"sources":["../../../src/components/Marquee/Marquee.module.css"],"sourcesContent":["@keyframes marquee-horizontal {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(\n      calc(\n        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /\n          var(--marquee-repeat, 4)\n      )\n    );\n  }\n}\n\n@keyframes marquee-vertical {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(\n      calc(\n        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /\n          var(--marquee-repeat, 4)\n      )\n    );\n  }\n}\n\n.root {\n  --_fade-color: var(--marquee-fade-color, var(--mantine-color-body));\n  --_fade-size: var(--marquee-fade-size, 5%);\n\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n\n  /* Fade edges using pseudo-elements */\n  &[data-fade-edges]::before,\n  &[data-fade-edges]::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  /* Horizontal fade edges */\n  &[data-orientation='horizontal'][data-fade-edges]::before,\n  &[data-orientation='horizontal'][data-fade-edges]::after {\n    top: 0;\n    bottom: 0;\n    width: var(--_fade-size);\n  }\n\n  &[data-orientation='horizontal'][data-fade-edges]::before {\n    left: 0;\n    background: linear-gradient(to right, var(--_fade-color), transparent);\n  }\n\n  &[data-orientation='horizontal'][data-fade-edges]::after {\n    right: 0;\n    background: linear-gradient(to left, var(--_fade-color), transparent);\n  }\n\n  /* Vertical fade edges */\n  &[data-orientation='vertical'][data-fade-edges]::before,\n  &[data-orientation='vertical'][data-fade-edges]::after {\n    left: 0;\n    right: 0;\n    height: var(--_fade-size);\n  }\n\n  &[data-orientation='vertical'][data-fade-edges]::before {\n    top: 0;\n    background: linear-gradient(to bottom, var(--_fade-color), transparent);\n  }\n\n  &[data-orientation='vertical'][data-fade-edges]::after {\n    bottom: 0;\n    background: linear-gradient(to top, var(--_fade-color), transparent);\n  }\n}\n\n.content {\n  display: flex;\n  gap: var(--marquee-gap, var(--mantine-spacing-md));\n  animation-duration: var(--marquee-duration, 40000ms);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n\n  .root[data-orientation='horizontal'] > & {\n    flex-direction: row;\n    animation-name: marquee-horizontal;\n  }\n\n  .root[data-orientation='vertical'] > & {\n    flex-direction: column;\n    animation-name: marquee-vertical;\n  }\n\n  .root[data-reverse] > & {\n    animation-direction: reverse;\n  }\n\n  .root[data-pause-on-hover]:hover > & {\n    animation-play-state: paused;\n  }\n}\n\n.group {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--marquee-gap, var(--mantine-spacing-md));\n\n  .root[data-orientation='horizontal'] & {\n    flex-direction: row;\n  }\n\n  .root[data-orientation='vertical'] & {\n    flex-direction: column;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Marquee.module.mjs","names":[],"sources":["../../../src/components/Marquee/Marquee.module.css"],"sourcesContent":["@keyframes marquee-horizontal {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(\n      calc(\n        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /\n          var(--marquee-repeat, 4)\n      )\n    );\n  }\n}\n\n@keyframes marquee-vertical {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(\n      calc(\n        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /\n          var(--marquee-repeat, 4)\n      )\n    );\n  }\n}\n\n.root {\n  --_fade-color: var(--marquee-fade-color, var(--mantine-color-body));\n  --_fade-size: var(--marquee-fade-size, 5%);\n\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n\n  /* Fade edges using pseudo-elements */\n  &[data-fade-edges]::before,\n  &[data-fade-edges]::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  /* Horizontal fade edges */\n  &[data-orientation='horizontal'][data-fade-edges]::before,\n  &[data-orientation='horizontal'][data-fade-edges]::after {\n    top: 0;\n    bottom: 0;\n    width: var(--_fade-size);\n  }\n\n  &[data-orientation='horizontal'][data-fade-edges]::before {\n    left: 0;\n    background: linear-gradient(to right, var(--_fade-color), transparent);\n  }\n\n  &[data-orientation='horizontal'][data-fade-edges]::after {\n    right: 0;\n    background: linear-gradient(to left, var(--_fade-color), transparent);\n  }\n\n  /* Vertical fade edges */\n  &[data-orientation='vertical'][data-fade-edges]::before,\n  &[data-orientation='vertical'][data-fade-edges]::after {\n    left: 0;\n    right: 0;\n    height: var(--_fade-size);\n  }\n\n  &[data-orientation='vertical'][data-fade-edges]::before {\n    top: 0;\n    background: linear-gradient(to bottom, var(--_fade-color), transparent);\n  }\n\n  &[data-orientation='vertical'][data-fade-edges]::after {\n    bottom: 0;\n    background: linear-gradient(to top, var(--_fade-color), transparent);\n  }\n}\n\n.content {\n  display: flex;\n  gap: var(--marquee-gap, var(--mantine-spacing-md));\n  animation-duration: var(--marquee-duration, 100000ms);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n\n  .root[data-orientation='horizontal'] > & {\n    flex-direction: row;\n    animation-name: marquee-horizontal;\n  }\n\n  .root[data-orientation='vertical'] > & {\n    flex-direction: column;\n    animation-name: marquee-vertical;\n  }\n\n  .root[data-reverse] > & {\n    animation-direction: reverse;\n  }\n\n  .root[data-pause-on-hover]:hover > & {\n    animation-play-state: paused;\n  }\n}\n\n.group {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--marquee-gap, var(--mantine-spacing-md));\n\n  .root[data-orientation='horizontal'] & {\n    flex-direction: row;\n  }\n\n  .root[data-orientation='vertical'] & {\n    flex-direction: column;\n  }\n}\n"],"mappings":""}

package/esm/components/PasswordInput/PasswordInput.mjs

@@ -7,11 +7,13 @@ import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
 import { factory } from "../../core/factory/factory.mjs";
 import { ActionIcon } from "../ActionIcon/ActionIcon.mjs";
+import { InputWrapperContext } from "../Input/InputWrapper.context.mjs";
 import { Input } from "../Input/Input.mjs";
 import { InputBase } from "../InputBase/InputBase.mjs";
 import { PasswordToggleIcon } from "./PasswordToggleIcon.mjs";
 import PasswordInput_module_default from "./PasswordInput.module.mjs";
-import { useId, useUncontrolled } from "@mantine/hooks";
+import { use } from "react";
+import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
 import cx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/PasswordInput/PasswordInput.tsx
@@ -24,6 +26,13 @@ const varsResolver = createVarsResolver((_, { size }) => ({ root: {
 	"--psi-icon-size": getSize(size, "psi-icon-size"),
 	"--psi-button-size": getSize(size, "psi-button-size")
 } }));
+function PasswordInputField(props) {
+	const ctx = use(InputWrapperContext);
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		"aria-describedby": ctx?.describedBy
+	});
+}
 const PasswordInput = factory((_props) => {
 	const props = useProps([
 		"Input",
@@ -31,7 +40,7 @@ const PasswordInput = factory((_props) => {
 		"PasswordInput"
 	], defaultProps, _props);
 	const { classNames, className, style, styles, unstyled, vars, required, error, success, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, successProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, visibilityToggleFocusable, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, withSuccessStyles, mod, attributes, dir, ...others } = props;
-	const uuid = useId(id);
+	const uuid = useId$1(id);
 	const [_visible, setVisibility] = useUncontrolled({
 		value: visible,
 		defaultValue: defaultVisible,
@@ -61,9 +70,6 @@ const PasswordInput = factory((_props) => {
 	const errorId = errorProps?.id || `${uuid}-error`;
 	const successId = successProps?.id || `${uuid}-success`;
 	const descriptionId = descriptionProps?.id || `${uuid}-description`;
-	const hasError = !!error && typeof error !== "boolean";
-	const _describedBy = `${hasError ? errorId : ""} ${!!success && typeof success !== "boolean" && !hasError ? successId : ""} ${!!description ? descriptionId : ""}`;
-	const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : void 0;
 	const visibilityToggleButton = /* @__PURE__ */ jsx(ActionIcon, {
 		...getStyles("visibilityToggle"),
 		disabled,
@@ -161,7 +167,7 @@ const PasswordInput = factory((_props) => {
 			withErrorStyles,
 			withSuccessStyles,
 			attributes,
-			children: /* @__PURE__ */ jsx("input", {
+			children: /* @__PURE__ */ jsx(PasswordInputField, {
 				required,
 				"data-invalid": !!error || void 0,
 				"data-with-left-section": !!leftSection || void 0,
@@ -170,7 +176,6 @@ const PasswordInput = factory((_props) => {
 				id: uuid,
 				dir,
 				...rest,
-				"aria-describedby": describedBy,
 				autoComplete: rest.autoComplete || "off",
 				type: _visible ? "text" : "password"
 			})

package/esm/components/PasswordInput/PasswordInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the visibility toggle button is focusable with keyboard @default `false` */\n  visibilityToggleFocusable?: boolean;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  visibilityToggleFocusable: false,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    success,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    successProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    visibilityToggleFocusable,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    withSuccessStyles,\n    mod,\n    attributes,\n    dir,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const successId = successProps?.id || `${uuid}-success`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasSuccess && !hasError ? successId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={visibilityToggleFocusable ? 0 : -1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      success={success}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      successProps={{ ...successProps, id: successId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        dir={dir}\n        error={error}\n        success={success}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        withSuccessStyles={withSuccessStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          dir={dir}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA+DA,MAAM,eAAe;CACnB,sBAAsB;CACtB,2BAA2B;CAC3B,MAAM;AACR;AAEA,MAAM,eAAe,oBAA0C,GAAG,EAAE,YAAY,EAC9E,MAAM;CACJ,mBAAmB,QAAQ,MAAM,eAAe;CAChD,qBAAqB,QAAQ,MAAM,iBAAiB;AACtD,EACF,EAAE;AAEF,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAe,GAAG,cAAc,MAAM;CACvF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,OACA,SACA,aACA,UACA,IACA,SACA,gBACA,aACA,OACA,MACA,YACA,cACA,kBACA,YACA,cACA,mBACA,cACA,QACA,cACA,mBACA,2BACA,kBACA,SACA,gBACA,oBACA,sBAAsB,sBACtB,6BACA,2BACA,mBACA,kBACA,0BACA,iBACA,mBACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,OAAO,MAAM,EAAE;CAErB,MAAM,CAAC,UAAU,iBAAiB,gBAAgB;EAChD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,yBAAyB,cAAc,CAAC,QAAQ;CAEtD,MAAM,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAA2C;EACxF;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,UAAU,YAAY,MAAM,GAAG,KAAK;CAC1C,MAAM,YAAY,cAAc,MAAM,GAAG,KAAK;CAC9C,MAAM,gBAAgB,kBAAkB,MAAM,GAAG,KAAK;CACtD,MAAM,WAAW,CAAC,CAAC,SAAS,OAAO,UAAU;CAG7C,MAAM,eAAe,GAAG,WAAW,UAAU,GAAG,GAF7B,CAAC,CAAC,WAAW,OAAO,YAAY,aAEc,CAAC,WAAW,YAAY,GAAG,GAAG,CADvE,CAAC,cACuF,gBAAgB;CAChI,MAAM,cAAc,aAAa,KAAK,CAAC,CAAC,SAAS,IAAI,aAAa,KAAK,IAAI,KAAA;CAE3E,MAAM,yBACJ,oBAAC,YAAD;EACE,GAAI,UAAU,kBAAkB;EACtB;EACF;EACR,gBAAc;EACd,UAAU,4BAA4B,IAAI;EAC1C,cAAW;EACX,GAAI;EACJ,SAAS,6BAA6B,WAAW;EACjD,OAAM;EACI;EACV,aAAa,UAAU;GACrB,MAAM,eAAe;GACrB,6BAA6B,aAAa,KAAK;GAC/C,iBAAiB;EACnB;EACA,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,6BAA6B,cAAc,KAAK;GAChD,iBAAiB;EACnB;EACA,YAAY,UAAU;GACpB,6BAA6B,YAAY,KAAK;GAC9C,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;IAC9C,MAAM,eAAe;IACrB,iBAAiB;GACnB;EACF;EAEA,UAAA,oBAAC,sBAAD,EAAsB,QAAQ,SAAW,CAAA;CAC/B,CAAA;CAGd,OACE,oBAAC,MAAM,SAAP;EACY;EACV,IAAI;EACG;EACA;EACE;EACI;EACP;EACN,YAAY;EACZ,QAAQ;EACR,kBAAiB;EACjB,kBAAkB;EACR;EACI;EACK;EACH;EACP;EACT,YAAY;GAAE,GAAG;GAAY,SAAS;EAAK;EAC3C,kBAAkB;GAAE,GAAG;GAAkB,IAAI;EAAc;EAC3D,YAAY;GAAE,GAAG;GAAY,IAAI;EAAQ;EACzC,cAAc;GAAE,GAAG;GAAc,IAAI;EAAU;EAC1C;EACO;EACZ,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,WAAU;GACL;GACE;GACE;GACI;GACP;GACN,YAAY;IAAE,GAAG;IAAoB,OAAO,GAAGA,6BAAQ,OAAO,oBAAoB,KAAK;GAAE;GACzF,QAAQ;GACA;GACE;GACV,kBAAiB;GACjB,kBAAkB;GACC;GACnB,cAAc,gBAAgB;GACrB;GACC;GACQ;GAClB,2BAA2B,6BAA6B;GACrC;GACD;GACQ;GAC1B,UAAU;GACO;GACE;GACP;GAEZ,UAAA,oBAAC,SAAD;IACY;IACV,gBAAc,CAAC,CAAC,SAAS,KAAA;IACzB,0BAAwB,CAAC,CAAC,eAAe,KAAA;IACzC,GAAI,UAAU,YAAY;IAChB;IACV,IAAI;IACC;IACL,GAAI;IACJ,oBAAkB;IAClB,cAAc,KAAK,gBAAgB;IACnC,MAAM,WAAW,SAAS;GAC3B,CAAA;EACI,CAAA;CACM,CAAA;AAEnB,CAAC;AAED,cAAc,UAAU;CAAE,GAAG,UAAU;CAAS,GAAGA;AAAQ;AAC3D,cAAc,eAAe;AAC7B,cAAc,cAAc"}
+{"version":3,"file":"PasswordInput.mjs","names":["useId","classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { use } from 'react';\nimport cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  Input,\n  InputVariant,\n  InputWrapperContext,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the visibility toggle button is focusable with keyboard @default `false` */\n  visibilityToggleFocusable?: boolean;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  visibilityToggleFocusable: false,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nfunction PasswordInputField(props: React.ComponentProps<'input'>) {\n  const ctx = use(InputWrapperContext);\n  return <input {...props} aria-describedby={ctx?.describedBy} />;\n}\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    success,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    successProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    visibilityToggleFocusable,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    withSuccessStyles,\n    mod,\n    attributes,\n    dir,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const successId = successProps?.id || `${uuid}-success`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={visibilityToggleFocusable ? 0 : -1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      success={success}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      successProps={{ ...successProps, id: successId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        dir={dir}\n        error={error}\n        success={success}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        withSuccessStyles={withSuccessStyles}\n        attributes={attributes}\n      >\n        <PasswordInputField\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          dir={dir}\n          {...rest}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}