@mantine/core 9.3.1 → 9.4.0

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 { createEventHandler, 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\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  return (\n    <Popover.Target refProp={refProp} {...others}>\n      {cloneElement(\n        child,\n        eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners\n      )}\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;CAGhC,IAFqB,IAAI,qBAEV,EAAE,eAAe,IAAI,qBAAqB,IAAI,WAAW;EACtE,MAAM,iBAAiB,IAAI,kBAAkB;EAE7C,OACE,oBAAC,QAAQ,QAAT;GAAyB;GAAS,GAAI;aACnC,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,OACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,GAAI;YACnC,aACC,OACA,wBAAwB,GAAG,wBAAwB,eAAe,IAAI,cACxE;CACc,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
+{"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;aACnC,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;YACnC,aAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}

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

@@ -11,6 +11,10 @@ function useHoverCard(settings) {
 	const uid = useId$1();
 	const openTimeout = useRef(-1);
 	const closeTimeout = useRef(-1);
+	const targetRef = useRef(null);
+	const assignTarget = useCallback((node) => {
+		targetRef.current = node;
+	}, []);
 	const clearTimeouts = useCallback(() => {
 		window.clearTimeout(openTimeout.current);
 		window.clearTimeout(closeTimeout.current);
@@ -64,11 +68,31 @@ function useHoverCard(settings) {
 		settings.closeDelay,
 		onChange
 	]);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
 	useEffect(() => () => clearTimeouts(), [clearTimeouts]);
+	useEffect(() => {
+		if (!opened || withinGroup || typeof IntersectionObserver === "undefined") return;
+		const node = targetRef.current;
+		if (!node) return;
+		const observer = new IntersectionObserver(() => {
+			if (!node.isConnected || node.getClientRects().length === 0) {
+				clearTimeouts();
+				onChangeRef.current(false);
+			}
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [
+		opened,
+		withinGroup,
+		clearTimeouts
+	]);
 	return {
 		opened,
 		reference: refs.setReference,
 		floating: refs.setFloating,
+		assignTarget,
 		getReferenceProps,
 		getFloatingProps,
 		openDropdown,

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\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  useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n  return {\n    opened,\n    reference: refs.setReference,\n    floating: refs.setFloating,\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,EAAE;CAC/C,MAAM,MAAMA,QAAM;CAElB,MAAM,cAAc,OAAO,EAAE;CAC7B,MAAM,eAAe,OAAO,EAAE;CAE9B,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,sBAAsB,cAAc,GAAG,CAAC,aAAa,CAAC;CAEtD,OAAO;EACL;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;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  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"}

package/esm/components/Input/Input.mjs

@@ -17,6 +17,7 @@ import { InputDescription } from "./InputDescription/InputDescription.mjs";
 import { InputError } from "./InputError/InputError.mjs";
 import { InputLabel } from "./InputLabel/InputLabel.mjs";
 import { InputPlaceholder } from "./InputPlaceholder/InputPlaceholder.mjs";
+import { InputSuccess } from "./InputSuccess/InputSuccess.mjs";
 import { InputWrapper } from "./InputWrapper/InputWrapper.mjs";
 import { use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,6 +28,7 @@ const defaultProps = {
 	rightSectionPointerEvents: "none",
 	withAria: true,
 	withErrorStyles: true,
+	withSuccessStyles: true,
 	size: "sm",
 	loading: false,
 	loadingPosition: "right"
@@ -45,7 +47,7 @@ const varsResolver = createVarsResolver((_, props, ctx) => ({ wrapper: {
 } }));
 const Input = polymorphicFactory((_props) => {
 	const props = useProps("Input", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, __bottomSection, __bottomSectionProps, rootRef, dir, ...others } = props;
+	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, success, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, withSuccessStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, __bottomSection, __bottomSectionProps, rootRef, dir, ...others } = props;
 	const { styleProps, rest } = extractStyleProps(others);
 	const ctx = use(InputWrapperContext);
 	const stylesCtx = {
@@ -94,6 +96,7 @@ const Input = polymorphicFactory((_props) => {
 			...wrapperProps,
 			mod: [{
 				error: !!error && withErrorStyles,
+				success: !!success && !error && withSuccessStyles,
 				pointer,
 				disabled,
 				multiline,
@@ -120,7 +123,8 @@ const Input = polymorphicFactory((_props) => {
 					required,
 					mod: {
 						disabled,
-						error: !!error && withErrorStyles
+						error: !!error && withErrorStyles,
+						success: !!success && !error && withSuccessStyles
 					},
 					variant,
 					__size: inputSize,
@@ -152,6 +156,7 @@ Input.varsResolver = varsResolver;
 Input.Wrapper = InputWrapper;
 Input.Label = InputLabel;
 Input.Error = InputError;
+Input.Success = InputSuccess;
 Input.Description = InputDescription;
 Input.Placeholder = InputPlaceholder;
 Input.ClearButton = InputClearButton;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["classes"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  extractStyleProps,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n  InputClearButton,\n  type InputClearButtonProps,\n  type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n  ClearSectionMode,\n  InputClearSection,\n  type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n  InputDescription,\n  type InputDescriptionProps,\n  type InputDescriptionStylesNames,\n  type InputDescriptionCssVariables,\n  type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n  InputError,\n  type InputErrorProps,\n  type InputErrorStylesNames,\n  type InputErrorCssVariables,\n  type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n  InputLabel,\n  type InputLabelProps,\n  type InputLabelStylesNames,\n  type InputLabelCssVariables,\n  type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n  InputPlaceholder,\n  type InputPlaceholderProps,\n  type InputPlaceholderStylesNames,\n  type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n  __InputWrapperProps,\n  InputWrapper,\n  InputWrapperStylesNames,\n  type InputWrapperProps,\n  type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n  /** Props passed down to the root element */\n  wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection';\nexport type InputVariant = 'default' | 'filled' | 'unstyled';\nexport type InputCssVariables = {\n  wrapper:\n    | '--input-height'\n    | '--input-fz'\n    | '--input-radius'\n    | '--input-left-section-width'\n    | '--input-right-section-width'\n    | '--input-left-section-pointer-events'\n    | '--input-right-section-pointer-events'\n    | '--input-padding-y'\n    | '--input-margin-top'\n    | '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n  offsetTop: boolean | undefined;\n  offsetBottom: boolean | undefined;\n}\n\nexport interface __InputProps {\n  /** Content section displayed on the left side of the input */\n  leftSection?: React.ReactNode;\n\n  /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */\n  leftSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `leftSection` element */\n  leftSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Content section displayed on the right side of the input */\n  rightSection?: React.ReactNode;\n\n  /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */\n  rightSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `rightSection` element */\n  rightSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Sets `required` attribute on the `input` element */\n  required?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute on the `input` element */\n  disabled?: boolean;\n\n  /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false */\n  pointer?: boolean;\n\n  /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */\n  withErrorStyles?: boolean;\n\n  /** HTML `size` attribute for the input element (number of visible characters) */\n  inputSize?: string;\n\n  /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */\n  __clearSection?: React.ReactNode;\n\n  /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */\n  __clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  __clearSectionMode?: ClearSectionMode;\n\n  /** Right section displayed when both `__clearSection` and `rightSection` are not defined */\n  __defaultRightSection?: React.ReactNode;\n\n  /** Displays loading indicator in the left or right section @default false */\n  loading?: boolean;\n\n  /** Position of the loading indicator @default 'right' */\n  loadingPosition?: 'left' | 'right';\n\n  /** Content section displayed at the bottom of the input, inside the border */\n  __bottomSection?: React.ReactNode;\n\n  /** Props passed down to the `__bottomSection` element */\n  __bottomSectionProps?: React.ComponentProps<'div'>;\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces `Input.Wrapper` props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Determines whether the input should have error styles and `aria-invalid` attribute */\n  error?: React.ReactNode;\n\n  /** Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false */\n  multiline?: boolean;\n\n  /** Input element id */\n  id?: string;\n\n  /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */\n  withAria?: boolean;\n\n  /** Props passed down to the root element of the `Input` component */\n  wrapperProps?: WrapperProps;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n  props: InputProps;\n  defaultRef: HTMLInputElement;\n  defaultComponent: 'input';\n  stylesNames: InputStylesNames;\n  variant: InputVariant;\n  vars: InputCssVariables;\n  ctx: InputStylesCtx;\n  staticComponents: {\n    Label: typeof InputLabel;\n    Error: typeof InputError;\n    Description: typeof InputDescription;\n    Placeholder: typeof InputPlaceholder;\n    Wrapper: typeof InputWrapper;\n    ClearButton: typeof InputClearButton;\n  };\n}>;\n\nconst defaultProps = {\n  variant: 'default',\n  leftSectionPointerEvents: 'none',\n  rightSectionPointerEvents: 'none',\n  withAria: true,\n  withErrorStyles: true,\n  size: 'sm',\n  loading: false,\n  loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n  wrapper: {\n    '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-height': getSize(props.size, 'input-height'),\n    '--input-fz': getFontSize(props.size),\n    '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n    '--input-left-section-width':\n      props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n    '--input-right-section-width':\n      props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n    '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n    '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n    '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n  },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n  const props = useProps('Input', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    required,\n    __staticSelector,\n    __stylesApiProps,\n    size,\n    wrapperProps,\n    error,\n    disabled,\n    leftSection,\n    leftSectionProps,\n    leftSectionWidth,\n    rightSection,\n    rightSectionProps,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionPointerEvents,\n    variant,\n    vars,\n    pointer,\n    multiline,\n    radius,\n    id,\n    withAria,\n    withErrorStyles,\n    mod,\n    inputSize,\n    attributes,\n    __clearSection,\n    __clearable,\n    __clearSectionMode,\n    __defaultRightSection,\n    loading,\n    loadingPosition,\n    __bottomSection,\n    __bottomSectionProps,\n    rootRef,\n    dir,\n    ...others\n  } = props as typeof props & Pick<React.HTMLAttributes<HTMLDivElement>, 'dir'>;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const ctx = use(InputWrapperContext);\n  const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n  const getStyles = useStyles<InputFactory>({\n    name: ['Input', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    stylesCtx,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const ariaAttributes = withAria\n    ? {\n        required,\n        disabled,\n        'aria-invalid': error ? true : undefined,\n        'aria-describedby': ctx?.describedBy,\n        id: ctx?.inputId || id,\n      }\n    : {};\n\n  const loadingIndicator = loading ? (\n    <Loader\n      size={\n        loadingPosition === 'left'\n          ? 'calc(var(--input-left-section-size) / 2)'\n          : 'calc(var(--input-right-section-size) / 2)'\n      }\n    />\n  ) : null;\n\n  const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n  const _rightSection: React.ReactNode = InputClearSection({\n    __clearable,\n    __clearSection,\n    rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n    __defaultRightSection,\n    size,\n    __clearSectionMode,\n  });\n\n  return (\n    <InputContext value={{ size: size || 'sm' }}>\n      <Box\n        ref={rootRef}\n        dir={dir}\n        {...getStyles('wrapper')}\n        {...styleProps}\n        {...wrapperProps}\n        mod={[\n          {\n            error: !!error && withErrorStyles,\n            pointer,\n            disabled,\n            multiline,\n            'data-with-right-section': !!_rightSection,\n            'data-with-left-section': !!_leftSection,\n            'data-with-bottom-section': !!__bottomSection,\n          },\n          mod,\n        ]}\n        variant={variant}\n        size={size}\n      >\n        {_leftSection && (\n          <div\n            {...leftSectionProps}\n            data-position=\"left\"\n            {...getStyles('section', {\n              className: leftSectionProps?.className,\n              style: leftSectionProps?.style,\n            })}\n          >\n            {_leftSection}\n          </div>\n        )}\n\n        <Box\n          component=\"input\"\n          {...rest}\n          {...ariaAttributes}\n          required={required}\n          mod={{ disabled, error: !!error && withErrorStyles }}\n          variant={variant}\n          __size={inputSize}\n          {...getStyles('input')}\n        />\n\n        {__bottomSection && (\n          <div\n            {...__bottomSectionProps}\n            {...getStyles('bottomSection', {\n              className: __bottomSectionProps?.className,\n              style: __bottomSectionProps?.style,\n            })}\n          >\n            {__bottomSection}\n          </div>\n        )}\n\n        {_rightSection && (\n          <div\n            {...rightSectionProps}\n            data-position=\"right\"\n            {...getStyles('section', {\n              className: rightSectionProps?.className,\n              style: rightSectionProps?.style,\n            })}\n          >\n            {_rightSection}\n          </div>\n        )}\n      </Box>\n    </InputContext>\n  );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n  export type Props = InputProps;\n  export type StylesNames = InputStylesNames;\n  export type CssVariables = InputCssVariables;\n  export type Factory = InputFactory;\n\n  export namespace Wrapper {\n    export type Props = InputWrapperProps;\n    export type StylesNames = InputWrapperStylesNames;\n    export type Factory = InputWrapperFactory;\n  }\n\n  export namespace Description {\n    export type Props = InputDescriptionProps;\n    export type StylesNames = InputDescriptionStylesNames;\n    export type CssVariables = InputDescriptionCssVariables;\n    export type Factory = InputDescriptionFactory;\n  }\n\n  export namespace Error {\n    export type Props = InputErrorProps;\n    export type StylesNames = InputErrorStylesNames;\n    export type CssVariables = InputErrorCssVariables;\n    export type Factory = InputErrorFactory;\n  }\n\n  export namespace Label {\n    export type Props = InputLabelProps;\n    export type StylesNames = InputLabelStylesNames;\n    export type CssVariables = InputLabelCssVariables;\n    export type Factory = InputLabelFactory;\n  }\n\n  export namespace Placeholder {\n    export type Props = InputPlaceholderProps;\n    export type StylesNames = InputPlaceholderStylesNames;\n    export type Factory = InputPlaceholderFactory;\n  }\n\n  export namespace ClearButton {\n    export type Props = InputClearButtonProps;\n    export type Factory = InputClearButtonFactory;\n  }\n\n  export namespace ClearSection {\n    export type Props = InputClearSectionProps;\n    export type Mode = ClearSectionMode;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoNA,MAAM,eAAe;CACnB,SAAS;CACT,0BAA0B;CAC1B,2BAA2B;CAC3B,UAAU;CACV,iBAAiB;CACjB,MAAM;CACN,SAAS;CACT,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAAkC,GAAG,OAAO,SAAS,EACxE,SAAS;CACP,sBAAsB,IAAI,YAAY,wCAAwC,KAAA;CAC9E,yBAAyB,IAAI,eAAe,wCAAwC,KAAA;CACpF,kBAAkB,QAAQ,MAAM,MAAM,cAAc;CACpD,cAAc,YAAY,MAAM,IAAI;CACpC,kBAAkB,MAAM,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM,MAAM;CACjF,8BACE,MAAM,qBAAqB,KAAA,IAAY,IAAI,MAAM,gBAAgB,IAAI,KAAA;CACvE,+BACE,MAAM,sBAAsB,KAAA,IAAY,IAAI,MAAM,iBAAiB,IAAI,KAAA;CACzE,qBAAqB,MAAM,YAAY,QAAQ,MAAM,MAAM,iBAAiB,IAAI,KAAA;CAChF,uCAAuC,MAAM;CAC7C,wCAAwC,MAAM;AAChD,EACF,EAAE;AAEF,MAAa,QAAQ,oBAAkC,WAAW;CAChE,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,UACA,kBACA,kBACA,MACA,cACA,OACA,UACA,aACA,kBACA,kBACA,cACA,mBACA,mBACA,2BACA,0BACA,SACA,MACA,SACA,WACA,QACA,IACA,UACA,iBACA,KACA,WACA,YACA,gBACA,aACA,oBACA,uBACA,SACA,iBACA,iBACA,sBACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,YAA4B;EAAE,cAAc,KAAK;EAAc,WAAW,KAAK;CAAU;CAE/F,MAAM,YAAY,UAAwB;EACxC,MAAM,CAAC,SAAS,gBAAgB;EAChC,OAAO,oBAAoB;EAC3B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,WACnB;EACE;EACA;EACA,gBAAgB,QAAQ,OAAO,KAAA;EAC/B,oBAAoB,KAAK;EACzB,IAAI,KAAK,WAAW;CACtB,IACA,CAAC;CAEL,MAAM,mBAAmB,UACvB,oBAAC,QAAD,EACE,MACE,oBAAoB,SAChB,6CACA,4CAEP,CAAA,IACC;CAEJ,MAAM,eAAe,WAAW,oBAAoB,SAAS,mBAAmB;CAChF,MAAM,gBAAiC,kBAAkB;EACvD;EACA;EACA,cAAc,WAAW,oBAAoB,UAAU,mBAAmB;EAC1E;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EAAc,OAAO,EAAE,MAAM,QAAQ,KAAK;YACxC,qBAAC,KAAD;GACE,KAAK;GACA;GACL,GAAI,UAAU,SAAS;GACvB,GAAI;GACJ,GAAI;GACJ,KAAK,CACH;IACE,OAAO,CAAC,CAAC,SAAS;IAClB;IACA;IACA;IACA,2BAA2B,CAAC,CAAC;IAC7B,0BAA0B,CAAC,CAAC;IAC5B,4BAA4B,CAAC,CAAC;GAChC,GACA,GACF;GACS;GACH;aAnBR;IAqBG,gBACC,oBAAC,OAAD;KACE,GAAI;KACJ,iBAAc;KACd,GAAI,UAAU,WAAW;MACvB,WAAW,kBAAkB;MAC7B,OAAO,kBAAkB;KAC3B,CAAC;eAEA;IACE,CAAA;IAGP,oBAAC,KAAD;KACE,WAAU;KACV,GAAI;KACJ,GAAI;KACM;KACV,KAAK;MAAE;MAAU,OAAO,CAAC,CAAC,SAAS;KAAgB;KAC1C;KACT,QAAQ;KACR,GAAI,UAAU,OAAO;IACtB,CAAA;IAEA,mBACC,oBAAC,OAAD;KACE,GAAI;KACJ,GAAI,UAAU,iBAAiB;MAC7B,WAAW,sBAAsB;MACjC,OAAO,sBAAsB;KAC/B,CAAC;eAEA;IACE,CAAA;IAGN,iBACC,oBAAC,OAAD;KACE,GAAI;KACJ,iBAAc;KACd,GAAI,UAAU,WAAW;MACvB,WAAW,mBAAmB;MAC9B,OAAO,mBAAmB;KAC5B,CAAC;eAEA;IACE,CAAA;GAEJ;;CACO,CAAA;AAElB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,UAAU;AAChB,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc"}
+{"version":3,"file":"Input.mjs","names":["classes"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  extractStyleProps,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n  InputClearButton,\n  type InputClearButtonProps,\n  type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n  ClearSectionMode,\n  InputClearSection,\n  type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n  InputDescription,\n  type InputDescriptionProps,\n  type InputDescriptionStylesNames,\n  type InputDescriptionCssVariables,\n  type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n  InputError,\n  type InputErrorProps,\n  type InputErrorStylesNames,\n  type InputErrorCssVariables,\n  type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n  InputLabel,\n  type InputLabelProps,\n  type InputLabelStylesNames,\n  type InputLabelCssVariables,\n  type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n  InputPlaceholder,\n  type InputPlaceholderProps,\n  type InputPlaceholderStylesNames,\n  type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputSuccess } from './InputSuccess/InputSuccess';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n  __InputWrapperProps,\n  InputWrapper,\n  InputWrapperStylesNames,\n  type InputWrapperProps,\n  type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n  /** Props passed down to the root element */\n  wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection';\nexport type InputVariant = 'default' | 'filled' | 'unstyled';\nexport type InputCssVariables = {\n  wrapper:\n    | '--input-height'\n    | '--input-fz'\n    | '--input-radius'\n    | '--input-left-section-width'\n    | '--input-right-section-width'\n    | '--input-left-section-pointer-events'\n    | '--input-right-section-pointer-events'\n    | '--input-padding-y'\n    | '--input-margin-top'\n    | '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n  offsetTop: boolean | undefined;\n  offsetBottom: boolean | undefined;\n}\n\nexport interface __InputProps {\n  /** Content section displayed on the left side of the input */\n  leftSection?: React.ReactNode;\n\n  /** Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height */\n  leftSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `leftSection` element */\n  leftSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Content section displayed on the right side of the input */\n  rightSection?: React.ReactNode;\n\n  /** Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height */\n  rightSectionWidth?: React.CSSProperties['width'];\n\n  /** Props passed down to the `rightSection` element */\n  rightSectionProps?: React.ComponentProps<'div'>;\n\n  /** Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' */\n  rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n  /** Sets `required` attribute on the `input` element */\n  required?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute on the `input` element */\n  disabled?: boolean;\n\n  /** Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false */\n  pointer?: boolean;\n\n  /** Determines whether the input should have red border and red text color when the `error` prop is set @default true */\n  withErrorStyles?: boolean;\n\n  /** Determines whether the input should have green border when the `success` prop is set @default true */\n  withSuccessStyles?: boolean;\n\n  /** HTML `size` attribute for the input element (number of visible characters) */\n  inputSize?: string;\n\n  /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */\n  __clearSection?: React.ReactNode;\n\n  /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */\n  __clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  __clearSectionMode?: ClearSectionMode;\n\n  /** Right section displayed when both `__clearSection` and `rightSection` are not defined */\n  __defaultRightSection?: React.ReactNode;\n\n  /** Displays loading indicator in the left or right section @default false */\n  loading?: boolean;\n\n  /** Position of the loading indicator @default 'right' */\n  loadingPosition?: 'left' | 'right';\n\n  /** Content section displayed at the bottom of the input, inside the border */\n  __bottomSection?: React.ReactNode;\n\n  /** Props passed down to the `__bottomSection` element */\n  __bottomSectionProps?: React.ComponentProps<'div'>;\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces `Input.Wrapper` props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Determines whether the input should have error styles and `aria-invalid` attribute */\n  error?: React.ReactNode;\n\n  /** Determines whether the input should have success styles */\n  success?: React.ReactNode;\n\n  /** Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false */\n  multiline?: boolean;\n\n  /** Input element id */\n  id?: string;\n\n  /** Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true */\n  withAria?: boolean;\n\n  /** Props passed down to the root element of the `Input` component */\n  wrapperProps?: WrapperProps;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n  props: InputProps;\n  defaultRef: HTMLInputElement;\n  defaultComponent: 'input';\n  stylesNames: InputStylesNames;\n  variant: InputVariant;\n  vars: InputCssVariables;\n  ctx: InputStylesCtx;\n  staticComponents: {\n    Label: typeof InputLabel;\n    Error: typeof InputError;\n    Success: typeof InputSuccess;\n    Description: typeof InputDescription;\n    Placeholder: typeof InputPlaceholder;\n    Wrapper: typeof InputWrapper;\n    ClearButton: typeof InputClearButton;\n  };\n}>;\n\nconst defaultProps = {\n  variant: 'default',\n  leftSectionPointerEvents: 'none',\n  rightSectionPointerEvents: 'none',\n  withAria: true,\n  withErrorStyles: true,\n  withSuccessStyles: true,\n  size: 'sm',\n  loading: false,\n  loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n  wrapper: {\n    '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n    '--input-height': getSize(props.size, 'input-height'),\n    '--input-fz': getFontSize(props.size),\n    '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n    '--input-left-section-width':\n      props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n    '--input-right-section-width':\n      props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n    '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n    '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n    '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n  },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n  const props = useProps('Input', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    required,\n    __staticSelector,\n    __stylesApiProps,\n    size,\n    wrapperProps,\n    error,\n    success,\n    disabled,\n    leftSection,\n    leftSectionProps,\n    leftSectionWidth,\n    rightSection,\n    rightSectionProps,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionPointerEvents,\n    variant,\n    vars,\n    pointer,\n    multiline,\n    radius,\n    id,\n    withAria,\n    withErrorStyles,\n    withSuccessStyles,\n    mod,\n    inputSize,\n    attributes,\n    __clearSection,\n    __clearable,\n    __clearSectionMode,\n    __defaultRightSection,\n    loading,\n    loadingPosition,\n    __bottomSection,\n    __bottomSectionProps,\n    rootRef,\n    dir,\n    ...others\n  } = props as typeof props & Pick<React.HTMLAttributes<HTMLDivElement>, 'dir'>;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const ctx = use(InputWrapperContext);\n  const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n  const getStyles = useStyles<InputFactory>({\n    name: ['Input', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    stylesCtx,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const ariaAttributes = withAria\n    ? {\n        required,\n        disabled,\n        'aria-invalid': error ? true : undefined,\n        'aria-describedby': ctx?.describedBy,\n        id: ctx?.inputId || id,\n      }\n    : {};\n\n  const loadingIndicator = loading ? (\n    <Loader\n      size={\n        loadingPosition === 'left'\n          ? 'calc(var(--input-left-section-size) / 2)'\n          : 'calc(var(--input-right-section-size) / 2)'\n      }\n    />\n  ) : null;\n\n  const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n  const _rightSection: React.ReactNode = InputClearSection({\n    __clearable,\n    __clearSection,\n    rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n    __defaultRightSection,\n    size,\n    __clearSectionMode,\n  });\n\n  return (\n    <InputContext value={{ size: size || 'sm' }}>\n      <Box\n        ref={rootRef}\n        dir={dir}\n        {...getStyles('wrapper')}\n        {...styleProps}\n        {...wrapperProps}\n        mod={[\n          {\n            error: !!error && withErrorStyles,\n            success: !!success && !error && withSuccessStyles,\n            pointer,\n            disabled,\n            multiline,\n            'data-with-right-section': !!_rightSection,\n            'data-with-left-section': !!_leftSection,\n            'data-with-bottom-section': !!__bottomSection,\n          },\n          mod,\n        ]}\n        variant={variant}\n        size={size}\n      >\n        {_leftSection && (\n          <div\n            {...leftSectionProps}\n            data-position=\"left\"\n            {...getStyles('section', {\n              className: leftSectionProps?.className,\n              style: leftSectionProps?.style,\n            })}\n          >\n            {_leftSection}\n          </div>\n        )}\n\n        <Box\n          component=\"input\"\n          {...rest}\n          {...ariaAttributes}\n          required={required}\n          mod={{\n            disabled,\n            error: !!error && withErrorStyles,\n            success: !!success && !error && withSuccessStyles,\n          }}\n          variant={variant}\n          __size={inputSize}\n          {...getStyles('input')}\n        />\n\n        {__bottomSection && (\n          <div\n            {...__bottomSectionProps}\n            {...getStyles('bottomSection', {\n              className: __bottomSectionProps?.className,\n              style: __bottomSectionProps?.style,\n            })}\n          >\n            {__bottomSection}\n          </div>\n        )}\n\n        {_rightSection && (\n          <div\n            {...rightSectionProps}\n            data-position=\"right\"\n            {...getStyles('section', {\n              className: rightSectionProps?.className,\n              style: rightSectionProps?.style,\n            })}\n          >\n            {_rightSection}\n          </div>\n        )}\n      </Box>\n    </InputContext>\n  );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Success = InputSuccess;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n  export type Props = InputProps;\n  export type StylesNames = InputStylesNames;\n  export type CssVariables = InputCssVariables;\n  export type Factory = InputFactory;\n\n  export namespace Wrapper {\n    export type Props = InputWrapperProps;\n    export type StylesNames = InputWrapperStylesNames;\n    export type Factory = InputWrapperFactory;\n  }\n\n  export namespace Description {\n    export type Props = InputDescriptionProps;\n    export type StylesNames = InputDescriptionStylesNames;\n    export type CssVariables = InputDescriptionCssVariables;\n    export type Factory = InputDescriptionFactory;\n  }\n\n  export namespace Error {\n    export type Props = InputErrorProps;\n    export type StylesNames = InputErrorStylesNames;\n    export type CssVariables = InputErrorCssVariables;\n    export type Factory = InputErrorFactory;\n  }\n\n  export namespace Label {\n    export type Props = InputLabelProps;\n    export type StylesNames = InputLabelStylesNames;\n    export type CssVariables = InputLabelCssVariables;\n    export type Factory = InputLabelFactory;\n  }\n\n  export namespace Placeholder {\n    export type Props = InputPlaceholderProps;\n    export type StylesNames = InputPlaceholderStylesNames;\n    export type Factory = InputPlaceholderFactory;\n  }\n\n  export namespace ClearButton {\n    export type Props = InputClearButtonProps;\n    export type Factory = InputClearButtonFactory;\n  }\n\n  export namespace ClearSection {\n    export type Props = InputClearSectionProps;\n    export type Mode = ClearSectionMode;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Input/Input.module.mjs

@@ -10,6 +10,7 @@ var Input_module_default = {
 	"label": "m_8fdc1311",
 	"required": "m_78a94662",
 	"error": "m_8f816625",
+	"success": "m_9d9d40e0",
 	"description": "m_fe47ce59"
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  margin-top: var(--input-margin-top, 0rem);\n  margin-bottom: var(--input-margin-bottom, 0rem);\n\n  --input-height-xs: 30px;\n  --input-height-sm: 36px;\n  --input-height-md: 42px;\n  --input-height-lg: 50px;\n  --input-height-xl: 60px;\n\n  --input-padding-y-xs: 5px;\n  --input-padding-y-sm: 6px;\n  --input-padding-y-md: 8px;\n  --input-padding-y-lg: 10px;\n  --input-padding-y-xl: 13px;\n\n  --input-height: var(--input-height-sm);\n  --input-radius: var(--mantine-radius-default);\n\n  --input-cursor: text;\n  --input-line-height: calc(var(--input-height) - rem(2px));\n  --input-padding: calc(var(--input-height) / 3);\n  --input-padding-inline-start: var(--input-padding);\n  --input-padding-inline-end: var(--input-padding);\n  --input-placeholder-color: var(--mantine-color-placeholder);\n  --input-color: var(--mantine-color-text);\n  --input-disabled-bg: var(--mantine-color-disabled);\n  --input-disabled-color: var(--mantine-color-disabled-color);\n\n  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n  --input-right-section-size: var(\n    --input-right-section-width,\n    calc(var(--input-height) - rem(2px))\n  );\n\n  --input-size: var(--input-height);\n\n  --section-y: 1px;\n  --left-section-start: 1px;\n  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n  --right-section-end: 1px;\n  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n  &[data-variant='unstyled'] {\n    --input-padding: 0;\n    --input-padding-y: 0;\n    --input-padding-inline-start: 0;\n    --input-padding-inline-end: 0;\n  }\n\n  &[data-pointer] {\n    --input-cursor: pointer;\n  }\n\n  &[data-with-bottom-section] {\n    --input-bottom-section-height: 28px;\n  }\n\n  &[data-multiline] {\n    --input-padding-y-xs: 4.5px;\n    --input-padding-y-sm: 5.5px;\n    --input-padding-y-md: 7px;\n    --input-padding-y-lg: 9.5px;\n    --input-padding-y-xl: 13px;\n\n    --input-size: auto;\n    --input-line-height: var(--mantine-line-height);\n  }\n\n  &[data-with-left-section] {\n    --input-padding-inline-start: var(--input-left-section-size);\n  }\n\n  &[data-with-right-section] {\n    --input-padding-inline-end: var(--input-right-section-size);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --input-padding-inline-end: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --input-padding-inline-end: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --input-padding-inline-end: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --input-padding-inline-end: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --input-padding-inline-end: 89px;\n      }\n    }\n  }\n\n  @mixin light {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-gray-4);\n      --input-bg: var(--mantine-color-white);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-gray-1);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  @mixin dark {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-dark-4);\n      --input-bg: var(--mantine-color-dark-6);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-dark-5);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  [data-mantine-color-scheme] &[data-error] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    --input-color: var(--mantine-color-error);\n    --input-placeholder-color: var(--mantine-color-error);\n    --input-section-color: var(--mantine-color-error);\n  }\n\n  @mixin where-rtl {\n    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n  }\n\n  &[dir='ltr'] {\n    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n  }\n}\n\n.input {\n  -webkit-tap-highlight-color: transparent;\n  appearance: none;\n  resize: var(--input-resize, none);\n  display: block;\n  width: 100%;\n  transition: border-color 100ms ease;\n\n  text-align: var(--input-text-align, start);\n  color: var(--input-color);\n  border: rem(1px) solid var(--input-bd);\n  background-color: var(--input-bg);\n  font-family: var(--input-font-family, var(--mantine-font-family));\n  height: var(--input-size);\n  min-height: var(--input-height);\n  line-height: var(--input-line-height);\n  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n  border-radius: var(--input-radius);\n  padding-inline-start: var(--input-padding-inline-start);\n  padding-inline-end: var(--input-padding-inline-end);\n  padding-top: var(--input-padding-y, 0rem);\n  padding-bottom: var(--input-padding-y, 0rem);\n  cursor: var(--input-cursor);\n  overflow: var(--input-overflow);\n\n  /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n  &[data-no-overflow] {\n    --input-overflow: hidden;\n  }\n\n  /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n  &[data-monospace] {\n    --input-font-family: var(--mantine-font-family-monospace);\n    --_input-fz: calc(var(--input-fz) - rem(2px));\n  }\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    --input-bd: var(--input-bd-focus);\n\n    [data-error] & {\n      --input-bd: var(--mantine-color-error);\n    }\n  }\n\n  &::placeholder {\n    color: var(--input-placeholder-color);\n    opacity: 1;\n  }\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button,\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  &[readonly] {\n    caret-color: transparent;\n  }\n\n  [data-with-bottom-section] & {\n    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));\n  }\n}\n\n.bottomSection {\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  height: var(--input-bottom-section-height);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding-inline: var(--input-padding);\n  border-radius: 0 0 var(--input-radius) var(--input-radius);\n  pointer-events: all;\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-fz, var(--mantine-font-size-sm));\n}\n\n.section {\n  pointer-events: var(--section-pointer-events);\n  position: absolute;\n  z-index: 1;\n  inset-inline-start: var(--section-start);\n  inset-inline-end: var(--section-end);\n  bottom: var(--section-y);\n  top: var(--section-y);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--section-size);\n  border-radius: var(--section-border-radius);\n  color: var(--input-section-color, var(--mantine-color-dimmed));\n\n  &[data-position='right'] {\n    --section-pointer-events: var(--input-right-section-pointer-events);\n    --section-end: var(--right-section-end);\n    --section-size: var(--input-right-section-size);\n    --section-border-radius: var(--right-section-border-radius);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --section-size: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --section-size: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --section-size: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --section-size: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --section-size: 89px;\n      }\n    }\n  }\n\n  &[data-position='left'] {\n    --section-pointer-events: var(--input-left-section-pointer-events);\n    --section-start: var(--left-section-start);\n    --section-size: var(--input-left-section-size);\n    --section-border-radius: var(--left-section-border-radius);\n  }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n  color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n  [data-error] & {\n    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n  }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n  line-height: var(--mantine-line-height);\n}\n\n.label {\n  display: inline-block;\n  font-weight: var(--mantine-font-weight-medium);\n  overflow-wrap: break-word;\n  cursor: default;\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n  color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n  word-wrap: break-word;\n  line-height: 1.2;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.error {\n  color: var(--mantine-color-error);\n  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}
+{"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  margin-top: var(--input-margin-top, 0rem);\n  margin-bottom: var(--input-margin-bottom, 0rem);\n\n  --input-height-xs: 30px;\n  --input-height-sm: 36px;\n  --input-height-md: 42px;\n  --input-height-lg: 50px;\n  --input-height-xl: 60px;\n\n  --input-padding-y-xs: 5px;\n  --input-padding-y-sm: 6px;\n  --input-padding-y-md: 8px;\n  --input-padding-y-lg: 10px;\n  --input-padding-y-xl: 13px;\n\n  --input-height: var(--input-height-sm);\n  --input-radius: var(--mantine-radius-default);\n\n  --input-cursor: text;\n  --input-line-height: calc(var(--input-height) - rem(2px));\n  --input-padding: calc(var(--input-height) / 3);\n  --input-padding-inline-start: var(--input-padding);\n  --input-padding-inline-end: var(--input-padding);\n  --input-placeholder-color: var(--mantine-color-placeholder);\n  --input-color: var(--mantine-color-text);\n  --input-disabled-bg: var(--mantine-color-disabled);\n  --input-disabled-color: var(--mantine-color-disabled-color);\n\n  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n  --input-right-section-size: var(\n    --input-right-section-width,\n    calc(var(--input-height) - rem(2px))\n  );\n\n  --input-size: var(--input-height);\n\n  --section-y: 1px;\n  --left-section-start: 1px;\n  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n  --right-section-end: 1px;\n  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n  &[data-variant='unstyled'] {\n    --input-padding: 0;\n    --input-padding-y: 0;\n    --input-padding-inline-start: 0;\n    --input-padding-inline-end: 0;\n  }\n\n  &[data-pointer] {\n    --input-cursor: pointer;\n  }\n\n  &[data-with-bottom-section] {\n    --input-bottom-section-height: 28px;\n  }\n\n  &[data-multiline] {\n    --input-padding-y-xs: 4.5px;\n    --input-padding-y-sm: 5.5px;\n    --input-padding-y-md: 7px;\n    --input-padding-y-lg: 9.5px;\n    --input-padding-y-xl: 13px;\n\n    --input-size: auto;\n    --input-line-height: var(--mantine-line-height);\n  }\n\n  &[data-with-left-section] {\n    --input-padding-inline-start: var(--input-left-section-size);\n  }\n\n  &[data-with-right-section] {\n    --input-padding-inline-end: var(--input-right-section-size);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --input-padding-inline-end: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --input-padding-inline-end: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --input-padding-inline-end: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --input-padding-inline-end: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --input-padding-inline-end: 89px;\n      }\n    }\n  }\n\n  @mixin light {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-gray-4);\n      --input-bg: var(--mantine-color-white);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-gray-1);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  @mixin dark {\n    &[data-variant='default'] {\n      --input-bd: var(--mantine-color-dark-4);\n      --input-bg: var(--mantine-color-dark-6);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='filled'] {\n      --input-bd: transparent;\n      --input-bg: var(--mantine-color-dark-5);\n      --input-bd-focus: var(--mantine-primary-color-filled);\n    }\n\n    &[data-variant='unstyled'] {\n      --input-bd: transparent;\n      --input-bg: transparent;\n      --input-bd-focus: transparent;\n    }\n  }\n\n  [data-mantine-color-scheme] &[data-error] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    --input-color: var(--mantine-color-error);\n    --input-placeholder-color: var(--mantine-color-error);\n    --input-section-color: var(--mantine-color-error);\n  }\n\n  [data-mantine-color-scheme] &[data-success] {\n    &:not([data-variant='unstyled']) {\n      --input-bd: var(--mantine-color-success);\n    }\n\n    --input-section-color: var(--mantine-color-success);\n  }\n\n  @mixin where-rtl {\n    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n  }\n\n  &[dir='ltr'] {\n    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n  }\n}\n\n.input {\n  -webkit-tap-highlight-color: transparent;\n  appearance: none;\n  resize: var(--input-resize, none);\n  display: block;\n  width: 100%;\n  transition: border-color 100ms ease;\n\n  text-align: var(--input-text-align, start);\n  color: var(--input-color);\n  border: rem(1px) solid var(--input-bd);\n  background-color: var(--input-bg);\n  font-family: var(--input-font-family, var(--mantine-font-family));\n  height: var(--input-size);\n  min-height: var(--input-height);\n  line-height: var(--input-line-height);\n  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n  border-radius: var(--input-radius);\n  padding-inline-start: var(--input-padding-inline-start);\n  padding-inline-end: var(--input-padding-inline-end);\n  padding-top: var(--input-padding-y, 0rem);\n  padding-bottom: var(--input-padding-y, 0rem);\n  cursor: var(--input-cursor);\n  overflow: var(--input-overflow);\n\n  /* Used as data attribute in Textarea component, does not have associated prop on the Input component */\n  &[data-no-overflow] {\n    --input-overflow: hidden;\n  }\n\n  /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */\n  &[data-monospace] {\n    --input-font-family: var(--mantine-font-family-monospace);\n    --_input-fz: calc(var(--input-fz) - rem(2px));\n  }\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    --input-bd: var(--input-bd-focus);\n\n    .wrapper[data-error] & {\n      --input-bd: var(--mantine-color-error);\n    }\n\n    .wrapper[data-success] & {\n      --input-bd: var(--mantine-color-success);\n    }\n  }\n\n  &::placeholder {\n    color: var(--input-placeholder-color);\n    opacity: 1;\n  }\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button,\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--input-disabled-bg);\n    color: var(--input-disabled-color);\n  }\n\n  &[readonly] {\n    caret-color: transparent;\n  }\n\n  [data-with-bottom-section] & {\n    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));\n  }\n}\n\n.bottomSection {\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  right: 1px;\n  height: var(--input-bottom-section-height);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding-inline: var(--input-padding);\n  border-radius: 0 0 var(--input-radius) var(--input-radius);\n  pointer-events: all;\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-fz, var(--mantine-font-size-sm));\n}\n\n.section {\n  pointer-events: var(--section-pointer-events);\n  position: absolute;\n  z-index: 1;\n  inset-inline-start: var(--section-start);\n  inset-inline-end: var(--section-end);\n  bottom: var(--section-y);\n  top: var(--section-y);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--section-size);\n  border-radius: var(--section-border-radius);\n  color: var(--input-section-color, var(--mantine-color-dimmed));\n\n  &[data-position='right'] {\n    --section-pointer-events: var(--input-right-section-pointer-events);\n    --section-end: var(--right-section-end);\n    --section-size: var(--input-right-section-size);\n    --section-border-radius: var(--right-section-border-radius);\n\n    &:has([data-combined-clear-section]) {\n      .wrapper[data-size='xs'] & {\n        --section-size: 41px;\n      }\n\n      .wrapper[data-size='sm'] & {\n        --section-size: 50px;\n      }\n\n      .wrapper[data-size='md'] & {\n        --section-size: 60px;\n      }\n\n      .wrapper[data-size='lg'] & {\n        --section-size: 72px;\n      }\n\n      .wrapper[data-size='xl'] & {\n        --section-size: 89px;\n      }\n    }\n  }\n\n  &[data-position='left'] {\n    --section-pointer-events: var(--input-left-section-pointer-events);\n    --section-start: var(--left-section-start);\n    --section-size: var(--input-left-section-size);\n    --section-border-radius: var(--left-section-border-radius);\n  }\n}\n\n/* ----- Input.Placeholder ----- */\n.placeholder {\n  color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n  .wrapper[data-error] & {\n    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n  }\n}\n\n/* ----- Input.Wrapper ----- */\n.root {\n  line-height: var(--mantine-line-height);\n}\n\n.label {\n  display: inline-block;\n  font-weight: var(--mantine-font-weight-medium);\n  overflow-wrap: break-word;\n  cursor: default;\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n  color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.success,\n.description {\n  word-wrap: break-word;\n  line-height: 1.2;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.error {\n  color: var(--mantine-color-error);\n  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.success {\n  color: var(--mantine-color-success);\n  font-size: var(--input-success-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n  color: var(--mantine-color-dimmed);\n  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InputDescription.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputDescription/InputDescription.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputDescriptionStylesNames = 'description';\nexport type InputDescriptionCssVariables = {\n  description: '--input-description-size';\n};\n\nexport interface InputDescriptionProps\n  extends BoxProps, StylesApiProps<InputDescriptionFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n  __inheritStyles?: boolean;\n\n  /** Controls description `font-size` @default 'sm' */\n  size?: MantineFontSize;\n}\n\nexport type InputDescriptionFactory = Factory<{\n  props: InputDescriptionProps;\n  ref: HTMLParagraphElement;\n  stylesNames: InputDescriptionStylesNames;\n  vars: InputDescriptionCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<InputDescriptionFactory>((_, { size }) => ({\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputDescription = factory<InputDescriptionFactory>((_props) => {\n  const props = useProps('InputDescription', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    __staticSelector,\n    __inheritStyles = true,\n    attributes,\n    ...others\n  } = useProps('InputDescription', null, props);\n  const ctx = use(InputWrapperContext);\n\n  const _getStyles = useStyles<InputDescriptionFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'description',\n    vars,\n    varsResolver,\n  });\n\n  const getStyles = (__inheritStyles && ctx?.getStyles) || _getStyles;\n\n  return (\n    <Box\n      component=\"p\"\n      {...getStyles('description', ctx?.getStyles ? { className, style } : undefined)}\n      {...others}\n    />\n  );\n});\n\nInputDescription.classes = classes;\nInputDescription.varsResolver = varsResolver;\nInputDescription.displayName = '@mantine/core/InputDescription';\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,eAAe,oBAA6C,GAAG,EAAE,YAAY,EACjF,aAAa,EACX,4BACE,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQ,YAAY,IAAI,EAAE,KAAK,IAAI,CAAC,EAAE,GAC3E,EACF,EAAE;AAEF,MAAa,mBAAmB,SAAkC,WAAW;CAC3E,MAAM,QAAQ,SAAS,oBAAoB,MAAM,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,kBACA,kBAAkB,MAClB,YACA,GAAG,WACD,SAAS,oBAAoB,MAAM,KAAK;CAC5C,MAAM,MAAM,IAAI,mBAAmB;CAEnC,MAAM,aAAa,UAAmC;EACpD,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAID,OACE,oBAAC,KAAD;EACE,WAAU;EACV,IALe,mBAAmB,KAAK,aAAc,YAKvC,eAAe,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EAC9E,GAAI;CACL,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,eAAe;AAChC,iBAAiB,cAAc"}
+{"version":3,"file":"InputDescription.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputDescription/InputDescription.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputDescriptionStylesNames = 'description';\nexport type InputDescriptionCssVariables = {\n  description: '--input-description-size';\n};\n\nexport interface InputDescriptionProps\n  extends BoxProps, StylesApiProps<InputDescriptionFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n  __inheritStyles?: boolean;\n\n  /** Controls description `font-size` @default 'sm' */\n  size?: MantineFontSize;\n}\n\nexport type InputDescriptionFactory = Factory<{\n  props: InputDescriptionProps;\n  ref: HTMLParagraphElement;\n  stylesNames: InputDescriptionStylesNames;\n  vars: InputDescriptionCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<InputDescriptionFactory>((_, { size }) => ({\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputDescription = factory<InputDescriptionFactory>((_props) => {\n  const props = useProps('InputDescription', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    __staticSelector,\n    __inheritStyles = true,\n    attributes,\n    ...others\n  } = useProps('InputDescription', null, props);\n  const ctx = use(InputWrapperContext);\n\n  const _getStyles = useStyles<InputDescriptionFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'description',\n    vars,\n    varsResolver,\n  });\n\n  const getStyles = (__inheritStyles && ctx?.getStyles) || _getStyles;\n\n  return (\n    <Box\n      component=\"p\"\n      {...getStyles('description', ctx?.getStyles ? { className, style } : undefined)}\n      {...others}\n    />\n  );\n});\n\nInputDescription.classes = classes;\nInputDescription.varsResolver = varsResolver;\nInputDescription.displayName = '@mantine/core/InputDescription';\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,eAAe,oBAA6C,GAAG,EAAE,YAAY,EACjF,aAAa,EACX,4BACE,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQ,YAAY,IAAI,EAAE,KAAK,IAAI,CAAC,EAAE,GAC3E,EACF,EAAE;AAEF,MAAa,mBAAmB,SAAkC,WAAW;CAC3E,MAAM,QAAQ,SAAS,oBAAoB,MAAM,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,kBACA,kBAAkB,MAClB,YACA,GAAG,WACD,SAAS,oBAAoB,MAAM,KAAK;CAC5C,MAAM,MAAM,IAAI,mBAAmB;CAEnC,MAAM,aAAa,UAAmC;EACpD,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAID,OACE,oBAAC,KAAD;EACE,WAAU;EACV,IALe,mBAAmB,KAAK,aAAc,WAAA,CAKvC,eAAe,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EAC9E,GAAI;CACL,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,eAAe;AAChC,iBAAiB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputError.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputError/InputError.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputErrorStylesNames = 'error';\nexport type InputErrorCssVariables = {\n  error: '--input-error-size';\n};\n\nexport interface InputErrorProps\n  extends BoxProps, StylesApiProps<InputErrorFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n  __inheritStyles?: boolean;\n\n  /** Controls error `font-size` @default 'sm' */\n  size?: MantineFontSize;\n}\n\nexport type InputErrorFactory = Factory<{\n  props: InputErrorProps;\n  ref: HTMLParagraphElement;\n  stylesNames: InputErrorStylesNames;\n  vars: InputErrorCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<InputErrorFactory>((_, { size }) => ({\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputError = factory<InputErrorFactory>((_props) => {\n  const props = useProps('InputError', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    __inheritStyles = true,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputErrorFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'error',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = (__inheritStyles && ctx?.getStyles) || _getStyles;\n\n  return (\n    <Box\n      component=\"p\"\n      {...getStyles('error', ctx?.getStyles ? { className, style } : undefined)}\n      {...others}\n    />\n  );\n});\n\nInputError.classes = classes;\nInputError.varsResolver = varsResolver;\nInputError.displayName = '@mantine/core/InputError';\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,eAAe,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO,EACL,sBAAsB,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQ,YAAY,IAAI,EAAE,KAAK,IAAI,CAAC,EAAE,GAC/F,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,MAAM,MAAM;CACjD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,kBAAkB,MAClB,GAAG,WACD;CAEJ,MAAM,aAAa,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CAGnC,OACE,oBAAC,KAAD;EACE,WAAU;EACV,IALe,mBAAmB,KAAK,aAAc,YAKvC,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"InputError.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputError/InputError.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputErrorStylesNames = 'error';\nexport type InputErrorCssVariables = {\n  error: '--input-error-size';\n};\n\nexport interface InputErrorProps\n  extends BoxProps, StylesApiProps<InputErrorFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n  __inheritStyles?: boolean;\n\n  /** Controls error `font-size` @default 'sm' */\n  size?: MantineFontSize;\n}\n\nexport type InputErrorFactory = Factory<{\n  props: InputErrorProps;\n  ref: HTMLParagraphElement;\n  stylesNames: InputErrorStylesNames;\n  vars: InputErrorCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<InputErrorFactory>((_, { size }) => ({\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputError = factory<InputErrorFactory>((_props) => {\n  const props = useProps('InputError', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    __inheritStyles = true,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputErrorFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'error',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = (__inheritStyles && ctx?.getStyles) || _getStyles;\n\n  return (\n    <Box\n      component=\"p\"\n      {...getStyles('error', ctx?.getStyles ? { className, style } : undefined)}\n      {...others}\n    />\n  );\n});\n\nInputError.classes = classes;\nInputError.varsResolver = varsResolver;\nInputError.displayName = '@mantine/core/InputError';\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,eAAe,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO,EACL,sBAAsB,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQ,YAAY,IAAI,EAAE,KAAK,IAAI,CAAC,EAAE,GAC/F,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,MAAM,MAAM;CACjD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,kBAAkB,MAClB,GAAG,WACD;CAEJ,MAAM,aAAa,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CAGnC,OACE,oBAAC,KAAD;EACE,WAAU;EACV,IALe,mBAAmB,KAAK,aAAc,WAAA,CAKvC,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputPlaceholder.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputPlaceholder/InputPlaceholder.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Input.module.css';\n\nexport type InputPlaceholderStylesNames = 'placeholder';\n\nexport interface InputPlaceholderProps\n  extends BoxProps, StylesApiProps<InputPlaceholderFactory>, ElementProps<'span'> {\n  __staticSelector?: string;\n\n  /** If set, the placeholder has error styles @default false */\n  error?: React.ReactNode;\n}\n\nexport type InputPlaceholderFactory = Factory<{\n  props: InputPlaceholderProps;\n  ref: HTMLSpanElement;\n  stylesNames: InputPlaceholderStylesNames;\n}>;\n\nexport const InputPlaceholder = factory<InputPlaceholderFactory>((_props) => {\n  const props = useProps('InputPlaceholder', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    __staticSelector,\n    error,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputPlaceholderFactory>({\n    name: ['InputPlaceholder', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'placeholder',\n  });\n\n  return (\n    <Box\n      {...getStyles('placeholder')}\n      mod={[{ error: !!error }, mod]}\n      component=\"span\"\n      {...others}\n    />\n  );\n});\n\nInputPlaceholder.classes = classes;\nInputPlaceholder.displayName = '@mantine/core/InputPlaceholder';\n"],"mappings":";;;;;;;;AA4BA,MAAa,mBAAmB,SAAkC,WAAW;CAC3E,MAAM,QAAQ,SAAS,oBAAoB,MAAM,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,kBACA,OACA,KACA,YACA,GAAG,WACD;CAeJ,OACE,oBAAC,KAAD;EACE,GAfc,UAAmC;GACnD,MAAM,CAAC,oBAAoB,gBAAgB;GAC3C;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAIgB,EAAE,aAAa;EAC3B,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,GAAG,GAAG;EAC7B,WAAU;EACV,GAAI;CACL,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}
+{"version":3,"file":"InputPlaceholder.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputPlaceholder/InputPlaceholder.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Input.module.css';\n\nexport type InputPlaceholderStylesNames = 'placeholder';\n\nexport interface InputPlaceholderProps\n  extends BoxProps, StylesApiProps<InputPlaceholderFactory>, ElementProps<'span'> {\n  __staticSelector?: string;\n\n  /** If set, the placeholder has error styles @default false */\n  error?: React.ReactNode;\n}\n\nexport type InputPlaceholderFactory = Factory<{\n  props: InputPlaceholderProps;\n  ref: HTMLSpanElement;\n  stylesNames: InputPlaceholderStylesNames;\n}>;\n\nexport const InputPlaceholder = factory<InputPlaceholderFactory>((_props) => {\n  const props = useProps('InputPlaceholder', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    __staticSelector,\n    error,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputPlaceholderFactory>({\n    name: ['InputPlaceholder', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'placeholder',\n  });\n\n  return (\n    <Box\n      {...getStyles('placeholder')}\n      mod={[{ error: !!error }, mod]}\n      component=\"span\"\n      {...others}\n    />\n  );\n});\n\nInputPlaceholder.classes = classes;\nInputPlaceholder.displayName = '@mantine/core/InputPlaceholder';\n"],"mappings":";;;;;;;;AA4BA,MAAa,mBAAmB,SAAkC,WAAW;CAC3E,MAAM,QAAQ,SAAS,oBAAoB,MAAM,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,kBACA,OACA,KACA,YACA,GAAG,WACD;CAeJ,OACE,oBAAC,KAAD;EACE,GAfc,UAAmC;GACnD,MAAM,CAAC,oBAAoB,gBAAgB;GAC3C;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;EAChB,CAIgB,CAAC,CAAC,aAAa;EAC3B,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,GAAG,GAAG;EAC7B,WAAU;EACV,GAAI;CACL,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}

package/esm/components/Input/InputSuccess/InputSuccess.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { rem } from "../../../core/utils/units-converters/rem.mjs";
+import { getFontSize } from "../../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { InputWrapperContext } from "../InputWrapper.context.mjs";
+import Input_module_default from "../Input.module.mjs";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Input/InputSuccess/InputSuccess.tsx
+const varsResolver = createVarsResolver((_, { size }) => ({ success: { "--input-success-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` } }));
+const InputSuccess = factory((_props) => {
+	const props = useProps("InputSuccess", null, _props);
+	const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, __inheritStyles = true, ...others } = props;
+	const _getStyles = useStyles({
+		name: ["InputWrapper", __staticSelector],
+		props,
+		classes: Input_module_default,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		rootSelector: "success",
+		vars,
+		varsResolver
+	});
+	const ctx = use(InputWrapperContext);
+	return /* @__PURE__ */ jsx(Box, {
+		component: "p",
+		...(__inheritStyles && ctx?.getStyles || _getStyles)("success", ctx?.getStyles ? {
+			className,
+			style
+		} : void 0),
+		...others
+	});
+});
+InputSuccess.classes = Input_module_default;
+InputSuccess.varsResolver = varsResolver;
+InputSuccess.displayName = "@mantine/core/InputSuccess";
+//#endregion
+export { InputSuccess };
+
+//# sourceMappingURL=InputSuccess.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputSuccess.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputSuccess/InputSuccess.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputSuccessStylesNames = 'success';\nexport type InputSuccessCssVariables = {\n  success: '--input-success-size';\n};\n\nexport interface InputSuccessProps\n  extends BoxProps, StylesApiProps<InputSuccessFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n  __inheritStyles?: boolean;\n\n  /** Controls success `font-size` @default 'sm' */\n  size?: MantineFontSize;\n}\n\nexport type InputSuccessFactory = Factory<{\n  props: InputSuccessProps;\n  ref: HTMLParagraphElement;\n  stylesNames: InputSuccessStylesNames;\n  vars: InputSuccessCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<InputSuccessFactory>((_, { size }) => ({\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputSuccess = factory<InputSuccessFactory>((_props) => {\n  const props = useProps('InputSuccess', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    __inheritStyles = true,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputSuccessFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'success',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = (__inheritStyles && ctx?.getStyles) || _getStyles;\n\n  return (\n    <Box\n      component=\"p\"\n      {...getStyles('success', ctx?.getStyles ? { className, style } : undefined)}\n      {...others}\n    />\n  );\n});\n\nInputSuccess.classes = classes;\nInputSuccess.varsResolver = varsResolver;\nInputSuccess.displayName = '@mantine/core/InputSuccess';\n"],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,eAAe,oBAAyC,GAAG,EAAE,YAAY,EAC7E,SAAS,EACP,wBACE,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQ,YAAY,IAAI,EAAE,KAAK,IAAI,CAAC,EAAE,GAC3E,EACF,EAAE;AAEF,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,kBAAkB,MAClB,GAAG,WACD;CAEJ,MAAM,aAAa,UAA+B;EAChD,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CAGnC,OACE,oBAAC,KAAD;EACE,WAAU;EACV,IALe,mBAAmB,KAAK,aAAc,WAAA,CAKvC,WAAW,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EAC1E,GAAI;CACL,CAAA;AAEL,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}

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

@@ -11,6 +11,7 @@ import Input_module_default from "../Input.module.mjs";
 import { InputDescription } from "../InputDescription/InputDescription.mjs";
 import { InputError } from "../InputError/InputError.mjs";
 import { InputLabel } from "../InputLabel/InputLabel.mjs";
+import { InputSuccess } from "../InputSuccess/InputSuccess.mjs";
 import { getInputOffsets } from "./get-input-offsets/get-input-offsets.mjs";
 import { Fragment, createElement } from "react";
 import { useId as useId$1 } from "@mantine/hooks";
@@ -32,11 +33,12 @@ const varsResolver = createVarsResolver((_, { size }) => ({
 		"--input-asterisk-color": void 0
 	},
 	error: { "--input-error-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` },
+	success: { "--input-success-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` },
 	description: { "--input-description-size": size === void 0 ? void 0 : `calc(${getFontSize(size)} - ${rem(2)})` }
 }));
 const InputWrapper = factory((_props) => {
 	const props = useProps("InputWrapper", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, variant, __staticSelector, inputContainer, inputWrapperOrder, label, error, description, labelProps, descriptionProps, errorProps, labelElement, children, withAsterisk, id, required, __stylesApiProps, mod, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, size, variant, __staticSelector, inputContainer, inputWrapperOrder, label, error, success, description, labelProps, descriptionProps, errorProps, successProps, labelElement, children, withAsterisk, id, required, __stylesApiProps, mod, attributes, ...others } = props;
 	const getStyles = useStyles({
 		name: ["InputWrapper", __staticSelector],
 		props: __stylesApiProps || props,
@@ -58,11 +60,16 @@ const InputWrapper = factory((_props) => {
 	const idBase = useId$1(id);
 	const isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
 	const errorId = errorProps?.id || `${idBase}-error`;
+	const successId = successProps?.id || `${idBase}-success`;
 	const descriptionId = descriptionProps?.id || `${idBase}-description`;
 	const inputId = idBase;
 	const hasError = !!error && typeof error !== "boolean";
+	const hasSuccess = !!success && typeof success !== "boolean" && !error;
 	const hasDescription = !!description;
-	const _describedBy = `${hasError ? errorId : ""} ${hasDescription ? descriptionId : ""}`;
+	const errorRendered = hasError && inputWrapperOrder.includes("error");
+	const successRendered = hasSuccess && inputWrapperOrder.includes("error");
+	const descriptionRendered = hasDescription && inputWrapperOrder.includes("description");
+	const _describedBy = `${errorRendered ? errorId : ""} ${successRendered ? successId : ""} ${descriptionRendered ? descriptionId : ""}`;
 	const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : void 0;
 	const labelId = labelProps?.id || `${idBase}-label`;
 	const _label = label && /* @__PURE__ */ jsx(InputLabel, {
@@ -89,12 +96,19 @@ const InputWrapper = factory((_props) => {
 		key: "error",
 		id: errorProps?.id || errorId
 	}, error);
+	const _success = hasSuccess && /* @__PURE__ */ createElement(InputSuccess, {
+		...successProps,
+		...sharedProps,
+		size: successProps?.size || sharedProps.size,
+		key: "success",
+		id: successProps?.id || successId
+	}, success);
 	const content = inputWrapperOrder.map((part) => {
 		switch (part) {
 			case "label": return _label;
 			case "input": return _input;
 			case "description": return _description;
-			case "error": return _error;
+			case "error": return _error || _success;
 			default: return null;
 		}
 	});
@@ -106,13 +120,16 @@ const InputWrapper = factory((_props) => {
 			labelId,
 			...getInputOffsets(inputWrapperOrder, {
 				hasDescription,
-				hasError
+				hasError: hasError || hasSuccess
 			})
 		},
 		children: /* @__PURE__ */ jsx(Box, {
 			variant,
 			size,
-			mod: [{ error: !!error }, mod],
+			mod: [{
+				error: !!error,
+				success: !!success && !error
+			}, mod],
 			id: labelElement === "label" ? void 0 : id,
 			...getStyles("root"),
 			...others,

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  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 { 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  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames;\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  /** 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;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes;\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  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    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\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 descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? 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 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;\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 }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!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  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;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes;\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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"}

package/esm/components/Input/use-input-props.mjs

@@ -8,18 +8,20 @@ function useInputProps(component, defaultProps, _props) {
 		"InputWrapper",
 		component
 	], defaultProps, _props);
-	const { label, description, error, required, classNames, styles, className, unstyled, __staticSelector, __stylesApiProps, errorProps, labelProps, descriptionProps, wrapperProps: _wrapperProps, id, size, style, inputContainer, inputWrapperOrder, withAsterisk, variant, vars, mod, attributes, ...others } = props;
+	const { label, description, error, success, required, classNames, styles, className, unstyled, __staticSelector, __stylesApiProps, errorProps, successProps, labelProps, descriptionProps, wrapperProps: _wrapperProps, id, size, style, inputContainer, inputWrapperOrder, withAsterisk, variant, vars, mod, attributes, ...others } = props;
 	const { styleProps, rest } = extractStyleProps(others);
 	const wrapperProps = {
 		label,
 		description,
 		error,
+		success,
 		required,
 		classNames,
 		className,
 		__staticSelector,
 		__stylesApiProps: __stylesApiProps || props,
 		errorProps,
+		successProps,
 		labelProps,
 		descriptionProps,
 		unstyled,
@@ -53,6 +55,7 @@ function useInputProps(component, defaultProps, _props) {
 			__staticSelector,
 			__stylesApiProps: __stylesApiProps || props,
 			error,
+			success,
 			variant,
 			id,
 			attributes

package/esm/components/Input/use-input-props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-props.mjs","names":[],"sources":["../../../src/components/Input/use-input-props.ts"],"sourcesContent":["import { BoxProps, extractStyleProps, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps } from './Input';\n\ninterface BaseProps\n  extends __BaseInputProps, BoxProps, StylesApiProps<{ props: any; stylesNames: string }> {\n  __staticSelector?: string;\n  __stylesApiProps?: Record<string, any>;\n  id?: string;\n}\n\nexport function useInputProps<T extends BaseProps, U extends Partial<T> | null>(\n  component: string,\n  defaultProps: U,\n  _props: T\n) {\n  const props = useProps<T, U>(['Input', 'InputWrapper', component], defaultProps, _props);\n  const {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    styles,\n    className,\n    unstyled,\n    __staticSelector,\n    __stylesApiProps,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    id,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    vars,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    className,\n    __staticSelector,\n    __stylesApiProps: __stylesApiProps || props,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    id,\n    mod,\n    attributes,\n    ..._wrapperProps,\n  };\n\n  return {\n    ...rest,\n    classNames,\n    styles,\n    unstyled,\n    wrapperProps: { ...wrapperProps, ...styleProps } as typeof wrapperProps & BoxProps,\n    inputProps: {\n      required,\n      classNames,\n      styles,\n      unstyled,\n      size,\n      __staticSelector,\n      __stylesApiProps: __stylesApiProps || props,\n      error,\n      variant,\n      id,\n      attributes,\n    },\n  };\n}\n"],"mappings":";;;;AAUA,SAAgB,cACd,WACA,cACA,QACA;CACA,MAAM,QAAQ,SAAe;EAAC;EAAS;EAAgB;CAAS,GAAG,cAAc,MAAM;CACvF,MAAM,EACJ,OACA,aACA,OACA,UACA,YACA,QACA,WACA,UACA,kBACA,kBACA,YACA,YACA,kBACA,cAAc,eACd,IACA,MACA,OACA,gBACA,mBACA,cACA,SACA,MACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CAEA,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA,cAAc;GAAE,GAAG;GAAc,GAAG;EAAW;EAC/C,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA,kBAAkB,oBAAoB;GACtC;GACA;GACA;GACA;EACF;CACF;AACF"}
+{"version":3,"file":"use-input-props.mjs","names":[],"sources":["../../../src/components/Input/use-input-props.ts"],"sourcesContent":["import { BoxProps, extractStyleProps, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps } from './Input';\n\ninterface BaseProps\n  extends __BaseInputProps, BoxProps, StylesApiProps<{ props: any; stylesNames: string }> {\n  __staticSelector?: string;\n  __stylesApiProps?: Record<string, any>;\n  id?: string;\n}\n\nexport function useInputProps<T extends BaseProps, U extends Partial<T> | null>(\n  component: string,\n  defaultProps: U,\n  _props: T\n) {\n  const props = useProps<T, U>(['Input', 'InputWrapper', component], defaultProps, _props);\n  const {\n    label,\n    description,\n    error,\n    success,\n    required,\n    classNames,\n    styles,\n    className,\n    unstyled,\n    __staticSelector,\n    __stylesApiProps,\n    errorProps,\n    successProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    id,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    vars,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    success,\n    required,\n    classNames,\n    className,\n    __staticSelector,\n    __stylesApiProps: __stylesApiProps || props,\n    errorProps,\n    successProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    id,\n    mod,\n    attributes,\n    ..._wrapperProps,\n  };\n\n  return {\n    ...rest,\n    classNames,\n    styles,\n    unstyled,\n    wrapperProps: { ...wrapperProps, ...styleProps } as typeof wrapperProps & BoxProps,\n    inputProps: {\n      required,\n      classNames,\n      styles,\n      unstyled,\n      size,\n      __staticSelector,\n      __stylesApiProps: __stylesApiProps || props,\n      error,\n      success,\n      variant,\n      id,\n      attributes,\n    },\n  };\n}\n"],"mappings":";;;;AAUA,SAAgB,cACd,WACA,cACA,QACA;CACA,MAAM,QAAQ,SAAe;EAAC;EAAS;EAAgB;CAAS,GAAG,cAAc,MAAM;CACvF,MAAM,EACJ,OACA,aACA,OACA,SACA,UACA,YACA,QACA,WACA,UACA,kBACA,kBACA,YACA,cACA,YACA,kBACA,cAAc,eACd,IACA,MACA,OACA,gBACA,mBACA,cACA,SACA,MACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CAEA,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA,cAAc;GAAE,GAAG;GAAc,GAAG;EAAW;EAC/C,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA,kBAAkB,oBAAoB;GACtC;GACA;GACA;GACA;GACA;EACF;CACF;AACF"}

package/esm/components/JsonInput/validate-json/validate-json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"validate-json.mjs","names":[],"sources":["../../../../src/components/JsonInput/validate-json/validate-json.ts"],"sourcesContent":["export function validateJson(value: string, deserialize: typeof JSON.parse) {\n  if (typeof value === 'string' && value.trim().length === 0) {\n    return true;\n  }\n\n  try {\n    deserialize(value);\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,OAAe,aAAgC;CAC1E,IAAI,OAAO,UAAU,YAAY,MAAM,KAAK,EAAE,WAAW,GACvD,OAAO;CAGT,IAAI;EACF,YAAY,KAAK;EACjB,OAAO;CACT,SAAS,GAAG;EACV,OAAO;CACT;AACF"}
+{"version":3,"file":"validate-json.mjs","names":[],"sources":["../../../../src/components/JsonInput/validate-json/validate-json.ts"],"sourcesContent":["export function validateJson(value: string, deserialize: typeof JSON.parse) {\n  if (typeof value === 'string' && value.trim().length === 0) {\n    return true;\n  }\n\n  try {\n    deserialize(value);\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,OAAe,aAAgC;CAC1E,IAAI,OAAO,UAAU,YAAY,MAAM,KAAK,CAAC,CAAC,WAAW,GACvD,OAAO;CAGT,IAAI;EACF,YAAY,KAAK;EACjB,OAAO;CACT,SAAS,GAAG;EACV,OAAO;CACT;AACF"}