@mantine/core 9.1.0 → 9.1.1

package/esm/components/Card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineRadius,\n  MantineShadow,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n  root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n  /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n  shadow?: MantineShadow;\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  /** Adds border to the card */\n  withBorder?: boolean;\n\n  /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n  padding?: MantineSpacing;\n\n  /** Card content */\n  children?: React.ReactNode;\n\n  /** Card orientation @default 'vertical' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n  props: CardProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CardStylesNames;\n  vars: CardCssVariables;\n  staticComponents: {\n    Section: typeof CardSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n  root: {\n    '--card-padding': getSpacing(padding),\n  },\n}));\n\nconst defaultProps = {\n  orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n  const props = useProps('Card', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    padding,\n    attributes,\n    orientation,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CardFactory>({\n    name: 'Card',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const content = _children.map((child, index) => {\n    if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {\n      return cloneElement(child, {\n        'data-orientation': orientation,\n        'data-first-section': index === 0 || undefined,\n        'data-last-section': index === _children.length - 1 || undefined,\n      } as any);\n    }\n\n    return child;\n  });\n\n  return (\n    <CardProvider value={{ getStyles }}>\n      <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n        {content}\n      </Paper>\n    </CardProvider>\n  );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n  export type Props = CardProps;\n  export type StylesNames = CardStylesNames;\n  export type CssVariables = CardCssVariables;\n  export type Factory = CardFactory;\n  export type SectionProps = CardSectionProps;\n\n  export namespace Section {\n    export type Props = CardSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,eAAe,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkB,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MAAI,OAAO,UAAU,YAAY,SAAS,UAAU,SAAS,MAAM,SAAS,YAC1E,QAAO,aAAa,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,oBAAC,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,oBAAC,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU"}
+{"version":3,"file":"Card.mjs","names":["classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineRadius,\n  MantineShadow,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n  root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n  /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n  shadow?: MantineShadow;\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  /** Adds border to the card */\n  withBorder?: boolean;\n\n  /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n  padding?: MantineSpacing;\n\n  /** Card content */\n  children?: React.ReactNode;\n\n  /** Card orientation @default 'vertical' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n  props: CardProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CardStylesNames;\n  vars: CardCssVariables;\n  staticComponents: {\n    Section: typeof CardSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n  root: {\n    '--card-padding': getSpacing(padding),\n  },\n}));\n\nconst defaultProps = {\n  orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n  const props = useProps('Card', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    padding,\n    attributes,\n    orientation,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CardFactory>({\n    name: 'Card',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const content = _children.map((child, index) => {\n    if (\n      typeof child === 'object' &&\n      child &&\n      'type' in child &&\n      (child.type === CardSection ||\n        (child.type as any)?.displayName === '@mantine/core/CardSection')\n    ) {\n      return cloneElement(child, {\n        'data-orientation': orientation,\n        'data-first-section': index === 0 || undefined,\n        'data-last-section': index === _children.length - 1 || undefined,\n      } as any);\n    }\n\n    return child;\n  });\n\n  return (\n    <CardProvider value={{ getStyles }}>\n      <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n        {content}\n      </Paper>\n    </CardProvider>\n  );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n  export type Props = CardProps;\n  export type StylesNames = CardStylesNames;\n  export type CssVariables = CardCssVariables;\n  export type Factory = CardFactory;\n  export type SectionProps = CardSectionProps;\n\n  export namespace Section {\n    export type Props = CardSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,eAAe,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkB,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MACE,OAAO,UAAU,YACjB,SACA,UAAU,UACT,MAAM,SAAS,eACb,MAAM,MAAc,gBAAgB,6BAEvC,QAAO,aAAa,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,oBAAC,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,oBAAC,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU"}

package/esm/components/Combobox/ComboboxClearButton/ComboboxClearButton.mjs

@@ -2,7 +2,7 @@
 import { Input } from "../../Input/Input.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx
-function ComboboxClearButton({ size, onMouseDown, onClick, onClear, ...others }) {
+function ComboboxClearButton({ onMouseDown, onClick, onClear, ...others }) {
 	return /* @__PURE__ */ jsx(Input.ClearButton, {
 		tabIndex: -1,
 		"aria-hidden": true,

package/esm/components/Combobox/ComboboxClearButton/ComboboxClearButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxClearButton.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx"],"sourcesContent":["import { ElementProps } from '../../../core';\nimport { Input, InputClearButtonProps } from '../../Input';\n\nexport interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {\n  onClear: () => void;\n}\n\nexport function ComboboxClearButton({\n  size,\n  onMouseDown,\n  onClick,\n  onClear,\n  ...others\n}: ComboboxClearButtonProps) {\n  return (\n    <Input.ClearButton\n      tabIndex={-1}\n      aria-hidden\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        onClear();\n        onClick?.(event);\n      }}\n    />\n  );\n}\n\nComboboxClearButton.displayName = '@mantine/core/ComboboxClearButton';\n"],"mappings":";;;;AAOA,SAAgB,oBAAoB,EAClC,MACA,aACA,SACA,SACA,GAAG,UACwB;AAC3B,QACE,oBAAC,MAAM,aAAP;EACE,UAAU;EACV,eAAA;EACA,GAAI;EACJ,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,iBAAc,MAAM;;EAEtB,UAAU,UAAU;AAClB,YAAS;AACT,aAAU,MAAM;;EAElB,CAAA;;AAIN,oBAAoB,cAAc"}
+{"version":3,"file":"ComboboxClearButton.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx"],"sourcesContent":["import { ElementProps } from '../../../core';\nimport { Input, InputClearButtonProps } from '../../Input';\n\nexport interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {\n  onClear: () => void;\n}\n\nexport function ComboboxClearButton({\n  onMouseDown,\n  onClick,\n  onClear,\n  ...others\n}: ComboboxClearButtonProps) {\n  return (\n    <Input.ClearButton\n      tabIndex={-1}\n      aria-hidden\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        onClear();\n        onClick?.(event);\n      }}\n    />\n  );\n}\n\nComboboxClearButton.displayName = '@mantine/core/ComboboxClearButton';\n"],"mappings":";;;;AAOA,SAAgB,oBAAoB,EAClC,aACA,SACA,SACA,GAAG,UACwB;AAC3B,QACE,oBAAC,MAAM,aAAP;EACE,UAAU;EACV,eAAA;EACA,GAAI;EACJ,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,iBAAc,MAAM;;EAEtB,UAAU,UAAU;AAClB,YAAS;AACT,aAAU,MAAM;;EAElB,CAAA;;AAIN,oBAAoB,cAAc"}

package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs

@@ -28,6 +28,7 @@ const ComboboxEventsTarget = factory((props) => {
 			withKeyboardNavigation,
 			withExpandedAttribute,
 			onKeyDown: child.props.onKeyDown,
+			onClick: child.props.onClick,
 			autoComplete
 		}),
 		...others,

package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxEventsTarget.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to the keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events should be handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n  props: ComboboxEventsTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget 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 = useComboboxContext();\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    autoComplete,\n  });\n\n  return cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n  });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuB,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACD,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAM,oBAAoB;AAUhC,QAAO,aAAa,OAAO;EACzB,GAVkB,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;GACF,UAAU,aAAa,KAAK,IAAI,MAAM,WAAW,WAAW,MAAM,CAAC;EACrE,CAAC;EACF;AAEF,qBAAqB,cAAc"}
+{"version":3,"file":"ComboboxEventsTarget.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to the keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events should be handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n  props: ComboboxEventsTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget 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 = useComboboxContext();\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  return cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n  });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuB,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACD,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAM,oBAAoB;AAWhC,QAAO,aAAa,OAAO;EACzB,GAXkB,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;GACD,CAAC;EAIA,GAAG;GACF,UAAU,aAAa,KAAK,IAAI,MAAM,WAAW,WAAW,MAAM,CAAC;EACrE,CAAC;EACF;AAEF,qBAAqB,cAAc"}

package/esm/components/Combobox/ComboboxSearch/ComboboxSearch.mjs

@@ -13,7 +13,7 @@ const defaultProps = {
 	withKeyboardNavigation: true
 };
 const ComboboxSearch = factory((_props) => {
-	const { classNames, styles, unstyled, vars, withAriaAttributes, onKeyDown, withKeyboardNavigation, size, ref, ...others } = useProps("ComboboxSearch", defaultProps, _props);
+	const { classNames, styles, unstyled, vars, withAriaAttributes, onKeyDown, onClick, withKeyboardNavigation, size, ref, ...others } = useProps("ComboboxSearch", defaultProps, _props);
 	const ctx = useComboboxContext();
 	const _styles = ctx.getStyles("search");
 	const targetProps = useComboboxTargetProps({
@@ -22,6 +22,7 @@ const ComboboxSearch = factory((_props) => {
 		withKeyboardNavigation,
 		withExpandedAttribute: false,
 		onKeyDown,
+		onClick,
 		autoComplete: "off"
 	});
 	return /* @__PURE__ */ jsx(Input, {

package/esm/components/Combobox/ComboboxSearch/ComboboxSearch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxSearch.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** if set, the search input has `aria-` attribute @default true */\n  withAriaAttributes?: boolean;\n\n  /** if set, the search input handles keyboard navigation @default true */\n  withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n  props: ComboboxSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n  withAriaAttributes: true,\n  withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n  const props = useProps('ComboboxSearch', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    withAriaAttributes,\n    onKeyDown,\n    withKeyboardNavigation,\n    size,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const _styles = ctx.getStyles('search');\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'input',\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute: false,\n    onKeyDown,\n    autoComplete: 'off',\n  });\n\n  return (\n    <Input\n      ref={useMergedRef(ref, ctx.store.searchRef)}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      size={size || ctx.size}\n      {...targetProps}\n      {...others}\n      __staticSelector=\"Combobox\"\n    />\n  );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;CACzB;AAED,MAAa,iBAAiB,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,wBACA,MACA,KACA,GAAG,WAXS,SAAS,kBAAkB,cAAc,OAAO;CAc9D,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,IAAI,UAAU,SAAS;CAEvC,MAAM,cAAc,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA,cAAc;EACf,CAAC;AAEF,QACE,oBAAC,OAAD;EACE,KAAK,aAAa,KAAK,IAAI,MAAM,UAAU;EAC3C,YAAY,CAAC,EAAE,OAAO,QAAQ,WAAW,EAAE,WAAW;EACtD,QAAQ,CAAC,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO;EAC1C,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;EACjB,CAAA;EAEJ;AAEF,eAAe,UAAUA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"ComboboxSearch.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** if set, the search input has `aria-` attribute @default true */\n  withAriaAttributes?: boolean;\n\n  /** if set, the search input handles keyboard navigation @default true */\n  withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n  props: ComboboxSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n  withAriaAttributes: true,\n  withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n  const props = useProps('ComboboxSearch', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    withAriaAttributes,\n    onKeyDown,\n    onClick,\n    withKeyboardNavigation,\n    size,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const _styles = ctx.getStyles('search');\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'input',\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute: false,\n    onKeyDown,\n    onClick,\n    autoComplete: 'off',\n  });\n\n  return (\n    <Input\n      ref={useMergedRef(ref, ctx.store.searchRef)}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      size={size || ctx.size}\n      {...targetProps}\n      {...others}\n      __staticSelector=\"Combobox\"\n    />\n  );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;CACzB;AAED,MAAa,iBAAiB,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,SACA,wBACA,MACA,KACA,GAAG,WAZS,SAAS,kBAAkB,cAAc,OAAO;CAe9D,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,IAAI,UAAU,SAAS;CAEvC,MAAM,cAAc,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA;EACA,cAAc;EACf,CAAC;AAEF,QACE,oBAAC,OAAD;EACE,KAAK,aAAa,KAAK,IAAI,MAAM,UAAU;EAC3C,YAAY,CAAC,EAAE,OAAO,QAAQ,WAAW,EAAE,WAAW;EACtD,QAAQ,CAAC,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO;EAC1C,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;EACjB,CAAA;EAEJ;AAEF,eAAe,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs

@@ -29,6 +29,7 @@ const ComboboxTarget = factory((props) => {
 			withKeyboardNavigation,
 			withExpandedAttribute,
 			onKeyDown: child.props.onKeyDown,
+			onClick: child.props.onClick,
 			autoComplete
 		}),
 		...others

package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxTarget.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events is handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n  props: ComboboxTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.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 = useComboboxContext();\n\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n  });\n\n  return (\n    <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n      {clonedElement}\n    </Popover.Target>\n  );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACD,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAM,oBAAoB;CAWhC,MAAM,gBAAgB,aAAa,OAAO;EACxC,GAVkB,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,KAAK,aAAa,KAAK,IAAI,MAAM,UAAU;YAC1E;EACc,CAAA;EAEnB;AAEF,eAAe,cAAc"}
+{"version":3,"file":"ComboboxTarget.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events is handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n  props: ComboboxTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.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 = useComboboxContext();\n\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n  });\n\n  return (\n    <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n      {clonedElement}\n    </Popover.Target>\n  );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACD,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAM,oBAAoB;CAYhC,MAAM,gBAAgB,aAAa,OAAO;EACxC,GAXkB,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,KAAK,aAAa,KAAK,IAAI,MAAM,UAAU;YAC1E;EACc,CAAA;EAEnB;AAEF,eAAe,cAAc"}

package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs

@@ -2,7 +2,7 @@
 import { useComboboxContext } from "../Combobox.context.mjs";
 import { useState } from "react";
 //#region packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts
-function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
+function useComboboxTargetProps({ onKeyDown, onClick, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
 	const ctx = useComboboxContext();
 	const [selectedOptionId, setSelectedOptionId] = useState(null);
 	const handleKeyDown = (event) => {
@@ -46,18 +46,24 @@ function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAtt
 			}
 		}
 	};
+	const ariaAttributes = withAriaAttributes ? {
+		...withExpandedAttribute ? { role: "combobox" } : {},
+		"aria-haspopup": "listbox",
+		"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
+		"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
+		"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
+		autoComplete,
+		"data-expanded": ctx.store.dropdownOpened || void 0,
+		"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
+	} : {};
+	const handleClick = (event) => {
+		if (targetType === "button") event.currentTarget.focus();
+		onClick?.(event);
+	};
 	return {
-		...withAriaAttributes ? {
-			...withExpandedAttribute ? { role: "combobox" } : {},
-			"aria-haspopup": "listbox",
-			"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
-			"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
-			"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
-			autoComplete,
-			"data-expanded": ctx.store.dropdownOpened || void 0,
-			"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
-		} : {},
-		onKeyDown: handleKeyDown
+		...ariaAttributes,
+		onKeyDown: handleKeyDown,
+		onClick: handleClick
 	};
 }
 //#endregion

package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-combobox-target-props.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // oxlint-disable-next-line typescript/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n  };\n}\n"],"mappings":";;;;AAYA,SAAgB,uBAAuB,EACrC,WACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAM,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;AAwB5C,QAAO;EACL,GAnBqB,qBACnB;GACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;GAC9D,iBAAiB;GACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;GACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;GACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;GACJ;GACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;GAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;GAC9D,GACD,EAAE;EAIJ,WAAW;EACZ"}
+{"version":3,"file":"use-combobox-target-props.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  onClick: React.MouseEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  onClick,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // oxlint-disable-next-line typescript/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    // Safari does not give keyboard focus to non-text-input elements (including\n    // readOnly inputs rendered as buttons) on click, which prevents onKeyDown\n    // from firing. Explicitly focus the target when targetType is 'button'.\n    if (targetType === 'button') {\n      event.currentTarget.focus();\n    }\n\n    onClick?.(event);\n  };\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n    onClick: handleClick,\n  };\n}\n"],"mappings":";;;;AAaA,SAAgB,uBAAuB,EACrC,WACA,SACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAM,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;CAM5C,MAAM,iBAAiB,qBACnB;EACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;EAC9D,iBAAiB;EACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;EACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;EACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;EACJ;EACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;EAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;EAC9D,GACD,EAAE;CAEN,MAAM,eAAe,UAA8C;AAIjE,MAAI,eAAe,SACjB,OAAM,cAAc,OAAO;AAG7B,YAAU,MAAM;;AAGlB,QAAO;EACL,GAAG;EACH,WAAW;EACX,SAAS;EACV"}

package/esm/components/Highlight/highlighter/highlighter.mjs

@@ -1,7 +1,7 @@
 "use client";
 //#region packages/@mantine/core/src/components/Highlight/highlighter/highlighter.ts
 function escapeRegex(value) {
-	return value.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&");
+	return value.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
 }
 function highlighter(value, _highlight, options = {}) {
 	if (_highlight == null) return [{
@@ -14,8 +14,8 @@ function highlighter(value, _highlight, options = {}) {
 		highlighted: false
 	}];
 	const matcher = typeof highlight === "string" ? highlight.trim() : highlight.filter((part) => part.trim().length !== 0).map((part) => part.trim()).sort((a, b) => b.length - a.length).join("|");
-	const pattern = options.wholeWord ? `\\b(${matcher})\\b` : `(${matcher})`;
-	const re = new RegExp(pattern, "gi");
+	const pattern = options.wholeWord ? `(?<![\\p{L}\\p{N}_])(${matcher})(?![\\p{L}\\p{N}_])` : `(${matcher})`;
+	const re = new RegExp(pattern, options.wholeWord ? "giu" : "gi");
 	return value.split(re).map((part, index) => ({
 		chunk: part,
 		highlighted: index % 2 === 1

package/esm/components/Highlight/highlighter/highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"highlighter.mjs","names":[],"sources":["../../../../src/components/Highlight/highlighter/highlighter.ts"],"sourcesContent":["function escapeRegex(value: string) {\n  return value.replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, '\\\\$&');\n}\n\nexport interface HighlightChunk {\n  chunk: string;\n  highlighted: boolean;\n  color?: string;\n}\n\nexport interface HighlighterOptions {\n  wholeWord?: boolean;\n}\n\nexport function highlighter(\n  value: string,\n  _highlight: string | string[],\n  options: HighlighterOptions = {}\n): HighlightChunk[] {\n  if (_highlight == null) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const highlight = Array.isArray(_highlight)\n    ? _highlight.map(escapeRegex)\n    : escapeRegex(_highlight);\n\n  const shouldHighlight = Array.isArray(highlight)\n    ? highlight.filter((part) => part.trim().length > 0).length > 0\n    : highlight.trim() !== '';\n\n  if (!shouldHighlight) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const matcher =\n    typeof highlight === 'string'\n      ? highlight.trim()\n      : highlight\n          .filter((part) => part.trim().length !== 0)\n          .map((part) => part.trim())\n          .sort((a, b) => b.length - a.length)\n          .join('|');\n\n  const pattern = options.wholeWord ? `\\\\b(${matcher})\\\\b` : `(${matcher})`;\n  const re = new RegExp(pattern, 'gi');\n  const chunks = value\n    .split(re)\n    .map((part, index) => ({ chunk: part, highlighted: index % 2 === 1 }))\n    .filter(({ chunk }) => chunk);\n\n  return chunks;\n}\n"],"mappings":";;AAAA,SAAS,YAAY,OAAe;AAClC,QAAO,MAAM,QAAQ,0BAA0B,OAAO;;AAaxD,SAAgB,YACd,OACA,YACA,UAA8B,EAAE,EACd;AAClB,KAAI,cAAc,KAChB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,YAAY,MAAM,QAAQ,WAAW,GACvC,WAAW,IAAI,YAAY,GAC3B,YAAY,WAAW;AAM3B,KAAI,EAJoB,MAAM,QAAQ,UAAU,GAC5C,UAAU,QAAQ,SAAS,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC,SAAS,IAC5D,UAAU,MAAM,KAAK,IAGvB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,UACJ,OAAO,cAAc,WACjB,UAAU,MAAM,GAChB,UACG,QAAQ,SAAS,KAAK,MAAM,CAAC,WAAW,EAAE,CAC1C,KAAK,SAAS,KAAK,MAAM,CAAC,CAC1B,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CACnC,KAAK,IAAI;CAElB,MAAM,UAAU,QAAQ,YAAY,OAAO,QAAQ,QAAQ,IAAI,QAAQ;CACvE,MAAM,KAAK,IAAI,OAAO,SAAS,KAAK;AAMpC,QALe,MACZ,MAAM,GAAG,CACT,KAAK,MAAM,WAAW;EAAE,OAAO;EAAM,aAAa,QAAQ,MAAM;EAAG,EAAE,CACrE,QAAQ,EAAE,YAAY,MAAM"}
+{"version":3,"file":"highlighter.mjs","names":[],"sources":["../../../../src/components/Highlight/highlighter/highlighter.ts"],"sourcesContent":["function escapeRegex(value: string) {\n  return value.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}\n\nexport interface HighlightChunk {\n  chunk: string;\n  highlighted: boolean;\n  color?: string;\n}\n\nexport interface HighlighterOptions {\n  wholeWord?: boolean;\n}\n\nexport function highlighter(\n  value: string,\n  _highlight: string | string[],\n  options: HighlighterOptions = {}\n): HighlightChunk[] {\n  if (_highlight == null) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const highlight = Array.isArray(_highlight)\n    ? _highlight.map(escapeRegex)\n    : escapeRegex(_highlight);\n\n  const shouldHighlight = Array.isArray(highlight)\n    ? highlight.filter((part) => part.trim().length > 0).length > 0\n    : highlight.trim() !== '';\n\n  if (!shouldHighlight) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const matcher =\n    typeof highlight === 'string'\n      ? highlight.trim()\n      : highlight\n          .filter((part) => part.trim().length !== 0)\n          .map((part) => part.trim())\n          .sort((a, b) => b.length - a.length)\n          .join('|');\n\n  const pattern = options.wholeWord\n    ? `(?<![\\\\p{L}\\\\p{N}_])(${matcher})(?![\\\\p{L}\\\\p{N}_])`\n    : `(${matcher})`;\n  const re = new RegExp(pattern, options.wholeWord ? 'giu' : 'gi');\n  const chunks = value\n    .split(re)\n    .map((part, index) => ({ chunk: part, highlighted: index % 2 === 1 }))\n    .filter(({ chunk }) => chunk);\n\n  return chunks;\n}\n"],"mappings":";;AAAA,SAAS,YAAY,OAAe;AAClC,QAAO,MAAM,QAAQ,uBAAuB,OAAO;;AAarD,SAAgB,YACd,OACA,YACA,UAA8B,EAAE,EACd;AAClB,KAAI,cAAc,KAChB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,YAAY,MAAM,QAAQ,WAAW,GACvC,WAAW,IAAI,YAAY,GAC3B,YAAY,WAAW;AAM3B,KAAI,EAJoB,MAAM,QAAQ,UAAU,GAC5C,UAAU,QAAQ,SAAS,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC,SAAS,IAC5D,UAAU,MAAM,KAAK,IAGvB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,UACJ,OAAO,cAAc,WACjB,UAAU,MAAM,GAChB,UACG,QAAQ,SAAS,KAAK,MAAM,CAAC,WAAW,EAAE,CAC1C,KAAK,SAAS,KAAK,MAAM,CAAC,CAC1B,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CACnC,KAAK,IAAI;CAElB,MAAM,UAAU,QAAQ,YACpB,wBAAwB,QAAQ,wBAChC,IAAI,QAAQ;CAChB,MAAM,KAAK,IAAI,OAAO,SAAS,QAAQ,YAAY,QAAQ,KAAK;AAMhE,QALe,MACZ,MAAM,GAAG,CACT,KAAK,MAAM,WAAW;EAAE,OAAO;EAAM,aAAa,QAAQ,MAAM;EAAG,EAAE,CACrE,QAAQ,EAAE,YAAY,MAAM"}

package/esm/components/MultiSelect/MultiSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.mjs","names":["useId"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n  xs: 41,\n  sm: 50,\n  md: 60,\n  lg: 72,\n  xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<MultiSelectFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Called with `value` of the removed item */\n  onRemove?: (value: Value) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Called when user attemps to select more values than allowed */\n  onMaxValues?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of values, no limit if not set */\n  maxValues?: number;\n\n  /** Allows searching through options by user input @default false */\n  searchable?: boolean;\n\n  /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the check icon is displayed near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** If set, unchecked labels are aligned with checked ones @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** When enabled, selected options are hidden from the dropdown list @default false */\n  hidePickedOptions?: boolean;\n\n  /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** A function to render content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron */\n  chevronColor?: MantineColor;\n\n  /** Clear search value when item is selected @default true */\n  clearSearchOnChange?: boolean;\n\n  /** Controls whether dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n  props: MultiSelectProps;\n  ref: HTMLInputElement;\n  stylesNames: MultiSelectStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: MultiSelectProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxValues: Infinity,\n  withCheckIcon: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n  clearSearchOnChange: true,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n  const props = useProps('MultiSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    onFocus,\n    onBlur,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    maxValues,\n    searchable,\n    nothingFoundMessage,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    hidePickedOptions,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    placeholder,\n    hiddenInputValuesDivider,\n    required,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxValues,\n    scrollAreaProps,\n    chevronColor,\n    attributes,\n    clearSearchOnChange,\n    openOnFocus,\n    loading,\n    loadingPosition,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<MultiSelectFactory>({\n    name: 'MultiSelect',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === ' ' && !searchable) {\n      event.preventDefault();\n      combobox.toggleDropdown();\n    }\n\n    if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionData,\n            value: item,\n            onRemove: () => {\n              setValue(_value.filter((i) => item !== i));\n              onRemove?.(item);\n            },\n            disabled,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n        onRemove={() => {\n          setValue(_value.filter((i) => item !== i));\n          onRemove?.(item);\n        }}\n        unstyled={unstyled}\n        disabled={disabled}\n        {...getStyles('pill')}\n      >\n        {optionData?.label || item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _searchValue]);\n\n  useEffect(() => {\n    _value.forEach((val) => {\n      if (`${val}` in optionsLockup) {\n        retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n      }\n    });\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        setValue([]);\n        handleSearchChange('');\n      }}\n    />\n  );\n\n  const filteredData = filterPickedValues({ data: parsedData, value: _value });\n  const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n  const pillsListStyle = _clearable\n    ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n    : undefined;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"MultiSelect\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          if (clearSearchOnChange) {\n            handleSearchChange('');\n          }\n          combobox.updateSelectedOptionIndex('selected');\n\n          if (_value.includes(optionsLockup[`${val}`].value as any)) {\n            setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n            onRemove?.(optionsLockup[`${val}`].value as any);\n          } else if (_value.length < maxValues) {\n            setValue([..._value, optionsLockup[`${val}`].value] as any);\n          } else {\n            onMaxValues?.();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"MultiSelect\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{\n              ...props,\n              rightSectionPointerEvents: rightSectionPointerEvents || 'none',\n              multiline: true,\n            }}\n            pointer={!searchable}\n            onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n            data-expanded={combobox.dropdownOpened || undefined}\n            id={_id}\n            required={required}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              attributes={attributes}\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList', { style: pillsListStyle })}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  id={_id}\n                  placeholder={placeholder}\n                  type={!searchable && !placeholder ? 'hidden' : 'visible'}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && searchable && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    combobox.closeDropdown();\n                    handleSearchChange('');\n                  }}\n                  onKeyDown={handleInputKeydown}\n                  value={_searchValue}\n                  onChange={(event) => {\n                    handleSearchChange(event.currentTarget.value);\n                    searchable && combobox.openDropdown();\n                    selectFirstOptionOnChange && combobox.selectFirstOption();\n                  }}\n                  disabled={disabled}\n                  readOnly={readOnly || !searchable}\n                  pointer={!searchable}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={hidePickedOptions ? filteredData : parsedData}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={searchable}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        valuesDivider={hiddenInputValuesDivider}\n        value={_value}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n\nexport namespace MultiSelect {\n  export type Props<Value extends Primitive = string> = MultiSelectProps<Value>;\n  export type StylesNames = MultiSelectStylesNames;\n  export type Factory = MultiSelectFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.mjs","names":["useId"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n  xs: 41,\n  sm: 50,\n  md: 60,\n  lg: 72,\n  xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<MultiSelectFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Called with `value` of the removed item */\n  onRemove?: (value: Value) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Called when user attemps to select more values than allowed */\n  onMaxValues?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of values, no limit if not set */\n  maxValues?: number;\n\n  /** Allows searching through options by user input @default false */\n  searchable?: boolean;\n\n  /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the check icon is displayed near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** If set, unchecked labels are aligned with checked ones @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** When enabled, selected options are hidden from the dropdown list @default false */\n  hidePickedOptions?: boolean;\n\n  /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** A function to render content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron */\n  chevronColor?: MantineColor;\n\n  /** Clear search value when item is selected @default true */\n  clearSearchOnChange?: boolean;\n\n  /** Controls whether dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n  props: MultiSelectProps;\n  ref: HTMLInputElement;\n  stylesNames: MultiSelectStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: MultiSelectProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxValues: Infinity,\n  withCheckIcon: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n  clearSearchOnChange: true,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n  const props = useProps('MultiSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    onFocus,\n    onBlur,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    maxValues,\n    searchable,\n    nothingFoundMessage,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    hidePickedOptions,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    placeholder,\n    hiddenInputValuesDivider,\n    required,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxValues,\n    scrollAreaProps,\n    chevronColor,\n    attributes,\n    clearSearchOnChange,\n    openOnFocus,\n    loading,\n    loadingPosition,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<MultiSelectFactory>({\n    name: 'MultiSelect',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === ' ' && !searchable) {\n      event.preventDefault();\n      combobox.toggleDropdown();\n    }\n\n    if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionData,\n            value: item,\n            onRemove: () => {\n              setValue(_value.filter((i) => item !== i));\n              onRemove?.(item);\n            },\n            disabled,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n        onRemove={() => {\n          setValue(_value.filter((i) => item !== i));\n          onRemove?.(item);\n        }}\n        unstyled={unstyled}\n        disabled={disabled}\n        {...getStyles('pill')}\n      >\n        {optionData?.label || item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _searchValue]);\n\n  useEffect(() => {\n    _value.forEach((val) => {\n      if (`${val}` in optionsLockup) {\n        retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n      }\n    });\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        setValue([]);\n        handleSearchChange('');\n      }}\n    />\n  );\n\n  const filteredData = filterPickedValues({ data: parsedData, value: _value });\n  const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n  const pillsListStyle = _clearable\n    ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n    : undefined;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"MultiSelect\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          if (clearSearchOnChange) {\n            handleSearchChange('');\n          }\n          combobox.updateSelectedOptionIndex('selected');\n\n          if (_value.includes(optionsLockup[`${val}`].value as any)) {\n            setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n            onRemove?.(optionsLockup[`${val}`].value as any);\n          } else if (_value.length < maxValues) {\n            setValue([..._value, optionsLockup[`${val}`].value] as any);\n          } else {\n            onMaxValues?.();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"MultiSelect\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{\n              ...props,\n              rightSectionPointerEvents: rightSectionPointerEvents || 'none',\n              multiline: true,\n            }}\n            pointer={!searchable}\n            onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n            data-expanded={combobox.dropdownOpened || undefined}\n            id={_id}\n            required={required}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              attributes={attributes}\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList', { style: pillsListStyle })}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  id={_id}\n                  placeholder={placeholder}\n                  type={!searchable && !placeholder ? 'hidden' : 'visible'}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && searchable && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    combobox.closeDropdown();\n                    handleSearchChange('');\n                  }}\n                  onKeyDown={handleInputKeydown}\n                  value={_searchValue}\n                  onChange={(event) => {\n                    handleSearchChange(event.currentTarget.value);\n                    searchable && combobox.openDropdown();\n                    selectFirstOptionOnChange && combobox.selectFirstOption();\n                  }}\n                  disabled={disabled}\n                  readOnly={readOnly || !searchable}\n                  pointer={!searchable}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={hidePickedOptions ? filteredData : parsedData}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={searchable}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        valuesDivider={hiddenInputValuesDivider}\n        value={_value}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n\nexport namespace MultiSelect {\n  export type Props<Value extends Primitive = string> = MultiSelectProps<Value>;\n  export type StylesNames = MultiSelectStylesNames;\n  export type Factory = MultiSelectFactory;\n}\n"],"mappings":"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"}

package/esm/components/PasswordInput/PasswordInput.mjs

@@ -127,7 +127,7 @@ const PasswordInput = factory((_props) => {
 			size,
 			classNames: {
 				...resolvedClassNames,
-				input: cx(PasswordInput_module_default.input, resolvedClassNames.input)
+				input: cx(PasswordInput_module_default.input, resolvedClassNames?.input)
 			},
 			styles: resolvedStyles,
 			radius,

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps('PasswordInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\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\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        error={error}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.mjs","names":["classes"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps('PasswordInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\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\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        error={error}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.context.mjs","names":[],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n  ClassNames,\n  createSafeContext,\n  GetStylesApi,\n  MantineRadius,\n  MantineShadow,\n  Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n  x: number;\n  y: number;\n  arrowX: number | undefined;\n  arrowY: number | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  opened: boolean;\n  transitionProps?: TransitionOverride;\n  reference: (node: HTMLElement) => void;\n  floating: (node: HTMLElement) => void;\n  width?: PopoverWidth;\n  withArrow: boolean | undefined;\n  arrowSize: number;\n  arrowOffset: number;\n  arrowRadius: number;\n  arrowPosition: ArrowPosition;\n  trapFocus: boolean | undefined;\n  placement: FloatingPosition;\n  withinPortal: boolean | undefined;\n  portalProps?: BasePortalProps;\n  closeOnEscape: boolean | undefined;\n  zIndex: string | number | undefined;\n  radius?: MantineRadius | undefined;\n  shadow?: MantineShadow | undefined;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  getDropdownId: () => string;\n  getTargetId: () => string;\n  controlled: boolean;\n  onToggle: () => void;\n  withRoles: boolean | undefined;\n  targetProps: Record<string, any>;\n  disabled: boolean | undefined;\n  returnFocus: boolean | undefined;\n  classNames: ClassNames<PopoverFactory> | undefined;\n  styles: Styles<PopoverFactory> | undefined;\n  unstyled: boolean | undefined;\n  __staticSelector: string;\n  variant: string | undefined;\n  keepMounted: boolean | undefined;\n  getStyles: GetStylesApi<PopoverFactory>;\n  resolvedStyles: Record<string, any>;\n  floatingStrategy: FloatingStrategy | undefined;\n  referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n  'Popover component was not found in the tree'\n);\n"],"mappings":";;;AA4DA,MAAa,CAAC,wBAAwB,qBAAqB,kBACzD,8CACD"}
+{"version":3,"file":"Popover.context.mjs","names":[],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n  ClassNames,\n  createSafeContext,\n  GetStylesApi,\n  MantineRadius,\n  MantineShadow,\n  Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n  x: number;\n  y: number;\n  arrowX: number | undefined;\n  arrowY: number | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  opened: boolean;\n  transitionProps?: TransitionOverride;\n  reference: (node: HTMLElement) => void;\n  floating: (node: HTMLElement) => void;\n  width?: PopoverWidth;\n  withArrow: boolean | undefined;\n  arrowSize: number;\n  arrowOffset: number;\n  arrowRadius: number;\n  arrowPosition: ArrowPosition;\n  trapFocus: boolean | undefined;\n  placement: FloatingPosition;\n  withinPortal: boolean | undefined;\n  portalProps?: BasePortalProps;\n  closeOnEscape: boolean | undefined;\n  zIndex: string | number | undefined;\n  radius?: MantineRadius | undefined;\n  shadow?: MantineShadow | undefined;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  getDropdownId: () => string;\n  getTargetId: () => string;\n  controlled: boolean;\n  onToggle: () => void;\n  withRoles: boolean | undefined;\n  targetProps: Record<string, any>;\n  disabled: boolean | undefined;\n  returnFocus: boolean | undefined;\n  classNames: ClassNames<PopoverFactory> | undefined;\n  styles: Styles<PopoverFactory> | undefined;\n  unstyled: boolean | undefined;\n  __staticSelector: string;\n  variant: string | undefined;\n  keepMounted: boolean | undefined;\n  getStyles: GetStylesApi<PopoverFactory>;\n  resolvedStyles: Record<string, any> | undefined;\n  floatingStrategy: FloatingStrategy | undefined;\n  referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n  'Popover component was not found in the tree'\n);\n"],"mappings":";;;AA4DA,MAAa,CAAC,wBAAwB,qBAAqB,kBACzD,8CACD"}

package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs

@@ -70,7 +70,7 @@ const PopoverDropdown = factory((_props) => {
 								width: ctx.width === "target" ? void 0 : rem(ctx.width),
 								...ctx.referenceHidden ? { display: "none" } : null
 							},
-							ctx.resolvedStyles.dropdown,
+							ctx.resolvedStyles?.dropdown,
 							styles?.dropdown,
 							style
 						]

package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  closeOnEscape,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n  extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n  props: PopoverDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: PopoverStylesNames;\n  compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n  const props = useProps('PopoverDropdown', null, _props);\n  const {\n    className,\n    style,\n    vars,\n    children,\n    onKeyDownCapture,\n    variant,\n    classNames,\n    styles,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = usePopoverContext();\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n        tabIndex: -1,\n      }\n    : {};\n\n  const mergedRef = useMergedRef(ref, ctx.floating);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        {...ctx.transitionProps}\n        transition={ctx.transitionProps?.transition || 'fade'}\n        duration={ctx.transitionProps?.duration ?? 150}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.transitionProps?.exitDuration === 'number'\n            ? ctx.transitionProps.exitDuration\n            : ctx.transitionProps?.duration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n            <Box\n              {...accessibleProps}\n              {...others}\n              variant={variant}\n              onKeyDownCapture={closeOnEscape(\n                () => {\n                  ctx.onClose?.();\n                  ctx.onDismiss?.();\n                },\n                {\n                  active: ctx.closeOnEscape,\n                  onTrigger: returnFocus,\n                  onKeyDown: onKeyDownCapture,\n                }\n              )}\n              data-position={ctx.placement}\n              data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n              {...ctx.getStyles('dropdown', {\n                className,\n                props,\n                classNames,\n                styles,\n                style: [\n                  {\n                    ...transitionStyles,\n                    zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n                    top: ctx.y ?? 0,\n                    left: ctx.x ?? 0,\n                    width: ctx.width === 'target' ? undefined : rem(ctx.width),\n                    ...(ctx.referenceHidden ? { display: 'none' } : null),\n                  },\n                  ctx.resolvedStyles.dropdown,\n                  styles?.dropdown,\n                  style,\n                ],\n              })}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                {...ctx.getStyles('arrow', {\n                  props,\n                  classNames,\n                  styles,\n                })}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,mBAAmB;CAE/B,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;EACxB,CAAC;CAEF,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,aAAa;EACpC,IAAI,IAAI,eAAe;EACvB,MAAM;EACN,UAAU;EACX,GACD,EAAE;CAEN,MAAM,YAAY,aAAa,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,oBAAC,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,oBACV;AACJ,UAAI,WAAW;AACf,UAAI,aAAa;QAEnB;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;MACZ,CACF;KACD,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAY,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,eAAe;OACnB,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,oBAAC,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;OACD,CAAC;MACF,CAAA,CACE;;IACI,CAAA;GAEH,CAAA;EACE,CAAA;EAEnB;AAEF,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}
+{"version":3,"file":"PopoverDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  closeOnEscape,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n  extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n  props: PopoverDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: PopoverStylesNames;\n  compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n  const props = useProps('PopoverDropdown', null, _props);\n  const {\n    className,\n    style,\n    vars,\n    children,\n    onKeyDownCapture,\n    variant,\n    classNames,\n    styles,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = usePopoverContext();\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n        tabIndex: -1,\n      }\n    : {};\n\n  const mergedRef = useMergedRef(ref, ctx.floating);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        {...ctx.transitionProps}\n        transition={ctx.transitionProps?.transition || 'fade'}\n        duration={ctx.transitionProps?.duration ?? 150}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.transitionProps?.exitDuration === 'number'\n            ? ctx.transitionProps.exitDuration\n            : ctx.transitionProps?.duration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n            <Box\n              {...accessibleProps}\n              {...others}\n              variant={variant}\n              onKeyDownCapture={closeOnEscape(\n                () => {\n                  ctx.onClose?.();\n                  ctx.onDismiss?.();\n                },\n                {\n                  active: ctx.closeOnEscape,\n                  onTrigger: returnFocus,\n                  onKeyDown: onKeyDownCapture,\n                }\n              )}\n              data-position={ctx.placement}\n              data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n              {...ctx.getStyles('dropdown', {\n                className,\n                props,\n                classNames,\n                styles,\n                style: [\n                  {\n                    ...transitionStyles,\n                    zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n                    top: ctx.y ?? 0,\n                    left: ctx.x ?? 0,\n                    width: ctx.width === 'target' ? undefined : rem(ctx.width),\n                    ...(ctx.referenceHidden ? { display: 'none' } : null),\n                  },\n                  ctx.resolvedStyles?.dropdown,\n                  styles?.dropdown,\n                  style,\n                ],\n              })}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                {...ctx.getStyles('arrow', {\n                  props,\n                  classNames,\n                  styles,\n                })}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,mBAAmB;CAE/B,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;EACxB,CAAC;CAEF,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,aAAa;EACpC,IAAI,IAAI,eAAe;EACvB,MAAM;EACN,UAAU;EACX,GACD,EAAE;CAEN,MAAM,YAAY,aAAa,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,oBAAC,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,oBACV;AACJ,UAAI,WAAW;AACf,UAAI,aAAa;QAEnB;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;MACZ,CACF;KACD,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAY,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,gBAAgB;OACpB,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,oBAAC,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;OACD,CAAC;MACF,CAAA,CACE;;IACI,CAAA;GAEH,CAAA;EACE,CAAA;EAEnB;AAEF,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.module.mjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: calc(50% - var(--radio-icon-size) / 2);\n  left: calc(50% - var(--radio-icon-size) / 2);\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Radio.module.mjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  translate: -50% -50%;\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}

package/esm/components/ScrollArea/ScrollArea.mjs

@@ -12,7 +12,7 @@ import { ScrollAreaScrollbar } from "./ScrollAreaScrollbar/ScrollAreaScrollbar.m
 import { ScrollAreaThumb } from "./ScrollAreaThumb/ScrollAreaThumb.mjs";
 import { ScrollAreaViewport } from "./ScrollAreaViewport/ScrollAreaViewport.mjs";
 import ScrollArea_module_default from "./ScrollArea.module.mjs";
-import { useEffectEvent, useRef, useState } from "react";
+import { useCallback, useEffectEvent, useRef, useState } from "react";
 import { useIsomorphicEffect } from "@mantine/hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMergeRefs } from "@floating-ui/react";
@@ -57,20 +57,27 @@ const ScrollArea = factory((_props) => {
 		varsResolver
 	});
 	const localViewportRef = useRef(null);
-	const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef]);
-	useIsomorphicEffect(() => {
-		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
-			left: startScrollPosition.x ?? 0,
-			top: startScrollPosition.y ?? 0
-		});
-	}, []);
-	useResizeObserver(offsetScrollbars === "present" ? localViewportRef.current : null, () => {
+	const [viewportElement, setViewportElement] = useState(null);
+	const combinedViewportRef = useMergeRefs([
+		viewportRef,
+		localViewportRef,
+		useCallback((node) => {
+			setViewportElement((current) => current === node ? current : node);
+		}, [])
+	]);
+	useResizeObserver(offsetScrollbars === "present" ? viewportElement : null, () => {
 		const element = localViewportRef.current;
 		if (element) {
 			setVerticalThumbVisible(element.scrollHeight > element.clientHeight);
 			setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);
 		}
 	});
+	useIsomorphicEffect(() => {
+		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
+			left: startScrollPosition.x ?? 0,
+			top: startScrollPosition.y ?? 0
+		});
+	}, []);
 	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
 		getStyles,
 		type: type === "never" ? "always" : type,
@@ -139,7 +146,14 @@ ScrollArea.displayName = "@mantine/core/ScrollArea";
 const ScrollAreaAutosize = factory((props) => {
 	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, onOverflowChange, ...others } = useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = useRef(null);
-	const combinedViewportRef = useMergeRefs([viewportRef, viewportObserverRef]);
+	const [viewportObserverElement, setViewportObserverElement] = useState(null);
+	const combinedViewportRef = useMergeRefs([
+		viewportRef,
+		viewportObserverRef,
+		useCallback((node) => {
+			setViewportObserverElement((current) => current === node ? current : node);
+		}, [])
+	]);
 	const overflowingRef = useRef(false);
 	const didMountRef = useRef(false);
 	const handleOverflowCheck = useEffectEvent(() => {
@@ -155,7 +169,7 @@ const ScrollAreaAutosize = factory((props) => {
 			overflowingRef.current = isOverflowing;
 		}
 	});
-	useResizeObserver(onOverflowChange ? viewportObserverRef.current : null, handleOverflowCheck);
+	useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);
 	return /* @__PURE__ */ jsx(Box, {
 		...others,
 		variant,