@mantine/core 3.6.14 → 3.7.0-alpha.2

package/esm/components/Chips/Chip/Chip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.styles.js","sources":["../../../../src/components/Chips/Chip/Chip.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineNumberSize,\n  MantineSize,\n  getSharedColorScheme,\n  MantineColor,\n} from '@mantine/styles';\n\nexport const sizes = {\n  xs: 24,\n  sm: 28,\n  md: 32,\n  lg: 36,\n  xl: 40,\n};\n\nconst iconSizes = {\n  xs: 10,\n  sm: 12,\n  md: 14,\n  lg: 16,\n  xl: 18,\n};\n\nconst padding = {\n  xs: 16,\n  sm: 20,\n  md: 24,\n  lg: 28,\n  xl: 32,\n};\n\nconst checkedPadding = {\n  xs: 7.5,\n  sm: 10,\n  md: 11.5,\n  lg: 13,\n  xl: 15,\n};\n\ninterface ChipStyles {\n  radius: MantineNumberSize;\n  size: MantineSize;\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { radius, size, color }: ChipStyles, getRef) => {\n  const label = getRef('label');\n  const outline = getRef('outline');\n  const filled = getRef('filled');\n  const iconWrapper = getRef('iconWrapper');\n\n  return {\n    root: {},\n\n    label: {\n      ref: label,\n      ...theme.fn.fontStyles(),\n      boxSizing: 'border-box',\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n      display: 'inline-block',\n      alignItems: 'center',\n      userSelect: 'none',\n      border: `1px solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4]\n      }`,\n      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      height: theme.fn.size({ size, sizes }),\n      fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n      lineHeight: `${theme.fn.size({ size, sizes }) - 2}px`,\n      paddingLeft: theme.fn.size({ size, sizes: padding }),\n      paddingRight: theme.fn.size({ size, sizes: padding }),\n      cursor: 'pointer',\n      whiteSpace: 'nowrap',\n      transition: 'background-color 100ms ease',\n      WebkitTapHighlightColor: 'transparent',\n    },\n\n    outline: {\n      ref: outline,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n\n      '&:hover': {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n      },\n    },\n\n    filled: {\n      ref: filled,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n      borderColor: 'transparent',\n\n      '&:hover': {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n      },\n    },\n\n    iconWrapper: {\n      ref: iconWrapper,\n      color: theme.fn.themeColor(color, 6),\n      width:\n        theme.fn.size({ size, sizes: iconSizes }) +\n        theme.fn.size({ size, sizes: theme.spacing }) / 1.5,\n      maxWidth:\n        theme.fn.size({ size, sizes: iconSizes }) +\n        theme.fn.size({ size, sizes: theme.spacing }) / 1.5,\n      height: theme.fn.size({ size, sizes: iconSizes }),\n      display: 'inline-block',\n      verticalAlign: 'middle',\n      overflow: 'hidden',\n    },\n\n    disabled: {\n      backgroundColor: `${\n        theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n      } !important`,\n      borderColor: `${\n        theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n      } !important`,\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n      cursor: 'not-allowed',\n\n      '&:hover': {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n      },\n\n      [`& .${iconWrapper}`]: {\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n      },\n    },\n\n    checked: {\n      paddingLeft: theme.fn.size({ size, sizes: checkedPadding }),\n      paddingRight: theme.fn.size({ size, sizes: checkedPadding }),\n\n      [`&.${outline}`]: {\n        border: `1px solid ${theme.fn.themeColor(color, 6)}`,\n      },\n\n      [`&.${filled}`]: {\n        '&, &:hover': {\n          backgroundColor:\n            theme.colorScheme === 'dark'\n              ? getSharedColorScheme({ color, theme, variant: 'light' }).background\n              : theme.fn.themeColor(color, 1),\n        },\n      },\n    },\n\n    checkIcon: {\n      width: theme.fn.size({ size, sizes: iconSizes }),\n      height: theme.fn.size({ size, sizes: iconSizes }) / 1.1,\n      display: 'block',\n    },\n\n    input: {\n      width: 0,\n      height: 0,\n      padding: 0,\n      opacity: 0,\n      margin: 0,\n\n      // input is hidden by default, these styles add focus to label when user navigates with keyboard\n      '&:focus': {\n        outline: 'none',\n\n        [`& + .${label}`]: {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${\n            theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n          }, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`,\n        },\n\n        '&:focus:not(:focus-visible)': {\n          [`& + .${label}`]: {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n  };\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chip.styles.js","sources":["../../../../src/components/Chips/Chip/Chip.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineNumberSize,\n  MantineSize,\n  getSharedColorScheme,\n  MantineColor,\n} from '@mantine/styles';\n\nexport const sizes = {\n  xs: 24,\n  sm: 28,\n  md: 32,\n  lg: 36,\n  xl: 40,\n};\n\nconst iconSizes = {\n  xs: 10,\n  sm: 12,\n  md: 14,\n  lg: 16,\n  xl: 18,\n};\n\nconst padding = {\n  xs: 16,\n  sm: 20,\n  md: 24,\n  lg: 28,\n  xl: 32,\n};\n\nconst checkedPadding = {\n  xs: 7.5,\n  sm: 10,\n  md: 11.5,\n  lg: 13,\n  xl: 15,\n};\n\nexport interface ChipStylesParams {\n  radius: MantineNumberSize;\n  size: MantineSize;\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { radius, size, color }: ChipStylesParams, getRef) => ({\n  root: {},\n\n  label: {\n    ref: getRef('label'),\n    ...theme.fn.fontStyles(),\n    boxSizing: 'border-box',\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n    display: 'inline-block',\n    alignItems: 'center',\n    userSelect: 'none',\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4]\n    }`,\n    borderRadius: theme.fn.radius(radius),\n    height: theme.fn.size({ size, sizes }),\n    fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n    lineHeight: `${theme.fn.size({ size, sizes }) - 2}px`,\n    paddingLeft: theme.fn.size({ size, sizes: padding }),\n    paddingRight: theme.fn.size({ size, sizes: padding }),\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n    transition: 'background-color 100ms ease',\n    WebkitTapHighlightColor: 'transparent',\n  },\n\n  outline: {\n    ref: getRef('outline'),\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n\n    '&:hover': {\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n    },\n  },\n\n  filled: {\n    ref: getRef('filled'),\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n    borderColor: 'transparent',\n\n    '&:hover': {\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n    },\n  },\n\n  iconWrapper: {\n    ref: getRef('iconWrapper'),\n    color: theme.fn.themeColor(color, 6),\n    width:\n      theme.fn.size({ size, sizes: iconSizes }) +\n      theme.fn.size({ size, sizes: theme.spacing }) / 1.5,\n    maxWidth:\n      theme.fn.size({ size, sizes: iconSizes }) +\n      theme.fn.size({ size, sizes: theme.spacing }) / 1.5,\n    height: theme.fn.size({ size, sizes: iconSizes }),\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    overflow: 'hidden',\n  },\n\n  disabled: {\n    backgroundColor: `${\n      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n    } !important`,\n    borderColor: `${\n      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n    } !important`,\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n    cursor: 'not-allowed',\n\n    '&:hover': {\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n    },\n\n    [`& .${getRef('iconWrapper')}`]: {\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n    },\n  },\n\n  checked: {\n    paddingLeft: theme.fn.size({ size, sizes: checkedPadding }),\n    paddingRight: theme.fn.size({ size, sizes: checkedPadding }),\n\n    [`&.${getRef('outline')}`]: {\n      border: `1px solid ${theme.fn.themeColor(color, 6)}`,\n    },\n\n    [`&.${getRef('filled')}`]: {\n      '&, &:hover': {\n        backgroundColor:\n          theme.colorScheme === 'dark'\n            ? getSharedColorScheme({ color, theme, variant: 'light' }).background\n            : theme.fn.themeColor(color, 1),\n      },\n    },\n  },\n\n  checkIcon: {\n    width: theme.fn.size({ size, sizes: iconSizes }),\n    height: theme.fn.size({ size, sizes: iconSizes }) / 1.1,\n    display: 'block',\n  },\n\n  input: {\n    width: 0,\n    height: 0,\n    padding: 0,\n    opacity: 0,\n    margin: 0,\n\n    // input is hidden by default, these styles add focus to label when user navigates with keyboard\n    '&:focus': {\n      outline: 'none',\n\n      [`& + .${getRef('label')}`]: {\n        outline: 'none',\n        boxShadow:\n          theme.focusRing === 'always' || theme.focusRing === 'auto'\n            ? `0 0 0 2px ${\n                theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n              }, 0 0 0 4px ${\n                theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 7 : 5]\n              }`\n            : undefined,\n      },\n\n      '&:focus:not(:focus-visible)': {\n        [`& + .${getRef('label')}`]: {\n          boxShadow: theme.focusRing === 'auto' || theme.focusRing === 'never' ? 'none' : undefined,\n        },\n      },\n    },\n  },\n}));\n"],"names":[],"mappings":"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"}

package/esm/components/Chips/Chips.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useUuid, useUncontrolled } from '@mantine/hooks';
+import { useMantineDefaultProps } from '@mantine/styles';
 import { Group } from '../Group/Group.js';
 import { Chip } from './Chip/Chip.js';
 import { filterChildrenByType } from '../../utils/filter-children-by-type/filter-children-by-type.js';
@@ -32,15 +33,20 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function Chips(_a) {
-  var _b = _a, {
+const defaultProps = {
+  size: "sm",
+  spacing: "xs",
+  radius: "xl"
+};
+function Chips(props) {
+  const _a = useMantineDefaultProps("Chips", defaultProps, props), {
     value,
     defaultValue,
     onChange,
     color,
-    spacing = "xs",
-    radius = "xl",
-    size = "sm",
+    spacing,
+    radius,
+    size,
     name,
     variant,
     multiple,
@@ -48,7 +54,7 @@ function Chips(_a) {
     id,
     classNames,
     styles
-  } = _b, others = __objRest(_b, [
+  } = _a, others = __objRest(_a, [
     "value",
     "defaultValue",
     "onChange",

package/esm/components/Chips/Chips.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.js","sources":["../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React from 'react';\nimport { useUncontrolled, useUuid } from '@mantine/hooks';\nimport { DefaultProps, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\nimport { filterChildrenByType } from '../../utils';\nimport { Group, GroupProps } from '../Group/Group';\nimport { Chip, ChipStylesNames } from './Chip/Chip';\n\nexport interface ChipsProps<T extends boolean = false>\n  extends DefaultProps<ChipStylesNames>,\n    Omit<GroupProps, 'value' | 'defaultValue' | 'onChange' | 'classNames' | 'styles'> {\n  /** Spacing between chips from theme or number to set value in px */\n  spacing?: MantineNumberSize;\n\n  /** Chip border-radius from theme or number to set value in px */\n  radius?: MantineNumberSize;\n\n  /** Predefined chip size */\n  size?: MantineSize;\n\n  /** Allow multiple values to be picked */\n  multiple?: T;\n\n  /** Controlled component value */\n  value?: T extends true ? string[] : string;\n\n  /** Uncontrolled component value */\n  defaultValue?: T extends true ? string[] : string;\n\n  /** Called when value changes */\n  onChange?(value: T extends true ? string[] : string): void;\n\n  /** Static id, used to generate inputs names */\n  id?: string;\n\n  /** <Chip /> components only */\n  children?: React.ReactNode;\n\n  /** Controls chip appearance, defaults to filled with dark theme and to outline in light theme */\n  variant?: 'filled' | 'outline';\n\n  /** Active chip color, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Inputs name attribute */\n  name?: string;\n}\n\nexport function Chips<T extends boolean>({\n  value,\n  defaultValue,\n  onChange,\n  color,\n  spacing = 'xs',\n  radius = 'xl',\n  size = 'sm',\n  name,\n  variant,\n  multiple,\n  children,\n  id,\n  classNames,\n  styles,\n  ...others\n}: ChipsProps<T>) {\n  const uuid = useUuid(id);\n  const [_value, setValue] = useUncontrolled<string | string[]>({\n    value,\n    defaultValue,\n    finalValue: multiple ? [] : null,\n    onChange,\n    rule: (val) => (multiple ? Array.isArray(val) : typeof val === 'string'),\n  });\n\n  const chips = filterChildrenByType(children, Chip).map((child, index) =>\n    React.cloneElement(child, {\n      variant,\n      radius,\n      color,\n      __staticSelector: 'Chips',\n      classNames,\n      styles,\n      name,\n      size,\n      id: `${uuid}-${index}`,\n      type: multiple ? 'checkbox' : 'radio',\n      checked: Array.isArray(_value)\n        ? _value.includes(child.props.value)\n        : child.props.value === _value,\n      onChange: () => {\n        const val = child.props.value;\n\n        if (Array.isArray(_value)) {\n          setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n        } else {\n          setValue(val);\n        }\n      },\n    })\n  );\n\n  return (\n    <Group spacing={spacing} id={uuid} {...others}>\n      {chips}\n    </Group>\n  );\n}\n\nChips.displayName = '@mantine/core/Chips';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chips.js","sources":["../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import React from 'react';\nimport { useUncontrolled, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { filterChildrenByType } from '../../utils';\nimport { Group, GroupProps } from '../Group/Group';\nimport { Chip, ChipStylesNames } from './Chip/Chip';\n\nexport interface ChipsProps<T extends boolean = false>\n  extends DefaultProps<ChipStylesNames>,\n    Omit<GroupProps, 'value' | 'defaultValue' | 'onChange' | 'classNames' | 'styles'> {\n  /** Spacing between chips from theme or number to set value in px */\n  spacing?: MantineNumberSize;\n\n  /** Chip border-radius from theme or number to set value in px */\n  radius?: MantineNumberSize;\n\n  /** Predefined chip size */\n  size?: MantineSize;\n\n  /** Allow multiple values to be picked */\n  multiple?: T;\n\n  /** Controlled component value */\n  value?: T extends true ? string[] : string;\n\n  /** Uncontrolled component value */\n  defaultValue?: T extends true ? string[] : string;\n\n  /** Called when value changes */\n  onChange?(value: T extends true ? string[] : string): void;\n\n  /** Static id, used to generate inputs names */\n  id?: string;\n\n  /** <Chip /> components only */\n  children?: React.ReactNode;\n\n  /** Controls chip appearance, defaults to filled with dark theme and to outline in light theme */\n  variant?: 'filled' | 'outline';\n\n  /** Active chip color, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Inputs name attribute */\n  name?: string;\n}\n\nconst defaultProps: Partial<ChipsProps<false>> = {\n  size: 'sm',\n  spacing: 'xs',\n  radius: 'xl',\n};\n\nexport function Chips<T extends boolean>(props: ChipsProps<T>) {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    color,\n    spacing,\n    radius,\n    size,\n    name,\n    variant,\n    multiple,\n    children,\n    id,\n    classNames,\n    styles,\n    ...others\n  } = useMantineDefaultProps('Chips', defaultProps as any, props);\n\n  const uuid = useUuid(id);\n  const [_value, setValue] = useUncontrolled<string | string[]>({\n    value,\n    defaultValue,\n    finalValue: multiple ? [] : null,\n    onChange,\n    rule: (val) => (multiple ? Array.isArray(val) : typeof val === 'string'),\n  });\n\n  const chips = filterChildrenByType(children, Chip).map((child, index) =>\n    React.cloneElement(child, {\n      variant,\n      radius,\n      color,\n      __staticSelector: 'Chips',\n      classNames,\n      styles,\n      name,\n      size,\n      id: `${uuid}-${index}`,\n      type: multiple ? 'checkbox' : 'radio',\n      checked: Array.isArray(_value)\n        ? _value.includes(child.props.value)\n        : child.props.value === _value,\n      onChange: () => {\n        const val = child.props.value;\n\n        if (Array.isArray(_value)) {\n          setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n        } else {\n          setValue(val);\n        }\n      },\n    })\n  );\n\n  return (\n    <Group spacing={spacing} id={uuid} {...others}>\n      {chips}\n    </Group>\n  );\n}\n\nChips.displayName = '@mantine/core/Chips';\n"],"names":[],"mappings":"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"}

package/esm/components/Code/Code.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { useMantineTheme } from '@mantine/styles';
+import { useMantineDefaultProps, useMantineTheme } from '@mantine/styles';
 import useStyles from './Code.styles.js';
 import { Box } from '../Box/Box.js';
 
@@ -31,8 +31,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const Code = forwardRef((_a, ref) => {
-  var _b = _a, { className, children, block = false, color, styles, classNames } = _b, others = __objRest(_b, ["className", "children", "block", "color", "styles", "classNames"]);
+const Code = forwardRef((props, ref) => {
+  const _a = useMantineDefaultProps("Code", {}, props), { className, children, block, color, styles, classNames } = _a, others = __objRest(_a, ["className", "children", "block", "color", "styles", "classNames"]);
   const theme = useMantineTheme();
   const themeColor = color || (theme.colorScheme === "dark" ? "dark" : "gray");
   const { classes, cx } = useStyles({ color: themeColor }, { name: "Code", styles, classNames });

package/esm/components/Code/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useMantineTheme, DefaultProps, MantineColor } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Code.styles';\n\nexport interface CodeProps extends DefaultProps, React.ComponentPropsWithoutRef<'code'> {\n  /** Code content */\n  children: React.ReactNode;\n\n  /** Code color and background from theme, defaults to gray in light theme and to dark in dark theme */\n  color?: MantineColor;\n\n  /** True for code block, false for inline code */\n  block?: boolean;\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(\n  (\n    { className, children, block = false, color, styles, classNames, ...others }: CodeProps,\n    ref\n  ) => {\n    const theme = useMantineTheme();\n    const themeColor = color || (theme.colorScheme === 'dark' ? 'dark' : 'gray');\n    const { classes, cx } = useStyles({ color: themeColor }, { name: 'Code', styles, classNames });\n\n    if (block) {\n      return (\n        <Box\n          component=\"pre\"\n          dir=\"ltr\"\n          className={cx(classes.root, classes.block, className)}\n          ref={ref as any}\n          {...others}\n        >\n          {children}\n        </Box>\n      );\n    }\n\n    return (\n      <Box component=\"code\" className={cx(classes.root, className)} ref={ref} dir=\"ltr\" {...others}>\n        {children}\n      </Box>\n    );\n  }\n);\n\nCode.displayName = '@mantine/core/Code';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Code.js","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  useMantineTheme,\n  DefaultProps,\n  MantineColor,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Code.styles';\n\nexport interface CodeProps extends DefaultProps, React.ComponentPropsWithoutRef<'code'> {\n  /** Code content */\n  children: React.ReactNode;\n\n  /** Code color and background from theme, defaults to gray in light theme and to dark in dark theme */\n  color?: MantineColor;\n\n  /** True for code block, false for inline code */\n  block?: boolean;\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>((props: CodeProps, ref) => {\n  const { className, children, block, color, styles, classNames, ...others } =\n    useMantineDefaultProps('Code', {}, props);\n  const theme = useMantineTheme();\n  const themeColor = color || (theme.colorScheme === 'dark' ? 'dark' : 'gray');\n  const { classes, cx } = useStyles({ color: themeColor }, { name: 'Code', styles, classNames });\n\n  if (block) {\n    return (\n      <Box\n        component=\"pre\"\n        dir=\"ltr\"\n        className={cx(classes.root, classes.block, className)}\n        ref={ref as any}\n        {...others}\n      >\n        {children}\n      </Box>\n    );\n  }\n\n  return (\n    <Box component=\"code\" className={cx(classes.root, className)} ref={ref} dir=\"ltr\" {...others}>\n      {children}\n    </Box>\n  );\n});\n\nCode.displayName = '@mantine/core/Code';\n"],"names":[],"mappings":"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"}

package/esm/components/Code/Code.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.styles.js","sources":["../../../src/components/Code/Code.styles.ts"],"sourcesContent":["import { createStyles, getSharedColorScheme, MantineColor } from '@mantine/styles';\n\ninterface CodeStyles {\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { color }: CodeStyles) => {\n  const colors = getSharedColorScheme({ theme, color, variant: 'light' });\n  return {\n    root: {\n      ...theme.fn.fontStyles(),\n      lineHeight: theme.lineHeight,\n      padding: `2px ${theme.spacing.xs / 2}px`,\n      borderRadius: theme.radius.sm,\n      color:\n        theme.colorScheme === 'dark'\n          ? color === 'dark'\n            ? theme.colors.dark[0]\n            : theme.white\n          : theme.colors.dark[7],\n      backgroundColor:\n        theme.colorScheme === 'dark' && color === 'dark' ? theme.colors.dark[4] : colors.background,\n      fontFamily: theme.fontFamilyMonospace,\n      fontSize: theme.fontSizes.xs,\n    },\n\n    block: {\n      padding: theme.spacing.xs,\n      margin: 0,\n      overflowX: 'auto',\n    },\n  };\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Code.styles.js","sources":["../../../src/components/Code/Code.styles.ts"],"sourcesContent":["import { createStyles, getSharedColorScheme, MantineColor } from '@mantine/styles';\n\nexport interface CodeStylesParams {\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { color }: CodeStylesParams) => {\n  const colors = getSharedColorScheme({ theme, color, variant: 'light' });\n  return {\n    root: {\n      ...theme.fn.fontStyles(),\n      lineHeight: theme.lineHeight,\n      padding: `2px ${theme.spacing.xs / 2}px`,\n      borderRadius: theme.radius.sm,\n      color:\n        theme.colorScheme === 'dark'\n          ? color === 'dark'\n            ? theme.colors.dark[0]\n            : theme.white\n          : theme.colors.dark[7],\n      backgroundColor:\n        theme.colorScheme === 'dark' && color === 'dark' ? theme.colors.dark[4] : colors.background,\n      fontFamily: theme.fontFamilyMonospace,\n      fontSize: theme.fontSizes.xs,\n    },\n\n    block: {\n      padding: theme.spacing.xs,\n      margin: 0,\n      overflowX: 'auto',\n    },\n  };\n});\n"],"names":[],"mappings":"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"}

package/esm/components/Collapse/Collapse.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useReducedMotion } from '@mantine/hooks';
-import { extractMargins } from '@mantine/styles';
+import { useMantineDefaultProps, extractSystemStyles } from '@mantine/styles';
 import { useCollapse } from './use-collapse.js';
 import { Box } from '../Box/Box.js';
 
@@ -32,16 +32,21 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function Collapse(_a) {
-  var _b = _a, {
+const defaultProps = {
+  transitionDuration: 200,
+  transitionTimingFunction: "ease",
+  animateOpacity: true
+};
+function Collapse(props) {
+  const _a = useMantineDefaultProps("Collapse", defaultProps, props), {
     children,
     in: opened,
-    transitionDuration = 200,
-    transitionTimingFunction = "ease",
+    transitionDuration,
+    transitionTimingFunction,
     style,
     onTransitionEnd,
-    animateOpacity = true
-  } = _b, others = __objRest(_b, [
+    animateOpacity
+  } = _a, others = __objRest(_a, [
     "children",
     "in",
     "transitionDuration",
@@ -52,7 +57,7 @@ function Collapse(_a) {
   ]);
   const reduceMotion = useReducedMotion();
   const duration = reduceMotion ? 0 : transitionDuration;
-  const { margins, rest } = extractMargins(others);
+  const { systemStyles, rest } = extractSystemStyles(others);
   const getCollapseProps = useCollapse({
     opened,
     transitionDuration: duration,
@@ -62,7 +67,7 @@ function Collapse(_a) {
   if (duration === 0) {
     return opened ? /* @__PURE__ */ React.createElement(Box, __spreadValues({}, rest), children) : null;
   }
-  return /* @__PURE__ */ React.createElement(Box, __spreadValues({}, getCollapseProps(__spreadValues(__spreadValues({ style }, rest), margins))), /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({}, getCollapseProps(__spreadValues(__spreadValues({ style }, rest), systemStyles))), /* @__PURE__ */ React.createElement("div", {
     style: {
       opacity: opened || !animateOpacity ? 1 : 0,
       transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : "none"

package/esm/components/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import React from 'react';\nimport { useReducedMotion } from '@mantine/hooks';\nimport { extractMargins, DefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { useCollapse } from './use-collapse';\n\nexport interface CollapseProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be collapsed */\n  children: React.ReactNode;\n\n  /** Opened state */\n  in: boolean;\n\n  /** Called each time transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Transition timing function */\n  transitionTimingFunction?: string;\n\n  /** Should opacity be animated */\n  animateOpacity?: boolean;\n}\n\nexport function Collapse({\n  children,\n  in: opened,\n  transitionDuration = 200,\n  transitionTimingFunction = 'ease',\n  style,\n  onTransitionEnd,\n  animateOpacity = true,\n  ...others\n}: CollapseProps) {\n  const reduceMotion = useReducedMotion();\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const { margins, rest } = extractMargins(others);\n  const getCollapseProps = useCollapse({\n    opened,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n  });\n\n  if (duration === 0) {\n    return opened ? <Box {...rest}>{children}</Box> : null;\n  }\n\n  return (\n    <Box {...getCollapseProps({ style, ...rest, ...margins })}>\n      <div\n        style={{\n          opacity: opened || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n        }}\n      >\n        {children}\n      </div>\n    </Box>\n  );\n}\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Collapse.js","sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import React from 'react';\nimport { useReducedMotion } from '@mantine/hooks';\nimport { extractSystemStyles, DefaultProps, useMantineDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { useCollapse } from './use-collapse';\n\nexport interface CollapseProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be collapsed */\n  children: React.ReactNode;\n\n  /** Opened state */\n  in: boolean;\n\n  /** Called each time transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Transition timing function */\n  transitionTimingFunction?: string;\n\n  /** Should opacity be animated */\n  animateOpacity?: boolean;\n}\n\nconst defaultProps: Partial<CollapseProps> = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n};\n\nexport function Collapse(props: CollapseProps) {\n  const {\n    children,\n    in: opened,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    animateOpacity,\n    ...others\n  } = useMantineDefaultProps('Collapse', defaultProps, props);\n\n  const reduceMotion = useReducedMotion();\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const getCollapseProps = useCollapse({\n    opened,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n  });\n\n  if (duration === 0) {\n    return opened ? <Box {...rest}>{children}</Box> : null;\n  }\n\n  return (\n    <Box {...getCollapseProps({ style, ...rest, ...systemStyles })}>\n      <div\n        style={{\n          opacity: opened || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n        }}\n      >\n        {children}\n      </div>\n    </Box>\n  );\n}\n\nCollapse.displayName = '@mantine/core/Collapse';\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;AAMF,MAAM,YAAY,GAAG;AACrB,EAAE,kBAAkB,EAAE,GAAG;AACzB,EAAE,wBAAwB,EAAE,MAAM;AAClC,EAAE,cAAc,EAAE,IAAI;AACtB,CAAC,CAAC;AACK,SAAS,QAAQ,CAAC,KAAK,EAAE;AAChC,EAAE,MAAM,EAAE,GAAG,sBAAsB,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACtE,IAAI,QAAQ;AACZ,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,kBAAkB;AACtB,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,IAAI,eAAe;AACnB,IAAI,cAAc;AAClB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,UAAU;AACd,IAAI,IAAI;AACR,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,OAAO;AACX,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;AAC1C,EAAE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,kBAAkB,CAAC;AACzD,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAC7D,EAAE,MAAM,gBAAgB,GAAG,WAAW,CAAC;AACvC,IAAI,MAAM;AACV,IAAI,kBAAkB,EAAE,QAAQ;AAChC,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,IAAI,QAAQ,KAAK,CAAC,EAAE;AACtB,IAAI,OAAO,MAAM,mBAAmB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC;AACxG,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAE,gBAAgB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAClM,IAAI,KAAK,EAAE;AACX,MAAM,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,CAAC;AAChD,MAAM,UAAU,EAAE,cAAc,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAC,GAAG,MAAM;AAC/F,KAAK;AACL,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AAChB,CAAC;AACD,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}

package/esm/components/ColorInput/ColorInput.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState, useEffect } from 'react';
 import { useUuid, useUncontrolled, useDidUpdate } from '@mantine/hooks';
-import { getDefaultZIndex, extractMargins } from '@mantine/styles';
+import { getDefaultZIndex, useMantineDefaultProps, extractSystemStyles } from '@mantine/styles';
 import { ColorPicker } from '../ColorPicker/ColorPicker.js';
 import useStyles from './ColorInput.styles.js';
 import { isColorValid, parseColor } from '../ColorPicker/converters/parsers.js';
@@ -56,15 +56,27 @@ const ARROW_OFFSET = {
   lg: 21,
   xl: 25
 };
-const ColorInput = forwardRef((_a, ref) => {
-  var _b = _a, {
+const defaultProps = {
+  size: "sm",
+  format: "hex",
+  fixOnBlur: true,
+  withPreview: true,
+  swatchesPerRow: 10,
+  withPicker: true,
+  transition: "pop-top-left",
+  dropdownZIndex: getDefaultZIndex("popover"),
+  transitionDuration: 0,
+  withinPortal: true
+};
+const ColorInput = forwardRef((props, ref) => {
+  const _a = useMantineDefaultProps("ColorInput", defaultProps, props), {
     label,
     description,
     error,
     required,
     wrapperProps,
-    size = "sm",
-    format = "hex",
+    size,
+    format,
     onChange,
     onFocus,
     onBlur,
@@ -72,23 +84,23 @@ const ColorInput = forwardRef((_a, ref) => {
     defaultValue,
     classNames,
     styles,
-    disallowInput = false,
-    fixOnBlur = true,
-    withPreview = true,
-    swatchesPerRow = 10,
-    withPicker = true,
+    disallowInput,
+    fixOnBlur,
+    withPreview,
+    swatchesPerRow,
+    withPicker,
     icon,
-    transition = "pop-top-left",
+    transition,
     id,
-    dropdownZIndex = getDefaultZIndex("popover"),
-    transitionDuration = 0,
+    dropdownZIndex,
+    transitionDuration,
     transitionTimingFunction,
-    withinPortal = true,
+    withinPortal,
     className,
     style,
     swatches,
     sx
-  } = _b, others = __objRest(_b, [
+  } = _a, others = __objRest(_a, [
     "label",
     "description",
     "error",
@@ -121,7 +133,7 @@ const ColorInput = forwardRef((_a, ref) => {
     "sx"
   ]);
   const { classes, cx, theme } = useStyles({ disallowInput }, { classNames, styles, name: "ColorInput" });
-  const { margins, rest } = extractMargins(others);
+  const { systemStyles, rest } = extractSystemStyles(others);
   const uuid = useUuid(id);
   const [referenceElement, setReferenceElement] = useState(null);
   const [dropdownOpened, setDropdownOpened] = useState(false);
@@ -165,7 +177,7 @@ const ColorInput = forwardRef((_a, ref) => {
     style,
     __staticSelector: "ColorInput",
     sx
-  }, margins), wrapperProps), /* @__PURE__ */ React.createElement("div", {
+  }, systemStyles), wrapperProps), /* @__PURE__ */ React.createElement("div", {
     ref: setReferenceElement
   }, /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({}, rest), {
     ref,
@@ -204,7 +216,7 @@ const ColorInput = forwardRef((_a, ref) => {
     style: { pointerEvents: "all" }
   }, /* @__PURE__ */ React.createElement(Paper, {
     shadow: "sm",
-    padding: size,
+    p: size,
     className: classes.dropdownBody,
     onMouseDown: (event) => event.preventDefault()
   }, /* @__PURE__ */ React.createElement(ColorPicker, {

package/esm/components/ColorInput/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate, useUuid } from '@mantine/hooks';\nimport { DefaultProps, ClassNames, extractMargins, getDefaultZIndex } from '@mantine/styles';\nimport { InputWrapper, InputWrapperBaseProps, InputWrapperStylesNames } from '../InputWrapper';\nimport { Input, InputBaseProps, InputStylesNames } from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { Popper } from '../Popper';\nimport { MantineTransition } from '../Transition';\nimport { Paper } from '../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  /** Whether to render the dropdown in a Portal */\n  withinPortal?: boolean;\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 const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (\n    {\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 = getDefaultZIndex('popover'),\n      transitionDuration = 0,\n      transitionTimingFunction,\n      withinPortal = true,\n      className,\n      style,\n      swatches,\n      sx,\n      ...others\n    }: ColorInputProps,\n    ref\n  ) => {\n    const { classes, cx, theme } = useStyles(\n      { disallowInput },\n      { classNames, styles, name: 'ColorInput' }\n    );\n    const { margins, rest } = extractMargins(others);\n    const uuid = useUuid(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=\"ColorInput\"\n        sx={sx}\n        {...margins}\n        {...wrapperProps}\n      >\n        <div ref={setReferenceElement}>\n          <Input<'input'>\n            {...rest}\n            ref={ref}\n            __staticSelector=\"ColorInput\"\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            autoComplete=\"nope\"\n            icon={\n              icon ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput}\n            classNames={{ ...classNames, input: cx(classes.input, classNames?.input) }}\n            styles={styles}\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          arrowSize={3}\n          zIndex={dropdownZIndex}\n          arrowStyle={{ left: theme.fn.size({ size, sizes: ARROW_OFFSET }) }}\n          withinPortal={withinPortal}\n        >\n          <div style={{ pointerEvents: 'all' }}>\n            <Paper<'div'>\n              shadow=\"sm\"\n              padding={size}\n              className={classes.dropdownBody}\n              onMouseDown={(event) => event.preventDefault()}\n            >\n              <ColorPicker\n                __staticSelector=\"ColorInput\"\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                styles={styles}\n                classNames={classNames}\n              />\n            </Paper>\n          </div>\n        </Popper>\n      </InputWrapper>\n    );\n  }\n);\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  ClassNames,\n  extractSystemStyles,\n  getDefaultZIndex,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { InputWrapper, InputWrapperBaseProps, InputWrapperStylesNames } from '../InputWrapper';\nimport { Input, InputBaseProps, InputStylesNames } from '../Input';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { Popper } from '../Popper';\nimport { MantineTransition } from '../Transition';\nimport { Paper } from '../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  /** Whether to render the dropdown in a Portal */\n  withinPortal?: boolean;\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\nconst defaultProps: Partial<ColorInputProps> = {\n  size: 'sm',\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 10,\n  withPicker: true,\n  transition: 'pop-top-left',\n  dropdownZIndex: getDefaultZIndex('popover'),\n  transitionDuration: 0,\n  withinPortal: true,\n};\n\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\n  (props: ColorInputProps, ref) => {\n    const {\n      label,\n      description,\n      error,\n      required,\n      wrapperProps,\n      size,\n      format,\n      onChange,\n      onFocus,\n      onBlur,\n      value,\n      defaultValue,\n      classNames,\n      styles,\n      disallowInput,\n      fixOnBlur,\n      withPreview,\n      swatchesPerRow,\n      withPicker,\n      icon,\n      transition,\n      id,\n      dropdownZIndex,\n      transitionDuration,\n      transitionTimingFunction,\n      withinPortal,\n      className,\n      style,\n      swatches,\n      sx,\n      ...others\n    } = useMantineDefaultProps('ColorInput', defaultProps, props);\n\n    const { classes, cx, theme } = useStyles(\n      { disallowInput },\n      { classNames, styles, name: 'ColorInput' }\n    );\n    const { systemStyles, rest } = extractSystemStyles(others);\n    const uuid = useUuid(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=\"ColorInput\"\n        sx={sx}\n        {...systemStyles}\n        {...wrapperProps}\n      >\n        <div ref={setReferenceElement}>\n          <Input<'input'>\n            {...rest}\n            ref={ref}\n            __staticSelector=\"ColorInput\"\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            autoComplete=\"nope\"\n            icon={\n              icon ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput}\n            classNames={{ ...classNames, input: cx(classes.input, classNames?.input) }}\n            styles={styles}\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          arrowSize={3}\n          zIndex={dropdownZIndex}\n          arrowStyle={{ left: theme.fn.size({ size, sizes: ARROW_OFFSET }) }}\n          withinPortal={withinPortal}\n        >\n          <div style={{ pointerEvents: 'all' }}>\n            <Paper<'div'>\n              shadow=\"sm\"\n              p={size}\n              className={classes.dropdownBody}\n              onMouseDown={(event) => event.preventDefault()}\n            >\n              <ColorPicker\n                __staticSelector=\"ColorInput\"\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                styles={styles}\n                classNames={classNames}\n              />\n            </Paper>\n          </div>\n        </Popper>\n      </InputWrapper>\n    );\n  }\n);\n\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.styles.js","sources":["../../../src/components/ColorInput/ColorInput.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ColorInputStyles {\n  disallowInput: boolean;\n}\n\nexport default createStyles((theme, { disallowInput }: ColorInputStyles) => ({\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  input: {\n    cursor: disallowInput ? 'pointer' : undefined,\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM;AAC3D,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,EAAE,KAAK,EAAE;AACT,IAAI,MAAM,EAAE,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;AAC9C,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"ColorInput.styles.js","sources":["../../../src/components/ColorInput/ColorInput.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport interface ColorInputStylesParams {\n  disallowInput: boolean;\n}\n\nexport default createStyles((theme, { disallowInput }: ColorInputStylesParams) => ({\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  input: {\n    cursor: disallowInput ? 'pointer' : undefined,\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM;AAC3D,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,EAAE,KAAK,EAAE;AACT,IAAI,MAAM,EAAE,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;AAC9C,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/esm/components/ColorPicker/ColorPicker.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import { useUncontrolled, useDidUpdate } from '@mantine/hooks';
+import { useMantineDefaultProps } from '@mantine/styles';
 import { ColorSwatch } from '../ColorSwatch/ColorSwatch.js';
 import { HueSlider } from './HueSlider/HueSlider.js';
 import { AlphaSlider } from './AlphaSlider/AlphaSlider.js';
@@ -45,26 +46,33 @@ const SWATCH_SIZES = {
   lg: 50,
   xl: 54
 };
-const ColorPicker = forwardRef((_a, ref) => {
-  var _b = _a, {
+const defaultProps = {
+  swatchesPerRow: 10,
+  size: "sm",
+  withPicker: true,
+  focusable: true,
+  __staticSelector: "ColorPicker"
+};
+const ColorPicker = forwardRef((props, ref) => {
+  const _a = useMantineDefaultProps("ColorPicker", defaultProps, props), {
     value,
     defaultValue,
     onChange,
     format,
     swatches,
-    swatchesPerRow = 10,
-    size = "sm",
-    withPicker = true,
-    fullWidth = false,
-    focusable = true,
-    __staticSelector = "ColorPicker",
+    swatchesPerRow,
+    size,
+    withPicker,
+    fullWidth,
+    focusable,
+    __staticSelector,
     saturationLabel,
     hueLabel,
     alphaLabel,
     className,
     styles,
     classNames
-  } = _b, others = __objRest(_b, [
+  } = _a, others = __objRest(_a, [
     "value",
     "defaultValue",
     "onChange",

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, ClassNames } 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  | 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 const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n  (\n    {\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 = 'ColorPicker',\n      saturationLabel,\n      hueLabel,\n      alphaLabel,\n      className,\n      styles,\n      classNames,\n      ...others\n    }: ColorPickerProps,\n    ref\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, useEffect, useRef, forwardRef } from 'react';\nimport { useUncontrolled, useDidUpdate } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, ClassNames, 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  | 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\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/components/ColorPicker/ColorPicker.styles.ts"],"sourcesContent":["import { createStyles, 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  wrapper: {\n    boxSizing: 'border-box',\n    width: fullWidth ? '100%' : theme.fn.size({ size, sizes }),\n    padding: 1,\n  },\n\n  body: {\n    display: 'flex',\n    boxSizing: 'border-box',\n    paddingTop: theme.fn.size({ 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":[],"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,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM;AAC7D,EAAE,OAAO,EAAE,EAAE;AACb,EAAE,OAAO,EAAE;AACX,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC9D,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AACjE,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;;;;;"}
+{"version":3,"file":"ColorPicker.styles.js","sources":["../../../src/components/ColorPicker/ColorPicker.styles.ts"],"sourcesContent":["import { createStyles, MantineSize } from '@mantine/styles';\n\nexport interface ColorPickerStylesParams {\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 }: ColorPickerStylesParams) => ({\n  preview: {},\n\n  wrapper: {\n    boxSizing: 'border-box',\n    width: fullWidth ? '100%' : theme.fn.size({ size, sizes }),\n    padding: 1,\n  },\n\n  body: {\n    display: 'flex',\n    boxSizing: 'border-box',\n    paddingTop: theme.fn.size({ 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":[],"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,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM;AAC7D,EAAE,OAAO,EAAE,EAAE;AACb,EAAE,OAAO,EAAE;AACX,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC9D,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AACjE,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/esm/components/ColorPicker/ColorSlider/ColorSlider.styles.js

@@ -14,10 +14,10 @@ var useStyles = createStyles((theme, { size }, getRef) => {
       outline: 0,
       [`&:focus .${sliderThumb.ref}`]: {
         outline: "none",
-        boxShadow: `0 0 0 1px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 3px ${theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 7 : 5]}`
+        boxShadow: theme.focusRing === "always" || theme.focusRing === "auto" ? `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 7 : 5]}` : void 0
       },
       [`&:focus:not(:focus-visible) .${sliderThumb.ref}`]: {
-        boxShadow: "none"
+        boxShadow: theme.focusRing === "auto" || theme.focusRing === "never" ? "none" : void 0
       }
     },
     sliderOverlay: {