@mantine/core 4.2.6 → 5.0.0-alpha.5

package/cjs/components/Avatar/Avatar.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styles = require('@mantine/styles');
+var utils = require('@mantine/utils');
 var AvatarPlaceholderIcon = require('./AvatarPlaceholderIcon.js');
+var AvatarGroup = require('./AvatarGroup/AvatarGroup.js');
+var AvatarGroup_context = require('./AvatarGroup/AvatarGroup.context.js');
 var Avatar_styles = require('./Avatar.styles.js');
 var Box = require('../Box/Box.js');
 
@@ -47,9 +50,8 @@ const defaultProps = {
   size: "md",
   color: "gray"
 };
-const Avatar = React.forwardRef((props, ref) => {
+const _Avatar = React.forwardRef((props, ref) => {
   const _a = styles.useMantineDefaultProps("Avatar", defaultProps, props), {
-    component,
     className,
     size,
     src,
@@ -61,7 +63,6 @@ const Avatar = React.forwardRef((props, ref) => {
     styles: styles$1,
     imageProps
   } = _a, others = __objRest(_a, [
-    "component",
     "className",
     "size",
     "src",
@@ -73,13 +74,14 @@ const Avatar = React.forwardRef((props, ref) => {
     "styles",
     "imageProps"
   ]);
-  const { classes, cx } = Avatar_styles['default']({ color, radius, size }, { classNames, styles: styles$1, name: "Avatar" });
+  const ctx = AvatarGroup_context.useAvatarGroupContext();
+  const { classes, cx } = Avatar_styles['default']({ color, radius, size, withinGroup: ctx.withinGroup, spacing: ctx.spacing }, { classNames, styles: styles$1, name: "Avatar" });
   const [error, setError] = React.useState(!src);
   React.useEffect(() => {
     !src ? setError(true) : setError(false);
   }, [src]);
   return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
-    component: component || "div",
+    component: "div",
     className: cx(classes.root, className),
     ref
   }, others), error ? /* @__PURE__ */ React__default.createElement("div", {
@@ -94,7 +96,10 @@ const Avatar = React.forwardRef((props, ref) => {
     onError: () => setError(true)
   })));
 });
-Avatar.displayName = "@mantine/core/Avatar";
+_Avatar.displayName = "@mantine/core/Avatar";
+_Avatar.Group = AvatarGroup.AvatarGroup;
+const Avatar = utils.createPolymorphicComponent(_Avatar);
 
 exports.Avatar = Avatar;
+exports._Avatar = _Avatar;
 //# sourceMappingURL=Avatar.js.map

package/cjs/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { useEffect, useState, forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineColor,\n  Selectors,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { AvatarPlaceholderIcon } from './AvatarPlaceholderIcon';\nimport useStyles from './Avatar.styles';\n\nexport type AvatarStylesNames = Selectors<typeof useStyles>;\n\ninterface _AvatarProps extends DefaultProps<AvatarStylesNames> {\n  /** Image url */\n  src?: string | null;\n\n  /** Image alt text or title for placeholder variant */\n  alt?: string;\n\n  /** Avatar width and height */\n  size?: MantineNumberSize;\n\n  /** Value from theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Color from theme.colors used for letter and icon placeholders */\n  color?: MantineColor;\n\n  /** `img` element attributes */\n  imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n  /** Custom placeholder */\n  children?: React.ReactNode;\n}\n\nexport type AvatarProps<C> = PolymorphicComponentProps<C, _AvatarProps>;\n\ntype AvatarComponent = (<C = 'div'>(props: AvatarProps<C>) => React.ReactElement) & {\n  displayName?: string;\n};\n\nconst defaultProps: Partial<AvatarProps<any>> = {\n  size: 'md',\n  color: 'gray',\n};\n\nexport const Avatar: AvatarComponent = forwardRef(\n  (props: AvatarProps<'div'>, ref: PolymorphicRef<'div'>) => {\n    const {\n      component,\n      className,\n      size,\n      src,\n      alt,\n      radius,\n      children,\n      color,\n      classNames,\n      styles,\n      imageProps,\n      ...others\n    } = useMantineDefaultProps('Avatar', defaultProps, props);\n    const { classes, cx } = useStyles(\n      { color, radius, size },\n      { classNames, styles, name: 'Avatar' }\n    );\n    const [error, setError] = useState(!src);\n\n    useEffect(() => {\n      !src ? setError(true) : setError(false);\n    }, [src]);\n\n    return (\n      <Box\n        component={component || 'div'}\n        className={cx(classes.root, className)}\n        ref={ref}\n        {...others}\n      >\n        {error ? (\n          <div className={classes.placeholder} title={alt}>\n            {children || <AvatarPlaceholderIcon className={classes.placeholderIcon} />}\n          </div>\n        ) : (\n          <img\n            {...imageProps}\n            className={classes.image}\n            src={src}\n            alt={alt}\n            onError={() => setError(true)}\n          />\n        )}\n      </Box>\n    );\n  }\n) as any;\n\nAvatar.displayName = '@mantine/core/Avatar';\n"],"names":["forwardRef","useMantineDefaultProps","styles","useStyles","useState","useEffect","React","Box","AvatarPlaceholderIcon"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { useEffect, useState, forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineColor,\n  Selectors,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { Box } from '../Box';\nimport { AvatarPlaceholderIcon } from './AvatarPlaceholderIcon';\nimport { AvatarGroup } from './AvatarGroup/AvatarGroup';\nimport { useAvatarGroupContext } from './AvatarGroup/AvatarGroup.context';\nimport useStyles, { AvatarStylesParams } from './Avatar.styles';\n\nexport type AvatarStylesNames = Selectors<typeof useStyles>;\n\nexport interface AvatarProps extends DefaultProps<AvatarStylesNames, AvatarStylesParams> {\n  /** Image url */\n  src?: string | null;\n\n  /** Image alt text or title for placeholder variant */\n  alt?: string;\n\n  /** Avatar width and height */\n  size?: MantineNumberSize;\n\n  /** Value from theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Color from theme.colors used for letter and icon placeholders */\n  color?: MantineColor;\n\n  /** img element attributes */\n  imageProps?: Record<string, any>;\n\n  /** Custom placeholder */\n  children?: React.ReactNode;\n}\n\nconst defaultProps: Partial<AvatarProps> = {\n  size: 'md',\n  color: 'gray',\n};\n\nexport const _Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n  const {\n    className,\n    size,\n    src,\n    alt,\n    radius,\n    children,\n    color,\n    classNames,\n    styles,\n    imageProps,\n    ...others\n  } = useMantineDefaultProps('Avatar', defaultProps, props);\n  const ctx = useAvatarGroupContext();\n\n  const { classes, cx } = useStyles(\n    { color, radius, size, withinGroup: ctx.withinGroup, spacing: ctx.spacing },\n    { classNames, styles, name: 'Avatar' }\n  );\n  const [error, setError] = useState(!src);\n\n  useEffect(() => {\n    !src ? setError(true) : setError(false);\n  }, [src]);\n\n  return (\n    <Box component=\"div\" className={cx(classes.root, className)} ref={ref} {...others}>\n      {error ? (\n        <div className={classes.placeholder} title={alt}>\n          {children || <AvatarPlaceholderIcon className={classes.placeholderIcon} />}\n        </div>\n      ) : (\n        <img\n          {...imageProps}\n          className={classes.image}\n          src={src}\n          alt={alt}\n          onError={() => setError(true)}\n        />\n      )}\n    </Box>\n  );\n}) as any;\n\n_Avatar.displayName = '@mantine/core/Avatar';\n_Avatar.Group = AvatarGroup;\n\nexport const Avatar = createPolymorphicComponent<'div', AvatarProps, { Group: typeof AvatarGroup }>(\n  _Avatar\n);\n"],"names":["forwardRef","useMantineDefaultProps","styles","useAvatarGroupContext","useStyles","useState","useEffect","React","Box","AvatarPlaceholderIcon","AvatarGroup","createPolymorphicComponent"],"mappings":"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"}

package/cjs/components/Avatar/Avatar.styles.js

@@ -30,10 +30,20 @@ const sizes = {
   lg: 56,
   xl: 84
 };
-var useStyles = styles.createStyles((theme, { size, radius, color }) => {
+function getGroupStyles({ withinGroup, spacing, theme }) {
+  if (!withinGroup) {
+    return null;
+  }
+  return {
+    marginLeft: -theme.fn.size({ size: spacing, sizes: theme.spacing }),
+    backgroundColor: `${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`,
+    border: `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
+  };
+}
+var useStyles = styles.createStyles((theme, { size, radius, color, withinGroup, spacing }) => {
   const colors = theme.fn.variant({ variant: "light", color });
   return {
-    root: __spreadProps(__spreadValues({}, theme.fn.focusStyles()), {
+    root: __spreadValues(__spreadProps(__spreadValues({}, theme.fn.focusStyles()), {
       WebkitTapHighlightColor: "transparent",
       boxSizing: "border-box",
       position: "relative",
@@ -43,8 +53,12 @@ var useStyles = styles.createStyles((theme, { size, radius, color }) => {
       width: theme.fn.size({ size, sizes }),
       minWidth: theme.fn.size({ size, sizes }),
       height: theme.fn.size({ size, sizes }),
-      borderRadius: theme.fn.radius(radius)
-    }),
+      borderRadius: theme.fn.radius(radius),
+      textDecoration: "none",
+      border: 0,
+      backgroundColor: "transparent",
+      padding: 0
+    }), getGroupStyles({ withinGroup, spacing, theme })),
     image: {
       objectFit: "cover",
       width: "100%",

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.js","sources":["../../../src/components/Avatar/Avatar.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\n\nexport interface AvatarStylesParams {\n  size: MantineNumberSize;\n  radius: MantineNumberSize;\n  color: MantineColor;\n}\n\nexport const sizes = {\n  xs: 16,\n  sm: 26,\n  md: 38,\n  lg: 56,\n  xl: 84,\n};\n\nexport default createStyles((theme, { size, radius, color }: AvatarStylesParams) => {\n  const colors = theme.fn.variant({ variant: 'light', color });\n  return {\n    root: {\n      ...theme.fn.focusStyles(),\n      WebkitTapHighlightColor: 'transparent',\n      boxSizing: 'border-box',\n      position: 'relative',\n      display: 'block',\n      userSelect: 'none',\n      overflow: 'hidden',\n      width: theme.fn.size({ size, sizes }),\n      minWidth: theme.fn.size({ size, sizes }),\n      height: theme.fn.size({ size, sizes }),\n      borderRadius: theme.fn.radius(radius),\n    },\n\n    image: {\n      objectFit: 'cover',\n      width: '100%',\n      height: '100%',\n      display: 'block',\n    },\n\n    placeholder: {\n      ...theme.fn.fontStyles(),\n      fontSize: theme.fn.size({ size, sizes }) / 2.5,\n      color: colors.color,\n      fontWeight: 700,\n      backgroundColor: colors.background,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '100%',\n      height: '100%',\n      userSelect: 'none',\n    },\n\n    placeholderIcon: {\n      width: '70%',\n      height: '70%',\n      color: colors.color,\n    },\n  };\n});\n"],"names":["createStyles"],"mappings":"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"}
+{"version":3,"file":"Avatar.styles.js","sources":["../../../src/components/Avatar/Avatar.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineNumberSize,\n  MantineColor,\n  CSSObject,\n  MantineTheme,\n} from '@mantine/styles';\n\nexport interface AvatarStylesParams {\n  size: MantineNumberSize;\n  radius: MantineNumberSize;\n  color: MantineColor;\n  withinGroup: boolean;\n  spacing: MantineNumberSize;\n}\n\nexport const sizes = {\n  xs: 16,\n  sm: 26,\n  md: 38,\n  lg: 56,\n  xl: 84,\n};\n\ninterface GetGroupStylesInput {\n  withinGroup: boolean;\n  spacing: MantineNumberSize;\n  theme: MantineTheme;\n}\n\nfunction getGroupStyles({ withinGroup, spacing, theme }: GetGroupStylesInput): CSSObject {\n  if (!withinGroup) {\n    return null;\n  }\n\n  return {\n    marginLeft: -theme.fn.size({ size: spacing, sizes: theme.spacing }),\n    backgroundColor: `${theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white}`,\n    border: `2px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white}`,\n  };\n}\n\nexport default createStyles(\n  (theme, { size, radius, color, withinGroup, spacing }: AvatarStylesParams) => {\n    const colors = theme.fn.variant({ variant: 'light', color });\n    return {\n      root: {\n        ...theme.fn.focusStyles(),\n        WebkitTapHighlightColor: 'transparent',\n        boxSizing: 'border-box',\n        position: 'relative',\n        display: 'block',\n        userSelect: 'none',\n        overflow: 'hidden',\n        width: theme.fn.size({ size, sizes }),\n        minWidth: theme.fn.size({ size, sizes }),\n        height: theme.fn.size({ size, sizes }),\n        borderRadius: theme.fn.radius(radius),\n        textDecoration: 'none',\n        border: 0,\n        backgroundColor: 'transparent',\n        padding: 0,\n        ...getGroupStyles({ withinGroup, spacing, theme }),\n      },\n\n      image: {\n        objectFit: 'cover',\n        width: '100%',\n        height: '100%',\n        display: 'block',\n      },\n\n      placeholder: {\n        ...theme.fn.fontStyles(),\n        fontSize: theme.fn.size({ size, sizes }) / 2.5,\n        color: colors.color,\n        fontWeight: 700,\n        backgroundColor: colors.background,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: '100%',\n        height: '100%',\n        userSelect: 'none',\n      },\n\n      placeholderIcon: {\n        width: '70%',\n        height: '70%',\n        color: colors.color,\n      },\n    };\n  }\n);\n"],"names":["createStyles"],"mappings":"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"}

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.context.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const AvatarGroupContext = React.createContext(null);
+function AvatarGroupProvider({ spacing, children }) {
+  return /* @__PURE__ */ React__default.createElement(AvatarGroupContext.Provider, {
+    value: { spacing }
+  }, children);
+}
+function useAvatarGroupContext() {
+  const ctx = React.useContext(AvatarGroupContext);
+  if (ctx) {
+    return __spreadProps(__spreadValues({}, ctx), { withinGroup: true });
+  }
+  return { spacing: null, withinGroup: false };
+}
+
+exports.AvatarGroupProvider = AvatarGroupProvider;
+exports.useAvatarGroupContext = useAvatarGroupContext;
+//# sourceMappingURL=AvatarGroup.context.js.map

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.context.js","sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.context.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport { MantineNumberSize } from '@mantine/styles';\n\ninterface ContextValue {\n  spacing: MantineNumberSize;\n}\n\nconst AvatarGroupContext = createContext<ContextValue>(null);\n\ninterface AvatarGroupProviderProps extends ContextValue {\n  children: React.ReactNode;\n}\n\nexport function AvatarGroupProvider({ spacing, children }: AvatarGroupProviderProps) {\n  return <AvatarGroupContext.Provider value={{ spacing }}>{children}</AvatarGroupContext.Provider>;\n}\n\nexport function useAvatarGroupContext() {\n  const ctx = useContext(AvatarGroupContext);\n\n  if (ctx) {\n    return { ...ctx, withinGroup: true };\n  }\n\n  return { spacing: null, withinGroup: false };\n}\n"],"names":["createContext","React","useContext"],"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,MAAM,kBAAkB,GAAGA,mBAAa,CAAC,IAAI,CAAC,CAAC;AACxC,SAAS,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;AAC3D,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,QAAQ,EAAE;AAC1E,IAAI,KAAK,EAAE,EAAE,OAAO,EAAE;AACtB,GAAG,EAAE,QAAQ,CAAC,CAAC;AACf,CAAC;AACM,SAAS,qBAAqB,GAAG;AACxC,EAAE,MAAM,GAAG,GAAGC,gBAAU,CAAC,kBAAkB,CAAC,CAAC;AAC7C,EAAE,IAAI,GAAG,EAAE;AACX,IAAI,OAAO,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;AACzE,GAAG;AACH,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;AAC/C;;;;;"}

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('@mantine/styles');
+var AvatarGroup_context = require('./AvatarGroup.context.js');
+var AvatarGroup_styles = require('./AvatarGroup.styles.js');
+var Box = require('../../Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {};
+const AvatarGroup = React.forwardRef((props, ref) => {
+  const _a = styles.useMantineDefaultProps("AvatarGroup", defaultProps, props), {
+    children,
+    spacing = "sm",
+    unstyled,
+    className
+  } = _a, others = __objRest(_a, [
+    "children",
+    "spacing",
+    "unstyled",
+    "className"
+  ]);
+  const { classes, cx } = AvatarGroup_styles['default']({ spacing }, { name: "AvatarGroup", unstyled });
+  return /* @__PURE__ */ React__default.createElement(AvatarGroup_context.AvatarGroupProvider, {
+    spacing
+  }, /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
+    ref,
+    className: cx(classes.root, className)
+  }, others), children));
+});
+AvatarGroup.displayName = "@mantine/core/AvatarGroup";
+
+exports.AvatarGroup = AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useMantineDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { AvatarGroupProvider } from './AvatarGroup.context';\nimport useStyles from './AvatarGroup.styles';\n\nexport interface AvatarGroupProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Avatar components */\n  children: React.ReactNode;\n\n  /** Negative space between Avatars */\n  spacing?: MantineNumberSize;\n}\n\nconst defaultProps: Partial<AvatarGroupProps> = {};\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {\n  const {\n    children,\n    spacing = 'sm',\n    unstyled,\n    className,\n    ...others\n  } = useMantineDefaultProps('AvatarGroup', defaultProps, props);\n  const { classes, cx } = useStyles({ spacing }, { name: 'AvatarGroup', unstyled });\n\n  return (\n    <AvatarGroupProvider spacing={spacing}>\n      <Box ref={ref} className={cx(classes.root, className)} {...others}>\n        {children}\n      </Box>\n    </AvatarGroupProvider>\n  );\n});\n\nAvatarGroup.displayName = '@mantine/core/AvatarGroup';\n"],"names":["forwardRef","useMantineDefaultProps","useStyles","React","AvatarGroupProvider","Box"],"mappings":"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"}

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.styles.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles((theme, { spacing }) => ({
+  root: {
+    display: "flex",
+    paddingLeft: theme.fn.size({ size: spacing, sizes: theme.spacing })
+  }
+}));
+
+exports.default = useStyles;
+//# sourceMappingURL=AvatarGroup.styles.js.map

package/cjs/components/Avatar/AvatarGroup/AvatarGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\ninterface AvatarGroupStylesParams {\n  spacing: MantineNumberSize;\n}\n\nexport default createStyles((theme, { spacing }: AvatarGroupStylesParams) => ({\n  root: {\n    display: 'flex',\n    paddingLeft: theme.fn.size({ size: spacing, sizes: theme.spacing }),\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM;AACrD,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AACvE,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/components/{Image/BackgroundImage → BackgroundImage}/BackgroundImage.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styles = require('@mantine/styles');
-var Box = require('../../Box/Box.js');
+var utils = require('@mantine/utils');
+var Box = require('../Box/Box.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -44,7 +45,7 @@ var __objRest = (source, exclude) => {
 const defaultProps = {
   radius: 0
 };
-const BackgroundImage = React.forwardRef((props, ref) => {
+const _BackgroundImage = React.forwardRef((props, ref) => {
   const _a = styles.useMantineDefaultProps("BackgroundImage", defaultProps, props), { src, radius, sx } = _a, others = __objRest(_a, ["src", "radius", "sx"]);
   return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadProps(__spreadValues({}, others), {
     ref,
@@ -60,11 +61,13 @@ const BackgroundImage = React.forwardRef((props, ref) => {
         backgroundImage: `url(${src})`,
         borderRadius: theme.fn.radius(radius)
       }),
-      ...Array.isArray(sx) ? sx : [sx]
+      ...utils.packSx(sx)
     ]
   }));
 });
-BackgroundImage.displayName = "@mantine/core/BackgroundImage";
+_BackgroundImage.displayName = "@mantine/core/BackgroundImage";
+const BackgroundImage = utils.createPolymorphicComponent(_BackgroundImage);
 
 exports.BackgroundImage = BackgroundImage;
+exports._BackgroundImage = _BackgroundImage;
 //# sourceMappingURL=BackgroundImage.js.map

package/cjs/components/BackgroundImage/BackgroundImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundImage.js","sources":["../../../src/components/BackgroundImage/BackgroundImage.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, useMantineDefaultProps } from '@mantine/styles';\nimport { createPolymorphicComponent, packSx } from '@mantine/utils';\nimport { Box } from '../Box';\n\nexport interface BackgroundImageProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Image url */\n  src: string;\n\n  /** Key of theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n}\n\nconst defaultProps: Partial<BackgroundImageProps> = {\n  radius: 0,\n};\n\nexport const _BackgroundImage = forwardRef<HTMLDivElement, BackgroundImageProps>((props, ref) => {\n  const { src, radius, sx, ...others } = useMantineDefaultProps(\n    'BackgroundImage',\n    defaultProps,\n    props\n  );\n\n  return (\n    <Box\n      {...others}\n      ref={ref}\n      sx={[\n        (theme) => ({\n          ...theme.fn.focusStyles(),\n          backgroundSize: 'cover',\n          backgroundPosition: 'center',\n          display: 'block',\n          width: '100%',\n          border: 0,\n          textDecoration: 'none',\n          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n          backgroundImage: `url(${src})`,\n          borderRadius: theme.fn.radius(radius),\n        }),\n        ...packSx(sx),\n      ]}\n    />\n  );\n});\n\n_BackgroundImage.displayName = '@mantine/core/BackgroundImage';\n\nexport const BackgroundImage = createPolymorphicComponent<'div', BackgroundImageProps>(\n  _BackgroundImage\n);\n"],"names":["forwardRef","useMantineDefaultProps","React","Box","packSx","createPolymorphicComponent"],"mappings":"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"}

package/cjs/components/Badge/Badge.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styles = require('@mantine/styles');
+var utils = require('@mantine/utils');
 var Badge_styles = require('./Badge.styles.js');
 var Box = require('../Box/Box.js');
 
@@ -42,12 +43,10 @@ var __objRest = (source, exclude) => {
 const defaultProps = {
   variant: "light",
   size: "md",
-  radius: "xl",
-  gradient: { from: "blue", to: "cyan", deg: 45 }
+  radius: "xl"
 };
-const Badge = React.forwardRef((props, ref) => {
+const _Badge = React.forwardRef((props, ref) => {
   const _a = styles.useMantineDefaultProps("Badge", defaultProps, props), {
-    component,
     className,
     color,
     variant,
@@ -59,9 +58,9 @@ const Badge = React.forwardRef((props, ref) => {
     radius,
     gradient,
     classNames,
-    styles: styles$1
+    styles: styles$1,
+    unstyled
   } = _a, others = __objRest(_a, [
-    "component",
     "className",
     "color",
     "variant",
@@ -73,20 +72,19 @@ const Badge = React.forwardRef((props, ref) => {
     "radius",
     "gradient",
     "classNames",
-    "styles"
+    "styles",
+    "unstyled"
   ]);
   const { classes, cx } = Badge_styles['default']({
     size,
     fullWidth,
     color,
     radius,
-    gradientFrom: gradient.from,
-    gradientTo: gradient.to,
-    gradientDeg: gradient.deg
-  }, { classNames, styles: styles$1, name: "Badge" });
+    variant,
+    gradient
+  }, { classNames, styles: styles$1, name: "Badge", unstyled });
   return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
-    component: component || "div",
-    className: cx(classes[variant], classes.root, className),
+    className: cx(classes.root, className),
     ref
   }, others), leftSection && /* @__PURE__ */ React__default.createElement("span", {
     className: classes.leftSection
@@ -96,7 +94,9 @@ const Badge = React.forwardRef((props, ref) => {
     className: classes.rightSection
   }, rightSection));
 });
-Badge.displayName = "@mantine/core/Badge";
+_Badge.displayName = "@mantine/core/Badge";
+const Badge = utils.createPolymorphicComponent(_Badge);
 
 exports.Badge = Badge;
+exports._Badge = _Badge;
 //# sourceMappingURL=Badge.js.map

package/cjs/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineNumberSize,\n  MantineGradient,\n  MantineColor,\n  Selectors,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Badge.styles';\n\nexport type BadgeVariant = 'light' | 'filled' | 'outline' | 'dot' | 'gradient';\nexport type BadgeStylesNames = Selectors<typeof useStyles>;\n\ninterface _BadgeProps extends DefaultProps<BadgeStylesNames> {\n  /** Badge color from theme */\n  color?: MantineColor;\n\n  /** Controls badge background, color and border styles */\n  variant?: BadgeVariant;\n\n  /** Controls gradient settings in gradient variant only */\n  gradient?: MantineGradient;\n\n  /** Defines badge height and font-size */\n  size?: MantineSize;\n\n  /** Predefined border-radius value from theme.radius or number for border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis */\n  fullWidth?: boolean;\n\n  /** Section rendered on the left side of label */\n  leftSection?: React.ReactNode;\n\n  /** Section rendered on the right side of label */\n  rightSection?: React.ReactNode;\n\n  /** Badge label */\n  children?: React.ReactNode;\n}\n\nexport type BadgeProps<C> = PolymorphicComponentProps<C, _BadgeProps>;\n\ntype BadgeComponent = (<C = 'div'>(props: BadgeProps<C>) => React.ReactElement) & {\n  displayName?: string;\n};\n\nconst defaultProps: Partial<BadgeProps<any>> = {\n  variant: 'light',\n  size: 'md',\n  radius: 'xl',\n  gradient: { from: 'blue', to: 'cyan', deg: 45 },\n};\n\nexport const Badge: BadgeComponent = forwardRef(\n  (props: BadgeProps<'div'>, ref: PolymorphicRef<'div'>) => {\n    const {\n      component,\n      className,\n      color,\n      variant,\n      fullWidth,\n      children,\n      size,\n      leftSection,\n      rightSection,\n      radius,\n      gradient,\n      classNames,\n      styles,\n      ...others\n    } = useMantineDefaultProps('Badge', defaultProps, props);\n\n    const { classes, cx } = useStyles(\n      {\n        size,\n        fullWidth,\n        color,\n        radius,\n        gradientFrom: gradient.from,\n        gradientTo: gradient.to,\n        gradientDeg: gradient.deg,\n      },\n      { classNames, styles, name: 'Badge' }\n    );\n\n    return (\n      <Box\n        component={component || 'div'}\n        className={cx(classes[variant], classes.root, className)}\n        ref={ref}\n        {...others}\n      >\n        {leftSection && <span className={classes.leftSection}>{leftSection}</span>}\n        <span className={classes.inner}>{children}</span>\n        {rightSection && <span className={classes.rightSection}>{rightSection}</span>}\n      </Box>\n    );\n  }\n) as any;\n\nBadge.displayName = '@mantine/core/Badge';\n"],"names":["forwardRef","useMantineDefaultProps","styles","useStyles","React","Box"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineNumberSize,\n  MantineGradient,\n  MantineColor,\n  Selectors,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { Box } from '../Box';\nimport useStyles, { BadgeStylesParams, BadgeVariant } from './Badge.styles';\n\nexport type BadgeStylesNames = Selectors<typeof useStyles>;\n\nexport interface BadgeProps extends DefaultProps<BadgeStylesNames, BadgeStylesParams> {\n  /** Key of theme.colors */\n  color?: MantineColor;\n\n  /** Controls appearance */\n  variant?: BadgeVariant;\n\n  /** Controls gradient, applied to gradient variant only */\n  gradient?: MantineGradient;\n\n  /** Badge height and font size */\n  size?: MantineSize;\n\n  /** Key of theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis */\n  fullWidth?: boolean;\n\n  /** Section rendered on the left side of label */\n  leftSection?: React.ReactNode;\n\n  /** Section rendered on the right side of label */\n  rightSection?: React.ReactNode;\n\n  /** Badge label */\n  children?: React.ReactNode;\n}\n\nconst defaultProps: Partial<BadgeProps> = {\n  variant: 'light',\n  size: 'md',\n  radius: 'xl',\n};\n\nexport const _Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {\n  const {\n    className,\n    color,\n    variant,\n    fullWidth,\n    children,\n    size,\n    leftSection,\n    rightSection,\n    radius,\n    gradient,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n  } = useMantineDefaultProps('Badge', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    {\n      size,\n      fullWidth,\n      color,\n      radius,\n      variant,\n      gradient,\n    },\n    { classNames, styles, name: 'Badge', unstyled }\n  );\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      {leftSection && <span className={classes.leftSection}>{leftSection}</span>}\n      <span className={classes.inner}>{children}</span>\n      {rightSection && <span className={classes.rightSection}>{rightSection}</span>}\n    </Box>\n  );\n});\n\n_Badge.displayName = '@mantine/core/Badge';\n\nexport const Badge = createPolymorphicComponent<'div', BadgeProps>(_Badge);\n"],"names":["forwardRef","useMantineDefaultProps","styles","useStyles","React","Box","createPolymorphicComponent"],"mappings":"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"}

package/cjs/components/Badge/Badge.styles.js

@@ -24,26 +24,11 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const sizes = {
-  xs: {
-    fontSize: 9,
-    height: 16
-  },
-  sm: {
-    fontSize: 10,
-    height: 18
-  },
-  md: {
-    fontSize: 11,
-    height: 20
-  },
-  lg: {
-    fontSize: 13,
-    height: 26
-  },
-  xl: {
-    fontSize: 16,
-    height: 32
-  }
+  xs: { fontSize: 9, height: 16 },
+  sm: { fontSize: 10, height: 18 },
+  md: { fontSize: 11, height: 20 },
+  lg: { fontSize: 13, height: 26 },
+  xl: { fontSize: 16, height: 32 }
 };
 const dotSizes = {
   xs: 4,
@@ -52,20 +37,34 @@ const dotSizes = {
   lg: 8,
   xl: 10
 };
-const heights = Object.keys(sizes).reduce((acc, key) => {
-  acc[key] = sizes[key].height;
-  return acc;
-}, {});
-var useStyles = styles.createStyles((theme, { color, size, radius, gradientFrom, gradientTo, gradientDeg, fullWidth }) => {
-  const dotSize = theme.fn.size({ size, sizes: dotSizes });
+function getVariantStyles({ theme, variant, color, size, gradient }) {
+  if (variant === "dot") {
+    const dotSize = theme.fn.size({ size, sizes: dotSizes });
+    return {
+      backgroundColor: "transparent",
+      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
+      border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[3]}`,
+      paddingLeft: theme.fn.size({ size, sizes: theme.spacing }) / 1.5 - dotSize / 2,
+      "&::before": {
+        content: '""',
+        display: "block",
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize,
+        backgroundColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 4 : theme.fn.primaryShade("light")),
+        marginRight: dotSize
+      }
+    };
+  }
+  const colors = theme.fn.variant({ color, variant, gradient });
+  return {
+    background: colors.background,
+    color: colors.color,
+    border: `${variant === "gradient" ? 0 : 1}px solid ${colors.border}`
+  };
+}
+var useStyles = styles.createStyles((theme, { color, size, radius, gradient, fullWidth, variant }) => {
   const { fontSize, height } = size in sizes ? sizes[size] : sizes.md;
-  const lightColors = theme.fn.variant({ color, variant: "light" });
-  const filledColors = theme.fn.variant({ color, variant: "filled" });
-  const outlineColors = theme.fn.variant({ color, variant: "outline" });
-  const gradientColors = theme.fn.variant({
-    variant: "gradient",
-    gradient: { from: gradientFrom, to: gradientTo, deg: gradientDeg }
-  });
   return {
     leftSection: {
       marginRight: theme.spacing.xs / 2
@@ -78,7 +77,7 @@ var useStyles = styles.createStyles((theme, { color, size, radius, gradientFrom,
       overflow: "hidden",
       textOverflow: "ellipsis"
     },
-    root: __spreadProps(__spreadValues(__spreadValues({}, theme.fn.focusStyles()), theme.fn.fontStyles()), {
+    root: __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, theme.fn.focusStyles()), theme.fn.fontStyles()), {
       fontSize,
       height,
       WebkitTapHighlightColor: "transparent",
@@ -97,45 +96,9 @@ var useStyles = styles.createStyles((theme, { color, size, radius, gradientFrom,
       cursor: "default",
       textOverflow: "ellipsis",
       overflow: "hidden"
-    }),
-    light: {
-      backgroundColor: lightColors.background,
-      color: lightColors.color,
-      border: "1px solid transparent"
-    },
-    filled: {
-      backgroundColor: filledColors.background,
-      color: filledColors.color,
-      border: "1px solid transparent"
-    },
-    outline: {
-      backgroundColor: outlineColors.background,
-      color: outlineColors.color,
-      border: `1px solid ${outlineColors.border}`
-    },
-    gradient: {
-      backgroundImage: gradientColors.background,
-      color: gradientColors.color,
-      border: 0
-    },
-    dot: {
-      backgroundColor: "transparent",
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-      border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[3]}`,
-      paddingLeft: theme.fn.size({ size, sizes: theme.spacing }) / 1.5 - dotSize / 2,
-      "&::before": {
-        content: '""',
-        display: "block",
-        width: dotSize,
-        height: dotSize,
-        borderRadius: dotSize,
-        backgroundColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 4 : theme.fn.primaryShade("light")),
-        marginRight: dotSize
-      }
-    }
+    }), getVariantStyles({ theme, variant, color, size, gradient }))
   };
 });
 
 exports.default = useStyles;
-exports.heights = heights;
 //# sourceMappingURL=Badge.styles.js.map