@mantine/core 4.2.9 → 5.0.0-alpha.11

package/esm/components/ColorPicker/ColorPicker.js

@@ -1,13 +1,13 @@
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { useUncontrolled, useDidUpdate } from '@mantine/hooks';
-import { useMantineDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import { ColorSwatch } from '../ColorSwatch/ColorSwatch.js';
 import { HueSlider } from './HueSlider/HueSlider.js';
 import { AlphaSlider } from './AlphaSlider/AlphaSlider.js';
 import { Saturation } from './Saturation/Saturation.js';
 import { Swatches } from './Swatches/Swatches.js';
 import useStyles from './ColorPicker.styles.js';
-import { isColorValid, parseColor } from './converters/parsers.js';
+import { parseColor, isColorValid } from './converters/parsers.js';
 import { convertHsvaTo } from './converters/converters.js';
 import { Box } from '../Box/Box.js';
 
@@ -54,7 +54,7 @@ const defaultProps = {
   __staticSelector: "ColorPicker"
 };
 const ColorPicker = forwardRef((props, ref) => {
-  const _a = useMantineDefaultProps("ColorPicker", defaultProps, props), {
+  const _a = useComponentDefaultProps("ColorPicker", defaultProps, props), {
     value,
     defaultValue,
     onChange,
@@ -71,7 +71,8 @@ const ColorPicker = forwardRef((props, ref) => {
     alphaLabel,
     className,
     styles,
-    classNames
+    classNames,
+    unstyled
   } = _a, others = __objRest(_a, [
     "value",
     "defaultValue",
@@ -89,33 +90,37 @@ const ColorPicker = forwardRef((props, ref) => {
     "alphaLabel",
     "className",
     "styles",
-    "classNames"
+    "classNames",
+    "unstyled"
   ]);
-  const { classes, cx, theme } = useStyles({ size, fullWidth }, { classNames, styles, name: __staticSelector });
+  const { classes, cx, theme } = useStyles({ size, fullWidth }, { classNames, styles, name: __staticSelector, unstyled });
   const formatRef = useRef(format);
   const valueRef = useRef(null);
+  const updateRef = useRef(true);
   const withAlpha = format === "rgba" || format === "hsla";
-  const [shouldSkip, setShouldSkip] = useState(false);
   const [_value, setValue] = useUncontrolled({
     value,
     defaultValue,
     finalValue: "#FFFFFF",
-    rule: (val) => isColorValid(val),
     onChange
   });
   const [parsed, setParsed] = useState(parseColor(_value));
   const handleChange = (color) => {
-    setShouldSkip(true);
+    updateRef.current = false;
     setParsed((current) => {
       const next = __spreadValues(__spreadValues({}, current), color);
       valueRef.current = convertHsvaTo(formatRef.current, next);
       return next;
     });
-    Promise.resolve().then(() => setValue(valueRef.current)).then(() => setShouldSkip(false));
+    setValue(valueRef.current);
+    setTimeout(() => {
+      updateRef.current = true;
+    }, 0);
   };
-  useEffect(() => {
-    if (isColorValid(value) && !shouldSkip) {
+  useDidUpdate(() => {
+    if (isColorValid(value) && updateRef.current) {
       setParsed(parseColor(value));
+      updateRef.current = true;
     }
   }, [value]);
   useDidUpdate(() => {

package/esm/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useMantineDefaultProps } 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 { 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  /** Color format */\n  format?: 'hex' | 'rgba' | 'rgb' | 'hsl' | 'hsla';\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  /** 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\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      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      ...others\n    } = useMantineDefaultProps('ColorPicker', defaultProps, props);\n\n    const { classes, cx, theme } = useStyles(\n      { size, fullWidth },\n      { classNames, styles, name: __staticSelector }\n    );\n    const formatRef = useRef(format);\n    const valueRef = useRef<string>(null);\n    const withAlpha = format === 'rgba' || format === 'hsla';\n\n    const [shouldSkip, setShouldSkip] = useState(false);\n    const [_value, setValue] = useUncontrolled({\n      value,\n      defaultValue,\n      finalValue: '#FFFFFF',\n      rule: (val) => isColorValid(val),\n      onChange,\n    });\n\n    const [parsed, setParsed] = useState(parseColor(_value));\n\n    const handleChange = (color: Partial<HsvaColor>) => {\n      // This is required for useEffect to work, it's dirty but works fine\n      setShouldSkip(true);\n\n      setParsed((current) => {\n        const next = { ...current, ...color };\n        valueRef.current = convertHsvaTo(formatRef.current, next);\n        return next;\n      });\n\n      Promise.resolve()\n        .then(() => setValue(valueRef.current))\n        .then(() => setShouldSkip(false));\n    };\n\n    useEffect(() => {\n      if (isColorValid(value) && !shouldSkip) {\n        setParsed(parseColor(value));\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              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                  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                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    style={{ marginTop: 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={theme.fn.size({ 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            onSelect={handleChange}\n            style={{ marginTop: 5 }}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            classNames={classNames}\n            styles={styles}\n            __staticSelector={__staticSelector}\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/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } 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 { 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  /** Color format */\n  format?: 'hex' | 'rgba' | 'rgb' | 'hsl' | 'hsla';\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  /** 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\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      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      ...others\n    } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n    const { classes, cx, theme } = useStyles(\n      { size, fullWidth },\n      { classNames, styles, name: __staticSelector, unstyled }\n    );\n    const formatRef = useRef(format);\n    const valueRef = useRef<string>(null);\n    const updateRef = useRef(true);\n    const withAlpha = 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              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                  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                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    style={{ marginTop: 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={theme.fn.size({ 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            onSelect={handleChange}\n            style={{ marginTop: 5 }}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            classNames={classNames}\n            styles={styles}\n            __staticSelector={__staticSelector}\n          />\n        )}\n      </Box>\n    );\n  }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/ColorSlider/ColorSlider.js

@@ -48,7 +48,8 @@ const ColorSlider = forwardRef((_a, ref) => {
     overlays,
     classNames,
     styles,
-    className
+    className,
+    unstyled
   } = _b, others = __objRest(_b, [
     "value",
     "onChange",
@@ -61,9 +62,10 @@ const ColorSlider = forwardRef((_a, ref) => {
     "overlays",
     "classNames",
     "styles",
-    "className"
+    "className",
+    "unstyled"
   ]);
-  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });
+  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });
   const [position, setPosition] = useState({ y: 0, x: value / maxValue });
   const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
   const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));
@@ -76,7 +78,7 @@ const ColorSlider = forwardRef((_a, ref) => {
     onChange(getChangeValue(_position.x));
   };
   const handleKeyDown = (event) => {
-    switch (event.nativeEvent.code) {
+    switch (event.key) {
       case "ArrowRight": {
         handleArrow(event, { x: position.x + 0.05, y: position.y });
         break;

package/esm/components/ColorPicker/ColorSlider/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n  useMove,\n  clampUseMovePosition,\n  useDidUpdate,\n  UseMovePosition,\n  useMergedRef,\n} from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './ColorSlider.styles';\n\nexport type ColorSliderStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'sliderThumb'>\n  | ThumbStylesNames;\n\nexport interface BaseColorSliderProps\n  extends DefaultProps<ColorSliderStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  value: number;\n  onChange(value: number): void;\n  size?: MantineSize;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport interface ColorSliderProps extends BaseColorSliderProps {\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>(\n  (\n    {\n      value,\n      onChange,\n      maxValue,\n      round,\n      size = 'md',\n      thumbColor = 'transparent',\n      __staticSelector = 'ColorSlider',\n      focusable = true,\n      overlays,\n      classNames,\n      styles,\n      className,\n      ...others\n    }: ColorSliderProps,\n    ref\n  ) => {\n    const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n    const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n    const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n    const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));\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    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      switch (event.nativeEvent.code) {\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 className={classes.sliderOverlay} style={overlay} key={index} />\n    ));\n\n    return (\n      <Box\n        {...others}\n        ref={useMergedRef(sliderRef, ref)}\n        className={cx(classes.slider, className)}\n        role=\"slider\"\n        aria-valuenow={value}\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        tabIndex={focusable ? 0 : -1}\n        onKeyDown={handleKeyDown}\n      >\n        {layers}\n\n        <Thumb\n          __staticSelector={__staticSelector}\n          classNames={classNames}\n          styles={styles}\n          position={position}\n          style={{ top: 1, backgroundColor: thumbColor }}\n          className={classes.sliderThumb}\n          size={size}\n        />\n      </Box>\n    );\n  }\n);\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorSlider.js","sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n  useMove,\n  clampUseMovePosition,\n  useDidUpdate,\n  UseMovePosition,\n  useMergedRef,\n} from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './ColorSlider.styles';\n\nexport type ColorSliderStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'sliderThumb'>\n  | ThumbStylesNames;\n\nexport interface BaseColorSliderProps\n  extends DefaultProps<ColorSliderStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  value: number;\n  onChange(value: number): void;\n  size?: MantineSize;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport interface ColorSliderProps extends BaseColorSliderProps {\n  maxValue: number;\n  overlays: React.CSSProperties[];\n  round: boolean;\n  thumbColor?: string;\n}\n\nexport const ColorSlider = forwardRef<HTMLDivElement, ColorSliderProps>(\n  (\n    {\n      value,\n      onChange,\n      maxValue,\n      round,\n      size = 'md',\n      thumbColor = 'transparent',\n      __staticSelector = 'ColorSlider',\n      focusable = true,\n      overlays,\n      classNames,\n      styles,\n      className,\n      unstyled,\n      ...others\n    }: ColorSliderProps,\n    ref\n  ) => {\n    const { classes, cx } = useStyles(\n      { size },\n      { classNames, styles, name: __staticSelector, unstyled }\n    );\n    const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n    const getChangeValue = (val: number) => (round ? Math.round(val * maxValue) : val * maxValue);\n    const { ref: sliderRef } = useMove(({ x }) => onChange(getChangeValue(x)));\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    };\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 className={classes.sliderOverlay} style={overlay} key={index} />\n    ));\n\n    return (\n      <Box\n        {...others}\n        ref={useMergedRef(sliderRef, ref)}\n        className={cx(classes.slider, className)}\n        role=\"slider\"\n        aria-valuenow={value}\n        aria-valuemax={maxValue}\n        aria-valuemin={0}\n        tabIndex={focusable ? 0 : -1}\n        onKeyDown={handleKeyDown}\n      >\n        {layers}\n\n        <Thumb\n          __staticSelector={__staticSelector}\n          classNames={classNames}\n          styles={styles}\n          position={position}\n          style={{ top: 1, backgroundColor: thumbColor }}\n          className={classes.sliderThumb}\n          size={size}\n        />\n      </Box>\n    );\n  }\n);\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/Saturation/Saturation.js

@@ -13,9 +13,10 @@ function Saturation({
   color,
   saturationLabel,
   classNames,
-  styles
+  styles,
+  unstyled
 }) {
-  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector });
+  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });
   const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });
   const { ref } = useMove(({ x, y }) => {
     onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });
@@ -29,7 +30,7 @@ function Saturation({
     onChange({ s: Math.round(_position.x * 100), v: Math.round((1 - _position.y) * 100) });
   };
   const handleKeyDown = (event) => {
-    switch (event.nativeEvent.code) {
+    switch (event.key) {
       case "ArrowUp": {
         handleArrow(event, { y: position.y - 0.05, x: position.x });
         break;

package/esm/components/ColorPicker/Saturation/Saturation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useMove, clampUseMovePosition, UseMovePosition } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { HsvaColor } from '../types';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './Saturation.styles';\nimport { convertHsvaTo } from '../converters';\n\nexport type SaturationStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'saturationOverlay' | 'saturationThumb'>\n  | ThumbStylesNames;\n\ninterface SaturationProps extends DefaultProps<SaturationStylesNames> {\n  value: HsvaColor;\n  onChange(color: Partial<HsvaColor>): void;\n  saturationLabel?: string;\n  size: MantineSize;\n  color: string;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport function Saturation({\n  value,\n  onChange,\n  focusable = true,\n  __staticSelector = 'saturation',\n  size,\n  color,\n  saturationLabel,\n  classNames,\n  styles,\n}: SaturationProps) {\n  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n\n  const { ref } = useMove(({ x, y }) => {\n    onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\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  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.nativeEvent.code) {\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    <div\n      className={classes.saturation}\n      ref={ref}\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        className={classes.saturationOverlay}\n        style={{ backgroundColor: `hsl(${value.h}, 100%, 50%)` }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(90deg, #fff, transparent)' }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(0deg, #000, transparent)' }}\n      />\n\n      <Thumb\n        __staticSelector={__staticSelector}\n        classNames={classNames}\n        styles={styles}\n        position={position}\n        className={classes.saturationThumb}\n        style={{ backgroundColor: color }}\n        size={size}\n      />\n    </div>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Saturation.js","sources":["../../../../src/components/ColorPicker/Saturation/Saturation.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useMove, clampUseMovePosition, UseMovePosition } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { HsvaColor } from '../types';\nimport { Thumb, ThumbStylesNames } from '../Thumb/Thumb';\nimport useStyles from './Saturation.styles';\nimport { convertHsvaTo } from '../converters';\n\nexport type SaturationStylesNames =\n  | Exclude<Selectors<typeof useStyles>, 'saturationOverlay' | 'saturationThumb'>\n  | ThumbStylesNames;\n\ninterface SaturationProps extends DefaultProps<SaturationStylesNames> {\n  value: HsvaColor;\n  onChange(color: Partial<HsvaColor>): void;\n  saturationLabel?: string;\n  size: MantineSize;\n  color: string;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport function Saturation({\n  value,\n  onChange,\n  focusable = true,\n  __staticSelector = 'saturation',\n  size,\n  color,\n  saturationLabel,\n  classNames,\n  styles,\n  unstyled,\n}: SaturationProps) {\n  const { classes } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });\n  const [position, setPosition] = useState({ x: value.s / 100, y: 1 - value.v / 100 });\n\n  const { ref } = useMove(({ x, y }) => {\n    onChange({ s: Math.round(x * 100), v: Math.round((1 - y) * 100) });\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  };\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    <div\n      className={classes.saturation}\n      ref={ref}\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        className={classes.saturationOverlay}\n        style={{ backgroundColor: `hsl(${value.h}, 100%, 50%)` }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(90deg, #fff, transparent)' }}\n      />\n\n      <div\n        className={classes.saturationOverlay}\n        style={{ backgroundImage: 'linear-gradient(0deg, #000, transparent)' }}\n      />\n\n      <Thumb\n        __staticSelector={__staticSelector}\n        classNames={classNames}\n        styles={styles}\n        position={position}\n        className={classes.saturationThumb}\n        style={{ backgroundColor: color }}\n        size={size}\n      />\n    </div>\n  );\n}\n\nSaturation.displayName = '@mantine/core/Saturation';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/Swatches/Swatches.js

@@ -39,7 +39,8 @@ function Swatches(_a) {
     focusable = true,
     classNames,
     styles,
-    __staticSelector = "color-picker"
+    __staticSelector = "color-picker",
+    unstyled
   } = _b, others = __objRest(_b, [
     "data",
     "onSelect",
@@ -47,9 +48,10 @@ function Swatches(_a) {
     "focusable",
     "classNames",
     "styles",
-    "__staticSelector"
+    "__staticSelector",
+    "unstyled"
   ]);
-  const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector });
+  const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector, unstyled });
   const colors = data.map((color, index) => /* @__PURE__ */ React.createElement(ColorSwatch, {
     className: classes.swatch,
     component: "button",

package/esm/components/ColorPicker/Swatches/Swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.js","sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, Selectors } from '@mantine/styles';\nimport { ColorSwatch } from '../../ColorSwatch/ColorSwatch';\nimport { parseColor } from '../converters/parsers';\nimport { HsvaColor } from '../types';\nimport useStyles from './Swatches.styles';\n\nexport type SwatchesStylesNames = Selectors<typeof useStyles>;\n\nexport interface SwatchesProps\n  extends DefaultProps<SwatchesStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  data: string[];\n  onSelect(color: HsvaColor): void;\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport function Swatches({\n  data,\n  onSelect,\n  swatchesPerRow = 10,\n  focusable = true,\n  classNames,\n  styles,\n  __staticSelector = 'color-picker',\n  ...others\n}: SwatchesProps) {\n  const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector });\n\n  const colors = data.map((color, index) => (\n    <ColorSwatch\n      className={classes.swatch}\n      component=\"button\"\n      type=\"button\"\n      color={color}\n      key={index}\n      radius=\"sm\"\n      onClick={() => onSelect(parseColor(color))}\n      style={{ cursor: 'pointer' }}\n      aria-label={color}\n      tabIndex={focusable ? 0 : -1}\n    />\n  ));\n\n  return (\n    <div className={classes.swatches} {...others}>\n      {colors}\n    </div>\n  );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Swatches.js","sources":["../../../../src/components/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, Selectors } from '@mantine/styles';\nimport { ColorSwatch } from '../../ColorSwatch/ColorSwatch';\nimport { parseColor } from '../converters/parsers';\nimport { HsvaColor } from '../types';\nimport useStyles from './Swatches.styles';\n\nexport type SwatchesStylesNames = Selectors<typeof useStyles>;\n\nexport interface SwatchesProps\n  extends DefaultProps<SwatchesStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  data: string[];\n  onSelect(color: HsvaColor): void;\n  swatchesPerRow?: number;\n  focusable?: boolean;\n  __staticSelector?: string;\n}\n\nexport function Swatches({\n  data,\n  onSelect,\n  swatchesPerRow = 10,\n  focusable = true,\n  classNames,\n  styles,\n  __staticSelector = 'color-picker',\n  unstyled,\n  ...others\n}: SwatchesProps) {\n  const { classes } = useStyles(\n    { swatchesPerRow },\n    { classNames, styles, name: __staticSelector, unstyled }\n  );\n\n  const colors = data.map((color, index) => (\n    <ColorSwatch\n      className={classes.swatch}\n      component=\"button\"\n      type=\"button\"\n      color={color}\n      key={index}\n      radius=\"sm\"\n      onClick={() => onSelect(parseColor(color))}\n      style={{ cursor: 'pointer' }}\n      aria-label={color}\n      tabIndex={focusable ? 0 : -1}\n    />\n  ));\n\n  return (\n    <div className={classes.swatches} {...others}>\n      {colors}\n    </div>\n  );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"names":[],"mappings":"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"}

package/esm/components/ColorPicker/Thumb/Thumb.js

@@ -24,9 +24,10 @@ function Thumb({
   classNames,
   style,
   size,
-  __staticSelector
+  __staticSelector,
+  unstyled
 }) {
-  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });
+  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector, unstyled });
   return /* @__PURE__ */ React.createElement("div", {
     className: cx(classes.thumb, className),
     style: __spreadValues({

package/esm/components/ColorPicker/Thumb/Thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.js","sources":["../../../../src/components/ColorPicker/Thumb/Thumb.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport useStyles, { THUMB_SIZES } from './Thumb.styles';\n\nexport type ThumbStylesNames = Selectors<typeof useStyles>;\n\ninterface Position {\n  x: number;\n  y: number;\n}\n\nexport interface ThumbProps extends DefaultProps<ThumbStylesNames> {\n  position: Position;\n  size: MantineSize;\n  __staticSelector: string;\n}\n\nexport function Thumb({\n  position,\n  className,\n  styles,\n  classNames,\n  style,\n  size,\n  __staticSelector,\n}: ThumbProps) {\n  const { classes, cx } = useStyles({ size }, { classNames, styles, name: __staticSelector });\n\n  return (\n    <div\n      className={cx(classes.thumb, className)}\n      style={{\n        left: `calc(${position.x * 100}% - ${THUMB_SIZES[size] / 2}px)`,\n        top: `calc(${position.y * 100}% - ${THUMB_SIZES[size] / 2}px)`,\n        ...style,\n      }}\n    />\n  );\n}\n\nThumb.displayName = '@mantine/core/Thumb';\n"],"names":[],"mappings":";;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAGK,SAAS,KAAK,CAAC;AACtB,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,UAAU;AACZ,EAAE,KAAK;AACP,EAAE,IAAI;AACN,EAAE,gBAAgB;AAClB,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AAC9F,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC;AAC3C,IAAI,KAAK,EAAE,cAAc,CAAC;AAC1B,MAAM,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;AACrE,MAAM,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;AACpE,KAAK,EAAE,KAAK,CAAC;AACb,GAAG,CAAC,CAAC;AACL,CAAC;AACD,KAAK,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"Thumb.js","sources":["../../../../src/components/ColorPicker/Thumb/Thumb.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport useStyles, { THUMB_SIZES } from './Thumb.styles';\n\nexport type ThumbStylesNames = Selectors<typeof useStyles>;\n\ninterface Position {\n  x: number;\n  y: number;\n}\n\nexport interface ThumbProps extends DefaultProps<ThumbStylesNames> {\n  position: Position;\n  size: MantineSize;\n  __staticSelector: string;\n}\n\nexport function Thumb({\n  position,\n  className,\n  styles,\n  classNames,\n  style,\n  size,\n  __staticSelector,\n  unstyled,\n}: ThumbProps) {\n  const { classes, cx } = useStyles(\n    { size },\n    { classNames, styles, name: __staticSelector, unstyled }\n  );\n\n  return (\n    <div\n      className={cx(classes.thumb, className)}\n      style={{\n        left: `calc(${position.x * 100}% - ${THUMB_SIZES[size] / 2}px)`,\n        top: `calc(${position.y * 100}% - ${THUMB_SIZES[size] / 2}px)`,\n        ...style,\n      }}\n    />\n  );\n}\n\nThumb.displayName = '@mantine/core/Thumb';\n"],"names":[],"mappings":";;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAGK,SAAS,KAAK,CAAC;AACtB,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,UAAU;AACZ,EAAE,KAAK;AACP,EAAE,IAAI;AACN,EAAE,gBAAgB;AAClB,EAAE,QAAQ;AACV,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC,CAAC;AACxG,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC;AAC3C,IAAI,KAAK,EAAE,cAAc,CAAC;AAC1B,MAAM,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;AACrE,MAAM,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;AACpE,KAAK,EAAE,KAAK,CAAC;AACb,GAAG,CAAC,CAAC;AACL,CAAC;AACD,KAAK,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/esm/components/ColorSwatch/ColorSwatch.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import { useMantineDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
+import { createPolymorphicComponent } from '@mantine/utils';
 import useStyles from './ColorSwatch.styles.js';
 import { Box } from '../Box/Box.js';
 
@@ -35,11 +36,10 @@ const defaultProps = {
   size: 25,
   radius: 25
 };
-const ColorSwatch = forwardRef((props, ref) => {
-  const _a = useMantineDefaultProps("ColorSwatch", defaultProps, props), { component, color, size, radius, className, children, classNames, styles } = _a, others = __objRest(_a, ["component", "color", "size", "radius", "className", "children", "classNames", "styles"]);
-  const { classes, cx } = useStyles({ radius, size }, { classNames, styles, name: "ColorSwatch" });
+const _ColorSwatch = forwardRef((props, ref) => {
+  const _a = useComponentDefaultProps("ColorSwatch", defaultProps, props), { color, size, radius, className, children, classNames, styles, unstyled } = _a, others = __objRest(_a, ["color", "size", "radius", "className", "children", "classNames", "styles", "unstyled"]);
+  const { classes, cx } = useStyles({ radius, size }, { classNames, styles, unstyled, name: "ColorSwatch" });
   return /* @__PURE__ */ React.createElement(Box, __spreadValues({
-    component: component || "div",
     className: cx(classes.root, className),
     ref
   }, others), /* @__PURE__ */ React.createElement("div", {
@@ -53,7 +53,8 @@ const ColorSwatch = forwardRef((props, ref) => {
     className: cx(classes.children, classes.overlay)
   }, children));
 });
-ColorSwatch.displayName = "@mantine/core/ColorSwatch";
+_ColorSwatch.displayName = "@mantine/core/ColorSwatch";
+const ColorSwatch = createPolymorphicComponent(_ColorSwatch);
 
-export { ColorSwatch };
+export { ColorSwatch, _ColorSwatch };
 //# sourceMappingURL=ColorSwatch.js.map

package/esm/components/ColorSwatch/ColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.js","sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  useMantineDefaultProps,\n  Selectors,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './ColorSwatch.styles';\n\nexport type ColorSwatchStylesNames = Selectors<typeof useStyles>;\n\ninterface _ColorSwatchProps extends DefaultProps<ColorSwatchStylesNames> {\n  /** Swatch color value in any css valid format (hex, rgb, etc.) */\n  color: string;\n\n  /** Width, height and border-radius in px */\n  size?: number;\n\n  /** Swatch border-radius predefined from theme or number for px value */\n  radius?: MantineNumberSize;\n\n  /** ColorSwatch children */\n  children?: React.ReactNode;\n}\n\nexport type ColorSwatchProps<C> = PolymorphicComponentProps<C, _ColorSwatchProps>;\n\ntype ColorSwatchComponent = (<C = 'div'>(props: ColorSwatchProps<C>) => React.ReactElement) & {\n  displayName?: string;\n};\n\nconst defaultProps: Partial<ColorSwatchProps<any>> = {\n  size: 25,\n  radius: 25,\n};\n\nexport const ColorSwatch: ColorSwatchComponent = forwardRef(\n  (props: ColorSwatchProps<'div'>, ref: PolymorphicRef<'div'>) => {\n    const { component, color, size, radius, className, children, classNames, styles, ...others } =\n      useMantineDefaultProps('ColorSwatch', defaultProps, props);\n\n    const { classes, cx } = useStyles(\n      { radius, size },\n      { classNames, styles, name: 'ColorSwatch' }\n    );\n\n    return (\n      <Box\n        component={component || 'div'}\n        className={cx(classes.root, className)}\n        ref={ref}\n        {...others}\n      >\n        <div className={cx(classes.alphaOverlay, classes.overlay)} />\n        <div className={cx(classes.shadowOverlay, classes.overlay)} />\n        <div className={classes.overlay} style={{ backgroundColor: color }} />\n        <div className={cx(classes.children, classes.overlay)}>{children}</div>\n      </Box>\n    );\n  }\n) as any;\n\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorSwatch.js","sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  useComponentDefaultProps,\n  Selectors,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { Box } from '../Box';\nimport useStyles, { ColorSwatchStylesParams } from './ColorSwatch.styles';\n\nexport type ColorSwatchStylesNames = Selectors<typeof useStyles>;\n\nexport interface ColorSwatchProps\n  extends DefaultProps<ColorSwatchStylesNames, ColorSwatchStylesParams> {\n  /** Swatch color value in any css valid format (hex, rgb, etc.) */\n  color: string;\n\n  /** Width, height and border-radius in px */\n  size?: number;\n\n  /** Swatch border-radius predefined from theme or number for px value */\n  radius?: MantineNumberSize;\n\n  /** ColorSwatch children */\n  children?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ColorSwatchProps> = {\n  size: 25,\n  radius: 25,\n};\n\nexport const _ColorSwatch = forwardRef<HTMLDivElement, ColorSwatchProps>((props, ref) => {\n  const { color, size, radius, className, children, classNames, styles, unstyled, ...others } =\n    useComponentDefaultProps('ColorSwatch', defaultProps, props);\n  const { classes, cx } = useStyles(\n    { radius, size },\n    { classNames, styles, unstyled, name: 'ColorSwatch' }\n  );\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      <div className={cx(classes.alphaOverlay, classes.overlay)} />\n      <div className={cx(classes.shadowOverlay, classes.overlay)} />\n      <div className={classes.overlay} style={{ backgroundColor: color }} />\n      <div className={cx(classes.children, classes.overlay)}>{children}</div>\n    </Box>\n  );\n});\n\n_ColorSwatch.displayName = '@mantine/core/ColorSwatch';\n\nexport const ColorSwatch = createPolymorphicComponent<'div', ColorSwatchProps>(_ColorSwatch);\n"],"names":[],"mappings":"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"}

package/esm/components/Container/Container.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { useMantineDefaultProps } from '@mantine/styles';
+import { useComponentDefaultProps } from '@mantine/styles';
 import useStyles from './Container.styles.js';
 import { Box } from '../Box/Box.js';
 
@@ -41,8 +41,8 @@ const defaultProps = {
   }
 };
 const Container = forwardRef((props, ref) => {
-  const _a = useMantineDefaultProps("Container", defaultProps, props), { className, fluid, size, styles, classNames, sizes } = _a, others = __objRest(_a, ["className", "fluid", "size", "styles", "classNames", "sizes"]);
-  const { classes, cx } = useStyles({ fluid, size, sizes }, { styles, classNames, name: "Container" });
+  const _a = useComponentDefaultProps("Container", defaultProps, props), { className, fluid, size, unstyled, sizes } = _a, others = __objRest(_a, ["className", "fluid", "size", "unstyled", "sizes"]);
+  const { classes, cx } = useStyles({ fluid, size, sizes }, { unstyled, name: "Container" });
   return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, className),
     ref

package/esm/components/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  useMantineDefaultProps,\n  MantineSize,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Container.styles';\n\nexport interface ContainerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Predefined container max-width or number for max-width in px */\n  size?: MantineNumberSize;\n\n  /** If fluid is set to true, size prop is ignored and Container always take 100% of width */\n  fluid?: boolean;\n\n  /** Container sizes */\n  sizes?: Record<MantineSize, number>;\n}\n\nconst defaultProps: Partial<ContainerProps> = {\n  sizes: {\n    xs: 540,\n    sm: 720,\n    md: 960,\n    lg: 1140,\n    xl: 1320,\n  },\n};\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (props: ContainerProps, ref) => {\n    const { className, fluid, size, styles, classNames, sizes, ...others } = useMantineDefaultProps(\n      'Container',\n      defaultProps,\n      props\n    );\n\n    const { classes, cx } = useStyles(\n      { fluid, size, sizes },\n      { styles, classNames, name: 'Container' }\n    );\n\n    return <Box className={cx(classes.root, className)} ref={ref} {...others} />;\n  }\n);\n\nContainer.displayName = '@mantine/core/Container';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Container.js","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  useComponentDefaultProps,\n  MantineSize,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Container.styles';\n\nexport interface ContainerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Predefined container max-width or number for max-width in px */\n  size?: MantineNumberSize;\n\n  /** If fluid is set to true, size prop is ignored and Container always take 100% of width */\n  fluid?: boolean;\n\n  /** Container sizes */\n  sizes?: Record<MantineSize, number>;\n}\n\nconst defaultProps: Partial<ContainerProps> = {\n  sizes: {\n    xs: 540,\n    sm: 720,\n    md: 960,\n    lg: 1140,\n    xl: 1320,\n  },\n};\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (props: ContainerProps, ref) => {\n    const { className, fluid, size, unstyled, sizes, ...others } = useComponentDefaultProps(\n      'Container',\n      defaultProps,\n      props\n    );\n\n    const { classes, cx } = useStyles({ fluid, size, sizes }, { unstyled, name: 'Container' });\n    return <Box className={cx(classes.root, className)} ref={ref} {...others} />;\n  }\n);\n\nContainer.displayName = '@mantine/core/Container';\n"],"names":[],"mappings":"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"}

package/esm/components/CopyButton/CopyButton.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useClipboard } from '@mantine/hooks';
+import { useComponentDefaultProps } from '@mantine/styles';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {
+  timeout: 1e3
+};
+function CopyButton(props) {
+  const _a = useComponentDefaultProps("CopyButton", defaultProps, props), { children, timeout, value } = _a, others = __objRest(_a, ["children", "timeout", "value"]);
+  const clipboard = useClipboard({ timeout });
+  const copy = () => clipboard.copy(value);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(__spreadValues({ copy, copied: clipboard.copied }, others)));
+}
+CopyButton.displayName = "@mantine/core/CopyButton";
+
+export { CopyButton };
+//# sourceMappingURL=CopyButton.js.map

package/esm/components/CopyButton/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sources":["../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React from 'react';\nimport { useClipboard } from '@mantine/hooks';\nimport { useComponentDefaultProps } from '@mantine/styles';\n\nexport interface CopyButtonProps {\n  /** Function called with current status */\n  children(payload: { copied: boolean; copy(): void }): React.ReactNode;\n\n  /** Value that should be copied to the clipboard */\n  value: string;\n\n  /** Copied status timeout in ms */\n  timeout?: number;\n}\n\nconst defaultProps: Partial<CopyButtonProps> = {\n  timeout: 1000,\n};\n\nexport function CopyButton(props: CopyButtonProps) {\n  const { children, timeout, value, ...others } = useComponentDefaultProps(\n    'CopyButton',\n    defaultProps,\n    props\n  );\n  const clipboard = useClipboard({ timeout });\n  const copy = () => clipboard.copy(value);\n  return <>{children({ copy, copied: clipboard.copied, ...others })}</>;\n}\n\nCopyButton.displayName = '@mantine/core/CopyButton';\n"],"names":[],"mappings":";;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAIF,MAAM,YAAY,GAAG;AACrB,EAAE,OAAO,EAAE,GAAG;AACd,CAAC,CAAC;AACK,SAAS,UAAU,CAAC,KAAK,EAAE;AAClC,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AACtK,EAAE,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAC9C,EAAE,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3C,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AACzI,CAAC;AACD,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}

package/esm/components/Dialog/Dialog.js

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
-import { getDefaultZIndex, useMantineTheme, useMantineDefaultProps } from '@mantine/styles';
-import { Paper } from '../Paper/Paper.js';
+import { getDefaultZIndex, useMantineTheme, useComponentDefaultProps } from '@mantine/styles';
 import useStyles from './Dialog.styles.js';
 import { Affix } from '../Affix/Affix.js';
 import { Transition } from '../Transition/Transition.js';
-import { CloseButton } from '../ActionIcon/CloseButton/CloseButton.js';
+import { Paper } from '../Paper/Paper.js';
+import { CloseButton } from '../CloseButton/CloseButton.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -42,8 +42,8 @@ const defaultProps = {
   transition: "pop-top-right",
   transitionDuration: 200
 };
-function MantineDialog(props) {
-  const _a = useMantineDefaultProps("Dialog", defaultProps, props), {
+function DialogBody(props) {
+  const _a = useComponentDefaultProps("Dialog", defaultProps, props), {
     withCloseButton,
     onClose,
     position,
@@ -58,7 +58,8 @@ function MantineDialog(props) {
     size,
     transition,
     transitionDuration,
-    transitionTimingFunction
+    transitionTimingFunction,
+    unstyled
   } = _a, others = __objRest(_a, [
     "withCloseButton",
     "onClose",
@@ -74,9 +75,10 @@ function MantineDialog(props) {
     "size",
     "transition",
     "transitionDuration",
-    "transitionTimingFunction"
+    "transitionTimingFunction",
+    "unstyled"
   ]);
-  const { classes, cx } = useStyles({ size }, { classNames, styles, name: "Dialog" });
+  const { classes, cx } = useStyles({ size }, { classNames, styles, unstyled, name: "Dialog" });
   return /* @__PURE__ */ React.createElement(Transition, {
     mounted: opened,
     transition,
@@ -86,7 +88,8 @@ function MantineDialog(props) {
     className: cx(classes.root, className),
     style: __spreadValues(__spreadValues({}, style), transitionStyles),
     shadow,
-    withBorder
+    withBorder,
+    unstyled
   }, others), withCloseButton && /* @__PURE__ */ React.createElement(CloseButton, {
     onClick: onClose,
     className: classes.closeButton
@@ -99,9 +102,9 @@ const Dialog = forwardRef((_a, ref) => {
     zIndex,
     position: props.position || { bottom: theme.spacing.xl, right: theme.spacing.xl },
     ref
-  }, /* @__PURE__ */ React.createElement(MantineDialog, __spreadValues({}, props)));
+  }, /* @__PURE__ */ React.createElement(DialogBody, __spreadValues({}, props)));
 });
 Dialog.displayName = "@mantine/core/Dialog";
 
-export { Dialog, MantineDialog };
+export { Dialog, DialogBody };
 //# sourceMappingURL=Dialog.js.map