@mantine/core 5.10.2 → 6.0.0-alpha.1

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
     }
   };

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

@@ -1 +1 @@
-{"version":3,"file":"Step.styles.js","sources":["../../../src/Stepper/Step/Step.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize, MantineSize } from '@mantine/styles';\n\nexport interface StepStylesParams {\n  color: MantineColor;\n  iconSize: number;\n  size: MantineSize;\n  radius: MantineNumberSize;\n  allowStepClick: boolean;\n  iconPosition: 'right' | 'left';\n  orientation: 'vertical' | 'horizontal';\n}\n\nexport const iconSizes = {\n  xs: 34,\n  sm: 36,\n  md: 42,\n  lg: 48,\n  xl: 52,\n};\n\nexport default createStyles(\n  (\n    theme,\n    { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }: StepStylesParams,\n    getRef\n  ) => {\n    const _iconSize = iconSize || theme.fn.size({ size, sizes: iconSizes });\n    const iconMargin = size === 'xl' || size === 'lg' ? theme.spacing.md : theme.spacing.sm;\n    const _radius = theme.fn.size({ size: radius, sizes: theme.radius });\n    const colors = theme.fn.variant({\n      variant: 'filled',\n      color: color || theme.primaryColor,\n      primaryFallback: false,\n    });\n    const separatorDistanceFromIcon = theme.spacing.xs / 2;\n\n    const verticalOrientationStyles = {\n      step: {\n        justifyContent: 'flex-start',\n        minHeight: `calc(${_iconSize}px + ${theme.spacing.xl}px + ${separatorDistanceFromIcon}px)`,\n        marginTop: `${separatorDistanceFromIcon}px`,\n        overflow: 'hidden',\n        '&:first-of-type': {\n          marginTop: 0,\n        },\n        [`&:last-of-type .${getRef('verticalSeparator')}`]: {\n          display: 'none',\n        },\n      },\n    } as const;\n\n    return {\n      stepLoader: {},\n\n      step: {\n        display: 'flex',\n        flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',\n        cursor: allowStepClick ? 'pointer' : 'default',\n        ...(orientation === 'vertical'\n          ? verticalOrientationStyles.step\n          : {\n              alignItems: 'center',\n            }),\n      },\n\n      stepWrapper: {\n        position: 'relative',\n      },\n\n      verticalSeparator: {\n        top: `${_iconSize + separatorDistanceFromIcon}px`,\n        left: `${_iconSize / 2}px`,\n        height: '100vh',\n        position: 'absolute',\n        borderLeft: `2px solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n        }`,\n        ref: getRef('verticalSeparator'),\n      },\n\n      verticalSeparatorActive: {\n        borderColor: theme.fn.variant({ variant: 'filled', color }).background,\n      },\n\n      stepIcon: {\n        boxSizing: 'border-box',\n        height: _iconSize,\n        width: _iconSize,\n        minWidth: _iconSize,\n        borderRadius: _radius,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n        border: `2px solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n        }`,\n        transition: 'background-color 150ms ease, border-color 150ms ease',\n        position: 'relative',\n        fontWeight: 700,\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n        fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n\n        '&[data-progress]': {\n          borderColor: colors.background,\n        },\n\n        '&[data-completed]': {\n          backgroundColor: colors.background,\n          borderColor: colors.background,\n          color: theme.white,\n        },\n      },\n\n      stepCompletedIcon: {\n        ...theme.fn.cover(),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        color: theme.white,\n      },\n\n      stepBody: {\n        display: 'flex',\n        flexDirection: 'column',\n        marginLeft: iconPosition === 'left' ? iconMargin : undefined,\n        marginRight: iconPosition === 'right' ? iconMargin : undefined,\n\n        ...(orientation === 'vertical'\n          ? {\n              marginTop:\n                _iconSize > theme.fn.size({ size, sizes: theme.fontSizes }) * 4\n                  ? _iconSize / 4\n                  : _iconSize / 12,\n            }\n          : null),\n      },\n\n      stepLabel: {\n        textAlign: iconPosition,\n        fontWeight: 500,\n        fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n        lineHeight: 1,\n      },\n\n      stepDescription: {\n        textAlign: iconPosition,\n        marginTop: theme.fn.size({ size, sizes: theme.spacing }) / 3,\n        marginBottom: theme.fn.size({ size, sizes: theme.spacing }) / 3,\n        fontSize: theme.fn.size({ size, sizes: theme.fontSizes }) - 2,\n        lineHeight: 1,\n      },\n    };\n  }\n);\n"],"names":["createStyles"],"mappings":"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"}
+{"version":3,"file":"Step.styles.js","sources":["../../../src/Stepper/Step/Step.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineColor,\n  MantineNumberSize,\n  getStylesRef,\n  rem,\n  getSize,\n} from '@mantine/styles';\n\nexport interface StepStylesParams {\n  color: MantineColor;\n  iconSize: number;\n  radius: MantineNumberSize;\n  allowStepClick: boolean;\n  iconPosition: 'right' | 'left';\n  orientation: 'vertical' | 'horizontal';\n}\n\nexport const iconSizes = {\n  xs: rem(34),\n  sm: rem(36),\n  md: rem(42),\n  lg: rem(48),\n  xl: rem(52),\n};\n\nexport default createStyles(\n  (\n    theme,\n    { color, iconSize, radius, allowStepClick, iconPosition, orientation }: StepStylesParams,\n    { size }\n  ) => {\n    const _iconSize = iconSize ? rem(iconSize) : getSize({ size, sizes: iconSizes });\n    const iconMargin = size === 'xl' || size === 'lg' ? theme.spacing.md : theme.spacing.sm;\n    const _radius = theme.fn.radius(radius);\n    const colors = theme.fn.variant({\n      variant: 'filled',\n      color: color || theme.primaryColor,\n      primaryFallback: false,\n    });\n    const separatorDistanceFromIcon = `calc(${theme.spacing.xs} / 2)`;\n\n    const verticalOrientationStyles = {\n      step: {\n        justifyContent: 'flex-start',\n        minHeight: `calc(${_iconSize} + ${theme.spacing.xl} + ${separatorDistanceFromIcon})`,\n        marginTop: separatorDistanceFromIcon,\n        overflow: 'hidden',\n        '&:first-of-type': {\n          marginTop: 0,\n        },\n        [`&:last-of-type .${getStylesRef('verticalSeparator')}`]: {\n          display: 'none',\n        },\n      },\n    } as const;\n\n    return {\n      stepLoader: {},\n\n      step: {\n        display: 'flex',\n        flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',\n        cursor: allowStepClick ? 'pointer' : 'default',\n        ...(orientation === 'vertical'\n          ? verticalOrientationStyles.step\n          : {\n              alignItems: 'center',\n            }),\n      },\n\n      stepWrapper: {\n        position: 'relative',\n      },\n\n      verticalSeparator: {\n        top: `calc(${_iconSize} + ${separatorDistanceFromIcon})`,\n        left: `calc(${_iconSize} / 2)`,\n        height: '100vh',\n        position: 'absolute',\n        borderLeft: `${rem(2)} solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n        }`,\n        ref: getStylesRef('verticalSeparator'),\n      },\n\n      verticalSeparatorActive: {\n        borderColor: theme.fn.variant({ variant: 'filled', color }).background,\n      },\n\n      stepIcon: {\n        boxSizing: 'border-box',\n        height: _iconSize,\n        width: _iconSize,\n        minWidth: _iconSize,\n        borderRadius: _radius,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],\n        border: `${rem(2)} solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]\n        }`,\n        transition: 'background-color 150ms ease, border-color 150ms ease',\n        position: 'relative',\n        fontWeight: 700,\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n        fontSize: getSize({ size, sizes: theme.fontSizes }),\n\n        '&[data-progress]': {\n          borderColor: colors.background,\n        },\n\n        '&[data-completed]': {\n          backgroundColor: colors.background,\n          borderColor: colors.background,\n          color: theme.white,\n        },\n      },\n\n      stepCompletedIcon: {\n        ...theme.fn.cover(),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        color: theme.white,\n      },\n\n      stepBody: {\n        display: 'flex',\n        flexDirection: 'column',\n        marginLeft: iconPosition === 'left' ? iconMargin : undefined,\n        marginRight: iconPosition === 'right' ? iconMargin : undefined,\n        ...(orientation === 'vertical' ? { marginTop: `calc(${iconSize} / 4)` } : null),\n      },\n\n      stepLabel: {\n        textAlign: iconPosition,\n        fontWeight: 500,\n        fontSize: getSize({ size, sizes: theme.fontSizes }),\n        lineHeight: 1,\n      },\n\n      stepDescription: {\n        textAlign: iconPosition,\n        marginTop: `calc(${getSize({ size, sizes: theme.spacing })} / 3)`,\n        marginBottom: `calc(${getSize({ size, sizes: theme.spacing })} / 3)`,\n        fontSize: `calc(${getSize({ size, sizes: theme.fontSizes })} - ${rem(2)})`,\n        lineHeight: 1,\n      },\n    };\n  }\n);\n"],"names":["rem","createStyles","getSize","getStylesRef"],"mappings":"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"}

package/cjs/Stepper/Stepper.js

@@ -70,7 +70,8 @@ const Stepper = React.forwardRef((props, ref) => {
     allowNextStepsSelect,
     classNames,
     styles: styles$1,
-    unstyled
+    unstyled,
+    variant
   } = _a, others = __objRest(_a, [
     "className",
     "children",
@@ -90,9 +91,10 @@ const Stepper = React.forwardRef((props, ref) => {
     "allowNextStepsSelect",
     "classNames",
     "styles",
-    "unstyled"
+    "unstyled",
+    "variant"
   ]);
-  const { classes, cx } = Stepper_styles['default']({ contentPadding, color, orientation, iconPosition, size, iconSize, breakpoint }, { classNames, styles: styles$1, unstyled, name: "Stepper" });
+  const { classes, cx } = Stepper_styles['default']({ contentPadding, color, orientation, iconPosition, iconSize, breakpoint }, { name: "Stepper", classNames, styles: styles$1, unstyled, variant, size });
   const convertedChildren = React.Children.toArray(children);
   const _children = convertedChildren.filter((child) => child.type !== StepCompleted.StepCompleted);
   const completedStep = convertedChildren.find((item) => item.type === StepCompleted.StepCompleted);
@@ -113,6 +115,7 @@ const Stepper = React.forwardRef((props, ref) => {
       icon: item.props.icon || icon || index + 1,
       key: index,
       step: index,
+      variant,
       state,
       onClick: () => isStepSelectionEnabled && onStepClick(index),
       allowStepClick: isStepSelectionEnabled,

package/cjs/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import React, { forwardRef, Children, cloneElement } from 'react';\nimport {\n  MantineColor,\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { Box } from '../Box';\nimport { Step, StepStylesNames, StepFragmentComponent } from './Step/Step';\nimport { StepCompleted } from './StepCompleted/StepCompleted';\nimport useStyles from './Stepper.styles';\n\nexport type StepperStylesNames = Selectors<typeof useStyles> | StepStylesNames;\n\nexport interface StepperProps\n  extends DefaultProps<StepperStylesNames>,\n    React.ComponentPropsWithRef<'div'> {\n  /** <Stepper.Step /> components only */\n  children: React.ReactNode;\n\n  /** Called when step is clicked */\n  onStepClick?(stepIndex: number): void;\n\n  /** Active step index */\n  active: number;\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  /** Active and progress Step colors from theme.colors */\n  color?: MantineColor;\n\n  /** Step icon size in px */\n  iconSize?: number;\n\n  /** Content padding-top from theme.spacing or number to set value in px */\n  contentPadding?: MantineNumberSize;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\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  /** Breakpoint at which orientation will change from horizontal to vertical */\n  breakpoint?: MantineNumberSize;\n\n  /** Whether to enable click on upcoming steps by default. Defaults to true **/\n  allowNextStepsSelect?: boolean;\n}\n\ntype StepperComponent = ForwardRefWithStaticComponents<\n  StepperProps,\n  {\n    Step: typeof Step;\n    Completed: typeof StepCompleted;\n  }\n>;\n\nconst defaultProps: Partial<StepperProps> = {\n  contentPadding: 'md',\n  size: 'md',\n  radius: 'xl',\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n};\n\nexport const Stepper: StepperComponent = forwardRef<HTMLDivElement, StepperProps>((props, ref) => {\n  const {\n    className,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    size,\n    radius,\n    orientation,\n    breakpoint,\n    iconPosition,\n    allowNextStepsSelect,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n  } = useComponentDefaultProps('Stepper', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { contentPadding, color, orientation, iconPosition, size, iconSize, breakpoint },\n    { classNames, styles, unstyled, name: 'Stepper' }\n  );\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter((child) => child.type !== StepCompleted);\n  const completedStep = convertedChildren.find((item) => item.type === StepCompleted);\n\n  const items = _children.reduce<React.ReactElement[]>((acc, item, index) => {\n    const state =\n      active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n    const shouldAllowSelect = () => {\n      if (typeof onStepClick !== 'function') {\n        return false;\n      }\n\n      if (typeof item.props.allowStepSelect === 'boolean') {\n        return item.props.allowStepSelect;\n      }\n\n      return state === 'stepCompleted' || allowNextStepsSelect;\n    };\n\n    const isStepSelectionEnabled = shouldAllowSelect();\n\n    acc.push(\n      cloneElement(item, {\n        __staticSelector: 'Stepper',\n        icon: item.props.icon || icon || index + 1,\n        key: index,\n        step: index,\n        state,\n        onClick: () => isStepSelectionEnabled && onStepClick(index),\n        allowStepClick: isStepSelectionEnabled,\n        completedIcon: item.props.completedIcon || completedIcon,\n        progressIcon: item.props.progressIcon || progressIcon,\n        color: item.props.color || color,\n        iconSize,\n        size,\n        radius,\n        classNames,\n        styles,\n        iconPosition: item.props.iconPosition || iconPosition,\n        orientation,\n        unstyled,\n      })\n    );\n\n    if (orientation === 'horizontal' && index !== _children.length - 1) {\n      acc.push(\n        <div\n          className={cx(classes.separator, { [classes.separatorActive]: index < active })}\n          key={`separator-${index}`}\n        />\n      );\n    }\n\n    return acc;\n  }, []);\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      <div className={classes.steps}>{items}</div>\n      {content && <div className={classes.content}>{content}</div>}\n    </Box>\n  );\n}) as any;\n\nStepper.Step = Step;\nStepper.Completed = StepCompleted;\nStepper.displayName = '@mantine/core/Stepper';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","Children","StepCompleted","cloneElement","React","Box","Step"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import React, { forwardRef, Children, cloneElement } from 'react';\nimport {\n  MantineColor,\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { Box } from '../Box';\nimport { Step, StepStylesNames, StepFragmentComponent } from './Step/Step';\nimport { StepCompleted } from './StepCompleted/StepCompleted';\nimport useStyles from './Stepper.styles';\n\nexport type StepperStylesNames = Selectors<typeof useStyles> | StepStylesNames;\n\nexport interface StepperProps\n  extends DefaultProps<StepperStylesNames>,\n    React.ComponentPropsWithRef<'div'> {\n  variant?: string;\n\n  /** <Stepper.Step /> components only */\n  children: React.ReactNode;\n\n  /** Called when step is clicked */\n  onStepClick?(stepIndex: number): void;\n\n  /** Active step index */\n  active: number;\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  /** Active and progress Step colors from theme.colors */\n  color?: MantineColor;\n\n  /** Step icon size */\n  iconSize?: number;\n\n  /** Key of theme.spacing or any valid CSS value to set content padding-top */\n  contentPadding?: MantineNumberSize;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\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  /** Breakpoint at which orientation will change from horizontal to vertical */\n  breakpoint?: MantineNumberSize;\n\n  /** Whether to enable click on upcoming steps by default. Defaults to true **/\n  allowNextStepsSelect?: boolean;\n}\n\ntype StepperComponent = ForwardRefWithStaticComponents<\n  StepperProps,\n  {\n    Step: typeof Step;\n    Completed: typeof StepCompleted;\n  }\n>;\n\nconst defaultProps: Partial<StepperProps> = {\n  contentPadding: 'md',\n  size: 'md',\n  radius: 'xl',\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n};\n\nexport const Stepper: StepperComponent = forwardRef<HTMLDivElement, StepperProps>((props, ref) => {\n  const {\n    className,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    size,\n    radius,\n    orientation,\n    breakpoint,\n    iconPosition,\n    allowNextStepsSelect,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Stepper', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { contentPadding, color, orientation, iconPosition, iconSize, breakpoint },\n    { name: 'Stepper', classNames, styles, unstyled, variant, size }\n  );\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter((child) => child.type !== StepCompleted);\n  const completedStep = convertedChildren.find((item) => item.type === StepCompleted);\n\n  const items = _children.reduce<React.ReactElement[]>((acc, item, index) => {\n    const state =\n      active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n    const shouldAllowSelect = () => {\n      if (typeof onStepClick !== 'function') {\n        return false;\n      }\n\n      if (typeof item.props.allowStepSelect === 'boolean') {\n        return item.props.allowStepSelect;\n      }\n\n      return state === 'stepCompleted' || allowNextStepsSelect;\n    };\n\n    const isStepSelectionEnabled = shouldAllowSelect();\n\n    acc.push(\n      cloneElement(item, {\n        __staticSelector: 'Stepper',\n        icon: item.props.icon || icon || index + 1,\n        key: index,\n        step: index,\n        variant,\n        state,\n        onClick: () => isStepSelectionEnabled && onStepClick(index),\n        allowStepClick: isStepSelectionEnabled,\n        completedIcon: item.props.completedIcon || completedIcon,\n        progressIcon: item.props.progressIcon || progressIcon,\n        color: item.props.color || color,\n        iconSize,\n        size,\n        radius,\n        classNames,\n        styles,\n        iconPosition: item.props.iconPosition || iconPosition,\n        orientation,\n        unstyled,\n      })\n    );\n\n    if (orientation === 'horizontal' && index !== _children.length - 1) {\n      acc.push(\n        <div\n          className={cx(classes.separator, { [classes.separatorActive]: index < active })}\n          key={`separator-${index}`}\n        />\n      );\n    }\n\n    return acc;\n  }, []);\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      <div className={classes.steps}>{items}</div>\n      {content && <div className={classes.content}>{content}</div>}\n    </Box>\n  );\n}) as any;\n\nStepper.Step = Step;\nStepper.Completed = StepCompleted;\nStepper.displayName = '@mantine/core/Stepper';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","Children","StepCompleted","cloneElement","React","Box","Step"],"mappings":"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"}

package/cjs/Stepper/Stepper.styles.js

@@ -24,38 +24,30 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var useStyles = styles.createStyles((theme, {
-  contentPadding,
-  color,
-  orientation,
-  iconPosition,
-  iconSize,
-  size,
-  breakpoint
-}) => {
+var useStyles = styles.createStyles((theme, { contentPadding, color, orientation, iconPosition, iconSize, breakpoint }, { size }) => {
   const shouldBeResponsive = typeof breakpoint !== "undefined";
-  const breakpointValue = theme.fn.size({ size: breakpoint, sizes: theme.breakpoints });
-  const separatorOffset = typeof iconSize !== "undefined" ? iconSize / 2 - 1 : theme.fn.size({ size, sizes: Step_styles.iconSizes }) / 2 - 1;
+  const breakpointValue = styles.getBreakpointValue(styles.getSize({ size: breakpoint, sizes: theme.breakpoints }));
+  const separatorOffset = typeof iconSize !== "undefined" ? `calc(${styles.rem(iconSize)} / 2 - ${styles.rem(1)})` : `calc(${styles.getSize({ size, sizes: Step_styles.iconSizes })} / 2 - ${styles.rem(1)})`;
   const verticalOrientationStyles = {
     steps: {
       flexDirection: "column",
       alignItems: iconPosition === "left" ? "flex-start" : "flex-end"
     },
     separator: {
-      width: 2,
+      width: styles.rem(2),
       minHeight: theme.spacing.xl,
       marginLeft: iconPosition === "left" ? separatorOffset : 0,
       marginRight: iconPosition === "right" ? separatorOffset : 0,
-      marginTop: `calc(${theme.spacing.xs}px / 2)`,
-      marginBottom: `calc(${theme.spacing.xs}px - 2px)`
+      marginTop: `calc(${theme.spacing.xs} / 2)`,
+      marginBottom: `calc(${theme.spacing.xs} - ${styles.rem(2)})`
     }
   };
   const responsiveStyles = {
     steps: {
-      [`@media (max-width: ${breakpointValue - 1}px)`]: verticalOrientationStyles.steps
+      [`@media (max-width: ${styles.rem(breakpointValue - 1)})`]: verticalOrientationStyles.steps
     },
     separator: {
-      [`@media (max-width: ${breakpointValue - 1}px)`]: verticalOrientationStyles.separator
+      [`@media (max-width: ${styles.rem(breakpointValue - 1)})`]: verticalOrientationStyles.separator
     }
   };
   return {
@@ -69,7 +61,7 @@ var useStyles = styles.createStyles((theme, {
       boxSizing: "border-box",
       transition: "background-color 150ms ease",
       flex: 1,
-      height: 2,
+      height: styles.rem(2),
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
       marginLeft: theme.spacing.md,
       marginRight: theme.spacing.md
@@ -82,7 +74,7 @@ var useStyles = styles.createStyles((theme, {
       }).background
     },
     content: __spreadProps(__spreadValues({}, theme.fn.fontStyles()), {
-      paddingTop: theme.fn.size({ size: contentPadding, sizes: theme.spacing })
+      paddingTop: styles.getSize({ size: contentPadding, sizes: theme.spacing })
     })
   };
 });

package/cjs/Stepper/Stepper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.styles.js","sources":["../../src/Stepper/Stepper.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, MantineSize } from '@mantine/styles';\nimport { iconSizes } from './Step/Step.styles';\n\nexport interface StepperStylesParams {\n  contentPadding: MantineNumberSize;\n  iconSize?: number;\n  size: MantineSize;\n  color: MantineColor;\n  orientation: 'vertical' | 'horizontal';\n  iconPosition: 'right' | 'left';\n  breakpoint: MantineNumberSize;\n}\n\nexport default createStyles(\n  (\n    theme,\n    {\n      contentPadding,\n      color,\n      orientation,\n      iconPosition,\n      iconSize,\n      size,\n      breakpoint,\n    }: StepperStylesParams\n  ) => {\n    const shouldBeResponsive = typeof breakpoint !== 'undefined';\n    const breakpointValue = theme.fn.size({ size: breakpoint, sizes: theme.breakpoints });\n    const separatorOffset =\n      typeof iconSize !== 'undefined'\n        ? iconSize / 2 - 1\n        : theme.fn.size({ size, sizes: iconSizes }) / 2 - 1;\n\n    const verticalOrientationStyles = {\n      steps: {\n        flexDirection: 'column',\n        alignItems: iconPosition === 'left' ? 'flex-start' : 'flex-end',\n      },\n\n      separator: {\n        width: 2,\n        minHeight: theme.spacing.xl,\n        marginLeft: iconPosition === 'left' ? separatorOffset : 0,\n        marginRight: iconPosition === 'right' ? separatorOffset : 0,\n        marginTop: `calc(${theme.spacing.xs}px / 2)`,\n        marginBottom: `calc(${theme.spacing.xs}px - 2px)`,\n      },\n    } as const;\n\n    const responsiveStyles = {\n      steps: {\n        [`@media (max-width: ${breakpointValue - 1}px)`]: verticalOrientationStyles.steps,\n      },\n\n      separator: {\n        [`@media (max-width: ${breakpointValue - 1}px)`]: verticalOrientationStyles.separator,\n      },\n    } as const;\n\n    return {\n      root: {},\n\n      steps: {\n        display: 'flex',\n        boxSizing: 'border-box',\n        alignItems: 'center',\n        ...(orientation === 'vertical' ? verticalOrientationStyles.steps : null),\n        ...(shouldBeResponsive ? responsiveStyles.steps : null),\n      },\n\n      separator: {\n        boxSizing: 'border-box',\n        transition: 'background-color 150ms ease',\n        flex: 1,\n        height: 2,\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n        marginLeft: theme.spacing.md,\n        marginRight: theme.spacing.md,\n        ...(orientation === 'vertical' ? verticalOrientationStyles.separator : null),\n        ...(shouldBeResponsive ? responsiveStyles.separator : null),\n      },\n\n      separatorActive: {\n        backgroundColor: theme.fn.variant({\n          variant: 'filled',\n          color: color || theme.primaryColor,\n          primaryFallback: false,\n        }).background,\n      },\n\n      content: {\n        ...theme.fn.fontStyles(),\n        paddingTop: theme.fn.size({ size: contentPadding, sizes: theme.spacing }),\n      },\n    };\n  }\n);\n"],"names":["createStyles","iconSizes"],"mappings":"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"}
+{"version":3,"file":"Stepper.styles.js","sources":["../../src/Stepper/Stepper.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineNumberSize,\n  MantineColor,\n  rem,\n  getBreakpointValue,\n  getSize,\n} from '@mantine/styles';\nimport { iconSizes } from './Step/Step.styles';\n\nexport interface StepperStylesParams {\n  contentPadding: MantineNumberSize;\n  iconSize?: number;\n  color: MantineColor;\n  orientation: 'vertical' | 'horizontal';\n  iconPosition: 'right' | 'left';\n  breakpoint: MantineNumberSize;\n}\n\nexport default createStyles(\n  (\n    theme,\n    { contentPadding, color, orientation, iconPosition, iconSize, breakpoint }: StepperStylesParams,\n    { size }\n  ) => {\n    const shouldBeResponsive = typeof breakpoint !== 'undefined';\n    const breakpointValue = getBreakpointValue(\n      getSize({ size: breakpoint, sizes: theme.breakpoints })\n    );\n    const separatorOffset =\n      typeof iconSize !== 'undefined'\n        ? `calc(${rem(iconSize)} / 2 - ${rem(1)})`\n        : `calc(${getSize({ size, sizes: iconSizes })} / 2 - ${rem(1)})`;\n\n    const verticalOrientationStyles = {\n      steps: {\n        flexDirection: 'column',\n        alignItems: iconPosition === 'left' ? 'flex-start' : 'flex-end',\n      },\n\n      separator: {\n        width: rem(2),\n        minHeight: theme.spacing.xl,\n        marginLeft: iconPosition === 'left' ? separatorOffset : 0,\n        marginRight: iconPosition === 'right' ? separatorOffset : 0,\n        marginTop: `calc(${theme.spacing.xs} / 2)`,\n        marginBottom: `calc(${theme.spacing.xs} - ${rem(2)})`,\n      },\n    } as const;\n\n    const responsiveStyles = {\n      steps: {\n        [`@media (max-width: ${rem(breakpointValue - 1)})`]: verticalOrientationStyles.steps,\n      },\n\n      separator: {\n        [`@media (max-width: ${rem(breakpointValue - 1)})`]: verticalOrientationStyles.separator,\n      },\n    } as const;\n\n    return {\n      root: {},\n\n      steps: {\n        display: 'flex',\n        boxSizing: 'border-box',\n        alignItems: 'center',\n        ...(orientation === 'vertical' ? verticalOrientationStyles.steps : null),\n        ...(shouldBeResponsive ? responsiveStyles.steps : null),\n      },\n\n      separator: {\n        boxSizing: 'border-box',\n        transition: 'background-color 150ms ease',\n        flex: 1,\n        height: rem(2),\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n        marginLeft: theme.spacing.md,\n        marginRight: theme.spacing.md,\n        ...(orientation === 'vertical' ? verticalOrientationStyles.separator : null),\n        ...(shouldBeResponsive ? responsiveStyles.separator : null),\n      },\n\n      separatorActive: {\n        backgroundColor: theme.fn.variant({\n          variant: 'filled',\n          color: color || theme.primaryColor,\n          primaryFallback: false,\n        }).background,\n      },\n\n      content: {\n        ...theme.fn.fontStyles(),\n        paddingTop: getSize({ size: contentPadding, sizes: theme.spacing }),\n      },\n    };\n  }\n);\n"],"names":["createStyles","getBreakpointValue","getSize","rem","iconSizes"],"mappings":"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"}

package/cjs/Switch/Switch.js

@@ -78,7 +78,8 @@ const Switch = React.forwardRef((props, ref) => {
     labelPosition,
     description,
     error,
-    disabled
+    disabled,
+    variant
   } = _a, others = __objRest(_a, [
     "className",
     "color",
@@ -102,10 +103,12 @@ const Switch = React.forwardRef((props, ref) => {
     "labelPosition",
     "description",
     "error",
-    "disabled"
+    "disabled",
+    "variant"
   ]);
   const ctx = SwitchGroup_context.useSwitchGroupContext();
-  const { classes } = Switch_styles['default']({ size: (ctx == null ? void 0 : ctx.size) || size, color, radius, labelPosition, error: !!error }, { unstyled, styles: styles$1, classNames, name: "Switch" });
+  const _size = (ctx == null ? void 0 : ctx.size) || size;
+  const { classes } = Switch_styles['default']({ color, radius, labelPosition, error: !!error }, { name: "Switch", classNames, styles: styles$1, unstyled, size: _size, variant });
   const { systemStyles, rest } = extractSystemStyles.extractSystemStyles(others);
   const uuid = hooks.useId(id);
   const contextProps = ctx ? {
@@ -132,7 +135,8 @@ const Switch = React.forwardRef((props, ref) => {
     classNames,
     styles: styles$1,
     unstyled,
-    "data-checked": contextProps.checked || void 0
+    "data-checked": contextProps.checked || void 0,
+    variant
   }, systemStyles), wrapperProps), /* @__PURE__ */ React__default.createElement("input", __spreadProps(__spreadValues({}, rest), {
     disabled,
     checked: _checked,

package/cjs/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { extractSystemStyles } from '../Box';\nimport { SwitchGroup } from './SwitchGroup/SwitchGroup';\nimport { useSwitchGroupContext } from './SwitchGroup.context';\nimport { InlineInput, InlineInputStylesNames } from '../InlineInput';\nimport useStyles, { SwitchStylesParams } from './Switch.styles';\n\nexport type SwitchStylesNames = Selectors<typeof useStyles> | InlineInputStylesNames;\n\nexport interface SwitchProps\n  extends DefaultProps<SwitchStylesNames, SwitchStylesParams>,\n    Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {\n  /** Id is used to bind input and label, if not passed unique id will be generated for each input */\n  id?: string;\n\n  /** Switch label */\n  label?: React.ReactNode;\n\n  /** Inner label when Switch is in unchecked state */\n  offLabel?: React.ReactNode;\n\n  /** Inner label when Switch is in checked state */\n  onLabel?: React.ReactNode;\n\n  /** Switch checked state color from theme.colors, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Predefined size value */\n  size?: MantineSize;\n\n  /** Radius from theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Props spread to wrapper element */\n  wrapperProps?: Record<string, any>;\n\n  /** Icon inside the thumb of switch */\n  thumbIcon?: React.ReactNode;\n\n  /** Position of label */\n  labelPosition?: 'left' | 'right';\n\n  /** description, displayed after label */\n  description?: React.ReactNode;\n\n  /** Displays error message after input */\n  error?: React.ReactNode;\n}\n\nconst defaultProps: Partial<SwitchProps> = {\n  offLabel: '',\n  onLabel: '',\n  size: 'sm',\n  radius: 'xl',\n  error: false,\n};\n\ntype SwitchComponent = ForwardRefWithStaticComponents<SwitchProps, { Group: typeof SwitchGroup }>;\n\nexport const Switch: SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {\n  const {\n    className,\n    color,\n    label,\n    offLabel,\n    onLabel,\n    id,\n    style,\n    size,\n    radius,\n    wrapperProps,\n    children,\n    unstyled,\n    styles,\n    classNames,\n    thumbIcon,\n    sx,\n    checked,\n    defaultChecked,\n    onChange,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    ...others\n  } = useComponentDefaultProps('Switch', defaultProps, props);\n\n  const ctx = useSwitchGroupContext();\n\n  const { classes } = useStyles(\n    { size: ctx?.size || size, color, radius, labelPosition, error: !!error },\n    { unstyled, styles, classNames, name: 'Switch' }\n  );\n\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const uuid = useId(id);\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.value.includes(rest.value as string),\n        onChange: ctx.onChange,\n      }\n    : {};\n\n  const [_checked, handleChange] = useUncontrolled({\n    value: contextProps.checked ?? checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n  });\n\n  return (\n    <InlineInput\n      className={className}\n      sx={sx}\n      style={style}\n      id={uuid}\n      size={ctx?.size || size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={disabled}\n      __staticSelector=\"Switch\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={contextProps.checked || undefined}\n      {...systemStyles}\n      {...wrapperProps}\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        checked={_checked}\n        onChange={(event) => {\n          ctx ? contextProps.onChange(event) : onChange?.(event);\n          handleChange(event.currentTarget.checked);\n        }}\n        id={uuid}\n        ref={ref}\n        type=\"checkbox\"\n        className={classes.input}\n      />\n\n      <label htmlFor={uuid} className={classes.track}>\n        <div className={classes.thumb}>{thumbIcon}</div>\n        <div className={classes.trackLabel}>{_checked ? onLabel : offLabel}</div>\n      </label>\n    </InlineInput>\n  );\n}) as any;\n\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n"],"names":["forwardRef","useComponentDefaultProps","styles","useSwitchGroupContext","useStyles","extractSystemStyles","useId","useUncontrolled","React","InlineInput","SwitchGroup"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { extractSystemStyles } from '../Box';\nimport { SwitchGroup } from './SwitchGroup/SwitchGroup';\nimport { useSwitchGroupContext } from './SwitchGroup.context';\nimport { InlineInput, InlineInputStylesNames } from '../InlineInput';\nimport useStyles, { SwitchStylesParams } from './Switch.styles';\n\nexport type SwitchStylesNames = Selectors<typeof useStyles> | InlineInputStylesNames;\n\nexport interface SwitchProps\n  extends DefaultProps<SwitchStylesNames, SwitchStylesParams>,\n    Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {\n  variant?: string;\n\n  /** Id is used to bind input and label, if not passed unique id will be generated for each input */\n  id?: string;\n\n  /** Switch label */\n  label?: React.ReactNode;\n\n  /** Inner label when Switch is in unchecked state */\n  offLabel?: React.ReactNode;\n\n  /** Inner label when Switch is in checked state */\n  onLabel?: React.ReactNode;\n\n  /** Switch checked state color from theme.colors, defaults to theme.primaryColor */\n  color?: MantineColor;\n\n  /** Predefined size value */\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  /** Props spread to wrapper element */\n  wrapperProps?: Record<string, any>;\n\n  /** Icon inside the thumb of switch */\n  thumbIcon?: React.ReactNode;\n\n  /** Position of label */\n  labelPosition?: 'left' | 'right';\n\n  /** description, displayed after label */\n  description?: React.ReactNode;\n\n  /** Displays error message after input */\n  error?: React.ReactNode;\n}\n\nconst defaultProps: Partial<SwitchProps> = {\n  offLabel: '',\n  onLabel: '',\n  size: 'sm',\n  radius: 'xl',\n  error: false,\n};\n\ntype SwitchComponent = ForwardRefWithStaticComponents<SwitchProps, { Group: typeof SwitchGroup }>;\n\nexport const Switch: SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {\n  const {\n    className,\n    color,\n    label,\n    offLabel,\n    onLabel,\n    id,\n    style,\n    size,\n    radius,\n    wrapperProps,\n    children,\n    unstyled,\n    styles,\n    classNames,\n    thumbIcon,\n    sx,\n    checked,\n    defaultChecked,\n    onChange,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Switch', defaultProps, props);\n\n  const ctx = useSwitchGroupContext();\n  const _size = ctx?.size || size;\n\n  const { classes } = useStyles(\n    { color, radius, labelPosition, error: !!error },\n    { name: 'Switch', classNames, styles, unstyled, size: _size, variant }\n  );\n\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const uuid = useId(id);\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.value.includes(rest.value as string),\n        onChange: ctx.onChange,\n      }\n    : {};\n\n  const [_checked, handleChange] = useUncontrolled({\n    value: contextProps.checked ?? checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n  });\n\n  return (\n    <InlineInput\n      className={className}\n      sx={sx}\n      style={style}\n      id={uuid}\n      size={ctx?.size || size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={disabled}\n      __staticSelector=\"Switch\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={contextProps.checked || undefined}\n      variant={variant}\n      {...systemStyles}\n      {...wrapperProps}\n    >\n      <input\n        {...rest}\n        disabled={disabled}\n        checked={_checked}\n        onChange={(event) => {\n          ctx ? contextProps.onChange(event) : onChange?.(event);\n          handleChange(event.currentTarget.checked);\n        }}\n        id={uuid}\n        ref={ref}\n        type=\"checkbox\"\n        className={classes.input}\n      />\n\n      <label htmlFor={uuid} className={classes.track}>\n        <div className={classes.thumb}>{thumbIcon}</div>\n        <div className={classes.trackLabel}>{_checked ? onLabel : offLabel}</div>\n      </label>\n    </InlineInput>\n  );\n}) as any;\n\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n"],"names":["forwardRef","useComponentDefaultProps","styles","useSwitchGroupContext","useStyles","extractSystemStyles","useId","useUncontrolled","React","InlineInput","SwitchGroup"],"mappings":"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"}