@mantine/core 6.0.5 → 6.0.7

package/esm/ColorInput/ColorInput.js

@@ -149,7 +149,11 @@ const ColorInput = forwardRef((props, ref) => {
   const eyeDropper = /* @__PURE__ */ React.createElement(ActionIcon, {
     sx: { color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black },
     size: inputProps.size,
-    onClick: () => openEyeDropper().then(({ sRGBHex }) => setValue(convertHsvaTo(format, parseColor(sRGBHex)))).catch(noop)
+    onClick: () => openEyeDropper().then(({ sRGBHex }) => {
+      const color = convertHsvaTo(format, parseColor(sRGBHex));
+      setValue(color);
+      onChangeEnd == null ? void 0 : onChangeEnd(color);
+    }).catch(noop)
   }, eyeDropperIcon || /* @__PURE__ */ React.createElement(EyeDropperIcon, {
     size: getSize({ size: inputProps.size, sizes: EYE_DROPPER_SIZES })
   }));
@@ -158,9 +162,9 @@ const ColorInput = forwardRef((props, ref) => {
     setDropdownOpened(true);
   };
   const handleInputBlur = (event) => {
+    fixOnBlur && setValue(lastValidValue);
     onBlur == null ? void 0 : onBlur(event);
     setDropdownOpened(false);
-    fixOnBlur && setValue(lastValidValue);
   };
   const handleInputClick = (event) => {
     onClick == null ? void 0 : onClick(event);

package/esm/ColorInput/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../src/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate, useEyeDropper } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  getDefaultZIndex,\n  MantineShadow,\n  useMantineTheme,\n  rem,\n  getSize,\n} from '@mantine/styles';\nimport { noop } from '@mantine/utils';\nimport {\n  InputWrapperBaseProps,\n  InputWrapperStylesNames,\n  Input,\n  InputSharedProps,\n  InputStylesNames,\n  useInputProps,\n} from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ActionIcon } from '../ActionIcon';\nimport { Popover, PopoverStylesNames } from '../Popover';\nimport { PortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport {\n  ColorPicker,\n  ColorPickerBaseProps,\n  ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\nimport { EyeDropperIcon } from './EyeDropperIcon';\n\nexport type ColorInputStylesNames =\n  | InputWrapperStylesNames\n  | InputStylesNames\n  | ColorPickerStylesNames\n  | PopoverStylesNames;\n\nexport interface ColorInputProps\n  extends InputWrapperBaseProps,\n    InputSharedProps,\n    ColorPickerBaseProps,\n    DefaultProps<ColorInputStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'defaultValue' | 'value'> {\n  /** Disallow free input */\n  disallowInput?: boolean;\n\n  /** call onChange with last valid value onBlur */\n  fixOnBlur?: boolean;\n\n  /** Dropdown element z-index */\n  dropdownZIndex?: number;\n\n  /** Display swatch with color preview on the left side of input */\n  withPreview?: boolean;\n\n  /** Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 0, transition: 'fade' } by default */\n  transitionProps?: TransitionOverride;\n\n  /** Whether to render the dropdown in a Portal */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the portal when withinPortal is true */\n  portalProps?: PortalProps;\n\n  /** Dropdown box-shadow, key of theme.shadows */\n  shadow?: MantineShadow;\n\n  /** Determines whether eye dropper button should be displayed in the right section, true by default */\n  withEyeDropper?: boolean;\n\n  /** Replaces default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** Determines whether the dropdown should be closed when color swatch is clicked, false by default */\n  closeOnColorSwatchClick?: boolean;\n}\n\nconst SWATCH_SIZES = {\n  xs: rem(16),\n  sm: rem(18),\n  md: rem(22),\n  lg: rem(28),\n  xl: rem(36),\n};\n\nconst EYE_DROPPER_SIZES = {\n  xs: rem(14),\n  sm: rem(16),\n  md: rem(18),\n  lg: rem(20),\n  xl: rem(22),\n};\n\nconst defaultProps: Partial<ColorInputProps> = {\n  size: 'sm',\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 10,\n  withPicker: true,\n  transitionProps: { transition: 'fade', duration: 0 },\n  dropdownZIndex: getDefaultZIndex('popover'),\n  withinPortal: true,\n  shadow: 'md',\n  withEyeDropper: true,\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>((props, ref) => {\n  const {\n    wrapperProps,\n    inputProps,\n    format,\n    onChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    onClick,\n    value,\n    defaultValue,\n    disallowInput,\n    fixOnBlur,\n    withPreview,\n    swatchesPerRow,\n    withPicker,\n    icon,\n    transitionProps,\n    dropdownZIndex,\n    withinPortal,\n    portalProps,\n    swatches,\n    shadow,\n    classNames,\n    styles,\n    unstyled,\n    readOnly,\n    withEyeDropper,\n    eyeDropperIcon,\n    rightSection,\n    closeOnColorSwatchClick,\n    disabled,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, props);\n\n  const theme = useMantineTheme();\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      sx={{ color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black }}\n      size={inputProps.size}\n      onClick={() =>\n        openEyeDropper()\n          .then(({ sRGBHex }) => setValue(convertHsvaTo(format, parseColor(sRGBHex))))\n          .catch(noop)\n      }\n    >\n      {eyeDropperIcon || (\n        <EyeDropperIcon size={getSize({ size: inputProps.size, sizes: EYE_DROPPER_SIZES })} />\n      )}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setDropdownOpened(false);\n    fixOnBlur && setValue(lastValidValue);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper {...wrapperProps} __staticSelector=\"ColorInput\">\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        zIndex={dropdownZIndex}\n        withinPortal={withinPortal}\n        portalProps={portalProps}\n        transitionProps={transitionProps}\n        opened={dropdownOpened}\n        shadow={shadow}\n        classNames={classNames}\n        styles={styles}\n        unstyled={unstyled}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <div>\n            <Input<'input'>\n              autoComplete=\"nope\"\n              {...others}\n              {...inputProps}\n              disabled={disabled}\n              ref={ref}\n              __staticSelector=\"ColorInput\"\n              onFocus={handleInputFocus}\n              onBlur={handleInputBlur}\n              onClick={handleInputClick}\n              spellCheck={false}\n              value={_value}\n              onChange={(event) => {\n                const inputValue = event.currentTarget.value;\n                setValue(inputValue);\n                if (isColorValid(inputValue)) {\n                  onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n                }\n              }}\n              icon={\n                icon ||\n                (withPreview ? (\n                  <ColorSwatch\n                    color={isColorValid(_value) ? _value : '#fff'}\n                    size={getSize({ size: inputProps.size, sizes: SWATCH_SIZES })}\n                  />\n                ) : null)\n              }\n              readOnly={disallowInput || readOnly}\n              sx={{ cursor: disallowInput ? 'pointer' : undefined }}\n              unstyled={unstyled}\n              classNames={classNames}\n              styles={styles}\n              rightSection={\n                rightSection ||\n                (withEyeDropper && !disabled && !readOnly && eyeDropperSupported\n                  ? eyeDropper\n                  : null)\n              }\n            />\n          </div>\n        </Popover.Target>\n\n        <Popover.Dropdown onMouseDown={(event) => event.preventDefault()} p={inputProps.size}>\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={styles}\n            classNames={classNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../src/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate, useEyeDropper } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  getDefaultZIndex,\n  MantineShadow,\n  useMantineTheme,\n  rem,\n  getSize,\n} from '@mantine/styles';\nimport { noop } from '@mantine/utils';\nimport {\n  InputWrapperBaseProps,\n  InputWrapperStylesNames,\n  Input,\n  InputSharedProps,\n  InputStylesNames,\n  useInputProps,\n} from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { ActionIcon } from '../ActionIcon';\nimport { Popover, PopoverStylesNames } from '../Popover';\nimport { PortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport {\n  ColorPicker,\n  ColorPickerBaseProps,\n  ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\nimport { EyeDropperIcon } from './EyeDropperIcon';\n\nexport type ColorInputStylesNames =\n  | InputWrapperStylesNames\n  | InputStylesNames\n  | ColorPickerStylesNames\n  | PopoverStylesNames;\n\nexport interface ColorInputProps\n  extends InputWrapperBaseProps,\n    InputSharedProps,\n    ColorPickerBaseProps,\n    DefaultProps<ColorInputStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'defaultValue' | 'value'> {\n  /** Disallow free input */\n  disallowInput?: boolean;\n\n  /** call onChange with last valid value onBlur */\n  fixOnBlur?: boolean;\n\n  /** Dropdown element z-index */\n  dropdownZIndex?: number;\n\n  /** Display swatch with color preview on the left side of input */\n  withPreview?: boolean;\n\n  /** Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 0, transition: 'fade' } by default */\n  transitionProps?: TransitionOverride;\n\n  /** Whether to render the dropdown in a Portal */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the portal when withinPortal is true */\n  portalProps?: Omit<PortalProps, 'children' | 'withinPortal'>;\n\n  /** Dropdown box-shadow, key of theme.shadows */\n  shadow?: MantineShadow;\n\n  /** Determines whether eye dropper button should be displayed in the right section, true by default */\n  withEyeDropper?: boolean;\n\n  /** Replaces default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** Determines whether the dropdown should be closed when color swatch is clicked, false by default */\n  closeOnColorSwatchClick?: boolean;\n}\n\nconst SWATCH_SIZES = {\n  xs: rem(16),\n  sm: rem(18),\n  md: rem(22),\n  lg: rem(28),\n  xl: rem(36),\n};\n\nconst EYE_DROPPER_SIZES = {\n  xs: rem(14),\n  sm: rem(16),\n  md: rem(18),\n  lg: rem(20),\n  xl: rem(22),\n};\n\nconst defaultProps: Partial<ColorInputProps> = {\n  size: 'sm',\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 10,\n  withPicker: true,\n  transitionProps: { transition: 'fade', duration: 0 },\n  dropdownZIndex: getDefaultZIndex('popover'),\n  withinPortal: true,\n  shadow: 'md',\n  withEyeDropper: true,\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>((props, ref) => {\n  const {\n    wrapperProps,\n    inputProps,\n    format,\n    onChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    onClick,\n    value,\n    defaultValue,\n    disallowInput,\n    fixOnBlur,\n    withPreview,\n    swatchesPerRow,\n    withPicker,\n    icon,\n    transitionProps,\n    dropdownZIndex,\n    withinPortal,\n    portalProps,\n    swatches,\n    shadow,\n    classNames,\n    styles,\n    unstyled,\n    readOnly,\n    withEyeDropper,\n    eyeDropperIcon,\n    rightSection,\n    closeOnColorSwatchClick,\n    disabled,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, props);\n\n  const theme = useMantineTheme();\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      sx={{ color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black }}\n      size={inputProps.size}\n      onClick={() =>\n        openEyeDropper()\n          .then(({ sRGBHex }) => {\n            const color = convertHsvaTo(format, parseColor(sRGBHex));\n            setValue(color);\n            onChangeEnd?.(color);\n          })\n          .catch(noop)\n      }\n    >\n      {eyeDropperIcon || (\n        <EyeDropperIcon size={getSize({ size: inputProps.size, sizes: EYE_DROPPER_SIZES })} />\n      )}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper {...wrapperProps} __staticSelector=\"ColorInput\">\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        zIndex={dropdownZIndex}\n        withinPortal={withinPortal}\n        portalProps={portalProps}\n        transitionProps={transitionProps}\n        opened={dropdownOpened}\n        shadow={shadow}\n        classNames={classNames}\n        styles={styles}\n        unstyled={unstyled}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <div>\n            <Input<'input'>\n              autoComplete=\"nope\"\n              {...others}\n              {...inputProps}\n              disabled={disabled}\n              ref={ref}\n              __staticSelector=\"ColorInput\"\n              onFocus={handleInputFocus}\n              onBlur={handleInputBlur}\n              onClick={handleInputClick}\n              spellCheck={false}\n              value={_value}\n              onChange={(event) => {\n                const inputValue = event.currentTarget.value;\n                setValue(inputValue);\n                if (isColorValid(inputValue)) {\n                  onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n                }\n              }}\n              icon={\n                icon ||\n                (withPreview ? (\n                  <ColorSwatch\n                    color={isColorValid(_value) ? _value : '#fff'}\n                    size={getSize({ size: inputProps.size, sizes: SWATCH_SIZES })}\n                  />\n                ) : null)\n              }\n              readOnly={disallowInput || readOnly}\n              sx={{ cursor: disallowInput ? 'pointer' : undefined }}\n              unstyled={unstyled}\n              classNames={classNames}\n              styles={styles}\n              rightSection={\n                rightSection ||\n                (withEyeDropper && !disabled && !readOnly && eyeDropperSupported\n                  ? eyeDropper\n                  : null)\n              }\n            />\n          </div>\n        </Popover.Target>\n\n        <Popover.Dropdown onMouseDown={(event) => event.preventDefault()} p={inputProps.size}>\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={styles}\n            classNames={classNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":"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"}

package/esm/ColorPicker/ColorPicker.js

@@ -107,7 +107,7 @@ const ColorPicker = forwardRef((props, ref) => {
   const valueRef = useRef(null);
   const updateRef = useRef(true);
   const withAlpha = format === "hexa" || format === "rgba" || format === "hsla";
-  const [_value, setValue] = useUncontrolled({
+  const [_value, setValue, controlled] = useUncontrolled({
     value,
     defaultValue,
     finalValue: "#FFFFFF",
@@ -196,6 +196,9 @@ const ColorPicker = forwardRef((props, ref) => {
       const convertedColor = convertHsvaTo(format, parseColor(color));
       onColorSwatchClick == null ? void 0 : onColorSwatchClick(convertedColor);
       onChangeEnd == null ? void 0 : onChangeEnd(convertedColor);
+      if (!controlled) {
+        setParsed(parseColor(color));
+      }
     }
   }));
 });

package/esm/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineSize,\n  Selectors,\n  useComponentDefaultProps,\n  getSize,\n  rem,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { ColorFormat, HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n  | Selectors<typeof useStyles>\n  | ColorSliderStylesNames\n  | SwatchesStylesNames\n  | SaturationStylesNames\n  | ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when color changes */\n  onChange?(color: string): void;\n\n  /** Called when user stops dragging thumb or changes value with arrows */\n  onChangeEnd?(color: string): void;\n\n  /** Color format */\n  format?: ColorFormat;\n\n  /** Set to false to display swatches only */\n  withPicker?: boolean;\n\n  /** Predefined colors */\n  swatches?: string[];\n\n  /** Number of swatches displayed in one row */\n  swatchesPerRow?: number;\n\n  /** Predefined component size */\n  size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n  extends DefaultProps<ColorPickerStylesNames>,\n    ColorPickerBaseProps,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  variant?: string;\n\n  /** Force picker to take 100% width of its container */\n  fullWidth?: boolean;\n\n  /** Should interactive elements be focusable */\n  focusable?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\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 color swatch is clicked */\n  onColorSwatchClick?(color: string): void;\n}\n\nconst SWATCH_SIZES = {\n  xs: 26,\n  sm: 34,\n  md: 42,\n  lg: 50,\n  xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n  swatchesPerRow: 10,\n  size: 'sm',\n  withPicker: true,\n  focusable: true,\n  __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (props: ColorPickerProps, ref) => {\n    const {\n      value,\n      defaultValue,\n      onChange,\n      onChangeEnd,\n      format,\n      swatches,\n      swatchesPerRow,\n      size,\n      withPicker,\n      fullWidth,\n      focusable,\n      __staticSelector,\n      saturationLabel,\n      hueLabel,\n      alphaLabel,\n      className,\n      styles,\n      classNames,\n      unstyled,\n      onColorSwatchClick,\n      variant,\n      ...others\n    } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n    const { classes, cx } = useStyles(\n      { fullWidth },\n      { classNames, styles, name: __staticSelector, unstyled, variant, size }\n    );\n    const formatRef = useRef(format);\n    const valueRef = useRef<string>(null);\n    const updateRef = useRef(true);\n    const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n    const [_value, setValue] = useUncontrolled({\n      value,\n      defaultValue,\n      finalValue: '#FFFFFF',\n      onChange,\n    });\n\n    const [parsed, setParsed] = useState(parseColor(_value));\n\n    const handleChange = (color: Partial<HsvaColor>) => {\n      updateRef.current = false;\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      // Does not work any other way\n      setTimeout(() => {\n        updateRef.current = true;\n      }, 0);\n    };\n\n    useDidUpdate(() => {\n      if (isColorValid(value) && updateRef.current) {\n        setParsed(parseColor(value));\n        updateRef.current = true;\n      }\n    }, [value]);\n\n    useDidUpdate(() => {\n      formatRef.current = format;\n      setValue(convertHsvaTo(format, parsed));\n    }, [format]);\n\n    return (\n      <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s, v }))\n              }\n              color={_value}\n              styles={styles}\n              classNames={classNames}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              __staticSelector={__staticSelector}\n            />\n\n            <div className={classes.body}>\n              <div className={classes.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                  styles={styles}\n                  classNames={classNames}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  __staticSelector={__staticSelector}\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                    style={{ marginTop: rem(6) }}\n                    styles={styles}\n                    classNames={classNames}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    __staticSelector={__staticSelector}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size={getSize({ size, sizes: SWATCH_SIZES })}\n                  className={classes.preview}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            style={{ marginTop: rem(5) }}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            classNames={classNames}\n            styles={styles}\n            __staticSelector={__staticSelector}\n            setValue={setValue}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n            }}\n          />\n        )}\n      </Box>\n    );\n  }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineSize,\n  Selectors,\n  useComponentDefaultProps,\n  getSize,\n  rem,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { ColorFormat, HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n  | Selectors<typeof useStyles>\n  | ColorSliderStylesNames\n  | SwatchesStylesNames\n  | SaturationStylesNames\n  | ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when color changes */\n  onChange?(color: string): void;\n\n  /** Called when user stops dragging thumb or changes value with arrows */\n  onChangeEnd?(color: string): void;\n\n  /** Color format */\n  format?: ColorFormat;\n\n  /** Set to false to display swatches only */\n  withPicker?: boolean;\n\n  /** Predefined colors */\n  swatches?: string[];\n\n  /** Number of swatches displayed in one row */\n  swatchesPerRow?: number;\n\n  /** Predefined component size */\n  size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n  extends DefaultProps<ColorPickerStylesNames>,\n    ColorPickerBaseProps,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  variant?: string;\n\n  /** Force picker to take 100% width of its container */\n  fullWidth?: boolean;\n\n  /** Should interactive elements be focusable */\n  focusable?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\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 color swatch is clicked */\n  onColorSwatchClick?(color: string): void;\n}\n\nconst SWATCH_SIZES = {\n  xs: 26,\n  sm: 34,\n  md: 42,\n  lg: 50,\n  xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n  swatchesPerRow: 10,\n  size: 'sm',\n  withPicker: true,\n  focusable: true,\n  __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (props: ColorPickerProps, ref) => {\n    const {\n      value,\n      defaultValue,\n      onChange,\n      onChangeEnd,\n      format,\n      swatches,\n      swatchesPerRow,\n      size,\n      withPicker,\n      fullWidth,\n      focusable,\n      __staticSelector,\n      saturationLabel,\n      hueLabel,\n      alphaLabel,\n      className,\n      styles,\n      classNames,\n      unstyled,\n      onColorSwatchClick,\n      variant,\n      ...others\n    } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n    const { classes, cx } = useStyles(\n      { fullWidth },\n      { classNames, styles, name: __staticSelector, unstyled, variant, size }\n    );\n    const formatRef = useRef(format);\n    const valueRef = useRef<string>(null);\n    const updateRef = useRef(true);\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(parseColor(_value));\n\n    const handleChange = (color: Partial<HsvaColor>) => {\n      updateRef.current = false;\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      // Does not work any other way\n      setTimeout(() => {\n        updateRef.current = true;\n      }, 0);\n    };\n\n    useDidUpdate(() => {\n      if (isColorValid(value) && updateRef.current) {\n        setParsed(parseColor(value));\n        updateRef.current = true;\n      }\n    }, [value]);\n\n    useDidUpdate(() => {\n      formatRef.current = format;\n      setValue(convertHsvaTo(format, parsed));\n    }, [format]);\n\n    return (\n      <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s, v }))\n              }\n              color={_value}\n              styles={styles}\n              classNames={classNames}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              __staticSelector={__staticSelector}\n            />\n\n            <div className={classes.body}>\n              <div className={classes.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                  styles={styles}\n                  classNames={classNames}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  __staticSelector={__staticSelector}\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                    style={{ marginTop: rem(6) }}\n                    styles={styles}\n                    classNames={classNames}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    __staticSelector={__staticSelector}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size={getSize({ size, sizes: SWATCH_SIZES })}\n                  className={classes.preview}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            style={{ marginTop: rem(5) }}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            classNames={classNames}\n            styles={styles}\n            __staticSelector={__staticSelector}\n            setValue={setValue}\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    );\n  }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}

package/esm/Image/Image.js

@@ -7,6 +7,8 @@ import { Box } from '../Box/Box.js';
 import { Text } from '../Text/Text.js';
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -22,6 +24,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -92,17 +95,18 @@ const Image = forwardRef((props, ref) => {
     className: classes.figure
   }, /* @__PURE__ */ React.createElement("div", {
     className: classes.imageWrapper
-  }, /* @__PURE__ */ React.createElement("img", __spreadValues({
-    className: classes.image,
+  }, /* @__PURE__ */ React.createElement("img", __spreadProps(__spreadValues({
     src,
     alt,
-    style: { objectFit: fit, width: rem(width), height: rem(height) },
-    ref: imageRef,
+    ref: imageRef
+  }, imageProps), {
+    className: cx(classes.image, imageProps == null ? void 0 : imageProps.className),
     onError: (event) => {
       setError(true);
       typeof (imageProps == null ? void 0 : imageProps.onError) === "function" && imageProps.onError(event);
-    }
-  }, imageProps)), isPlaceholder && /* @__PURE__ */ React.createElement("div", {
+    },
+    style: __spreadValues({ objectFit: fit, width: rem(width), height: rem(height) }, imageProps == null ? void 0 : imageProps.style)
+  })), isPlaceholder && /* @__PURE__ */ React.createElement("div", {
     className: classes.placeholder,
     title: alt
   }, placeholder || /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ImageIcon, {

package/esm/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  Selectors,\n  useComponentDefaultProps,\n  rem,\n} from '@mantine/styles';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles, { ImageStylesParams } from './Image.styles';\n\nexport type ImageStylesNames = Selectors<typeof useStyles>;\n\nexport interface ImageProps\n  extends DefaultProps<ImageStylesNames, ImageStylesParams>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n  variant?: string;\n\n  /** Image src */\n  src?: string | null;\n\n  /** Image alt text, used as title for placeholder if image was not loaded */\n  alt?: string;\n\n  /** Image object-fit property */\n  fit?: React.CSSProperties['objectFit'];\n\n  /** Image width, defaults to 100%, cannot exceed 100% */\n  width?: number | string;\n\n  /** Image height, defaults to original image height adjusted to given width */\n  height?: number | string;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, 0 by default */\n  radius?: MantineNumberSize;\n\n  /** Enable placeholder when image is loading and when image fails to load */\n  withPlaceholder?: boolean;\n\n  /** Customize placeholder content */\n  placeholder?: React.ReactNode;\n\n  /** Props spread to img element */\n  imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n  /** Get image element ref */\n  imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n  /** Image figcaption, displayed below image */\n  caption?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ImageProps> = {\n  fit: 'cover',\n  width: '100%',\n  height: 'auto',\n  radius: 0,\n};\n\nexport const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps, ref) => {\n  const {\n    className,\n    alt,\n    src,\n    fit,\n    width,\n    height,\n    radius,\n    imageProps,\n    withPlaceholder,\n    placeholder,\n    imageRef,\n    classNames,\n    styles,\n    caption,\n    unstyled,\n    style,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Image', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { radius },\n    { classNames, styles, unstyled, name: 'Image', variant }\n  );\n\n  const [error, setError] = useState(!src);\n  const isPlaceholder = withPlaceholder && error;\n\n  useDidUpdate(() => {\n    setError(!src);\n  }, [src]);\n\n  return (\n    <Box\n      className={cx(classes.root, className)}\n      style={{ width: rem(width), ...style }}\n      ref={ref}\n      {...others}\n    >\n      <figure className={classes.figure}>\n        <div className={classes.imageWrapper}>\n          <img\n            className={classes.image}\n            src={src}\n            alt={alt}\n            style={{ objectFit: fit, width: rem(width), height: rem(height) }}\n            ref={imageRef}\n            onError={(event) => {\n              setError(true);\n              typeof imageProps?.onError === 'function' && imageProps.onError(event);\n            }}\n            {...imageProps}\n          />\n\n          {isPlaceholder && (\n            <div className={classes.placeholder} title={alt}>\n              {placeholder || (\n                <div>\n                  <ImageIcon width={rem(40)} height={rem(40)} />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {!!caption && (\n          <Text component=\"figcaption\" size=\"sm\" align=\"center\" className={classes.caption}>\n            {caption}\n          </Text>\n        )}\n      </figure>\n    </Box>\n  );\n});\n\nImage.displayName = '@mantine/core/Image';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  Selectors,\n  useComponentDefaultProps,\n  rem,\n} from '@mantine/styles';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles, { ImageStylesParams } from './Image.styles';\n\nexport type ImageStylesNames = Selectors<typeof useStyles>;\n\nexport interface ImageProps\n  extends DefaultProps<ImageStylesNames, ImageStylesParams>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n  variant?: string;\n\n  /** Image src */\n  src?: string | null;\n\n  /** Image alt text, used as title for placeholder if image was not loaded */\n  alt?: string;\n\n  /** Image object-fit property */\n  fit?: React.CSSProperties['objectFit'];\n\n  /** Image width, defaults to 100%, cannot exceed 100% */\n  width?: number | string;\n\n  /** Image height, defaults to original image height adjusted to given width */\n  height?: number | string;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, 0 by default */\n  radius?: MantineNumberSize;\n\n  /** Enable placeholder when image is loading and when image fails to load */\n  withPlaceholder?: boolean;\n\n  /** Customize placeholder content */\n  placeholder?: React.ReactNode;\n\n  /** Props spread to img element */\n  imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n  /** Get image element ref */\n  imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n  /** Image figcaption, displayed below image */\n  caption?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ImageProps> = {\n  fit: 'cover',\n  width: '100%',\n  height: 'auto',\n  radius: 0,\n};\n\nexport const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps, ref) => {\n  const {\n    className,\n    alt,\n    src,\n    fit,\n    width,\n    height,\n    radius,\n    imageProps,\n    withPlaceholder,\n    placeholder,\n    imageRef,\n    classNames,\n    styles,\n    caption,\n    unstyled,\n    style,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Image', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { radius },\n    { classNames, styles, unstyled, name: 'Image', variant }\n  );\n\n  const [error, setError] = useState(!src);\n  const isPlaceholder = withPlaceholder && error;\n\n  useDidUpdate(() => {\n    setError(!src);\n  }, [src]);\n\n  return (\n    <Box\n      className={cx(classes.root, className)}\n      style={{ width: rem(width), ...style }}\n      ref={ref}\n      {...others}\n    >\n      <figure className={classes.figure}>\n        <div className={classes.imageWrapper}>\n          <img\n            src={src}\n            alt={alt}\n            ref={imageRef}\n            {...imageProps}\n            className={cx(classes.image, imageProps?.className)}\n            onError={(event) => {\n              setError(true);\n              typeof imageProps?.onError === 'function' && imageProps.onError(event);\n            }}\n            style={{ objectFit: fit, width: rem(width), height: rem(height), ...imageProps?.style }}\n          />\n\n          {isPlaceholder && (\n            <div className={classes.placeholder} title={alt}>\n              {placeholder || (\n                <div>\n                  <ImageIcon width={rem(40)} height={rem(40)} />\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {!!caption && (\n          <Text component=\"figcaption\" size=\"sm\" align=\"center\" className={classes.caption}>\n            {caption}\n          </Text>\n        )}\n      </figure>\n    </Box>\n  );\n});\n\nImage.displayName = '@mantine/core/Image';\n"],"names":[],"mappings":"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"}

package/esm/ModalBase/ModalBase.js

@@ -129,10 +129,10 @@ function ModalBase(props) {
     }
   });
   useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });
-  return /* @__PURE__ */ React.createElement(OptionalPortal, __spreadValues({
+  return /* @__PURE__ */ React.createElement(OptionalPortal, __spreadProps(__spreadValues({}, portalProps), {
     withinPortal,
     target
-  }, portalProps), /* @__PURE__ */ React.createElement(ModalBaseProvider, {
+  }), /* @__PURE__ */ React.createElement(ModalBaseProvider, {
     value: {
       __staticSelector,
       opened,

package/esm/ModalBase/ModalBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBase.js","sources":["../../src/ModalBase/ModalBase.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { useState } from 'react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { useId, useWindowEvent, useFocusReturn } from '@mantine/hooks';\nimport {\n  getDefaultZIndex,\n  MantineNumberSize,\n  useComponentDefaultProps,\n  ClassNames,\n  Styles,\n  MantineShadow,\n  Selectors,\n} from '@mantine/styles';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport {\n  ModalBaseCloseButton,\n  ModalBaseCloseButtonStylesNames,\n} from './ModalBaseCloseButton/ModalBaseCloseButton';\nimport { ModalBaseOverlay, ModalBaseOverlayStylesNames } from './ModalBaseOverlay/ModalBaseOverlay';\nimport { ModalBaseContent, ModalBaseContentStylesNames } from './ModalBaseContent/ModalBaseContent';\nimport { ModalBaseHeader, ModalBaseHeaderStylesNames } from './ModalBaseHeader/ModalBaseHeader';\nimport { ModalBaseTitle, ModalBaseTitleStylesNames } from './ModalBaseTitle/ModalBaseTitle';\nimport { ModalBaseBody, ModalBaseBodyStylesNames } from './ModalBaseBody/ModalBaseBody';\nimport { NativeScrollArea } from './NativeScrollArea/NativeScrollArea';\nimport { useLockScroll } from './use-lock-scroll';\nimport useStyles from './ModalBase.styles';\n\nexport type ModalBaseStylesNames =\n  | Selectors<typeof useStyles>\n  | ModalBaseCloseButtonStylesNames\n  | ModalBaseOverlayStylesNames\n  | ModalBaseContentStylesNames\n  | ModalBaseHeaderStylesNames\n  | ModalBaseTitleStylesNames\n  | ModalBaseBodyStylesNames;\n\nexport interface ModalBaseSettings extends React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n  classNames?: ClassNames<ModalBaseStylesNames>;\n  styles?: Styles<ModalBaseStylesNames>;\n  unstyled?: boolean;\n\n  /** If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead */\n  keepMounted?: boolean;\n\n  /** Determines whether modal/drawer is opened */\n  opened: boolean;\n\n  /** Called when modal/drawer is closed */\n  onClose(): void;\n\n  /** Child component */\n  children?: React.ReactNode;\n\n  /** Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default */\n  closeOnClickOutside?: boolean;\n\n  /** Props added to Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'pop' } by default */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether component should be rendered inside Portal, true by default */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the portal when withinPortal is true */\n  portalProps?: Omit<PortalProps, 'target'>;\n\n  /** Target element or selector where Portal should be rendered, by default new element is created and appended to the document.body */\n  target?: HTMLElement | string;\n\n  /** Determines whether scroll should be locked when opened={true}, defaults to true */\n  lockScroll?: boolean;\n\n  /** Determines whether focus should be trapped, true by default */\n  trapFocus?: boolean;\n\n  /** z-index CSS property of root element, 200 by default */\n  zIndex?: number;\n\n  /** Key of theme.spacing or any valid CSS value to set content, header and footer padding, 'md' by default */\n  padding?: MantineNumberSize;\n\n  /** Id used to connect modal/drawer with body and title */\n  id?: string;\n\n  /** Determines whether focus should be returned to the last active element onClose is called, true by default */\n  returnFocus?: boolean;\n\n  /** Determines whether onClose should be called when user presses escape key, true by default */\n  closeOnEscape?: boolean;\n\n  /** Controls content width, 'md' by default */\n  size?: MantineNumberSize;\n\n  /** Key of theme.shadows or any valid css box-shadow value, 'xl' by default */\n  shadow?: MantineShadow;\n}\n\nexport interface ModalBaseProps extends ModalBaseSettings {\n  /** Base component name for styles and components default props */\n  __staticSelector: string;\n}\n\nexport const ModalBaseDefaultProps: Partial<ModalBaseProps> = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  padding: 'md',\n  size: 'md',\n  shadow: 'xl',\n};\n\nexport function ModalBase(props: ModalBaseProps) {\n  const {\n    opened,\n    onClose,\n    children,\n    closeOnClickOutside,\n    __staticSelector,\n    transitionProps,\n    withinPortal,\n    portalProps,\n    keepMounted,\n    target,\n    zIndex,\n    lockScroll,\n    trapFocus,\n    closeOnEscape,\n    returnFocus,\n    padding,\n    shadow,\n    id,\n    size,\n    variant,\n    classNames,\n    unstyled,\n    styles,\n    className,\n    ...others\n  } = useComponentDefaultProps('ModalBase', ModalBaseDefaultProps, props);\n\n  const { classes, cx } = useStyles(null, {\n    name: __staticSelector,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    size,\n  });\n\n  const _id = useId(id);\n  const [titleMounted, setTitleMounted] = useState(false);\n  const [bodyMounted, setBodyMounted] = useState(false);\n\n  const transitionDuration =\n    typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n  const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n  useWindowEvent('keydown', (event) => {\n    if (!trapFocus && event.key === 'Escape' && closeOnEscape) {\n      onClose();\n    }\n  });\n\n  useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });\n\n  return (\n    <OptionalPortal withinPortal={withinPortal} target={target} {...portalProps}>\n      <ModalBaseProvider\n        value={{\n          __staticSelector,\n          opened,\n          onClose,\n          closeOnClickOutside,\n          transitionProps: { ...transitionProps, duration: transitionDuration, keepMounted },\n          zIndex,\n          padding,\n          id: _id,\n          getTitleId: () => `${_id}-title`,\n          getBodyId: () => `${_id}-body`,\n          titleMounted,\n          bodyMounted,\n          setTitleMounted,\n          setBodyMounted,\n          trapFocus,\n          closeOnEscape,\n          shadow,\n          stylesApi: {\n            name: __staticSelector,\n            size,\n            variant,\n            classNames,\n            styles,\n            unstyled,\n          },\n        }}\n      >\n        <RemoveScroll enabled={shouldLockScroll && lockScroll}>\n          <div className={cx(classes.root, className)} {...others}>\n            {children}\n          </div>\n        </RemoveScroll>\n      </ModalBaseProvider>\n    </OptionalPortal>\n  );\n}\n\nModalBase.CloseButton = ModalBaseCloseButton;\nModalBase.Overlay = ModalBaseOverlay;\nModalBase.Content = ModalBaseContent;\nModalBase.Header = ModalBaseHeader;\nModalBase.Title = ModalBaseTitle;\nModalBase.Body = ModalBaseBody;\nModalBase.NativeScrollArea = NativeScrollArea;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModalBase.js","sources":["../../src/ModalBase/ModalBase.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { useState } from 'react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { useId, useWindowEvent, useFocusReturn } from '@mantine/hooks';\nimport {\n  getDefaultZIndex,\n  MantineNumberSize,\n  useComponentDefaultProps,\n  ClassNames,\n  Styles,\n  MantineShadow,\n  Selectors,\n} from '@mantine/styles';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport {\n  ModalBaseCloseButton,\n  ModalBaseCloseButtonStylesNames,\n} from './ModalBaseCloseButton/ModalBaseCloseButton';\nimport { ModalBaseOverlay, ModalBaseOverlayStylesNames } from './ModalBaseOverlay/ModalBaseOverlay';\nimport { ModalBaseContent, ModalBaseContentStylesNames } from './ModalBaseContent/ModalBaseContent';\nimport { ModalBaseHeader, ModalBaseHeaderStylesNames } from './ModalBaseHeader/ModalBaseHeader';\nimport { ModalBaseTitle, ModalBaseTitleStylesNames } from './ModalBaseTitle/ModalBaseTitle';\nimport { ModalBaseBody, ModalBaseBodyStylesNames } from './ModalBaseBody/ModalBaseBody';\nimport { NativeScrollArea } from './NativeScrollArea/NativeScrollArea';\nimport { useLockScroll } from './use-lock-scroll';\nimport useStyles from './ModalBase.styles';\n\nexport type ModalBaseStylesNames =\n  | Selectors<typeof useStyles>\n  | ModalBaseCloseButtonStylesNames\n  | ModalBaseOverlayStylesNames\n  | ModalBaseContentStylesNames\n  | ModalBaseHeaderStylesNames\n  | ModalBaseTitleStylesNames\n  | ModalBaseBodyStylesNames;\n\nexport interface ModalBaseSettings extends React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n  classNames?: ClassNames<ModalBaseStylesNames>;\n  styles?: Styles<ModalBaseStylesNames>;\n  unstyled?: boolean;\n\n  /** If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead */\n  keepMounted?: boolean;\n\n  /** Determines whether modal/drawer is opened */\n  opened: boolean;\n\n  /** Called when modal/drawer is closed */\n  onClose(): void;\n\n  /** Child component */\n  children?: React.ReactNode;\n\n  /** Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default */\n  closeOnClickOutside?: boolean;\n\n  /** Props added to Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'pop' } by default */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether component should be rendered inside Portal, true by default */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the portal when withinPortal is true */\n  portalProps?: Omit<PortalProps, 'children' | 'withinPortal' | 'target'>;\n\n  /** Target element or selector where Portal should be rendered, by default new element is created and appended to the document.body */\n  target?: HTMLElement | string;\n\n  /** Determines whether scroll should be locked when opened={true}, defaults to true */\n  lockScroll?: boolean;\n\n  /** Determines whether focus should be trapped, true by default */\n  trapFocus?: boolean;\n\n  /** z-index CSS property of root element, 200 by default */\n  zIndex?: number;\n\n  /** Key of theme.spacing or any valid CSS value to set content, header and footer padding, 'md' by default */\n  padding?: MantineNumberSize;\n\n  /** Id used to connect modal/drawer with body and title */\n  id?: string;\n\n  /** Determines whether focus should be returned to the last active element onClose is called, true by default */\n  returnFocus?: boolean;\n\n  /** Determines whether onClose should be called when user presses escape key, true by default */\n  closeOnEscape?: boolean;\n\n  /** Controls content width, 'md' by default */\n  size?: MantineNumberSize;\n\n  /** Key of theme.shadows or any valid css box-shadow value, 'xl' by default */\n  shadow?: MantineShadow;\n}\n\nexport interface ModalBaseProps extends ModalBaseSettings {\n  /** Base component name for styles and components default props */\n  __staticSelector: string;\n}\n\nexport const ModalBaseDefaultProps: Partial<ModalBaseProps> = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  padding: 'md',\n  size: 'md',\n  shadow: 'xl',\n};\n\nexport function ModalBase(props: ModalBaseProps) {\n  const {\n    opened,\n    onClose,\n    children,\n    closeOnClickOutside,\n    __staticSelector,\n    transitionProps,\n    withinPortal,\n    portalProps,\n    keepMounted,\n    target,\n    zIndex,\n    lockScroll,\n    trapFocus,\n    closeOnEscape,\n    returnFocus,\n    padding,\n    shadow,\n    id,\n    size,\n    variant,\n    classNames,\n    unstyled,\n    styles,\n    className,\n    ...others\n  } = useComponentDefaultProps('ModalBase', ModalBaseDefaultProps, props);\n\n  const { classes, cx } = useStyles(null, {\n    name: __staticSelector,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    size,\n  });\n\n  const _id = useId(id);\n  const [titleMounted, setTitleMounted] = useState(false);\n  const [bodyMounted, setBodyMounted] = useState(false);\n\n  const transitionDuration =\n    typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n  const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n  useWindowEvent('keydown', (event) => {\n    if (!trapFocus && event.key === 'Escape' && closeOnEscape) {\n      onClose();\n    }\n  });\n\n  useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });\n\n  return (\n    <OptionalPortal {...portalProps} withinPortal={withinPortal} target={target}>\n      <ModalBaseProvider\n        value={{\n          __staticSelector,\n          opened,\n          onClose,\n          closeOnClickOutside,\n          transitionProps: { ...transitionProps, duration: transitionDuration, keepMounted },\n          zIndex,\n          padding,\n          id: _id,\n          getTitleId: () => `${_id}-title`,\n          getBodyId: () => `${_id}-body`,\n          titleMounted,\n          bodyMounted,\n          setTitleMounted,\n          setBodyMounted,\n          trapFocus,\n          closeOnEscape,\n          shadow,\n          stylesApi: {\n            name: __staticSelector,\n            size,\n            variant,\n            classNames,\n            styles,\n            unstyled,\n          },\n        }}\n      >\n        <RemoveScroll enabled={shouldLockScroll && lockScroll}>\n          <div className={cx(classes.root, className)} {...others}>\n            {children}\n          </div>\n        </RemoveScroll>\n      </ModalBaseProvider>\n    </OptionalPortal>\n  );\n}\n\nModalBase.CloseButton = ModalBaseCloseButton;\nModalBase.Overlay = ModalBaseOverlay;\nModalBase.Content = ModalBaseContent;\nModalBase.Header = ModalBaseHeader;\nModalBase.Title = ModalBaseTitle;\nModalBase.Body = ModalBaseBody;\nModalBase.NativeScrollArea = NativeScrollArea;\n"],"names":[],"mappings":"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"}

package/esm/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.js

@@ -1,7 +1,10 @@
 import { createStyles } from '@mantine/styles';
 
 var useStyles = createStyles(() => ({
-  close: {}
+  close: {
+    marginLeft: "auto",
+    marginRight: 0
+  }
 }));
 
 export default useStyles;

package/esm/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBaseCloseButton.styles.js","sources":["../../../src/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport default createStyles(() => ({\n  close: {},\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,OAAO;AACnC,EAAE,KAAK,EAAE,EAAE;AACX,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"ModalBaseCloseButton.styles.js","sources":["../../../src/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport default createStyles(() => ({\n  close: {\n    marginLeft: 'auto',\n    marginRight: 0,\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,OAAO;AACnC,EAAE,KAAK,EAAE;AACT,IAAI,UAAU,EAAE,MAAM;AACtB,IAAI,WAAW,EAAE,CAAC;AAClB,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/esm/MultiSelect/DefaultValue/DefaultValue.styles.js

@@ -28,7 +28,7 @@ var useStyles = createStyles((theme, { disabled, radius, readOnly }, { size, var
     borderRadius: getSize({ size: radius, sizes: theme.radius }),
     cursor: disabled ? "not-allowed" : "default",
     userSelect: "none",
-    maxWidth: `calc(100% - ${rem(20)})`
+    maxWidth: `calc(100% - ${rem(10)})`
   },
   defaultValueRemove: {
     color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],

package/esm/MultiSelect/DefaultValue/DefaultValue.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultValue.styles.js","sources":["../../../src/MultiSelect/DefaultValue/DefaultValue.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, rem, getSize } from '@mantine/styles';\n\ninterface DefaultLabelStyles {\n  radius: MantineNumberSize;\n  disabled: boolean;\n  readOnly: boolean;\n}\n\nexport const sizes = {\n  xs: rem(16),\n  sm: rem(22),\n  md: rem(26),\n  lg: rem(30),\n  xl: rem(36),\n};\n\nconst fontSizes = {\n  xs: rem(10),\n  sm: rem(12),\n  md: rem(14),\n  lg: rem(16),\n  xl: rem(18),\n};\n\nexport default createStyles(\n  (theme, { disabled, radius, readOnly }: DefaultLabelStyles, { size, variant }) => ({\n    defaultValue: {\n      display: 'flex',\n      alignItems: 'center',\n      backgroundColor: disabled\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[5]\n          : theme.colors.gray[3]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[7]\n        : variant === 'filled'\n        ? theme.white\n        : theme.colors.gray[1],\n      color: disabled\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[1]\n          : theme.colors.gray[7]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[0]\n        : theme.colors.gray[7],\n      height: getSize({ size, sizes }),\n      paddingLeft: `calc(${getSize({ size, sizes: theme.spacing })} / 1.5)`,\n      paddingRight: disabled || readOnly ? getSize({ size, sizes: theme.spacing }) : 0,\n      fontWeight: 500,\n      fontSize: getSize({ size, sizes: fontSizes }),\n      borderRadius: getSize({ size: radius, sizes: theme.radius }),\n      cursor: disabled ? 'not-allowed' : 'default',\n      userSelect: 'none',\n      maxWidth: `calc(100% - ${rem(20)})`,\n    },\n\n    defaultValueRemove: {\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],\n      marginLeft: `calc(${getSize({ size, sizes: theme.spacing })} / 6)`,\n    },\n\n    defaultValueLabel: {\n      display: 'block',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n  })\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DefaultValue.styles.js","sources":["../../../src/MultiSelect/DefaultValue/DefaultValue.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, rem, getSize } from '@mantine/styles';\n\ninterface DefaultLabelStyles {\n  radius: MantineNumberSize;\n  disabled: boolean;\n  readOnly: boolean;\n}\n\nexport const sizes = {\n  xs: rem(16),\n  sm: rem(22),\n  md: rem(26),\n  lg: rem(30),\n  xl: rem(36),\n};\n\nconst fontSizes = {\n  xs: rem(10),\n  sm: rem(12),\n  md: rem(14),\n  lg: rem(16),\n  xl: rem(18),\n};\n\nexport default createStyles(\n  (theme, { disabled, radius, readOnly }: DefaultLabelStyles, { size, variant }) => ({\n    defaultValue: {\n      display: 'flex',\n      alignItems: 'center',\n      backgroundColor: disabled\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[5]\n          : theme.colors.gray[3]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[7]\n        : variant === 'filled'\n        ? theme.white\n        : theme.colors.gray[1],\n      color: disabled\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[1]\n          : theme.colors.gray[7]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[0]\n        : theme.colors.gray[7],\n      height: getSize({ size, sizes }),\n      paddingLeft: `calc(${getSize({ size, sizes: theme.spacing })} / 1.5)`,\n      paddingRight: disabled || readOnly ? getSize({ size, sizes: theme.spacing }) : 0,\n      fontWeight: 500,\n      fontSize: getSize({ size, sizes: fontSizes }),\n      borderRadius: getSize({ size: radius, sizes: theme.radius }),\n      cursor: disabled ? 'not-allowed' : 'default',\n      userSelect: 'none',\n      maxWidth: `calc(100% - ${rem(10)})`,\n    },\n\n    defaultValueRemove: {\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],\n      marginLeft: `calc(${getSize({ size, sizes: theme.spacing })} / 6)`,\n    },\n\n    defaultValueLabel: {\n      display: 'block',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n  })\n);\n"],"names":[],"mappings":"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"}

package/esm/MultiSelect/MultiSelect.styles.js

@@ -50,7 +50,6 @@ var useStyles = createStyles((theme, { invalid }, { size }) => ({
     marginLeft: `calc(${theme.spacing.xs} / 2)`,
     appearance: "none",
     color: "inherit",
-    lineHeight: `calc(${getSize({ size, sizes: sizes })} - ${rem(2)})`,
     maxHeight: getSize({ size, sizes: sizes$1 }),
     "&::placeholder": {
       opacity: 1,

package/esm/MultiSelect/MultiSelect.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.styles.js","sources":["../../src/MultiSelect/MultiSelect.styles.ts"],"sourcesContent":["import { createStyles, rem, getSize } from '@mantine/styles';\nimport { INPUT_SIZES } from '../Input';\nimport { sizes as DEFAULT_VALUE_SIZES } from './DefaultValue/DefaultValue.styles';\n\nexport interface MultiSelectStylesParams {\n  invalid: boolean;\n}\n\nexport default createStyles((theme, { invalid }: MultiSelectStylesParams, { size }) => ({\n  wrapper: {\n    position: 'relative',\n  },\n\n  values: {\n    minHeight: `calc(${getSize({ size, sizes: INPUT_SIZES })} - ${rem(2)})`,\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    marginLeft: `calc(-${theme.spacing.xs} / 2)`,\n    boxSizing: 'border-box',\n\n    '&[data-clearable]': {\n      marginRight: getSize({ size, sizes: INPUT_SIZES }),\n    },\n  },\n\n  value: {\n    margin: `calc(${theme.spacing.xs} / 2 - ${rem(2)}) calc(${theme.spacing.xs} / 2)`,\n  },\n\n  searchInput: {\n    ...theme.fn.fontStyles(),\n    flex: 1,\n    minWidth: rem(60),\n    backgroundColor: 'transparent',\n    border: 0,\n    outline: 0,\n    fontSize: getSize({ size, sizes: theme.fontSizes }),\n    padding: 0,\n    marginLeft: `calc(${theme.spacing.xs} / 2)`,\n    appearance: 'none',\n    color: 'inherit',\n    lineHeight: `calc(${getSize({ size, sizes: INPUT_SIZES })} - ${rem(2)})`,\n    maxHeight: getSize({ size, sizes: DEFAULT_VALUE_SIZES }),\n\n    '&::placeholder': {\n      opacity: 1,\n      color: invalid\n        ? theme.colors.red[theme.colorScheme === 'dark' ? 6 : 7]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[3]\n        : theme.colors.gray[5],\n    },\n\n    '&:disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  searchInputEmpty: {\n    width: '100%',\n  },\n\n  searchInputInputHidden: {\n    width: 0,\n    minWidth: 0,\n    height: 0,\n    margin: 0,\n    overflow: 'hidden',\n  },\n\n  searchInputPointer: {\n    cursor: 'pointer',\n\n    '&:disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  input: {\n    cursor: 'pointer',\n\n    '&:disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n}));\n"],"names":["INPUT_SIZES","DEFAULT_VALUE_SIZES"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.styles.js","sources":["../../src/MultiSelect/MultiSelect.styles.ts"],"sourcesContent":["import { createStyles, rem, getSize } from '@mantine/styles';\nimport { INPUT_SIZES } from '../Input';\nimport { sizes as DEFAULT_VALUE_SIZES } from './DefaultValue/DefaultValue.styles';\n\nexport interface MultiSelectStylesParams {\n  invalid: boolean;\n}\n\nexport default createStyles((theme, { invalid }: MultiSelectStylesParams, { size }) => ({\n  wrapper: {\n    position: 'relative',\n  },\n\n  values: {\n    minHeight: `calc(${getSize({ size, sizes: INPUT_SIZES })} - ${rem(2)})`,\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    marginLeft: `calc(-${theme.spacing.xs} / 2)`,\n    boxSizing: 'border-box',\n\n    '&[data-clearable]': {\n      marginRight: getSize({ size, sizes: INPUT_SIZES }),\n    },\n  },\n\n  value: {\n    margin: `calc(${theme.spacing.xs} / 2 - ${rem(2)}) calc(${theme.spacing.xs} / 2)`,\n  },\n\n  searchInput: {\n    ...theme.fn.fontStyles(),\n    flex: 1,\n    minWidth: rem(60),\n    backgroundColor: 'transparent',\n    border: 0,\n    outline: 0,\n    fontSize: getSize({ size, sizes: theme.fontSizes }),\n    padding: 0,\n    marginLeft: `calc(${theme.spacing.xs} / 2)`,\n    appearance: 'none',\n    color: 'inherit',\n    maxHeight: getSize({ size, sizes: DEFAULT_VALUE_SIZES }),\n\n    '&::placeholder': {\n      opacity: 1,\n      color: invalid\n        ? theme.colors.red[theme.colorScheme === 'dark' ? 6 : 7]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[3]\n        : theme.colors.gray[5],\n    },\n\n    '&:disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  searchInputEmpty: {\n    width: '100%',\n  },\n\n  searchInputInputHidden: {\n    width: 0,\n    minWidth: 0,\n    height: 0,\n    margin: 0,\n    overflow: 'hidden',\n  },\n\n  searchInputPointer: {\n    cursor: 'pointer',\n\n    '&:disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  input: {\n    cursor: 'pointer',\n\n    '&:disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n}));\n"],"names":["INPUT_SIZES","DEFAULT_VALUE_SIZES"],"mappings":"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"}

package/esm/Notification/Notification.js

@@ -47,6 +47,7 @@ const Notification = forwardRef((props, ref) => {
     radius,
     loading,
     withCloseButton,
+    withBorder,
     title,
     icon,
     children,
@@ -62,6 +63,7 @@ const Notification = forwardRef((props, ref) => {
     "radius",
     "loading",
     "withCloseButton",
+    "withBorder",
     "title",
     "icon",
     "children",
@@ -76,6 +78,7 @@ const Notification = forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, className),
     "data-with-icon": !!icon || loading || void 0,
+    "data-with-border": withBorder || void 0,
     role: "alert",
     ref
   }, others), icon && !loading && /* @__PURE__ */ React.createElement("div", {

package/esm/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineColor,\n  Selectors,\n  MantineNumberSize,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Text } from '../Text';\nimport { Loader } from '../Loader';\nimport { CloseButton } from '../CloseButton';\nimport { Box } from '../Box';\nimport useStyles, { NotificationStylesParams } from './Notification.styles';\n\nexport type NotificationStylesNames = Selectors<typeof useStyles>;\n\nexport interface NotificationProps\n  extends DefaultProps<NotificationStylesNames, NotificationStylesParams>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n  variant?: string;\n\n  /** Called when close button is clicked */\n  onClose?(): void;\n\n  /** Notification line or icon color */\n  color?: MantineColor;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n  radius?: MantineNumberSize;\n\n  /** Notification icon, replaces color line */\n  icon?: React.ReactNode;\n\n  /** Notification title, displayed before body */\n  title?: React.ReactNode;\n\n  /** Notification body, place main text here */\n  children?: React.ReactNode;\n\n  /** Replaces colored line or icon with Loader component */\n  loading?: boolean;\n\n  /** Determines whether close button should be visible, true by default */\n  withCloseButton?: boolean;\n\n  /** Props spread to close button */\n  closeButtonProps?: Record<string, any>;\n}\n\nconst defaultProps: Partial<NotificationProps> = {\n  withCloseButton: true,\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {\n  const {\n    className,\n    color,\n    radius,\n    loading,\n    withCloseButton,\n    title,\n    icon,\n    children,\n    onClose,\n    closeButtonProps,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Notification', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { color, radius, withTitle: !!title },\n    { name: 'Notification', classNames, styles, unstyled, variant }\n  );\n\n  return (\n    <Box\n      className={cx(classes.root, className)}\n      data-with-icon={!!icon || loading || undefined}\n      role=\"alert\"\n      ref={ref}\n      {...others}\n    >\n      {icon && !loading && <div className={classes.icon}>{icon}</div>}\n      {loading && <Loader size={28} color={color} className={classes.loader} />}\n\n      <div className={classes.body}>\n        {title && (\n          <Text className={classes.title} size=\"sm\" weight={500}>\n            {title}\n          </Text>\n        )}\n\n        <Text color=\"dimmed\" className={classes.description} size=\"sm\">\n          {children}\n        </Text>\n      </div>\n\n      {withCloseButton && (\n        <CloseButton\n          iconSize={16}\n          color=\"gray\"\n          {...closeButtonProps}\n          onClick={onClose}\n          className={classes.closeButton}\n        />\n      )}\n    </Box>\n  );\n});\n\nNotification.displayName = '@mantine/core/Notification';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineColor,\n  Selectors,\n  MantineNumberSize,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Text } from '../Text';\nimport { Loader } from '../Loader';\nimport { CloseButton } from '../CloseButton';\nimport { Box } from '../Box';\nimport useStyles, { NotificationStylesParams } from './Notification.styles';\n\nexport type NotificationStylesNames = Selectors<typeof useStyles>;\n\nexport interface NotificationProps\n  extends DefaultProps<NotificationStylesNames, NotificationStylesParams>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n  variant?: string;\n\n  /** Called when close button is clicked */\n  onClose?(): void;\n\n  /** Notification line or icon color */\n  color?: MantineColor;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n  radius?: MantineNumberSize;\n\n  /** Notification icon, replaces color line */\n  icon?: React.ReactNode;\n\n  /** Notification title, displayed before body */\n  title?: React.ReactNode;\n\n  /** Notification body, place main text here */\n  children?: React.ReactNode;\n\n  /** Replaces colored line or icon with Loader component */\n  loading?: boolean;\n\n  /** Adds border styles */\n  withBorder?: boolean;\n\n  /** Determines whether close button should be visible, true by default */\n  withCloseButton?: boolean;\n\n  /** Props spread to close button */\n  closeButtonProps?: Record<string, any>;\n}\n\nconst defaultProps: Partial<NotificationProps> = {\n  withCloseButton: true,\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {\n  const {\n    className,\n    color,\n    radius,\n    loading,\n    withCloseButton,\n    withBorder,\n    title,\n    icon,\n    children,\n    onClose,\n    closeButtonProps,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Notification', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { color, radius, withTitle: !!title },\n    { name: 'Notification', classNames, styles, unstyled, variant }\n  );\n\n  return (\n    <Box\n      className={cx(classes.root, className)}\n      data-with-icon={!!icon || loading || undefined}\n      data-with-border={withBorder || undefined}\n      role=\"alert\"\n      ref={ref}\n      {...others}\n    >\n      {icon && !loading && <div className={classes.icon}>{icon}</div>}\n      {loading && <Loader size={28} color={color} className={classes.loader} />}\n\n      <div className={classes.body}>\n        {title && (\n          <Text className={classes.title} size=\"sm\" weight={500}>\n            {title}\n          </Text>\n        )}\n\n        <Text color=\"dimmed\" className={classes.description} size=\"sm\">\n          {children}\n        </Text>\n      </div>\n\n      {withCloseButton && (\n        <CloseButton\n          iconSize={16}\n          color=\"gray\"\n          {...closeButtonProps}\n          onClick={onClose}\n          className={classes.closeButton}\n        />\n      )}\n    </Box>\n  );\n});\n\nNotification.displayName = '@mantine/core/Notification';\n"],"names":[],"mappings":"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"}

package/esm/Notification/Notification.styles.js

@@ -50,6 +50,9 @@ var useStyles = createStyles((theme, { color, radius, withTitle }) => {
         "&::before": {
           display: "none"
         }
+      },
+      "&[data-with-border]": {
+        border: `${rem(1)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
       }
     },
     body: {

package/esm/Notification/Notification.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.styles.js","sources":["../../src/Notification/Notification.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize, rem } from '@mantine/styles';\n\nexport interface NotificationStylesParams {\n  color: MantineColor;\n  radius: MantineNumberSize;\n  withTitle: boolean;\n}\n\nexport default createStyles((theme, { color, radius, withTitle }: NotificationStylesParams) => {\n  const _radius = theme.fn.radius(radius);\n  const colors = theme.fn.variant({ variant: 'filled', color });\n\n  return {\n    closeButton: theme.fn.hover({\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n    }),\n\n    icon: {\n      boxSizing: 'border-box',\n      marginRight: theme.spacing.md,\n      width: rem(28),\n      height: rem(28),\n      borderRadius: rem(28),\n      display: 'flex',\n      flex: 'none',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: colors.background,\n      color: theme.white,\n    },\n\n    root: {\n      overflow: 'hidden',\n      boxSizing: 'border-box',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      paddingLeft: rem(22),\n      paddingRight: theme.spacing.xs,\n      paddingTop: theme.spacing.xs,\n      paddingBottom: theme.spacing.xs,\n      borderRadius: _radius,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n      boxShadow: theme.shadows.lg,\n      border: `${rem(1)} solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]\n      }`,\n\n      '&::before': {\n        content: '\"\"',\n        display: 'block',\n        position: 'absolute',\n        width: rem(6),\n        top: _radius,\n        bottom: _radius,\n        left: rem(4),\n        borderRadius: _radius,\n        backgroundColor: colors.background,\n      },\n\n      '&[data-with-icon]': {\n        paddingLeft: theme.spacing.xs,\n\n        '&::before': {\n          display: 'none',\n        },\n      },\n    },\n\n    body: {\n      flex: 1,\n      overflow: 'hidden',\n      marginRight: theme.spacing.xs,\n    },\n\n    loader: {\n      marginRight: theme.spacing.md,\n    },\n\n    title: {\n      lineHeight: 1.4,\n      marginBottom: rem(2),\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      color: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[9],\n    },\n\n    description: {\n      color: withTitle\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[2]\n          : theme.colors.gray[6]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[0]\n        : theme.black,\n      lineHeight: 1.4,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n  };\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Notification.styles.js","sources":["../../src/Notification/Notification.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize, rem } from '@mantine/styles';\n\nexport interface NotificationStylesParams {\n  color: MantineColor;\n  radius: MantineNumberSize;\n  withTitle: boolean;\n}\n\nexport default createStyles((theme, { color, radius, withTitle }: NotificationStylesParams) => {\n  const _radius = theme.fn.radius(radius);\n  const colors = theme.fn.variant({ variant: 'filled', color });\n\n  return {\n    closeButton: theme.fn.hover({\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n    }),\n\n    icon: {\n      boxSizing: 'border-box',\n      marginRight: theme.spacing.md,\n      width: rem(28),\n      height: rem(28),\n      borderRadius: rem(28),\n      display: 'flex',\n      flex: 'none',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: colors.background,\n      color: theme.white,\n    },\n\n    root: {\n      overflow: 'hidden',\n      boxSizing: 'border-box',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      paddingLeft: rem(22),\n      paddingRight: theme.spacing.xs,\n      paddingTop: theme.spacing.xs,\n      paddingBottom: theme.spacing.xs,\n      borderRadius: _radius,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n      boxShadow: theme.shadows.lg,\n      border: `${rem(1)} solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]\n      }`,\n\n      '&::before': {\n        content: '\"\"',\n        display: 'block',\n        position: 'absolute',\n        width: rem(6),\n        top: _radius,\n        bottom: _radius,\n        left: rem(4),\n        borderRadius: _radius,\n        backgroundColor: colors.background,\n      },\n\n      '&[data-with-icon]': {\n        paddingLeft: theme.spacing.xs,\n\n        '&::before': {\n          display: 'none',\n        },\n      },\n\n      '&[data-with-border]': {\n        border: `${rem(1)} solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n        }`,\n      },\n    },\n\n    body: {\n      flex: 1,\n      overflow: 'hidden',\n      marginRight: theme.spacing.xs,\n    },\n\n    loader: {\n      marginRight: theme.spacing.md,\n    },\n\n    title: {\n      lineHeight: 1.4,\n      marginBottom: rem(2),\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      color: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[9],\n    },\n\n    description: {\n      color: withTitle\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[2]\n          : theme.colors.gray[6]\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[0]\n        : theme.black,\n      lineHeight: 1.4,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n  };\n});\n"],"names":[],"mappings":"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"}