@mantine/core 3.6.13 → 3.7.0-alpha.1

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

@@ -47,108 +47,102 @@ const checkedPadding = {
   lg: 13,
   xl: 15
 };
-var useStyles = createStyles((theme, { radius, size, color }, getRef) => {
-  const label = getRef("label");
-  const outline = getRef("outline");
-  const filled = getRef("filled");
-  const iconWrapper = getRef("iconWrapper");
-  return {
-    root: {},
-    label: __spreadProps(__spreadValues({
-      ref: label
-    }, theme.fn.fontStyles()), {
-      boxSizing: "border-box",
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-      display: "inline-block",
-      alignItems: "center",
-      userSelect: "none",
-      border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]}`,
-      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-      height: theme.fn.size({ size, sizes }),
-      fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
-      lineHeight: `${theme.fn.size({ size, sizes }) - 2}px`,
-      paddingLeft: theme.fn.size({ size, sizes: padding }),
-      paddingRight: theme.fn.size({ size, sizes: padding }),
-      cursor: "pointer",
-      whiteSpace: "nowrap",
-      transition: "background-color 100ms ease",
-      WebkitTapHighlightColor: "transparent"
-    }),
-    outline: {
-      ref: outline,
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
-      }
-    },
-    filled: {
-      ref: filled,
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
-      borderColor: "transparent",
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
-      }
-    },
-    iconWrapper: {
-      ref: iconWrapper,
-      color: theme.fn.themeColor(color, 6),
-      width: theme.fn.size({ size, sizes: iconSizes }) + theme.fn.size({ size, sizes: theme.spacing }) / 1.5,
-      maxWidth: theme.fn.size({ size, sizes: iconSizes }) + theme.fn.size({ size, sizes: theme.spacing }) / 1.5,
-      height: theme.fn.size({ size, sizes: iconSizes }),
-      display: "inline-block",
-      verticalAlign: "middle",
-      overflow: "hidden"
+var useStyles = createStyles((theme, { radius, size, color }, getRef) => ({
+  root: {},
+  label: __spreadProps(__spreadValues({
+    ref: getRef("label")
+  }, theme.fn.fontStyles()), {
+    boxSizing: "border-box",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+    display: "inline-block",
+    alignItems: "center",
+    userSelect: "none",
+    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]}`,
+    borderRadius: theme.fn.radius(radius),
+    height: theme.fn.size({ size, sizes }),
+    fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
+    lineHeight: `${theme.fn.size({ size, sizes }) - 2}px`,
+    paddingLeft: theme.fn.size({ size, sizes: padding }),
+    paddingRight: theme.fn.size({ size, sizes: padding }),
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    transition: "background-color 100ms ease",
+    WebkitTapHighlightColor: "transparent"
+  }),
+  outline: {
+    ref: getRef("outline"),
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
+    }
+  },
+  filled: {
+    ref: getRef("filled"),
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderColor: "transparent",
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
+    }
+  },
+  iconWrapper: {
+    ref: getRef("iconWrapper"),
+    color: theme.fn.themeColor(color, 6),
+    width: theme.fn.size({ size, sizes: iconSizes }) + theme.fn.size({ size, sizes: theme.spacing }) / 1.5,
+    maxWidth: theme.fn.size({ size, sizes: iconSizes }) + theme.fn.size({ size, sizes: theme.spacing }) / 1.5,
+    height: theme.fn.size({ size, sizes: iconSizes }),
+    display: "inline-block",
+    verticalAlign: "middle",
+    overflow: "hidden"
+  },
+  disabled: {
+    backgroundColor: `${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]} !important`,
+    borderColor: `${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]} !important`,
+    color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]
     },
-    disabled: {
-      backgroundColor: `${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]} !important`,
-      borderColor: `${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]} !important`,
-      color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
-      cursor: "not-allowed",
-      "&:hover": {
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]
-      },
-      [`& .${iconWrapper}`]: {
-        color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
-      }
+    [`& .${getRef("iconWrapper")}`]: {
+      color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
+    }
+  },
+  checked: {
+    paddingLeft: theme.fn.size({ size, sizes: checkedPadding }),
+    paddingRight: theme.fn.size({ size, sizes: checkedPadding }),
+    [`&.${getRef("outline")}`]: {
+      border: `1px solid ${theme.fn.themeColor(color, 6)}`
     },
-    checked: {
-      paddingLeft: theme.fn.size({ size, sizes: checkedPadding }),
-      paddingRight: theme.fn.size({ size, sizes: checkedPadding }),
-      [`&.${outline}`]: {
-        border: `1px solid ${theme.fn.themeColor(color, 6)}`
-      },
-      [`&.${filled}`]: {
-        "&, &:hover": {
-          backgroundColor: theme.colorScheme === "dark" ? getSharedColorScheme({ color, theme, variant: "light" }).background : theme.fn.themeColor(color, 1)
-        }
+    [`&.${getRef("filled")}`]: {
+      "&, &:hover": {
+        backgroundColor: theme.colorScheme === "dark" ? getSharedColorScheme({ color, theme, variant: "light" }).background : theme.fn.themeColor(color, 1)
       }
-    },
-    checkIcon: {
-      width: theme.fn.size({ size, sizes: iconSizes }),
-      height: theme.fn.size({ size, sizes: iconSizes }) / 1.1,
-      display: "block"
-    },
-    input: {
-      width: 0,
-      height: 0,
-      padding: 0,
-      opacity: 0,
-      margin: 0,
-      "&:focus": {
+    }
+  },
+  checkIcon: {
+    width: theme.fn.size({ size, sizes: iconSizes }),
+    height: theme.fn.size({ size, sizes: iconSizes }) / 1.1,
+    display: "block"
+  },
+  input: {
+    width: 0,
+    height: 0,
+    padding: 0,
+    opacity: 0,
+    margin: 0,
+    "&:focus": {
+      outline: "none",
+      [`& + .${getRef("label")}`]: {
         outline: "none",
-        [`& + .${label}`]: {
-          outline: "none",
-          boxShadow: `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`
-        },
-        "&:focus:not(:focus-visible)": {
-          [`& + .${label}`]: {
-            boxShadow: "none"
-          }
+        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)": {
+        [`& + .${getRef("label")}`]: {
+          boxShadow: theme.focusRing === "auto" || theme.focusRing === "never" ? "none" : void 0
         }
       }
     }
-  };
-});
+  }
+}));
 
 export default useStyles;
 export { sizes };

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":";;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,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,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;AAClD,EAAE,MAAM,MAAM,GAAG,oBAAoB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1E,EAAE,OAAO;AACT,IAAI,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE;AACnE,MAAM,UAAU,EAAE,KAAK,CAAC,UAAU;AAClC,MAAM,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;AAC9C,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACnC,MAAM,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACxH,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,IAAI,KAAK,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,UAAU;AAClH,MAAM,UAAU,EAAE,KAAK,CAAC,mBAAmB;AAC3C,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE;AAClC,KAAK,CAAC;AACN,IAAI,KAAK,EAAE;AACX,MAAM,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AAC/B,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,SAAS,EAAE,MAAM;AACvB,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}

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, {