@mantine/core 9.1.1 → 9.2.1

package/esm/components/PinInput/PinInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.mjs","names":["useId","classes"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { assignRef, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  Factory,\n  factory,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { Group } from '../Group';\nimport { Input, InputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { createPinArray } from './create-pin-array/create-pin-array';\nimport classes from './PinInput.module.css';\n\nconst regex = {\n  number: /^[0-9]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n};\n\nexport type PinInputStylesNames = 'root' | 'pinInput' | 'input';\n\nexport type PinInputCssVariables = {\n  root: '--pin-input-size';\n};\n\nexport interface PinInputProps\n  extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange' | 'ref'> {\n  ref?: React.Ref<HTMLInputElement>;\n\n  /** Hidden input `name` attribute */\n  name?: string;\n\n  /** Hidden input `form` attribute */\n  form?: string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */\n  gap?: MantineSpacing;\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  /** Controls inputs `width` and `height` @default 'sm' */\n  size?: MantineSize;\n\n  /** If set, the first input is focused when component is mounted @default false */\n  autoFocus?: boolean;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when all inputs have value */\n  onComplete?: (value: string) => void;\n\n  /** Inputs placeholder @default '○' */\n  placeholder?: string;\n\n  /** Determines whether focus should be moved automatically to the next input once filled @default true */\n  manageFocus?: boolean;\n\n  /** Determines whether `autocomplete=\"one-time-code\"` attribute should be set on all inputs @default true */\n  oneTimeCode?: boolean;\n\n  /** Base id used to generate unique ids for inputs */\n  id?: string;\n\n  /** Adds disabled attribute to all inputs */\n  disabled?: boolean;\n\n  /** Sets `aria-invalid` attribute and applies error styles to all inputs */\n  error?: boolean;\n\n  /** Determines which values can be entered @default 'alphanumeric' */\n  type?: 'alphanumeric' | 'number' | RegExp;\n\n  /** Changes input type to `\"password\"` @default false */\n  mask?: boolean;\n\n  /** Number of inputs @default 4 */\n  length?: number;\n\n  /** If set, the user cannot edit the value */\n  readOnly?: boolean;\n\n  /** Inputs `type` attribute, inferred from the `type` prop if not specified */\n  inputType?: React.HTMLInputTypeAttribute;\n\n  /** `inputmode` attribute, inferred from the `type` prop if not specified */\n  inputMode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search'\n    | undefined;\n\n  /** `aria-label` attribute */\n  ariaLabel?: string;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Props added to the input element depending on its index */\n  getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'> & DataAttributes;\n}\n\nexport type PinInputFactory = Factory<{\n  props: PinInputProps;\n  ref: HTMLDivElement;\n  stylesNames: PinInputStylesNames;\n  vars: PinInputCssVariables;\n}>;\n\nconst defaultProps = {\n  gap: 'sm',\n  length: 4,\n  manageFocus: true,\n  oneTimeCode: true,\n  placeholder: '○',\n  type: 'alphanumeric',\n  ariaLabel: 'PinInput',\n  size: 'sm',\n} satisfies Partial<PinInputProps>;\n\nconst varsResolver = createVarsResolver<PinInputFactory>((_, { size }) => ({\n  root: {\n    '--pin-input-size': getSize(size ?? 'sm', 'pin-input-size'),\n  },\n}));\n\nexport const PinInput = factory<PinInputFactory>((props) => {\n  const {\n    name,\n    form,\n    className,\n    value,\n    defaultValue,\n    variant,\n    gap,\n    style,\n    size,\n    classNames,\n    styles,\n    unstyled,\n    length,\n    onChange,\n    onComplete,\n    manageFocus,\n    autoFocus,\n    error,\n    radius,\n    disabled,\n    oneTimeCode,\n    placeholder,\n    type,\n    mask,\n    readOnly,\n    inputType,\n    inputMode,\n    ariaLabel,\n    vars,\n    id,\n    hiddenInputProps,\n    rootRef,\n    getInputProps,\n    attributes,\n    ref,\n    ...others\n  } = useProps('PinInput', defaultProps, props);\n\n  const uuid = useId(id);\n\n  const getStyles = useStyles<PinInputFactory>({\n    name: 'PinInput',\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<PinInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const inputsRef = useRef<Array<HTMLInputElement>>([]);\n  const currentLength = length ?? 4;\n\n  const completedRef = useRef(false);\n\n  const [_value, setValues] = useUncontrolled<string[]>({\n    value: value !== undefined ? createPinArray(currentLength, value) : undefined,\n    defaultValue: defaultValue?.split('').slice(0, currentLength),\n    finalValue: createPinArray(currentLength, ''),\n    onChange: (val) => {\n      const stringValue = val.join('').trim();\n      onChange?.(stringValue);\n      if (stringValue.length === currentLength && !completedRef.current) {\n        completedRef.current = true;\n        onComplete?.(stringValue);\n      } else if (stringValue.length < currentLength) {\n        completedRef.current = false;\n      }\n    },\n  });\n\n  const currentValue =\n    _value.length !== currentLength ? createPinArray(currentLength, _value.join('')) : _value;\n\n  const _valueToString = currentValue.join('').trim();\n\n  const validate = (code: string) => {\n    const re = type instanceof RegExp ? type : type && type in regex ? regex[type] : null;\n    return re?.test(code);\n  };\n\n  const focusInputField = (dir: 'next' | 'prev', index: number) => {\n    if (!manageFocus) {\n      return;\n    }\n\n    if (dir === 'next') {\n      const nextIndex = index + 1;\n      if (nextIndex < currentLength) {\n        inputsRef.current[nextIndex]?.focus();\n      }\n    } else if (dir === 'prev') {\n      const prevIndex = index - 1;\n      if (prevIndex >= 0) {\n        inputsRef.current[prevIndex]?.focus();\n      }\n    }\n  };\n\n  const setFieldValue = (val: string, index: number) => {\n    const values = [...currentValue];\n    values[index] = val;\n    setValues(values);\n    return values;\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const inputValue = event.target.value;\n\n    if (inputValue.length > 1) {\n      const isPaste = inputValue.length > 2;\n      if (isPaste) {\n        const isValid = validate(inputValue);\n        if (isValid) {\n          setValues(createPinArray(currentLength, inputValue));\n          const filledCount = Math.min(inputValue.length, currentLength);\n          if (filledCount < currentLength) {\n            focusInputField('next', filledCount - 1);\n          }\n        }\n        return;\n      }\n\n      const newChar = inputValue.split('')[inputValue.length - 1];\n      if (validate(newChar)) {\n        setFieldValue(newChar, index);\n        focusInputField('next', index);\n      }\n      return;\n    }\n\n    if (inputValue.length === 1) {\n      if (validate(inputValue)) {\n        setFieldValue(inputValue, index);\n        focusInputField('next', index);\n      } else {\n        setFieldValue('', index);\n      }\n    } else if (inputValue.length === 0) {\n      setFieldValue('', index);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n    const { ctrlKey, metaKey, key, shiftKey, target } = event;\n    const inputValue = (target as HTMLInputElement).value;\n\n    if (inputMode === 'numeric') {\n      const allowedKeys = ['Backspace', 'Tab', 'Control', 'Delete', 'ArrowLeft', 'ArrowRight'];\n      const isPasteShortcut = (ctrlKey || metaKey) && key === 'v';\n      const isAllowedKey =\n        allowedKeys.includes(key) || isPasteShortcut || !Number.isNaN(Number(key));\n\n      if (!isAllowedKey) {\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        focusInputField('prev', index);\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        focusInputField('next', index);\n        break;\n\n      case 'Tab':\n        if (shiftKey) {\n          if (index > 0 && manageFocus) {\n            event.preventDefault();\n            focusInputField('prev', index);\n          }\n        }\n        break;\n\n      case ' ':\n        event.preventDefault();\n        focusInputField('next', index);\n        break;\n\n      case 'Delete':\n        event.preventDefault();\n        setFieldValue('', index);\n        break;\n\n      case 'Backspace':\n        if (inputValue === '') {\n          event.preventDefault();\n          focusInputField('prev', index);\n        } else {\n          setFieldValue('', index);\n          if (index < currentLength - 1) {\n            event.preventDefault();\n            focusInputField('prev', index);\n          }\n        }\n        break;\n\n      default:\n        if (inputValue.length > 0 && key === currentValue[index]) {\n          event.preventDefault();\n          focusInputField('next', index);\n        }\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n    event.target.select();\n    setFocusedIndex(index);\n  };\n\n  const handleBlur = () => {\n    setFocusedIndex(-1);\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    const pasteData = event.clipboardData.getData('text/plain').replace(/[\\n\\r\\s]+/g, '');\n    const isValid = validate(pasteData.trim());\n\n    if (isValid) {\n      const pasteArray = createPinArray(currentLength, pasteData);\n      setValues(pasteArray);\n      const filledCount = pasteArray.filter((val) => val !== '').length;\n      if (filledCount >= currentLength) {\n        inputsRef.current[currentLength - 1]?.focus();\n      } else {\n        inputsRef.current[filledCount]?.focus();\n      }\n    }\n  };\n\n  return (\n    <>\n      <Group\n        {...others}\n        {...getStyles('root')}\n        ref={rootRef}\n        role=\"group\"\n        id={uuid}\n        gap={gap}\n        unstyled={unstyled}\n        wrap=\"nowrap\"\n        variant={variant}\n        __size={size}\n        dir=\"ltr\"\n      >\n        {currentValue.map((char: string, index: number) => (\n          <Input\n            component=\"input\"\n            {...getStyles('pinInput', {\n              style: {\n                '--input-padding': '0',\n                '--input-text-align': 'center',\n              } as React.CSSProperties,\n            })}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            size={size}\n            __staticSelector=\"PinInput\"\n            id={`${uuid}-${index + 1}`}\n            key={`${uuid}-${index}`}\n            inputMode={inputMode || (type === 'number' ? 'numeric' : 'text')}\n            onChange={(event) => handleChange(event, index)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n            onFocus={(event) => handleFocus(event, index)}\n            onBlur={handleBlur}\n            onPaste={handlePaste}\n            type={inputType || (mask ? 'password' : type === 'number' ? 'tel' : 'text')}\n            radius={radius}\n            error={error}\n            variant={variant}\n            disabled={disabled}\n            ref={(node) => {\n              if (node) {\n                index === 0 && assignRef(ref, node);\n                inputsRef.current[index] = node;\n              }\n            }}\n            autoComplete={oneTimeCode ? 'one-time-code' : 'off'}\n            placeholder={focusedIndex === index ? '' : placeholder}\n            value={char}\n            autoFocus={autoFocus && index === 0}\n            unstyled={unstyled}\n            aria-label={ariaLabel}\n            readOnly={readOnly}\n            {...getInputProps?.(index)}\n          />\n        ))}\n      </Group>\n\n      <input type=\"hidden\" name={name} form={form} value={_valueToString} {...hiddenInputProps} />\n    </>\n  );\n});\n\nPinInput.classes = { ...classes, ...InputBase.classes };\nPinInput.varsResolver = varsResolver;\nPinInput.displayName = '@mantine/core/PinInput';\n\nexport namespace PinInput {\n  export type Props = PinInputProps;\n  export type StylesNames = PinInputStylesNames;\n  export type Factory = PinInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"PinInput.mjs","names":["useId","classes"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { assignRef, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  Factory,\n  factory,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { Group } from '../Group';\nimport { Input, InputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { createPinArray } from './create-pin-array/create-pin-array';\nimport classes from './PinInput.module.css';\n\nconst regex = {\n  number: /^[0-9]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n};\n\nexport type PinInputStylesNames = 'root' | 'pinInput' | 'input';\n\nexport type PinInputCssVariables = {\n  root: '--pin-input-size';\n};\n\nexport interface PinInputProps\n  extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange' | 'ref'> {\n  ref?: React.Ref<HTMLInputElement>;\n\n  /** Hidden input `name` attribute */\n  name?: string;\n\n  /** Hidden input `form` attribute */\n  form?: string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */\n  gap?: MantineSpacing;\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  /** Controls inputs `width` and `height` @default 'sm' */\n  size?: MantineSize;\n\n  /** If set, the first input is focused when component is mounted @default false */\n  autoFocus?: boolean;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when all inputs have value */\n  onComplete?: (value: string) => void;\n\n  /** Inputs placeholder @default '○' */\n  placeholder?: string;\n\n  /** Determines whether focus should be moved automatically to the next input once filled @default true */\n  manageFocus?: boolean;\n\n  /** Determines whether `autocomplete=\"one-time-code\"` attribute should be set on all inputs @default true */\n  oneTimeCode?: boolean;\n\n  /** Base id used to generate unique ids for inputs */\n  id?: string;\n\n  /** Adds disabled attribute to all inputs */\n  disabled?: boolean;\n\n  /** Sets `aria-invalid` attribute and applies error styles to all inputs */\n  error?: boolean;\n\n  /** Determines which values can be entered @default 'alphanumeric' */\n  type?: 'alphanumeric' | 'number' | RegExp;\n\n  /** Changes input type to `\"password\"` @default false */\n  mask?: boolean;\n\n  /** Number of inputs @default 4 */\n  length?: number;\n\n  /** If set, the user cannot edit the value */\n  readOnly?: boolean;\n\n  /** Inputs `type` attribute, inferred from the `type` prop if not specified */\n  inputType?: React.HTMLInputTypeAttribute;\n\n  /** `inputmode` attribute, inferred from the `type` prop if not specified */\n  inputMode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search'\n    | undefined;\n\n  /** `aria-label` attribute */\n  ariaLabel?: string;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Props added to the input element depending on its index */\n  getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'> & DataAttributes;\n}\n\nexport type PinInputFactory = Factory<{\n  props: PinInputProps;\n  ref: HTMLDivElement;\n  stylesNames: PinInputStylesNames;\n  vars: PinInputCssVariables;\n}>;\n\nconst defaultProps = {\n  gap: 'sm',\n  length: 4,\n  manageFocus: true,\n  oneTimeCode: true,\n  placeholder: '○',\n  type: 'alphanumeric',\n  ariaLabel: 'PinInput',\n  size: 'sm',\n} satisfies Partial<PinInputProps>;\n\nconst varsResolver = createVarsResolver<PinInputFactory>((_, { size }) => ({\n  root: {\n    '--pin-input-size': getSize(size ?? 'sm', 'pin-input-size'),\n  },\n}));\n\nexport const PinInput = factory<PinInputFactory>((props) => {\n  const {\n    name,\n    form,\n    className,\n    value,\n    defaultValue,\n    variant,\n    gap,\n    style,\n    size,\n    classNames,\n    styles,\n    unstyled,\n    length,\n    onChange,\n    onComplete,\n    manageFocus,\n    autoFocus,\n    error,\n    radius,\n    disabled,\n    oneTimeCode,\n    placeholder,\n    type,\n    mask,\n    readOnly,\n    inputType,\n    inputMode,\n    ariaLabel,\n    vars,\n    id,\n    hiddenInputProps,\n    rootRef,\n    getInputProps,\n    attributes,\n    ref,\n    ...others\n  } = useProps(['Input', 'PinInput'], defaultProps, props);\n\n  const uuid = useId(id);\n\n  const getStyles = useStyles<PinInputFactory>({\n    name: 'PinInput',\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<PinInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const inputsRef = useRef<Array<HTMLInputElement>>([]);\n  const currentLength = length ?? 4;\n\n  const completedRef = useRef(false);\n\n  const [_value, setValues] = useUncontrolled<string[]>({\n    value: value !== undefined ? createPinArray(currentLength, value) : undefined,\n    defaultValue: defaultValue?.split('').slice(0, currentLength),\n    finalValue: createPinArray(currentLength, ''),\n    onChange: (val) => {\n      const stringValue = val.join('').trim();\n      onChange?.(stringValue);\n      if (stringValue.length === currentLength && !completedRef.current) {\n        completedRef.current = true;\n        onComplete?.(stringValue);\n      } else if (stringValue.length < currentLength) {\n        completedRef.current = false;\n      }\n    },\n  });\n\n  const currentValue =\n    _value.length !== currentLength ? createPinArray(currentLength, _value.join('')) : _value;\n\n  const _valueToString = currentValue.join('').trim();\n\n  const validate = (code: string) => {\n    const re = type instanceof RegExp ? type : type && type in regex ? regex[type] : null;\n    return re?.test(code);\n  };\n\n  const focusInputField = (dir: 'next' | 'prev', index: number) => {\n    if (!manageFocus) {\n      return;\n    }\n\n    if (dir === 'next') {\n      const nextIndex = index + 1;\n      if (nextIndex < currentLength) {\n        inputsRef.current[nextIndex]?.focus();\n      }\n    } else if (dir === 'prev') {\n      const prevIndex = index - 1;\n      if (prevIndex >= 0) {\n        inputsRef.current[prevIndex]?.focus();\n      }\n    }\n  };\n\n  const setFieldValue = (val: string, index: number) => {\n    const values = [...currentValue];\n    values[index] = val;\n    setValues(values);\n    return values;\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const inputValue = event.target.value;\n\n    if (inputValue.length > 1) {\n      const isPaste = inputValue.length > 2;\n      if (isPaste) {\n        const isValid = validate(inputValue);\n        if (isValid) {\n          setValues(createPinArray(currentLength, inputValue));\n          const filledCount = Math.min(inputValue.length, currentLength);\n          if (filledCount < currentLength) {\n            focusInputField('next', filledCount - 1);\n          }\n        }\n        return;\n      }\n\n      const newChar = inputValue.split('')[inputValue.length - 1];\n      if (validate(newChar)) {\n        setFieldValue(newChar, index);\n        focusInputField('next', index);\n      }\n      return;\n    }\n\n    if (inputValue.length === 1) {\n      if (validate(inputValue)) {\n        setFieldValue(inputValue, index);\n        focusInputField('next', index);\n      } else {\n        setFieldValue('', index);\n      }\n    } else if (inputValue.length === 0) {\n      setFieldValue('', index);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n    const { ctrlKey, metaKey, key, shiftKey, target } = event;\n    const inputValue = (target as HTMLInputElement).value;\n\n    if (inputMode === 'numeric') {\n      const allowedKeys = ['Backspace', 'Tab', 'Control', 'Delete', 'ArrowLeft', 'ArrowRight'];\n      const isModifierShortcut = ctrlKey || metaKey;\n      const isAllowedKey =\n        allowedKeys.includes(key) || isModifierShortcut || !Number.isNaN(Number(key));\n\n      if (!isAllowedKey) {\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        focusInputField('prev', index);\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        focusInputField('next', index);\n        break;\n\n      case 'Tab':\n        if (shiftKey) {\n          if (index > 0 && manageFocus) {\n            event.preventDefault();\n            focusInputField('prev', index);\n          }\n        }\n        break;\n\n      case ' ':\n        event.preventDefault();\n        focusInputField('next', index);\n        break;\n\n      case 'Delete':\n        event.preventDefault();\n        setFieldValue('', index);\n        break;\n\n      case 'Backspace':\n        if (inputValue === '') {\n          event.preventDefault();\n          focusInputField('prev', index);\n        } else {\n          setFieldValue('', index);\n          if (index < currentLength - 1) {\n            event.preventDefault();\n            focusInputField('prev', index);\n          }\n        }\n        break;\n\n      default:\n        if (inputValue.length > 0 && key === currentValue[index]) {\n          event.preventDefault();\n          focusInputField('next', index);\n        }\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n    event.target.select();\n    setFocusedIndex(index);\n  };\n\n  const handleBlur = () => {\n    setFocusedIndex(-1);\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    const pasteData = event.clipboardData.getData('text/plain').replace(/[\\n\\r\\s]+/g, '');\n    const isValid = validate(pasteData.trim());\n\n    if (isValid) {\n      const pasteArray = createPinArray(currentLength, pasteData);\n      setValues(pasteArray);\n      const filledCount = pasteArray.filter((val) => val !== '').length;\n      if (filledCount >= currentLength) {\n        inputsRef.current[currentLength - 1]?.focus();\n      } else {\n        inputsRef.current[filledCount]?.focus();\n      }\n    }\n  };\n\n  return (\n    <>\n      <Group\n        {...others}\n        {...getStyles('root')}\n        ref={rootRef}\n        role=\"group\"\n        id={uuid}\n        gap={gap}\n        unstyled={unstyled}\n        wrap=\"nowrap\"\n        variant={variant}\n        __size={size}\n        dir=\"ltr\"\n      >\n        {currentValue.map((char: string, index: number) => (\n          <Input\n            component=\"input\"\n            {...getStyles('pinInput', {\n              style: {\n                '--input-padding': '0',\n                '--input-text-align': 'center',\n              } as React.CSSProperties,\n            })}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            size={size}\n            __staticSelector=\"PinInput\"\n            id={`${uuid}-${index + 1}`}\n            key={`${uuid}-${index}`}\n            inputMode={inputMode || (type === 'number' ? 'numeric' : 'text')}\n            onChange={(event) => handleChange(event, index)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n            onFocus={(event) => handleFocus(event, index)}\n            onBlur={handleBlur}\n            onPaste={handlePaste}\n            type={inputType || (mask ? 'password' : type === 'number' ? 'tel' : 'text')}\n            radius={radius}\n            error={error}\n            variant={variant}\n            disabled={disabled}\n            ref={(node) => {\n              if (node) {\n                index === 0 && assignRef(ref, node);\n                inputsRef.current[index] = node;\n              }\n            }}\n            autoComplete={oneTimeCode ? 'one-time-code' : 'off'}\n            placeholder={focusedIndex === index ? '' : placeholder}\n            value={char}\n            autoFocus={autoFocus && index === 0}\n            unstyled={unstyled}\n            aria-label={ariaLabel}\n            readOnly={readOnly}\n            {...getInputProps?.(index)}\n          />\n        ))}\n      </Group>\n\n      <input type=\"hidden\" name={name} form={form} value={_valueToString} {...hiddenInputProps} />\n    </>\n  );\n});\n\nPinInput.classes = { ...classes, ...InputBase.classes };\nPinInput.varsResolver = varsResolver;\nPinInput.displayName = '@mantine/core/PinInput';\n\nexport namespace PinInput {\n  export type Props = PinInputProps;\n  export type StylesNames = PinInputStylesNames;\n  export type Factory = PinInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/PinInput/create-pin-array/create-pin-array.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-pin-array.mjs","names":[],"sources":["../../../../src/components/PinInput/create-pin-array/create-pin-array.ts"],"sourcesContent":["export function createPinArray(length: number, value: string): string[] {\n  if (length < 1) {\n    return [];\n  }\n\n  const values = new Array<string>(length).fill('');\n\n  if (value) {\n    const splitted = value.trim().split('');\n    for (let i = 0; i < Math.min(length, splitted.length); i += 1) {\n      values[i] = splitted[i] === ' ' ? '' : splitted[i];\n    }\n  }\n\n  return values;\n}\n"],"mappings":";;AAAA,SAAgB,eAAe,QAAgB,OAAyB;AACtE,KAAI,SAAS,EACX,QAAO,EAAE;CAGX,MAAM,SAAS,IAAI,MAAc,OAAO,CAAC,KAAK,GAAG;AAEjD,KAAI,OAAO;EACT,MAAM,WAAW,MAAM,MAAM,CAAC,MAAM,GAAG;AACvC,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,IAAI,QAAQ,SAAS,OAAO,EAAE,KAAK,EAC1D,QAAO,KAAK,SAAS,OAAO,MAAM,KAAK,SAAS;;AAIpD,QAAO"}
+{"version":3,"file":"create-pin-array.mjs","names":[],"sources":["../../../../src/components/PinInput/create-pin-array/create-pin-array.ts"],"sourcesContent":["export function createPinArray(length: number, value: string): string[] {\n  if (length < 1) {\n    return [];\n  }\n\n  const values = new Array<string>(length).fill('');\n\n  if (value) {\n    const splitted = value.trim().split('');\n    for (let i = 0; i < Math.min(length, splitted.length); i += 1) {\n      values[i] = splitted[i] === ' ' ? '' : splitted[i];\n    }\n  }\n\n  return values;\n}\n"],"mappings":";;AAAA,SAAgB,eAAe,QAAgB,OAAyB;CACtE,IAAI,SAAS,GACX,OAAO,CAAC;CAGV,MAAM,SAAS,IAAI,MAAc,MAAM,EAAE,KAAK,EAAE;CAEhD,IAAI,OAAO;EACT,MAAM,WAAW,MAAM,KAAK,EAAE,MAAM,EAAE;EACtC,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,IAAI,QAAQ,SAAS,MAAM,GAAG,KAAK,GAC1D,OAAO,KAAK,SAAS,OAAO,MAAM,KAAK,SAAS;CAEpD;CAEA,OAAO;AACT"}

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> | 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"}
+{"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,6CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n  createVarsResolver,\n  ElementProps,\n  ExtendComponent,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getShadow,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useDirection,\n  useMantineEnv,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n  dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n  /** Dropdown position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 8 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Called when dropdown position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Called when dropdown closes */\n  onClose?: () => void;\n\n  /** Called when the popover is dismissed by clicking outside or by pressing escape */\n  onDismiss?: () => void;\n\n  /** Called when dropdown opens */\n  onOpen?: () => void;\n\n  /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n  keepMounted?: boolean;\n\n  /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Called when exit transition ends */\n  onExitTransitionEnd?: () => void;\n\n  /** Called when enter transition ends */\n  onEnterTransitionEnd?: () => void;\n\n  /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow @default false */\n  withArrow?: boolean;\n\n  /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n  withOverlay?: boolean;\n\n  /** Props passed down to `Overlay` component */\n  overlayProps?: OverlayProps & ElementProps<'div'>;\n\n  /** Arrow size in px @default 7 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position */\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within the `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the `Portal` when `withinPortal` is true */\n  portalProps?: BasePortalProps;\n\n  /** Dropdown `z-index` @default 300 */\n  zIndex?: string | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not be rendered */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n  returnFocus?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n  hideDetached?: boolean;\n\n  /** Prevents popover from flipping/shifting when it the dropdown is visible */\n  preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n  __staticSelector?: string;\n\n  /** `Popover.Target` and `Popover.Dropdown` components */\n  children?: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controlled dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Determines whether dropdown should be closed on outside clicks @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown @default false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target elements should have accessible roles @default true */\n  withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n  props: PopoverProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'bottom',\n  offset: 8,\n  transitionProps: { transition: 'fade', duration: 150 },\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  withOverlay: false,\n  hideDetached: true,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n  dropdown: {\n    '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n    '--popover-shadow': getShadow(shadow),\n  },\n}));\n\nexport function Popover(_props: PopoverProps) {\n  const props = useProps('Popover', defaultProps, _props);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    opened,\n    transitionProps,\n    onExitTransitionEnd,\n    onEnterTransitionEnd,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    portalProps,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onDismiss,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    vars,\n    floatingStrategy,\n    withOverlay,\n    overlayProps,\n    hideDetached,\n    attributes,\n    preventPositionChangeWhenVisible,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PopoverFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'dropdown',\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n  const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);\n  const positionRef = useRef<FloatingPosition>(position);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n  const { dir } = useDirection();\n  const env = useMantineEnv();\n\n  const uid = useId(id);\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(dir, position),\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n    onDismiss,\n    strategy: floatingStrategy,\n    dropdownVisible,\n    setDropdownVisible,\n    positionRef,\n    disabled,\n    preventPositionChangeWhenVisible,\n    keepMounted,\n  });\n\n  useClickOutside(\n    () => {\n      if (closeOnClickOutside) {\n        popover.onClose();\n        onDismiss?.();\n      }\n    },\n    clickOutsideEvents,\n    [targetNode, dropdownNode]\n  );\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.refs.setReference(node);\n    },\n    [popover.floating.refs.setReference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.refs.setFloating(node);\n    },\n    [popover.floating.refs.setFloating]\n  );\n\n  const onExited = useCallback(() => {\n    transitionProps?.onExited?.();\n    onExitTransitionEnd?.();\n    setDropdownVisible(false);\n    // Only reset position if preventPositionChangeWhenVisible is false\n    // to maintain the flipped position on subsequent opens\n    if (!preventPositionChangeWhenVisible) {\n      positionRef.current = position;\n    }\n  }, [transitionProps?.onExited, onExitTransitionEnd, preventPositionChangeWhenVisible, position]);\n\n  const onEntered = useCallback(() => {\n    transitionProps?.onEntered?.();\n    onEnterTransitionEnd?.();\n  }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transitionProps: { ...transitionProps, onExited, onEntered },\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        portalProps,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onDismiss,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => uid,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n        getStyles,\n        resolvedStyles,\n        floatingStrategy,\n        referenceHidden:\n          hideDetached && env !== 'test'\n            ? popover.floating.middlewareData.hide?.referenceHidden\n            : false,\n      }}\n    >\n      {children}\n      {withOverlay && (\n        <Transition\n          transition=\"fade\"\n          mounted={popover.opened}\n          duration={transitionProps?.duration || 250}\n          exitDuration={transitionProps?.exitDuration || 250}\n        >\n          {(transitionStyles) => (\n            <OptionalPortal withinPortal={withinPortal}>\n              <Overlay\n                {...overlayProps}\n                {...getStyles('overlay', {\n                  className: overlayProps?.className,\n                  style: [transitionStyles, overlayProps?.style],\n                })}\n              />\n            </OptionalPortal>\n          )}\n        </Transition>\n      )}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n  const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n  Extended.extend = Popover.extend;\n  Extended.displayName = `WithProps(${Popover.displayName})`;\n  return Extended;\n};\n\nexport namespace Popover {\n  export type Props = PopoverProps;\n  export type __Props = __PopoverProps;\n  export type Factory = PopoverFactory;\n  export type StylesNames = PopoverStylesNames;\n  export type TargetProps = PopoverTargetProps;\n  export type DropdownProps = PopoverDropdownProps;\n  export type Width = PopoverWidth;\n  export type ContextValue = PopoverContextValue;\n\n  export namespace Target {\n    export type Props = PopoverTargetProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = PopoverDropdownProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n  createVarsResolver,\n  ElementProps,\n  ExtendComponent,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getShadow,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useDirection,\n  useMantineEnv,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n  dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n  /** Dropdown position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 8 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Called when dropdown position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Called when dropdown closes */\n  onClose?: () => void;\n\n  /** Called when the popover is dismissed by clicking outside or by pressing escape */\n  onDismiss?: () => void;\n\n  /** Called when dropdown opens */\n  onOpen?: () => void;\n\n  /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n  keepMounted?: boolean;\n\n  /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Called when exit transition ends */\n  onExitTransitionEnd?: () => void;\n\n  /** Called when enter transition ends */\n  onEnterTransitionEnd?: () => void;\n\n  /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow @default false */\n  withArrow?: boolean;\n\n  /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n  withOverlay?: boolean;\n\n  /** Props passed down to `Overlay` component */\n  overlayProps?: OverlayProps & ElementProps<'div'>;\n\n  /** Arrow size in px @default 7 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position */\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within the `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the `Portal` when `withinPortal` is true */\n  portalProps?: BasePortalProps;\n\n  /** Dropdown `z-index` @default 300 */\n  zIndex?: string | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not be rendered */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n  returnFocus?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n  hideDetached?: boolean;\n\n  /** Prevents popover from flipping/shifting when it the dropdown is visible */\n  preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n  __staticSelector?: string;\n\n  /** `Popover.Target` and `Popover.Dropdown` components */\n  children?: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controlled dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Determines whether dropdown should be closed on outside clicks @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown @default false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target elements should have accessible roles @default true */\n  withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n  props: PopoverProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'bottom',\n  offset: 8,\n  transitionProps: { transition: 'fade', duration: 150 },\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  withOverlay: false,\n  hideDetached: true,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n  dropdown: {\n    '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n    '--popover-shadow': getShadow(shadow),\n  },\n}));\n\nexport function Popover(_props: PopoverProps) {\n  const props = useProps('Popover', defaultProps, _props);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    opened,\n    transitionProps,\n    onExitTransitionEnd,\n    onEnterTransitionEnd,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    portalProps,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onDismiss,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    vars,\n    floatingStrategy,\n    withOverlay,\n    overlayProps,\n    hideDetached,\n    attributes,\n    preventPositionChangeWhenVisible,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PopoverFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'dropdown',\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n  const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);\n  const positionRef = useRef<FloatingPosition>(position);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n  const { dir } = useDirection();\n  const env = useMantineEnv();\n\n  const uid = useId(id);\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(dir, position),\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n    onDismiss,\n    strategy: floatingStrategy,\n    dropdownVisible,\n    setDropdownVisible,\n    positionRef,\n    disabled,\n    preventPositionChangeWhenVisible,\n    keepMounted,\n  });\n\n  useClickOutside(\n    () => {\n      if (closeOnClickOutside) {\n        popover.onClose();\n        onDismiss?.();\n      }\n    },\n    clickOutsideEvents,\n    [targetNode, dropdownNode]\n  );\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.refs.setReference(node);\n    },\n    [popover.floating.refs.setReference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.refs.setFloating(node);\n    },\n    [popover.floating.refs.setFloating]\n  );\n\n  const onExited = useCallback(() => {\n    transitionProps?.onExited?.();\n    onExitTransitionEnd?.();\n    setDropdownVisible(false);\n    // Only reset position if preventPositionChangeWhenVisible is false\n    // to maintain the flipped position on subsequent opens\n    if (!preventPositionChangeWhenVisible) {\n      positionRef.current = position;\n    }\n  }, [transitionProps?.onExited, onExitTransitionEnd, preventPositionChangeWhenVisible, position]);\n\n  const onEntered = useCallback(() => {\n    transitionProps?.onEntered?.();\n    onEnterTransitionEnd?.();\n  }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transitionProps: { ...transitionProps, onExited, onEntered },\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        portalProps,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onDismiss,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => uid,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n        getStyles,\n        resolvedStyles,\n        floatingStrategy,\n        referenceHidden:\n          hideDetached && env !== 'test'\n            ? popover.floating.middlewareData.hide?.referenceHidden\n            : false,\n      }}\n    >\n      {children}\n      {withOverlay && (\n        <Transition\n          transition=\"fade\"\n          mounted={popover.opened}\n          duration={transitionProps?.duration || 250}\n          exitDuration={transitionProps?.exitDuration || 250}\n        >\n          {(transitionStyles) => (\n            <OptionalPortal withinPortal={withinPortal}>\n              <Overlay\n                {...overlayProps}\n                {...getStyles('overlay', {\n                  className: overlayProps?.className,\n                  style: [transitionStyles, overlayProps?.style],\n                })}\n              />\n            </OptionalPortal>\n          )}\n        </Transition>\n      )}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n  const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n  Extended.extend = Popover.extend;\n  Extended.displayName = `WithProps(${Popover.displayName})`;\n  return Extended;\n};\n\nexport namespace Popover {\n  export type Props = PopoverProps;\n  export type __Props = __PopoverProps;\n  export type Factory = PopoverFactory;\n  export type StylesNames = PopoverStylesNames;\n  export type TargetProps = PopoverTargetProps;\n  export type DropdownProps = PopoverDropdownProps;\n  export type Width = PopoverWidth;\n  export type ContextValue = PopoverContextValue;\n\n  export namespace Target {\n    export type Props = PopoverTargetProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = PopoverDropdownProps;\n  }\n}\n"],"mappings":"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"}

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,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"}
+{"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,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,kBAAkB;CAE9B,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,YAAY,aAAa,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,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;MACJ,IAAI,UAAU;MACd,IAAI,YAAY;KAClB,GACA;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;KACb,CACF;KACA,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,KAAK;QACzD,GAAI,IAAI,kBAAkB,EAAE,SAAS,OAAO,IAAI;OAClD;OACA,IAAI,gBAAgB;OACpB,QAAQ;OACR;MACF;KACF,CAAC;eAnCH,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;MACF,CAAC;KACF,CAAA,CACE;;GACI,CAAA;EAEH,CAAA;CACE,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverTarget.mjs","names":[],"sources":["../../../../src/components/Popover/PopoverTarget/PopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that should be used to access element ref */\n  refProp?: string;\n\n  /** Popup accessible type @default 'dialog' */\n  popupType?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  popupType: 'dialog',\n} satisfies Partial<PopoverTargetProps>;\n\nexport type PopoverTargetFactory = Factory<{\n  props: PopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const PopoverTarget = factory<PopoverTargetFactory>((props) => {\n  const { children, refProp, popupType, ref, ...others } = useProps(\n    'PopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.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 forwardedProps: any = others;\n  const ctx = usePopoverContext();\n  const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-haspopup': popupType,\n        'aria-expanded': ctx.opened,\n        'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,\n        id: ctx.getTargetId(),\n      }\n    : {};\n\n  const childProps = child.props as any;\n  return cloneElement(child, {\n    ...forwardedProps,\n    ...accessibleProps,\n    ...ctx.targetProps,\n    className: cx(ctx.targetProps.className, forwardedProps.className, childProps.className),\n    [refProp]: targetRef,\n    ...(!ctx.controlled\n      ? {\n          onClick: (event: React.MouseEvent<HTMLElement>) => {\n            ctx.onToggle();\n            childProps.onClick?.(event);\n          },\n        }\n      : null),\n  });\n});\n\nPopoverTarget.displayName = '@mantine/core/PopoverTarget';\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;CACZ;AAQD,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAW,SACvD,iBACA,cACA,MACD;CAED,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,mKACD;CAGH,MAAM,iBAAsB;CAC5B,MAAM,MAAM,mBAAmB;CAC/B,MAAM,YAAY,aAAa,IAAI,WAAW,WAAW,MAAM,EAAE,IAAI;CAErE,MAAM,kBAAkB,IAAI,YACxB;EACE,iBAAiB;EACjB,iBAAiB,IAAI;EACrB,iBAAiB,IAAI,SAAS,IAAI,eAAe,GAAG,KAAA;EACpD,IAAI,IAAI,aAAa;EACtB,GACD,EAAE;CAEN,MAAM,aAAa,MAAM;AACzB,QAAO,aAAa,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,WAAW,GAAG,IAAI,YAAY,WAAW,eAAe,WAAW,WAAW,UAAU;GACvF,UAAU;EACX,GAAI,CAAC,IAAI,aACL,EACE,UAAU,UAAyC;AACjD,OAAI,UAAU;AACd,cAAW,UAAU,MAAM;KAE9B,GACD;EACL,CAAC;EACF;AAEF,cAAc,cAAc"}
+{"version":3,"file":"PopoverTarget.mjs","names":[],"sources":["../../../../src/components/Popover/PopoverTarget/PopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that should be used to access element ref */\n  refProp?: string;\n\n  /** Popup accessible type @default 'dialog' */\n  popupType?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  popupType: 'dialog',\n} satisfies Partial<PopoverTargetProps>;\n\nexport type PopoverTargetFactory = Factory<{\n  props: PopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const PopoverTarget = factory<PopoverTargetFactory>((props) => {\n  const { children, refProp, popupType, ref, ...others } = useProps(\n    'PopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.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 forwardedProps: any = others;\n  const ctx = usePopoverContext();\n  const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-haspopup': popupType,\n        'aria-expanded': ctx.opened,\n        'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,\n        id: ctx.getTargetId(),\n      }\n    : {};\n\n  const childProps = child.props as any;\n  return cloneElement(child, {\n    ...forwardedProps,\n    ...accessibleProps,\n    ...ctx.targetProps,\n    className: cx(ctx.targetProps.className, forwardedProps.className, childProps.className),\n    [refProp]: targetRef,\n    ...(!ctx.controlled\n      ? {\n          onClick: (event: React.MouseEvent<HTMLElement>) => {\n            ctx.onToggle();\n            childProps.onClick?.(event);\n          },\n        }\n      : null),\n  });\n});\n\nPopoverTarget.displayName = '@mantine/core/PopoverTarget';\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,eAAe;CACnB,SAAS;CACT,WAAW;AACb;AAQA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,UAAU,SAAS,WAAW,KAAK,GAAG,WAAW,SACvD,iBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,kKACF;CAGF,MAAM,iBAAsB;CAC5B,MAAM,MAAM,kBAAkB;CAC9B,MAAM,YAAY,aAAa,IAAI,WAAW,WAAW,KAAK,GAAG,GAAG;CAEpE,MAAM,kBAAkB,IAAI,YACxB;EACE,iBAAiB;EACjB,iBAAiB,IAAI;EACrB,iBAAiB,IAAI,SAAS,IAAI,cAAc,IAAI,KAAA;EACpD,IAAI,IAAI,YAAY;CACtB,IACA,CAAC;CAEL,MAAM,aAAa,MAAM;CACzB,OAAO,aAAa,OAAO;EACzB,GAAG;EACH,GAAG;EACH,GAAG,IAAI;EACP,WAAW,GAAG,IAAI,YAAY,WAAW,eAAe,WAAW,WAAW,SAAS;GACtF,UAAU;EACX,GAAI,CAAC,IAAI,aACL,EACE,UAAU,UAAyC;GACjD,IAAI,SAAS;GACb,WAAW,UAAU,KAAK;EAC5B,EACF,IACA;CACN,CAAC;AACH,CAAC;AAED,cAAc,cAAc"}

package/esm/components/Popover/use-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  Middleware,\n  offset,\n  shift,\n  size,\n  useFloating,\n  UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { useMantineEnv } from '../../core';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n  offset: number | FloatingAxesOffsets;\n  position: FloatingPosition;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened: boolean | undefined;\n  defaultOpened: boolean | undefined;\n  onChange?: (opened: boolean) => void;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  onOpen?: () => void;\n  width: PopoverWidth;\n  middlewares: PopoverMiddlewares | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  arrowOffset: number;\n  strategy?: FloatingStrategy;\n  dropdownVisible: boolean;\n  setDropdownVisible: (visible: boolean) => void;\n  positionRef: React.RefObject<FloatingPosition>;\n  disabled: boolean | undefined;\n  preventPositionChangeWhenVisible: boolean | undefined;\n  keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getPopoverMiddlewares(\n  options: UsePopoverOptions,\n  getFloating: () => UseFloatingReturn<Element>,\n  env: 'test' | 'default'\n) {\n  const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n  const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n  if (options.dropdownVisible && env !== 'test' && options.preventPositionChangeWhenVisible) {\n    middlewaresOptions.flip = false;\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { limiter: limitShift(), padding: 5 }\n          : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  }\n\n  middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n  if (middlewaresOptions.size || options.width === 'target') {\n    middlewares.push(\n      size({\n        ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n        apply({ rects, availableWidth, availableHeight, ...rest }) {\n          const floating = getFloating();\n          const styles = floating.refs.floating.current?.style ?? {};\n\n          if (middlewaresOptions.size) {\n            // If custom apply function is given use that else set defaults\n            if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n              middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n            } else {\n              Object.assign(styles, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`,\n              });\n            }\n          }\n\n          if (options.width === 'target') {\n            Object.assign(styles, {\n              width: `${rects.reference.width}px`,\n            });\n          }\n        },\n      })\n    );\n  }\n\n  return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n  const env = useMantineEnv();\n  const [_opened, setOpened] = useUncontrolled({\n    value: options.opened,\n    defaultValue: options.defaultOpened,\n    finalValue: false,\n    onChange: options.onChange,\n  });\n\n  const previouslyOpened = useRef(_opened);\n\n  const onClose = () => {\n    if (_opened && !options.disabled) {\n      setOpened(false);\n    }\n  };\n\n  const onToggle = () => {\n    if (!options.disabled) {\n      setOpened(!_opened);\n    }\n  };\n\n  const floating: UseFloatingReturn<Element> = useFloating({\n    strategy: options.strategy,\n    placement: options.preventPositionChangeWhenVisible\n      ? options.positionRef.current\n      : options.position,\n    middleware: getPopoverMiddlewares(options, () => floating, env),\n    whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n  });\n\n  useEffect(() => {\n    if (!floating.refs.reference.current || !floating.refs.floating.current) {\n      return;\n    }\n\n    if (_opened) {\n      return autoUpdate(\n        floating.refs.reference.current,\n        floating.refs.floating.current,\n        floating.update\n      );\n    }\n  }, [_opened, floating.update]);\n\n  useDidUpdate(() => {\n    options.onPositionChange?.(floating.placement);\n    options.positionRef.current = floating.placement;\n  }, [floating.placement, options.preventPositionChangeWhenVisible]);\n\n  useDidUpdate(() => {\n    if (_opened !== previouslyOpened.current) {\n      if (!_opened) {\n        options.onClose?.();\n      } else {\n        options.onOpen?.();\n      }\n    }\n\n    previouslyOpened.current = _opened;\n  }, [_opened, options.onClose, options.onOpen]);\n\n  useIsomorphicEffect(() => {\n    let timeout: number = -1;\n\n    if (_opened) {\n      // Required to be in timeout to give floating ui render time to flip/shift popover\n      timeout = window.setTimeout(() => options.setDropdownVisible(true), 4);\n    }\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [_opened, options.position]);\n\n  return {\n    floating,\n    controlled: typeof options.opened === 'boolean',\n    opened: _opened,\n    onClose,\n    onToggle,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  limitShift,\n  Middleware,\n  offset,\n  shift,\n  size,\n  useFloating,\n  UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { useMantineEnv } from '../../core';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n  offset: number | FloatingAxesOffsets;\n  position: FloatingPosition;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened: boolean | undefined;\n  defaultOpened: boolean | undefined;\n  onChange?: (opened: boolean) => void;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  onOpen?: () => void;\n  width: PopoverWidth;\n  middlewares: PopoverMiddlewares | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  arrowOffset: number;\n  strategy?: FloatingStrategy;\n  dropdownVisible: boolean;\n  setDropdownVisible: (visible: boolean) => void;\n  positionRef: React.RefObject<FloatingPosition>;\n  disabled: boolean | undefined;\n  preventPositionChangeWhenVisible: boolean | undefined;\n  keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getPopoverMiddlewares(\n  options: UsePopoverOptions,\n  getFloating: () => UseFloatingReturn<Element>,\n  env: 'test' | 'default'\n) {\n  const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n  const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n  if (options.dropdownVisible && env !== 'test' && options.preventPositionChangeWhenVisible) {\n    middlewaresOptions.flip = false;\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { limiter: limitShift(), padding: 5 }\n          : { limiter: limitShift(), padding: 5, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  }\n\n  middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n  if (middlewaresOptions.size || options.width === 'target') {\n    middlewares.push(\n      size({\n        ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n        apply({ rects, availableWidth, availableHeight, ...rest }) {\n          const floating = getFloating();\n          const styles = floating.refs.floating.current?.style ?? {};\n\n          if (middlewaresOptions.size) {\n            // If custom apply function is given use that else set defaults\n            if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n              middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n            } else {\n              Object.assign(styles, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`,\n              });\n            }\n          }\n\n          if (options.width === 'target') {\n            Object.assign(styles, {\n              width: `${rects.reference.width}px`,\n            });\n          }\n        },\n      })\n    );\n  }\n\n  return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n  const env = useMantineEnv();\n  const [_opened, setOpened] = useUncontrolled({\n    value: options.opened,\n    defaultValue: options.defaultOpened,\n    finalValue: false,\n    onChange: options.onChange,\n  });\n\n  const previouslyOpened = useRef(_opened);\n\n  const onClose = () => {\n    if (_opened && !options.disabled) {\n      setOpened(false);\n    }\n  };\n\n  const onToggle = () => {\n    if (!options.disabled) {\n      setOpened(!_opened);\n    }\n  };\n\n  const floating: UseFloatingReturn<Element> = useFloating({\n    strategy: options.strategy,\n    placement: options.preventPositionChangeWhenVisible\n      ? options.positionRef.current\n      : options.position,\n    middleware: getPopoverMiddlewares(options, () => floating, env),\n    whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n  });\n\n  useEffect(() => {\n    if (!floating.refs.reference.current || !floating.refs.floating.current) {\n      return;\n    }\n\n    if (_opened) {\n      return autoUpdate(\n        floating.refs.reference.current,\n        floating.refs.floating.current,\n        floating.update\n      );\n    }\n  }, [_opened, floating.update]);\n\n  useDidUpdate(() => {\n    options.onPositionChange?.(floating.placement);\n    options.positionRef.current = floating.placement;\n  }, [floating.placement, options.preventPositionChangeWhenVisible]);\n\n  useDidUpdate(() => {\n    if (_opened !== previouslyOpened.current) {\n      if (!_opened) {\n        options.onClose?.();\n      } else {\n        options.onOpen?.();\n      }\n    }\n\n    previouslyOpened.current = _opened;\n  }, [_opened, options.onClose, options.onOpen]);\n\n  useIsomorphicEffect(() => {\n    let timeout: number = -1;\n\n    if (_opened) {\n      // Required to be in timeout to give floating ui render time to flip/shift popover\n      timeout = window.setTimeout(() => options.setDropdownVisible(true), 4);\n    }\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [_opened, options.position]);\n\n  return {\n    floating,\n    controlled: typeof options.opened === 'boolean',\n    opened: _opened,\n    onClose,\n    onToggle,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Portal/OptionalPortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionalPortal.mjs","names":[],"sources":["../../../src/components/Portal/OptionalPortal.tsx"],"sourcesContent":["import { factory, Factory, useMantineEnv } from '../../core';\nimport { Portal, PortalProps } from './Portal';\n\nexport interface OptionalPortalProps extends PortalProps {\n  /**\n   * Determines whether children should be rendered inside Portal.\n   * When false, children are rendered as regular React children.\n   *\n   * Note: In test environment, Portal is always disabled regardless of this value.\n   *\n   * @default true\n   */\n  withinPortal?: boolean;\n}\n\nexport type OptionalPortalFactory = Factory<{\n  props: OptionalPortalProps;\n  ref: HTMLDivElement;\n}>;\n\nexport const OptionalPortal = factory<OptionalPortalFactory>(\n  ({ withinPortal = true, children, ...others }) => {\n    const env = useMantineEnv();\n\n    if (env === 'test' || !withinPortal) {\n      return <>{children}</>;\n    }\n\n    return <Portal {...others}>{children}</Portal>;\n  }\n);\n\nOptionalPortal.displayName = '@mantine/core/OptionalPortal';\n\nexport namespace OptionalPortal {\n  export type Props = OptionalPortalProps;\n}\n"],"mappings":";;;;;;AAoBA,MAAa,iBAAiB,SAC3B,EAAE,eAAe,MAAM,UAAU,GAAG,aAAa;AAGhD,KAFY,eAAe,KAEf,UAAU,CAAC,aACrB,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,QAAO,oBAAC,QAAD;EAAQ,GAAI;EAAS;EAAkB,CAAA;EAEjD;AAED,eAAe,cAAc"}
+{"version":3,"file":"OptionalPortal.mjs","names":[],"sources":["../../../src/components/Portal/OptionalPortal.tsx"],"sourcesContent":["import { factory, Factory, useMantineEnv } from '../../core';\nimport { Portal, PortalProps } from './Portal';\n\nexport interface OptionalPortalProps extends PortalProps {\n  /**\n   * Determines whether children should be rendered inside Portal.\n   * When false, children are rendered as regular React children.\n   *\n   * Note: In test environment, Portal is always disabled regardless of this value.\n   *\n   * @default true\n   */\n  withinPortal?: boolean;\n}\n\nexport type OptionalPortalFactory = Factory<{\n  props: OptionalPortalProps;\n  ref: HTMLDivElement;\n}>;\n\nexport const OptionalPortal = factory<OptionalPortalFactory>(\n  ({ withinPortal = true, children, ...others }) => {\n    const env = useMantineEnv();\n\n    if (env === 'test' || !withinPortal) {\n      return <>{children}</>;\n    }\n\n    return <Portal {...others}>{children}</Portal>;\n  }\n);\n\nOptionalPortal.displayName = '@mantine/core/OptionalPortal';\n\nexport namespace OptionalPortal {\n  export type Props = OptionalPortalProps;\n}\n"],"mappings":";;;;;;AAoBA,MAAa,iBAAiB,SAC3B,EAAE,eAAe,MAAM,UAAU,GAAG,aAAa;CAGhD,IAFY,cAEN,MAAM,UAAU,CAAC,cACrB,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;CAGvB,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAS;CAAiB,CAAA;AAC/C,CACF;AAEA,eAAe,cAAc"}

package/esm/components/Portal/Portal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.mjs","names":[],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { assignRef, useIsomorphicEffect } from '@mantine/hooks';\nimport { Factory, factory, useProps } from '../../core';\n\nfunction createPortalNode(props: React.ComponentProps<'div'>) {\n  const node = document.createElement('div');\n  node.setAttribute('data-portal', 'true');\n  typeof props.className === 'string' &&\n    node.classList.add(...props.className.split(' ').filter(Boolean));\n  typeof props.style === 'object' && Object.assign(node.style, props.style);\n  typeof props.id === 'string' && node.setAttribute('id', props.id);\n  return node;\n}\n\nexport interface BasePortalProps extends React.ComponentProps<'div'> {\n  /**\n   * Target element where portal should be rendered. Accepts:\n   * - HTMLElement: Renders portal inside this element\n   * - string: CSS selector - renders inside first matching element\n   * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`\n   *\n   * Note: If selector doesn't match any element, portal will not render\n   */\n  target?: HTMLElement | string;\n\n  /**\n   * When true and target is not specified, all Portal instances share a single\n   * container node appended to document.body. When false, each Portal creates\n   * its own container node.\n   *\n   * Has no effect when target is specified.\n   *\n   * @default true\n   */\n  reuseTargetNode?: boolean;\n}\n\nexport interface PortalProps extends BasePortalProps {\n  /** Content to render inside the portal */\n  children: React.ReactNode;\n}\n\nfunction getTargetNode({ target, reuseTargetNode, ...others }: BasePortalProps): HTMLElement {\n  if (target) {\n    if (typeof target === 'string') {\n      return document.querySelector<HTMLElement>(target) || createPortalNode(others);\n    }\n\n    return target;\n  }\n\n  if (reuseTargetNode) {\n    const existingNode = document.querySelector<HTMLElement>('[data-mantine-shared-portal-node]');\n\n    if (existingNode) {\n      return existingNode;\n    }\n\n    const node = createPortalNode(others);\n    node.setAttribute('data-mantine-shared-portal-node', 'true');\n    document.body.appendChild(node);\n    return node;\n  }\n\n  return createPortalNode(others);\n}\n\nexport type PortalFactory = Factory<{\n  props: PortalProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  reuseTargetNode: true,\n} satisfies Partial<PortalProps>;\n\nexport const Portal = factory<PortalFactory>((props) => {\n  const { children, target, reuseTargetNode, ref, ...others } = useProps(\n    'Portal',\n    defaultProps,\n    props\n  );\n\n  const [mounted, setMounted] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    setMounted(true);\n    nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others });\n    assignRef(ref, nodeRef.current);\n\n    if (!target && !reuseTargetNode && nodeRef.current) {\n      document.body.appendChild(nodeRef.current);\n    }\n\n    return () => {\n      if (!target && !reuseTargetNode && nodeRef.current) {\n        document.body.removeChild(nodeRef.current);\n      }\n    };\n  }, [target]);\n\n  if (!mounted || !nodeRef.current) {\n    return null;\n  }\n\n  return createPortal(<>{children}</>, nodeRef.current);\n});\n\nPortal.displayName = '@mantine/core/Portal';\n\nexport namespace Portal {\n  export type Props = PortalProps;\n}\n"],"mappings":";;;;;;;;AAKA,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAK,aAAa,eAAe,OAAO;AACxC,QAAO,MAAM,cAAc,YACzB,KAAK,UAAU,IAAI,GAAG,MAAM,UAAU,MAAM,IAAI,CAAC,OAAO,QAAQ,CAAC;AACnE,QAAO,MAAM,UAAU,YAAY,OAAO,OAAO,KAAK,OAAO,MAAM,MAAM;AACzE,QAAO,MAAM,OAAO,YAAY,KAAK,aAAa,MAAM,MAAM,GAAG;AACjE,QAAO;;AA+BT,SAAS,cAAc,EAAE,QAAQ,iBAAiB,GAAG,UAAwC;AAC3F,KAAI,QAAQ;AACV,MAAI,OAAO,WAAW,SACpB,QAAO,SAAS,cAA2B,OAAO,IAAI,iBAAiB,OAAO;AAGhF,SAAO;;AAGT,KAAI,iBAAiB;EACnB,MAAM,eAAe,SAAS,cAA2B,oCAAoC;AAE7F,MAAI,aACF,QAAO;EAGT,MAAM,OAAO,iBAAiB,OAAO;AACrC,OAAK,aAAa,mCAAmC,OAAO;AAC5D,WAAS,KAAK,YAAY,KAAK;AAC/B,SAAO;;AAGT,QAAO,iBAAiB,OAAO;;AAQjC,MAAM,eAAe,EACnB,iBAAiB,MAClB;AAED,MAAa,SAAS,SAAwB,UAAU;CACtD,MAAM,EAAE,UAAU,QAAQ,iBAAiB,KAAK,GAAG,WAAW,SAC5D,UACA,cACA,MACD;CAED,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,UAAU,OAA2B,KAAK;AAEhD,2BAA0B;AACxB,aAAW,KAAK;AAChB,UAAQ,UAAU,cAAc;GAAE;GAAQ;GAAiB,GAAG;GAAQ,CAAC;AACvE,YAAU,KAAK,QAAQ,QAAQ;AAE/B,MAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,QACzC,UAAS,KAAK,YAAY,QAAQ,QAAQ;AAG5C,eAAa;AACX,OAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,QACzC,UAAS,KAAK,YAAY,QAAQ,QAAQ;;IAG7C,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,WAAW,CAAC,QAAQ,QACvB,QAAO;AAGT,QAAO,aAAa,oBAAA,YAAA,EAAG,UAAY,CAAA,EAAE,QAAQ,QAAQ;EACrD;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Portal.mjs","names":[],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { assignRef, useIsomorphicEffect } from '@mantine/hooks';\nimport { Factory, factory, useProps } from '../../core';\n\nfunction createPortalNode(props: React.ComponentProps<'div'>) {\n  const node = document.createElement('div');\n  node.setAttribute('data-portal', 'true');\n  typeof props.className === 'string' &&\n    node.classList.add(...props.className.split(' ').filter(Boolean));\n  typeof props.style === 'object' && Object.assign(node.style, props.style);\n  typeof props.id === 'string' && node.setAttribute('id', props.id);\n  return node;\n}\n\nexport interface BasePortalProps extends React.ComponentProps<'div'> {\n  /**\n   * Target element where portal should be rendered. Accepts:\n   * - HTMLElement: Renders portal inside this element\n   * - string: CSS selector - renders inside first matching element\n   * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`\n   *\n   * Note: If selector doesn't match any element, portal will not render\n   */\n  target?: HTMLElement | string;\n\n  /**\n   * When true and target is not specified, all Portal instances share a single\n   * container node appended to document.body. When false, each Portal creates\n   * its own container node.\n   *\n   * Has no effect when target is specified.\n   *\n   * @default true\n   */\n  reuseTargetNode?: boolean;\n}\n\nexport interface PortalProps extends BasePortalProps {\n  /** Content to render inside the portal */\n  children: React.ReactNode;\n}\n\nfunction getTargetNode({ target, reuseTargetNode, ...others }: BasePortalProps): HTMLElement {\n  if (target) {\n    if (typeof target === 'string') {\n      return document.querySelector<HTMLElement>(target) || createPortalNode(others);\n    }\n\n    return target;\n  }\n\n  if (reuseTargetNode) {\n    const existingNode = document.querySelector<HTMLElement>('[data-mantine-shared-portal-node]');\n\n    if (existingNode) {\n      return existingNode;\n    }\n\n    const node = createPortalNode(others);\n    node.setAttribute('data-mantine-shared-portal-node', 'true');\n    document.body.appendChild(node);\n    return node;\n  }\n\n  return createPortalNode(others);\n}\n\nexport type PortalFactory = Factory<{\n  props: PortalProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  reuseTargetNode: true,\n} satisfies Partial<PortalProps>;\n\nexport const Portal = factory<PortalFactory>((props) => {\n  const { children, target, reuseTargetNode, ref, ...others } = useProps(\n    'Portal',\n    defaultProps,\n    props\n  );\n\n  const [mounted, setMounted] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    setMounted(true);\n    nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others });\n    assignRef(ref, nodeRef.current);\n\n    if (!target && !reuseTargetNode && nodeRef.current) {\n      document.body.appendChild(nodeRef.current);\n    }\n\n    return () => {\n      if (!target && !reuseTargetNode && nodeRef.current) {\n        document.body.removeChild(nodeRef.current);\n      }\n    };\n  }, [target]);\n\n  if (!mounted || !nodeRef.current) {\n    return null;\n  }\n\n  return createPortal(<>{children}</>, nodeRef.current);\n});\n\nPortal.displayName = '@mantine/core/Portal';\n\nexport namespace Portal {\n  export type Props = PortalProps;\n}\n"],"mappings":";;;;;;;;AAKA,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,OAAO,SAAS,cAAc,KAAK;CACzC,KAAK,aAAa,eAAe,MAAM;CACvC,OAAO,MAAM,cAAc,YACzB,KAAK,UAAU,IAAI,GAAG,MAAM,UAAU,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC;CAClE,OAAO,MAAM,UAAU,YAAY,OAAO,OAAO,KAAK,OAAO,MAAM,KAAK;CACxE,OAAO,MAAM,OAAO,YAAY,KAAK,aAAa,MAAM,MAAM,EAAE;CAChE,OAAO;AACT;AA8BA,SAAS,cAAc,EAAE,QAAQ,iBAAiB,GAAG,UAAwC;CAC3F,IAAI,QAAQ;EACV,IAAI,OAAO,WAAW,UACpB,OAAO,SAAS,cAA2B,MAAM,KAAK,iBAAiB,MAAM;EAG/E,OAAO;CACT;CAEA,IAAI,iBAAiB;EACnB,MAAM,eAAe,SAAS,cAA2B,mCAAmC;EAE5F,IAAI,cACF,OAAO;EAGT,MAAM,OAAO,iBAAiB,MAAM;EACpC,KAAK,aAAa,mCAAmC,MAAM;EAC3D,SAAS,KAAK,YAAY,IAAI;EAC9B,OAAO;CACT;CAEA,OAAO,iBAAiB,MAAM;AAChC;AAOA,MAAM,eAAe,EACnB,iBAAiB,KACnB;AAEA,MAAa,SAAS,SAAwB,UAAU;CACtD,MAAM,EAAE,UAAU,QAAQ,iBAAiB,KAAK,GAAG,WAAW,SAC5D,UACA,cACA,KACF;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,UAAU,OAA2B,IAAI;CAE/C,0BAA0B;EACxB,WAAW,IAAI;EACf,QAAQ,UAAU,cAAc;GAAE;GAAQ;GAAiB,GAAG;EAAO,CAAC;EACtE,UAAU,KAAK,QAAQ,OAAO;EAE9B,IAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,SACzC,SAAS,KAAK,YAAY,QAAQ,OAAO;EAG3C,aAAa;GACX,IAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,SACzC,SAAS,KAAK,YAAY,QAAQ,OAAO;EAE7C;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,IAAI,CAAC,WAAW,CAAC,QAAQ,SACvB,OAAO;CAGT,OAAO,aAAa,oBAAA,YAAA,EAAG,SAAW,CAAA,GAAG,QAAQ,OAAO;AACtD,CAAC;AAED,OAAO,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.context.mjs","names":[],"sources":["../../../src/components/Progress/Progress.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ProgressRootFactory } from './ProgressRoot/ProgressRoot';\n\nexport interface ProgressContextValue {\n  getStyles: GetStylesApi<ProgressRootFactory>;\n  autoContrast: boolean | undefined;\n}\n\nexport const [ProgressProvider, useProgressContext] = createSafeContext<ProgressContextValue>(\n  'Progress.Root component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,gDACD"}
+{"version":3,"file":"Progress.context.mjs","names":[],"sources":["../../../src/components/Progress/Progress.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ProgressRootFactory } from './ProgressRoot/ProgressRoot';\n\nexport interface ProgressContextValue {\n  getStyles: GetStylesApi<ProgressRootFactory>;\n  autoContrast: boolean | undefined;\n}\n\nexport const [ProgressProvider, useProgressContext] = createSafeContext<ProgressContextValue>(\n  'Progress.Root component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,+CACF"}

package/esm/components/Progress/Progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.mjs","names":["classes"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import {\n  factory,\n  Factory,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { ProgressLabel, type ProgressLabelProps } from './ProgressLabel/ProgressLabel';\nimport {\n  __ProgressRootProps,\n  ProgressRoot,\n  ProgressRootCssVariables,\n  ProgressRootStylesNames,\n  type ProgressRootProps,\n} from './ProgressRoot/ProgressRoot';\nimport { ProgressSection, type ProgressSectionProps } from './ProgressSection/ProgressSection';\nimport classes from './Progress.module.css';\nimport type { ProgressContextValue } from './Progress.context';\nexport type ProgressStylesNames = ProgressRootStylesNames;\n\nexport interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {\n  /** Value of the progress */\n  value: number;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated (automatically enables striped) @default false */\n  animated?: boolean;\n}\n\nexport type ProgressFactory = Factory<{\n  props: ProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressStylesNames;\n  vars: ProgressRootCssVariables;\n  staticComponents: {\n    Section: typeof ProgressSection;\n    Root: typeof ProgressRoot;\n    Label: typeof ProgressLabel;\n  };\n}>;\n\nexport const Progress = factory<ProgressFactory>((_props) => {\n  const props = useProps('Progress', null, _props);\n  const {\n    value,\n    classNames,\n    styles,\n    vars,\n    color,\n    striped,\n    animated,\n    'aria-label': label,\n    ...others\n  } = props;\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ProgressFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <ProgressRoot\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      vars={vars as any}\n      {...others}\n    >\n      <ProgressSection\n        value={value}\n        color={color}\n        striped={striped}\n        animated={animated}\n        aria-label={label}\n      />\n    </ProgressRoot>\n  );\n});\n\nProgress.classes = classes;\nProgress.displayName = '@mantine/core/Progress';\nProgress.Section = ProgressSection;\nProgress.Root = ProgressRoot;\nProgress.Label = ProgressLabel;\n\nexport namespace Progress {\n  export type Props = ProgressProps;\n  export type Factory = ProgressFactory;\n  export type StylesNames = ProgressStylesNames;\n  export type ContextValue = ProgressContextValue;\n\n  export namespace Label {\n    export type Props = ProgressLabelProps;\n  }\n\n  export namespace Root {\n    export type Props = ProgressRootProps;\n  }\n\n  export namespace Section {\n    export type Props = ProgressSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;AA+CA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,MAAM,OAAO;CAChD,MAAM,EACJ,OACA,YACA,QACA,MACA,OACA,SACA,UACA,cAAc,OACd,GAAG,WACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAsC;EACnF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,cAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;YAEJ,oBAAC,iBAAD;GACS;GACA;GACE;GACC;GACV,cAAY;GACZ,CAAA;EACW,CAAA;EAEjB;AAEF,SAAS,UAAUA;AACnB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO;AAChB,SAAS,QAAQ"}
+{"version":3,"file":"Progress.mjs","names":["classes"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import {\n  factory,\n  Factory,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { ProgressLabel, type ProgressLabelProps } from './ProgressLabel/ProgressLabel';\nimport {\n  __ProgressRootProps,\n  ProgressRoot,\n  ProgressRootCssVariables,\n  ProgressRootStylesNames,\n  type ProgressRootProps,\n} from './ProgressRoot/ProgressRoot';\nimport { ProgressSection, type ProgressSectionProps } from './ProgressSection/ProgressSection';\nimport classes from './Progress.module.css';\nimport type { ProgressContextValue } from './Progress.context';\nexport type ProgressStylesNames = ProgressRootStylesNames;\n\nexport interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {\n  /** Value of the progress */\n  value: number;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated (automatically enables striped) @default false */\n  animated?: boolean;\n}\n\nexport type ProgressFactory = Factory<{\n  props: ProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressStylesNames;\n  vars: ProgressRootCssVariables;\n  staticComponents: {\n    Section: typeof ProgressSection;\n    Root: typeof ProgressRoot;\n    Label: typeof ProgressLabel;\n  };\n}>;\n\nexport const Progress = factory<ProgressFactory>((_props) => {\n  const props = useProps('Progress', null, _props);\n  const {\n    value,\n    classNames,\n    styles,\n    vars,\n    color,\n    striped,\n    animated,\n    'aria-label': label,\n    ...others\n  } = props;\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ProgressFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <ProgressRoot\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      vars={vars as any}\n      {...others}\n    >\n      <ProgressSection\n        value={value}\n        color={color}\n        striped={striped}\n        animated={animated}\n        aria-label={label}\n      />\n    </ProgressRoot>\n  );\n});\n\nProgress.classes = classes;\nProgress.displayName = '@mantine/core/Progress';\nProgress.Section = ProgressSection;\nProgress.Root = ProgressRoot;\nProgress.Label = ProgressLabel;\n\nexport namespace Progress {\n  export type Props = ProgressProps;\n  export type Factory = ProgressFactory;\n  export type StylesNames = ProgressStylesNames;\n  export type ContextValue = ProgressContextValue;\n\n  export namespace Label {\n    export type Props = ProgressLabelProps;\n  }\n\n  export namespace Root {\n    export type Props = ProgressRootProps;\n  }\n\n  export namespace Section {\n    export type Props = ProgressSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;AA+CA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,MAAM,MAAM;CAC/C,MAAM,EACJ,OACA,YACA,QACA,MACA,OACA,SACA,UACA,cAAc,OACd,GAAG,WACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAsC;EACnF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;YAEJ,oBAAC,iBAAD;GACS;GACA;GACE;GACC;GACV,cAAY;EACb,CAAA;CACW,CAAA;AAElB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO;AAChB,SAAS,QAAQ"}

package/esm/components/Progress/ProgressLabel/ProgressLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressLabel.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressLabel/ProgressLabel.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressLabelStylesNames = 'label';\n\nexport interface ProgressLabelProps\n  extends BoxProps, CompoundStylesApiProps<ProgressLabelFactory>, ElementProps<'div'> {}\n\nexport type ProgressLabelFactory = Factory<{\n  props: ProgressLabelProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressLabelStylesNames;\n  compound: true;\n}>;\n\nexport const ProgressLabel = factory<ProgressLabelFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ProgressLabel',\n    null,\n    props\n  );\n\n  const ctx = useProgressContext();\n\n  return <Box {...ctx.getStyles('label', { className, style, classNames, styles })} {...others} />;\n});\n\nProgressLabel.classes = classes;\nProgressLabel.displayName = '@mantine/core/ProgressLabel';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,iBACA,MACA,MACD;AAID,QAAO,oBAAC,KAAD;EAAK,GAFA,oBAAoB,CAEZ,UAAU,SAAS;GAAE;GAAW;GAAO;GAAY;GAAQ,CAAC;EAAE,GAAI;EAAU,CAAA;EAChG;AAEF,cAAc,UAAUA;AACxB,cAAc,cAAc"}
+{"version":3,"file":"ProgressLabel.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressLabel/ProgressLabel.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressLabelStylesNames = 'label';\n\nexport interface ProgressLabelProps\n  extends BoxProps, CompoundStylesApiProps<ProgressLabelFactory>, ElementProps<'div'> {}\n\nexport type ProgressLabelFactory = Factory<{\n  props: ProgressLabelProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressLabelStylesNames;\n  compound: true;\n}>;\n\nexport const ProgressLabel = factory<ProgressLabelFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ProgressLabel',\n    null,\n    props\n  );\n\n  const ctx = useProgressContext();\n\n  return <Box {...ctx.getStyles('label', { className, style, classNames, styles })} {...others} />;\n});\n\nProgressLabel.classes = classes;\nProgressLabel.displayName = '@mantine/core/ProgressLabel';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,iBACA,MACA,KACF;CAIA,OAAO,oBAAC,KAAD;EAAK,GAFA,mBAEM,EAAE,UAAU,SAAS;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EAAG,GAAI;CAAS,CAAA;AACjG,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}

package/esm/components/Progress/ProgressRoot/ProgressRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressRoot.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressRoot/ProgressRoot.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { ProgressProvider } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressRootStylesNames = 'root' | 'section' | 'label';\nexport type ProgressRootCssVariables = {\n  root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';\n};\n\nexport interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {\n  /** Controls track height @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, adjusts label text color based on section background color for readability */\n  autoContrast?: boolean;\n\n  /** Controls sections width transition duration, value is specified in ms @default 100 */\n  transitionDuration?: number;\n\n  /** Controls orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface ProgressRootProps\n  extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {}\n\nexport type ProgressRootFactory = Factory<{\n  props: ProgressRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressRootStylesNames;\n  vars: ProgressRootCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<ProgressRootFactory>(\n  (_, { size, radius, transitionDuration }) => ({\n    root: {\n      '--progress-size': getSize(size, 'progress-size'),\n      '--progress-radius': radius === undefined ? undefined : getRadius(radius),\n      '--progress-transition-duration':\n        typeof transitionDuration === 'number' ? `${transitionDuration}ms` : undefined,\n    },\n  })\n);\n\nexport const ProgressRoot = factory<ProgressRootFactory>((_props) => {\n  const props = useProps('ProgressRoot', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    autoContrast,\n    transitionDuration,\n    orientation,\n    attributes,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ProgressRootFactory>({\n    name: 'Progress',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <ProgressProvider value={{ getStyles, autoContrast }}>\n      <Box mod={[{ orientation }, mod]} {...getStyles('root')} {...others} />\n    </ProgressProvider>\n  );\n});\n\nProgressRoot.classes = classes;\nProgressRoot.varsResolver = varsResolver;\nProgressRoot.displayName = '@mantine/core/ProgressRoot';\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,QAAQ,0BAA0B,EAC5C,MAAM;CACJ,mBAAmB,QAAQ,MAAM,gBAAgB;CACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACzE,kCACE,OAAO,uBAAuB,WAAW,GAAG,mBAAmB,MAAM,KAAA;CACxE,EACF,EACF;AAED,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,oBACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAW;GAAc;YAClD,oBAAC,KAAD;GAAK,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI;GAAE,GAAI,UAAU,OAAO;GAAE,GAAI;GAAU,CAAA;EACtD,CAAA;EAErB;AAEF,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}
+{"version":3,"file":"ProgressRoot.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressRoot/ProgressRoot.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { ProgressProvider } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressRootStylesNames = 'root' | 'section' | 'label';\nexport type ProgressRootCssVariables = {\n  root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';\n};\n\nexport interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {\n  /** Controls track height @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, adjusts label text color based on section background color for readability */\n  autoContrast?: boolean;\n\n  /** Controls sections width transition duration, value is specified in ms @default 100 */\n  transitionDuration?: number;\n\n  /** Controls orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface ProgressRootProps\n  extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {}\n\nexport type ProgressRootFactory = Factory<{\n  props: ProgressRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressRootStylesNames;\n  vars: ProgressRootCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<ProgressRootFactory>(\n  (_, { size, radius, transitionDuration }) => ({\n    root: {\n      '--progress-size': getSize(size, 'progress-size'),\n      '--progress-radius': radius === undefined ? undefined : getRadius(radius),\n      '--progress-transition-duration':\n        typeof transitionDuration === 'number' ? `${transitionDuration}ms` : undefined,\n    },\n  })\n);\n\nexport const ProgressRoot = factory<ProgressRootFactory>((_props) => {\n  const props = useProps('ProgressRoot', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    autoContrast,\n    transitionDuration,\n    orientation,\n    attributes,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ProgressRootFactory>({\n    name: 'Progress',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <ProgressProvider value={{ getStyles, autoContrast }}>\n      <Box mod={[{ orientation }, mod]} {...getStyles('root')} {...others} />\n    </ProgressProvider>\n  );\n});\n\nProgressRoot.classes = classes;\nProgressRoot.varsResolver = varsResolver;\nProgressRoot.displayName = '@mantine/core/ProgressRoot';\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,QAAQ,0BAA0B,EAC5C,MAAM;CACJ,mBAAmB,QAAQ,MAAM,eAAe;CAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACxE,kCACE,OAAO,uBAAuB,WAAW,GAAG,mBAAmB,MAAM,KAAA;AACzE,EACF,EACF;AAEA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,oBACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAW;EAAa;YACjD,oBAAC,KAAD;GAAK,KAAK,CAAC,EAAE,YAAY,GAAG,GAAG;GAAG,GAAI,UAAU,MAAM;GAAG,GAAI;EAAS,CAAA;CACtD,CAAA;AAEtB,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}

package/esm/components/Progress/ProgressSection/ProgressSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressSection.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressSection/ProgressSection.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressSectionStylesNames = 'section';\n\nexport interface ProgressSectionProps\n  extends BoxProps, CompoundStylesApiProps<ProgressSectionFactory>, ElementProps<'div'> {\n  /** Value of the section in 0–100 range */\n  value: number;\n\n  /** Determines whether `aria-*` props should be added to the root element @default true */\n  withAria?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated, `striped` prop is ignored @default false */\n  animated?: boolean;\n}\n\nexport type ProgressSectionFactory = Factory<{\n  props: ProgressSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressSectionStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withAria: true,\n} satisfies Partial<ProgressSectionProps>;\n\nexport const ProgressSection = factory<ProgressSectionFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    value,\n    withAria,\n    color,\n    striped,\n    animated,\n    mod,\n    ...others\n  } = useProps('ProgressSection', defaultProps, props);\n\n  const ctx = useProgressContext();\n  const theme = useMantineTheme();\n\n  const ariaAttributes = withAria\n    ? {\n        role: 'progressbar',\n        'aria-valuemax': 100,\n        'aria-valuemin': 0,\n        'aria-valuenow': value,\n        'aria-valuetext': `${value}%`,\n      }\n    : {};\n\n  return (\n    <Box\n      {...ctx.getStyles('section', { className, classNames, styles, style })}\n      {...others}\n      {...ariaAttributes}\n      mod={[{ striped: striped || animated, animated }, mod]}\n      __vars={{\n        '--progress-section-size': `${value}%`,\n        '--progress-section-color': getThemeColor(color, theme),\n        '--progress-label-color': getAutoContrastValue(ctx.autoContrast, theme)\n          ? getContrastColor({ color, theme, autoContrast: ctx.autoContrast })\n          : undefined,\n      }}\n    />\n  );\n});\n\nProgressSection.classes = classes;\nProgressSection.displayName = '@mantine/core/ProgressSection';\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,eAAe,EACnB,UAAU,MACX;AAED,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,OACA,SACA,UACA,KACA,GAAG,WACD,SAAS,mBAAmB,cAAc,MAAM;CAEpD,MAAM,MAAM,oBAAoB;CAChC,MAAM,QAAQ,iBAAiB;CAE/B,MAAM,iBAAiB,WACnB;EACE,MAAM;EACN,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB,GAAG,MAAM;EAC5B,GACD,EAAE;AAEN,QACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAQ;GAAO,CAAC;EACtE,GAAI;EACJ,GAAI;EACJ,KAAK,CAAC;GAAE,SAAS,WAAW;GAAU;GAAU,EAAE,IAAI;EACtD,QAAQ;GACN,2BAA2B,GAAG,MAAM;GACpC,4BAA4B,cAAc,OAAO,MAAM;GACvD,0BAA0B,qBAAqB,IAAI,cAAc,MAAM,GACnE,iBAAiB;IAAE;IAAO;IAAO,cAAc,IAAI;IAAc,CAAC,GAClE,KAAA;GACL;EACD,CAAA;EAEJ;AAEF,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}
+{"version":3,"file":"ProgressSection.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressSection/ProgressSection.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressSectionStylesNames = 'section';\n\nexport interface ProgressSectionProps\n  extends BoxProps, CompoundStylesApiProps<ProgressSectionFactory>, ElementProps<'div'> {\n  /** Value of the section in 0–100 range */\n  value: number;\n\n  /** Determines whether `aria-*` props should be added to the root element @default true */\n  withAria?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated, `striped` prop is ignored @default false */\n  animated?: boolean;\n}\n\nexport type ProgressSectionFactory = Factory<{\n  props: ProgressSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressSectionStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withAria: true,\n} satisfies Partial<ProgressSectionProps>;\n\nexport const ProgressSection = factory<ProgressSectionFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    value,\n    withAria,\n    color,\n    striped,\n    animated,\n    mod,\n    ...others\n  } = useProps('ProgressSection', defaultProps, props);\n\n  const ctx = useProgressContext();\n  const theme = useMantineTheme();\n\n  const ariaAttributes = withAria\n    ? {\n        role: 'progressbar',\n        'aria-valuemax': 100,\n        'aria-valuemin': 0,\n        'aria-valuenow': value,\n        'aria-valuetext': `${value}%`,\n      }\n    : {};\n\n  return (\n    <Box\n      {...ctx.getStyles('section', { className, classNames, styles, style })}\n      {...others}\n      {...ariaAttributes}\n      mod={[{ striped: striped || animated, animated }, mod]}\n      __vars={{\n        '--progress-section-size': `${value}%`,\n        '--progress-section-color': getThemeColor(color, theme),\n        '--progress-label-color': getAutoContrastValue(ctx.autoContrast, theme)\n          ? getContrastColor({ color, theme, autoContrast: ctx.autoContrast })\n          : undefined,\n      }}\n    />\n  );\n});\n\nProgressSection.classes = classes;\nProgressSection.displayName = '@mantine/core/ProgressSection';\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,eAAe,EACnB,UAAU,KACZ;AAEA,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,OACA,SACA,UACA,KACA,GAAG,WACD,SAAS,mBAAmB,cAAc,KAAK;CAEnD,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,iBAAiB,WACnB;EACE,MAAM;EACN,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB,GAAG,MAAM;CAC7B,IACA,CAAC;CAEL,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EACrE,GAAI;EACJ,GAAI;EACJ,KAAK,CAAC;GAAE,SAAS,WAAW;GAAU;EAAS,GAAG,GAAG;EACrD,QAAQ;GACN,2BAA2B,GAAG,MAAM;GACpC,4BAA4B,cAAc,OAAO,KAAK;GACtD,0BAA0B,qBAAqB,IAAI,cAAc,KAAK,IAClE,iBAAiB;IAAE;IAAO;IAAO,cAAc,IAAI;GAAa,CAAC,IACjE,KAAA;EACN;CACD,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Radio/Radio.mjs

@@ -63,6 +63,11 @@ const Radio = factory((_props) => {
 	const componentSize = props.size ? size : contextSize;
 	const { styleProps, rest } = extractStyleProps(others);
 	const uuid = useId$1(id);
+	const describedBy = [
+		description ? `${uuid}-description` : void 0,
+		error && typeof error !== "boolean" ? `${uuid}-error` : void 0,
+		rest["aria-describedby"]
+	].filter(Boolean).join(" ") || void 0;
 	const contextChecked = ctx ? ctx.value === rest.value : void 0;
 	const withContextProps = {
 		checked: contextChecked ?? checked,
@@ -110,7 +115,8 @@ const Radio = factory((_props) => {
 					"with-error-styles": withErrorStyles
 				},
 				id: uuid,
-				type: "radio"
+				type: "radio",
+				"aria-describedby": describedBy
 			}), /* @__PURE__ */ jsx(Icon, {
 				...getStyles("icon"),
 				"aria-hidden": true

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  RadioCard,\n  type RadioCardProps,\n  type RadioCardStylesNames,\n  type RadioCardFactory,\n  type RadioCardCssVariables,\n  type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n  RadioGroup,\n  RadioGroupContext,\n  type RadioGroupProps,\n  type RadioGroupStylesNames,\n  type RadioGroupFactory,\n  type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n  RadioIndicator,\n  type RadioIndicatorProps,\n  type RadioIndicatorStylesNames,\n  type RadioIndicatorFactory,\n  type RadioIndicatorCssVariables,\n  type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n  export type Props = RadioProps;\n  export type StylesNames = RadioStylesNames;\n  export type Factory = RadioFactory;\n  export type Variant = RadioVariant;\n\n  export namespace Group {\n    export type Props = RadioGroupProps;\n    export type StylesNames = RadioGroupStylesNames;\n    export type Factory = RadioGroupFactory;\n    export type ContextValue = RadioGroupContextValue;\n  }\n\n  export namespace Card {\n    export type Props = RadioCardProps;\n    export type StylesNames = RadioCardStylesNames;\n    export type Factory = RadioCardFactory;\n    export type CssVariables = RadioCardCssVariables;\n    export type ContextValue = RadioCardContextValue;\n  }\n\n  export namespace Indicator {\n    export type Props = RadioIndicatorProps;\n    export type StylesNames = RadioIndicatorStylesNames;\n    export type Factory = RadioIndicatorFactory;\n    export type CssVariables = RadioIndicatorCssVariables;\n    export type Variant = RadioIndicatorVariant;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqHA,MAAM,eAAe;CACnB,eAAe;CACf,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,MAAM;EACJ,gBAAgB,QAAQ,MAAM,aAAa;EAC3C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACtE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACnF,sBAAsB,YAClB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACN,qBAAqB,QAAQ,MAAM,kBAAkB;EACtD,EACF;EAEJ;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,MACA,OACA,eACA,aACA,OACA,QACA,OACA,SACA,UACA,cACA,MAAM,OAAO,WACb,SACA,WACA,UACA,KACA,YACA,iBACA,SACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,cAAc,KAAK,QAAQ;CACjC,MAAM,gBAAgB,MAAM,OAAO,OAAO;CAE1C,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,iBAAiB,MAAM,IAAI,UAAU,KAAK,QAAQ,KAAA;CAExD,MAAM,mBAAmB;EACvB,SAAS,kBAAkB;EAC3B,MAAM,KAAK,QAAQ,KAAK;EACxB,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEnB,UAAU,KAAK,YAAY;EAC5B;AAED,QACE,oBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU,iBAAiB;EACf;EACJ;EACE;EACV,iBAAe,kBAAkB,YAAY,KAAA;EACpC;EACT,KAAK;EACA;EACO;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK,EAAE,kBAAkB,eAAe;aAArE,CACE,oBAAC,KAAD;IACE,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;KAAS,CAAC;IACpD,GAAI;IACJ,GAAI;IACJ,WAAU;IACV,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;KAAiB;IAC7D,IAAI;IACJ,MAAK;IACL,CAAA,EACF,oBAAC,MAAD;IAAM,GAAI,UAAU,OAAO;IAAE,eAAA;IAAc,CAAA,CACvC;;EACM,CAAA;EAEhB;AAEF,MAAM,UAAUC;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,YAAY"}
+{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  RadioCard,\n  type RadioCardProps,\n  type RadioCardStylesNames,\n  type RadioCardFactory,\n  type RadioCardCssVariables,\n  type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n  RadioGroup,\n  RadioGroupContext,\n  type RadioGroupProps,\n  type RadioGroupStylesNames,\n  type RadioGroupFactory,\n  type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n  RadioIndicator,\n  type RadioIndicatorProps,\n  type RadioIndicatorStylesNames,\n  type RadioIndicatorFactory,\n  type RadioIndicatorCssVariables,\n  type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n          aria-describedby={describedBy}\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n  export type Props = RadioProps;\n  export type StylesNames = RadioStylesNames;\n  export type Factory = RadioFactory;\n  export type Variant = RadioVariant;\n\n  export namespace Group {\n    export type Props = RadioGroupProps;\n    export type StylesNames = RadioGroupStylesNames;\n    export type Factory = RadioGroupFactory;\n    export type ContextValue = RadioGroupContextValue;\n  }\n\n  export namespace Card {\n    export type Props = RadioCardProps;\n    export type StylesNames = RadioCardStylesNames;\n    export type Factory = RadioCardFactory;\n    export type CssVariables = RadioCardCssVariables;\n    export type ContextValue = RadioCardContextValue;\n  }\n\n  export namespace Indicator {\n    export type Props = RadioIndicatorProps;\n    export type StylesNames = RadioIndicatorStylesNames;\n    export type Factory = RadioIndicatorFactory;\n    export type CssVariables = RadioIndicatorCssVariables;\n    export type Variant = RadioIndicatorVariant;\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineRadius,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n  checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue | null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n  card: '--card-radius';\n};\n\nexport interface RadioCardProps\n  extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n  /** Checked state */\n  checked?: boolean;\n\n  /** Adds border to the root element */\n  withBorder?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Value of the radio, used with Radio.Group */\n  value?: string;\n\n  /** Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` */\n  name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n  props: RadioCardProps;\n  ref: HTMLButtonElement;\n  stylesNames: RadioCardStylesNames;\n  vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n  card: {\n    '--card-radius': getRadius(radius),\n  },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n  const props = useProps('RadioCard', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    checked,\n    mod,\n    withBorder,\n    value,\n    onClick,\n    name,\n    onKeyDown,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioCardFactory>({\n    name: 'RadioCard',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'card',\n  });\n\n  const { dir } = useDirection();\n  const ctx = use(RadioGroupContext);\n  const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value || false;\n  const _name = name || ctx?.name;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (!_name) {\n      return;\n    }\n\n    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n      event.preventDefault();\n\n      const siblings = Array.from(\n        document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n      );\n\n      const currentIndex = siblings.findIndex((element) => element === event.target);\n      const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n      const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        siblings[nextIndex].focus();\n        siblings[nextIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        siblings[prevIndex].focus();\n        siblings[prevIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowLeft') {\n        siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n        siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowRight') {\n        siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n        siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n      }\n    }\n  };\n\n  return (\n    <RadioCardContext value={{ checked: _checked }}>\n      <UnstyledButton\n        mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n        {...getStyles('card')}\n        {...others}\n        role=\"radio\"\n        aria-checked={_checked}\n        name={_name}\n        onClick={(event) => {\n          onClick?.(event);\n          ctx?.onChange(value || '');\n        }}\n        onKeyDown={handleKeyDown}\n      />\n    </RadioCardContext>\n  );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,mBAAmB,cAA4C,KAAK;AAgCjF,MAAM,eAAe,EACnB,YAAY,MACb;AAED,MAAM,eAAe,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiB,UAAU,OAAO,EACnC,EACF,EAAE;AAEH,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,EAAE,QAAQ,cAAc;CAC9B,MAAM,MAAM,IAAI,kBAAkB;CAClC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;AACvE,cAAY,MAAM;AAElB,MAAI,CAAC,MACH;AAGF,MAAI;GAAC;GAAa;GAAW;GAAa;GAAa,CAAC,SAAS,MAAM,YAAY,KAAK,EAAE;AACxF,SAAM,gBAAgB;GAEtB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,IAAI,CAChF;GAED,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,OAAO;GAC9E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;AAE9E,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,aAAS,WAAW,OAAO;AAC3B,aAAS,WAAW,OAAO;;AAG7B,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,aAAS,WAAW,OAAO;AAC3B,aAAS,WAAW,OAAO;;AAG7B,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;AACvD,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;;AAGzD,OAAI,MAAM,YAAY,SAAS,cAAc;AAC3C,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;AACvD,aAAS,QAAQ,QAAQ,YAAY,WAAW,OAAO;;;;AAK7D,QACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,UAAU;YAC5C,oBAAC,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;IAAU,EAAE,IAAI;GAC5D,GAAI,UAAU,OAAO;GACrB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;AAClB,cAAU,MAAM;AAChB,SAAK,SAAS,SAAS,GAAG;;GAE5B,WAAW;GACX,CAAA;EACe,CAAA;EAErB;AAEF,UAAU,cAAc;AACxB,UAAU,UAAUA;AACpB,UAAU,eAAe"}
+{"version":3,"file":"RadioCard.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  MantineRadius,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n  checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue | null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n  card: '--card-radius';\n};\n\nexport interface RadioCardProps\n  extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n  /** Checked state */\n  checked?: boolean;\n\n  /** Adds border to the root element */\n  withBorder?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Value of the radio, used with Radio.Group */\n  value?: string;\n\n  /** Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` */\n  name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n  props: RadioCardProps;\n  ref: HTMLButtonElement;\n  stylesNames: RadioCardStylesNames;\n  vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n  card: {\n    '--card-radius': getRadius(radius),\n  },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n  const props = useProps('RadioCard', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    checked,\n    mod,\n    withBorder,\n    value,\n    onClick,\n    name,\n    onKeyDown,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioCardFactory>({\n    name: 'RadioCard',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'card',\n  });\n\n  const { dir } = useDirection();\n  const ctx = use(RadioGroupContext);\n  const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value || false;\n  const _name = name || ctx?.name;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (!_name) {\n      return;\n    }\n\n    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n      event.preventDefault();\n\n      const siblings = Array.from(\n        document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n      );\n\n      const currentIndex = siblings.findIndex((element) => element === event.target);\n      const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n      const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        siblings[nextIndex].focus();\n        siblings[nextIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        siblings[prevIndex].focus();\n        siblings[prevIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowLeft') {\n        siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n        siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n      }\n\n      if (event.nativeEvent.code === 'ArrowRight') {\n        siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n        siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n      }\n    }\n  };\n\n  return (\n    <RadioCardContext value={{ checked: _checked }}>\n      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n      <UnstyledButton\n        mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n        {...getStyles('card')}\n        {...others}\n        role=\"radio\"\n        aria-checked={_checked}\n        name={_name}\n        onClick={(event) => {\n          onClick?.(event);\n          ctx?.onChange(value || '');\n        }}\n        onKeyDown={handleKeyDown}\n      />\n    </RadioCardContext>\n  );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,mBAAmB,cAA4C,IAAI;AAgChF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiB,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;EACvE,YAAY,KAAK;EAEjB,IAAI,CAAC,OACH;EAGF,IAAI;GAAC;GAAa;GAAW;GAAa;EAAY,EAAE,SAAS,MAAM,YAAY,IAAI,GAAG;GACxF,MAAM,eAAe;GAErB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,GAAG,CAChF;GAEA,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,MAAM;GAC7E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;GAE9E,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,WAAW,MAAM;IAC1B,SAAS,WAAW,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,SAAS,WAAW,MAAM;IAC1B,SAAS,WAAW,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;GACxD;GAEA,IAAI,MAAM,YAAY,SAAS,cAAc;IAC3C,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,WAAW,MAAM;GACxD;EACF;CACF;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,SAAS;YAE3C,oBAAC,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;GAAS,GAAG,GAAG;GAC3D,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;GAC3B;GACA,WAAW;EACZ,CAAA;CACe,CAAA;AAEtB,CAAC;AAED,UAAU,cAAc;AACxB,UAAU,UAAUA;AACpB,UAAU,eAAe"}