@mantine/core 9.5.1 → 9.6.0

package/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","names":["createVarsResolver","getSize","getSpacing","factory","useProps","useStyles","parseColor","convertHsvaTo","isColorValid","ColorPickerContext","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches","classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\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 the user stops dragging one of the sliders or changes the value with keyboard */\n  onChangeEnd?: (value: string) => void;\n\n  /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */\n  format?: ColorFormat;\n\n  /** If `false`, the component displays only swatches @default true */\n  withPicker?: boolean;\n\n  /** A list of colors used to display swatches list below the color picker */\n  swatches?: string[];\n\n  /** Number of swatches per row @default 7 */\n  swatchesPerRow?: number;\n\n  /** Component size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, the component takes 100% width of its container @default false */\n  fullWidth?: boolean;\n}\n\nexport interface ColorPickerProps\n  extends\n    BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?: (color: string) => void;\n\n  /** Hidden input `name` attribute, if not set, the input will not be rendered */\n  name?: string;\n\n  /** Props spread to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  swatchesPerRow: 7,\n  withPicker: true,\n  focusable: true,\n  size: 'md',\n  __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n  wrapper: {\n    '--cp-preview-size': getSize(size, 'cp-preview-size'),\n    '--cp-width': getSize(size, 'cp-width'),\n    '--cp-body-spacing': getSpacing(size),\n    '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n    '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n    '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n  },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format = 'hex',\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    mod,\n    attributes,\n    name,\n    hiddenInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format || 'hex');\n  const valueRef = useRef<string>('');\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current, next);\n      return next;\n    });\n\n    setValue(valueRef.current);\n  };\n\n  useDidUpdate(() => {\n    if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n      setParsed(parseColor(value));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format || 'hex';\n    setValue(convertHsvaTo(formatRef.current, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerContext value={{ getStyles, unstyled }}>\n      <Box\n        {...getStyles('wrapper')}\n        size={size}\n        mod={[{ 'full-width': fullWidth }, mod]}\n        {...others}\n      >\n        {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size=\"var(--cp-preview-size)\"\n                  {...getStyles('preview')}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            value={_value}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerContext>\n  );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n  export type Props = ColorPickerProps;\n  export type CssVariables = ColorPickerCssVariables;\n  export type Factory = ColorPickerFactory;\n  export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","names":["createVarsResolver","getSize","getSpacing","factory","useProps","useStyles","useRef","useUncontrolled","useState","parseColor","convertHsvaTo","isColorValid","ColorPickerContext","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches","classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\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 the user stops dragging one of the sliders or changes the value with keyboard */\n  onChangeEnd?: (value: string) => void;\n\n  /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */\n  format?: ColorFormat;\n\n  /** If `false`, the component displays only swatches @default true */\n  withPicker?: boolean;\n\n  /** A list of colors used to display swatches list below the color picker */\n  swatches?: string[];\n\n  /** Number of swatches per row @default 7 */\n  swatchesPerRow?: number;\n\n  /** Component size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, the component takes 100% width of its container @default false */\n  fullWidth?: boolean;\n}\n\nexport interface ColorPickerProps\n  extends\n    BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?: (color: string) => void;\n\n  /** Hidden input `name` attribute, if not set, the input will not be rendered */\n  name?: string;\n\n  /** Props spread to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  swatchesPerRow: 7,\n  withPicker: true,\n  focusable: true,\n  size: 'md',\n  __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n  wrapper: {\n    '--cp-preview-size': getSize(size, 'cp-preview-size'),\n    '--cp-width': getSize(size, 'cp-width'),\n    '--cp-body-spacing': getSpacing(size),\n    '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n    '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n    '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n  },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format = 'hex',\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    mod,\n    attributes,\n    name,\n    hiddenInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format || 'hex');\n  const valueRef = useRef<string>('');\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current, next);\n      return next;\n    });\n\n    setValue(valueRef.current);\n  };\n\n  useDidUpdate(() => {\n    if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n      setParsed(parseColor(value));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format || 'hex';\n    setValue(convertHsvaTo(formatRef.current, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerContext value={{ getStyles, unstyled }}>\n      <Box\n        {...getStyles('wrapper')}\n        size={size}\n        mod={[{ 'full-width': fullWidth }, mod]}\n        {...others}\n      >\n        {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size=\"var(--cp-preview-size)\"\n                  {...getStyles('preview')}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            value={_value}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerContext>\n  );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n  export type Props = ColorPickerProps;\n  export type CssVariables = ColorPickerCssVariables;\n  export type Factory = ColorPickerFactory;\n  export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyHA,MAAM,eAAe;CACnB,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACX,MAAM;CACN,kBAAkB;AACpB;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,MAAM,sBAAsB,EAC5F,SAAS;CACP,qBAAqBC,iBAAAA,QAAQ,MAAM,iBAAiB;CACpD,cAAcA,iBAAAA,QAAQ,MAAM,UAAU;CACtC,qBAAqBC,iBAAAA,WAAW,IAAI;CACpC,oBAAoB,GAAG,MAAM,eAAgB;CAC7C,mBAAmBD,iBAAAA,QAAQ,MAAM,eAAe;CAChD,0BAA0BA,iBAAAA,QAAQ,MAAM,sBAAsB;AAChE,EACF,EAAE;AAEF,MAAa,cAAcE,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SAAS,OACT,OACA,cACA,UACA,aACA,YACA,MACA,iBACA,UACA,YACA,WACA,UACA,gBACA,WACA,oBACA,kBACA,KACA,YACA,MACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,aAAA,GAAYC,MAAAA,OAAAA,CAAO,UAAU,KAAK;CACxC,MAAM,YAAA,GAAWA,MAAAA,OAAAA,CAAe,EAAE;CAClC,MAAM,mBAAA,GAAkBA,MAAAA,OAAAA,CAAe,EAAE;CACzC,MAAM,kBAAA,GAAiBA,MAAAA,OAAAA,CAAO,KAAK;CACnC,MAAM,YAAY,WAAW,UAAU,WAAW,UAAU,WAAW;CAEvE,MAAM,CAAC,QAAQ,UAAU,eAAA,GAAcC,eAAAA,gBAAAA,CAAgB;EACrD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAoBC,gBAAAA,WAAW,MAAM,CAAC;CAElE,MAAM,uBAAuB;EAC3B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,eAAe,UAAU;CAC3B;CAEA,MAAM,sBAAsB;EAC1B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,gBAAgB,UAAU,OAAO,iBAAiB;GAChD,eAAe,UAAU;EAC3B,GAAG,GAAG;CACR;CAEA,MAAM,gBAAgB,UAA8B;EAClD,WAAW,YAAY;GACrB,MAAM,OAAO;IAAE,GAAG;IAAS,GAAG;GAAM;GACpC,SAAS,UAAUC,mBAAAA,cAAc,UAAU,SAAS,IAAI;GACxD,OAAO;EACT,CAAC;EAED,SAAS,SAAS,OAAO;CAC3B;CAEA,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,IAAI,OAAO,UAAU,YAAYC,gBAAAA,aAAa,KAAK,KAAK,CAAC,eAAe,SACtE,UAAUF,gBAAAA,WAAW,KAAK,CAAC;CAE/B,GAAG,CAAC,KAAK,CAAC;CAEV,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,UAAU,UAAU,UAAU;EAC9B,SAASC,mBAAAA,cAAc,UAAU,SAAS,MAAM,CAAC;CACnD,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,4BAAAA,oBAAD;EAAoB,OAAO;GAAE;GAAW;EAAS;EAC/C,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;GACE,GAAI,UAAU,SAAS;GACjB;GACN,KAAK,CAAC,EAAE,cAAc,UAAU,GAAG,GAAG;GACtC,GAAI;GAJN,UAAA;IAMG,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO;KAAQ,GAAI;IAAmB,CAAA;IAE/E,cACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KACE,OAAO;KACP,UAAU;KACV,cAAc,EAAE,GAAG,QACjB,cAAcJ,mBAAAA,cAAc,UAAU,SAAS;MAAE,GAAG;MAAW;MAAO;KAAG,CAAC,CAAC;KAE7E,OAAO;KACD;KACK;KACM;KACjB,cAAc;KACd,YAAY;IACb,CAAA,GAED,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,GAAI,UAAU,MAAM;KAAzB,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,GAAI,UAAU,SAAS;MAA5B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACK,kBAAAA,WAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MACZ,cAAcL,mBAAAA,cAAc,UAAU,SAAS;QAAE,GAAG;QAAQ;OAAE,CAAC,CAAC;OAE5D;OACK;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,GAEA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACM,oBAAAA,aAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MAAM;QAClB,cAAcN,mBAAAA,cAAc,UAAU,SAAS;SAAE,GAAG;SAAQ;QAAE,CAAC,CAAC;OAClE;OACM;OACN,OAAOA,mBAAAA,cAAc,OAAO,MAAM;OACvB;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,CAEA;KAEJ,CAAA,GAAA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACO,oBAAAA,aAAD;MACE,OAAO;MACP,QAAO;MACP,MAAK;MACL,GAAI,UAAU,SAAS;KACxB,CAAA,CAEA;IACL,CAAA,CAAA,EAAA,CAAA;IAGH,MAAM,QAAQ,QAAQ,KACrB,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;KACE,MAAM;KACU;KACL;KACD;KACV,OAAO;KACP,cAAc,UAAU;MACtB,MAAM,iBAAiBR,mBAAAA,cAAc,QAAQD,gBAAAA,WAAW,KAAK,CAAC;MAC9D,qBAAqB,cAAc;MACnC,cAAc,cAAc;MAC5B,IAAI,CAAC,YACH,UAAUA,gBAAAA,WAAW,KAAK,CAAC;KAE/B;IACD,CAAA;GAEA;;CACa,CAAA;AAExB,CAAC;AAED,YAAY,UAAUU,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/cjs/components/ColorPicker/ColorPicker.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.context.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { GetStylesApi } from '../../core';\nimport type { ColorPickerFactory } from './ColorPicker';\n\ninterface ColorPickerContextValue {\n  getStyles: GetStylesApi<ColorPickerFactory>;\n  unstyled: boolean | undefined;\n}\n\nexport const ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n"],"mappings":";;AASA,MAAa,sBAAA,kBAAA,CAAA,CAAA,cAAA,CAAmE,IAAI"}
+{"version":3,"file":"ColorPicker.context.cjs","names":["createContext"],"sources":["../../../src/components/ColorPicker/ColorPicker.context.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { GetStylesApi } from '../../core';\nimport type { ColorPickerFactory } from './ColorPicker';\n\ninterface ColorPickerContextValue {\n  getStyles: GetStylesApi<ColorPickerFactory>;\n  unstyled: boolean | undefined;\n}\n\nexport const ColorPickerContext = createContext<ColorPickerContextValue | null>(null);\n"],"mappings":";;AASA,MAAa,sBAAA,kBAAqBA,CAAAA,CAAAA,cAAAA,CAA8C,IAAI"}

package/cjs/components/ColorPicker/ColorSlider/ColorSlider.cjs

@@ -69,12 +69,10 @@ const ColorSlider = require_factory.factory((_props) => {
 					y: position.y
 				});
 				break;
-			case "ArrowLeft":
-				handleArrow(event, {
-					x: position.x - .05,
-					y: position.y
-				});
-				break;
+			case "ArrowLeft": handleArrow(event, {
+				x: position.x - .05,
+				y: position.y
+			});
 		}
 	};
 	const layers = overlays.map((overlay, index) => /* @__PURE__ */ (0, react.createElement)("div", {

package/cjs/components/ColorPicker/ColorSlider/ColorSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.cjs","names":["factory","useProps","useStyles","ColorPickerContext","useMantineTheme","Box","Thumb","rem","classes"],"sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { use, useRef, useState } from 'react';\nimport {\n  clampUseMovePosition,\n  useDidUpdate,\n  useMergedRef,\n  useMove,\n  UseMovePosition,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { Thumb } from '../Thumb/Thumb';\nimport classes from '../ColorPicker.module.css';\n\nexport type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n  /** Controlled component value */\n  value: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging the slider or uses keyboard to change value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called when user starts dragging the slider */\n  onScrubStart?: () => void;\n\n  /** Called when user stops dragging the slider */\n  onScrubEnd?: () => void;\n\n  /** Slider size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, slider thumb can be focused @default true */\n  focusable?: boolean;\n}\n\nexport interface ColorSliderProps\n  extends\n    BoxProps,\n    StylesApiProps<ColorSliderFactory>,\n    __ColorSliderProps,\n    ElementProps<'div', 'onChange'> {\n  __staticSelector?: string;\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport type ColorSliderOptions = Omit<\n  ColorSliderProps,\n  'maxValue' | 'overlays' | 'round' | 'thumbColor'\n>;\n\nexport type ColorSliderFactory = Factory<{\n  props: ColorSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorSliderStylesNames;\n}>;\n\nexport const ColorSlider = factory<ColorSliderFactory>((_props) => {\n  const props = useProps('ColorSlider', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onChange,\n    onChangeEnd,\n    maxValue,\n    round,\n    size = 'md',\n    focusable = true,\n    value,\n    overlays,\n    thumbColor = 'transparent',\n    onScrubStart,\n    onScrubEnd,\n    __staticSelector = 'ColorPicker',\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<ColorSliderFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'slider',\n  });\n\n  const ctxGetStyles = use(ColorPickerContext)?.getStyles;\n  const getStyles = ctxGetStyles || _getStyles;\n\n  const theme = useMantineTheme();\n  const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n  const positionRef = useRef(position);\n  const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n  const { ref: sliderRef } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange?.(getChangeValue(x));\n    },\n    {\n      onScrubEnd: () => {\n        const { x } = positionRef.current;\n        onChangeEnd?.(getChangeValue(x));\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useDidUpdate(() => {\n    setPosition({ y: 0, x: value / maxValue });\n  }, [value]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange?.(getChangeValue(_position.x));\n    onChangeEnd?.(getChangeValue(_position.x));\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  const layers = overlays.map((overlay, index) => (\n    <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n  ));\n\n  return (\n    <Box\n      {...others}\n      ref={useMergedRef(sliderRef, ref)}\n      {...getStyles('slider')}\n      size={size}\n      role=\"slider\"\n      aria-valuenow={value}\n      aria-valuemax={maxValue}\n      aria-valuemin={0}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      data-focus-ring={theme.focusRing}\n      __vars={{\n        '--cp-thumb-size': `var(--cp-thumb-size-${size})`,\n      }}\n    >\n      {layers}\n\n      <Thumb\n        position={position}\n        {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n      />\n    </Box>\n  );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\nColorSlider.classes = classes;\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,cAAcA,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,aACA,UACA,OACA,OAAO,MACP,YAAY,MACZ,OACA,UACA,aAAa,eACb,cACA,YACA,mBAAmB,eACnB,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA8B;EAC/C,MAAM;EACN,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAGD,MAAM,aAAA,GAAA,MAAA,IAAA,CADmBC,4BAAAA,kBAAkB,CAAC,EAAE,aACZ;CAElC,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,SAAA,CAAwB;EAAE,GAAG;EAAG,GAAG,QAAQ;CAAS,CAAC;CACtE,MAAM,eAAA,GAAA,MAAA,OAAA,CAAqB,QAAQ;CACnC,MAAM,kBAAkB,QAAiB,QAAQ,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM;CACpF,MAAM,EAAE,KAAK,eAAA,GAAA,eAAA,QAAA,EACV,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,WAAW,eAAe,CAAC,CAAC;CAC9B,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,MAAM,YAAY;GAC1B,cAAc,eAAe,CAAC,CAAC;GAC/B,aAAa;EACf;EACA;CACF,CACF;CAEA,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,YAAY;GAAE,GAAG;GAAG,GAAG,QAAQ;EAAS,CAAC;CAC3C,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,aAAA,GAAA,eAAA,qBAAA,CAAiC,GAAG;EAC1C,WAAW,eAAe,UAAU,CAAC,CAAC;EACtC,cAAc,eAAe,UAAU,CAAC,CAAC;CAC3C;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;EAEJ;CACF;CAEA,MAAM,SAAS,SAAS,KAAK,SAAS,UACpC,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;EAAK,GAAI,UAAU,eAAe;EAAG,OAAO;EAAS,KAAK;CAAQ,CAAA,CACnE;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,MAAA,GAAA,eAAA,aAAA,CAAkB,WAAW,GAAG;EAChC,GAAI,UAAU,QAAQ;EAChB;EACN,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,UAAU,YAAY,IAAI;EAC1B,WAAW;EACX,mBAAiB,MAAM;EACvB,QAAQ,EACN,mBAAmB,uBAAuB,KAAK,GACjD;YAdF,CAgBG,QAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;GACY;GACV,GAAI,UAAU,SAAS,EAAE,OAAO;IAAE,KAAKC,YAAAA,IAAI,CAAC;IAAG,YAAY;GAAW,EAAE,CAAC;EAC1E,CAAA,CACE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUC,2BAAAA"}
+{"version":3,"file":"ColorSlider.cjs","names":["factory","useProps","useStyles","use","ColorPickerContext","useMantineTheme","useState","useRef","useMove","clampUseMovePosition","Box","useMergedRef","Thumb","rem","classes"],"sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { use, useRef, useState } from 'react';\nimport {\n  clampUseMovePosition,\n  useDidUpdate,\n  useMergedRef,\n  useMove,\n  UseMovePosition,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { Thumb } from '../Thumb/Thumb';\nimport classes from '../ColorPicker.module.css';\n\nexport type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n  /** Controlled component value */\n  value: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging the slider or uses keyboard to change value */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called when user starts dragging the slider */\n  onScrubStart?: () => void;\n\n  /** Called when user stops dragging the slider */\n  onScrubEnd?: () => void;\n\n  /** Slider size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, slider thumb can be focused @default true */\n  focusable?: boolean;\n}\n\nexport interface ColorSliderProps\n  extends\n    BoxProps,\n    StylesApiProps<ColorSliderFactory>,\n    __ColorSliderProps,\n    ElementProps<'div', 'onChange'> {\n  __staticSelector?: string;\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport type ColorSliderOptions = Omit<\n  ColorSliderProps,\n  'maxValue' | 'overlays' | 'round' | 'thumbColor'\n>;\n\nexport type ColorSliderFactory = Factory<{\n  props: ColorSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorSliderStylesNames;\n}>;\n\nexport const ColorSlider = factory<ColorSliderFactory>((_props) => {\n  const props = useProps('ColorSlider', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onChange,\n    onChangeEnd,\n    maxValue,\n    round,\n    size = 'md',\n    focusable = true,\n    value,\n    overlays,\n    thumbColor = 'transparent',\n    onScrubStart,\n    onScrubEnd,\n    __staticSelector = 'ColorPicker',\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<ColorSliderFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'slider',\n  });\n\n  const ctxGetStyles = use(ColorPickerContext)?.getStyles;\n  const getStyles = ctxGetStyles || _getStyles;\n\n  const theme = useMantineTheme();\n  const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n  const positionRef = useRef(position);\n  const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n  const { ref: sliderRef } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange?.(getChangeValue(x));\n    },\n    {\n      onScrubEnd: () => {\n        const { x } = positionRef.current;\n        onChangeEnd?.(getChangeValue(x));\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useDidUpdate(() => {\n    setPosition({ y: 0, x: value / maxValue });\n  }, [value]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange?.(getChangeValue(_position.x));\n    onChangeEnd?.(getChangeValue(_position.x));\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  const layers = overlays.map((overlay, index) => (\n    <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n  ));\n\n  return (\n    <Box\n      {...others}\n      ref={useMergedRef(sliderRef, ref)}\n      {...getStyles('slider')}\n      size={size}\n      role=\"slider\"\n      aria-valuenow={value}\n      aria-valuemax={maxValue}\n      aria-valuemin={0}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      data-focus-ring={theme.focusRing}\n      __vars={{\n        '--cp-thumb-size': `var(--cp-thumb-size-${size})`,\n      }}\n    >\n      {layers}\n\n      <Thumb\n        position={position}\n        {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n      />\n    </Box>\n  );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\nColorSlider.classes = classes;\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,cAAcA,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,aACA,UACA,OACA,OAAO,MACP,YAAY,MACZ,OACA,UACA,aAAa,eACb,cACA,YACA,mBAAmB,eACnB,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA8B;EAC/C,MAAM;EACN,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAGD,MAAM,aAAA,GADeC,MAAAA,IAAAA,CAAIC,4BAAAA,kBAAkB,CAAC,EAAE,aACZ;CAElC,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,CAAC,UAAU,gBAAA,GAAeC,MAAAA,SAAAA,CAAS;EAAE,GAAG;EAAG,GAAG,QAAQ;CAAS,CAAC;CACtE,MAAM,eAAA,GAAcC,MAAAA,OAAAA,CAAO,QAAQ;CACnC,MAAM,kBAAkB,QAAiB,QAAQ,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM;CACpF,MAAM,EAAE,KAAK,eAAA,GAAcC,eAAAA,QAAAA,EACxB,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,WAAW,eAAe,CAAC,CAAC;CAC9B,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,MAAM,YAAY;GAC1B,cAAc,eAAe,CAAC,CAAC;GAC/B,aAAa;EACf;EACA;CACF,CACF;CAEA,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,YAAY;GAAE,GAAG;GAAG,GAAG,QAAQ;EAAS,CAAC;CAC3C,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,aAAA,GAAYC,eAAAA,qBAAAA,CAAqB,GAAG;EAC1C,WAAW,eAAe,UAAU,CAAC,CAAC;EACtC,cAAc,eAAe,UAAU,CAAC,CAAC;CAC3C;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK,aACH,YAAY,OAAO;IAAE,GAAG,SAAS,IAAI;IAAM,GAAG,SAAS;GAAE,CAAC;EAG9D;CACF;CAEA,MAAM,SAAS,SAAS,KAAK,SAAS,UACpC,iBAAA,GAAA,MAAA,cAAA,CAAC,OAAD;EAAK,GAAI,UAAU,eAAe;EAAG,OAAO;EAAS,KAAK;CAAQ,CAAA,CACnE;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,MAAA,GAAKC,eAAAA,aAAAA,CAAa,WAAW,GAAG;EAChC,GAAI,UAAU,QAAQ;EAChB;EACN,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,UAAU,YAAY,IAAI;EAC1B,WAAW;EACX,mBAAiB,MAAM;EACvB,QAAQ,EACN,mBAAmB,uBAAuB,KAAK,GACjD;EAdF,UAAA,CAgBG,QAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;GACY;GACV,GAAI,UAAU,SAAS,EAAE,OAAO;IAAE,KAAKC,YAAAA,IAAI,CAAC;IAAG,YAAY;GAAW,EAAE,CAAC;EAC1E,CAAA,CACE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUC,2BAAAA"}

package/cjs/components/ColorPicker/Saturation/Saturation.cjs

@@ -72,12 +72,10 @@ function Saturation({ className, onChange, onChangeEnd, value, saturationLabel,
 					y: position.y
 				});
 				break;
-			case "ArrowLeft":
-				handleArrow(event, {
-					x: position.x - .05,
-					y: position.y
-				});
-				break;
+			case "ArrowLeft": handleArrow(event, {
+				x: position.x - .05,
+				y: position.y
+			});
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {

package/cjs/components/ColorPicker/Saturation/Saturation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Saturation.cjs","names":["ColorPickerContext","Box","convertHsvaTo","Thumb"],"sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import { use, useEffect, useRef, useState } from 'react';\nimport { clampUseMovePosition, useMove, UseMovePosition } from '@mantine/hooks';\nimport { Box, ElementProps, MantineSize } from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { HsvaColor } from '../ColorPicker.types';\nimport { convertHsvaTo } from '../converters';\nimport { Thumb } from '../Thumb/Thumb';\n\nexport interface SaturationProps extends ElementProps<'div', 'onChange'> {\n  value: HsvaColor;\n  onChange: (color: Partial<HsvaColor>) => void;\n  onChangeEnd: (color: Partial<HsvaColor>) => void;\n  onScrubStart?: () => void;\n  onScrubEnd?: () => void;\n  saturationLabel?: string;\n  size: MantineSize | (string & {});\n  color: string;\n  focusable?: boolean;\n}\n\nexport function Saturation({\n  className,\n  onChange,\n  onChangeEnd,\n  value,\n  saturationLabel,\n  focusable = true,\n  size,\n  color,\n  onScrubStart,\n  onScrubEnd,\n  ...others\n}: SaturationProps) {\n  const { getStyles } = use(ColorPickerContext)!;\n\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n  const positionRef = useRef(position);\n\n  const { ref } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n    },\n    {\n      onScrubEnd: () => {\n        const { x, y } = positionRef.current;\n        onChangeEnd({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useEffect(() => {\n    setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n  }, [value.s, value.v]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n    onChangeEnd({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowUp': {\n        handleArrow(event, { y: position.y - 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowDown': {\n        handleArrow(event, { y: position.y + 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...getStyles('saturation')}\n      ref={ref as any}\n      {...others}\n      role=\"slider\"\n      aria-label={saturationLabel}\n      aria-valuenow={position.x}\n      aria-valuetext={convertHsvaTo('rgba', value)}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },\n        })}\n      />\n\n      <Thumb position={position} {...getStyles('thumb', { style: { backgroundColor: color } })} />\n    </Box>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"mappings":"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"}
+{"version":3,"file":"Saturation.cjs","names":["use","ColorPickerContext","useState","useRef","useMove","clampUseMovePosition","Box","convertHsvaTo","Thumb"],"sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import { use, useEffect, useRef, useState } from 'react';\nimport { clampUseMovePosition, useMove, UseMovePosition } from '@mantine/hooks';\nimport { Box, ElementProps, MantineSize } from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { HsvaColor } from '../ColorPicker.types';\nimport { convertHsvaTo } from '../converters';\nimport { Thumb } from '../Thumb/Thumb';\n\nexport interface SaturationProps extends ElementProps<'div', 'onChange'> {\n  value: HsvaColor;\n  onChange: (color: Partial<HsvaColor>) => void;\n  onChangeEnd: (color: Partial<HsvaColor>) => void;\n  onScrubStart?: () => void;\n  onScrubEnd?: () => void;\n  saturationLabel?: string;\n  size: MantineSize | (string & {});\n  color: string;\n  focusable?: boolean;\n}\n\nexport function Saturation({\n  className,\n  onChange,\n  onChangeEnd,\n  value,\n  saturationLabel,\n  focusable = true,\n  size,\n  color,\n  onScrubStart,\n  onScrubEnd,\n  ...others\n}: SaturationProps) {\n  const { getStyles } = use(ColorPickerContext)!;\n\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n  const positionRef = useRef(position);\n\n  const { ref } = useMove(\n    ({ x, y }) => {\n      positionRef.current = { x, y };\n      onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n    },\n    {\n      onScrubEnd: () => {\n        const { x, y } = positionRef.current;\n        onChangeEnd({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\n        onScrubEnd?.();\n      },\n      onScrubStart,\n    }\n  );\n\n  useEffect(() => {\n    setPosition({ x: value.s / 100, y: 1 - value.v / 100 });\n  }, [value.s, value.v]);\n\n  const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n    event.preventDefault();\n    const _position = clampUseMovePosition(pos);\n    onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n    onChangeEnd({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowUp': {\n        handleArrow(event, { y: position.y - 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowDown': {\n        handleArrow(event, { y: position.y + 0.05, x: position.x });\n        break;\n      }\n\n      case 'ArrowRight': {\n        handleArrow(event, { x: position.x + 0.05, y: position.y });\n        break;\n      }\n\n      case 'ArrowLeft': {\n        handleArrow(event, { x: position.x - 0.05, y: position.y });\n        break;\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...getStyles('saturation')}\n      ref={ref as any}\n      {...others}\n      role=\"slider\"\n      aria-label={saturationLabel}\n      aria-valuenow={position.x}\n      aria-valuetext={convertHsvaTo('rgba', value)}\n      tabIndex={focusable ? 0 : -1}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundColor: `hsl(${value.h}, 100%, 50%)` },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(90deg, #fff, transparent)' },\n        })}\n      />\n\n      <div\n        {...getStyles('saturationOverlay', {\n          style: { backgroundImage: 'linear-gradient(0deg, #000, transparent)' },\n        })}\n      />\n\n      <Thumb position={position} {...getStyles('thumb', { style: { backgroundColor: color } })} />\n    </Box>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"mappings":"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"}

package/cjs/components/ColorPicker/Swatches/Swatches.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.cjs","names":["ColorPickerContext","ColorSwatch","CheckIcon","luminance","Box"],"sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import { use } from 'react';\nimport { Box, ElementProps, luminance } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ColorSwatch } from '../../ColorSwatch';\nimport { ColorPickerContext } from '../ColorPicker.context';\n\nexport interface SwatchesProps extends ElementProps<'div'> {\n  size?: string | number;\n  data: string[];\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  value?: string;\n  onChangeEnd?: (color: string) => void;\n  setValue: (value: string) => void;\n}\n\nexport function Swatches({\n  className,\n  datatype,\n  setValue,\n  onChangeEnd,\n  size,\n  focusable,\n  data,\n  swatchesPerRow,\n  value,\n  ...others\n}: SwatchesProps) {\n  const ctx = use(ColorPickerContext)!;\n\n  const colors = data.map((color, index) => (\n    <ColorSwatch\n      {...ctx.getStyles('swatch')}\n      unstyled={ctx.unstyled}\n      component=\"button\"\n      type=\"button\"\n      color={color}\n      key={index}\n      radius=\"sm\"\n      onClick={() => {\n        setValue(color);\n        onChangeEnd?.(color);\n      }}\n      aria-label={color}\n      tabIndex={focusable ? 0 : -1}\n      data-swatch\n    >\n      {value === color && (\n        <CheckIcon size=\"35%\" color={luminance(color) < 0.5 ? 'white' : 'black'} />\n      )}\n    </ColorSwatch>\n  ));\n\n  return (\n    <Box {...ctx.getStyles('swatches')} {...others}>\n      {colors}\n    </Box>\n  );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,SAAS,EACvB,WACA,UACA,UACA,aACA,MACA,WACA,MACA,gBACA,OACA,GAAG,UACa;CAChB,MAAM,OAAA,GAAA,MAAA,IAAA,CAAUA,4BAAAA,kBAAkB;CAElC,MAAM,SAAS,KAAK,KAAK,OAAO,UAC9B,iBAAA,GAAA,MAAA,cAAA,CAACC,oBAAAA,aAAD;EACE,GAAI,IAAI,UAAU,QAAQ;EAC1B,UAAU,IAAI;EACd,WAAU;EACV,MAAK;EACE;EACP,KAAK;EACL,QAAO;EACP,eAAe;GACb,SAAS,KAAK;GACd,cAAc,KAAK;EACrB;EACA,cAAY;EACZ,UAAU,YAAY,IAAI;EAC1B,eAAA;CAKW,GAHV,UAAU,SACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD;EAAW,MAAK;EAAM,OAAOC,kBAAAA,UAAU,KAAK,IAAI,KAAM,UAAU;CAAU,CAAA,CAEjE,CACd;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,IAAI,UAAU,UAAU;EAAG,GAAI;YACrC;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}
+{"version":3,"file":"Swatches.cjs","names":["use","ColorPickerContext","ColorSwatch","CheckIcon","luminance","Box"],"sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import { use } from 'react';\nimport { Box, ElementProps, luminance } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ColorSwatch } from '../../ColorSwatch';\nimport { ColorPickerContext } from '../ColorPicker.context';\n\nexport interface SwatchesProps extends ElementProps<'div'> {\n  size?: string | number;\n  data: string[];\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  value?: string;\n  onChangeEnd?: (color: string) => void;\n  setValue: (value: string) => void;\n}\n\nexport function Swatches({\n  className,\n  datatype,\n  setValue,\n  onChangeEnd,\n  size,\n  focusable,\n  data,\n  swatchesPerRow,\n  value,\n  ...others\n}: SwatchesProps) {\n  const ctx = use(ColorPickerContext)!;\n\n  const colors = data.map((color, index) => (\n    <ColorSwatch\n      {...ctx.getStyles('swatch')}\n      unstyled={ctx.unstyled}\n      component=\"button\"\n      type=\"button\"\n      color={color}\n      key={index}\n      radius=\"sm\"\n      onClick={() => {\n        setValue(color);\n        onChangeEnd?.(color);\n      }}\n      aria-label={color}\n      tabIndex={focusable ? 0 : -1}\n      data-swatch\n    >\n      {value === color && (\n        <CheckIcon size=\"35%\" color={luminance(color) < 0.5 ? 'white' : 'black'} />\n      )}\n    </ColorSwatch>\n  ));\n\n  return (\n    <Box {...ctx.getStyles('swatches')} {...others}>\n      {colors}\n    </Box>\n  );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,SAAS,EACvB,WACA,UACA,UACA,aACA,MACA,WACA,MACA,gBACA,OACA,GAAG,UACa;CAChB,MAAM,OAAA,GAAMA,MAAAA,IAAAA,CAAIC,4BAAAA,kBAAkB;CAElC,MAAM,SAAS,KAAK,KAAK,OAAO,UAC9B,iBAAA,GAAA,MAAA,cAAA,CAACC,oBAAAA,aAAD;EACE,GAAI,IAAI,UAAU,QAAQ;EAC1B,UAAU,IAAI;EACd,WAAU;EACV,MAAK;EACE;EACP,KAAK;EACL,QAAO;EACP,eAAe;GACb,SAAS,KAAK;GACd,cAAc,KAAK;EACrB;EACA,cAAY;EACZ,UAAU,YAAY,IAAI;EAC1B,eAAA;CAKW,GAHV,UAAU,SACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD;EAAW,MAAK;EAAM,OAAOC,kBAAAA,UAAU,KAAK,IAAI,KAAM,UAAU;CAAU,CAAA,CAEjE,CACd;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,IAAI,UAAU,UAAU;EAAG,GAAI;EACrC,UAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

package/cjs/components/ColorSwatch/ColorSwatch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.cjs","names":["createVarsResolver","getRadius","rem","polymorphicFactory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './ColorSwatch.module.css';\n\nexport type ColorSwatchStylesNames =\n  | 'root'\n  | 'alphaOverlay'\n  | 'shadowOverlay'\n  | 'colorOverlay'\n  | 'childrenOverlay';\n\nexport type ColorSwatchCssVariables = {\n  root: '--cs-radius' | '--cs-size';\n};\n\nexport interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {\n  /** Valid CSS color to display */\n  color: string;\n\n  /** Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 */\n  size?: React.CSSProperties['width'];\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 */\n  radius?: MantineRadius;\n\n  /** If set, the swatch has inner `box-shadow` @default true */\n  withShadow?: boolean;\n\n  /** Children inside the swatch */\n  children?: React.ReactNode;\n}\n\nexport type ColorSwatchFactory = PolymorphicFactory<{\n  props: ColorSwatchProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: ColorSwatchStylesNames;\n  vars: ColorSwatchCssVariables;\n}>;\n\nconst defaultProps = {\n  withShadow: true,\n} satisfies Partial<ColorSwatchProps>;\n\nconst varsResolver = createVarsResolver<ColorSwatchFactory>((_, { radius, size }) => ({\n  root: {\n    '--cs-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cs-size': rem(size),\n  },\n}));\n\nexport const ColorSwatch = polymorphicFactory<ColorSwatchFactory>((_props) => {\n  const props = useProps('ColorSwatch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    radius,\n    withShadow,\n    children,\n    attributes,\n    ...others\n  } = useProps('ColorSwatch', defaultProps, props);\n\n  const getStyles = useStyles<ColorSwatchFactory>({\n    name: 'ColorSwatch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box {...getStyles('root', { focusable: true })} {...others}>\n      <span {...getStyles('alphaOverlay')} />\n      {withShadow && <span {...getStyles('shadowOverlay')} />}\n      <span {...getStyles('colorOverlay', { style: { backgroundColor: color } })} />\n      <span {...getStyles('childrenOverlay')}>{children}</span>\n    </Box>\n  );\n});\n\nColorSwatch.classes = classes;\nColorSwatch.varsResolver = varsResolver;\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n\nexport namespace ColorSwatch {\n  export type Props = ColorSwatchProps;\n  export type CssVariables = ColorSwatchCssVariables;\n  export type Factory = ColorSwatchFactory;\n  export type StylesNames = ColorSwatchStylesNames;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,QAAQ,YAAY,EACpF,MAAM;CACJ,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CAClE,aAAaC,YAAAA,IAAI,IAAI;AACvB,EACF,EAAE;AAEF,MAAa,cAAcC,4BAAAA,oBAAwC,WAAW;CAC5E,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,YACA,UACA,YACA,GAAG,WACDA,kBAAAA,SAAS,eAAe,cAAc,KAAK;CAE/C,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EAAG,GAAI;YAArD;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAI,UAAU,cAAc,EAAI,CAAA;GACrC,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAI,UAAU,eAAe,EAAI,CAAA;GACtD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,MAAM,EAAE,CAAC,EAAI,CAAA;GAC7E,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,GAAI,UAAU,iBAAiB;IAAI;GAAe,CAAA;EACrD;;AAET,CAAC;AAED,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"ColorSwatch.cjs","names":["createVarsResolver","getRadius","rem","polymorphicFactory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './ColorSwatch.module.css';\n\nexport type ColorSwatchStylesNames =\n  | 'root'\n  | 'alphaOverlay'\n  | 'shadowOverlay'\n  | 'colorOverlay'\n  | 'childrenOverlay';\n\nexport type ColorSwatchCssVariables = {\n  root: '--cs-radius' | '--cs-size';\n};\n\nexport interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {\n  /** Valid CSS color to display */\n  color: string;\n\n  /** Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 */\n  size?: React.CSSProperties['width'];\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 */\n  radius?: MantineRadius;\n\n  /** If set, the swatch has inner `box-shadow` @default true */\n  withShadow?: boolean;\n\n  /** Children inside the swatch */\n  children?: React.ReactNode;\n}\n\nexport type ColorSwatchFactory = PolymorphicFactory<{\n  props: ColorSwatchProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: ColorSwatchStylesNames;\n  vars: ColorSwatchCssVariables;\n}>;\n\nconst defaultProps = {\n  withShadow: true,\n} satisfies Partial<ColorSwatchProps>;\n\nconst varsResolver = createVarsResolver<ColorSwatchFactory>((_, { radius, size }) => ({\n  root: {\n    '--cs-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cs-size': rem(size),\n  },\n}));\n\nexport const ColorSwatch = polymorphicFactory<ColorSwatchFactory>((_props) => {\n  const props = useProps('ColorSwatch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    radius,\n    withShadow,\n    children,\n    attributes,\n    ...others\n  } = useProps('ColorSwatch', defaultProps, props);\n\n  const getStyles = useStyles<ColorSwatchFactory>({\n    name: 'ColorSwatch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box {...getStyles('root', { focusable: true })} {...others}>\n      <span {...getStyles('alphaOverlay')} />\n      {withShadow && <span {...getStyles('shadowOverlay')} />}\n      <span {...getStyles('colorOverlay', { style: { backgroundColor: color } })} />\n      <span {...getStyles('childrenOverlay')}>{children}</span>\n    </Box>\n  );\n});\n\nColorSwatch.classes = classes;\nColorSwatch.varsResolver = varsResolver;\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n\nexport namespace ColorSwatch {\n  export type Props = ColorSwatchProps;\n  export type CssVariables = ColorSwatchCssVariables;\n  export type Factory = ColorSwatchFactory;\n  export type StylesNames = ColorSwatchStylesNames;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,QAAQ,YAAY,EACpF,MAAM;CACJ,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CAClE,aAAaC,YAAAA,IAAI,IAAI;AACvB,EACF,EAAE;AAEF,MAAa,cAAcC,4BAAAA,oBAAwC,WAAW;CAC5E,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,YACA,UACA,YACA,GAAG,WACDA,kBAAAA,SAAS,eAAe,cAAc,KAAK;CAE/C,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EAAG,GAAI;EAArD,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAI,UAAU,cAAc,EAAI,CAAA;GACrC,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAI,UAAU,eAAe,EAAI,CAAA;GACtD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,MAAM,EAAE,CAAC,EAAI,CAAA;GAC7E,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,GAAI,UAAU,iBAAiB;IAAI;GAAe,CAAA;EACrD;;AAET,CAAC;AAED,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/cjs/components/Combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","names":["createVarsResolver","getFontSize","getSize","rem","useProps","useCombobox","useStyles","ComboboxProvider","Popover","classes","ComboboxTarget","ComboboxDropdown","ComboboxOptions","ComboboxOption","ComboboxSearch","ComboboxEmpty","ComboboxChevron","ComboboxFooter","ComboboxHeader","ComboboxEventsTarget","ComboboxDropdownTarget","ComboboxGroup","ComboboxClearButton","ComboboxHiddenInput"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n\n  /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n  floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  keepMountedMode: 'display-none',\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    floatingHeight,\n    middlewares,\n    ...others\n  } = props;\n\n  const resolvedMiddlewares: PopoverMiddlewares | undefined =\n    floatingHeight === 'viewport'\n      ? {\n          ...middlewares,\n          flip: false,\n          size: {\n            ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n            padding:\n              typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n                ? middlewares.size.padding\n                : 10,\n            apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n              elements.floating.style.setProperty(\n                '--combobox-floating-max-height',\n                `${availableHeight}px`\n              );\n              const userSize = middlewares?.size;\n              if (typeof userSize === 'object' && userSize.apply) {\n                userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n              } else if (userSize) {\n                Object.assign(elements.floating.style, {\n                  maxWidth: `${availableWidth}px`,\n                  maxHeight: `${availableHeight}px`,\n                });\n              }\n            },\n          },\n        }\n      : middlewares;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n        floatingHeight,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        {...others}\n        middlewares={resolvedMiddlewares}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAeA,6BAAAA,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwBC,iBAAAA,YAAY,IAAI;EACxC,6BAA6BC,iBAAAA,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAYC,YAAAA,IAAI,eAAe;EACrF,wBAAwBF,iBAAAA,YAAY,IAAI;EACxC,6BAA6BC,iBAAAA,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQE,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoBC,qBAAAA,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAASC,uBAAAA;AAClB,SAAS,WAAWC,yBAAAA;AACpB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,UAAUC,wBAAAA;AACnB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,eAAeC,6BAAAA;AACxB,SAAS,iBAAiBC,+BAAAA;AAC1B,SAAS,QAAQC,sBAAAA;AACjB,SAAS,cAAcC,4BAAAA;AACvB,SAAS,cAAcC,4BAAAA"}
+{"version":3,"file":"Combobox.cjs","names":["createVarsResolver","getFontSize","getSize","rem","useProps","useCombobox","useStyles","ComboboxProvider","Popover","classes","ComboboxTarget","ComboboxDropdown","ComboboxOptions","ComboboxOption","ComboboxSearch","ComboboxEmpty","ComboboxChevron","ComboboxFooter","ComboboxHeader","ComboboxEventsTarget","ComboboxDropdownTarget","ComboboxGroup","ComboboxClearButton","ComboboxHiddenInput"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  ExtendComponent,\n  Factory,\n  getFontSize,\n  getSize,\n  MantineSize,\n  MantineThemeComponent,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n  ComboboxClearButton,\n  ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n  ComboboxDropdownTarget,\n  ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n  ComboboxEventsTarget,\n  ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n  ComboboxHiddenInput,\n  ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n  | 'options'\n  | 'dropdown'\n  | 'option'\n  | 'search'\n  | 'empty'\n  | 'footer'\n  | 'header'\n  | 'group'\n  | 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n  options: '--combobox-option-fz' | '--combobox-option-padding';\n  dropdown: '--combobox-padding' | '--combobox-option-fz' | '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n  __staticSelector?: string;\n\n  /** Combobox content */\n  children?: React.ReactNode;\n\n  /** Combobox store, can be used to control combobox state */\n  store?: ComboboxStore;\n\n  /** Called when item is selected with the `Enter` key or by clicking it */\n  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n  /** Controls items `font-size` and `padding` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Controls `padding` of the dropdown @default 4 */\n  dropdownPadding?: React.CSSProperties['padding'];\n\n  /** Determines whether selection should be reset when option is hovered @default false */\n  resetSelectionOnOptionHover?: boolean;\n\n  /** Determines whether the `Combobox` value can be changed */\n  readOnly?: boolean;\n\n  /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n  floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n  props: ComboboxProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxStylesNames;\n  vars: ComboboxCSSVariables;\n  staticComponents: {\n    Target: typeof ComboboxTarget;\n    Dropdown: typeof ComboboxDropdown;\n    Options: typeof ComboboxOptions;\n    Option: typeof ComboboxOption;\n    Search: typeof ComboboxSearch;\n    Empty: typeof ComboboxEmpty;\n    Chevron: typeof ComboboxChevron;\n    Footer: typeof ComboboxFooter;\n    Header: typeof ComboboxHeader;\n    EventsTarget: typeof ComboboxEventsTarget;\n    DropdownTarget: typeof ComboboxDropdownTarget;\n    Group: typeof ComboboxGroup;\n    ClearButton: typeof ComboboxClearButton;\n    HiddenInput: typeof ComboboxHiddenInput;\n  };\n}>;\n\nconst defaultProps = {\n  keepMounted: true,\n  keepMountedMode: 'display-none',\n  withinPortal: true,\n  resetSelectionOnOptionHover: false,\n  width: 'target',\n  transitionProps: { transition: 'fade', duration: 0 },\n  size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n  options: {\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n\n  dropdown: {\n    '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n    '--combobox-option-fz': getFontSize(size),\n    '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n  },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n  const props = useProps('Combobox', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    children,\n    store: controlledStore,\n    vars,\n    onOptionSubmit,\n    onClose,\n    size,\n    dropdownPadding,\n    resetSelectionOnOptionHover,\n    __staticSelector,\n    readOnly,\n    attributes,\n    floatingHeight,\n    middlewares,\n    ...others\n  } = props;\n\n  const resolvedMiddlewares: PopoverMiddlewares | undefined =\n    floatingHeight === 'viewport'\n      ? {\n          ...middlewares,\n          flip: false,\n          size: {\n            ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n            padding:\n              typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n                ? middlewares.size.padding\n                : 10,\n            apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n              elements.floating.style.setProperty(\n                '--combobox-floating-max-height',\n                `${availableHeight}px`\n              );\n              const userSize = middlewares?.size;\n              if (typeof userSize === 'object' && userSize.apply) {\n                userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n              } else if (userSize) {\n                Object.assign(elements.floating.style, {\n                  maxWidth: `${availableWidth}px`,\n                  maxHeight: `${availableHeight}px`,\n                });\n              }\n            },\n          },\n        }\n      : middlewares;\n\n  const uncontrolledStore = useCombobox();\n  const store = controlledStore || uncontrolledStore;\n\n  const getStyles = useStyles<ComboboxFactory>({\n    name: __staticSelector || 'Combobox',\n    classes,\n    props,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const onDropdownClose = () => {\n    onClose?.();\n    store.closeDropdown();\n  };\n\n  return (\n    <ComboboxProvider\n      value={{\n        getStyles,\n        store,\n        onOptionSubmit,\n        size,\n        resetSelectionOnOptionHover,\n        readOnly,\n        floatingHeight,\n      }}\n    >\n      <Popover\n        opened={store.dropdownOpened}\n        {...others}\n        middlewares={resolvedMiddlewares}\n        onChange={(_opened) => !_opened && onDropdownClose()}\n        withRoles={false}\n        unstyled={unstyled}\n      >\n        {children}\n      </Popover>\n    </ComboboxProvider>\n  );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n  export type Props = ComboboxProps;\n  export type StylesNames = ComboboxStylesNames;\n  export type Factory = ComboboxFactory;\n\n  export namespace Dropdown {\n    export type Props = ComboboxDropdownProps;\n  }\n\n  export namespace Options {\n    export type Props = ComboboxOptionsProps;\n  }\n\n  export namespace Option {\n    export type Props = ComboboxOptionProps;\n  }\n\n  export namespace Target {\n    export type Props = ComboboxTargetProps;\n  }\n\n  export namespace Chevron {\n    export type Props = ComboboxChevronProps;\n  }\n\n  export namespace Empty {\n    export type Props = ComboboxEmptyProps;\n  }\n\n  export namespace Search {\n    export type Props = ComboboxSearchProps;\n  }\n\n  export namespace Footer {\n    export type Props = ComboboxFooterProps;\n  }\n\n  export namespace Header {\n    export type Props = ComboboxHeaderProps;\n  }\n\n  export namespace DropdownTarget {\n    export type Props = ComboboxDropdownTargetProps;\n  }\n\n  export namespace EventsTarget {\n    export type Props = ComboboxEventsTargetProps;\n  }\n\n  export namespace Group {\n    export type Props = ComboboxGroupProps;\n  }\n\n  export namespace ClearButton {\n    export type Props = ComboboxClearButtonProps;\n  }\n\n  export namespace HiddenInput {\n    export type Props = ComboboxHiddenInputProps;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/Combobox/ComboboxChevron/ComboboxChevron.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxChevron.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxChevron/ComboboxChevron.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxChevronStylesNames = 'chevron';\nexport type ComboboxChevronCSSVariables = {\n  chevron: '--combobox-chevron-size' | '--combobox-chevron-color';\n};\n\nexport interface ComboboxChevronProps\n  extends\n    BoxProps,\n    StylesApiProps<ComboboxChevronFactory>,\n    ElementProps<'svg', 'opacity' | 'display'> {\n  size?: MantineSize | (string & {});\n  error?: React.ReactNode;\n  color?: MantineColor;\n}\n\nexport type ComboboxChevronFactory = Factory<{\n  props: ComboboxChevronProps;\n  ref: SVGSVGElement;\n  stylesNames: ComboboxChevronStylesNames;\n  vars: ComboboxChevronCSSVariables;\n}>;\n\nconst defaultProps = {\n  error: null,\n} satisfies Partial<ComboboxChevronProps>;\n\nconst varsResolver = createVarsResolver<ComboboxChevronFactory>((theme, { size, color }) => ({\n  chevron: {\n    '--combobox-chevron-size': getSize(size, 'combobox-chevron-size'),\n    '--combobox-chevron-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const ComboboxChevron = factory<ComboboxChevronFactory>((_props) => {\n  const props = useProps('ComboboxChevron', defaultProps, _props);\n  const {\n    size,\n    error,\n    style,\n    className,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ComboboxChevronFactory>({\n    name: 'ComboboxChevron',\n    classes,\n    props,\n    style,\n    className,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n    rootSelector: 'chevron',\n  });\n\n  return (\n    <Box\n      component=\"svg\"\n      {...others}\n      {...getStyles('chevron')}\n      size={size}\n      viewBox=\"0 0 15 15\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      mod={['combobox-chevron', { error }, mod]}\n    >\n      <path\n        d=\"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </Box>\n  );\n});\n\nComboboxChevron.classes = classes;\nComboboxChevron.varsResolver = varsResolver;\nComboboxChevron.displayName = '@mantine/core/ComboboxChevron';\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,eAAe,EACnB,OAAO,KACT;AAEA,MAAM,eAAeA,6BAAAA,oBAA4C,OAAO,EAAE,MAAM,aAAa,EAC3F,SAAS;CACP,2BAA2BC,iBAAAA,QAAQ,MAAM,uBAAuB;CAChE,4BAA4B,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;AACpE,EACF,EAAE;AAEF,MAAa,kBAAkBC,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,MACA,OACA,OACA,WACA,YACA,QACA,UACA,MACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAkC;EAClD,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,GAAI;EACJ,GAAI,UAAU,SAAS;EACjB;EACN,SAAQ;EACR,MAAK;EACL,OAAM;EACN,KAAK;GAAC;GAAoB,EAAE,MAAM;GAAG;EAAG;YAExC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,UAAS;GACT,UAAS;EACV,CAAA;CACE,CAAA;AAET,CAAC;AAED,gBAAgB,UAAUC,wBAAAA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}
+{"version":3,"file":"ComboboxChevron.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxChevron/ComboboxChevron.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxChevronStylesNames = 'chevron';\nexport type ComboboxChevronCSSVariables = {\n  chevron: '--combobox-chevron-size' | '--combobox-chevron-color';\n};\n\nexport interface ComboboxChevronProps\n  extends\n    BoxProps,\n    StylesApiProps<ComboboxChevronFactory>,\n    ElementProps<'svg', 'opacity' | 'display'> {\n  size?: MantineSize | (string & {});\n  error?: React.ReactNode;\n  color?: MantineColor;\n}\n\nexport type ComboboxChevronFactory = Factory<{\n  props: ComboboxChevronProps;\n  ref: SVGSVGElement;\n  stylesNames: ComboboxChevronStylesNames;\n  vars: ComboboxChevronCSSVariables;\n}>;\n\nconst defaultProps = {\n  error: null,\n} satisfies Partial<ComboboxChevronProps>;\n\nconst varsResolver = createVarsResolver<ComboboxChevronFactory>((theme, { size, color }) => ({\n  chevron: {\n    '--combobox-chevron-size': getSize(size, 'combobox-chevron-size'),\n    '--combobox-chevron-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const ComboboxChevron = factory<ComboboxChevronFactory>((_props) => {\n  const props = useProps('ComboboxChevron', defaultProps, _props);\n  const {\n    size,\n    error,\n    style,\n    className,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ComboboxChevronFactory>({\n    name: 'ComboboxChevron',\n    classes,\n    props,\n    style,\n    className,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n    rootSelector: 'chevron',\n  });\n\n  return (\n    <Box\n      component=\"svg\"\n      {...others}\n      {...getStyles('chevron')}\n      size={size}\n      viewBox=\"0 0 15 15\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      mod={['combobox-chevron', { error }, mod]}\n    >\n      <path\n        d=\"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </Box>\n  );\n});\n\nComboboxChevron.classes = classes;\nComboboxChevron.varsResolver = varsResolver;\nComboboxChevron.displayName = '@mantine/core/ComboboxChevron';\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,eAAe,EACnB,OAAO,KACT;AAEA,MAAM,eAAeA,6BAAAA,oBAA4C,OAAO,EAAE,MAAM,aAAa,EAC3F,SAAS;CACP,2BAA2BC,iBAAAA,QAAQ,MAAM,uBAAuB;CAChE,4BAA4B,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;AACpE,EACF,EAAE;AAEF,MAAa,kBAAkBC,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,MACA,OACA,OACA,WACA,YACA,QACA,UACA,MACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAkC;EAClD,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAU;EACV,GAAI;EACJ,GAAI,UAAU,SAAS;EACjB;EACN,SAAQ;EACR,MAAK;EACL,OAAM;EACN,KAAK;GAAC;GAAoB,EAAE,MAAM;GAAG;EAAG;EAExC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,GAAE;GACF,MAAK;GACL,UAAS;GACT,UAAS;EACV,CAAA;CACE,CAAA;AAET,CAAC;AAED,gBAAgB,UAAUC,wBAAAA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}

package/cjs/components/Combobox/ComboboxEmpty/ComboboxEmpty.cjs

@@ -8,8 +8,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Combobox/ComboboxEmpty/ComboboxEmpty.tsx
 const ComboboxEmpty = require_factory.factory((props) => {
 	const { classNames, className, style, styles, vars, ...others } = require_use_props.useProps("ComboboxEmpty", null, props);
+	const ctx = require_Combobox_context.useComboboxContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-		...require_Combobox_context.useComboboxContext().getStyles("empty", {
+		...ctx.getStyles("empty", {
 			className,
 			classNames,
 			styles,

package/cjs/components/Combobox/ComboboxEmpty/ComboboxEmpty.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxEmpty.cjs","names":["factory","useProps","Box","useComboboxContext","classes"],"sources":["../../../../src/components/Combobox/ComboboxEmpty/ComboboxEmpty.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxEmptyStylesNames = 'empty';\n\nexport interface ComboboxEmptyProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxEmptyFactory>, ElementProps<'div'> {}\n\nexport type ComboboxEmptyFactory = Factory<{\n  props: ComboboxEmptyProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxEmptyStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxEmpty = factory<ComboboxEmptyFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ComboboxEmpty',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return <Box {...ctx.getStyles('empty', { className, classNames, styles, style })} {...others} />;\n});\n\nComboboxEmpty.classes = classes;\nComboboxEmpty.displayName = '@mantine/core/ComboboxEmpty';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAWC,kBAAAA,SAChE,iBACA,MACA,KACF;CAIA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EAAK,GAFAC,yBAAAA,mBAEM,CAAC,CAAC,UAAU,SAAS;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EAAG,GAAI;CAAS,CAAA;AACjG,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}
+{"version":3,"file":"ComboboxEmpty.cjs","names":["factory","useProps","useComboboxContext","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxEmpty/ComboboxEmpty.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxEmptyStylesNames = 'empty';\n\nexport interface ComboboxEmptyProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxEmptyFactory>, ElementProps<'div'> {}\n\nexport type ComboboxEmptyFactory = Factory<{\n  props: ComboboxEmptyProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxEmptyStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxEmpty = factory<ComboboxEmptyFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ComboboxEmpty',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return <Box {...ctx.getStyles('empty', { className, classNames, styles, style })} {...others} />;\n});\n\nComboboxEmpty.classes = classes;\nComboboxEmpty.displayName = '@mantine/core/ComboboxEmpty';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAWC,kBAAAA,SAChE,iBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EAAG,GAAI;CAAS,CAAA;AACjG,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}

package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs

@@ -21,16 +21,17 @@ const ComboboxEventsTarget = require_factory.factory((props) => {
 	const child = require_get_single_element_child.getSingleElementChild(children);
 	if (!child) throw new Error("Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
 	const ctx = require_Combobox_context.useComboboxContext();
+	const targetProps = require_use_combobox_target_props.useComboboxTargetProps({
+		targetType,
+		withAriaAttributes,
+		withKeyboardNavigation,
+		withExpandedAttribute,
+		onKeyDown: child.props.onKeyDown,
+		onClick: child.props.onClick,
+		autoComplete
+	});
 	return (0, react.cloneElement)(child, {
-		...require_use_combobox_target_props.useComboboxTargetProps({
-			targetType,
-			withAriaAttributes,
-			withKeyboardNavigation,
-			withExpandedAttribute,
-			onKeyDown: child.props.onKeyDown,
-			onClick: child.props.onClick,
-			autoComplete
-		}),
+		...targetProps,
 		...others,
 		[refProp]: (0, _mantine_hooks.useMergedRef)(ref, ctx.store.targetRef, require_get_ref_prop.getRefProp(child))
 	});

package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to the keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events should be handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n  props: ComboboxEventsTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  return cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n  });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;AAChB;AAQA,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,KAAK;CAExD,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,yKACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAW/B,QAAA,GAAA,MAAA,aAAA,CAAoB,OAAO;EACzB,GAXkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;EACF,CAGe;EACb,GAAG;GACF,WAAA,GAAA,eAAA,aAAA,CAAuB,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,KAAK,CAAC;CACrE,CAAC;AACH,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","cloneElement","useMergedRef","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to the keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events should be handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n  props: ComboboxEventsTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  return cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n  });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;AAChB;AAQA,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,KAAK;CAExD,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,yKACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC;EACA;EACA;EACA;EACA,WAAY,MAAM,MAAc;EAChC,SAAU,MAAM,MAAc;EAC9B;CACF,CAAC;CAED,QAAA,GAAOC,MAAAA,aAAAA,CAAa,OAAO;EACzB,GAAG;EACH,GAAG;GACF,WAAA,GAAUC,eAAAA,aAAAA,CAAa,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,KAAK,CAAC;CACrE,CAAC;AACH,CAAC;AAED,qBAAqB,cAAc"}

package/cjs/components/Combobox/ComboboxFooter/ComboboxFooter.cjs

@@ -8,8 +8,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx
 const ComboboxFooter = require_factory.factory((props) => {
 	const { classNames, className, style, styles, vars, ...others } = require_use_props.useProps("ComboboxFooter", null, props);
+	const ctx = require_Combobox_context.useComboboxContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-		...require_Combobox_context.useComboboxContext().getStyles("footer", {
+		...ctx.getStyles("footer", {
 			className,
 			classNames,
 			style,

package/cjs/components/Combobox/ComboboxFooter/ComboboxFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxFooter.cjs","names":["factory","useProps","Box","useComboboxContext","classes"],"sources":["../../../../src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxFooterStylesNames = 'footer';\n\nexport interface ComboboxFooterProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxFooterFactory>, ElementProps<'div'> {}\n\nexport type ComboboxFooterFactory = Factory<{\n  props: ComboboxFooterProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxFooterStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxFooter = factory<ComboboxFooterFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ComboboxFooter',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('footer', { className, classNames, style, styles })}\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n      }}\n    />\n  );\n});\n\nComboboxFooter.classes = classes;\nComboboxFooter.displayName = '@mantine/core/ComboboxFooter';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAWC,kBAAAA,SAChE,kBACA,MACA,KACF;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAJQC,yBAAAA,mBAIF,CAAC,CAAC,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"ComboboxFooter.cjs","names":["factory","useProps","useComboboxContext","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxFooterStylesNames = 'footer';\n\nexport interface ComboboxFooterProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxFooterFactory>, ElementProps<'div'> {}\n\nexport type ComboboxFooterFactory = Factory<{\n  props: ComboboxFooterProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxFooterStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxFooter = factory<ComboboxFooterFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ComboboxFooter',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('footer', { className, classNames, style, styles })}\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n      }}\n    />\n  );\n});\n\nComboboxFooter.classes = classes;\nComboboxFooter.displayName = '@mantine/core/ComboboxFooter';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAWC,kBAAAA,SAChE,kBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/Combobox/ComboboxGroup/ComboboxGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxGroup.cjs","names":["factory","useProps","useComboboxContext","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxGroup/ComboboxGroup.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxGroupStylesNames = 'group' | 'groupLabel';\n\nexport interface ComboboxGroupProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxGroupFactory>, ElementProps<'div'> {\n  /** Group label */\n  label?: React.ReactNode;\n}\n\nexport type ComboboxGroupFactory = Factory<{\n  props: ComboboxGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxGroupStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxGroup = factory<ComboboxGroupFactory>((props) => {\n  const { classNames, className, style, styles, vars, children, label, id, ...others } = useProps(\n    'ComboboxGroup',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n  const _id = useId(id);\n\n  const hasLabel = label !== undefined && label !== null && label !== false && label !== '';\n\n  return (\n    <Box\n      role=\"group\"\n      aria-labelledby={hasLabel ? _id : undefined}\n      {...ctx.getStyles('group', { className, classNames, style, styles })}\n      {...others}\n    >\n      {hasLabel && (\n        <div id={_id} {...ctx.getStyles('groupLabel', { classNames, styles })}>\n          {label}\n        </div>\n      )}\n      {children}\n    </Box>\n  );\n});\n\nComboboxGroup.classes = classes;\nComboboxGroup.displayName = '@mantine/core/ComboboxGroup';\n"],"mappings":";;;;;;;;;AA4BA,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,OAAO,IAAI,GAAG,WAAWC,kBAAAA,SACrF,iBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,OAAA,GAAA,eAAA,MAAA,CAAY,EAAE;CAEpB,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;CAEvF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,MAAK;EACL,mBAAiB,WAAW,MAAM,KAAA;EAClC,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,GAAI;YAJN,CAMG,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,IAAI;GAAK,GAAI,IAAI,UAAU,cAAc;IAAE;IAAY;GAAO,CAAC;aACjE;EACE,CAAA,GAEN,QACE;;AAET,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}
+{"version":3,"file":"ComboboxGroup.cjs","names":["factory","useProps","useComboboxContext","useId","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxGroup/ComboboxGroup.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxGroupStylesNames = 'group' | 'groupLabel';\n\nexport interface ComboboxGroupProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxGroupFactory>, ElementProps<'div'> {\n  /** Group label */\n  label?: React.ReactNode;\n}\n\nexport type ComboboxGroupFactory = Factory<{\n  props: ComboboxGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxGroupStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxGroup = factory<ComboboxGroupFactory>((props) => {\n  const { classNames, className, style, styles, vars, children, label, id, ...others } = useProps(\n    'ComboboxGroup',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n  const _id = useId(id);\n\n  const hasLabel = label !== undefined && label !== null && label !== false && label !== '';\n\n  return (\n    <Box\n      role=\"group\"\n      aria-labelledby={hasLabel ? _id : undefined}\n      {...ctx.getStyles('group', { className, classNames, style, styles })}\n      {...others}\n    >\n      {hasLabel && (\n        <div id={_id} {...ctx.getStyles('groupLabel', { classNames, styles })}>\n          {label}\n        </div>\n      )}\n      {children}\n    </Box>\n  );\n});\n\nComboboxGroup.classes = classes;\nComboboxGroup.displayName = '@mantine/core/ComboboxGroup';\n"],"mappings":";;;;;;;;;AA4BA,MAAa,gBAAgBA,gBAAAA,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,OAAO,IAAI,GAAG,WAAWC,kBAAAA,SACrF,iBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,OAAA,GAAMC,eAAAA,MAAAA,CAAM,EAAE;CAEpB,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;CAEvF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,MAAK;EACL,mBAAiB,WAAW,MAAM,KAAA;EAClC,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,GAAI;EAJN,UAAA,CAMG,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,IAAI;GAAK,GAAI,IAAI,UAAU,cAAc;IAAE;IAAY;GAAO,CAAC;GACjE,UAAA;EACE,CAAA,GAEN,QACE;;AAET,CAAC;AAED,cAAc,UAAUC,wBAAAA;AACxB,cAAc,cAAc"}

package/cjs/components/Combobox/ComboboxHeader/ComboboxHeader.cjs

@@ -8,8 +8,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx
 const ComboboxHeader = require_factory.factory((props) => {
 	const { classNames, className, style, styles, vars, ...others } = require_use_props.useProps("ComboboxHeader", null, props);
+	const ctx = require_Combobox_context.useComboboxContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-		...require_Combobox_context.useComboboxContext().getStyles("header", {
+		...ctx.getStyles("header", {
 			className,
 			classNames,
 			style,

package/cjs/components/Combobox/ComboboxHeader/ComboboxHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxHeader.cjs","names":["factory","useProps","Box","useComboboxContext","classes"],"sources":["../../../../src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxHeaderStylesNames = 'header';\n\nexport interface ComboboxHeaderProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxHeaderFactory>, ElementProps<'div'> {}\n\nexport type ComboboxHeaderFactory = Factory<{\n  props: ComboboxHeaderProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxHeaderStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxHeader = factory<ComboboxHeaderFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ComboboxHeader',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('header', { className, classNames, style, styles })}\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n      }}\n    />\n  );\n});\n\nComboboxHeader.classes = classes;\nComboboxHeader.displayName = '@mantine/core/ComboboxHeader';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAWC,kBAAAA,SAChE,kBACA,MACA,KACF;CAIA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAJQC,yBAAAA,mBAIF,CAAC,CAAC,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"ComboboxHeader.cjs","names":["factory","useProps","useComboboxContext","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxHeaderStylesNames = 'header';\n\nexport interface ComboboxHeaderProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxHeaderFactory>, ElementProps<'div'> {}\n\nexport type ComboboxHeaderFactory = Factory<{\n  props: ComboboxHeaderProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxHeaderStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxHeader = factory<ComboboxHeaderFactory>((props) => {\n  const { classNames, className, style, styles, vars, ...others } = useProps(\n    'ComboboxHeader',\n    null,\n    props\n  );\n\n  const ctx = useComboboxContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('header', { className, classNames, style, styles })}\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n      }}\n    />\n  );\n});\n\nComboboxHeader.classes = classes;\nComboboxHeader.displayName = '@mantine/core/ComboboxHeader';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAWC,kBAAAA,SAChE,kBACA,MACA,KACF;CAEA,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/Combobox/ComboboxOption/ComboboxOption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.cjs","names":["factory","useProps","useComboboxContext","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import { useId } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxOptionStylesNames = 'option';\n\nexport interface ComboboxOptionProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxOptionFactory>, ElementProps<'div'> {\n  /** Option value */\n  value: Primitive;\n\n  /** Current active state */\n  active?: boolean;\n\n  /** Disabled state */\n  disabled?: boolean;\n\n  /** Current selected state */\n  selected?: boolean;\n}\n\nexport type ComboboxOptionFactory = Factory<{\n  props: ComboboxOptionProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxOptionStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxOption = factory<ComboboxOptionFactory>((_props) => {\n  const props = useProps('ComboboxOption', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    onClick,\n    id,\n    active,\n    onMouseDown,\n    onMouseOver,\n    disabled,\n    selected,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const uuid = useId();\n  const _id = id || uuid;\n\n  return (\n    // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- Combobox uses aria-activedescendant pattern: focus stays on the target, options are highlighted via aria-activedescendant rather than DOM focus\n    <Box\n      {...ctx.getStyles('option', { className, classNames, styles, style })}\n      {...others}\n      id={_id}\n      mod={[\n        'combobox-option',\n        { 'combobox-active': active, 'combobox-disabled': disabled, 'combobox-selected': selected },\n        mod,\n      ]}\n      role=\"option\"\n      onClick={(event) => {\n        if (!disabled) {\n          ctx.onOptionSubmit?.(props.value as any, props);\n          onClick?.(event);\n        } else {\n          event.preventDefault();\n        }\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onMouseOver={(event) => {\n        if (ctx.resetSelectionOnOptionHover) {\n          ctx.store.resetSelectedOption();\n        }\n        onMouseOver?.(event);\n      }}\n    />\n  );\n});\n\nComboboxOption.classes = classes;\nComboboxOption.displayName = '@mantine/core/ComboboxOption';\n"],"mappings":";;;;;;;;;AAsCA,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,SACA,IACA,QACA,aACA,aACA,UACA,UACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,MAAM,MAAM;CAElB,OAEE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EACpE,GAAI;EACJ,IAAI;EACJ,KAAK;GACH;GACA;IAAE,mBAAmB;IAAQ,qBAAqB;IAAU,qBAAqB;GAAS;GAC1F;EACF;EACA,MAAK;EACL,UAAU,UAAU;GAClB,IAAI,CAAC,UAAU;IACb,IAAI,iBAAiB,MAAM,OAAc,KAAK;IAC9C,UAAU,KAAK;GACjB,OACE,MAAM,eAAe;EAEzB;EACA,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,cAAc,KAAK;EACrB;EACA,cAAc,UAAU;GACtB,IAAI,IAAI,6BACN,IAAI,MAAM,oBAAoB;GAEhC,cAAc,KAAK;EACrB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"ComboboxOption.cjs","names":["factory","useProps","useComboboxContext","useId","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import { useId } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxOptionStylesNames = 'option';\n\nexport interface ComboboxOptionProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxOptionFactory>, ElementProps<'div'> {\n  /** Option value */\n  value: Primitive;\n\n  /** Current active state */\n  active?: boolean;\n\n  /** Disabled state */\n  disabled?: boolean;\n\n  /** Current selected state */\n  selected?: boolean;\n}\n\nexport type ComboboxOptionFactory = Factory<{\n  props: ComboboxOptionProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxOptionStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxOption = factory<ComboboxOptionFactory>((_props) => {\n  const props = useProps('ComboboxOption', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    onClick,\n    id,\n    active,\n    onMouseDown,\n    onMouseOver,\n    disabled,\n    selected,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const uuid = useId();\n  const _id = id || uuid;\n\n  return (\n    // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- Combobox uses aria-activedescendant pattern: focus stays on the target, options are highlighted via aria-activedescendant rather than DOM focus\n    <Box\n      {...ctx.getStyles('option', { className, classNames, styles, style })}\n      {...others}\n      id={_id}\n      mod={[\n        'combobox-option',\n        { 'combobox-active': active, 'combobox-disabled': disabled, 'combobox-selected': selected },\n        mod,\n      ]}\n      role=\"option\"\n      onClick={(event) => {\n        if (!disabled) {\n          ctx.onOptionSubmit?.(props.value as any, props);\n          onClick?.(event);\n        } else {\n          event.preventDefault();\n        }\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onMouseOver={(event) => {\n        if (ctx.resetSelectionOnOptionHover) {\n          ctx.store.resetSelectedOption();\n        }\n        onMouseOver?.(event);\n      }}\n    />\n  );\n});\n\nComboboxOption.classes = classes;\nComboboxOption.displayName = '@mantine/core/ComboboxOption';\n"],"mappings":";;;;;;;;;AAsCA,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,MAAM,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,SACA,IACA,QACA,aACA,aACA,UACA,UACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAA,GAAOC,MAAAA,MAAAA,CAAM;CACnB,MAAM,MAAM,MAAM;CAElB,OAEE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EACpE,GAAI;EACJ,IAAI;EACJ,KAAK;GACH;GACA;IAAE,mBAAmB;IAAQ,qBAAqB;IAAU,qBAAqB;GAAS;GAC1F;EACF;EACA,MAAK;EACL,UAAU,UAAU;GAClB,IAAI,CAAC,UAAU;IACb,IAAI,iBAAiB,MAAM,OAAc,KAAK;IAC9C,UAAU,KAAK;GACjB,OACE,MAAM,eAAe;EAEzB;EACA,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,cAAc,KAAK;EACrB;EACA,cAAc,UAAU;GACtB,IAAI,IAAI,6BACN,IAAI,MAAM,oBAAoB;GAEhC,cAAc,KAAK;EACrB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/Combobox/ComboboxOptions/ComboboxOptions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptions.cjs","names":["factory","useProps","useComboboxContext","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxOptions/ComboboxOptions.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxOptionsStylesNames = 'options';\n\nexport interface ComboboxOptionsProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxOptionsFactory>, ElementProps<'div'> {\n  /** Id of the element that labels the options list */\n  labelledBy?: string;\n}\n\nexport type ComboboxOptionsFactory = Factory<{\n  props: ComboboxOptionsProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxOptionsStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxOptions = factory<ComboboxOptionsFactory>((_props) => {\n  const props = useProps('ComboboxOptions', null, _props);\n  const { classNames, className, style, styles, id, onMouseDown, labelledBy, ...others } = props;\n  const ctx = useComboboxContext();\n  const _id = useId(id);\n\n  useEffect(() => {\n    ctx.store.setListId(_id);\n  }, [_id]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- Combobox uses aria-activedescendant pattern: focus stays on the target, options are highlighted via aria-activedescendant rather than DOM focus\n    <Box\n      {...ctx.getStyles('options', { className, style, classNames, styles })}\n      {...others}\n      id={_id}\n      role=\"listbox\"\n      aria-labelledby={labelledBy}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n    />\n  );\n});\n\nComboboxOptions.classes = classes;\nComboboxOptions.displayName = '@mantine/core/ComboboxOptions';\n"],"mappings":";;;;;;;;;;AA6BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CAEzE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,IAAI,aAAa,YAAY,GAAG,WADhEC,kBAAAA,SAAS,mBAAmB,MAAM,MAC6C;CAC7F,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,OAAA,GAAA,eAAA,MAAA,CAAY,EAAE;CAEpB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,MAAM,UAAU,GAAG;CACzB,GAAG,CAAC,GAAG,CAAC;CAER,OAEE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACrE,GAAI;EACJ,IAAI;EACJ,MAAK;EACL,mBAAiB;EACjB,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,cAAc,KAAK;EACrB;CACD,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUC,wBAAAA;AAC1B,gBAAgB,cAAc"}
+{"version":3,"file":"ComboboxOptions.cjs","names":["factory","useProps","useComboboxContext","useId","Box","classes"],"sources":["../../../../src/components/Combobox/ComboboxOptions/ComboboxOptions.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxOptionsStylesNames = 'options';\n\nexport interface ComboboxOptionsProps\n  extends BoxProps, CompoundStylesApiProps<ComboboxOptionsFactory>, ElementProps<'div'> {\n  /** Id of the element that labels the options list */\n  labelledBy?: string;\n}\n\nexport type ComboboxOptionsFactory = Factory<{\n  props: ComboboxOptionsProps;\n  ref: HTMLDivElement;\n  stylesNames: ComboboxOptionsStylesNames;\n  compound: true;\n}>;\n\nexport const ComboboxOptions = factory<ComboboxOptionsFactory>((_props) => {\n  const props = useProps('ComboboxOptions', null, _props);\n  const { classNames, className, style, styles, id, onMouseDown, labelledBy, ...others } = props;\n  const ctx = useComboboxContext();\n  const _id = useId(id);\n\n  useEffect(() => {\n    ctx.store.setListId(_id);\n  }, [_id]);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- Combobox uses aria-activedescendant pattern: focus stays on the target, options are highlighted via aria-activedescendant rather than DOM focus\n    <Box\n      {...ctx.getStyles('options', { className, style, classNames, styles })}\n      {...others}\n      id={_id}\n      role=\"listbox\"\n      aria-labelledby={labelledBy}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n    />\n  );\n});\n\nComboboxOptions.classes = classes;\nComboboxOptions.displayName = '@mantine/core/ComboboxOptions';\n"],"mappings":";;;;;;;;;;AA6BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CAEzE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,IAAI,aAAa,YAAY,GAAG,WADhEC,kBAAAA,SAAS,mBAAmB,MAAM,MAC6C;CAC7F,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,OAAA,GAAMC,eAAAA,MAAAA,CAAM,EAAE;CAEpB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,MAAM,UAAU,GAAG;CACzB,GAAG,CAAC,GAAG,CAAC;CAER,OAEE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EACrE,GAAI;EACJ,IAAI;EACJ,MAAK;EACL,mBAAiB;EACjB,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,cAAc,KAAK;EACrB;CACD,CAAA;AAEL,CAAC;AAED,gBAAgB,UAAUC,wBAAAA;AAC1B,gBAAgB,cAAc"}

package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxSearch.cjs","names":["factory","useProps","useComboboxContext","useComboboxTargetProps","Input","classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** if set, the search input has `aria-` attribute @default true */\n  withAriaAttributes?: boolean;\n\n  /** if set, the search input handles keyboard navigation @default true */\n  withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n  props: ComboboxSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n  withAriaAttributes: true,\n  withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n  const props = useProps('ComboboxSearch', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    withAriaAttributes,\n    onKeyDown,\n    onClick,\n    withKeyboardNavigation,\n    size,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const _styles = ctx.getStyles('search');\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'input',\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute: false,\n    onKeyDown,\n    onClick,\n    autoComplete: 'off',\n  });\n\n  return (\n    <Input\n      ref={useMergedRef(ref, ctx.store.searchRef)}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      size={size || ctx.size}\n      {...targetProps}\n      {...others}\n      __staticSelector=\"Combobox\"\n    />\n  );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;AAC1B;AAEA,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,SACA,wBACA,MACA,KACA,GAAG,WAZSC,kBAAAA,SAAS,kBAAkB,cAAc,MAa/C;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,UAAU,IAAI,UAAU,QAAQ;CAEtC,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;EACE,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,IAAI,MAAM,SAAS;EAC1C,YAAY,CAAC,EAAE,OAAO,QAAQ,UAAU,GAAG,UAAU;EACrD,QAAQ,CAAC,EAAE,OAAO,QAAQ,MAAM,GAAG,MAAM;EACzC,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;CAClB,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"ComboboxSearch.cjs","names":["factory","useProps","useComboboxContext","useComboboxTargetProps","Input","useMergedRef","classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** if set, the search input has `aria-` attribute @default true */\n  withAriaAttributes?: boolean;\n\n  /** if set, the search input handles keyboard navigation @default true */\n  withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n  props: ComboboxSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n  withAriaAttributes: true,\n  withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n  const props = useProps('ComboboxSearch', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    withAriaAttributes,\n    onKeyDown,\n    onClick,\n    withKeyboardNavigation,\n    size,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const _styles = ctx.getStyles('search');\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'input',\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute: false,\n    onKeyDown,\n    onClick,\n    autoComplete: 'off',\n  });\n\n  return (\n    <Input\n      ref={useMergedRef(ref, ctx.store.searchRef)}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      size={size || ctx.size}\n      {...targetProps}\n      {...others}\n      __staticSelector=\"Combobox\"\n    />\n  );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;AAC1B;AAEA,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,SACA,wBACA,MACA,KACA,GAAG,WAZSC,kBAAAA,SAAS,kBAAkB,cAAc,MAa/C;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,UAAU,IAAI,UAAU,QAAQ;CAEtC,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;EACE,MAAA,GAAKC,eAAAA,aAAAA,CAAa,KAAK,IAAI,MAAM,SAAS;EAC1C,YAAY,CAAC,EAAE,OAAO,QAAQ,UAAU,GAAG,UAAU;EACrD,QAAQ,CAAC,EAAE,OAAO,QAAQ,MAAM,GAAG,MAAM;EACzC,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;CAClB,CAAA;AAEL,CAAC;AAED,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs

@@ -22,16 +22,17 @@ const ComboboxTarget = require_factory.factory((props) => {
 	const child = require_get_single_element_child.getSingleElementChild(children);
 	if (!child) throw new Error("Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
 	const ctx = require_Combobox_context.useComboboxContext();
+	const targetProps = require_use_combobox_target_props.useComboboxTargetProps({
+		targetType,
+		withAriaAttributes,
+		withKeyboardNavigation,
+		withExpandedAttribute,
+		onKeyDown: child.props.onKeyDown,
+		onClick: child.props.onClick,
+		autoComplete
+	});
 	const clonedElement = (0, react.cloneElement)(child, {
-		...require_use_combobox_target_props.useComboboxTargetProps({
-			targetType,
-			withAriaAttributes,
-			withKeyboardNavigation,
-			withExpandedAttribute,
-			onKeyDown: child.props.onKeyDown,
-			onClick: child.props.onClick,
-			autoComplete
-		}),
+		...targetProps,
 		...others
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover.Target, {

package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","Popover"],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events is handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n  props: ComboboxTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n  });\n\n  return (\n    <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n      {clonedElement}\n    </Popover.Target>\n  );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;AAChB;AAQA,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,cAAc,KAAK;CAElD,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,mKACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAY/B,MAAM,iBAAA,GAAA,MAAA,aAAA,CAA6B,OAAO;EACxC,GAXkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;EACF,CAGe;EACb,GAAG;CACL,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,IAAI,MAAM,SAAS;YACzE;CACa,CAAA;AAEpB,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"ComboboxTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","cloneElement","Popover","useMergedRef"],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events is handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n  props: ComboboxTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n  });\n\n  return (\n    <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n      {clonedElement}\n    </Popover.Target>\n  );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;AAChB;AAQA,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,cAAc,KAAK;CAElD,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,mKACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAE/B,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC;EACA;EACA;EACA;EACA,WAAY,MAAM,MAAc;EAChC,SAAU,MAAM,MAAc;EAC9B;CACF,CAAC;CAED,MAAM,iBAAA,GAAgBC,MAAAA,aAAAA,CAAa,OAAO;EACxC,GAAG;EACH,GAAG;CACL,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,MAAA,GAAKC,eAAAA,aAAAA,CAAa,KAAK,IAAI,MAAM,SAAS;EACzE,UAAA;CACa,CAAA;AAEpB,CAAC;AAED,eAAe,cAAc"}