@mantine/core 5.10.2 → 6.0.0-alpha.1

package/cjs/Blockquote/Blockquote.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.styles.js","sources":["../../src/Blockquote/Blockquote.styles.ts"],"sourcesContent":["import { createStyles, MantineColor } from '@mantine/styles';\n\nexport interface BlockquoteStylesParams {\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { color }: BlockquoteStylesParams) => ({\n  root: {\n    ...theme.fn.fontStyles(),\n    fontSize: theme.fontSizes.lg,\n    lineHeight: theme.lineHeight,\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n    margin: 0,\n    borderTopRightRadius: theme.radius.sm,\n    borderBottomRightRadius: theme.radius.sm,\n    padding: `${theme.spacing.md}px ${theme.spacing.lg}px`,\n  },\n\n  inner: {\n    display: 'flex',\n  },\n\n  body: {\n    flex: 1,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n\n  icon: {\n    color: theme.fn.variant({ variant: 'filled', color }).background,\n    marginRight: theme.spacing.lg,\n    marginTop: 2,\n    width: 22,\n  },\n\n  cite: {\n    display: 'block',\n    fontSize: theme.fontSizes.sm,\n    marginTop: theme.spacing.xs,\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n}));\n"],"names":["createStyles"],"mappings":"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"}
+{"version":3,"file":"Blockquote.styles.js","sources":["../../src/Blockquote/Blockquote.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, rem } from '@mantine/styles';\n\nexport interface BlockquoteStylesParams {\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { color }: BlockquoteStylesParams) => ({\n  root: {\n    ...theme.fn.fontStyles(),\n    fontSize: theme.fontSizes.lg,\n    lineHeight: theme.lineHeight,\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n    margin: 0,\n    borderTopRightRadius: theme.radius.sm,\n    borderBottomRightRadius: theme.radius.sm,\n    padding: `${theme.spacing.md} ${theme.spacing.lg}`,\n  },\n\n  inner: {\n    display: 'flex',\n  },\n\n  body: {\n    flex: 1,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n\n  icon: {\n    color: theme.fn.variant({ variant: 'filled', color }).background,\n    marginRight: theme.spacing.lg,\n    marginTop: rem(2),\n    width: rem(22),\n  },\n\n  cite: {\n    display: 'block',\n    fontSize: theme.fontSizes.sm,\n    marginTop: theme.spacing.xs,\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n}));\n"],"names":["createStyles","rem"],"mappings":"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"}

package/cjs/Blockquote/QuoteIcon.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var styles = require('@mantine/styles');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -26,8 +27,8 @@ var __spreadValues = (a, b) => {
 };
 function QuoteIcon(props) {
   return /* @__PURE__ */ React__default.createElement("svg", __spreadValues({
-    width: "20",
-    height: "20",
+    width: styles.rem(20),
+    height: styles.rem(20),
     viewBox: "0 0 409.294 409.294",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"

package/cjs/Blockquote/QuoteIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuoteIcon.js","sources":["../../src/Blockquote/QuoteIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport function QuoteIcon(props: React.ComponentPropsWithoutRef<'svg'>) {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 409.294 409.294\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M0 204.647v175.412h175.412V204.647H58.471c0-64.48 52.461-116.941 116.941-116.941V29.235C78.684 29.235 0 107.919 0 204.647zM409.294 87.706V29.235c-96.728 0-175.412 78.684-175.412 175.412v175.412h175.412V204.647H292.353c0-64.48 52.461-116.941 116.941-116.941z\" />\n    </svg>\n  );\n}\n"],"names":["React"],"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;AAEK,SAAS,SAAS,CAAC,KAAK,EAAE;AACjC,EAAE,uBAAuBA,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC;AACnE,IAAI,KAAK,EAAE,IAAI;AACf,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,OAAO,EAAE,qBAAqB;AAClC,IAAI,IAAI,EAAE,cAAc;AACxB,IAAI,KAAK,EAAE,4BAA4B;AACvC,GAAG,EAAE,KAAK,CAAC,kBAAkBA,cAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACzD,IAAI,CAAC,EAAE,mQAAmQ;AAC1Q,GAAG,CAAC,CAAC,CAAC;AACN;;;;"}
+{"version":3,"file":"QuoteIcon.js","sources":["../../src/Blockquote/QuoteIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { rem } from '@mantine/styles';\n\nexport function QuoteIcon(props: React.ComponentPropsWithoutRef<'svg'>) {\n  return (\n    <svg\n      width={rem(20)}\n      height={rem(20)}\n      viewBox=\"0 0 409.294 409.294\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M0 204.647v175.412h175.412V204.647H58.471c0-64.48 52.461-116.941 116.941-116.941V29.235C78.684 29.235 0 107.919 0 204.647zM409.294 87.706V29.235c-96.728 0-175.412 78.684-175.412 175.412v175.412h175.412V204.647H292.353c0-64.48 52.461-116.941 116.941-116.941z\" />\n    </svg>\n  );\n}\n"],"names":["React","rem"],"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;AAGK,SAAS,SAAS,CAAC,KAAK,EAAE;AACjC,EAAE,uBAAuBA,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC;AACnE,IAAI,KAAK,EAAEC,UAAG,CAAC,EAAE,CAAC;AAClB,IAAI,MAAM,EAAEA,UAAG,CAAC,EAAE,CAAC;AACnB,IAAI,OAAO,EAAE,qBAAqB;AAClC,IAAI,IAAI,EAAE,cAAc;AACxB,IAAI,KAAK,EAAE,4BAA4B;AACvC,GAAG,EAAE,KAAK,CAAC,kBAAkBD,cAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACzD,IAAI,CAAC,EAAE,mQAAmQ;AAC1Q,GAAG,CAAC,CAAC,CAAC;AACN;;;;"}

package/cjs/Box/style-system-props/get-responsive-value/get-responsive-value.js

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('@mantine/styles');
+
 function getSortedKeys(value, theme) {
-  const sorted = Object.keys(value).filter((breakpoint) => breakpoint !== "base").sort((a, b) => theme.fn.size({ size: a, sizes: theme.breakpoints }) - theme.fn.size({ size: b, sizes: theme.breakpoints }));
+  const sorted = Object.keys(value).filter((breakpoint) => breakpoint !== "base").sort((a, b) => styles.getBreakpointValue(styles.getSize({ size: a, sizes: theme.breakpoints })) - styles.getBreakpointValue(styles.getSize({ size: b, sizes: theme.breakpoints })));
   return "base" in value ? ["base", ...sorted] : sorted;
 }
 function getResponsiveValue({ value, theme, getValue, property }) {

package/cjs/Box/style-system-props/get-responsive-value/get-responsive-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-responsive-value.js","sources":["../../../../src/Box/style-system-props/get-responsive-value/get-responsive-value.ts"],"sourcesContent":["import { MantineTheme, CSSObject } from '@mantine/styles';\n\nfunction getSortedKeys(value: Record<string, any>, theme: MantineTheme) {\n  const sorted = Object.keys(value)\n    .filter((breakpoint) => breakpoint !== 'base')\n    .sort(\n      (a, b) =>\n        theme.fn.size({ size: a, sizes: theme.breakpoints }) -\n        theme.fn.size({ size: b, sizes: theme.breakpoints })\n    );\n  return 'base' in value ? ['base', ...sorted] : sorted;\n}\n\nexport type StyleProperty = string | string[];\n\ninterface GetResponsiveStyles {\n  value: any;\n  theme: MantineTheme;\n  getValue: (value: any, theme: MantineTheme) => any;\n  property: StyleProperty;\n}\n\nexport function getResponsiveValue({ value, theme, getValue, property }: GetResponsiveStyles) {\n  if (value == null) {\n    return undefined;\n  }\n\n  if (typeof value === 'object') {\n    const result = getSortedKeys(value, theme).reduce<CSSObject>((acc, breakpointKey) => {\n      if (breakpointKey === 'base' && value.base !== undefined) {\n        const baseValue = getValue(value.base, theme);\n\n        if (Array.isArray(property)) {\n          property.forEach((prop) => {\n            acc[prop] = baseValue;\n          });\n          return acc;\n        }\n\n        acc[property] = baseValue;\n        return acc;\n      }\n\n      const breakpointValue = getValue(value[breakpointKey], theme);\n\n      if (Array.isArray(property)) {\n        acc[theme.fn.largerThan(breakpointKey as any)] = {};\n        property.forEach((prop) => {\n          acc[theme.fn.largerThan(breakpointKey as any)][prop] = breakpointValue;\n        });\n\n        return acc;\n      }\n\n      acc[theme.fn.largerThan(breakpointKey as any)] = {\n        [property]: breakpointValue,\n      };\n\n      return acc;\n    }, {});\n\n    return result;\n  }\n\n  const cssValue = getValue(value, theme);\n\n  if (Array.isArray(property)) {\n    return property.reduce((acc, prop) => {\n      acc[prop] = cssValue;\n      return acc;\n    }, {});\n  }\n\n  return { [property]: cssValue };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"get-responsive-value.js","sources":["../../../../src/Box/style-system-props/get-responsive-value/get-responsive-value.ts"],"sourcesContent":["import { MantineTheme, CSSObject, getSize, getBreakpointValue } from '@mantine/styles';\n\nfunction getSortedKeys(value: Record<string, any>, theme: MantineTheme) {\n  const sorted = Object.keys(value)\n    .filter((breakpoint) => breakpoint !== 'base')\n    .sort(\n      (a, b) =>\n        getBreakpointValue(getSize({ size: a, sizes: theme.breakpoints })) -\n        getBreakpointValue(getSize({ size: b, sizes: theme.breakpoints }))\n    );\n  return 'base' in value ? ['base', ...sorted] : sorted;\n}\n\nexport type StyleProperty = string | string[];\n\ninterface GetResponsiveStyles {\n  value: any;\n  theme: MantineTheme;\n  getValue: (value: any, theme: MantineTheme) => any;\n  property: StyleProperty;\n}\n\nexport function getResponsiveValue({ value, theme, getValue, property }: GetResponsiveStyles) {\n  if (value == null) {\n    return undefined;\n  }\n\n  if (typeof value === 'object') {\n    const result = getSortedKeys(value, theme).reduce<CSSObject>((acc, breakpointKey) => {\n      if (breakpointKey === 'base' && value.base !== undefined) {\n        const baseValue = getValue(value.base, theme);\n\n        if (Array.isArray(property)) {\n          property.forEach((prop) => {\n            acc[prop] = baseValue;\n          });\n          return acc;\n        }\n\n        acc[property] = baseValue;\n        return acc;\n      }\n\n      const breakpointValue = getValue(value[breakpointKey], theme);\n\n      if (Array.isArray(property)) {\n        acc[theme.fn.largerThan(breakpointKey as any)] = {};\n        property.forEach((prop) => {\n          acc[theme.fn.largerThan(breakpointKey as any)][prop] = breakpointValue;\n        });\n\n        return acc;\n      }\n\n      acc[theme.fn.largerThan(breakpointKey as any)] = {\n        [property]: breakpointValue,\n      };\n\n      return acc;\n    }, {});\n\n    return result;\n  }\n\n  const cssValue = getValue(value, theme);\n\n  if (Array.isArray(property)) {\n    return property.reduce((acc, prop) => {\n      acc[prop] = cssValue;\n      return acc;\n    }, {});\n  }\n\n  return { [property]: cssValue };\n}\n"],"names":["getBreakpointValue","getSize"],"mappings":"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"}

package/cjs/Box/style-system-props/value-getters/get-default-value.js

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('@mantine/styles');
+
 function getDefaultValue(value) {
-  return value;
+  return styles.rem(value);
 }
 
 exports.getDefaultValue = getDefaultValue;

package/cjs/Box/style-system-props/value-getters/get-default-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-default-value.js","sources":["../../../../src/Box/style-system-props/value-getters/get-default-value.ts"],"sourcesContent":["export function getDefaultValue<T>(value: T) {\n  return value;\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,eAAe,CAAC,KAAK,EAAE;AACvC,EAAE,OAAO,KAAK,CAAC;AACf;;;;"}
+{"version":3,"file":"get-default-value.js","sources":["../../../../src/Box/style-system-props/value-getters/get-default-value.ts"],"sourcesContent":["import { rem } from '@mantine/styles';\n\nexport function getDefaultValue<T>(value: T) {\n  return rem(value);\n}\n"],"names":["rem"],"mappings":";;;;;;AACO,SAAS,eAAe,CAAC,KAAK,EAAE;AACvC,EAAE,OAAOA,UAAG,CAAC,KAAK,CAAC,CAAC;AACpB;;;;"}

package/cjs/Box/style-system-props/value-getters/get-font-size-value.js

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('@mantine/styles');
+
 function getFontSizeValue(size, theme) {
-  return theme.fn.size({ size, sizes: theme.fontSizes });
+  return styles.getSize({ size, sizes: theme.fontSizes });
 }
 
 exports.getFontSizeValue = getFontSizeValue;

package/cjs/Box/style-system-props/value-getters/get-font-size-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-font-size-value.js","sources":["../../../../src/Box/style-system-props/value-getters/get-font-size-value.ts"],"sourcesContent":["import type { MantineTheme } from '@mantine/styles';\n\nexport function getFontSizeValue(size: any, theme: MantineTheme) {\n  return theme.fn.size({ size, sizes: theme.fontSizes });\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE;AAC9C,EAAE,OAAO,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACzD;;;;"}
+{"version":3,"file":"get-font-size-value.js","sources":["../../../../src/Box/style-system-props/value-getters/get-font-size-value.ts"],"sourcesContent":["import { MantineTheme, getSize } from '@mantine/styles';\n\nexport function getFontSizeValue(size: any, theme: MantineTheme) {\n  return getSize({ size, sizes: theme.fontSizes });\n}\n"],"names":["getSize"],"mappings":";;;;;;AACO,SAAS,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE;AAC9C,EAAE,OAAOA,cAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnD;;;;"}

package/cjs/Box/style-system-props/value-getters/get-spacing-value.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('@mantine/styles');
+
 const NEGATIVE_VALUES = ["-xs", "-sm", "-md", "-lg", "-xl"];
 function getSpacingValue(size, theme) {
   if (NEGATIVE_VALUES.includes(size)) {
-    return theme.fn.size({ size: size.replace("-", ""), sizes: theme.spacing }) * -1;
+    return `calc(${styles.getSize({
+      size: size.replace("-", ""),
+      sizes: theme.spacing
+    })} * -1)`;
   }
-  return theme.fn.size({ size, sizes: theme.spacing });
+  return styles.getSize({ size, sizes: theme.spacing });
 }
 
 exports.getSpacingValue = getSpacingValue;

package/cjs/Box/style-system-props/value-getters/get-spacing-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-spacing-value.js","sources":["../../../../src/Box/style-system-props/value-getters/get-spacing-value.ts"],"sourcesContent":["import type { MantineTheme } from '@mantine/styles';\n\nconst NEGATIVE_VALUES = ['-xs', '-sm', '-md', '-lg', '-xl'];\n\nexport function getSpacingValue(size: any, theme: MantineTheme) {\n  if (NEGATIVE_VALUES.includes(size)) {\n    return theme.fn.size({ size: size.replace('-', ''), sizes: theme.spacing }) * -1;\n  }\n\n  return theme.fn.size({ size, sizes: theme.spacing });\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AACrD,SAAS,eAAe,CAAC,IAAI,EAAE,KAAK,EAAE;AAC7C,EAAE,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACtC,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACrF,GAAG;AACH,EAAE,OAAO,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;AACvD;;;;"}
+{"version":3,"file":"get-spacing-value.js","sources":["../../../../src/Box/style-system-props/value-getters/get-spacing-value.ts"],"sourcesContent":["import { MantineTheme, getSize } from '@mantine/styles';\n\nconst NEGATIVE_VALUES = ['-xs', '-sm', '-md', '-lg', '-xl'];\n\nexport function getSpacingValue(size: string | number, theme: MantineTheme) {\n  if (NEGATIVE_VALUES.includes(size as string)) {\n    return `calc(${getSize({\n      size: (size as string).replace('-', ''),\n      sizes: theme.spacing,\n    })} * -1)`;\n  }\n\n  return getSize({ size, sizes: theme.spacing });\n}\n"],"names":["getSize"],"mappings":";;;;;;AACA,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AACrD,SAAS,eAAe,CAAC,IAAI,EAAE,KAAK,EAAE;AAC7C,EAAE,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACtC,IAAI,OAAO,CAAC,KAAK,EAAEA,cAAO,CAAC;AAC3B,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;AACjC,MAAM,KAAK,EAAE,KAAK,CAAC,OAAO;AAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AACf,GAAG;AACH,EAAE,OAAOA,cAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;AACjD;;;;"}

package/cjs/Breadcrumbs/Breadcrumbs.js

@@ -45,8 +45,14 @@ const defaultProps = {
   separator: "/"
 };
 const Breadcrumbs = React.forwardRef((props, ref) => {
-  const _a = styles.useComponentDefaultProps("Breadcrumbs", defaultProps, props), { className, children, separator, classNames, styles: styles$1, unstyled } = _a, others = __objRest(_a, ["className", "children", "separator", "classNames", "styles", "unstyled"]);
-  const { classes, cx } = Breadcrumbs_styles['default'](null, { classNames, styles: styles$1, unstyled, name: "Breadcrumbs" });
+  const _a = styles.useComponentDefaultProps("Breadcrumbs", defaultProps, props), { className, children, separator, classNames, styles: styles$1, unstyled, variant } = _a, others = __objRest(_a, ["className", "children", "separator", "classNames", "styles", "unstyled", "variant"]);
+  const { classes, cx } = Breadcrumbs_styles['default'](null, {
+    classNames,
+    styles: styles$1,
+    unstyled,
+    name: "Breadcrumbs",
+    variant
+  });
   const items = React__default.Children.toArray(children).reduce((acc, child, index, array) => {
     var _a2;
     const item = utils.isElement(child) ? React__default.cloneElement(child, {

package/cjs/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { isElement } from '@mantine/utils';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport useStyles from './Breadcrumbs.styles';\n\nexport type BreadcrumbsStylesNames = Selectors<typeof useStyles>;\n\nexport interface BreadcrumbsProps\n  extends DefaultProps<BreadcrumbsStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Separator between breadcrumbs */\n  separator?: React.ReactNode;\n\n  /** React nodes that should be separated */\n  children: React.ReactNode;\n}\n\nconst defaultProps: Partial<BreadcrumbsProps> = {\n  separator: '/',\n};\n\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n  (props: BreadcrumbsProps, ref) => {\n    const { className, children, separator, classNames, styles, unstyled, ...others } =\n      useComponentDefaultProps('Breadcrumbs', defaultProps, props);\n\n    const { classes, cx } = useStyles(null, { classNames, styles, unstyled, name: 'Breadcrumbs' });\n\n    const items = React.Children.toArray(children).reduce<React.ReactNode[]>(\n      (acc, child, index, array) => {\n        const item = isElement(child) ? (\n          React.cloneElement(child, {\n            className: cx(classes.breadcrumb, child.props?.className),\n            key: index,\n          })\n        ) : (\n          <div className={classes.breadcrumb} key={index}>\n            {child}\n          </div>\n        );\n\n        acc.push(item);\n\n        if (index !== array.length - 1) {\n          acc.push(\n            <Text size=\"sm\" className={classes.separator} key={`separator-${index}`}>\n              {separator}\n            </Text>\n          );\n        }\n\n        return acc;\n      },\n      []\n    );\n\n    return (\n      <Box className={cx(classes.root, className)} ref={ref} {...others}>\n        {items}\n      </Box>\n    );\n  }\n);\n\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","isElement","Text","Box"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { isElement } from '@mantine/utils';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport useStyles from './Breadcrumbs.styles';\n\nexport type BreadcrumbsStylesNames = Selectors<typeof useStyles>;\n\nexport interface BreadcrumbsProps\n  extends DefaultProps<BreadcrumbsStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n\n  /** Separator between breadcrumbs */\n  separator?: React.ReactNode;\n\n  /** React nodes that should be separated */\n  children: React.ReactNode;\n}\n\nconst defaultProps: Partial<BreadcrumbsProps> = {\n  separator: '/',\n};\n\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n  (props: BreadcrumbsProps, ref) => {\n    const { className, children, separator, classNames, styles, unstyled, variant, ...others } =\n      useComponentDefaultProps('Breadcrumbs', defaultProps, props);\n\n    const { classes, cx } = useStyles(null, {\n      classNames,\n      styles,\n      unstyled,\n      name: 'Breadcrumbs',\n      variant,\n    });\n\n    const items = React.Children.toArray(children).reduce<React.ReactNode[]>(\n      (acc, child, index, array) => {\n        const item = isElement(child) ? (\n          React.cloneElement(child, {\n            className: cx(classes.breadcrumb, child.props?.className),\n            key: index,\n          })\n        ) : (\n          <div className={classes.breadcrumb} key={index}>\n            {child}\n          </div>\n        );\n\n        acc.push(item);\n\n        if (index !== array.length - 1) {\n          acc.push(\n            <Text size=\"sm\" className={classes.separator} key={`separator-${index}`}>\n              {separator}\n            </Text>\n          );\n        }\n\n        return acc;\n      },\n      []\n    );\n\n    return (\n      <Box className={cx(classes.root, className)} ref={ref} {...others}>\n        {items}\n      </Box>\n    );\n  }\n);\n\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","isElement","Text","Box"],"mappings":"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"}

package/cjs/Burger/Burger.js

@@ -44,8 +44,26 @@ const defaultProps = {
   transitionDuration: 300
 };
 const Burger = React.forwardRef((props, ref) => {
-  const _a = styles.useComponentDefaultProps("Burger", defaultProps, props), { className, opened, color, size, classNames, styles: styles$1, transitionDuration } = _a, others = __objRest(_a, ["className", "opened", "color", "size", "classNames", "styles", "transitionDuration"]);
-  const { classes, cx } = Burger_styles['default']({ color, size, transitionDuration }, { classNames, styles: styles$1, name: "Burger" });
+  const _a = styles.useComponentDefaultProps("Burger", defaultProps, props), {
+    className,
+    opened,
+    color,
+    size,
+    classNames,
+    styles: styles$1,
+    transitionDuration,
+    variant
+  } = _a, others = __objRest(_a, [
+    "className",
+    "opened",
+    "color",
+    "size",
+    "classNames",
+    "styles",
+    "transitionDuration",
+    "variant"
+  ]);
+  const { classes, cx } = Burger_styles['default']({ color, transitionDuration }, { classNames, styles: styles$1, name: "Burger", variant, size });
   return /* @__PURE__ */ React__default.createElement(UnstyledButton.UnstyledButton, __spreadValues({
     className: cx(classes.root, className),
     ref

package/cjs/Burger/Burger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Burger.js","sources":["../../src/Burger/Burger.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { UnstyledButton } from '../UnstyledButton';\nimport useStyles, { BurgerStylesParams } from './Burger.styles';\n\nexport type BurgerStylesNames = Selectors<typeof useStyles>;\n\nexport interface BurgerProps\n  extends DefaultProps<BurgerStylesNames, BurgerStylesParams>,\n    React.ComponentPropsWithoutRef<'button'> {\n  /** Burger state: true for cross, false for burger */\n  opened: boolean;\n\n  /** Burger color value, not connected to theme.colors, defaults to theme.black with light color scheme and theme.white with dark */\n  color?: string;\n\n  /** Predefined burger size or number to set width and height in px */\n  size?: MantineNumberSize;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n}\n\nconst defaultProps: Partial<BurgerProps> = {\n  size: 'md',\n  transitionDuration: 300,\n};\n\nexport const Burger = forwardRef<HTMLButtonElement, BurgerProps>((props: BurgerProps, ref) => {\n  const { className, opened, color, size, classNames, styles, transitionDuration, ...others } =\n    useComponentDefaultProps('Burger', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { color, size, transitionDuration },\n    { classNames, styles, name: 'Burger' }\n  );\n\n  return (\n    <UnstyledButton className={cx(classes.root, className)} ref={ref} {...others}>\n      <div data-opened={opened || undefined} className={classes.burger} />\n    </UnstyledButton>\n  );\n});\n\nBurger.displayName = '@mantine/core/Burger';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","UnstyledButton"],"mappings":"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"}
+{"version":3,"file":"Burger.js","sources":["../../src/Burger/Burger.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { UnstyledButton } from '../UnstyledButton';\nimport useStyles, { BurgerStylesParams } from './Burger.styles';\n\nexport type BurgerStylesNames = Selectors<typeof useStyles>;\n\nexport interface BurgerProps\n  extends DefaultProps<BurgerStylesNames, BurgerStylesParams>,\n    React.ComponentPropsWithoutRef<'button'> {\n  variant?: string;\n\n  /** Burger state: true for cross, false for burger */\n  opened: boolean;\n\n  /** Burger color value, not connected to theme.colors, defaults to theme.black with light color scheme and theme.white with dark */\n  color?: string;\n\n  /** Predefined burger size or number to set width and height */\n  size?: MantineNumberSize;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n}\n\nconst defaultProps: Partial<BurgerProps> = {\n  size: 'md',\n  transitionDuration: 300,\n};\n\nexport const Burger = forwardRef<HTMLButtonElement, BurgerProps>((props: BurgerProps, ref) => {\n  const {\n    className,\n    opened,\n    color,\n    size,\n    classNames,\n    styles,\n    transitionDuration,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Burger', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { color, transitionDuration },\n    { classNames, styles, name: 'Burger', variant, size }\n  );\n\n  return (\n    <UnstyledButton className={cx(classes.root, className)} ref={ref} {...others}>\n      <div data-opened={opened || undefined} className={classes.burger} />\n    </UnstyledButton>\n  );\n});\n\nBurger.displayName = '@mantine/core/Burger';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","UnstyledButton"],"mappings":"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"}

package/cjs/Burger/Burger.styles.js

@@ -5,21 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
 
 const sizes = {
-  xs: 12,
-  sm: 18,
-  md: 24,
-  lg: 34,
-  xl: 42
+  xs: styles.rem(12),
+  sm: styles.rem(18),
+  md: styles.rem(24),
+  lg: styles.rem(34),
+  xl: styles.rem(42)
 };
-var useStyles = styles.createStyles((theme, { size, color, transitionDuration }) => {
-  const sizeValue = theme.fn.size({ size, sizes });
+var useStyles = styles.createStyles((theme, { color, transitionDuration }, { size }) => {
+  const sizeValue = styles.getSize({ size, sizes });
   const _color = color || (theme.colorScheme === "dark" ? theme.white : theme.black);
   return {
     root: {
       borderRadius: theme.radius.sm,
-      width: `calc(${sizeValue}px + ${theme.spacing.xs}px)`,
-      height: `calc(${sizeValue}px + ${theme.spacing.xs}px)`,
-      padding: `calc(${theme.spacing.xs}px / 2)`,
+      width: `calc(${sizeValue} + ${theme.spacing.xs})`,
+      height: `calc(${sizeValue} + ${theme.spacing.xs})`,
+      padding: `calc(${theme.spacing.xs} / 2)`,
       cursor: "pointer"
     },
     burger: {
@@ -29,9 +29,9 @@ var useStyles = styles.createStyles((theme, { size, color, transitionDuration })
       "&, &::before, &::after": {
         display: "block",
         width: sizeValue,
-        height: Math.ceil(sizeValue / 12),
+        height: `calc(${sizeValue} / 12)`,
         backgroundColor: _color,
-        outline: "1px solid transparent",
+        outline: `${styles.rem(1)} solid transparent`,
         transitionProperty: "background-color, transform",
         transitionDuration: `${transitionDuration}ms`,
         "@media (prefers-reduced-motion)": {
@@ -44,18 +44,18 @@ var useStyles = styles.createStyles((theme, { size, color, transitionDuration })
         left: 0
       },
       "&::before": {
-        top: sizeValue / 3 * -1
+        top: `calc((${sizeValue} / 3) * -1)`
       },
       "&::after": {
-        top: sizeValue / 3
+        top: `calc(${sizeValue} / 3)`
       },
       "&[data-opened]": {
         backgroundColor: "transparent",
         "&::before": {
-          transform: `translateY(${sizeValue / 3}px) rotate(45deg)`
+          transform: `translateY(calc(${sizeValue} / 3)) rotate(45deg)`
         },
         "&::after": {
-          transform: `translateY(-${sizeValue / 3}px) rotate(-45deg)`
+          transform: `translateY(calc(-${sizeValue} / 3)) rotate(-45deg)`
         }
       }
     }

package/cjs/Burger/Burger.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Burger.styles.js","sources":["../../src/Burger/Burger.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\n\nexport interface BurgerStylesParams {\n  size: MantineNumberSize;\n  color: MantineColor;\n  transitionDuration: number;\n}\n\nconst sizes = {\n  xs: 12,\n  sm: 18,\n  md: 24,\n  lg: 34,\n  xl: 42,\n};\n\nexport default createStyles((theme, { size, color, transitionDuration }: BurgerStylesParams) => {\n  const sizeValue = theme.fn.size({ size, sizes });\n  const _color = color || (theme.colorScheme === 'dark' ? theme.white : theme.black);\n\n  return {\n    root: {\n      borderRadius: theme.radius.sm,\n      width: `calc(${sizeValue}px + ${theme.spacing.xs}px)`,\n      height: `calc(${sizeValue}px + ${theme.spacing.xs}px)`,\n      padding: `calc(${theme.spacing.xs}px / 2)`,\n      cursor: 'pointer',\n    },\n\n    burger: {\n      position: 'relative',\n      userSelect: 'none',\n      boxSizing: 'border-box',\n\n      '&, &::before, &::after': {\n        display: 'block',\n        width: sizeValue,\n        height: Math.ceil(sizeValue / 12),\n        backgroundColor: _color,\n        outline: '1px solid transparent',\n        transitionProperty: 'background-color, transform',\n        transitionDuration: `${transitionDuration}ms`,\n\n        '@media (prefers-reduced-motion)': {\n          transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n        },\n      },\n\n      '&::before, &::after': {\n        position: 'absolute',\n        content: '\"\"',\n        left: 0,\n      },\n\n      '&::before': {\n        top: (sizeValue / 3) * -1,\n      },\n\n      '&::after': {\n        top: sizeValue / 3,\n      },\n\n      '&[data-opened]': {\n        backgroundColor: 'transparent',\n\n        '&::before': {\n          transform: `translateY(${sizeValue / 3}px) rotate(45deg)`,\n        },\n\n        '&::after': {\n          transform: `translateY(-${sizeValue / 3}px) rotate(-45deg)`,\n        },\n      },\n    },\n  };\n});\n"],"names":["createStyles"],"mappings":";;;;;;AACA,MAAM,KAAK,GAAG;AACd,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACF,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK;AAC5E,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AACnD,EAAE,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACrF,EAAE,OAAO;AACT,IAAI,IAAI,EAAE;AACV,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACnC,MAAM,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC;AAC3D,MAAM,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC;AAC5D,MAAM,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;AAChD,MAAM,MAAM,EAAE,SAAS;AACvB,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,UAAU,EAAE,MAAM;AACxB,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,wBAAwB,EAAE;AAChC,QAAQ,OAAO,EAAE,OAAO;AACxB,QAAQ,KAAK,EAAE,SAAS;AACxB,QAAQ,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AACzC,QAAQ,eAAe,EAAE,MAAM;AAC/B,QAAQ,OAAO,EAAE,uBAAuB;AACxC,QAAQ,kBAAkB,EAAE,6BAA6B;AACzD,QAAQ,kBAAkB,EAAE,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC;AACrD,QAAQ,iCAAiC,EAAE;AAC3C,UAAU,kBAAkB,EAAE,KAAK,CAAC,oBAAoB,GAAG,KAAK,GAAG,KAAK,CAAC;AACzE,SAAS;AACT,OAAO;AACP,MAAM,qBAAqB,EAAE;AAC7B,QAAQ,QAAQ,EAAE,UAAU;AAC5B,QAAQ,OAAO,EAAE,IAAI;AACrB,QAAQ,IAAI,EAAE,CAAC;AACf,OAAO;AACP,MAAM,WAAW,EAAE;AACnB,QAAQ,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAC/B,OAAO;AACP,MAAM,UAAU,EAAE;AAClB,QAAQ,GAAG,EAAE,SAAS,GAAG,CAAC;AAC1B,OAAO;AACP,MAAM,gBAAgB,EAAE;AACxB,QAAQ,eAAe,EAAE,aAAa;AACtC,QAAQ,WAAW,EAAE;AACrB,UAAU,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,GAAG,CAAC,CAAC,iBAAiB,CAAC;AACnE,SAAS;AACT,QAAQ,UAAU,EAAE;AACpB,UAAU,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,GAAG,CAAC,CAAC,kBAAkB,CAAC;AACrE,SAAS;AACT,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"Burger.styles.js","sources":["../../src/Burger/Burger.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, rem, getSize } from '@mantine/styles';\n\nexport interface BurgerStylesParams {\n  color: MantineColor;\n  transitionDuration: number;\n}\n\nconst sizes = {\n  xs: rem(12),\n  sm: rem(18),\n  md: rem(24),\n  lg: rem(34),\n  xl: rem(42),\n};\n\nexport default createStyles(\n  (theme, { color, transitionDuration }: BurgerStylesParams, { size }) => {\n    const sizeValue = getSize({ size, sizes });\n    const _color = color || (theme.colorScheme === 'dark' ? theme.white : theme.black);\n\n    return {\n      root: {\n        borderRadius: theme.radius.sm,\n        width: `calc(${sizeValue} + ${theme.spacing.xs})`,\n        height: `calc(${sizeValue} + ${theme.spacing.xs})`,\n        padding: `calc(${theme.spacing.xs} / 2)`,\n        cursor: 'pointer',\n      },\n\n      burger: {\n        position: 'relative',\n        userSelect: 'none',\n        boxSizing: 'border-box',\n\n        '&, &::before, &::after': {\n          display: 'block',\n          width: sizeValue,\n          height: `calc(${sizeValue} / 12)`,\n          backgroundColor: _color,\n          outline: `${rem(1)} solid transparent`,\n          transitionProperty: 'background-color, transform',\n          transitionDuration: `${transitionDuration}ms`,\n\n          '@media (prefers-reduced-motion)': {\n            transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n          },\n        },\n\n        '&::before, &::after': {\n          position: 'absolute',\n          content: '\"\"',\n          left: 0,\n        },\n\n        '&::before': {\n          top: `calc((${sizeValue} / 3) * -1)`,\n        },\n\n        '&::after': {\n          top: `calc(${sizeValue} / 3)`,\n        },\n\n        '&[data-opened]': {\n          backgroundColor: 'transparent',\n\n          '&::before': {\n            transform: `translateY(calc(${sizeValue} / 3)) rotate(45deg)`,\n          },\n\n          '&::after': {\n            transform: `translateY(calc(-${sizeValue} / 3)) rotate(-45deg)`,\n          },\n        },\n      },\n    };\n  }\n);\n"],"names":["rem","createStyles","getSize"],"mappings":";;;;;;AACA,MAAM,KAAK,GAAG;AACd,EAAE,EAAE,EAAEA,UAAG,CAAC,EAAE,CAAC;AACb,EAAE,EAAE,EAAEA,UAAG,CAAC,EAAE,CAAC;AACb,EAAE,EAAE,EAAEA,UAAG,CAAC,EAAE,CAAC;AACb,EAAE,EAAE,EAAEA,UAAG,CAAC,EAAE,CAAC;AACb,EAAE,EAAE,EAAEA,UAAG,CAAC,EAAE,CAAC;AACb,CAAC,CAAC;AACF,gBAAeC,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK;AAChF,EAAE,MAAM,SAAS,GAAGC,cAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7C,EAAE,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACrF,EAAE,OAAO;AACT,IAAI,IAAI,EAAE;AACV,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACnC,MAAM,KAAK,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AACxD,MAAM,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,EAAE,SAAS;AACvB,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,UAAU,EAAE,MAAM;AACxB,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,wBAAwB,EAAE;AAChC,QAAQ,OAAO,EAAE,OAAO;AACxB,QAAQ,KAAK,EAAE,SAAS;AACxB,QAAQ,MAAM,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC;AACzC,QAAQ,eAAe,EAAE,MAAM;AAC/B,QAAQ,OAAO,EAAE,CAAC,EAAEF,UAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;AAC9C,QAAQ,kBAAkB,EAAE,6BAA6B;AACzD,QAAQ,kBAAkB,EAAE,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC;AACrD,QAAQ,iCAAiC,EAAE;AAC3C,UAAU,kBAAkB,EAAE,KAAK,CAAC,oBAAoB,GAAG,KAAK,GAAG,KAAK,CAAC;AACzE,SAAS;AACT,OAAO;AACP,MAAM,qBAAqB,EAAE;AAC7B,QAAQ,QAAQ,EAAE,UAAU;AAC5B,QAAQ,OAAO,EAAE,IAAI;AACrB,QAAQ,IAAI,EAAE,CAAC;AACf,OAAO;AACP,MAAM,WAAW,EAAE;AACnB,QAAQ,GAAG,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC;AAC5C,OAAO;AACP,MAAM,UAAU,EAAE;AAClB,QAAQ,GAAG,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;AACrC,OAAO;AACP,MAAM,gBAAgB,EAAE;AACxB,QAAQ,eAAe,EAAE,aAAa;AACtC,QAAQ,WAAW,EAAE;AACrB,UAAU,SAAS,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,oBAAoB,CAAC;AACvE,SAAS;AACT,QAAQ,UAAU,EAAE;AACpB,UAAU,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,qBAAqB,CAAC;AACzE,SAAS;AACT,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}

package/cjs/Button/Button.js

@@ -95,18 +95,16 @@ const _Button = React.forwardRef((props, ref) => {
   const { classes, cx, theme } = Button_styles['default']({
     radius,
     color,
-    size,
     fullWidth,
     compact,
     gradient,
-    variant,
     withLeftIcon: !!leftIcon,
     withRightIcon: !!rightIcon
-  }, { name: "Button", unstyled, classNames, styles: styles$1 });
+  }, { name: "Button", unstyled, classNames, styles: styles$1, variant, size });
   const colors = theme.fn.variant({ color, variant });
   const loader = /* @__PURE__ */ React__default.createElement(Loader.Loader, __spreadValues({
     color: colors.color,
-    size: theme.fn.size({ size, sizes: Button_styles.sizes }).height / 2
+    size: `calc(${styles.getSize({ size, sizes: Button_styles.sizes }).height} / 2)`
   }, loaderProps));
   return /* @__PURE__ */ React__default.createElement(UnstyledButton.UnstyledButton, __spreadValues({
     className: cx(classes.root, className),

package/cjs/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineNumberSize,\n  MantineGradient,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { Loader, LoaderProps } from '../Loader';\nimport { ButtonGroup } from './ButtonGroup/ButtonGroup';\nimport useStyles, { sizes, ButtonVariant, ButtonStylesParams } from './Button.styles';\n\nexport type ButtonStylesNames = Selectors<typeof useStyles>;\n\nexport interface ButtonProps extends DefaultProps<ButtonStylesNames, ButtonStylesParams> {\n  /** Predefined button size */\n  size?: MantineSize;\n\n  /** Button type attribute */\n  type?: 'submit' | 'button' | 'reset';\n\n  /** Button color from theme */\n  color?: MantineColor;\n\n  /** Adds icon before button label  */\n  leftIcon?: React.ReactNode;\n\n  /** Adds icon after button label  */\n  rightIcon?: React.ReactNode;\n\n  /** Sets button width to 100% of parent element */\n  fullWidth?: boolean;\n\n  /** Button border-radius from theme or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Controls button appearance */\n  variant?: ButtonVariant;\n\n  /** Controls gradient settings in gradient variant only */\n  gradient?: MantineGradient;\n\n  /** Set text-transform to uppercase */\n  uppercase?: boolean;\n\n  /** Reduces vertical and horizontal spacing */\n  compact?: boolean;\n\n  /** Indicate loading state */\n  loading?: boolean;\n\n  /** Props spread to Loader component */\n  loaderProps?: LoaderProps;\n\n  /** Loader position relative to button label */\n  loaderPosition?: 'left' | 'right' | 'center';\n\n  /** Button label */\n  children?: React.ReactNode;\n\n  /** Disabled state */\n  disabled?: boolean;\n}\n\nconst defaultProps: Partial<ButtonProps> = {\n  size: 'sm',\n  type: 'button',\n  variant: 'filled',\n  loaderPosition: 'left',\n};\n\nexport const _Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  const {\n    className,\n    size,\n    color,\n    type,\n    disabled,\n    children,\n    leftIcon,\n    rightIcon,\n    fullWidth,\n    variant,\n    radius,\n    uppercase,\n    compact,\n    loading,\n    loaderPosition,\n    loaderProps,\n    gradient,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n  } = useComponentDefaultProps('Button', defaultProps, props);\n\n  const { classes, cx, theme } = useStyles(\n    {\n      radius,\n      color,\n      size,\n      fullWidth,\n      compact,\n      gradient,\n      variant,\n      withLeftIcon: !!leftIcon,\n      withRightIcon: !!rightIcon,\n    },\n    { name: 'Button', unstyled, classNames, styles }\n  );\n\n  const colors = theme.fn.variant({ color, variant });\n\n  const loader = (\n    <Loader\n      color={colors.color}\n      size={theme.fn.size({ size, sizes }).height / 2}\n      {...loaderProps}\n    />\n  );\n\n  return (\n    <UnstyledButton\n      className={cx(classes.root, className)}\n      type={type}\n      disabled={disabled}\n      data-button\n      data-disabled={disabled || undefined}\n      data-loading={loading || undefined}\n      ref={ref}\n      unstyled={unstyled}\n      {...others}\n    >\n      <div className={classes.inner}>\n        {(leftIcon || (loading && loaderPosition === 'left')) && (\n          <span className={cx(classes.icon, classes.leftIcon)}>\n            {loading && loaderPosition === 'left' ? loader : leftIcon}\n          </span>\n        )}\n\n        {loading && loaderPosition === 'center' && (\n          <span className={classes.centerLoader}>{loader}</span>\n        )}\n\n        <span\n          className={classes.label}\n          style={{ textTransform: uppercase ? 'uppercase' : undefined }}\n        >\n          {children}\n        </span>\n\n        {(rightIcon || (loading && loaderPosition === 'right')) && (\n          <span className={cx(classes.icon, classes.rightIcon)}>\n            {loading && loaderPosition === 'right' ? loader : rightIcon}\n          </span>\n        )}\n      </div>\n    </UnstyledButton>\n  );\n}) as any;\n\n_Button.displayName = '@mantine/core/Button';\n_Button.Group = ButtonGroup;\n\nexport const Button = createPolymorphicComponent<\n  'button',\n  ButtonProps,\n  { Group: typeof ButtonGroup }\n>(_Button);\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","Loader","sizes","UnstyledButton","ButtonGroup","createPolymorphicComponent"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineNumberSize,\n  MantineGradient,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n  Variants,\n  getSize,\n} from '@mantine/styles';\nimport { createPolymorphicComponent } from '@mantine/utils';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { Loader, LoaderProps } from '../Loader';\nimport { ButtonGroup } from './ButtonGroup/ButtonGroup';\nimport useStyles, { sizes, ButtonStylesParams } from './Button.styles';\n\nexport type ButtonStylesNames = Selectors<typeof useStyles>;\n\nexport interface ButtonProps extends DefaultProps<ButtonStylesNames, ButtonStylesParams> {\n  /** Predefined button size */\n  size?: MantineSize;\n\n  /** Button type attribute */\n  type?: 'submit' | 'button' | 'reset';\n\n  /** Button color from theme */\n  color?: MantineColor;\n\n  /** Adds icon before button label  */\n  leftIcon?: React.ReactNode;\n\n  /** Adds icon after button label  */\n  rightIcon?: React.ReactNode;\n\n  /** Sets button width to 100% of parent element */\n  fullWidth?: boolean;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n  radius?: MantineNumberSize;\n\n  /** Controls button appearance */\n  variant?: Variants<'filled' | 'outline' | 'light' | 'white' | 'default' | 'subtle' | 'gradient'>;\n\n  /** Controls gradient settings in gradient variant only */\n  gradient?: MantineGradient;\n\n  /** Set text-transform to uppercase */\n  uppercase?: boolean;\n\n  /** Reduces vertical and horizontal spacing */\n  compact?: boolean;\n\n  /** Indicate loading state */\n  loading?: boolean;\n\n  /** Props spread to Loader component */\n  loaderProps?: LoaderProps;\n\n  /** Loader position relative to button label */\n  loaderPosition?: 'left' | 'right' | 'center';\n\n  /** Button label */\n  children?: React.ReactNode;\n\n  /** Disabled state */\n  disabled?: boolean;\n}\n\nconst defaultProps: Partial<ButtonProps> = {\n  size: 'sm',\n  type: 'button',\n  variant: 'filled',\n  loaderPosition: 'left',\n};\n\nexport const _Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  const {\n    className,\n    size,\n    color,\n    type,\n    disabled,\n    children,\n    leftIcon,\n    rightIcon,\n    fullWidth,\n    variant,\n    radius,\n    uppercase,\n    compact,\n    loading,\n    loaderPosition,\n    loaderProps,\n    gradient,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n  } = useComponentDefaultProps('Button', defaultProps, props);\n\n  const { classes, cx, theme } = useStyles(\n    {\n      radius,\n      color,\n      fullWidth,\n      compact,\n      gradient,\n      withLeftIcon: !!leftIcon,\n      withRightIcon: !!rightIcon,\n    },\n    { name: 'Button', unstyled, classNames, styles, variant, size }\n  );\n\n  const colors = theme.fn.variant({ color, variant });\n\n  const loader = (\n    <Loader\n      color={colors.color}\n      size={`calc(${(getSize({ size, sizes }) as any).height} / 2)`}\n      {...loaderProps}\n    />\n  );\n\n  return (\n    <UnstyledButton\n      className={cx(classes.root, className)}\n      type={type}\n      disabled={disabled}\n      data-button\n      data-disabled={disabled || undefined}\n      data-loading={loading || undefined}\n      ref={ref}\n      unstyled={unstyled}\n      {...others}\n    >\n      <div className={classes.inner}>\n        {(leftIcon || (loading && loaderPosition === 'left')) && (\n          <span className={cx(classes.icon, classes.leftIcon)}>\n            {loading && loaderPosition === 'left' ? loader : leftIcon}\n          </span>\n        )}\n\n        {loading && loaderPosition === 'center' && (\n          <span className={classes.centerLoader}>{loader}</span>\n        )}\n\n        <span\n          className={classes.label}\n          style={{ textTransform: uppercase ? 'uppercase' : undefined }}\n        >\n          {children}\n        </span>\n\n        {(rightIcon || (loading && loaderPosition === 'right')) && (\n          <span className={cx(classes.icon, classes.rightIcon)}>\n            {loading && loaderPosition === 'right' ? loader : rightIcon}\n          </span>\n        )}\n      </div>\n    </UnstyledButton>\n  );\n}) as any;\n\n_Button.displayName = '@mantine/core/Button';\n_Button.Group = ButtonGroup;\n\nexport const Button = createPolymorphicComponent<\n  'button',\n  ButtonProps,\n  { Group: typeof ButtonGroup }\n>(_Button);\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","Loader","getSize","sizes","UnstyledButton","ButtonGroup","createPolymorphicComponent"],"mappings":"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"}

package/cjs/Button/Button.styles.js

@@ -24,26 +24,38 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const BUTTON_VARIANTS = [
+  "filled",
+  "outline",
+  "light",
+  "white",
+  "default",
+  "subtle",
+  "gradient"
+];
 const sizes = {
-  xs: { height: Input_styles.sizes.xs, paddingLeft: 14, paddingRight: 14 },
-  sm: { height: Input_styles.sizes.sm, paddingLeft: 18, paddingRight: 18 },
-  md: { height: Input_styles.sizes.md, paddingLeft: 22, paddingRight: 22 },
-  lg: { height: Input_styles.sizes.lg, paddingLeft: 26, paddingRight: 26 },
-  xl: { height: Input_styles.sizes.xl, paddingLeft: 32, paddingRight: 32 },
-  "compact-xs": { height: 22, paddingLeft: 7, paddingRight: 7 },
-  "compact-sm": { height: 26, paddingLeft: 8, paddingRight: 8 },
-  "compact-md": { height: 30, paddingLeft: 10, paddingRight: 10 },
-  "compact-lg": { height: 34, paddingLeft: 12, paddingRight: 12 },
-  "compact-xl": { height: 40, paddingLeft: 14, paddingRight: 14 }
+  xs: { height: Input_styles.sizes.xs, paddingLeft: styles.rem(14), paddingRight: styles.rem(14) },
+  sm: { height: Input_styles.sizes.sm, paddingLeft: styles.rem(18), paddingRight: styles.rem(18) },
+  md: { height: Input_styles.sizes.md, paddingLeft: styles.rem(22), paddingRight: styles.rem(22) },
+  lg: { height: Input_styles.sizes.lg, paddingLeft: styles.rem(26), paddingRight: styles.rem(26) },
+  xl: { height: Input_styles.sizes.xl, paddingLeft: styles.rem(32), paddingRight: styles.rem(32) },
+  "compact-xs": { height: styles.rem(22), paddingLeft: styles.rem(7), paddingRight: styles.rem(7) },
+  "compact-sm": { height: styles.rem(26), paddingLeft: styles.rem(8), paddingRight: styles.rem(8) },
+  "compact-md": { height: styles.rem(30), paddingLeft: styles.rem(10), paddingRight: styles.rem(10) },
+  "compact-lg": { height: styles.rem(34), paddingLeft: styles.rem(12), paddingRight: styles.rem(12) },
+  "compact-xl": { height: styles.rem(40), paddingLeft: styles.rem(14), paddingRight: styles.rem(14) }
 };
 function getSizeStyles({ compact, size, withLeftIcon, withRightIcon }) {
   if (compact) {
     return sizes[`compact-${size}`];
   }
   const _sizes = sizes[size];
+  if (!_sizes) {
+    return {};
+  }
   return __spreadProps(__spreadValues({}, _sizes), {
-    paddingLeft: withLeftIcon ? _sizes.paddingLeft / 1.5 : _sizes.paddingLeft,
-    paddingRight: withRightIcon ? _sizes.paddingRight / 1.5 : _sizes.paddingRight
+    paddingLeft: withLeftIcon ? `calc(${_sizes.paddingLeft}  / 1.5)` : _sizes.paddingLeft,
+    paddingRight: withRightIcon ? `calc(${_sizes.paddingRight}  / 1.5)` : _sizes.paddingRight
   });
 }
 const getWidthStyles = (fullWidth) => ({
@@ -51,42 +63,39 @@ const getWidthStyles = (fullWidth) => ({
   width: fullWidth ? "100%" : "auto"
 });
 function getVariantStyles({ variant, theme, color, gradient }) {
+  if (!BUTTON_VARIANTS.includes(variant)) {
+    return null;
+  }
   const colors = theme.fn.variant({ color, variant, gradient });
   if (variant === "gradient") {
-    return {
+    return __spreadValues({
       border: 0,
       backgroundImage: colors.background,
-      color: colors.color,
-      "&:hover": theme.fn.hover({
-        backgroundSize: "200%"
-      })
-    };
+      color: colors.color
+    }, theme.fn.hover({ backgroundSize: "200%" }));
   }
-  return __spreadValues({
-    border: `1px solid ${colors.border}`,
+  return {
+    border: `${styles.rem(1)} solid ${colors.border}`,
     backgroundColor: colors.background,
-    color: colors.color
-  }, theme.fn.hover({
-    backgroundColor: colors.hover
-  }));
+    color: colors.color,
+    "&:not([data-disabled])": theme.fn.hover({ backgroundColor: colors.hover })
+  };
 }
 var useStyles = styles.createStyles((theme, {
-  color,
-  size,
   radius,
   fullWidth,
   compact,
-  gradient,
-  variant,
   withLeftIcon,
-  withRightIcon
-}) => ({
+  withRightIcon,
+  color,
+  gradient
+}, { variant, size }) => ({
   root: __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSizeStyles({ compact, size, withLeftIcon, withRightIcon })), theme.fn.fontStyles()), theme.fn.focusStyles()), getWidthStyles(fullWidth)), {
     borderRadius: theme.fn.radius(radius),
     fontWeight: 600,
     position: "relative",
     lineHeight: 1,
-    fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
+    fontSize: styles.getSize({ size, sizes: theme.fontSizes }),
     userSelect: "none",
     cursor: "pointer"
   }), getVariantStyles({ variant, theme, color, gradient })), {
@@ -104,17 +113,13 @@ var useStyles = styles.createStyles((theme, {
     },
     "&[data-loading]": {
       pointerEvents: "none",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: -1,
-        left: -1,
-        right: -1,
-        bottom: -1,
+      "&::before": __spreadProps(__spreadValues({
+        content: '""'
+      }, theme.fn.cover(styles.rem(-1))), {
         backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[7], 0.5) : "rgba(255, 255, 255, .5)",
         borderRadius: theme.fn.radius(radius),
         cursor: "not-allowed"
-      }
+      })
     }
   }),
   icon: {
@@ -122,10 +127,10 @@ var useStyles = styles.createStyles((theme, {
     alignItems: "center"
   },
   leftIcon: {
-    marginRight: 10
+    marginRight: theme.spacing.xs
   },
   rightIcon: {
-    marginLeft: 10
+    marginLeft: theme.spacing.xs
   },
   centerLoader: {
     position: "absolute",
@@ -149,6 +154,7 @@ var useStyles = styles.createStyles((theme, {
   }
 }));
 
+exports.BUTTON_VARIANTS = BUTTON_VARIANTS;
 exports.default = useStyles;
 exports.sizes = sizes;
 //# sourceMappingURL=Button.styles.js.map