@mantine/core 3.3.5 → 3.4.3

package/esm/components/Card/CardSection/CardSection.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { useExtractedMargins } from '@mantine/styles';
+import React, { forwardRef } from 'react';
 import useStyles from './CardSection.styles.js';
+import { Box } from '../../Box/Box.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -30,15 +30,15 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function CardSection(_a) {
-  var _b = _a, { className, padding = 0, style } = _b, others = __objRest(_b, ["className", "padding", "style"]);
-  const { classes, cx } = useStyles({ padding }, { name: "Card" });
-  const { mergedStyles, rest } = useExtractedMargins({ others, style });
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+const CardSection = forwardRef((_a, ref) => {
+  var _b = _a, { className, padding = 0, component, first, last } = _b, others = __objRest(_b, ["className", "padding", "component", "first", "last"]);
+  const { classes, cx } = useStyles({ padding, first, last }, { name: "Card" });
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    component: component || "div",
     className: cx(classes.cardSection, className),
-    style: mergedStyles
-  }, rest));
-}
+    ref
+  }, others));
+});
 CardSection.displayName = "@mantine/core/CardSection";
 
 export { CardSection };

package/esm/components/Card/CardSection/CardSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSection.js","sources":["../../../../src/components/Card/CardSection/CardSection.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineNumberSize, useExtractedMargins } from '@mantine/styles';\nimport useStyles from './CardSection.styles';\n\nexport interface CardSectionProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  padding?: MantineNumberSize;\n}\n\nexport function CardSection({ className, padding = 0, style, ...others }: CardSectionProps) {\n  const { classes, cx } = useStyles({ padding }, { name: 'Card' });\n  const { mergedStyles, rest } = useExtractedMargins({ others, style });\n  return <div className={cx(classes.cardSection, className)} style={mergedStyles} {...rest} />;\n}\n\nCardSection.displayName = '@mantine/core/CardSection';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CardSection.js","sources":["../../../../src/components/Card/CardSection/CardSection.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '@mantine/styles';\nimport { Box } from '../../Box';\nimport useStyles from './CardSection.styles';\n\nexport interface _CardSectionProps extends DefaultProps {\n  padding?: MantineNumberSize;\n  first?: boolean;\n  last?: boolean;\n}\n\nexport type CardSectionProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  _CardSectionProps\n>;\n\ntype CardSectionComponent = <C extends React.ElementType = 'div'>(\n  props: CardSectionProps<C>\n) => React.ReactElement;\n\nexport const CardSection: CardSectionComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = 'div'>(\n    { className, padding = 0, component, first, last, ...others }: CardSectionProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const { classes, cx } = useStyles({ padding, first, last }, { name: 'Card' });\n    return (\n      <Box<any>\n        component={component || 'div'}\n        className={cx(classes.cardSection, className)}\n        ref={ref}\n        {...others}\n      />\n    );\n  }\n);\n\nCardSection.displayName = '@mantine/core/CardSection';\n"],"names":[],"mappings":"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"}

package/esm/components/Card/CardSection/CardSection.styles.js

@@ -1,15 +1,12 @@
 import { createStyles } from '@mantine/styles';
 
-var useStyles = createStyles((theme, { padding }) => ({
+var useStyles = createStyles((theme, { padding, first, last }) => ({
   cardSection: {
+    display: "block",
     marginLeft: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),
     marginRight: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),
-    "&:first-of-type": {
-      marginTop: -1 * theme.fn.size({ size: padding, sizes: theme.spacing })
-    },
-    "&:last-of-type": {
-      marginBottom: -1 * theme.fn.size({ size: padding, sizes: theme.spacing })
-    }
+    marginTop: first ? -1 * theme.fn.size({ size: padding, sizes: theme.spacing }) : void 0,
+    marginBottom: last ? -1 * theme.fn.size({ size: padding, sizes: theme.spacing }) : void 0
   }
 }));
 

package/esm/components/Card/CardSection/CardSection.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSection.styles.js","sources":["../../../../src/components/Card/CardSection/CardSection.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\ninterface CardSectionStyles {\n  padding: MantineNumberSize;\n}\n\nexport default createStyles((theme, { padding }: CardSectionStyles) => ({\n  cardSection: {\n    marginLeft: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),\n    marginRight: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),\n\n    '&:first-of-type': {\n      marginTop: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),\n    },\n\n    '&:last-of-type': {\n      marginBottom: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),\n    },\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM;AACrD,EAAE,WAAW,EAAE;AACf,IAAI,UAAU,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC3E,IAAI,WAAW,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC5E,IAAI,iBAAiB,EAAE;AACvB,MAAM,SAAS,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC5E,KAAK;AACL,IAAI,gBAAgB,EAAE;AACtB,MAAM,YAAY,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC/E,KAAK;AACL,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"CardSection.styles.js","sources":["../../../../src/components/Card/CardSection/CardSection.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\ninterface CardSectionStyles {\n  padding: MantineNumberSize;\n  first?: boolean;\n  last?: boolean;\n}\n\nexport default createStyles((theme, { padding, first, last }: CardSectionStyles) => ({\n  cardSection: {\n    display: 'block',\n    marginLeft: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),\n    marginRight: -1 * theme.fn.size({ size: padding, sizes: theme.spacing }),\n    marginTop: first ? -1 * theme.fn.size({ size: padding, sizes: theme.spacing }) : undefined,\n    marginBottom: last ? -1 * theme.fn.size({ size: padding, sizes: theme.spacing }) : undefined,\n  },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM;AAClE,EAAE,WAAW,EAAE;AACf,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,UAAU,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC3E,IAAI,WAAW,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC5E,IAAI,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC;AAC3F,IAAI,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC;AAC7F,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/esm/components/Center/Center.js

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
-import { useSx, useExtractedMargins } from '@mantine/styles';
+import { Box } from '../Box/Box.js';
 
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -19,7 +17,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -33,18 +30,18 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const Center = forwardRef((_a, ref) => {
-  var _b = _a, { style, className, inline = false, sx } = _b, others = __objRest(_b, ["style", "className", "inline", "sx"]);
-  const { sxClassName, css, cx } = useSx({ sx, className });
-  const { mergedStyles, rest } = useExtractedMargins({ others, style });
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  var _b = _a, { inline = false, sx } = _b, others = __objRest(_b, ["inline", "sx"]);
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     ref,
-    style: mergedStyles,
-    className: cx(css({
-      display: inline ? "inline-flex" : "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }), sxClassName)
-  }));
+    sx: [
+      {
+        display: inline ? "inline-flex" : "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      sx
+    ]
+  }, others));
 });
 Center.displayName = "@mantine/core/Center";
 

package/esm/components/Center/Center.js.map

@@ -1 +1 @@
-{"version":3,"file":"Center.js","sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useExtractedMargins, useSx, DefaultProps } from '@mantine/styles';\n\nexport interface CenterProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be centered vertically and horizontally */\n  children: React.ReactNode;\n\n  /** Set to true to use inline-flex instead of flex */\n  inline?: boolean;\n}\n\nexport const Center = forwardRef<HTMLDivElement, CenterProps>(\n  ({ style, className, inline = false, sx, ...others }: CenterProps, ref) => {\n    const { sxClassName, css, cx } = useSx({ sx, className });\n    const { mergedStyles, rest } = useExtractedMargins({ others, style });\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        style={mergedStyles}\n        className={cx(\n          css({\n            display: inline ? 'inline-flex' : 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }),\n          sxClassName\n        )}\n      />\n    );\n  }\n);\n\nCenter.displayName = '@mantine/core/Center';\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;AAClE,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;AAGU,MAAC,MAAM,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AAC9C,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,GAAG,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;AAC7H,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;AAC5D,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;AACxE,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE;AAC5F,IAAI,GAAG;AACP,IAAI,KAAK,EAAE,YAAY;AACvB,IAAI,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC;AACtB,MAAM,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;AAC9C,MAAM,UAAU,EAAE,QAAQ;AAC1B,MAAM,cAAc,EAAE,QAAQ;AAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;AACpB,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,EAAE;AACH,MAAM,CAAC,WAAW,GAAG,sBAAsB;;;;"}
+{"version":3,"file":"Center.js","sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\n\nexport interface CenterProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Content that should be centered vertically and horizontally */\n  children: React.ReactNode;\n\n  /** Set to true to use inline-flex instead of flex */\n  inline?: boolean;\n}\n\nexport const Center = forwardRef<HTMLDivElement, CenterProps>(\n  ({ inline = false, sx, ...others }: CenterProps, ref) => (\n    <Box\n      ref={ref}\n      sx={[\n        {\n          display: inline ? 'inline-flex' : 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        },\n        sx,\n      ]}\n      {...others}\n    />\n  )\n);\n\nCenter.displayName = '@mantine/core/Center';\n"],"names":[],"mappings":"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"}

package/esm/components/Checkbox/Checkbox.js

@@ -1,8 +1,9 @@
 import React, { forwardRef } from 'react';
-import { useExtractedMargins } from '@mantine/styles';
+import { extractMargins } from '@mantine/styles';
 import { useUuid } from '@mantine/hooks';
 import { CheckboxIcon } from './CheckboxIcon.js';
 import useStyles from './Checkbox.styles.js';
+import { Box } from '../Box/Box.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -36,6 +37,7 @@ const Checkbox = forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     style,
+    sx,
     checked,
     onChange,
     color,
@@ -49,11 +51,11 @@ const Checkbox = forwardRef((_a, ref) => {
     classNames,
     styles,
     transitionDuration = 100,
-    icon: Icon = CheckboxIcon,
-    sx
+    icon: Icon = CheckboxIcon
   } = _b, others = __objRest(_b, [
     "className",
     "style",
+    "sx",
     "checked",
     "onChange",
     "color",
@@ -67,16 +69,16 @@ const Checkbox = forwardRef((_a, ref) => {
     "classNames",
     "styles",
     "transitionDuration",
-    "icon",
-    "sx"
+    "icon"
   ]);
   const uuid = useUuid(id);
-  const { classes, cx } = useStyles({ size, color, transitionDuration }, { classNames, styles, sx, name: "Checkbox" });
-  const { mergedStyles, rest } = useExtractedMargins({ others, style });
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+  const { margins, rest } = extractMargins(others);
+  const { classes, cx } = useStyles({ size, color, transitionDuration }, { classNames, styles, name: "Checkbox" });
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues(__spreadValues({
     className: cx(classes.root, className),
-    style: mergedStyles
-  }, wrapperProps), /* @__PURE__ */ React.createElement("div", {
+    style,
+    sx
+  }, margins), wrapperProps), /* @__PURE__ */ React.createElement("div", {
     className: classes.inner
   }, /* @__PURE__ */ React.createElement("input", __spreadValues({
     id: uuid,

package/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n  useExtractedMargins,\n} from '@mantine/styles';\nimport { useUuid } from '@mantine/hooks';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport useStyles from './Checkbox.styles';\n\nexport type CheckboxStylesNames = ClassNames<typeof useStyles>;\n\nexport interface CheckboxProps\n  extends DefaultProps<CheckboxStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {\n  /** Checkbox checked and indeterminate state color from theme, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Predefined label font-size and checkbox width and height in px */\n  size?: MantineSize;\n\n  /** Checkbox label */\n  label?: React.ReactNode;\n\n  /** Indeterminate state of checkbox, overwrites checked */\n  indeterminate?: boolean;\n\n  /** Props spread to wrapper element */\n  wrapperProps?: React.ComponentPropsWithoutRef<'div'> & { [key: string]: any };\n\n  /** Id is used to bind input and label, if not passed unique id will be generated for each input */\n  id?: string;\n\n  /** Check/uncheck transition duration, set to 0 to disable all transitions */\n  transitionDuration?: number;\n\n  /** Replace default icon */\n  icon?: React.FC<{ indeterminate: boolean; className: string }>;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      style,\n      checked,\n      onChange,\n      color,\n      label,\n      disabled,\n      indeterminate,\n      id,\n      size = 'sm',\n      wrapperProps,\n      children,\n      classNames,\n      styles,\n      transitionDuration = 100,\n      icon: Icon = CheckboxIcon,\n      sx,\n      ...others\n    }: CheckboxProps,\n    ref\n  ) => {\n    const uuid = useUuid(id);\n    const { classes, cx } = useStyles(\n      { size, color, transitionDuration },\n      { classNames, styles, sx, name: 'Checkbox' }\n    );\n    const { mergedStyles, rest } = useExtractedMargins({ others, style });\n\n    return (\n      <div className={cx(classes.root, className)} style={mergedStyles} {...wrapperProps}>\n        <div className={classes.inner}>\n          <input\n            id={uuid}\n            ref={ref}\n            type=\"checkbox\"\n            className={classes.input}\n            checked={indeterminate || checked}\n            onChange={onChange}\n            disabled={disabled}\n            {...rest}\n          />\n\n          <Icon indeterminate={indeterminate} className={classes.icon} />\n        </div>\n\n        {label && (\n          <label className={classes.label} htmlFor={uuid}>\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = '@mantine/core/Checkbox';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n  extractMargins,\n} from '@mantine/styles';\nimport { useUuid } from '@mantine/hooks';\nimport { Box } from '../Box';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport useStyles from './Checkbox.styles';\n\nexport type CheckboxStylesNames = ClassNames<typeof useStyles>;\n\nexport interface CheckboxProps\n  extends DefaultProps<CheckboxStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {\n  /** Checkbox checked and indeterminate state color from theme, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Predefined label font-size and checkbox width and height in px */\n  size?: MantineSize;\n\n  /** Checkbox label */\n  label?: React.ReactNode;\n\n  /** Indeterminate state of checkbox, overwrites checked */\n  indeterminate?: boolean;\n\n  /** Props spread to wrapper element */\n  wrapperProps?: React.ComponentPropsWithoutRef<'div'> & { [key: string]: any };\n\n  /** Id is used to bind input and label, if not passed unique id will be generated for each input */\n  id?: string;\n\n  /** Check/uncheck transition duration, set to 0 to disable all transitions */\n  transitionDuration?: number;\n\n  /** Replace default icon */\n  icon?: React.FC<{ indeterminate: boolean; className: string }>;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      style,\n      sx,\n      checked,\n      onChange,\n      color,\n      label,\n      disabled,\n      indeterminate,\n      id,\n      size = 'sm',\n      wrapperProps,\n      children,\n      classNames,\n      styles,\n      transitionDuration = 100,\n      icon: Icon = CheckboxIcon,\n      ...others\n    }: CheckboxProps,\n    ref\n  ) => {\n    const uuid = useUuid(id);\n    const { margins, rest } = extractMargins(others);\n    const { classes, cx } = useStyles(\n      { size, color, transitionDuration },\n      { classNames, styles, name: 'Checkbox' }\n    );\n\n    return (\n      <Box\n        className={cx(classes.root, className)}\n        style={style}\n        sx={sx}\n        {...margins}\n        {...wrapperProps}\n      >\n        <div className={classes.inner}>\n          <input\n            id={uuid}\n            ref={ref}\n            type=\"checkbox\"\n            className={classes.input}\n            checked={indeterminate || checked}\n            onChange={onChange}\n            disabled={disabled}\n            {...rest}\n          />\n\n          <Icon indeterminate={indeterminate} className={classes.icon} />\n        </div>\n\n        {label && (\n          <label className={classes.label} htmlFor={uuid}>\n            {label}\n          </label>\n        )}\n      </Box>\n    );\n  }\n);\n\nCheckbox.displayName = '@mantine/core/Checkbox';\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { useUuid, useUncontrolled } from '@mantine/hooks';
-import { useExtractedMargins } from '@mantine/styles';
+import { extractMargins } from '@mantine/styles';
 import useStyles from './Chip.styles.js';
+import { Box } from '../../Box/Box.js';
 import { CheckboxIcon } from '../../Checkbox/CheckboxIcon.js';
 
 var __defProp = Object.defineProperty;
@@ -71,8 +72,8 @@ const Chip = forwardRef((_a, ref) => {
     "sx"
   ]);
   const uuid = useUuid(id);
-  const { classes, cx, theme } = useStyles({ radius, size, color }, { classNames, styles, sx, name: __staticSelector });
-  const { mergedStyles, rest } = useExtractedMargins({ others, style });
+  const { margins, rest } = extractMargins(others);
+  const { classes, cx, theme } = useStyles({ radius, size, color }, { classNames, styles, name: __staticSelector });
   const [value, setValue] = useUncontrolled({
     value: checked,
     defaultValue: defaultChecked,
@@ -81,10 +82,11 @@ const Chip = forwardRef((_a, ref) => {
     rule: (val) => typeof val === "boolean"
   });
   const defaultVariant = theme.colorScheme === "dark" ? "filled" : "outline";
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, className),
-    style: mergedStyles
-  }, /* @__PURE__ */ React.createElement("input", __spreadValues({
+    style,
+    sx
+  }, margins), /* @__PURE__ */ React.createElement("input", __spreadValues({
     type,
     className: classes.input,
     checked: value,
@@ -93,8 +95,8 @@ const Chip = forwardRef((_a, ref) => {
     disabled,
     ref
   }, rest)), /* @__PURE__ */ React.createElement("label", {
-    className: cx(classes.label, { [classes.checked]: value, [classes.disabled]: disabled }, classes[variant || defaultVariant]),
-    htmlFor: uuid
+    htmlFor: uuid,
+    className: cx(classes.label, { [classes.checked]: value, [classes.disabled]: disabled }, classes[variant || defaultVariant])
   }, value && /* @__PURE__ */ React.createElement("span", {
     className: classes.iconWrapper
   }, /* @__PURE__ */ React.createElement(CheckboxIcon, {

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chips/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useUncontrolled, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n  useExtractedMargins,\n} from '@mantine/styles';\nimport { CheckboxIcon } from '../../Checkbox';\nimport useStyles from './Chip.styles';\n\nexport type ChipStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ChipProps\n  extends DefaultProps<ChipStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n  /** Chip radius from theme or number to set value in px */\n  radius?: MantineNumberSize;\n\n  /** Predefined chip size */\n  size?: MantineSize;\n\n  /** Chip input type */\n  type?: 'radio' | 'checkbox';\n\n  /** Controls chip appearance, defaults to filled with dark theme and to outline in light theme */\n  variant?: 'outline' | 'filled';\n\n  /** Chip label */\n  children: React.ReactNode;\n\n  /** Checked state for controlled component */\n  checked?: boolean;\n\n  /** Default value for uncontrolled component */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?(checked: boolean): void;\n\n  /** Active color from theme, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Static id to bind input with label */\n  id?: string;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Input value */\n  value: string;\n}\n\nexport const Chip = forwardRef<HTMLInputElement, ChipProps>(\n  (\n    {\n      radius = 'xl',\n      type = 'checkbox',\n      size = 'sm',\n      variant,\n      disabled = false,\n      __staticSelector = 'Chip',\n      id,\n      color,\n      children,\n      className,\n      classNames,\n      style,\n      styles,\n      checked,\n      defaultChecked,\n      onChange,\n      sx,\n      ...others\n    }: ChipProps,\n    ref\n  ) => {\n    const uuid = useUuid(id);\n    const { classes, cx, theme } = useStyles(\n      { radius, size, color },\n      { classNames, styles, sx, name: __staticSelector }\n    );\n    const { mergedStyles, rest } = useExtractedMargins({ others, style });\n    const [value, setValue] = useUncontrolled({\n      value: checked,\n      defaultValue: defaultChecked,\n      finalValue: true,\n      onChange,\n      rule: (val) => typeof val === 'boolean',\n    });\n\n    const defaultVariant = theme.colorScheme === 'dark' ? 'filled' : 'outline';\n\n    return (\n      <div className={cx(classes.root, className)} style={mergedStyles}>\n        <input\n          type={type}\n          className={classes.input}\n          checked={value}\n          onChange={(event) => setValue(event.currentTarget.checked)}\n          id={uuid}\n          disabled={disabled}\n          ref={ref}\n          {...rest}\n        />\n        <label\n          className={cx(\n            classes.label,\n            { [classes.checked]: value, [classes.disabled]: disabled },\n            classes[variant || defaultVariant]\n          )}\n          htmlFor={uuid}\n        >\n          {value && (\n            <span className={classes.iconWrapper}>\n              <CheckboxIcon indeterminate={false} className={classes.checkIcon} />\n            </span>\n          )}\n          {children}\n        </label>\n      </div>\n    );\n  }\n);\n\nChip.displayName = '@mantine/core/Chip';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chips/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useUncontrolled, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n  extractMargins,\n} from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { CheckboxIcon } from '../../Checkbox';\nimport useStyles from './Chip.styles';\n\nexport type ChipStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ChipProps\n  extends DefaultProps<ChipStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n  /** Chip radius from theme or number to set value in px */\n  radius?: MantineNumberSize;\n\n  /** Predefined chip size */\n  size?: MantineSize;\n\n  /** Chip input type */\n  type?: 'radio' | 'checkbox';\n\n  /** Controls chip appearance, defaults to filled with dark theme and to outline in light theme */\n  variant?: 'outline' | 'filled';\n\n  /** Chip label */\n  children: React.ReactNode;\n\n  /** Checked state for controlled component */\n  checked?: boolean;\n\n  /** Default value for uncontrolled component */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?(checked: boolean): void;\n\n  /** Active color from theme, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Static id to bind input with label */\n  id?: string;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Input value */\n  value: string;\n}\n\nexport const Chip = forwardRef<HTMLInputElement, ChipProps>(\n  (\n    {\n      radius = 'xl',\n      type = 'checkbox',\n      size = 'sm',\n      variant,\n      disabled = false,\n      __staticSelector = 'Chip',\n      id,\n      color,\n      children,\n      className,\n      classNames,\n      style,\n      styles,\n      checked,\n      defaultChecked,\n      onChange,\n      sx,\n      ...others\n    }: ChipProps,\n    ref\n  ) => {\n    const uuid = useUuid(id);\n    const { margins, rest } = extractMargins(others);\n    const { classes, cx, theme } = useStyles(\n      { radius, size, color },\n      { classNames, styles, name: __staticSelector }\n    );\n\n    const [value, setValue] = useUncontrolled({\n      value: checked,\n      defaultValue: defaultChecked,\n      finalValue: true,\n      onChange,\n      rule: (val) => typeof val === 'boolean',\n    });\n\n    const defaultVariant = theme.colorScheme === 'dark' ? 'filled' : 'outline';\n\n    return (\n      <Box className={cx(classes.root, className)} style={style} sx={sx} {...margins}>\n        <input\n          type={type}\n          className={classes.input}\n          checked={value}\n          onChange={(event) => setValue(event.currentTarget.checked)}\n          id={uuid}\n          disabled={disabled}\n          ref={ref}\n          {...rest}\n        />\n        <label\n          htmlFor={uuid}\n          className={cx(\n            classes.label,\n            { [classes.checked]: value, [classes.disabled]: disabled },\n            classes[variant || defaultVariant]\n          )}\n        >\n          {value && (\n            <span className={classes.iconWrapper}>\n              <CheckboxIcon indeterminate={false} className={classes.checkIcon} />\n            </span>\n          )}\n          {children}\n        </label>\n      </Box>\n    );\n  }\n);\n\nChip.displayName = '@mantine/core/Chip';\n"],"names":[],"mappings":"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"}

package/esm/components/Code/Code.js

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
-import { useMantineTheme, useExtractedMargins } from '@mantine/styles';
+import { useMantineTheme } from '@mantine/styles';
 import useStyles from './Code.styles.js';
+import { Box } from '../Box/Box.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -31,41 +32,22 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const Code = forwardRef((_a, ref) => {
-  var _b = _a, {
-    className,
-    children,
-    block = false,
-    color,
-    style,
-    sx,
-    styles,
-    classNames
-  } = _b, others = __objRest(_b, [
-    "className",
-    "children",
-    "block",
-    "color",
-    "style",
-    "sx",
-    "styles",
-    "classNames"
-  ]);
+  var _b = _a, { className, children, block = false, color, styles, classNames } = _b, others = __objRest(_b, ["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", sx, styles, classNames });
-  const { mergedStyles, rest } = useExtractedMargins({ others, style });
+  const { classes, cx } = useStyles({ color: themeColor }, { name: "Code", styles, classNames });
   if (block) {
-    return /* @__PURE__ */ React.createElement("pre", __spreadValues({
+    return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+      component: "pre",
       className: cx(classes.root, classes.block, className),
-      style: mergedStyles,
       ref
-    }, rest), children);
+    }, others), children);
   }
-  return /* @__PURE__ */ React.createElement("code", __spreadValues({
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
+    component: "code",
     className: cx(classes.root, className),
-    style: mergedStyles,
     ref
-  }, rest), children);
+  }, others), children);
 });
 Code.displayName = "@mantine/core/Code";
 

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, useExtractedMargins } from '@mantine/styles';\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    {\n      className,\n      children,\n      block = false,\n      color,\n      style,\n      sx,\n      styles,\n      classNames,\n      ...others\n    }: CodeProps,\n    ref\n  ) => {\n    const theme = useMantineTheme();\n    const themeColor = color || (theme.colorScheme === 'dark' ? 'dark' : 'gray');\n    const { classes, cx } = useStyles(\n      { color: themeColor },\n      { name: 'Code', sx, styles, classNames }\n    );\n    const { mergedStyles, rest } = useExtractedMargins({ others, style });\n\n    if (block) {\n      return (\n        <pre\n          className={cx(classes.root, classes.block, className)}\n          style={mergedStyles}\n          ref={ref as any}\n          {...rest}\n        >\n          {children}\n        </pre>\n      );\n    }\n\n    return (\n      <code className={cx(classes.root, className)} style={mergedStyles} ref={ref} {...rest}>\n        {children}\n      </code>\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 { 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          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} {...others}>\n        {children}\n      </Box>\n    );\n  }\n);\n\nCode.displayName = '@mantine/core/Code';\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;AAKU,MAAC,IAAI,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AAC5C,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;AACnL,EAAE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;AAClC,EAAE,MAAM,UAAU,GAAG,KAAK,KAAK,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAC/E,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;AACjG,EAAE,IAAI,KAAK,EAAE;AACb,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACnE,MAAM,SAAS,EAAE,KAAK;AACtB,MAAM,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC;AAC3D,MAAM,GAAG;AACT,KAAK,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC1B,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;AACxB,CAAC,EAAE;AACH,IAAI,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/esm/components/Collapse/Collapse.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { useReducedMotion } from '@mantine/hooks';
-import { useExtractedMargins, useSx } from '@mantine/styles';
+import { useExtractedMargins } from '@mantine/styles';
 import { useCollapse } from './use-collapse.js';
+import { Box } from '../Box/Box.js';
 
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -21,7 +20,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -41,8 +39,6 @@ function Collapse(_a) {
     transitionDuration = 200,
     transitionTimingFunction = "ease",
     style,
-    sx,
-    className,
     onTransitionEnd,
     animateOpacity = true
   } = _b, others = __objRest(_b, [
@@ -51,15 +47,12 @@ function Collapse(_a) {
     "transitionDuration",
     "transitionTimingFunction",
     "style",
-    "sx",
-    "className",
     "onTransitionEnd",
     "animateOpacity"
   ]);
   const reduceMotion = useReducedMotion();
   const duration = reduceMotion ? 0 : transitionDuration;
   const { mergedStyles, rest } = useExtractedMargins({ others, style });
-  const { sxClassName } = useSx({ sx, className });
   const getCollapseProps = useCollapse({
     opened,
     transitionDuration: duration,
@@ -67,13 +60,9 @@ function Collapse(_a) {
     onTransitionEnd
   });
   if (duration === 0) {
-    return opened ? /* @__PURE__ */ React.createElement("div", __spreadValues({
-      className: sxClassName
-    }, rest), children) : null;
+    return opened ? /* @__PURE__ */ React.createElement(Box, __spreadValues({}, rest), children) : null;
   }
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getCollapseProps(__spreadValues({ style: mergedStyles }, rest))), {
-    className: sxClassName
-  }), /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement(Box, __spreadValues({}, getCollapseProps(__spreadValues({ style: mergedStyles }, rest))), /* @__PURE__ */ React.createElement("div", {
     style: {
       opacity: opened ? 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 { useExtractedMargins, useSx, DefaultProps } from '@mantine/styles';\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  sx,\n  className,\n  onTransitionEnd,\n  animateOpacity = true,\n  ...others\n}: CollapseProps) {\n  const reduceMotion = useReducedMotion();\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const { mergedStyles, rest } = useExtractedMargins({ others, style });\n  const { sxClassName } = useSx({ sx, className });\n  const getCollapseProps = useCollapse({\n    opened,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n  });\n\n  if (duration === 0) {\n    return opened ? (\n      <div className={sxClassName} {...rest}>\n        {children}\n      </div>\n    ) : null;\n  }\n\n  return (\n    <div {...getCollapseProps({ style: mergedStyles, ...rest })} className={sxClassName}>\n      <div\n        style={{\n          opacity: opened ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n        }}\n      >\n        {children}\n      </div>\n    </div>\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 { useExtractedMargins, 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 { mergedStyles, rest } = useExtractedMargins({ others, style });\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: mergedStyles, ...rest })}>\n      <div\n        style={{\n          opacity: opened ? 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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"}

package/esm/components/ColorInput/ColorInput.js

@@ -1,15 +1,15 @@
 import React, { forwardRef, useState, useEffect } from 'react';
 import { useUuid, useUncontrolled, useDidUpdate } from '@mantine/hooks';
-import { getDefaultZIndex, useExtractedMargins } from '@mantine/styles';
+import { getDefaultZIndex, extractMargins } from '@mantine/styles';
+import { ColorPicker } from '../ColorPicker/ColorPicker.js';
+import useStyles from './ColorInput.styles.js';
+import { isColorValid, parseColor } from '../ColorPicker/converters/parsers.js';
+import { convertHsvaTo } from '../ColorPicker/converters/converters.js';
 import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
 import { ColorSwatch } from '../ColorSwatch/ColorSwatch.js';
 import { Popper } from '../Popper/Popper.js';
 import { Paper } from '../Paper/Paper.js';
-import { ColorPicker } from '../ColorPicker/ColorPicker.js';
-import useStyles from './ColorInput.styles.js';
-import { isColorValid, parseColor } from '../ColorPicker/converters/parsers.js';
-import { convertHsvaTo } from '../ColorPicker/converters/converters.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -121,7 +121,7 @@ const ColorInput = forwardRef((_a, ref) => {
     "sx"
   ]);
   const { classes, cx, theme } = useStyles({ disallowInput }, { classNames, styles, name: "ColorInput" });
-  const { mergedStyles, rest } = useExtractedMargins({ others, style });
+  const { margins, rest } = extractMargins(others);
   const uuid = useUuid(id);
   const [referenceElement, setReferenceElement] = useState(null);
   const [dropdownOpened, setDropdownOpened] = useState(false);
@@ -152,7 +152,7 @@ const ColorInput = forwardRef((_a, ref) => {
       setValue(convertHsvaTo(format, parseColor(_value)));
     }
   }, [format]);
-  return /* @__PURE__ */ React.createElement(InputWrapper, __spreadValues({
+  return /* @__PURE__ */ React.createElement(InputWrapper, __spreadValues(__spreadValues({
     label,
     description,
     error,
@@ -162,10 +162,10 @@ const ColorInput = forwardRef((_a, ref) => {
     size,
     id: uuid,
     className,
-    style: mergedStyles,
+    style,
     __staticSelector: "ColorInput",
     sx
-  }, wrapperProps), /* @__PURE__ */ React.createElement("div", {
+  }, margins), wrapperProps), /* @__PURE__ */ React.createElement("div", {
     ref: setReferenceElement
   }, /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({}, rest), {
     ref,