@mantine/core 5.10.1 → 6.0.0-alpha.0

package/cjs/Slider/Thumb/Thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.js","sources":["../../../src/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Transition, MantineTransition } from '../../Transition';\nimport useStyles from './Thumb.styles';\n\nexport type ThumbStylesNames = Selectors<typeof useStyles>;\n\nexport interface ThumbProps extends DefaultProps<ThumbStylesNames> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  color: MantineColor;\n  size: MantineNumberSize;\n  label: React.ReactNode;\n  onMouseDown(event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>): void;\n  labelTransition?: MantineTransition;\n  labelTransitionDuration?: number;\n  labelTransitionTimingFunction?: string;\n  labelAlwaysOn: boolean;\n  thumbLabel: string;\n  onFocus?(): void;\n  onBlur?(): void;\n  showLabelOnHover?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean;\n  thumbSize: number;\n}\n\nexport const Thumb = forwardRef<HTMLDivElement, ThumbProps>(\n  (\n    {\n      max,\n      min,\n      value,\n      position,\n      label,\n      dragging,\n      onMouseDown,\n      color,\n      classNames,\n      styles,\n      size,\n      labelTransition,\n      labelTransitionDuration,\n      labelTransitionTimingFunction,\n      labelAlwaysOn,\n      thumbLabel,\n      onFocus,\n      onBlur,\n      showLabelOnHover,\n      children = null,\n      disabled,\n      unstyled,\n      thumbSize,\n    }: ThumbProps,\n    ref\n  ) => {\n    const { classes, cx, theme } = useStyles(\n      { color, size, disabled, thumbSize },\n      { classNames, styles, unstyled, name: 'Slider' }\n    );\n    const [focused, setFocused] = useState(false);\n    const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover;\n\n    return (\n      <Box<'div'>\n        tabIndex={0}\n        role=\"slider\"\n        aria-label={thumbLabel}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value}\n        ref={ref}\n        className={cx(classes.thumb, { [classes.dragging]: dragging })}\n        onFocus={() => {\n          setFocused(true);\n          typeof onFocus === 'function' && onFocus();\n        }}\n        onBlur={() => {\n          setFocused(false);\n          typeof onBlur === 'function' && onBlur();\n        }}\n        onTouchStart={onMouseDown}\n        onMouseDown={onMouseDown}\n        onClick={(event) => event.stopPropagation()}\n        style={{ [theme.dir === 'rtl' ? 'right' : 'left']: `${position}%` }}\n      >\n        {children}\n        <Transition\n          mounted={label != null && isVisible}\n          duration={labelTransitionDuration}\n          transition={labelTransition}\n          timingFunction={labelTransitionTimingFunction || theme.transitionTimingFunction}\n        >\n          {(transitionStyles) => (\n            <div style={transitionStyles} className={classes.label}>\n              {label}\n            </div>\n          )}\n        </Transition>\n      </Box>\n    );\n  }\n);\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"names":["forwardRef","useStyles","useState","React","Box","Transition"],"mappings":";;;;;;;;;;;;;AAIY,MAAC,KAAK,GAAGA,gBAAU,CAAC,CAAC;AACjC,EAAE,GAAG;AACL,EAAE,GAAG;AACL,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,WAAW;AACb,EAAE,KAAK;AACP,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,IAAI;AACN,EAAE,eAAe;AACjB,EAAE,uBAAuB;AACzB,EAAE,6BAA6B;AAC/B,EAAE,aAAa;AACf,EAAE,UAAU;AACZ,EAAE,OAAO;AACT,EAAE,MAAM;AACR,EAAE,gBAAgB;AAClB,EAAE,QAAQ,GAAG,IAAI;AACjB,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,CAAC,EAAE,GAAG,KAAK;AACX,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAGC,uBAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACnI,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAChD,EAAE,MAAM,SAAS,GAAG,aAAa,IAAI,QAAQ,IAAI,OAAO,IAAI,gBAAgB,CAAC;AAC7E,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,OAAG,EAAE;AAClD,IAAI,QAAQ,EAAE,CAAC;AACf,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,eAAe,EAAE,GAAG;AACxB,IAAI,eAAe,EAAE,GAAG;AACxB,IAAI,eAAe,EAAE,KAAK;AAC1B,IAAI,GAAG;AACP,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAClE,IAAI,OAAO,EAAE,MAAM;AACnB,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,OAAO,KAAK,UAAU,IAAI,OAAO,EAAE,CAAC;AACjD,KAAK;AACL,IAAI,MAAM,EAAE,MAAM;AAClB,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,OAAO,MAAM,KAAK,UAAU,IAAI,MAAM,EAAE,CAAC;AAC/C,KAAK;AACL,IAAI,YAAY,EAAE,WAAW;AAC7B,IAAI,WAAW;AACf,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE;AAC/C,IAAI,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE;AACvE,GAAG,EAAE,QAAQ,kBAAkBD,cAAK,CAAC,aAAa,CAACE,qBAAU,EAAE;AAC/D,IAAI,OAAO,EAAE,KAAK,IAAI,IAAI,IAAI,SAAS;AACvC,IAAI,QAAQ,EAAE,uBAAuB;AACrC,IAAI,UAAU,EAAE,eAAe;AAC/B,IAAI,cAAc,EAAE,6BAA6B,IAAI,KAAK,CAAC,wBAAwB;AACnF,GAAG,EAAE,CAAC,gBAAgB,qBAAqBF,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACtE,IAAI,KAAK,EAAE,gBAAgB;AAC3B,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACd,CAAC,EAAE;AACH,KAAK,CAAC,WAAW,GAAG,2BAA2B;;;;"}
+{"version":3,"file":"Thumb.js","sources":["../../../src/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Transition, MantineTransition } from '../../Transition';\nimport useStyles from './Thumb.styles';\n\nexport type ThumbStylesNames = Selectors<typeof useStyles>;\n\nexport interface ThumbProps extends DefaultProps<ThumbStylesNames> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  color: MantineColor;\n  size: MantineNumberSize;\n  label: React.ReactNode;\n  onMouseDown(event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>): void;\n  labelTransition?: MantineTransition;\n  labelTransitionDuration?: number;\n  labelTransitionTimingFunction?: string;\n  labelAlwaysOn: boolean;\n  thumbLabel: string;\n  onFocus?(): void;\n  onBlur?(): void;\n  showLabelOnHover?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean;\n  thumbSize: number;\n  variant: string;\n}\n\nexport const Thumb = forwardRef<HTMLDivElement, ThumbProps>(\n  (\n    {\n      max,\n      min,\n      value,\n      position,\n      label,\n      dragging,\n      onMouseDown,\n      color,\n      classNames,\n      styles,\n      size,\n      labelTransition,\n      labelTransitionDuration,\n      labelTransitionTimingFunction,\n      labelAlwaysOn,\n      thumbLabel,\n      onFocus,\n      onBlur,\n      showLabelOnHover,\n      children = null,\n      disabled,\n      unstyled,\n      thumbSize,\n      variant,\n    }: ThumbProps,\n    ref\n  ) => {\n    const { classes, cx, theme } = useStyles(\n      { color, disabled, thumbSize },\n      { name: 'Slider', classNames, styles, unstyled, variant, size }\n    );\n    const [focused, setFocused] = useState(false);\n    const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover;\n\n    return (\n      <Box<'div'>\n        tabIndex={0}\n        role=\"slider\"\n        aria-label={thumbLabel}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value}\n        ref={ref}\n        className={cx(classes.thumb, { [classes.dragging]: dragging })}\n        onFocus={() => {\n          setFocused(true);\n          typeof onFocus === 'function' && onFocus();\n        }}\n        onBlur={() => {\n          setFocused(false);\n          typeof onBlur === 'function' && onBlur();\n        }}\n        onTouchStart={onMouseDown}\n        onMouseDown={onMouseDown}\n        onClick={(event) => event.stopPropagation()}\n        style={{ [theme.dir === 'rtl' ? 'right' : 'left']: `${position}%` }}\n      >\n        {children}\n        <Transition\n          mounted={label != null && isVisible}\n          duration={labelTransitionDuration}\n          transition={labelTransition}\n          timingFunction={labelTransitionTimingFunction || theme.transitionTimingFunction}\n        >\n          {(transitionStyles) => (\n            <div style={transitionStyles} className={classes.label}>\n              {label}\n            </div>\n          )}\n        </Transition>\n      </Box>\n    );\n  }\n);\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"names":["forwardRef","useStyles","useState","React","Box","Transition"],"mappings":";;;;;;;;;;;;;AAIY,MAAC,KAAK,GAAGA,gBAAU,CAAC,CAAC;AACjC,EAAE,GAAG;AACL,EAAE,GAAG;AACL,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,WAAW;AACb,EAAE,KAAK;AACP,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,IAAI;AACN,EAAE,eAAe;AACjB,EAAE,uBAAuB;AACzB,EAAE,6BAA6B;AAC/B,EAAE,aAAa;AACf,EAAE,UAAU;AACZ,EAAE,OAAO;AACT,EAAE,MAAM;AACR,EAAE,gBAAgB;AAClB,EAAE,QAAQ,GAAG,IAAI;AACjB,EAAE,QAAQ;AACV,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,OAAO;AACT,CAAC,EAAE,GAAG,KAAK;AACX,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAGC,uBAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC5I,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAChD,EAAE,MAAM,SAAS,GAAG,aAAa,IAAI,QAAQ,IAAI,OAAO,IAAI,gBAAgB,CAAC;AAC7E,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,OAAG,EAAE;AAClD,IAAI,QAAQ,EAAE,CAAC;AACf,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,eAAe,EAAE,GAAG;AACxB,IAAI,eAAe,EAAE,GAAG;AACxB,IAAI,eAAe,EAAE,KAAK;AAC1B,IAAI,GAAG;AACP,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAClE,IAAI,OAAO,EAAE,MAAM;AACnB,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvB,MAAM,OAAO,OAAO,KAAK,UAAU,IAAI,OAAO,EAAE,CAAC;AACjD,KAAK;AACL,IAAI,MAAM,EAAE,MAAM;AAClB,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,MAAM,OAAO,MAAM,KAAK,UAAU,IAAI,MAAM,EAAE,CAAC;AAC/C,KAAK;AACL,IAAI,YAAY,EAAE,WAAW;AAC7B,IAAI,WAAW;AACf,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE;AAC/C,IAAI,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE;AACvE,GAAG,EAAE,QAAQ,kBAAkBD,cAAK,CAAC,aAAa,CAACE,qBAAU,EAAE;AAC/D,IAAI,OAAO,EAAE,KAAK,IAAI,IAAI,IAAI,SAAS;AACvC,IAAI,QAAQ,EAAE,uBAAuB;AACrC,IAAI,UAAU,EAAE,eAAe;AAC/B,IAAI,cAAc,EAAE,6BAA6B,IAAI,KAAK,CAAC,wBAAwB;AACnF,GAAG,EAAE,CAAC,gBAAgB,qBAAqBF,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACtE,IAAI,KAAK,EAAE,gBAAgB;AAC3B,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACd,CAAC,EAAE;AACH,KAAK,CAAC,WAAW,GAAG,2BAA2B;;;;"}

package/cjs/Slider/Thumb/Thumb.styles.js

@@ -24,14 +24,14 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var useStyles = styles.createStyles((theme, { color, size, disabled, thumbSize }) => ({
+var useStyles = styles.createStyles((theme, { color, disabled, thumbSize }, { size }) => ({
   label: {
     position: "absolute",
-    top: -36,
+    top: styles.rem(-36),
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[9],
     fontSize: theme.fontSizes.xs,
     color: theme.white,
-    padding: `calc(${theme.spacing.xs}px / 2)`,
+    padding: `calc(${theme.spacing.xs} / 2)`,
     borderRadius: theme.radius.sm,
     whiteSpace: "nowrap",
     pointerEvents: "none",
@@ -42,10 +42,10 @@ var useStyles = styles.createStyles((theme, { color, size, disabled, thumbSize }
     boxSizing: "border-box",
     position: "absolute",
     display: disabled ? "none" : "flex",
-    height: thumbSize || theme.fn.size({ sizes: SliderRoot_styles.sizes, size }) * 2,
-    width: thumbSize || theme.fn.size({ sizes: SliderRoot_styles.sizes, size }) * 2,
+    height: thumbSize ? styles.rem(thumbSize) : `calc(${styles.getSize({ sizes: SliderRoot_styles.sizes, size })} * 2)`,
+    width: thumbSize ? styles.rem(thumbSize) : `calc(${styles.getSize({ sizes: SliderRoot_styles.sizes, size })} * 2)`,
     backgroundColor: theme.colorScheme === "dark" ? theme.fn.themeColor(color, theme.fn.primaryShade()) : theme.white,
-    border: `4px solid ${theme.colorScheme === "dark" ? theme.white : theme.fn.themeColor(color, theme.fn.primaryShade())}`,
+    border: `${styles.rem(4)} solid ${theme.colorScheme === "dark" ? theme.white : theme.fn.themeColor(color, theme.fn.primaryShade())}`,
     color: theme.colorScheme === "dark" ? theme.white : theme.fn.themeColor(color, theme.fn.primaryShade()),
     transform: "translate(-50%, -50%)",
     top: "50%",

package/cjs/Slider/Thumb/Thumb.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.styles.js","sources":["../../../src/Slider/Thumb/Thumb.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface ThumbStyles {\n  color: MantineColor;\n  size: MantineNumberSize;\n  disabled: boolean;\n  thumbSize: number;\n}\n\nexport default createStyles((theme, { color, size, disabled, thumbSize }: ThumbStyles) => ({\n  label: {\n    position: 'absolute',\n    top: -36,\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[9],\n    fontSize: theme.fontSizes.xs,\n    color: theme.white,\n    padding: `calc(${theme.spacing.xs}px / 2)`,\n    borderRadius: theme.radius.sm,\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n    userSelect: 'none',\n    touchAction: 'none',\n  },\n\n  thumb: {\n    ...theme.fn.focusStyles(),\n    boxSizing: 'border-box',\n    position: 'absolute',\n    display: disabled ? 'none' : 'flex',\n    height: thumbSize || theme.fn.size({ sizes, size }) * 2,\n    width: thumbSize || theme.fn.size({ sizes, size }) * 2,\n    backgroundColor:\n      theme.colorScheme === 'dark'\n        ? theme.fn.themeColor(color, theme.fn.primaryShade())\n        : theme.white,\n    border: `4px solid ${\n      theme.colorScheme === 'dark'\n        ? theme.white\n        : theme.fn.themeColor(color, theme.fn.primaryShade())\n    }`,\n    color:\n      theme.colorScheme === 'dark'\n        ? theme.white\n        : theme.fn.themeColor(color, theme.fn.primaryShade()),\n    transform: 'translate(-50%, -50%)',\n    top: '50%',\n    cursor: 'pointer',\n    borderRadius: 1000,\n    alignItems: 'center',\n    justifyContent: 'center',\n    transitionDuration: '100ms',\n    transitionProperty: 'box-shadow, transform',\n    transitionTimingFunction: theme.transitionTimingFunction,\n    zIndex: 3,\n    userSelect: 'none',\n    touchAction: 'none',\n  },\n\n  dragging: {\n    transform: 'translate(-50%, -50%) scale(1.05)',\n    boxShadow: theme.shadows.sm,\n  },\n}));\n"],"names":["createStyles","sizes"],"mappings":";;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAGlE,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM;AAC9E,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC,EAAE;AACZ,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/F,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE;AAChC,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK;AACtB,IAAI,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;AAC9C,IAAI,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACjC,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,aAAa,EAAE,MAAM;AACzB,IAAI,UAAU,EAAE,MAAM;AACtB,IAAI,WAAW,EAAE,MAAM;AACvB,GAAG;AACH,EAAE,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,EAAE;AACnE,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM;AACvC,IAAI,MAAM,EAAE,SAAS,IAAI,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;AAC3D,IAAI,KAAK,EAAE,SAAS,IAAI,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAEA,uBAAK,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;AAC1D,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK;AACrH,IAAI,MAAM,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;AAC3H,IAAI,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC;AAC3G,IAAI,SAAS,EAAE,uBAAuB;AACtC,IAAI,GAAG,EAAE,KAAK;AACd,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,YAAY,EAAE,GAAG;AACrB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,cAAc,EAAE,QAAQ;AAC5B,IAAI,kBAAkB,EAAE,OAAO;AAC/B,IAAI,kBAAkB,EAAE,uBAAuB;AAC/C,IAAI,wBAAwB,EAAE,KAAK,CAAC,wBAAwB;AAC5D,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,UAAU,EAAE,MAAM;AACtB,IAAI,WAAW,EAAE,MAAM;AACvB,GAAG,CAAC;AACJ,EAAE,QAAQ,EAAE;AACZ,IAAI,SAAS,EAAE,mCAAmC;AAClD,IAAI,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AAC/B,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"Thumb.styles.js","sources":["../../../src/Slider/Thumb/Thumb.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, rem, getSize } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface ThumbStyles {\n  color: MantineColor;\n  disabled: boolean;\n  thumbSize: number | string;\n}\n\nexport default createStyles((theme, { color, disabled, thumbSize }: ThumbStyles, { size }) => ({\n  label: {\n    position: 'absolute',\n    top: rem(-36),\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[9],\n    fontSize: theme.fontSizes.xs,\n    color: theme.white,\n    padding: `calc(${theme.spacing.xs} / 2)`,\n    borderRadius: theme.radius.sm,\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n    userSelect: 'none',\n    touchAction: 'none',\n  },\n\n  thumb: {\n    ...theme.fn.focusStyles(),\n    boxSizing: 'border-box',\n    position: 'absolute',\n    display: disabled ? 'none' : 'flex',\n    height: thumbSize ? rem(thumbSize) : `calc(${getSize({ sizes, size })} * 2)`,\n    width: thumbSize ? rem(thumbSize) : `calc(${getSize({ sizes, size })} * 2)`,\n    backgroundColor:\n      theme.colorScheme === 'dark'\n        ? theme.fn.themeColor(color, theme.fn.primaryShade())\n        : theme.white,\n    border: `${rem(4)} solid ${\n      theme.colorScheme === 'dark'\n        ? theme.white\n        : theme.fn.themeColor(color, theme.fn.primaryShade())\n    }`,\n    color:\n      theme.colorScheme === 'dark'\n        ? theme.white\n        : theme.fn.themeColor(color, theme.fn.primaryShade()),\n    transform: 'translate(-50%, -50%)',\n    top: '50%',\n    cursor: 'pointer',\n    borderRadius: 1000,\n    alignItems: 'center',\n    justifyContent: 'center',\n    transitionDuration: '100ms',\n    transitionProperty: 'box-shadow, transform',\n    transitionTimingFunction: theme.transitionTimingFunction,\n    zIndex: 3,\n    userSelect: 'none',\n    touchAction: 'none',\n  },\n\n  dragging: {\n    transform: 'translate(-50%, -50%) scale(1.05)',\n    boxShadow: theme.shadows.sm,\n  },\n}));\n"],"names":["createStyles","rem","getSize","sizes"],"mappings":"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"}

package/cjs/Slider/Track/Track.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var styles = require('@mantine/styles');
 var Marks = require('../Marks/Marks.js');
 var SliderRoot_styles = require('../SliderRoot/SliderRoot.styles.js');
 var Track_styles = require('./Track.styles.js');
@@ -49,7 +50,7 @@ function Track(_a) {
     size,
     color,
     classNames,
-    styles,
+    styles: styles$1,
     radius,
     children,
     offset,
@@ -58,7 +59,8 @@ function Track(_a) {
     disabled,
     marksOffset,
     unstyled,
-    inverted
+    inverted,
+    variant
   } = _b, others = __objRest(_b, [
     "filled",
     "size",
@@ -73,28 +75,30 @@ function Track(_a) {
     "disabled",
     "marksOffset",
     "unstyled",
-    "inverted"
+    "inverted",
+    "variant"
   ]);
-  const { classes } = Track_styles['default']({ color, size, radius, disabled, inverted }, { classNames, styles, unstyled, name: "Slider" });
+  const { classes } = Track_styles['default']({ color, radius, disabled, inverted }, { name: "Slider", classNames, styles: styles$1, unstyled, variant, size });
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.track,
     onMouseLeave,
     onMouseEnter
   }, /* @__PURE__ */ React__default.createElement(Box.Box, {
     className: classes.bar,
-    sx: (theme) => ({
-      left: `calc(${offset}% - ${theme.fn.size({ size, sizes: SliderRoot_styles.sizes })}px)`,
-      width: `calc(${filled}% + ${theme.fn.size({ size, sizes: SliderRoot_styles.sizes })}px)`
-    })
+    sx: {
+      left: `calc(${offset}% - ${styles.getSize({ size, sizes: SliderRoot_styles.sizes })})`,
+      width: `calc(${filled}% + ${styles.getSize({ size, sizes: SliderRoot_styles.sizes })})`
+    }
   }), children, /* @__PURE__ */ React__default.createElement(Marks.Marks, __spreadProps(__spreadValues({}, others), {
     size,
     color,
     offset: marksOffset,
     classNames,
-    styles,
+    styles: styles$1,
     disabled,
     unstyled,
-    inverted
+    inverted,
+    variant
   })));
 }
 Track.displayName = "@mantine/core/SliderTrack";

package/cjs/Slider/Track/Track.js.map

@@ -1 +1 @@
-{"version":3,"file":"Track.js","sources":["../../../src/Slider/Track/Track.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, Selectors } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Marks, MarksStylesNames } from '../Marks/Marks';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\nimport useStyles from './Track.styles';\n\nexport type TrackStylesNames = Selectors<typeof useStyles> | MarksStylesNames;\n\nexport interface TrackProps extends DefaultProps<TrackStylesNames> {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[];\n  size: MantineNumberSize;\n  radius: MantineNumberSize;\n  color: MantineColor;\n  min: number;\n  max: number;\n  value: number;\n  children: React.ReactNode;\n  onChange(value: number): void;\n  onMouseEnter?(event?: React.MouseEvent<HTMLDivElement>): void;\n  onMouseLeave?(event?: React.MouseEvent<HTMLDivElement>): void;\n  disabled: boolean;\n  inverted?: boolean;\n}\n\nexport function Track({\n  filled,\n  size,\n  color,\n  classNames,\n  styles,\n  radius,\n  children,\n  offset,\n  onMouseLeave,\n  onMouseEnter,\n  disabled,\n  marksOffset,\n  unstyled,\n  inverted,\n  ...others\n}: TrackProps) {\n  const { classes } = useStyles(\n    { color, size, radius, disabled, inverted },\n    { classNames, styles, unstyled, name: 'Slider' }\n  );\n\n  return (\n    <div className={classes.track} onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter}>\n      <Box\n        className={classes.bar}\n        sx={(theme) => ({\n          left: `calc(${offset}% - ${theme.fn.size({ size, sizes })}px)`,\n          width: `calc(${filled}% + ${theme.fn.size({ size, sizes })}px)`,\n        })}\n      />\n\n      {children}\n\n      <Marks\n        {...others}\n        size={size}\n        color={color}\n        offset={marksOffset}\n        classNames={classNames}\n        styles={styles}\n        disabled={disabled}\n        unstyled={unstyled}\n        inverted={inverted}\n      />\n    </div>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"names":["useStyles","React","Box","sizes","Marks"],"mappings":"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"}
+{"version":3,"file":"Track.js","sources":["../../../src/Slider/Track/Track.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, Selectors, getSize } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { Marks, MarksStylesNames } from '../Marks/Marks';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\nimport useStyles from './Track.styles';\n\nexport type TrackStylesNames = Selectors<typeof useStyles> | MarksStylesNames;\n\nexport interface TrackProps extends DefaultProps<TrackStylesNames> {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[];\n  size: MantineNumberSize;\n  radius: MantineNumberSize;\n  color: MantineColor;\n  min: number;\n  max: number;\n  value: number;\n  children: React.ReactNode;\n  onChange(value: number): void;\n  onMouseEnter?(event?: React.MouseEvent<HTMLDivElement>): void;\n  onMouseLeave?(event?: React.MouseEvent<HTMLDivElement>): void;\n  disabled: boolean;\n  inverted?: boolean;\n  variant: string;\n}\n\nexport function Track({\n  filled,\n  size,\n  color,\n  classNames,\n  styles,\n  radius,\n  children,\n  offset,\n  onMouseLeave,\n  onMouseEnter,\n  disabled,\n  marksOffset,\n  unstyled,\n  inverted,\n  variant,\n  ...others\n}: TrackProps) {\n  const { classes } = useStyles(\n    { color, radius, disabled, inverted },\n    { name: 'Slider', classNames, styles, unstyled, variant, size }\n  );\n\n  return (\n    <div className={classes.track} onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter}>\n      <Box\n        className={classes.bar}\n        sx={{\n          left: `calc(${offset}% - ${getSize({ size, sizes })})`,\n          width: `calc(${filled}% + ${getSize({ size, sizes })})`,\n        }}\n      />\n\n      {children}\n\n      <Marks\n        {...others}\n        size={size}\n        color={color}\n        offset={marksOffset}\n        classNames={classNames}\n        styles={styles}\n        disabled={disabled}\n        unstyled={unstyled}\n        inverted={inverted}\n        variant={variant}\n      />\n    </div>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"names":["styles","useStyles","React","Box","getSize","sizes","Marks"],"mappings":"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"}

package/cjs/Slider/Track/Track.styles.js

@@ -5,21 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
 var SliderRoot_styles = require('../SliderRoot/SliderRoot.styles.js');
 
-var useStyles = styles.createStyles((theme, { radius, size, color, disabled, inverted }) => ({
+var useStyles = styles.createStyles((theme, { radius, color, disabled, inverted }, { size }) => ({
   track: {
     position: "relative",
-    height: theme.fn.size({ sizes: SliderRoot_styles.sizes, size }),
+    height: styles.getSize({ sizes: SliderRoot_styles.sizes, size }),
     width: "100%",
-    marginRight: theme.fn.size({ size, sizes: SliderRoot_styles.sizes }),
-    marginLeft: theme.fn.size({ size, sizes: SliderRoot_styles.sizes }),
+    marginRight: styles.getSize({ size, sizes: SliderRoot_styles.sizes }),
+    marginLeft: styles.getSize({ size, sizes: SliderRoot_styles.sizes }),
     "&::before": {
       content: '""',
       position: "absolute",
       top: 0,
       bottom: 0,
-      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-      right: -theme.fn.size({ size, sizes: SliderRoot_styles.sizes }),
-      left: -theme.fn.size({ size, sizes: SliderRoot_styles.sizes }),
+      borderRadius: theme.fn.radius(radius),
+      right: `calc(${styles.getSize({ size, sizes: SliderRoot_styles.sizes })} * -1)`,
+      left: `calc(${styles.getSize({ size, sizes: SliderRoot_styles.sizes })} * -1)`,
       backgroundColor: inverted ? disabled ? theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4] : theme.fn.variant({ variant: "filled", color }).background : theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
       zIndex: 0
     }
@@ -30,7 +30,7 @@ var useStyles = styles.createStyles((theme, { radius, size, color, disabled, inv
     top: 0,
     bottom: 0,
     backgroundColor: inverted ? theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2] : disabled ? theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4] : theme.fn.variant({ variant: "filled", color }).background,
-    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius })
+    borderRadius: theme.fn.radius(radius)
   }
 }));
 

package/cjs/Slider/Track/Track.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Track.styles.js","sources":["../../../src/Slider/Track/Track.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface TrackStyles {\n  radius: MantineNumberSize;\n  size: MantineNumberSize;\n  color: MantineColor;\n  disabled: boolean;\n  inverted: boolean;\n}\n\nexport default createStyles((theme, { radius, size, color, disabled, inverted }: TrackStyles) => ({\n  track: {\n    position: 'relative',\n    height: theme.fn.size({ sizes, size }),\n    width: '100%',\n    marginRight: theme.fn.size({ size, sizes }),\n    marginLeft: theme.fn.size({ size, sizes }),\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      right: -theme.fn.size({ size, sizes }),\n      left: -theme.fn.size({ size, sizes }),\n      backgroundColor: inverted\n        ? disabled\n          ? theme.colorScheme === 'dark'\n            ? theme.colors.dark[3]\n            : theme.colors.gray[4]\n          : theme.fn.variant({ variant: 'filled', color }).background\n        : theme.colorScheme === 'dark'\n        ? theme.colors.dark[4]\n        : theme.colors.gray[2],\n      zIndex: 0,\n    },\n  },\n\n  bar: {\n    position: 'absolute',\n    zIndex: 1,\n    top: 0,\n    bottom: 0,\n    backgroundColor: inverted\n      ? theme.colorScheme === 'dark'\n        ? theme.colors.dark[4]\n        : theme.colors.gray[2]\n      : disabled\n      ? theme.colorScheme === 'dark'\n        ? theme.colors.dark[3]\n        : theme.colors.gray[4]\n      : theme.fn.variant({ variant: 'filled', color }).background,\n    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n  },\n}));\n"],"names":["createStyles","sizes"],"mappings":";;;;;;;AAEA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM;AACrF,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC;AAC1C,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,SAAEA,uBAAK,EAAE,CAAC;AAC/C,IAAI,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,SAAEA,uBAAK,EAAE,CAAC;AAC9C,IAAI,WAAW,EAAE;AACjB,MAAM,OAAO,EAAE,IAAI;AACnB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AACxE,MAAM,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,SAAEA,uBAAK,EAAE,CAAC;AAC5C,MAAM,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,SAAEA,uBAAK,EAAE,CAAC;AAC3C,MAAM,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAChQ,MAAM,MAAM,EAAE,CAAC;AACf,KAAK;AACL,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,eAAe,EAAE,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU;AAC9P,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AACtE,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"Track.styles.js","sources":["../../../src/Slider/Track/Track.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, getSize } from '@mantine/styles';\nimport { sizes } from '../SliderRoot/SliderRoot.styles';\n\ninterface TrackStyles {\n  radius: MantineNumberSize;\n  color: MantineColor;\n  disabled: boolean;\n  inverted: boolean;\n}\n\nexport default createStyles(\n  (theme, { radius, color, disabled, inverted }: TrackStyles, { size }) => ({\n    track: {\n      position: 'relative',\n      height: getSize({ sizes, size }),\n      width: '100%',\n      marginRight: getSize({ size, sizes }),\n      marginLeft: getSize({ size, sizes }),\n\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        borderRadius: theme.fn.radius(radius),\n        right: `calc(${getSize({ size, sizes })} * -1)`,\n        left: `calc(${getSize({ size, sizes })} * -1)`,\n        backgroundColor: inverted\n          ? disabled\n            ? theme.colorScheme === 'dark'\n              ? theme.colors.dark[3]\n              : theme.colors.gray[4]\n            : theme.fn.variant({ variant: 'filled', color }).background\n          : theme.colorScheme === 'dark'\n          ? theme.colors.dark[4]\n          : theme.colors.gray[2],\n        zIndex: 0,\n      },\n    },\n\n    bar: {\n      position: 'absolute',\n      zIndex: 1,\n      top: 0,\n      bottom: 0,\n      backgroundColor: inverted\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[4]\n          : theme.colors.gray[2]\n        : disabled\n        ? theme.colorScheme === 'dark'\n          ? theme.colors.dark[3]\n          : theme.colors.gray[4]\n        : theme.fn.variant({ variant: 'filled', color }).background,\n      borderRadius: theme.fn.radius(radius),\n    },\n  })\n);\n"],"names":["createStyles","getSize","sizes"],"mappings":";;;;;;;AAEA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM;AACzF,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAEC,cAAO,CAAC,SAAEC,uBAAK,EAAE,IAAI,EAAE,CAAC;AACpC,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,WAAW,EAAED,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC;AACzC,IAAI,UAAU,EAAED,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC;AACxC,IAAI,WAAW,EAAE;AACjB,MAAM,OAAO,EAAE,IAAI;AACnB,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,MAAM,EAAE,CAAC;AACf,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AAC3C,MAAM,KAAK,EAAE,CAAC,KAAK,EAAED,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC,CAAC,MAAM,CAAC;AACrD,MAAM,IAAI,EAAE,CAAC,KAAK,EAAED,cAAO,CAAC,EAAE,IAAI,SAAEC,uBAAK,EAAE,CAAC,CAAC,MAAM,CAAC;AACpD,MAAM,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAChQ,MAAM,MAAM,EAAE,CAAC;AACf,KAAK;AACL,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,eAAe,EAAE,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,UAAU;AAC9P,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/Spoiler/Spoiler.js

@@ -58,7 +58,8 @@ const Spoiler = React.forwardRef((props, ref) => {
     initialState,
     classNames,
     styles: styles$1,
-    unstyled
+    unstyled,
+    variant
   } = _a, others = __objRest(_a, [
     "className",
     "children",
@@ -70,9 +71,10 @@ const Spoiler = React.forwardRef((props, ref) => {
     "initialState",
     "classNames",
     "styles",
-    "unstyled"
+    "unstyled",
+    "variant"
   ]);
-  const { classes, cx } = Spoiler_styles['default']({ transitionDuration }, { classNames, styles: styles$1, unstyled, name: "Spoiler" });
+  const { classes, cx } = Spoiler_styles['default']({ transitionDuration }, { name: "Spoiler", classNames, styles: styles$1, unstyled, variant });
   const [show, setShowState] = React.useState(initialState);
   const [spoiler, setSpoilerState] = React.useState(initialState);
   const { ref: contentRef, height } = hooks.useElementSize();
@@ -86,7 +88,7 @@ const Spoiler = React.forwardRef((props, ref) => {
   }, others), /* @__PURE__ */ React__default.createElement("div", {
     className: classes.content,
     style: {
-      maxHeight: !show ? maxHeight : height || void 0
+      maxHeight: !show ? styles.rem(maxHeight) : height ? styles.rem(height) : void 0
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref: contentRef

package/cjs/Spoiler/Spoiler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spoiler.js","sources":["../../src/Spoiler/Spoiler.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { useElementSize } from '@mantine/hooks';\nimport { Anchor } from '../Anchor';\nimport { Box } from '../Box';\nimport useStyles, { SpoilerStylesParams } from './Spoiler.styles';\n\nexport type SpoilerStylesNames = Selectors<typeof useStyles>;\n\nexport interface SpoilerProps\n  extends DefaultProps<SpoilerStylesNames, SpoilerStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Max height of visible content, when this point is reached spoiler appears */\n  maxHeight: number;\n\n  /** Label for close spoiler action */\n  hideLabel: React.ReactNode;\n\n  /** Label for open spoiler action */\n  showLabel: React.ReactNode;\n\n  /** Get ref of spoiler toggle button */\n  controlRef?: React.ForwardedRef<HTMLButtonElement>;\n\n  /** Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state will be updated on mount */\n  initialState?: boolean;\n\n  /** Spoiler reveal transition duration in ms, 0 or null to turn off animation */\n  transitionDuration?: number;\n}\n\nconst defaultProps: Partial<SpoilerProps> = {\n  maxHeight: 100,\n  transitionDuration: 200,\n  initialState: false,\n};\n\nexport const Spoiler = forwardRef<HTMLDivElement, SpoilerProps>((props, ref) => {\n  const {\n    className,\n    children,\n    maxHeight,\n    hideLabel,\n    showLabel,\n    transitionDuration,\n    controlRef,\n    initialState,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n  } = useComponentDefaultProps('Spoiler', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { transitionDuration },\n    { classNames, styles, unstyled, name: 'Spoiler' }\n  );\n\n  const [show, setShowState] = useState(initialState);\n  const [spoiler, setSpoilerState] = useState(initialState);\n  const { ref: contentRef, height } = useElementSize();\n\n  const spoilerMoreContent = show ? hideLabel : showLabel;\n\n  useEffect(() => {\n    setSpoilerState(maxHeight < height);\n  }, [height, maxHeight, children]);\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      <div\n        className={classes.content}\n        style={{\n          maxHeight: !show ? maxHeight : height || undefined,\n        }}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n\n      {spoiler && (\n        <Anchor\n          component=\"button\"\n          ref={controlRef}\n          onClick={() => setShowState((opened) => !opened)}\n          className={classes.control}\n        >\n          {spoilerMoreContent}\n        </Anchor>\n      )}\n    </Box>\n  );\n});\n\nSpoiler.displayName = '@mantine/core/Spoiler';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","useState","useElementSize","useEffect","React","Box","Anchor"],"mappings":"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"}
+{"version":3,"file":"Spoiler.js","sources":["../../src/Spoiler/Spoiler.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef } from 'react';\nimport { DefaultProps, Selectors, useComponentDefaultProps, rem } from '@mantine/styles';\nimport { useElementSize } from '@mantine/hooks';\nimport { Anchor } from '../Anchor';\nimport { Box } from '../Box';\nimport useStyles, { SpoilerStylesParams } from './Spoiler.styles';\n\nexport type SpoilerStylesNames = Selectors<typeof useStyles>;\n\nexport interface SpoilerProps\n  extends DefaultProps<SpoilerStylesNames, SpoilerStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n\n  /** Max height of visible content, when this point is reached spoiler appears */\n  maxHeight: number;\n\n  /** Label for close spoiler action */\n  hideLabel: React.ReactNode;\n\n  /** Label for open spoiler action */\n  showLabel: React.ReactNode;\n\n  /** Get ref of spoiler toggle button */\n  controlRef?: React.ForwardedRef<HTMLButtonElement>;\n\n  /** Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state will be updated on mount */\n  initialState?: boolean;\n\n  /** Spoiler reveal transition duration in ms, 0 or null to turn off animation */\n  transitionDuration?: number;\n}\n\nconst defaultProps: Partial<SpoilerProps> = {\n  maxHeight: 100,\n  transitionDuration: 200,\n  initialState: false,\n};\n\nexport const Spoiler = forwardRef<HTMLDivElement, SpoilerProps>((props, ref) => {\n  const {\n    className,\n    children,\n    maxHeight,\n    hideLabel,\n    showLabel,\n    transitionDuration,\n    controlRef,\n    initialState,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Spoiler', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { transitionDuration },\n    { name: 'Spoiler', classNames, styles, unstyled, variant }\n  );\n\n  const [show, setShowState] = useState(initialState);\n  const [spoiler, setSpoilerState] = useState(initialState);\n  const { ref: contentRef, height } = useElementSize();\n\n  const spoilerMoreContent = show ? hideLabel : showLabel;\n\n  useEffect(() => {\n    setSpoilerState(maxHeight < height);\n  }, [height, maxHeight, children]);\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      <div\n        className={classes.content}\n        style={{\n          maxHeight: !show ? rem(maxHeight) : height ? rem(height) : undefined,\n        }}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n\n      {spoiler && (\n        <Anchor\n          component=\"button\"\n          ref={controlRef}\n          onClick={() => setShowState((opened) => !opened)}\n          className={classes.control}\n        >\n          {spoilerMoreContent}\n        </Anchor>\n      )}\n    </Box>\n  );\n});\n\nSpoiler.displayName = '@mantine/core/Spoiler';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","useState","useElementSize","useEffect","React","Box","rem","Anchor"],"mappings":"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"}

package/cjs/Stack/Stack.js

@@ -45,8 +45,8 @@ const defaultProps = {
   justify: "flex-start"
 };
 const Stack = React.forwardRef((props, ref) => {
-  const _a = styles.useComponentDefaultProps("Stack", defaultProps, props), { spacing, className, align, justify, unstyled } = _a, others = __objRest(_a, ["spacing", "className", "align", "justify", "unstyled"]);
-  const { classes, cx } = Stack_styles['default']({ spacing, align, justify }, { name: "Stack", unstyled });
+  const _a = styles.useComponentDefaultProps("Stack", defaultProps, props), { spacing, className, align, justify, unstyled, variant } = _a, others = __objRest(_a, ["spacing", "className", "align", "justify", "unstyled", "variant"]);
+  const { classes, cx } = Stack_styles['default']({ spacing, align, justify }, { name: "Stack", unstyled, variant });
   return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
     className: cx(classes.root, className),
     ref

package/cjs/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../src/Stack/Stack.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef } from 'react';\nimport { DefaultProps, useComponentDefaultProps, MantineNumberSize } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { StackStylesParams } from './Stack.styles';\n\nexport interface StackProps\n  extends DefaultProps<never, StackStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Key of theme.spacing or number to set gap in px */\n  spacing?: MantineNumberSize;\n\n  /** align-items CSS property */\n  align?: React.CSSProperties['alignItems'];\n\n  /** justify-content CSS property */\n  justify?: React.CSSProperties['justifyContent'];\n}\n\nconst defaultProps: Partial<StackProps> = {\n  spacing: 'md',\n  align: 'stretch',\n  justify: 'flex-start',\n};\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {\n  const { spacing, className, align, justify, unstyled, ...others } = useComponentDefaultProps(\n    'Stack',\n    defaultProps,\n    props\n  );\n\n  const { classes, cx } = useStyles({ spacing, align, justify }, { name: 'Stack', unstyled });\n  return <Box className={cx(classes.root, className)} ref={ref} {...others} />;\n});\n\nStack.displayName = '@mantine/core/Stack';\n"],"names":["forwardRef","useComponentDefaultProps","useStyles","React","Box"],"mappings":"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"}
+{"version":3,"file":"Stack.js","sources":["../../src/Stack/Stack.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { forwardRef } from 'react';\nimport { DefaultProps, useComponentDefaultProps, MantineNumberSize } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { StackStylesParams } from './Stack.styles';\n\nexport interface StackProps\n  extends DefaultProps<never, StackStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n\n  /** Key of theme.spacing or any valid CSS value to set gap */\n  spacing?: MantineNumberSize;\n\n  /** align-items CSS property */\n  align?: React.CSSProperties['alignItems'];\n\n  /** justify-content CSS property */\n  justify?: React.CSSProperties['justifyContent'];\n}\n\nconst defaultProps: Partial<StackProps> = {\n  spacing: 'md',\n  align: 'stretch',\n  justify: 'flex-start',\n};\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {\n  const { spacing, className, align, justify, unstyled, variant, ...others } =\n    useComponentDefaultProps('Stack', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { spacing, align, justify },\n    { name: 'Stack', unstyled, variant }\n  );\n\n  return <Box className={cx(classes.root, className)} ref={ref} {...others} />;\n});\n\nStack.displayName = '@mantine/core/Stack';\n"],"names":["forwardRef","useComponentDefaultProps","useStyles","React","Box"],"mappings":"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"}

package/cjs/Stack/Stack.styles.js

@@ -10,7 +10,7 @@ var useStyles = styles.createStyles((theme, { spacing, align, justify }) => ({
     flexDirection: "column",
     alignItems: align,
     justifyContent: justify,
-    gap: theme.fn.size({ size: spacing, sizes: theme.spacing })
+    gap: styles.getSize({ size: spacing, sizes: theme.spacing })
   }
 }));
 

package/cjs/Stack/Stack.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.styles.js","sources":["../../src/Stack/Stack.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\nexport interface StackStylesParams {\n  spacing: MantineNumberSize;\n  align: React.CSSProperties['alignItems'];\n  justify: React.CSSProperties['justifyContent'];\n}\n\nexport default createStyles((theme, { spacing, align, justify }: StackStylesParams) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: align,\n    justifyContent: justify,\n    gap: theme.fn.size({ size: spacing, sizes: theme.spacing }),\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM;AACrE,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,aAAa,EAAE,QAAQ;AAC3B,IAAI,UAAU,EAAE,KAAK;AACrB,IAAI,cAAc,EAAE,OAAO;AAC3B,IAAI,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC/D,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"Stack.styles.js","sources":["../../src/Stack/Stack.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSize } from '@mantine/styles';\n\nexport interface StackStylesParams {\n  spacing: MantineNumberSize;\n  align: React.CSSProperties['alignItems'];\n  justify: React.CSSProperties['justifyContent'];\n}\n\nexport default createStyles((theme, { spacing, align, justify }: StackStylesParams) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: align,\n    justifyContent: justify,\n    gap: getSize({ size: spacing, sizes: theme.spacing }),\n  },\n}));\n"],"names":["createStyles","getSize"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM;AACrE,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,aAAa,EAAE,QAAQ;AAC3B,IAAI,UAAU,EAAE,KAAK;AACrB,IAAI,cAAc,EAAE,OAAO;AAC3B,IAAI,GAAG,EAAEC,cAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AACzD,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/Stepper/Step/Step.js

@@ -89,7 +89,8 @@ const Step = React.forwardRef((props, ref) => {
     classNames,
     styles: styles$1,
     unstyled,
-    orientation
+    orientation,
+    variant
   } = _a, others = __objRest(_a, [
     "className",
     "step",
@@ -112,10 +113,11 @@ const Step = React.forwardRef((props, ref) => {
     "classNames",
     "styles",
     "unstyled",
-    "orientation"
+    "orientation",
+    "variant"
   ]);
-  const { classes, cx, theme } = Step_styles['default']({ color, iconSize, size, radius, allowStepClick, iconPosition, orientation }, { name: __staticSelector, classNames, styles: styles$1, unstyled });
-  const _iconSize = theme.fn.size({ size, sizes: defaultIconSizes });
+  const { classes, cx } = Step_styles['default']({ color, iconSize, radius, allowStepClick, iconPosition, orientation }, { name: __staticSelector, classNames, styles: styles$1, unstyled, variant, size });
+  const _iconSize = styles.getSize({ size, sizes: defaultIconSizes });
   const _icon = state === "stepCompleted" ? null : state === "stepProgress" ? progressIcon : icon;
   const dataAttributes = {
     "data-progress": state === "stepProgress" || void 0,

package/cjs/Stepper/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../src/Stepper/Step/Step.tsx"],"sourcesContent":["import React, { forwardRef, FunctionComponent } from 'react';\nimport {\n  DefaultProps,\n  MantineColor,\n  Selectors,\n  MantineSize,\n  MantineNumberSize,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Text } from '../../Text';\nimport { Loader } from '../../Loader';\nimport { CheckboxIcon } from '../../Checkbox';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { Transition } from '../../Transition';\nimport useStyles from './Step.styles';\n\nexport type StepStylesNames = Selectors<typeof useStyles>;\n\nexport type StepFragmentComponent = FunctionComponent<{ step: number }>;\n\nexport interface StepProps\n  extends DefaultProps<StepStylesNames>,\n    React.ComponentPropsWithoutRef<'button'> {\n  /** Step index, controlled by Steps component **/\n  step?: number;\n\n  /** Step state, controlled by Steps component */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Step color from theme.colors */\n  color?: MantineColor;\n\n  /** Should icon be displayed */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to step index + 1 when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size in px */\n  iconSize?: number;\n\n  /** Icon position relative to step body */\n  iconPosition?: 'right' | 'left';\n\n  /** Component size */\n  size?: MantineSize;\n\n  /** Radius from theme.radius, or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Indicates loading state on step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nconst defaultIconSizes = {\n  xs: 16,\n  sm: 18,\n  md: 20,\n  lg: 22,\n  xl: 24,\n};\n\nconst defaultProps: Partial<StepProps> = {\n  withIcon: true,\n  size: 'md',\n  radius: 'xl',\n  allowStepClick: true,\n  iconPosition: 'left',\n  __staticSelector: 'Step',\n};\n\nconst getStepFragment = (Fragment: StepFragmentComponent | React.ReactNode, step: number) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step} />;\n  }\n\n  return Fragment;\n};\n\nexport const Step = forwardRef<HTMLButtonElement, StepProps>((props: StepProps, ref) => {\n  const {\n    className,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    size,\n    radius,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    __staticSelector,\n    classNames,\n    styles,\n    unstyled,\n    orientation,\n    ...others\n  } = useComponentDefaultProps('StepperStep', defaultProps, props);\n\n  const { classes, cx, theme } = useStyles(\n    { color, iconSize, size, radius, allowStepClick, iconPosition, orientation },\n    { name: __staticSelector, classNames, styles, unstyled }\n  );\n\n  const _iconSize = theme.fn.size({ size, sizes: defaultIconSizes });\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      className={cx(classes.step, className)}\n      tabIndex={allowStepClick ? 0 : -1}\n      ref={ref}\n      {...dataAttributes}\n      {...others}\n    >\n      {withIcon && (\n        <div className={classes.stepWrapper}>\n          <div className={classes.stepIcon} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <div className={classes.stepCompletedIcon} style={transitionStyles}>\n                  {loading ? (\n                    <Loader color=\"#fff\" size={_iconSize} className={classes.stepLoader} />\n                  ) : (\n                    getStepFragment(completedIcon, step) || (\n                      <CheckboxIcon indeterminate={false} width={_iconSize} height={_iconSize} />\n                    )\n                  )}\n                </div>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              loading ? (\n                <Loader size={_iconSize} color={color} />\n              ) : (\n                getStepFragment(_icon || icon, step)\n              )\n            ) : null}\n          </div>\n          {orientation === 'vertical' && (\n            <div\n              className={cx(classes.verticalSeparator, {\n                [classes.verticalSeparatorActive]: state === 'stepCompleted',\n              })}\n            />\n          )}\n        </div>\n      )}\n\n      {(label || description) && (\n        <div className={classes.stepBody}>\n          {label && <Text className={classes.stepLabel}>{getStepFragment(label, step)}</Text>}\n          {description && (\n            <Text className={classes.stepDescription} color=\"dimmed\">\n              {getStepFragment(description, step)}\n            </Text>\n          )}\n        </div>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStep.displayName = '@mantine/core/Step';\n"],"names":["React","forwardRef","useComponentDefaultProps","styles","useStyles","UnstyledButton","Transition","Loader","CheckboxIcon","Text"],"mappings":"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"}
+{"version":3,"file":"Step.js","sources":["../../../src/Stepper/Step/Step.tsx"],"sourcesContent":["import React, { forwardRef, FunctionComponent } from 'react';\nimport {\n  DefaultProps,\n  MantineColor,\n  Selectors,\n  MantineSize,\n  MantineNumberSize,\n  useComponentDefaultProps,\n  getSize,\n} from '@mantine/styles';\nimport { Text } from '../../Text';\nimport { Loader } from '../../Loader';\nimport { CheckboxIcon } from '../../Checkbox';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { Transition } from '../../Transition';\nimport useStyles from './Step.styles';\n\nexport type StepStylesNames = Selectors<typeof useStyles>;\n\nexport type StepFragmentComponent = FunctionComponent<{ step: number }>;\n\nexport interface StepProps\n  extends DefaultProps<StepStylesNames>,\n    React.ComponentPropsWithoutRef<'button'> {\n  variant?: string;\n\n  /** Step index, controlled by Steps component **/\n  step?: number;\n\n  /** Step state, controlled by Steps component */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Step color from theme.colors */\n  color?: MantineColor;\n\n  /** Should icon be displayed */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to step index + 1 when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size */\n  iconSize?: number;\n\n  /** Icon position relative to step body */\n  iconPosition?: 'right' | 'left';\n\n  /** Component size */\n  size?: MantineSize;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, \"xl\" by default */\n  radius?: MantineNumberSize;\n\n  /** Indicates loading state on step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nconst defaultIconSizes = {\n  xs: 16,\n  sm: 18,\n  md: 20,\n  lg: 22,\n  xl: 24,\n};\n\nconst defaultProps: Partial<StepProps> = {\n  withIcon: true,\n  size: 'md',\n  radius: 'xl',\n  allowStepClick: true,\n  iconPosition: 'left',\n  __staticSelector: 'Step',\n};\n\nconst getStepFragment = (Fragment: StepFragmentComponent | React.ReactNode, step: number) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step} />;\n  }\n\n  return Fragment;\n};\n\nexport const Step = forwardRef<HTMLButtonElement, StepProps>((props: StepProps, ref) => {\n  const {\n    className,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    size,\n    radius,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    __staticSelector,\n    classNames,\n    styles,\n    unstyled,\n    orientation,\n    variant,\n    ...others\n  } = useComponentDefaultProps('StepperStep', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { color, iconSize, radius, allowStepClick, iconPosition, orientation },\n    { name: __staticSelector, classNames, styles, unstyled, variant, size }\n  );\n\n  const _iconSize = getSize({ size, sizes: defaultIconSizes });\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      className={cx(classes.step, className)}\n      tabIndex={allowStepClick ? 0 : -1}\n      ref={ref}\n      {...dataAttributes}\n      {...others}\n    >\n      {withIcon && (\n        <div className={classes.stepWrapper}>\n          <div className={classes.stepIcon} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <div className={classes.stepCompletedIcon} style={transitionStyles}>\n                  {loading ? (\n                    <Loader color=\"#fff\" size={_iconSize} className={classes.stepLoader} />\n                  ) : (\n                    getStepFragment(completedIcon, step) || (\n                      <CheckboxIcon indeterminate={false} width={_iconSize} height={_iconSize} />\n                    )\n                  )}\n                </div>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              loading ? (\n                <Loader size={_iconSize} color={color} />\n              ) : (\n                getStepFragment(_icon || icon, step)\n              )\n            ) : null}\n          </div>\n          {orientation === 'vertical' && (\n            <div\n              className={cx(classes.verticalSeparator, {\n                [classes.verticalSeparatorActive]: state === 'stepCompleted',\n              })}\n            />\n          )}\n        </div>\n      )}\n\n      {(label || description) && (\n        <div className={classes.stepBody}>\n          {label && <Text className={classes.stepLabel}>{getStepFragment(label, step)}</Text>}\n          {description && (\n            <Text className={classes.stepDescription} color=\"dimmed\">\n              {getStepFragment(description, step)}\n            </Text>\n          )}\n        </div>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStep.displayName = '@mantine/core/Step';\n"],"names":["React","forwardRef","useComponentDefaultProps","styles","useStyles","getSize","UnstyledButton","Transition","Loader","CheckboxIcon","Text"],"mappings":"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"}

package/cjs/Stepper/Step/Step.styles.js

@@ -24,32 +24,32 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const iconSizes = {
-  xs: 34,
-  sm: 36,
-  md: 42,
-  lg: 48,
-  xl: 52
+  xs: styles.rem(34),
+  sm: styles.rem(36),
+  md: styles.rem(42),
+  lg: styles.rem(48),
+  xl: styles.rem(52)
 };
-var useStyles = styles.createStyles((theme, { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }, getRef) => {
-  const _iconSize = iconSize || theme.fn.size({ size, sizes: iconSizes });
+var useStyles = styles.createStyles((theme, { color, iconSize, radius, allowStepClick, iconPosition, orientation }, { size }) => {
+  const _iconSize = iconSize ? styles.rem(iconSize) : styles.getSize({ size, sizes: iconSizes });
   const iconMargin = size === "xl" || size === "lg" ? theme.spacing.md : theme.spacing.sm;
-  const _radius = theme.fn.size({ size: radius, sizes: theme.radius });
+  const _radius = theme.fn.radius(radius);
   const colors = theme.fn.variant({
     variant: "filled",
     color: color || theme.primaryColor,
     primaryFallback: false
   });
-  const separatorDistanceFromIcon = theme.spacing.xs / 2;
+  const separatorDistanceFromIcon = `calc(${theme.spacing.xs} / 2)`;
   const verticalOrientationStyles = {
     step: {
       justifyContent: "flex-start",
-      minHeight: `calc(${_iconSize}px + ${theme.spacing.xl}px + ${separatorDistanceFromIcon}px)`,
-      marginTop: `${separatorDistanceFromIcon}px`,
+      minHeight: `calc(${_iconSize} + ${theme.spacing.xl} + ${separatorDistanceFromIcon})`,
+      marginTop: separatorDistanceFromIcon,
       overflow: "hidden",
       "&:first-of-type": {
         marginTop: 0
       },
-      [`&:last-of-type .${getRef("verticalSeparator")}`]: {
+      [`&:last-of-type .${styles.getStylesRef("verticalSeparator")}`]: {
         display: "none"
       }
     }
@@ -67,12 +67,12 @@ var useStyles = styles.createStyles((theme, { color, iconSize, size, radius, all
       position: "relative"
     },
     verticalSeparator: {
-      top: `${_iconSize + separatorDistanceFromIcon}px`,
-      left: `${_iconSize / 2}px`,
+      top: `calc(${_iconSize} + ${separatorDistanceFromIcon})`,
+      left: `calc(${_iconSize} / 2)`,
       height: "100vh",
       position: "absolute",
-      borderLeft: `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]}`,
-      ref: getRef("verticalSeparator")
+      borderLeft: `${styles.rem(2)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]}`,
+      ref: styles.getStylesRef("verticalSeparator")
     },
     verticalSeparatorActive: {
       borderColor: theme.fn.variant({ variant: "filled", color }).background
@@ -87,12 +87,12 @@ var useStyles = styles.createStyles((theme, { color, iconSize, size, radius, all
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
-      border: `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]}`,
+      border: `${styles.rem(2)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]}`,
       transition: "background-color 150ms ease, border-color 150ms ease",
       position: "relative",
       fontWeight: 700,
       color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
-      fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
+      fontSize: styles.getSize({ size, sizes: theme.fontSizes }),
       "&[data-progress]": {
         borderColor: colors.background
       },
@@ -113,20 +113,18 @@ var useStyles = styles.createStyles((theme, { color, iconSize, size, radius, all
       flexDirection: "column",
       marginLeft: iconPosition === "left" ? iconMargin : void 0,
       marginRight: iconPosition === "right" ? iconMargin : void 0
-    }, orientation === "vertical" ? {
-      marginTop: _iconSize > theme.fn.size({ size, sizes: theme.fontSizes }) * 4 ? _iconSize / 4 : _iconSize / 12
-    } : null),
+    }, orientation === "vertical" ? { marginTop: `calc(${iconSize} / 4)` } : null),
     stepLabel: {
       textAlign: iconPosition,
       fontWeight: 500,
-      fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
+      fontSize: styles.getSize({ size, sizes: theme.fontSizes }),
       lineHeight: 1
     },
     stepDescription: {
       textAlign: iconPosition,
-      marginTop: theme.fn.size({ size, sizes: theme.spacing }) / 3,
-      marginBottom: theme.fn.size({ size, sizes: theme.spacing }) / 3,
-      fontSize: theme.fn.size({ size, sizes: theme.fontSizes }) - 2,
+      marginTop: `calc(${styles.getSize({ size, sizes: theme.spacing })} / 3)`,
+      marginBottom: `calc(${styles.getSize({ size, sizes: theme.spacing })} / 3)`,
+      fontSize: `calc(${styles.getSize({ size, sizes: theme.fontSizes })} - ${styles.rem(2)})`,
       lineHeight: 1
     }
   };