@mantine/core 2.5.0-alpha.5 → 2.6.0-alpha.1

package/esm/components/Grid/get-responsive-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-responsive-styles.js","sources":["../../../src/components/Grid/get-responsive-styles.ts"],"sourcesContent":["import { getColumnWidth } from './Col';\nimport { MantineTheme } from '../../theme';\n\nexport interface GetResponsiveStyles {\n  uuid: string;\n  breakpoints: readonly ['xs', 'sm', 'md', 'lg', 'xl'];\n  columns: number;\n  grow: boolean;\n  theme: MantineTheme;\n}\n\nexport function getResponsiveStyles({\n  uuid,\n  breakpoints,\n  columns,\n  grow,\n  theme,\n}: GetResponsiveStyles) {\n  const columnSizes = [];\n  for (let index = 0; index < columns; index += 1) {\n    columnSizes.push(index + 1);\n  }\n\n  let mediaQueries = '';\n  let baseStyles = '';\n\n  columnSizes.forEach((columnSpan) => {\n    baseStyles = `${baseStyles} .${uuid}-col-${columnSpan} {\n          flex-basis: ${getColumnWidth(columnSpan, columns)};\n          flex-shrink: 0;\n          max-width:  ${grow ? 'unset' : getColumnWidth(columnSpan, columns)};\n        }`;\n  });\n\n  breakpoints.forEach((breakpoint) => {\n    let colStyles = '';\n\n    columnSizes.forEach((columnSpan) => {\n      colStyles = `${colStyles} .${uuid}-col-${breakpoint}-${columnSpan} {\n          flex-basis: ${getColumnWidth(columnSpan, columns)};\n          flex-shrink: 0;\n          max-width:  ${grow ? 'unset' : getColumnWidth(columnSpan, columns)};\n        }`;\n    });\n\n    mediaQueries = `${mediaQueries} @media (min-width: ${theme.breakpoints[breakpoint]}px) { ${colStyles} }`;\n  });\n\n  mediaQueries = `${baseStyles} ${mediaQueries}`;\n\n  return mediaQueries;\n}\n"],"names":[],"mappings":";;AACO,SAAS,mBAAmB,CAAC;AACpC,EAAE,IAAI;AACN,EAAE,WAAW;AACb,EAAE,OAAO;AACT,EAAE,IAAI;AACN,EAAE,KAAK;AACP,CAAC,EAAE;AACH,EAAE,MAAM,WAAW,GAAG,EAAE,CAAC;AACzB,EAAE,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,IAAI,CAAC,EAAE;AACnD,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AAChC,GAAG;AACH,EAAE,IAAI,YAAY,GAAG,EAAE,CAAC;AACxB,EAAE,IAAI,UAAU,GAAG,EAAE,CAAC;AACtB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK;AACtC,IAAI,UAAU,GAAG,CAAC,EAAE,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAC1D,sBAAsB,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC5D;AACA,sBAAsB,EAAE,IAAI,GAAG,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,GAAG,CAAC,CAAC;AACL,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK;AACtC,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC;AACvB,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK;AACxC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC;AACxE,sBAAsB,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC5D;AACA,sBAAsB,EAAE,IAAI,GAAG,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,KAAK,CAAC,CAAC;AACP,IAAI,YAAY,GAAG,CAAC,EAAE,YAAY,CAAC,oBAAoB,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;AAC7G,GAAG,CAAC,CAAC;AACL,EAAE,YAAY,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AACjD,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}
+{"version":3,"file":"get-responsive-styles.js","sources":["../../../src/components/Grid/get-responsive-styles.ts"],"sourcesContent":["import { MantineTheme, MANTINE_SIZES } from '@mantine/styles';\nimport { getColumnWidth } from './Col';\n\nexport interface GetResponsiveStyles {\n  uuid: string;\n  columns: number;\n  grow: boolean;\n  theme: MantineTheme;\n}\n\nexport function getResponsiveStyles({ uuid, columns, grow, theme }: GetResponsiveStyles) {\n  const columnSizes = [];\n  for (let index = 0; index < columns; index += 1) {\n    columnSizes.push(index + 1);\n  }\n\n  let mediaQueries = '';\n  let baseStyles = '';\n\n  columnSizes.forEach((columnSpan) => {\n    baseStyles = `${baseStyles} .${uuid}-col-${columnSpan} {\n          flex-basis: ${getColumnWidth(columnSpan, columns)};\n          flex-shrink: 0;\n          max-width:  ${grow ? 'unset' : getColumnWidth(columnSpan, columns)};\n        }`;\n  });\n\n  MANTINE_SIZES.forEach((breakpoint) => {\n    let colStyles = '';\n\n    columnSizes.forEach((columnSpan) => {\n      colStyles = `${colStyles} .${uuid}-col-${breakpoint}-${columnSpan} {\n          flex-basis: ${getColumnWidth(columnSpan, columns)};\n          flex-shrink: 0;\n          max-width:  ${grow ? 'unset' : getColumnWidth(columnSpan, columns)};\n        }`;\n    });\n\n    mediaQueries = `${mediaQueries} @media (min-width: ${theme.breakpoints[breakpoint]}px) { ${colStyles} }`;\n  });\n\n  mediaQueries = `${baseStyles} ${mediaQueries}`;\n\n  return mediaQueries;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;AACpE,EAAE,MAAM,WAAW,GAAG,EAAE,CAAC;AACzB,EAAE,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,IAAI,CAAC,EAAE;AACnD,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AAChC,GAAG;AACH,EAAE,IAAI,YAAY,GAAG,EAAE,CAAC;AACxB,EAAE,IAAI,UAAU,GAAG,EAAE,CAAC;AACtB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK;AACtC,IAAI,UAAU,GAAG,CAAC,EAAE,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAC1D,sBAAsB,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC5D;AACA,sBAAsB,EAAE,IAAI,GAAG,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,GAAG,CAAC,CAAC;AACL,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK;AACxC,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC;AACvB,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK;AACxC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC;AACxE,sBAAsB,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC5D;AACA,sBAAsB,EAAE,IAAI,GAAG,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,KAAK,CAAC,CAAC;AACP,IAAI,YAAY,GAAG,CAAC,EAAE,YAAY,CAAC,oBAAoB,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;AAC7G,GAAG,CAAC,CAAC;AACL,EAAE,YAAY,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AACjD,EAAE,OAAO,YAAY,CAAC;AACtB;;;;"}

package/esm/components/Group/Group.js

@@ -1,8 +1,6 @@
 import React, { Children } from 'react';
-import cx from 'clsx';
+import { mergeStyles } from '@mantine/styles';
 import useStyles from './Group.styles.js';
-import { useMantineTheme } from '../../theme/use-mantine-theme/use-mantine-theme.js';
-import { mergeStyles } from '../../theme/utils/merge-styles/merge-styles.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -44,7 +42,6 @@ function Group(_a) {
     spacing = "md",
     direction = "row",
     withGutter = false,
-    themeOverride,
     classNames,
     styles
   } = _b, others = __objRest(_b, [
@@ -58,14 +55,11 @@ function Group(_a) {
     "spacing",
     "direction",
     "withGutter",
-    "themeOverride",
     "classNames",
     "styles"
   ]);
   const count = Children.count(children);
-  const theme = useMantineTheme(themeOverride);
-  const classes = useStyles({
-    theme,
+  const { classes, cx } = useStyles({
     align,
     grow,
     noWrap,

package/esm/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport cx from 'clsx';\nimport { DefaultProps, useMantineTheme, MantineNumberSize, mergeStyles } from '../../theme';\nimport useStyles, { GroupPosition } from './Group.styles';\n\nexport type GroupStylesNames = keyof ReturnType<typeof useStyles>;\n\nexport interface GroupProps\n  extends DefaultProps<GroupStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Defines justify-content property */\n  position?: GroupPosition;\n\n  /** Defined flex-wrap property */\n  noWrap?: boolean;\n\n  /** Defines flex-grow property for each element, true -> 1, false -> 0 */\n  grow?: boolean;\n\n  /** Space between elements */\n  spacing?: MantineNumberSize;\n\n  /** Defines flex-direction property, row for horizontal, column for vertical */\n  direction?: 'row' | 'column';\n\n  /** Defines align-items css property */\n  align?: React.CSSProperties['alignItems'];\n\n  /** Defines padding for the root component */\n  withGutter?: boolean;\n}\n\nexport type { GroupPosition };\n\nexport function Group({\n  className,\n  style,\n  position = 'left',\n  align,\n  children,\n  noWrap = false,\n  grow = false,\n  spacing = 'md',\n  direction = 'row',\n  withGutter = false,\n  themeOverride,\n  classNames,\n  styles,\n  ...others\n}: GroupProps) {\n  const count = Children.count(children);\n  const theme = useMantineTheme(themeOverride);\n  const classes = useStyles(\n    {\n      theme,\n      align,\n      grow,\n      noWrap,\n      spacing,\n      position,\n      direction,\n      count,\n      withGutter,\n    },\n    classNames,\n    'group'\n  );\n\n  const _styles = mergeStyles(classes, styles);\n\n  const items = (Children.toArray(children) as React.ReactElement[]).map((child) =>\n    React.cloneElement(child, {\n      className: cx(classes.child, child.props.className),\n      style: { ...child.props.style, ..._styles.child },\n    })\n  );\n\n  return (\n    <div className={cx(classes.root, className)} style={{ ...style, ..._styles.root }} {...others}>\n      {items}\n    </div>\n  );\n}\n\nGroup.displayName = '@mantine/core/Group';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Group.js","sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { mergeStyles, DefaultProps, MantineNumberSize, ClassNames } from '@mantine/styles';\nimport useStyles, { GroupPosition } from './Group.styles';\n\nexport type GroupStylesNames = ClassNames<typeof useStyles>;\n\nexport interface GroupProps\n  extends DefaultProps<GroupStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Defines justify-content property */\n  position?: GroupPosition;\n\n  /** Defined flex-wrap property */\n  noWrap?: boolean;\n\n  /** Defines flex-grow property for each element, true -> 1, false -> 0 */\n  grow?: boolean;\n\n  /** Space between elements */\n  spacing?: MantineNumberSize;\n\n  /** Defines flex-direction property, row for horizontal, column for vertical */\n  direction?: 'row' | 'column';\n\n  /** Defines align-items css property */\n  align?: React.CSSProperties['alignItems'];\n\n  /** Defines padding for the root component */\n  withGutter?: boolean;\n}\n\nexport function Group({\n  className,\n  style,\n  position = 'left',\n  align,\n  children,\n  noWrap = false,\n  grow = false,\n  spacing = 'md',\n  direction = 'row',\n  withGutter = false,\n  classNames,\n  styles,\n  ...others\n}: GroupProps) {\n  const count = Children.count(children);\n  const { classes, cx } = useStyles(\n    {\n      align,\n      grow,\n      noWrap,\n      spacing,\n      position,\n      direction,\n      count,\n      withGutter,\n    },\n    classNames,\n    'group'\n  );\n\n  const _styles = mergeStyles(classes, styles);\n\n  const items = (Children.toArray(children) as React.ReactElement[]).map((child) =>\n    React.cloneElement(child, {\n      className: cx(classes.child, child.props.className),\n      style: { ...child.props.style, ..._styles.child },\n    })\n  );\n\n  return (\n    <div className={cx(classes.root, className)} style={{ ...style, ..._styles.root }} {...others}>\n      {items}\n    </div>\n  );\n}\n\nGroup.displayName = '@mantine/core/Group';\n"],"names":[],"mappings":"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"}

package/esm/components/Group/Group.styles.js

@@ -1,5 +1,4 @@
-import { createMemoStyles } from '../../theme/create-memo-styles.js';
-import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';
+import { createStyles, getSizeValue } from '@mantine/styles';
 
 const POSITIONS = {
   left: "flex-start",
@@ -7,17 +6,8 @@ const POSITIONS = {
   right: "flex-end",
   apart: "space-between"
 };
-var useStyles = createMemoStyles({
-  root: ({
-    spacing,
-    position,
-    noWrap,
-    direction,
-    theme,
-    grow,
-    align,
-    withGutter
-  }) => ({
+var useStyles = createStyles((theme, { spacing, position, noWrap, direction, grow, align, withGutter, count }) => ({
+  root: {
     display: "flex",
     flexDirection: direction,
     alignItems: align || (direction === "row" ? "center" : grow ? "stretch" : POSITIONS[position]),
@@ -25,13 +15,13 @@ var useStyles = createMemoStyles({
     justifyContent: direction === "row" && POSITIONS[position],
     margin: -1 * getSizeValue({ size: spacing, sizes: theme.spacing }) / 2,
     padding: withGutter ? getSizeValue({ size: spacing, sizes: theme.spacing }) / 2 : 0
-  }),
-  child: ({ grow, spacing, theme, count, direction }) => ({
+  },
+  child: {
     maxWidth: grow && direction === "row" ? `calc(${100 / count}% - ${getSizeValue({ size: spacing, sizes: theme.spacing })}px)` : void 0,
     flexGrow: grow ? 1 : 0,
     margin: getSizeValue({ size: spacing, sizes: theme.spacing }) / 2
-  })
-});
+  }
+}));
 
 export default useStyles;
 //# sourceMappingURL=Group.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Group.styles.js","sources":["../../../src/components/Group/Group.styles.ts"],"sourcesContent":["import React from 'react';\nimport { createMemoStyles, MantineTheme, MantineNumberSize, getSizeValue } from '../../theme';\n\nexport type GroupPosition = 'right' | 'center' | 'left' | 'apart';\n\ninterface GroupStyles {\n  position: GroupPosition;\n  noWrap: boolean;\n  grow: boolean;\n  spacing: MantineNumberSize;\n  withGutter: boolean,\n  direction: 'row' | 'column';\n  theme: MantineTheme;\n  align: React.CSSProperties['alignItems'];\n  count: number;\n}\n\nconst POSITIONS = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  apart: 'space-between',\n};\n\nexport default createMemoStyles({\n  root: ({ spacing,\n    position,\n    noWrap,\n    direction,\n    theme,\n    grow,\n    align,\n    withGutter }: GroupStyles) => ({\n      display: 'flex',\n      flexDirection: direction,\n      alignItems: align || (direction === 'row' ? 'center' : grow ? 'stretch' : POSITIONS[position]),\n      flexWrap: noWrap ? 'nowrap' : 'wrap',\n      justifyContent: direction === 'row' && POSITIONS[position],\n      margin: (-1 * getSizeValue({ size: spacing, sizes: theme.spacing })) / 2,\n      padding: withGutter\n        ? getSizeValue({ size: spacing, sizes: theme.spacing }) / 2\n        : 0,\n  }),\n\n  child: ({ grow, spacing, theme, count, direction }: GroupStyles) => ({\n    maxWidth:\n      grow && direction === 'row'\n        ? `calc(${100 / count}% - ${getSizeValue({ size: spacing, sizes: theme.spacing })}px)`\n        : undefined,\n    flexGrow: grow ? 1 : 0,\n    margin: getSizeValue({ size: spacing, sizes: theme.spacing }) / 2,\n  }),\n});\n"],"names":[],"mappings":";;;AACA,MAAM,SAAS,GAAG;AAClB,EAAE,IAAI,EAAE,YAAY;AACpB,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,KAAK,EAAE,UAAU;AACnB,EAAE,KAAK,EAAE,eAAe;AACxB,CAAC,CAAC;AACF,gBAAe,gBAAgB,CAAC;AAChC,EAAE,IAAI,EAAE,CAAC;AACT,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,UAAU;AACd,GAAG,MAAM;AACT,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,aAAa,EAAE,SAAS;AAC5B,IAAI,UAAU,EAAE,KAAK,KAAK,SAAS,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAClG,IAAI,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM;AACxC,IAAI,cAAc,EAAE,SAAS,KAAK,KAAK,IAAI,SAAS,CAAC,QAAQ,CAAC;AAC9D,IAAI,MAAM,EAAE,CAAC,CAAC,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AAC1E,IAAI,OAAO,EAAE,UAAU,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;AACvF,GAAG,CAAC;AACJ,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM;AAC1D,IAAI,QAAQ,EAAE,IAAI,IAAI,SAAS,KAAK,KAAK,GAAG,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACzI,IAAI,QAAQ,EAAE,IAAI,GAAG,CAAC,GAAG,CAAC;AAC1B,IAAI,MAAM,EAAE,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AACrE,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"Group.styles.js","sources":["../../../src/components/Group/Group.styles.ts"],"sourcesContent":["import React from 'react';\nimport { createStyles, MantineNumberSize, getSizeValue } from '@mantine/styles';\n\nexport type GroupPosition = 'right' | 'center' | 'left' | 'apart';\n\ninterface GroupStyles {\n  position: GroupPosition;\n  noWrap: boolean;\n  grow: boolean;\n  spacing: MantineNumberSize;\n  withGutter: boolean;\n  direction: 'row' | 'column';\n  align: React.CSSProperties['alignItems'];\n  count: number;\n}\n\nconst POSITIONS = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n  apart: 'space-between',\n};\n\nexport default createStyles(\n  (\n    theme,\n    { spacing, position, noWrap, direction, grow, align, withGutter, count }: GroupStyles\n  ) => ({\n    root: {\n      display: 'flex',\n      flexDirection: direction,\n      alignItems:\n        align || (direction === 'row' ? 'center' : grow ? 'stretch' : POSITIONS[position]),\n      flexWrap: noWrap ? 'nowrap' : 'wrap',\n      justifyContent: direction === 'row' && POSITIONS[position],\n      margin: (-1 * getSizeValue({ size: spacing, sizes: theme.spacing })) / 2,\n      padding: withGutter ? getSizeValue({ size: spacing, sizes: theme.spacing }) / 2 : 0,\n    },\n\n    child: {\n      maxWidth:\n        grow && direction === 'row'\n          ? `calc(${100 / count}% - ${getSizeValue({ size: spacing, sizes: theme.spacing })}px)`\n          : undefined,\n      flexGrow: grow ? 1 : 0,\n      margin: getSizeValue({ size: spacing, sizes: theme.spacing }) / 2,\n    },\n  })\n);\n"],"names":[],"mappings":";;AACA,MAAM,SAAS,GAAG;AAClB,EAAE,IAAI,EAAE,YAAY;AACpB,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,KAAK,EAAE,UAAU;AACnB,EAAE,KAAK,EAAE,eAAe;AACxB,CAAC,CAAC;AACF,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM;AAClH,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,aAAa,EAAE,SAAS;AAC5B,IAAI,UAAU,EAAE,KAAK,KAAK,SAAS,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAClG,IAAI,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM;AACxC,IAAI,cAAc,EAAE,SAAS,KAAK,KAAK,IAAI,SAAS,CAAC,QAAQ,CAAC;AAC9D,IAAI,MAAM,EAAE,CAAC,CAAC,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AAC1E,IAAI,OAAO,EAAE,UAAU,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;AACvF,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,IAAI,IAAI,SAAS,KAAK,KAAK,GAAG,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACzI,IAAI,QAAQ,EAAE,IAAI,GAAG,CAAC,GAAG,CAAC;AAC1B,IAAI,MAAM,EAAE,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;AACrE,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/esm/components/Highlight/Highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"Highlight.js","sources":["../../../src/components/Highlight/Highlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { Text, SharedTextProps } from '../Text/Text';\nimport { Mark } from '../Mark/Mark';\n\nexport function highlighter(value: string, highlight: string | string[]) {\n  const shouldHighlight = Array.isArray(highlight)\n    ? highlight.filter((part) => part.trim().length > 0).length > 0\n    : highlight.trim() !== '';\n\n  if (!shouldHighlight) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const matcher =\n    typeof highlight === 'string'\n      ? highlight.trim()\n      : highlight\n          .filter((part) => part.trim().length !== 0)\n          .map((part) => part.trim())\n          .join('|');\n\n  const re = new RegExp(`(${matcher})`, 'gi');\n  const chunks = value\n    .split(re)\n    .map((part) => ({ chunk: part, highlighted: re.test(part) }))\n    .filter(({ chunk }) => chunk);\n\n  return chunks;\n}\n\ninterface _HighlightProps<C extends React.ElementType, R extends HTMLElement>\n  extends SharedTextProps {\n  /** Root element or custom component */\n  component?: C;\n\n  /** Get element ref */\n  elementRef?: React.ForwardedRef<R>;\n\n  /** Substring or an array of substrings to highlight in children */\n  highlight: string | string[];\n\n  /** Color from theme that is used for highlighting */\n  highlightColor?: string;\n\n  /** Full string part of which will be highlighted */\n  children: string;\n}\n\nexport type HighlightProps<\n  C extends React.ElementType = 'div',\n  R extends HTMLElement = HTMLDivElement\n> = _HighlightProps<C, R> & Omit<React.ComponentPropsWithoutRef<C>, keyof _HighlightProps<C, R>>;\n\nexport function Highlight<\n  C extends React.ElementType = 'div',\n  R extends HTMLElement = HTMLDivElement\n>({ children, highlight, highlightColor = 'yellow', className, ...others }: HighlightProps<C, R>) {\n  const highlightChunks = highlighter(children, highlight);\n\n  return (\n    <Text className={cx('mantine-highlight', className)} {...others}>\n      {highlightChunks.map(({ chunk, highlighted }, i) =>\n        highlighted ? (\n          <Mark key={i} color={highlightColor}>\n            {chunk}\n          </Mark>\n        ) : (\n          <span key={i}>{chunk}</span>\n        )\n      )}\n    </Text>\n  );\n}\n\nHighlight.displayName = '@mantine/core/Highlight';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Highlight.js","sources":["../../../src/components/Highlight/Highlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { MantineColor } from '@mantine/styles';\nimport { Text, SharedTextProps } from '../Text/Text';\nimport { Mark } from '../Mark/Mark';\n\nexport function highlighter(value: string, highlight: string | string[]) {\n  const shouldHighlight = Array.isArray(highlight)\n    ? highlight.filter((part) => part.trim().length > 0).length > 0\n    : highlight.trim() !== '';\n\n  if (!shouldHighlight) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const matcher =\n    typeof highlight === 'string'\n      ? highlight.trim()\n      : highlight\n          .filter((part) => part.trim().length !== 0)\n          .map((part) => part.trim())\n          .join('|');\n\n  const re = new RegExp(`(${matcher})`, 'gi');\n  const chunks = value\n    .split(re)\n    .map((part) => ({ chunk: part, highlighted: re.test(part) }))\n    .filter(({ chunk }) => chunk);\n\n  return chunks;\n}\n\ninterface _HighlightProps<C extends React.ElementType, R extends HTMLElement>\n  extends SharedTextProps {\n  /** Root element or custom component */\n  component?: C;\n\n  /** Get element ref */\n  elementRef?: React.ForwardedRef<R>;\n\n  /** Substring or an array of substrings to highlight in children */\n  highlight: string | string[];\n\n  /** Color from theme that is used for highlighting */\n  highlightColor?: MantineColor;\n\n  /** Full string part of which will be highlighted */\n  children: string;\n}\n\nexport type HighlightProps<\n  C extends React.ElementType = 'div',\n  R extends HTMLElement = HTMLDivElement\n> = _HighlightProps<C, R> & Omit<React.ComponentPropsWithoutRef<C>, keyof _HighlightProps<C, R>>;\n\nexport function Highlight<\n  C extends React.ElementType = 'div',\n  R extends HTMLElement = HTMLDivElement\n>({ children, highlight, highlightColor = 'yellow', className, ...others }: HighlightProps<C, R>) {\n  const highlightChunks = highlighter(children, highlight);\n\n  return (\n    <Text className={cx('mantine-highlight', className)} {...others}>\n      {highlightChunks.map(({ chunk, highlighted }, i) =>\n        highlighted ? (\n          <Mark key={i} color={highlightColor}>\n            {chunk}\n          </Mark>\n        ) : (\n          <span key={i}>{chunk}</span>\n        )\n      )}\n    </Text>\n  );\n}\n\nHighlight.displayName = '@mantine/core/Highlight';\n"],"names":[],"mappings":"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"}

package/esm/components/Image/Image.js

@@ -1,10 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
-import cx from 'clsx';
+import { mergeStyles } from '@mantine/styles';
 import { Text } from '../Text/Text.js';
 import { ImageIcon } from './ImageIcon.js';
 import useStyles from './Image.styles.js';
-import { useMantineTheme } from '../../theme/use-mantine-theme/use-mantine-theme.js';
-import { mergeStyles } from '../../theme/utils/merge-styles/merge-styles.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -41,7 +39,6 @@ function Image(_a) {
   var _b = _a, {
     className,
     style,
-    themeOverride,
     alt,
     src,
     fit = "cover",
@@ -59,7 +56,6 @@ function Image(_a) {
   } = _b, others = __objRest(_b, [
     "className",
     "style",
-    "themeOverride",
     "alt",
     "src",
     "fit",
@@ -75,8 +71,7 @@ function Image(_a) {
     "styles",
     "caption"
   ]);
-  const theme = useMantineTheme(themeOverride);
-  const classes = useStyles({ radius, theme }, classNames, "image");
+  const { classes, cx } = useStyles({ radius }, classNames, "image");
   const _styles = mergeStyles(classes, styles);
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState(!src);

package/esm/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { DefaultProps, useMantineTheme, MantineNumberSize, mergeStyles } from '../../theme';\nimport { Text } from '../Text/Text';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles from './Image.styles';\n\nexport type ImageStylesNames = keyof ReturnType<typeof useStyles>;\n\nexport interface ImageProps\n  extends DefaultProps<ImageStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n  /** Image src */\n  src?: string;\n\n  /** Image alt text, used as title for placeholder if image was not loaded */\n  alt?: string;\n\n  /** Image object-fit property */\n  fit?: 'contain' | 'cover';\n\n  /** Image width, defaults to 100%, cannot exceed 100% */\n  width?: number | string;\n\n  /** Image height, defaults to original image height adjusted to given width */\n  height?: number | string;\n\n  /** Predefined border-radius value from theme.radius or number for border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Enable placeholder when image is loading and when image fails to load */\n  withPlaceholder?: boolean;\n\n  /** Customize placeholder content */\n  placeholder?: React.ReactNode;\n\n  /** Props spread to img element */\n  imageProps?: Record<string, any>;\n\n  /** Get root element ref */\n  elementRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Get image element ref */\n  imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n  /** Image figcaption, displayed bellow image */\n  caption?: React.ReactNode;\n}\n\nexport function Image({\n  className,\n  style,\n  themeOverride,\n  alt,\n  src,\n  fit = 'cover',\n  width = '100%',\n  height = 'auto',\n  radius = 0,\n  imageProps,\n  withPlaceholder = false,\n  placeholder,\n  imageRef,\n  elementRef,\n  classNames,\n  styles,\n  caption,\n  ...others\n}: ImageProps) {\n  const theme = useMantineTheme(themeOverride);\n  const classes = useStyles({ radius, theme }, classNames, 'image');\n  const _styles = mergeStyles(classes, styles);\n  const [loaded, setLoaded] = useState(false);\n  const [error, setError] = useState(!src);\n  const isPlaceholder = withPlaceholder && (!loaded || error);\n  const firstUpdate = useRef(true);\n\n  useEffect(() => {\n    if (firstUpdate.current) {\n      firstUpdate.current = false;\n    } else {\n      setLoaded(false);\n      setError(false);\n    }\n  }, [src]);\n\n  return (\n    <div\n      className={cx(classes.root, className)}\n      style={{ width, height, ...style, ..._styles.root }}\n      ref={elementRef}\n      {...others}\n    >\n      {isPlaceholder && (\n        <div className={classes.placeholder} title={alt} style={_styles.placeholder}>\n          {placeholder || <ImageIcon style={{ width: 40, height: 40 }} />}\n        </div>\n      )}\n\n      <figure className={classes.figure}>\n        <img\n          className={classes.image}\n          src={src}\n          alt={alt}\n          style={{ ..._styles.image, objectFit: fit }}\n          ref={imageRef}\n          onLoad={(event) => {\n            setLoaded(true);\n            typeof imageProps?.onLoad === 'function' && imageProps.onLoad(event);\n          }}\n          onError={(event) => {\n            setError(true);\n            typeof imageProps?.onError === 'function' && imageProps.onError(event);\n          }}\n          {...imageProps}\n        />\n\n        {!!caption && (\n          <Text\n            component=\"figcaption\"\n            size=\"sm\"\n            align=\"center\"\n            className={classes.caption}\n            style={_styles.caption}\n          >\n            {caption}\n          </Text>\n        )}\n      </figure>\n    </div>\n  );\n}\n\nImage.displayName = '@mantine/core/Image';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { mergeStyles, DefaultProps, MantineNumberSize, ClassNames } from '@mantine/styles';\nimport { Text } from '../Text/Text';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles from './Image.styles';\n\nexport type ImageStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ImageProps\n  extends DefaultProps<ImageStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n  /** Image src */\n  src?: string;\n\n  /** Image alt text, used as title for placeholder if image was not loaded */\n  alt?: string;\n\n  /** Image object-fit property */\n  fit?: 'contain' | 'cover';\n\n  /** Image width, defaults to 100%, cannot exceed 100% */\n  width?: number | string;\n\n  /** Image height, defaults to original image height adjusted to given width */\n  height?: number | string;\n\n  /** Predefined border-radius value from theme.radius or number for border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Enable placeholder when image is loading and when image fails to load */\n  withPlaceholder?: boolean;\n\n  /** Customize placeholder content */\n  placeholder?: React.ReactNode;\n\n  /** Props spread to img element */\n  imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n  /** Get root element ref */\n  elementRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Get image element ref */\n  imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n  /** Image figcaption, displayed bellow image */\n  caption?: React.ReactNode;\n}\n\nexport function Image({\n  className,\n  style,\n  alt,\n  src,\n  fit = 'cover',\n  width = '100%',\n  height = 'auto',\n  radius = 0,\n  imageProps,\n  withPlaceholder = false,\n  placeholder,\n  imageRef,\n  elementRef,\n  classNames,\n  styles,\n  caption,\n  ...others\n}: ImageProps) {\n  const { classes, cx } = useStyles({ radius }, classNames, 'image');\n  const _styles = mergeStyles(classes, styles);\n  const [loaded, setLoaded] = useState(false);\n  const [error, setError] = useState(!src);\n  const isPlaceholder = withPlaceholder && (!loaded || error);\n  const firstUpdate = useRef(true);\n\n  useEffect(() => {\n    if (firstUpdate.current) {\n      firstUpdate.current = false;\n    } else {\n      setLoaded(false);\n      setError(false);\n    }\n  }, [src]);\n\n  return (\n    <div\n      className={cx(classes.root, className)}\n      style={{ width, height, ...style, ..._styles.root }}\n      ref={elementRef}\n      {...others}\n    >\n      {isPlaceholder && (\n        <div className={classes.placeholder} title={alt} style={_styles.placeholder}>\n          {placeholder || <ImageIcon style={{ width: 40, height: 40 }} />}\n        </div>\n      )}\n\n      <figure className={classes.figure}>\n        <img\n          className={classes.image}\n          src={src}\n          alt={alt}\n          style={{ ..._styles.image, objectFit: fit }}\n          ref={imageRef}\n          onLoad={(event) => {\n            setLoaded(true);\n            typeof imageProps?.onLoad === 'function' && imageProps.onLoad(event);\n          }}\n          onError={(event) => {\n            setError(true);\n            typeof imageProps?.onError === 'function' && imageProps.onError(event);\n          }}\n          {...imageProps}\n        />\n\n        {!!caption && (\n          <Text\n            component=\"figcaption\"\n            size=\"sm\"\n            align=\"center\"\n            className={classes.caption}\n            style={_styles.caption}\n          >\n            {caption}\n          </Text>\n        )}\n      </figure>\n    </div>\n  );\n}\n\nImage.displayName = '@mantine/core/Image';\n"],"names":[],"mappings":"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"}

package/esm/components/Image/Image.styles.js

@@ -1,6 +1,4 @@
-import { createMemoStyles } from '../../theme/create-memo-styles.js';
-import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';
-import { getFontStyles } from '../../theme/utils/get-font-styles/get-font-styles.js';
+import { createStyles, getSizeValue, getFontStyles } from '@mantine/styles';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -21,26 +19,26 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var useStyles = createMemoStyles({
+var useStyles = createStyles((theme, { radius }) => ({
   root: {
     position: "relative",
-    overflow: "hidden"
+    overflow: "hidden",
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius })
   },
   figure: {
     margin: 0
   },
-  image: ({ theme, radius }) => __spreadProps(__spreadValues({}, getFontStyles(theme)), {
+  image: __spreadProps(__spreadValues({}, getFontStyles(theme)), {
     display: "block",
     width: "100%",
     height: "100%",
-    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
     border: 0
   }),
-  caption: ({ theme }) => ({
+  caption: {
     color: theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[7],
-    marginTop: theme.spacing.xs / 2
-  }),
-  placeholder: ({ theme, radius }) => ({
+    marginTop: theme.spacing.xs
+  },
+  placeholder: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -54,8 +52,8 @@ var useStyles = createMemoStyles({
     left: 0,
     right: 0,
     bottom: 0
-  })
-});
+  }
+}));
 
 export default useStyles;
 //# sourceMappingURL=Image.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.styles.js","sources":["../../../src/components/Image/Image.styles.ts"],"sourcesContent":["import {\n  createMemoStyles,\n  MantineTheme,\n  MantineNumberSize,\n  getSizeValue,\n  getFontStyles,\n} from '../../theme';\n\ninterface ImageStyles {\n  theme: MantineTheme;\n  radius: MantineNumberSize;\n}\n\nexport default createMemoStyles({\n  root: {\n    position: 'relative',\n    overflow: 'hidden',\n  },\n\n  figure: {\n    margin: 0,\n  },\n\n  image: ({ theme, radius }: ImageStyles) => ({\n    ...getFontStyles(theme),\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),\n    border: 0,\n  }),\n\n  caption: ({ theme }: ImageStyles) => ({\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[7],\n    marginTop: theme.spacing.xs / 2,\n  }),\n\n  placeholder: ({ theme, radius }: ImageStyles) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    width: '100%',\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n    position: 'absolute',\n    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  }),\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.styles.js","sources":["../../../src/components/Image/Image.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSizeValue, getFontStyles } from '@mantine/styles';\n\ninterface ImageStyles {\n  radius: MantineNumberSize;\n}\n\nexport default createStyles((theme, { radius }: ImageStyles) => ({\n  root: {\n    position: 'relative',\n    overflow: 'hidden',\n    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),\n  },\n\n  figure: {\n    margin: 0,\n  },\n\n  image: {\n    ...getFontStyles(theme),\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    border: 0,\n  },\n\n  caption: {\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[7],\n    marginTop: theme.spacing.xs,\n  },\n\n  placeholder: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    width: '100%',\n    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n    position: 'absolute',\n    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n}));\n"],"names":[],"mappings":"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"}

package/esm/components/Input/Input.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import cx from 'clsx';
-import useStyles, { sizes } from './Input.styles.js';
-import { useMantineTheme } from '../../theme/use-mantine-theme/use-mantine-theme.js';
-import { mergeStyles } from '../../theme/utils/merge-styles/merge-styles.js';
+import { useMantineTheme, mergeStyles } from '@mantine/styles';
+import useStyles from './Input.styles.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -35,8 +33,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const INPUT_VARIANTS = ["default", "filled", "unstyled", "headless"];
-const INPUT_SIZES = sizes;
 function Input(_a) {
   var _b = _a, {
     component = "input",
@@ -52,7 +48,6 @@ function Input(_a) {
     rightSectionProps = {},
     radius = "sm",
     size = "sm",
-    themeOverride,
     wrapperProps,
     elementRef,
     classNames,
@@ -73,7 +68,6 @@ function Input(_a) {
     "rightSectionProps",
     "radius",
     "size",
-    "themeOverride",
     "wrapperProps",
     "elementRef",
     "classNames",
@@ -81,9 +75,9 @@ function Input(_a) {
     "__staticSelector",
     "multiline"
   ]);
-  const theme = useMantineTheme(themeOverride);
+  const theme = useMantineTheme();
   const _variant = variant || (theme.colorScheme === "dark" ? "filled" : "default");
-  const classes = useStyles({ radius, theme, size, multiline, variant: _variant, invalid, disabled }, classNames, __staticSelector);
+  const { classes, cx } = useStyles({ radius, size, multiline, variant: _variant, invalid, disabled }, classNames, __staticSelector);
   const _styles = mergeStyles(classes, styles);
   const Element = component;
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
@@ -108,5 +102,5 @@ function Input(_a) {
 }
 Input.displayName = "@mantine/core/Input";
 
-export { INPUT_SIZES, INPUT_VARIANTS, Input };
+export { Input };
 //# sourceMappingURL=Input.js.map

package/esm/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n  DefaultProps,\n  useMantineTheme,\n  MantineNumberSize,\n  mergeStyles,\n  MantineSize,\n} from '../../theme';\nimport useStyles, { sizes } from './Input.styles';\n\nexport const INPUT_VARIANTS = ['default', 'filled', 'unstyled', 'headless'] as const;\nexport const INPUT_SIZES = sizes;\nexport type InputVariant = typeof INPUT_VARIANTS[number];\nexport type InputStylesNames = Exclude<keyof ReturnType<typeof useStyles>, InputVariant>;\n\nexport interface InputBaseProps {\n  /** Sets border color to red and aria-invalid=true on input element */\n  invalid?: boolean;\n\n  /** Adds icon on the left side of input */\n  icon?: React.ReactNode;\n\n  /** Right section of input, similar to icon but on the right */\n  rightSection?: React.ReactNode;\n\n  /** Width of right section, is used to calculate input padding-right */\n  rightSectionWidth?: number;\n\n  /** Props spread to rightSection div element */\n  rightSectionProps?: Record<string, any>;\n\n  /** Properties spread to root element */\n  wrapperProps?: Record<string, any>;\n\n  /** Sets aria-required=true on input element */\n  required?: boolean;\n\n  /** Input border-radius from theme or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Defines input appearance, defaults to default in light color scheme and filled in dark */\n  variant?: 'default' | 'filled' | 'unstyled' | 'headless';\n\n  /** Will input have multiple lines? */\n  multiline?: boolean;\n\n  /** Disabled input state */\n  disabled?: boolean;\n}\n\nexport interface InputProps extends InputBaseProps, DefaultProps<InputStylesNames> {\n  /** Static css selector base */\n  __staticSelector?: string;\n}\n\nexport function Input<\n  T extends React.ElementType = 'input',\n  U extends HTMLElement = HTMLInputElement\n>({\n  // @ts-ignore\n  component = 'input',\n  className,\n  invalid = false,\n  required = false,\n  disabled = false,\n  variant,\n  icon,\n  style,\n  rightSectionWidth = 36,\n  rightSection,\n  rightSectionProps = {},\n  radius = 'sm',\n  size = 'sm',\n  themeOverride,\n  wrapperProps,\n  elementRef,\n  classNames,\n  styles,\n  __staticSelector = 'input',\n  multiline = false,\n  ...others\n}: InputProps &\n  Omit<React.ComponentPropsWithoutRef<T>, 'size'> & {\n    /** Element or component that will be used as root element */\n    component?: T;\n\n    /** Input size */\n    size?: MantineSize;\n\n    /** Get element ref */\n    elementRef?: React.ForwardedRef<U>;\n  }) {\n  const theme = useMantineTheme(themeOverride);\n  const _variant = variant || (theme.colorScheme === 'dark' ? 'filled' : 'default');\n  const classes = useStyles(\n    { radius, theme, size, multiline, variant: _variant, invalid, disabled },\n    classNames,\n    __staticSelector\n  );\n  const _styles = mergeStyles(classes, styles);\n  const Element: any = component;\n\n  return (\n    <div\n      className={cx(classes.root, classes[_variant], className)}\n      style={{\n        ...style,\n        ..._styles.root,\n        ..._styles[variant],\n      }}\n      {...wrapperProps}\n    >\n      {icon && (\n        <div className={classes.icon} style={_styles.icon}>\n          {icon}\n        </div>\n      )}\n\n      <Element\n        {...others}\n        ref={elementRef}\n        aria-required={required}\n        aria-invalid={invalid}\n        className={cx({ [classes.withIcon]: icon }, classes.input)}\n        disabled={disabled}\n        style={{\n          paddingRight: rightSection ? rightSectionWidth : theme.spacing.md,\n          ..._styles.input,\n          ...(icon ? _styles.withIcon : null),\n        }}\n      />\n\n      {rightSection && (\n        <div\n          {...rightSectionProps}\n          style={{ ..._styles.rightSection, width: rightSectionWidth }}\n          className={classes.rightSection}\n        >\n          {rightSection}\n        </div>\n      )}\n    </div>\n  );\n}\n\nInput.displayName = '@mantine/core/Input';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useMantineTheme,\n  mergeStyles,\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  ClassNames,\n} from '@mantine/styles';\nimport useStyles from './Input.styles';\n\nexport type InputVariant = 'default' | 'filled' | 'unstyled' | 'headless';\nexport type InputStylesNames = Exclude<ClassNames<typeof useStyles>, InputVariant>;\n\nexport interface InputBaseProps {\n  /** Sets border color to red and aria-invalid=true on input element */\n  invalid?: boolean;\n\n  /** Adds icon on the left side of input */\n  icon?: React.ReactNode;\n\n  /** Right section of input, similar to icon but on the right */\n  rightSection?: React.ReactNode;\n\n  /** Width of right section, is used to calculate input padding-right */\n  rightSectionWidth?: number;\n\n  /** Props spread to rightSection div element */\n  rightSectionProps?: React.ComponentPropsWithoutRef<'div'>;\n\n  /** Properties spread to root element */\n  wrapperProps?: React.ComponentPropsWithoutRef<'div'> & { [key: string]: any };\n\n  /** Sets aria-required=true on input element */\n  required?: boolean;\n\n  /** Input border-radius from theme or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Defines input appearance, defaults to default in light color scheme and filled in dark */\n  variant?: InputVariant;\n\n  /** Will input have multiple lines? */\n  multiline?: boolean;\n\n  /** Disabled input state */\n  disabled?: boolean;\n}\n\nexport interface InputProps extends InputBaseProps, DefaultProps<InputStylesNames> {\n  /** Static css selector base */\n  __staticSelector?: string;\n}\n\nexport function Input<\n  T extends React.ElementType = 'input',\n  U extends HTMLElement = HTMLInputElement\n>({\n  // @ts-ignore\n  component = 'input',\n  className,\n  invalid = false,\n  required = false,\n  disabled = false,\n  variant,\n  icon,\n  style,\n  rightSectionWidth = 36,\n  rightSection,\n  rightSectionProps = {},\n  radius = 'sm',\n  size = 'sm',\n  wrapperProps,\n  elementRef,\n  classNames,\n  styles,\n  __staticSelector = 'input',\n  multiline = false,\n  ...others\n}: InputProps &\n  Omit<React.ComponentPropsWithoutRef<T>, 'size'> & {\n    /** Element or component that will be used as root element */\n    component?: T;\n\n    /** Input size */\n    size?: MantineSize;\n\n    /** Get element ref */\n    elementRef?: React.ForwardedRef<U>;\n  }) {\n  const theme = useMantineTheme();\n  const _variant = variant || (theme.colorScheme === 'dark' ? 'filled' : 'default');\n  const { classes, cx } = useStyles(\n    { radius, size, multiline, variant: _variant, invalid, disabled },\n    classNames,\n    __staticSelector\n  );\n  const _styles = mergeStyles(classes, styles);\n  const Element: any = component;\n\n  return (\n    <div\n      className={cx(classes.root, classes[_variant], className)}\n      style={{\n        ...style,\n        ..._styles.root,\n        ..._styles[variant],\n      }}\n      {...wrapperProps}\n    >\n      {icon && (\n        <div className={classes.icon} style={_styles.icon}>\n          {icon}\n        </div>\n      )}\n\n      <Element\n        {...others}\n        ref={elementRef}\n        aria-required={required}\n        aria-invalid={invalid}\n        className={cx({ [classes.withIcon]: icon }, classes.input)}\n        disabled={disabled}\n        style={{\n          paddingRight: rightSection ? rightSectionWidth : theme.spacing.md,\n          ..._styles.input,\n          ...(icon ? _styles.withIcon : null),\n        }}\n      />\n\n      {rightSection && (\n        <div\n          {...rightSectionProps}\n          style={{ ..._styles.rightSection, width: rightSectionWidth }}\n          className={classes.rightSection}\n        >\n          {rightSection}\n        </div>\n      )}\n    </div>\n  );\n}\n\nInput.displayName = '@mantine/core/Input';\n"],"names":[],"mappings":"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"}

package/esm/components/Input/Input.styles.js

@@ -1,6 +1,4 @@
-import { createMemoStyles } from '../../theme/create-memo-styles.js';
-import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';
-import { getFontStyles } from '../../theme/utils/get-font-styles/get-font-styles.js';
+import { createStyles, getSizeValue, getFontStyles } from '@mantine/styles';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -92,31 +90,28 @@ function getInvalidStyles({ invalid, theme }) {
     }
   };
 }
-var useStyles = createMemoStyles({
-  root: ({ radius, theme }) => ({
-    position: "relative",
+var useStyles = createStyles((theme, { size, multiline, radius, variant, invalid, disabled }) => {
+  const sizeStyles = variant === "default" || variant === "filled" ? {
+    minHeight: getSizeValue({ size, sizes }),
+    paddingLeft: getSizeValue({ size, sizes }) / 3,
+    paddingRight: getSizeValue({ size, sizes }) / 3,
     borderRadius: getSizeValue({ size: radius, sizes: theme.radius })
-  }),
-  input: ({ theme, size, multiline, radius, variant, invalid, disabled }) => {
-    if (variant === "headless") {
-      return {};
+  } : null;
+  const disabledStyles = disabled ? {
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1],
+    color: theme.colors.dark[2],
+    opacity: 0.6,
+    cursor: "not-allowed",
+    "&::placeholder": {
+      color: theme.colors.dark[2]
     }
-    const sizeStyles = variant === "default" || variant === "filled" ? {
-      minHeight: getSizeValue({ size, sizes }),
-      paddingLeft: getSizeValue({ size, sizes }) / 3,
-      paddingRight: getSizeValue({ size, sizes }) / 3,
+  } : null;
+  return {
+    root: {
+      position: "relative",
       borderRadius: getSizeValue({ size: radius, sizes: theme.radius })
-    } : null;
-    const disabledStyles = disabled ? {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1],
-      color: theme.colors.dark[2],
-      opacity: 0.6,
-      cursor: "not-allowed",
-      "&::placeholder": {
-        color: theme.colors.dark[2]
-      }
-    } : null;
-    return __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, getFontStyles(theme)), getVariantStyles({ variant, theme })), {
+    },
+    input: variant === "headless" ? {} : __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, getFontStyles(theme)), getVariantStyles({ variant, theme })), {
       height: multiline ? variant === "unstyled" ? void 0 : "auto" : getSizeValue({ size, sizes }),
       WebkitTapHighlightColor: "transparent",
       lineHeight: multiline ? theme.lineHeight : `${getSizeValue({ size, sizes }) - 2}px`,
@@ -149,32 +144,32 @@ var useStyles = createMemoStyles({
       "&[type=number]": {
         MozAppearance: "textfield"
       }
-    }), getInvalidStyles({ invalid, theme }));
-  },
-  withIcon: ({ size }) => ({
-    paddingLeft: getSizeValue({ size, sizes })
-  }),
-  icon: ({ theme, size, invalid }) => ({
-    pointerEvents: "none",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: getSizeValue({ size, sizes }),
-    color: invalid ? theme.colors.red[theme.colorScheme === "dark" ? 6 : 7] : theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[5]
-  }),
-  rightSection: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }
+    }), getInvalidStyles({ invalid, theme })),
+    withIcon: {
+      paddingLeft: `${getSizeValue({ size, sizes })}px !important`
+    },
+    icon: {
+      pointerEvents: "none",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: getSizeValue({ size, sizes }),
+      color: invalid ? theme.colors.red[theme.colorScheme === "dark" ? 6 : 7] : theme.colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[5]
+    },
+    rightSection: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      right: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  };
 });
 
 export default useStyles;