@mantine/core 2.5.0-alpha.5 → 2.6.0-alpha.1

package/cjs/components/ColorInput/ColorInput.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var hooks = require('@mantine/hooks');
+var styles = require('@mantine/styles');
 var InputWrapper = require('../InputWrapper/InputWrapper.js');
 var Input = require('../Input/Input.js');
 var ColorSwatch = require('../ColorSwatch/ColorSwatch.js');
@@ -11,12 +12,8 @@ var Popper = require('../Popper/Popper.js');
 var Paper = require('../Paper/Paper.js');
 var ColorPicker = require('../ColorPicker/ColorPicker.js');
 var ColorInput_styles = require('./ColorInput.styles.js');
-var useMantineTheme = require('../../theme/use-mantine-theme/use-mantine-theme.js');
-var mergeStyles = require('../../theme/utils/merge-styles/merge-styles.js');
-var ClickOutsiteProvider = require('../../utils/ClickOutsideProvider/ClickOutsiteProvider.js');
 var parsers = require('../ColorPicker/converters/parsers.js');
 var converters = require('../ColorPicker/converters/converters.js');
-var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -82,8 +79,7 @@ function ColorInput(_a) {
     value,
     defaultValue,
     classNames,
-    styles,
-    themeOverride,
+    styles: styles$1,
     disallowInput = false,
     fixOnBlur = true,
     withPreview = true,
@@ -113,7 +109,6 @@ function ColorInput(_a) {
     "defaultValue",
     "classNames",
     "styles",
-    "themeOverride",
     "disallowInput",
     "fixOnBlur",
     "withPreview",
@@ -129,15 +124,12 @@ function ColorInput(_a) {
     "style",
     "swatches"
   ]);
-  const theme = useMantineTheme.useMantineTheme(themeOverride);
-  const classes = ColorInput_styles['default']({ theme }, classNames, "color-input");
-  const _styles = mergeStyles.mergeStyles(classes, styles);
+  const { classes } = ColorInput_styles['default'](null, classNames, "color-input");
+  const _styles = styles.mergeStyles(classes, styles$1);
   const uuid = hooks.useId(id);
-  const [dropdownElement, setDropdownElement] = React.useState(null);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [dropdownOpened, setDropdownOpened] = React.useState(false);
   const [lastValidValue, setLastValidValue] = React.useState("");
-  const clickOutsideRegister = ClickOutsiteProvider.useClickOutsideRegister();
   const [_value, setValue] = hooks.useUncontrolled({
     value,
     defaultValue,
@@ -154,9 +146,6 @@ function ColorInput(_a) {
     setDropdownOpened(false);
     fixOnBlur && setValue(lastValidValue);
   };
-  React.useEffect(() => {
-    clickOutsideRegister(`${uuid}-dropdown`, dropdownElement);
-  }, [dropdownElement]);
   React.useEffect(() => {
     if (parsers.isColorValid(_value)) {
       setLastValidValue(_value);
@@ -173,7 +162,7 @@ function ColorInput(_a) {
     error,
     required,
     classNames,
-    styles,
+    styles: styles$1,
     size,
     id: uuid,
     className,
@@ -194,16 +183,16 @@ function ColorInput(_a) {
     required,
     icon: icon || (withPreview ? /* @__PURE__ */ React__default.createElement(ColorSwatch.ColorSwatch, {
       color: parsers.isColorValid(_value) ? _value : "#fff",
-      size: getSizeValue.getSizeValue({ size, sizes: SWATCH_SIZES })
+      size: styles.getSizeValue({ size, sizes: SWATCH_SIZES })
     }) : null),
     readOnly: disallowInput,
     classNames,
-    styles: __spreadProps(__spreadValues({}, styles), {
-      input: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.input), { cursor: disallowInput ? "pointer" : void 0 })
+    styles: __spreadProps(__spreadValues({}, styles$1), {
+      input: __spreadProps(__spreadValues({}, styles$1 == null ? void 0 : styles$1.input), { cursor: disallowInput ? "pointer" : void 0 })
     })
   }))), /* @__PURE__ */ React__default.createElement(Popper.Popper, {
     referenceElement,
-    transitionDuration: hooks.useReducedMotion() ? 0 : transitionDuration,
+    transitionDuration,
     transitionTimingFunction,
     transition,
     mounted: dropdownOpened,
@@ -214,10 +203,9 @@ function ColorInput(_a) {
     arrowSize: 3,
     zIndex: dropdownZIndex,
     arrowClassName: classes.arrow,
-    arrowStyle: __spreadProps(__spreadValues({}, _styles.arrow), { left: getSizeValue.getSizeValue({ size, sizes: ARROW_OFFSET }) })
+    arrowStyle: __spreadProps(__spreadValues({}, _styles.arrow), { left: styles.getSizeValue({ size, sizes: ARROW_OFFSET }) })
   }, /* @__PURE__ */ React__default.createElement("div", {
-    style: { pointerEvents: "all" },
-    ref: setDropdownElement
+    style: { pointerEvents: "all" }
   }, /* @__PURE__ */ React__default.createElement(Paper.Paper, {
     shadow: "sm",
     padding: size,

package/cjs/components/ColorInput/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useUncontrolled, useReducedMotion, useDidUpdate, useId } from '@mantine/hooks';\nimport { DefaultProps, getSizeValue, mergeStyles, useMantineTheme } from '../../theme';\nimport {\n  InputWrapper,\n  InputWrapperBaseProps,\n  InputWrapperStylesNames,\n} from '../InputWrapper/InputWrapper';\nimport { Input, InputBaseProps, InputStylesNames } from '../Input/Input';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { Popper } from '../Popper/Popper';\nimport { MantineTransition } from '../Transition/Transition';\nimport { Paper } from '../Paper/Paper';\nimport {\n  ColorPicker,\n  ColorPickerBaseProps,\n  ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\nimport { useClickOutsideRegister } from '../../utils';\nimport useStyles from './ColorInput.styles';\n\nexport type ColorInputStylesNames =\n  | InputWrapperStylesNames\n  | InputStylesNames\n  | ColorPickerStylesNames\n  | keyof ReturnType<typeof useStyles>;\n\nexport interface ColorInputProps\n  extends InputWrapperBaseProps,\n    InputBaseProps,\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  /** Dropdown transition name or object */\n  transition?: MantineTransition;\n\n  /** Dropdown appear/disappear transition duration in ms */\n  transitionDuration?: number;\n\n  /** Dropdown transition timing function, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n}\n\nconst SWATCH_SIZES = {\n  xs: 16,\n  sm: 18,\n  md: 22,\n  lg: 28,\n  xl: 36,\n};\n\nconst ARROW_OFFSET = {\n  xs: 12,\n  sm: 15,\n  md: 17,\n  lg: 21,\n  xl: 25,\n};\n\nexport function ColorInput({\n  label,\n  description,\n  error,\n  required,\n  wrapperProps,\n  size = 'sm',\n  format = 'hex',\n  onChange,\n  onFocus,\n  onBlur,\n  value,\n  defaultValue,\n  classNames,\n  styles,\n  themeOverride,\n  disallowInput = false,\n  fixOnBlur = true,\n  withPreview = true,\n  swatchesPerRow = 10,\n  withPicker = true,\n  icon,\n  transition = 'pop-top-left',\n  id,\n  dropdownZIndex = 1,\n  transitionDuration = 0,\n  transitionTimingFunction,\n  className,\n  style,\n  swatches,\n  ...others\n}: ColorInputProps) {\n  const theme = useMantineTheme(themeOverride);\n  const classes = useStyles({ theme }, classNames, 'color-input');\n  const _styles = mergeStyles(classes, styles);\n  const uuid = useId(id);\n  const [dropdownElement, setDropdownElement] = useState<HTMLDivElement>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null);\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const clickOutsideRegister = useClickOutsideRegister();\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    rule: (val) => !!val && val.trim().length > 0,\n    onChange,\n  });\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    typeof onFocus === 'function' && onFocus(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    typeof onBlur === 'function' && onBlur(event);\n    setDropdownOpened(false);\n    fixOnBlur && setValue(lastValidValue);\n  };\n\n  useEffect(() => {\n    clickOutsideRegister(`${uuid}-dropdown`, dropdownElement);\n  }, [dropdownElement]);\n\n  useEffect(() => {\n    if (isColorValid(_value)) {\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    <InputWrapper\n      label={label}\n      description={description}\n      error={error}\n      required={required}\n      classNames={classNames}\n      styles={styles}\n      size={size}\n      id={uuid}\n      className={className}\n      style={style}\n      __staticSelector=\"color-input\"\n      {...wrapperProps}\n    >\n      <div ref={setReferenceElement}>\n        <Input<'input'>\n          {...others}\n          __staticSelector=\"color-input\"\n          id={uuid}\n          onFocus={handleInputFocus}\n          onBlur={handleInputBlur}\n          spellCheck={false}\n          size={size}\n          value={_value}\n          onChange={(event) => setValue(event.currentTarget.value)}\n          invalid={!!error}\n          required={required}\n          icon={\n            icon ||\n            (withPreview ? (\n              <ColorSwatch\n                color={isColorValid(_value) ? _value : '#fff'}\n                size={getSizeValue({ size, sizes: SWATCH_SIZES })}\n              />\n            ) : null)\n          }\n          readOnly={disallowInput}\n          classNames={classNames}\n          styles={{\n            ...styles,\n            input: { ...styles?.input, cursor: disallowInput ? 'pointer' : undefined },\n          }}\n        />\n      </div>\n\n      <Popper\n        referenceElement={referenceElement}\n        transitionDuration={useReducedMotion() ? 0 : transitionDuration}\n        transitionTimingFunction={transitionTimingFunction}\n        transition={transition}\n        mounted={dropdownOpened}\n        position=\"bottom\"\n        placement=\"start\"\n        gutter={5}\n        withArrow\n        arrowSize={3}\n        zIndex={dropdownZIndex}\n        arrowClassName={classes.arrow}\n        arrowStyle={{ ..._styles.arrow, left: getSizeValue({ size, sizes: ARROW_OFFSET }) }}\n      >\n        <div style={{ pointerEvents: 'all' }} ref={setDropdownElement}>\n          <Paper\n            shadow=\"sm\"\n            padding={size}\n            className={classes.dropdownBody}\n            onMouseDown={(event) => event.preventDefault()}\n          >\n            <ColorPicker\n              __staticSelector=\"color-input\"\n              value={_value}\n              onChange={setValue}\n              format={format}\n              swatches={swatches}\n              swatchesPerRow={swatchesPerRow}\n              withPicker={withPicker}\n              size={size}\n              focusable={false}\n            />\n          </Paper>\n        </div>\n      </Popper>\n    </InputWrapper>\n  );\n}\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":["useMantineTheme","useStyles","mergeStyles","useId","useState","useClickOutsideRegister","useUncontrolled","useEffect","isColorValid","useDidUpdate","convertHsvaTo","parseColor","React","InputWrapper","Input","ColorSwatch","getSizeValue","Popper","useReducedMotion","Paper","ColorPicker"],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useUncontrolled, useDidUpdate, useId } from '@mantine/hooks';\nimport { mergeStyles, DefaultProps, getSizeValue, ClassNames } from '@mantine/styles';\nimport {\n  InputWrapper,\n  InputWrapperBaseProps,\n  InputWrapperStylesNames,\n} from '../InputWrapper/InputWrapper';\nimport { Input, InputBaseProps, InputStylesNames } from '../Input/Input';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { Popper } from '../Popper/Popper';\nimport { MantineTransition } from '../Transition';\nimport { Paper } from '../Paper/Paper';\nimport {\n  ColorPicker,\n  ColorPickerBaseProps,\n  ColorPickerStylesNames,\n} from '../ColorPicker/ColorPicker';\nimport { convertHsvaTo, isColorValid, parseColor } from '../ColorPicker/converters';\nimport useStyles from './ColorInput.styles';\n\nexport type ColorInputStylesNames =\n  | InputWrapperStylesNames\n  | InputStylesNames\n  | ColorPickerStylesNames\n  | ClassNames<typeof useStyles>;\n\nexport interface ColorInputProps\n  extends InputWrapperBaseProps,\n    InputBaseProps,\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  /** Dropdown transition name or object */\n  transition?: MantineTransition;\n\n  /** Dropdown appear/disappear transition duration in ms */\n  transitionDuration?: number;\n\n  /** Dropdown transition timing function, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n}\n\nconst SWATCH_SIZES = {\n  xs: 16,\n  sm: 18,\n  md: 22,\n  lg: 28,\n  xl: 36,\n};\n\nconst ARROW_OFFSET = {\n  xs: 12,\n  sm: 15,\n  md: 17,\n  lg: 21,\n  xl: 25,\n};\n\nexport function ColorInput({\n  label,\n  description,\n  error,\n  required,\n  wrapperProps,\n  size = 'sm',\n  format = 'hex',\n  onChange,\n  onFocus,\n  onBlur,\n  value,\n  defaultValue,\n  classNames,\n  styles,\n  disallowInput = false,\n  fixOnBlur = true,\n  withPreview = true,\n  swatchesPerRow = 10,\n  withPicker = true,\n  icon,\n  transition = 'pop-top-left',\n  id,\n  dropdownZIndex = 1,\n  transitionDuration = 0,\n  transitionTimingFunction,\n  className,\n  style,\n  swatches,\n  ...others\n}: ColorInputProps) {\n  const { classes } = useStyles(null, classNames, 'color-input');\n  const _styles = mergeStyles(classes, styles);\n  const uuid = useId(id);\n  const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null);\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    rule: (val) => !!val && val.trim().length > 0,\n    onChange,\n  });\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    typeof onFocus === 'function' && onFocus(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    typeof onBlur === 'function' && onBlur(event);\n    setDropdownOpened(false);\n    fixOnBlur && setValue(lastValidValue);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value)) {\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    <InputWrapper\n      label={label}\n      description={description}\n      error={error}\n      required={required}\n      classNames={classNames}\n      styles={styles}\n      size={size}\n      id={uuid}\n      className={className}\n      style={style}\n      __staticSelector=\"color-input\"\n      {...wrapperProps}\n    >\n      <div ref={setReferenceElement}>\n        <Input<'input'>\n          {...others}\n          __staticSelector=\"color-input\"\n          id={uuid}\n          onFocus={handleInputFocus}\n          onBlur={handleInputBlur}\n          spellCheck={false}\n          size={size}\n          value={_value}\n          onChange={(event) => setValue(event.currentTarget.value)}\n          invalid={!!error}\n          required={required}\n          icon={\n            icon ||\n            (withPreview ? (\n              <ColorSwatch\n                color={isColorValid(_value) ? _value : '#fff'}\n                size={getSizeValue({ size, sizes: SWATCH_SIZES })}\n              />\n            ) : null)\n          }\n          readOnly={disallowInput}\n          classNames={classNames}\n          styles={{\n            ...styles,\n            input: { ...styles?.input, cursor: disallowInput ? 'pointer' : undefined },\n          }}\n        />\n      </div>\n\n      <Popper\n        referenceElement={referenceElement}\n        transitionDuration={transitionDuration}\n        transitionTimingFunction={transitionTimingFunction}\n        transition={transition}\n        mounted={dropdownOpened}\n        position=\"bottom\"\n        placement=\"start\"\n        gutter={5}\n        withArrow\n        arrowSize={3}\n        zIndex={dropdownZIndex}\n        arrowClassName={classes.arrow}\n        arrowStyle={{ ..._styles.arrow, left: getSizeValue({ size, sizes: ARROW_OFFSET }) }}\n      >\n        <div style={{ pointerEvents: 'all' }}>\n          <Paper\n            shadow=\"sm\"\n            padding={size}\n            className={classes.dropdownBody}\n            onMouseDown={(event) => event.preventDefault()}\n          >\n            <ColorPicker\n              __staticSelector=\"color-input\"\n              value={_value}\n              onChange={setValue}\n              format={format}\n              swatches={swatches}\n              swatchesPerRow={swatchesPerRow}\n              withPicker={withPicker}\n              size={size}\n              focusable={false}\n            />\n          </Paper>\n        </div>\n      </Popper>\n    </InputWrapper>\n  );\n}\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":["styles","useStyles","mergeStyles","useId","useState","useUncontrolled","useEffect","isColorValid","useDidUpdate","convertHsvaTo","parseColor","React","InputWrapper","Input","ColorSwatch","getSizeValue","Popper","Paper","ColorPicker"],"mappings":"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"}

package/cjs/components/ColorInput/ColorInput.styles.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var createMemoStyles = require('../../theme/create-memo-styles.js');
+var styles = require('@mantine/styles');
 
-var useStyles = createMemoStyles.createMemoStyles({
-  arrow: ({ theme }) => ({
+var useStyles = styles.createStyles((theme) => ({
+  arrow: {
     borderColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2],
     background: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
-  }),
-  dropdownBody: ({ theme }) => ({
+  },
+  dropdownBody: {
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
     border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`
-  })
-});
+  }
+}));
 
 exports.default = useStyles;
 //# sourceMappingURL=ColorInput.styles.js.map

package/cjs/components/ColorInput/ColorInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.styles.js","sources":["../../../src/components/ColorInput/ColorInput.styles.ts"],"sourcesContent":["import { createMemoStyles, MantineTheme } from '../../theme';\n\ninterface ColorInputStyles {\n  theme: MantineTheme;\n}\n\nexport default createMemoStyles({\n  arrow: ({ theme }: ColorInputStyles) => ({\n    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],\n    background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n  }),\n\n  dropdownBody: ({ theme }: ColorInputStyles) => ({\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]\n    }`,\n  }),\n});\n"],"names":["createMemoStyles"],"mappings":";;;;;;AACA,gBAAeA,iCAAgB,CAAC;AAChC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM;AACzB,IAAI,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC3F,IAAI,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACjF,GAAG,CAAC;AACJ,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM;AAChC,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACtF,IAAI,MAAM,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACrG,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"ColorInput.styles.js","sources":["../../../src/components/ColorInput/ColorInput.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport default createStyles((theme) => ({\n  arrow: {\n    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],\n    background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n  },\n\n  dropdownBody: {\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]\n    }`,\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,MAAM;AACxC,EAAE,KAAK,EAAE;AACT,IAAI,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC3F,IAAI,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACjF,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACtF,IAAI,MAAM,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACrG,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/components/ColorPicker/AlphaSlider/AlphaSlider.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var styles = require('@mantine/styles');
 var ColorSlider = require('../ColorSlider/ColorSlider.js');
 var parsers = require('../converters/parsers.js');
-var useMantineTheme = require('../../../theme/use-mantine-theme/use-mantine-theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -43,21 +43,10 @@ var __objRest = (source, exclude) => {
   return target;
 };
 function AlphaSlider(_a) {
-  var _b = _a, {
-    value,
-    onChange,
-    color,
-    themeOverride
-  } = _b, others = __objRest(_b, [
-    "value",
-    "onChange",
-    "color",
-    "themeOverride"
-  ]);
-  const theme = useMantineTheme.useMantineTheme(themeOverride);
+  var _b = _a, { value, onChange, color } = _b, others = __objRest(_b, ["value", "onChange", "color"]);
+  const theme = styles.useMantineTheme();
   const _color = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3];
   return /* @__PURE__ */ React__default.createElement(ColorSlider.ColorSlider, __spreadProps(__spreadValues({}, others), {
-    themeOverride,
     value,
     onChange: (val) => onChange(parsers.round(val, 2)),
     maxValue: 1,

package/cjs/components/ColorPicker/AlphaSlider/AlphaSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaSlider.js","sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import React from 'react';\nimport { useMantineTheme } from '../../../theme';\nimport { ColorSlider, BaseColorSliderProps } from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends BaseColorSliderProps {\n  color: string;\n}\n\nexport function AlphaSlider({\n  value,\n  onChange,\n  color,\n  themeOverride,\n  ...others\n}: AlphaSliderProps) {\n  const theme = useMantineTheme(themeOverride);\n  const _color = theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3];\n\n  return (\n    <ColorSlider\n      {...others}\n      themeOverride={themeOverride}\n      value={value}\n      onChange={(val) => onChange(round(val, 2))}\n      maxValue={1}\n      round={false}\n      overlays={[\n        {\n          backgroundImage: `linear-gradient(45deg, ${_color} 25%, transparent 25%), linear-gradient(-45deg, ${_color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${_color} 75%), linear-gradient(-45deg, ${\n            theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white\n          } 75%, ${_color} 75%)`,\n          backgroundSize: '8px 8px',\n          backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',\n        },\n        {\n          backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n        },\n        {\n          boxShadow: 'rgba(0, 0, 0, .1) 0px 0px 0px 1px inset, rgb(0, 0, 0, .15) 0px 0px 4px inset',\n        },\n      ]}\n    />\n  );\n}\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\n"],"names":["useMantineTheme","React","ColorSlider","round"],"mappings":"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"}
+{"version":3,"file":"AlphaSlider.js","sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import React from 'react';\nimport { useMantineTheme } from '@mantine/styles';\nimport { ColorSlider, BaseColorSliderProps } from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends BaseColorSliderProps {\n  color: string;\n}\n\nexport function AlphaSlider({ value, onChange, color, ...others }: AlphaSliderProps) {\n  const theme = useMantineTheme();\n  const _color = theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3];\n\n  return (\n    <ColorSlider\n      {...others}\n      value={value}\n      onChange={(val) => onChange(round(val, 2))}\n      maxValue={1}\n      round={false}\n      overlays={[\n        {\n          backgroundImage: `linear-gradient(45deg, ${_color} 25%, transparent 25%), linear-gradient(-45deg, ${_color} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${_color} 75%), linear-gradient(-45deg, ${\n            theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white\n          } 75%, ${_color} 75%)`,\n          backgroundSize: '8px 8px',\n          backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',\n        },\n        {\n          backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n        },\n        {\n          boxShadow: 'rgba(0, 0, 0, .1) 0px 0px 0px 1px inset, rgb(0, 0, 0, .15) 0px 0px 4px inset',\n        },\n      ]}\n    />\n  );\n}\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\n"],"names":["useMantineTheme","React","ColorSlider","round"],"mappings":"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"}

package/cjs/components/ColorPicker/ColorPicker.js

@@ -3,24 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var cx = require('clsx');
 var hooks = require('@mantine/hooks');
+var styles = require('@mantine/styles');
 var ColorSwatch = require('../ColorSwatch/ColorSwatch.js');
 var HueSlider = require('./HueSlider/HueSlider.js');
 var AlphaSlider = require('./AlphaSlider/AlphaSlider.js');
 var Saturation = require('./Saturation/Saturation.js');
 var Swatches = require('./Swatches/Swatches.js');
 var ColorPicker_styles = require('./ColorPicker.styles.js');
-var useMantineTheme = require('../../theme/use-mantine-theme/use-mantine-theme.js');
-var mergeStyles = require('../../theme/utils/merge-styles/merge-styles.js');
 var parsers = require('./converters/parsers.js');
 var converters = require('./converters/converters.js');
-var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -73,10 +69,9 @@ function ColorPicker(_a) {
     saturationLabel,
     hueLabel,
     alphaLabel,
-    themeOverride,
     className,
     style,
-    styles,
+    styles: styles$1,
     classNames
   } = _b, others = __objRest(_b, [
     "value",
@@ -93,15 +88,13 @@ function ColorPicker(_a) {
     "saturationLabel",
     "hueLabel",
     "alphaLabel",
-    "themeOverride",
     "className",
     "style",
     "styles",
     "classNames"
   ]);
-  const theme = useMantineTheme.useMantineTheme(themeOverride);
-  const classes = ColorPicker_styles['default']({ theme, size, fullWidth }, classNames, __staticSelector);
-  const _styles = mergeStyles.mergeStyles(classes, styles);
+  const { classes, cx } = ColorPicker_styles['default']({ size, fullWidth }, classNames, __staticSelector);
+  const _styles = styles.mergeStyles(classes, styles$1);
   const formatRef = React.useRef(format);
   const valueRef = React.useRef(null);
   const withAlpha = format === "rgba" || format === "hsla";
@@ -133,14 +126,13 @@ function ColorPicker(_a) {
     setValue(converters.convertHsvaTo(format, parsed));
   }, [format]);
   return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
-    className: cx__default(classes.root, className),
+    className: cx(classes.root, className),
     style: __spreadValues(__spreadValues({}, style), _styles.root)
   }, others), withPicker && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Saturation.Saturation, {
     value: parsed,
     onChange: handleChange,
     color: _value,
-    themeOverride,
-    styles,
+    styles: styles$1,
     classNames,
     size,
     focusable,
@@ -156,8 +148,7 @@ function ColorPicker(_a) {
     value: parsed.h,
     onChange: (h) => handleChange({ h }),
     size,
-    themeOverride,
-    styles,
+    styles: styles$1,
     classNames,
     focusable,
     "aria-label": hueLabel,
@@ -168,8 +159,7 @@ function ColorPicker(_a) {
     size,
     color: converters.convertHsvaTo("hex", parsed),
     style: { marginTop: 6 },
-    themeOverride,
-    styles,
+    styles: styles$1,
     classNames,
     focusable,
     "aria-label": alphaLabel,
@@ -177,8 +167,7 @@ function ColorPicker(_a) {
   })), withAlpha && /* @__PURE__ */ React__default.createElement(ColorSwatch.ColorSwatch, {
     color: _value,
     radius: "sm",
-    themeOverride,
-    size: getSizeValue.getSizeValue({ size, sizes: SWATCH_SIZES }),
+    size: styles.getSizeValue({ size, sizes: SWATCH_SIZES }),
     className: classes.preview,
     style: _styles.preview
   }))), Array.isArray(swatches) && /* @__PURE__ */ React__default.createElement(Swatches.Swatches, {
@@ -188,13 +177,11 @@ function ColorPicker(_a) {
     swatchesPerRow,
     focusable,
     classNames,
-    styles,
+    styles: styles$1,
     __staticSelector
   }));
 }
 ColorPicker.displayName = "@mantine/core/ColorPicker";
 
-exports.HueSlider = HueSlider.HueSlider;
-exports.AlphaSlider = AlphaSlider.AlphaSlider;
 exports.ColorPicker = ColorPicker;
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { useMantineTheme, DefaultProps, mergeStyles, MantineSize, getSizeValue } from '../../theme';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider, HueSliderProps } from './HueSlider/HueSlider';\nimport { AlphaSlider, AlphaSliderProps } 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 { HueSlider, AlphaSlider };\nexport type { HueSliderProps, AlphaSliderProps };\n\nexport type ColorPickerStylesNames =\n  | keyof ReturnType<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\nexport function ColorPicker({\n  value,\n  defaultValue,\n  onChange,\n  format,\n  swatches,\n  swatchesPerRow = 10,\n  size = 'sm',\n  withPicker = true,\n  fullWidth = false,\n  focusable = true,\n  __staticSelector = 'color-picker',\n  saturationLabel,\n  hueLabel,\n  alphaLabel,\n  themeOverride,\n  className,\n  style,\n  styles,\n  classNames,\n  ...others\n}: ColorPickerProps) {\n  const theme = useMantineTheme(themeOverride);\n  const classes = useStyles({ theme, size, fullWidth }, classNames, __staticSelector);\n  const _styles = mergeStyles(classes, styles);\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    <div className={cx(classes.root, className)} style={{ ...style, ..._styles.root }} {...others}>\n      {withPicker && (\n        <>\n          <Saturation\n            value={parsed}\n            onChange={handleChange}\n            color={_value}\n            themeOverride={themeOverride}\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} style={_styles.body}>\n            <div className={classes.sliders} style={_styles.sliders}>\n              <HueSlider\n                value={parsed.h}\n                onChange={(h) => handleChange({ h })}\n                size={size}\n                themeOverride={themeOverride}\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                  themeOverride={themeOverride}\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                themeOverride={themeOverride}\n                size={getSizeValue({ size, sizes: SWATCH_SIZES })}\n                className={classes.preview}\n                style={_styles.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    </div>\n  );\n}\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":["useMantineTheme","useStyles","mergeStyles","useRef","useState","useUncontrolled","isColorValid","parseColor","convertHsvaTo","useEffect","useDidUpdate","React","cx","Saturation","HueSlider","AlphaSlider","ColorSwatch","getSizeValue","Swatches"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { mergeStyles, DefaultProps, MantineSize, getSizeValue, ClassNames } from '@mantine/styles';\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  | ClassNames<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\nexport function ColorPicker({\n  value,\n  defaultValue,\n  onChange,\n  format,\n  swatches,\n  swatchesPerRow = 10,\n  size = 'sm',\n  withPicker = true,\n  fullWidth = false,\n  focusable = true,\n  __staticSelector = 'color-picker',\n  saturationLabel,\n  hueLabel,\n  alphaLabel,\n  className,\n  style,\n  styles,\n  classNames,\n  ...others\n}: ColorPickerProps) {\n  const { classes, cx } = useStyles({ size, fullWidth }, classNames, __staticSelector);\n  const _styles = mergeStyles(classes, styles);\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    <div className={cx(classes.root, className)} style={{ ...style, ..._styles.root }} {...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} style={_styles.body}>\n            <div className={classes.sliders} style={_styles.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={getSizeValue({ size, sizes: SWATCH_SIZES })}\n                className={classes.preview}\n                style={_styles.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    </div>\n  );\n}\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":["styles","useStyles","mergeStyles","useRef","useState","useUncontrolled","isColorValid","parseColor","convertHsvaTo","useEffect","useDidUpdate","React","Saturation","HueSlider","AlphaSlider","ColorSwatch","getSizeValue","Swatches"],"mappings":"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"}

package/cjs/components/ColorPicker/ColorPicker.styles.js

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var createMemoStyles = require('../../theme/create-memo-styles.js');
-var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');
+var styles = require('@mantine/styles');
 
 const sizes = {
   xs: 180,
@@ -12,25 +11,25 @@ const sizes = {
   lg: 280,
   xl: 320
 };
-var useStyles = createMemoStyles.createMemoStyles({
+var useStyles = styles.createStyles((theme, { size, fullWidth }) => ({
   preview: {},
-  root: ({ size, fullWidth }) => ({
+  root: {
     boxSizing: "border-box",
-    width: fullWidth ? "100%" : getSizeValue.getSizeValue({ size, sizes }),
+    width: fullWidth ? "100%" : styles.getSizeValue({ size, sizes }),
     padding: 1
-  }),
-  body: ({ theme, size }) => ({
+  },
+  body: {
     display: "flex",
     boxSizing: "border-box",
-    paddingTop: getSizeValue.getSizeValue({ size, sizes: theme.spacing }) / 2
-  }),
-  sliders: ({ theme }) => ({
+    paddingTop: styles.getSizeValue({ size, sizes: theme.spacing }) / 2
+  },
+  sliders: {
     flex: 1,
     boxSizing: "border-box",
     "&:not(:only-child)": {
       marginRight: theme.spacing.xs
     }
-  }),
+  },
   slider: {
     boxSizing: "border-box",
     "& + &": {
@@ -40,7 +39,7 @@ var useStyles = createMemoStyles.createMemoStyles({
   swatch: {
     cursor: "pointer"
   }
-});
+}));
 
 exports.default = useStyles;
 exports.sizes = sizes;

package/cjs/components/ColorPicker/ColorPicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/components/ColorPicker/ColorPicker.styles.ts"],"sourcesContent":["import { createMemoStyles, getSizeValue, MantineSize, MantineTheme } from '../../theme';\n\ninterface ColorPickerStyles {\n  theme: MantineTheme;\n  size: MantineSize;\n  fullWidth: boolean;\n}\n\nexport const sizes = {\n  xs: 180,\n  sm: 200,\n  md: 240,\n  lg: 280,\n  xl: 320,\n};\n\nexport default createMemoStyles({\n  preview: {},\n\n  root: ({ size, fullWidth }: ColorPickerStyles) => ({\n    boxSizing: 'border-box',\n    width: fullWidth ? '100%' : getSizeValue({ size, sizes }),\n    padding: 1,\n  }),\n\n  body: ({ theme, size }: ColorPickerStyles) => ({\n    display: 'flex',\n    boxSizing: 'border-box',\n    paddingTop: getSizeValue({ size, sizes: theme.spacing }) / 2,\n  }),\n\n  sliders: ({ theme }: ColorPickerStyles) => ({\n    flex: 1,\n    boxSizing: 'border-box',\n\n    '&:not(:only-child)': {\n      marginRight: theme.spacing.xs,\n    },\n  }),\n\n  slider: {\n    boxSizing: 'border-box',\n\n    '& + &': {\n      marginTop: 5,\n    },\n  },\n\n  swatch: {\n    cursor: 'pointer',\n  },\n});\n"],"names":["createMemoStyles","getSizeValue"],"mappings":";;;;;;;AACY,MAAC,KAAK,GAAG;AACrB,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE;AACF,gBAAeA,iCAAgB,CAAC;AAChC,EAAE,OAAO,EAAE,EAAE;AACb,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM;AAClC,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,KAAK,EAAE,SAAS,GAAG,MAAM,GAAGC,yBAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC7D,IAAI,OAAO,EAAE,CAAC;AACd,GAAG,CAAC;AACJ,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM;AAC9B,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,UAAU,EAAEA,yBAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AAChE,GAAG,CAAC;AACJ,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM;AAC3B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,oBAAoB,EAAE;AAC1B,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACnC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,EAAE;AACV,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,OAAO,EAAE;AACb,MAAM,SAAS,EAAE,CAAC;AAClB,KAAK;AACL,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,MAAM,EAAE,SAAS;AACrB,GAAG;AACH,CAAC,CAAC;;;;;"}
+{"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/components/ColorPicker/ColorPicker.styles.ts"],"sourcesContent":["import { createStyles, getSizeValue, MantineSize } from '@mantine/styles';\n\ninterface ColorPickerStyles {\n  size: MantineSize;\n  fullWidth: boolean;\n}\n\nexport const sizes = {\n  xs: 180,\n  sm: 200,\n  md: 240,\n  lg: 280,\n  xl: 320,\n};\n\nexport default createStyles((theme, { size, fullWidth }: ColorPickerStyles) => ({\n  preview: {},\n\n  root: {\n    boxSizing: 'border-box',\n    width: fullWidth ? '100%' : getSizeValue({ size, sizes }),\n    padding: 1,\n  },\n\n  body: {\n    display: 'flex',\n    boxSizing: 'border-box',\n    paddingTop: getSizeValue({ size, sizes: theme.spacing }) / 2,\n  },\n\n  sliders: {\n    flex: 1,\n    boxSizing: 'border-box',\n\n    '&:not(:only-child)': {\n      marginRight: theme.spacing.xs,\n    },\n  },\n\n  slider: {\n    boxSizing: 'border-box',\n\n    '& + &': {\n      marginTop: 5,\n    },\n  },\n\n  swatch: {\n    cursor: 'pointer',\n  },\n}));\n"],"names":["createStyles","getSizeValue"],"mappings":";;;;;;AACY,MAAC,KAAK,GAAG;AACrB,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE;AACF,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM;AAC7D,EAAE,OAAO,EAAE,EAAE;AACb,EAAE,IAAI,EAAE;AACR,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,KAAK,EAAE,SAAS,GAAG,MAAM,GAAGC,mBAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC7D,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,UAAU,EAAEA,mBAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AAChE,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,oBAAoB,EAAE;AAC1B,MAAM,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACnC,KAAK;AACL,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,OAAO,EAAE;AACb,MAAM,SAAS,EAAE,CAAC;AAClB,KAAK;AACL,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,MAAM,EAAE,SAAS;AACrB,GAAG;AACH,CAAC,CAAC,CAAC;;;;;"}

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

@@ -3,17 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var cx = require('clsx');
 var hooks = require('@mantine/hooks');
+var styles = require('@mantine/styles');
 var Thumb = require('../Thumb/Thumb.js');
 var ColorSlider_styles = require('./ColorSlider.styles.js');
-var useMantineTheme = require('../../../theme/use-mantine-theme/use-mantine-theme.js');
-var mergeStyles = require('../../../theme/utils/merge-styles/merge-styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -58,9 +55,8 @@ function ColorSlider(_a) {
     focusable = true,
     elementRef,
     overlays,
-    themeOverride,
     classNames,
-    styles,
+    styles: styles$1,
     className,
     style
   } = _b, others = __objRest(_b, [
@@ -74,15 +70,13 @@ function ColorSlider(_a) {
     "focusable",
     "elementRef",
     "overlays",
-    "themeOverride",
     "classNames",
     "styles",
     "className",
     "style"
   ]);
-  const theme = useMantineTheme.useMantineTheme(themeOverride);
-  const classes = ColorSlider_styles['default']({ theme, size }, classNames, __staticSelector);
-  const _styles = mergeStyles.mergeStyles(classes, styles);
+  const { classes, cx } = ColorSlider_styles['default']({ size }, classNames, __staticSelector);
+  const _styles = styles.mergeStyles(classes, styles$1);
   const [position, setPosition] = React.useState({ y: 0, x: value / maxValue });
   const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
   const { ref } = hooks.useMove(({ x }) => onChange(getChangeValue(x)));
@@ -113,7 +107,7 @@ function ColorSlider(_a) {
   }));
   return /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({}, others), {
     ref: hooks.useMergedRef(ref, elementRef),
-    className: cx__default(classes.slider, className),
+    className: cx(classes.slider, className),
     style: __spreadValues(__spreadValues({}, _styles.slider), style),
     role: "slider",
     "aria-valuenow": value,
@@ -124,8 +118,7 @@ function ColorSlider(_a) {
   }), layers, /* @__PURE__ */ React__default.createElement(Thumb.Thumb, {
     __staticSelector,
     classNames,
-    styles,
-    themeOverride,
+    styles: styles$1,
     position,
     style: { top: 1, backgroundColor: thumbColor },
     className: classes.sliderThumb,