@mantine/core 5.10.2 → 6.0.0-alpha.1

package/cjs/Popover/Popover.js

@@ -91,7 +91,9 @@ function Popover(props) {
     __staticSelector,
     withRoles,
     disabled,
-    returnFocus
+    returnFocus,
+    variant,
+    keepMounted
   } = _a, others = __objRest(_a, [
     "children",
     "position",
@@ -128,7 +130,9 @@ function Popover(props) {
     "__staticSelector",
     "withRoles",
     "disabled",
-    "returnFocus"
+    "returnFocus",
+    "variant",
+    "keepMounted"
   ]);
   const [targetNode, setTargetNode] = React.useState(null);
   const [dropdownNode, setDropdownNode] = React.useState(null);
@@ -199,7 +203,9 @@ function Popover(props) {
       __staticSelector,
       classNames,
       styles: styles$1,
-      unstyled
+      unstyled,
+      variant,
+      keepMounted
     }
   }, children);
 }

package/cjs/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n\nimport React, { useRef, useState, useCallback } from 'react';\nimport { useId, useClickOutside } from '@mantine/hooks';\nimport {\n  useMantineTheme,\n  ClassNames,\n  Styles,\n  MantineNumberSize,\n  MantineShadow,\n  getDefaultZIndex,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { MantineTransition } from '../Transition';\nimport { getFloatingPosition, FloatingPosition, ArrowPosition } from '../Floating';\nimport { usePopover } from './use-popover';\nimport { PopoverContextProvider } from './Popover.context';\nimport {\n  PopoverWidth,\n  PopoverMiddlewares,\n  PopoverStylesNames,\n  PopoverStylesParams,\n} from './Popover.types';\nimport { PopoverTarget } from './PopoverTarget/PopoverTarget';\nimport { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';\n\nexport interface PopoverBaseProps {\n  /** Dropdown position relative to target */\n  position?: FloatingPosition;\n\n  /** Space between target element and dropdown in px */\n  offset?: number;\n\n  /** Called when dropdown position changes */\n  onPositionChange?(position: FloatingPosition): void;\n\n  /** useEffect dependencies to force update dropdown position */\n  positionDependencies?: any[];\n\n  /** Called when dropdown closes */\n  onClose?(): void;\n\n  /** Called when dropdown opens */\n  onOpen?(): void;\n\n  /** One of premade transitions ot transition object */\n  transition?: MantineTransition;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Exit transition duration in ms */\n  exitTransitionDuration?: number;\n\n  /** Dropdown width, or 'target' to make dropdown width the same as target element */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow */\n  withArrow?: boolean;\n\n  /** Arrow size in px */\n  arrowSize?: number;\n\n  /** Arrow offset in px */\n  arrowOffset?: number;\n\n  /** Arrow radius in px */\n  arrowRadius?: number;\n\n  /** Arrow position **/\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within Portal, defaults to false */\n  withinPortal?: boolean;\n\n  /** Dropdown z-index */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Radius from theme.radius or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Key of theme.shadow or any other valid css box-shadow value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not render */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes, false by default */\n  returnFocus?: boolean;\n}\n\nexport interface PopoverProps extends PopoverBaseProps {\n  /** Popover.Target and Popover.Dropdown components */\n  children: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controls dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?(opened: boolean): void;\n\n  /** Determines whether dropdown should be closed on outside clicks, default to true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown, default to false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when Escape key is pressed, defaults to true */\n  closeOnEscape?: boolean;\n\n  /** id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target element should have accessible roles, defaults to true */\n  withRoles?: boolean;\n\n  unstyled?: boolean;\n  classNames?: ClassNames<PopoverStylesNames>;\n  styles?: Styles<PopoverStylesNames, PopoverStylesParams>;\n  __staticSelector?: string;\n}\n\nconst defaultProps: Partial<PopoverProps> = {\n  position: 'bottom',\n  offset: 8,\n  positionDependencies: [],\n  transition: 'fade',\n  transitionDuration: 150,\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: false,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n};\n\nexport function Popover(props: PopoverProps) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    positionDependencies,\n    opened,\n    transition,\n    transitionDuration,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    exitTransitionDuration,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    ...others\n  } = useComponentDefaultProps('Popover', defaultProps, props);\n\n  const [targetNode, setTargetNode] = useState<HTMLElement>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement>(null);\n\n  const uid = useId(id);\n  const theme = useMantineTheme();\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(theme.dir, position),\n    offset: offset + (withArrow ? arrowSize / 2 : 0),\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    positionDependencies,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n  });\n\n  useClickOutside(() => closeOnClickOutside && popover.onClose(), clickOutsideEvents, [\n    targetNode,\n    dropdownNode,\n  ]);\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.reference(node);\n    },\n    [popover.floating.reference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.floating(node);\n    },\n    [popover.floating.floating]\n  );\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transition,\n        transitionDuration,\n        exitTransitionDuration,\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => `${uid}-target`,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n      }}\n    >\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.displayName = '@mantine/core/Popover';\n"],"names":["getDefaultZIndex","useRef","useComponentDefaultProps","styles","useState","useId","useMantineTheme","usePopover","getFloatingPosition","useClickOutside","useCallback","React","PopoverContextProvider","PopoverTarget","PopoverDropdown"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n\nimport React, { useRef, useState, useCallback } from 'react';\nimport { useId, useClickOutside } from '@mantine/hooks';\nimport {\n  useMantineTheme,\n  ClassNames,\n  Styles,\n  MantineNumberSize,\n  MantineShadow,\n  getDefaultZIndex,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { MantineTransition } from '../Transition';\nimport { getFloatingPosition, FloatingPosition, ArrowPosition } from '../Floating';\nimport { usePopover } from './use-popover';\nimport { PopoverContextProvider } from './Popover.context';\nimport {\n  PopoverWidth,\n  PopoverMiddlewares,\n  PopoverStylesNames,\n  PopoverStylesParams,\n} from './Popover.types';\nimport { PopoverTarget } from './PopoverTarget/PopoverTarget';\nimport { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';\n\nexport interface PopoverBaseProps {\n  /** Dropdown position relative to target */\n  position?: FloatingPosition;\n\n  /** Space between target element and dropdown */\n  offset?: number;\n\n  /** Called when dropdown position changes */\n  onPositionChange?(position: FloatingPosition): void;\n\n  /** useEffect dependencies to force update dropdown position */\n  positionDependencies?: any[];\n\n  /** Called when dropdown closes */\n  onClose?(): void;\n\n  /** Called when dropdown opens */\n  onOpen?(): void;\n\n  /** If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead */\n  keepMounted?: boolean;\n\n  /** One of premade transitions ot transition object */\n  transition?: MantineTransition;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Exit transition duration in ms */\n  exitTransitionDuration?: number;\n\n  /** Dropdown width, or 'target' to make dropdown width the same as target element */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow */\n  withArrow?: boolean;\n\n  /** Arrow size */\n  arrowSize?: number;\n\n  /** Arrow offset */\n  arrowOffset?: number;\n\n  /** Arrow border-radius */\n  arrowRadius?: number;\n\n  /** Arrow position **/\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within Portal, defaults to false */\n  withinPortal?: boolean;\n\n  /** Dropdown z-index */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n  radius?: MantineNumberSize;\n\n  /** Key of theme.shadow or any other valid css box-shadow value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not render */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes, false by default */\n  returnFocus?: boolean;\n}\n\nexport interface PopoverProps extends PopoverBaseProps {\n  /** Popover.Target and Popover.Dropdown components */\n  children: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controls dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?(opened: boolean): void;\n\n  /** Determines whether dropdown should be closed on outside clicks, default to true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown, default to false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when Escape key is pressed, defaults to true */\n  closeOnEscape?: boolean;\n\n  /** id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target element should have accessible roles, defaults to true */\n  withRoles?: boolean;\n\n  variant?: string;\n  unstyled?: boolean;\n  classNames?: ClassNames<PopoverStylesNames>;\n  styles?: Styles<PopoverStylesNames, PopoverStylesParams>;\n  __staticSelector?: string;\n}\n\nconst defaultProps: Partial<PopoverProps> = {\n  position: 'bottom',\n  offset: 8,\n  positionDependencies: [],\n  transition: 'fade',\n  transitionDuration: 150,\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: false,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n};\n\nexport function Popover(props: PopoverProps) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    positionDependencies,\n    opened,\n    transition,\n    transitionDuration,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    exitTransitionDuration,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    ...others\n  } = useComponentDefaultProps('Popover', defaultProps, props);\n\n  const [targetNode, setTargetNode] = useState<HTMLElement>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement>(null);\n\n  const uid = useId(id);\n  const theme = useMantineTheme();\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(theme.dir, position),\n    offset: offset + (withArrow ? arrowSize / 2 : 0),\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    positionDependencies,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n  });\n\n  useClickOutside(() => closeOnClickOutside && popover.onClose(), clickOutsideEvents, [\n    targetNode,\n    dropdownNode,\n  ]);\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.reference(node);\n    },\n    [popover.floating.reference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.floating(node);\n    },\n    [popover.floating.floating]\n  );\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transition,\n        transitionDuration,\n        exitTransitionDuration,\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => `${uid}-target`,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n      }}\n    >\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.displayName = '@mantine/core/Popover';\n"],"names":["getDefaultZIndex","useRef","useComponentDefaultProps","styles","useState","useId","useMantineTheme","usePopover","getFloatingPosition","useClickOutside","useCallback","React","PopoverContextProvider","PopoverTarget","PopoverDropdown"],"mappings":"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"}

package/cjs/Popover/PopoverDropdown/PopoverDropdown.js

@@ -57,7 +57,8 @@ function PopoverDropdown(props) {
     name: ctx.__staticSelector,
     classNames: ctx.classNames,
     styles: ctx.styles,
-    unstyled: ctx.unstyled
+    unstyled: ctx.unstyled,
+    variant: ctx.variant
   });
   const returnFocus = hooks.useFocusReturn({
     opened: ctx.opened,
@@ -77,6 +78,7 @@ function PopoverDropdown(props) {
     mounted: ctx.opened,
     transition: ctx.transition,
     duration: ctx.transitionDuration,
+    keepMounted: ctx.keepMounted,
     exitDuration: typeof ctx.exitTransitionDuration === "number" ? ctx.exitTransitionDuration : ctx.transitionDuration
   }, (transitionStyles) => {
     var _a2, _b;
@@ -90,7 +92,7 @@ function PopoverDropdown(props) {
         zIndex: ctx.zIndex,
         top: (_a2 = ctx.y) != null ? _a2 : 0,
         left: (_b = ctx.x) != null ? _b : 0,
-        width: ctx.width === "target" ? void 0 : ctx.width
+        width: ctx.width === "target" ? void 0 : styles.rem(ctx.width)
       }),
       className: cx(classes.dropdown, className),
       onKeyDownCapture: utils.closeOnEscape(ctx.onClose, {

package/cjs/Popover/PopoverDropdown/PopoverDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverDropdown.js","sources":["../../../src/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, useComponentDefaultProps } from '@mantine/styles';\nimport { closeOnEscape } from '@mantine/utils';\nimport { useFocusReturn } from '@mantine/hooks';\nimport { FloatingArrow } from '../../Floating';\nimport { Box } from '../../Box';\nimport { Transition } from '../../Transition';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { usePopoverContext } from '../Popover.context';\nimport useStyles from './PopoverDropdown.styles';\n\nexport interface PopoverDropdownProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Dropdown content */\n  children?: React.ReactNode;\n}\n\nconst defaultProps: Partial<PopoverDropdownProps> = {};\n\nexport function PopoverDropdown(props: PopoverDropdownProps) {\n  const { style, className, children, onKeyDownCapture, ...others } = useComponentDefaultProps(\n    'PopoverDropdown',\n    defaultProps,\n    props\n  );\n\n  const ctx = usePopoverContext();\n  const { classes, cx } = useStyles(\n    { radius: ctx.radius, shadow: ctx.shadow },\n    {\n      name: ctx.__staticSelector,\n      classNames: ctx.classNames,\n      styles: ctx.styles,\n      unstyled: ctx.unstyled,\n    }\n  );\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n      }\n    : {};\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        transition={ctx.transition}\n        duration={ctx.transitionDuration}\n        exitDuration={\n          typeof ctx.exitTransitionDuration === 'number'\n            ? ctx.exitTransitionDuration\n            : ctx.transitionDuration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus}>\n            <Box\n              {...accessibleProps}\n              tabIndex={-1}\n              key={ctx.placement}\n              ref={ctx.floating}\n              style={{\n                ...style,\n                ...transitionStyles,\n                zIndex: ctx.zIndex,\n                top: ctx.y ?? 0,\n                left: ctx.x ?? 0,\n                width: ctx.width === 'target' ? undefined : ctx.width,\n              }}\n              className={cx(classes.dropdown, className)}\n              onKeyDownCapture={closeOnEscape(ctx.onClose, {\n                active: ctx.closeOnEscape,\n                onTrigger: returnFocus,\n                onKeyDown: onKeyDownCapture,\n              })}\n              data-position={ctx.placement}\n              {...others}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                withBorder\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                className={classes.arrow}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n}\n\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"names":["useComponentDefaultProps","usePopoverContext","useStyles","useFocusReturn","React","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","FloatingArrow"],"mappings":"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"}
+{"version":3,"file":"PopoverDropdown.js","sources":["../../../src/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, useComponentDefaultProps, rem } from '@mantine/styles';\nimport { closeOnEscape } from '@mantine/utils';\nimport { useFocusReturn } from '@mantine/hooks';\nimport { FloatingArrow } from '../../Floating';\nimport { Box } from '../../Box';\nimport { Transition } from '../../Transition';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { usePopoverContext } from '../Popover.context';\nimport useStyles from './PopoverDropdown.styles';\n\nexport interface PopoverDropdownProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Dropdown content */\n  children?: React.ReactNode;\n}\n\nconst defaultProps: Partial<PopoverDropdownProps> = {};\n\nexport function PopoverDropdown(props: PopoverDropdownProps) {\n  const { style, className, children, onKeyDownCapture, ...others } = useComponentDefaultProps(\n    'PopoverDropdown',\n    defaultProps,\n    props\n  );\n\n  const ctx = usePopoverContext();\n  const { classes, cx } = useStyles(\n    { radius: ctx.radius, shadow: ctx.shadow },\n    {\n      name: ctx.__staticSelector,\n      classNames: ctx.classNames,\n      styles: ctx.styles,\n      unstyled: ctx.unstyled,\n      variant: ctx.variant,\n    }\n  );\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n      }\n    : {};\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        transition={ctx.transition}\n        duration={ctx.transitionDuration}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.exitTransitionDuration === 'number'\n            ? ctx.exitTransitionDuration\n            : ctx.transitionDuration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus}>\n            <Box\n              {...accessibleProps}\n              tabIndex={-1}\n              key={ctx.placement}\n              ref={ctx.floating}\n              style={{\n                ...style,\n                ...transitionStyles,\n                zIndex: ctx.zIndex,\n                top: ctx.y ?? 0,\n                left: ctx.x ?? 0,\n                width: ctx.width === 'target' ? undefined : rem(ctx.width),\n              }}\n              className={cx(classes.dropdown, className)}\n              onKeyDownCapture={closeOnEscape(ctx.onClose, {\n                active: ctx.closeOnEscape,\n                onTrigger: returnFocus,\n                onKeyDown: onKeyDownCapture,\n              })}\n              data-position={ctx.placement}\n              {...others}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                withBorder\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                className={classes.arrow}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n}\n\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"names":["useComponentDefaultProps","usePopoverContext","useStyles","useFocusReturn","React","OptionalPortal","Transition","FocusTrap","Box","rem","closeOnEscape","FloatingArrow"],"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;AAClE,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,YAAY,GAAG,EAAE,CAAC;AACjB,SAAS,eAAe,CAAC,KAAK,EAAE;AACvC,EAAE,MAAM,EAAE,GAAGA,+BAAwB,CAAC,iBAAiB,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;AACrN,EAAE,MAAM,GAAG,GAAGC,iCAAiB,EAAE,CAAC;AAClC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAGC,iCAAS,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,EAAE;AAChF,IAAI,IAAI,EAAE,GAAG,CAAC,gBAAgB;AAC9B,IAAI,UAAU,EAAE,GAAG,CAAC,UAAU;AAC9B,IAAI,MAAM,EAAE,GAAG,CAAC,MAAM;AACtB,IAAI,QAAQ,EAAE,GAAG,CAAC,QAAQ;AAC1B,IAAI,OAAO,EAAE,GAAG,CAAC,OAAO;AACxB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,WAAW,GAAGC,oBAAc,CAAC;AACrC,IAAI,MAAM,EAAE,GAAG,CAAC,MAAM;AACtB,IAAI,iBAAiB,EAAE,GAAG,CAAC,WAAW;AACtC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,eAAe,GAAG,GAAG,CAAC,SAAS,GAAG;AAC1C,IAAI,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE;AACxC,IAAI,EAAE,EAAE,GAAG,CAAC,aAAa,EAAE;AAC3B,IAAI,IAAI,EAAE,QAAQ;AAClB,GAAG,GAAG,EAAE,CAAC;AACT,EAAE,IAAI,GAAG,CAAC,QAAQ,EAAE;AACpB,IAAI,OAAO,IAAI,CAAC;AAChB,GAAG;AACH,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,6BAAc,EAAE;AAC7D,IAAI,YAAY,EAAE,GAAG,CAAC,YAAY;AAClC,GAAG,kBAAkBD,cAAK,CAAC,aAAa,CAACE,qBAAU,EAAE;AACrD,IAAI,OAAO,EAAE,GAAG,CAAC,MAAM;AACvB,IAAI,UAAU,EAAE,GAAG,CAAC,UAAU;AAC9B,IAAI,QAAQ,EAAE,GAAG,CAAC,kBAAkB;AACpC,IAAI,WAAW,EAAE,GAAG,CAAC,WAAW;AAChC,IAAI,YAAY,EAAE,OAAO,GAAG,CAAC,sBAAsB,KAAK,QAAQ,GAAG,GAAG,CAAC,sBAAsB,GAAG,GAAG,CAAC,kBAAkB;AACtH,GAAG,EAAE,CAAC,gBAAgB,KAAK;AAC3B,IAAI,IAAI,GAAG,EAAE,EAAE,CAAC;AAChB,IAAI,uBAAuBF,cAAK,CAAC,aAAa,CAACG,mBAAS,EAAE;AAC1D,MAAM,MAAM,EAAE,GAAG,CAAC,SAAS;AAC3B,KAAK,kBAAkBH,cAAK,CAAC,aAAa,CAACI,OAAG,EAAE,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,eAAe,CAAC,EAAE;AAClH,MAAM,QAAQ,EAAE,CAAC,CAAC;AAClB,MAAM,GAAG,EAAE,GAAG,CAAC,SAAS;AACxB,MAAM,GAAG,EAAE,GAAG,CAAC,QAAQ;AACvB,MAAM,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,gBAAgB,CAAC,EAAE;AACxF,QAAQ,MAAM,EAAE,GAAG,CAAC,MAAM;AAC1B,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC;AAC5C,QAAQ,IAAI,EAAE,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC;AAC3C,QAAQ,KAAK,EAAE,GAAG,CAAC,KAAK,KAAK,QAAQ,GAAG,KAAK,CAAC,GAAGC,UAAG,CAAC,GAAG,CAAC,KAAK,CAAC;AAC/D,OAAO,CAAC;AACR,MAAM,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC;AAChD,MAAM,gBAAgB,EAAEC,mBAAa,CAAC,GAAG,CAAC,OAAO,EAAE;AACnD,QAAQ,MAAM,EAAE,GAAG,CAAC,aAAa;AACjC,QAAQ,SAAS,EAAE,WAAW;AAC9B,QAAQ,SAAS,EAAE,gBAAgB;AACnC,OAAO,CAAC;AACR,MAAM,eAAe,EAAE,GAAG,CAAC,SAAS;AACpC,KAAK,CAAC,EAAE,MAAM,CAAC,EAAE,QAAQ,kBAAkBN,cAAK,CAAC,aAAa,CAACO,2BAAa,EAAE;AAC9E,MAAM,GAAG,EAAE,GAAG,CAAC,QAAQ;AACvB,MAAM,MAAM,EAAE,GAAG,CAAC,MAAM;AACxB,MAAM,MAAM,EAAE,GAAG,CAAC,MAAM;AACxB,MAAM,OAAO,EAAE,GAAG,CAAC,SAAS;AAC5B,MAAM,UAAU,EAAE,IAAI;AACtB,MAAM,QAAQ,EAAE,GAAG,CAAC,SAAS;AAC7B,MAAM,SAAS,EAAE,GAAG,CAAC,SAAS;AAC9B,MAAM,WAAW,EAAE,GAAG,CAAC,WAAW;AAClC,MAAM,WAAW,EAAE,GAAG,CAAC,WAAW;AAClC,MAAM,aAAa,EAAE,GAAG,CAAC,aAAa;AACtC,MAAM,SAAS,EAAE,OAAO,CAAC,KAAK;AAC9B,KAAK,CAAC,CAAC,CAAC,CAAC;AACT,GAAG,CAAC,CAAC,CAAC;AACN,CAAC;AACD,eAAe,CAAC,WAAW,GAAG,+BAA+B;;;;"}

package/cjs/Popover/PopoverDropdown/PopoverDropdown.styles.js

@@ -9,8 +9,8 @@ var useStyles = styles.createStyles((theme, { radius, shadow }) => ({
     position: "absolute",
     backgroundColor: theme.white,
     background: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
-    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
-    padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
+    border: `${styles.rem(1)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
+    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
     boxShadow: theme.shadows[shadow] || shadow || "none",
     borderRadius: theme.fn.radius(radius),
     "&:focus": {
@@ -19,7 +19,7 @@ var useStyles = styles.createStyles((theme, { radius, shadow }) => ({
   },
   arrow: {
     backgroundColor: "inherit",
-    border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
+    border: `${styles.rem(1)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
     zIndex: 1
   }
 }));

package/cjs/Popover/PopoverDropdown/PopoverDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverDropdown.styles.js","sources":["../../../src/Popover/PopoverDropdown/PopoverDropdown.styles.ts"],"sourcesContent":["import { createStyles, MantineShadow, MantineNumberSize } from '@mantine/styles';\n\nexport interface PopoverStylesParams {\n  radius?: MantineNumberSize;\n  shadow?: MantineShadow;\n}\n\nexport default createStyles((theme, { radius, shadow }: PopoverStylesParams) => ({\n  dropdown: {\n    position: 'absolute',\n    backgroundColor: theme.white,\n    background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n    }`,\n    padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,\n    boxShadow: theme.shadows[shadow] || shadow || 'none',\n    borderRadius: theme.fn.radius(radius),\n\n    '&:focus': {\n      outline: 0,\n    },\n  },\n\n  arrow: {\n    backgroundColor: 'inherit',\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n    }`,\n    zIndex: 1,\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;AAC5D,EAAE,QAAQ,EAAE;AACZ,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,eAAe,EAAE,KAAK,CAAC,KAAK;AAChC,IAAI,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACjF,IAAI,MAAM,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACrG,IAAI,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;AAC1D,IAAI,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,MAAM;AACxD,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,IAAI,SAAS,EAAE;AACf,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,eAAe,EAAE,SAAS;AAC9B,IAAI,MAAM,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACrG,IAAI,MAAM,EAAE,CAAC;AACb,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"PopoverDropdown.styles.js","sources":["../../../src/Popover/PopoverDropdown/PopoverDropdown.styles.ts"],"sourcesContent":["import { createStyles, MantineShadow, MantineNumberSize, rem } from '@mantine/styles';\n\nexport interface PopoverStylesParams {\n  radius?: MantineNumberSize;\n  shadow?: MantineShadow;\n}\n\nexport default createStyles((theme, { radius, shadow }: PopoverStylesParams) => ({\n  dropdown: {\n    position: 'absolute',\n    backgroundColor: theme.white,\n    background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,\n    border: `${rem(1)} solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n    }`,\n    padding: `${theme.spacing.sm} ${theme.spacing.md}`,\n    boxShadow: theme.shadows[shadow] || shadow || 'none',\n    borderRadius: theme.fn.radius(radius),\n\n    '&:focus': {\n      outline: 0,\n    },\n  },\n\n  arrow: {\n    backgroundColor: 'inherit',\n    border: `${rem(1)} solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n    }`,\n    zIndex: 1,\n  },\n}));\n"],"names":["createStyles","rem"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;AAC5D,EAAE,QAAQ,EAAE;AACZ,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,eAAe,EAAE,KAAK,CAAC,KAAK;AAChC,IAAI,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACjF,IAAI,MAAM,EAAE,CAAC,EAAEC,UAAG,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3G,IAAI,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACtD,IAAI,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,MAAM;AACxD,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACzC,IAAI,SAAS,EAAE;AACf,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,eAAe,EAAE,SAAS;AAC9B,IAAI,MAAM,EAAE,CAAC,EAAEA,UAAG,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3G,IAAI,MAAM,EAAE,CAAC;AACb,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/Progress/Progress.js

@@ -72,7 +72,8 @@ const Progress = React.forwardRef((props, ref) => {
     classNames,
     styles: styles$1,
     sections,
-    unstyled
+    unstyled,
+    variant
   } = _a, others = __objRest(_a, [
     "className",
     "value",
@@ -86,9 +87,10 @@ const Progress = React.forwardRef((props, ref) => {
     "classNames",
     "styles",
     "sections",
-    "unstyled"
+    "unstyled",
+    "variant"
   ]);
-  const { classes, cx, theme } = Progress_styles['default']({ color, size, radius, striped: striped || animate, animate }, { classNames, styles: styles$1, unstyled, name: "Progress" });
+  const { classes, cx, theme } = Progress_styles['default']({ color, radius }, { name: "Progress", classNames, styles: styles$1, unstyled, variant, size });
   const segments = Array.isArray(sections) ? getCumulativeSections(sections).map((_b, index) => {
     var _c = _b, {
       tooltip,
@@ -109,6 +111,8 @@ const Progress = React.forwardRef((props, ref) => {
       key: index
     }, /* @__PURE__ */ React__default.createElement(Box.Box, __spreadProps(__spreadValues({}, sectionProps), {
       className: cx(classes.bar, sectionProps.className),
+      "data-striped": striped || animate || void 0,
+      "data-animate": animate || void 0,
       sx: {
         width: `${sectionValue}%`,
         left: `${accumulated}%`,
@@ -132,7 +136,9 @@ const Progress = React.forwardRef((props, ref) => {
     "aria-valuenow": value,
     "aria-label": ariaLabel,
     className: classes.bar,
-    style: { width: `${value}%` }
+    style: { width: `${value}%` },
+    "data-striped": striped || animate || void 0,
+    "data-animate": animate || void 0
   }, label ? /* @__PURE__ */ React__default.createElement(Text.Text, {
     className: classes.label
   }, label) : ""));

package/cjs/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\nimport { Tooltip } from '../Tooltip';\nimport useStyles, { ProgressStylesParams } from './Progress.styles';\n\nexport type ProgressStylesNames = Selectors<typeof useStyles>;\n\ninterface ProgressSection extends React.ComponentPropsWithRef<'div'> {\n  value: number;\n  color: MantineColor;\n  label?: string;\n  tooltip?: React.ReactNode;\n}\n\nexport interface ProgressProps\n  extends DefaultProps<ProgressStylesNames, ProgressStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Percent of filled bar (0-100) */\n  value?: number;\n\n  /** Progress color from theme */\n  color?: MantineColor;\n\n  /** Predefined progress height or number for height in px */\n  size?: MantineNumberSize;\n\n  /** Predefined progress radius from theme.radius or number for height in px */\n  radius?: MantineNumberSize;\n\n  /** Adds stripes */\n  striped?: boolean;\n\n  /** Whether to animate striped progress bars */\n  animate?: boolean;\n\n  /** Text to be placed inside the progress bar */\n  label?: string;\n\n  /** Replaces value if present, renders multiple sections instead of single one */\n  sections?: ProgressSection[];\n}\n\nfunction getCumulativeSections(\n  sections: ProgressSection[]\n): (ProgressSection & { accumulated: number })[] {\n  return sections.reduce(\n    (acc, section) => {\n      acc.sections.push({ ...section, accumulated: acc.accumulated });\n      acc.accumulated += section.value;\n      return acc;\n    },\n    { accumulated: 0, sections: [] }\n  ).sections;\n}\n\nconst defaultProps: Partial<ProgressProps> = {\n  size: 'md',\n  radius: 'sm',\n  striped: false,\n  animate: false,\n  label: '',\n};\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {\n  const {\n    className,\n    value,\n    color,\n    size,\n    radius,\n    striped,\n    animate,\n    label,\n    'aria-label': ariaLabel,\n    classNames,\n    styles,\n    sections,\n    unstyled,\n    ...others\n  } = useComponentDefaultProps('Progress', defaultProps, props);\n\n  const { classes, cx, theme } = useStyles(\n    { color, size, radius, striped: striped || animate, animate },\n    { classNames, styles, unstyled, name: 'Progress' }\n  );\n\n  const segments = Array.isArray(sections)\n    ? getCumulativeSections(sections).map(\n        (\n          {\n            tooltip,\n            accumulated,\n            value: sectionValue,\n            label: sectionLabel,\n            color: sectionColor,\n            ...sectionProps\n          },\n          index\n        ) => (\n          <Tooltip.Floating label={tooltip} disabled={!tooltip} key={index}>\n            <Box\n              {...sectionProps}\n              className={cx(classes.bar, sectionProps.className)}\n              sx={{\n                width: `${sectionValue}%`,\n                left: `${accumulated}%`,\n                backgroundColor: theme.fn.variant({\n                  variant: 'filled',\n                  primaryFallback: false,\n                  color: sectionColor || theme.primaryColor,\n                }).background,\n              }}\n            >\n              {sectionLabel && <Text className={classes.label}>{sectionLabel}</Text>}\n            </Box>\n          </Tooltip.Floating>\n        )\n      )\n    : null;\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      {segments || (\n        <div\n          role=\"progressbar\"\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={value}\n          aria-label={ariaLabel}\n          className={classes.bar}\n          style={{ width: `${value}%` }}\n        >\n          {label ? <Text className={classes.label}>{label}</Text> : ''}\n        </div>\n      )}\n    </Box>\n  );\n});\n\nProgress.displayName = '@mantine/core/Progress';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","Tooltip","Box","Text"],"mappings":"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"}
+{"version":3,"file":"Progress.js","sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\nimport { Tooltip } from '../Tooltip';\nimport useStyles, { ProgressStylesParams } from './Progress.styles';\n\nexport type ProgressStylesNames = Selectors<typeof useStyles>;\n\ninterface ProgressSection extends React.ComponentPropsWithRef<'div'> {\n  value: number;\n  color: MantineColor;\n  label?: string;\n  tooltip?: React.ReactNode;\n}\n\nexport interface ProgressProps\n  extends DefaultProps<ProgressStylesNames, ProgressStylesParams>,\n    React.ComponentPropsWithoutRef<'div'> {\n  variant?: string;\n\n  /** Percent of filled bar (0-100) */\n  value?: number;\n\n  /** Progress color from theme */\n  color?: MantineColor;\n\n  /** Height of progress bar */\n  size?: MantineNumberSize;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */\n  radius?: MantineNumberSize;\n\n  /** Adds stripes */\n  striped?: boolean;\n\n  /** Whether to animate striped progress bars */\n  animate?: boolean;\n\n  /** Text to be placed inside the progress bar */\n  label?: string;\n\n  /** Replaces value if present, renders multiple sections instead of single one */\n  sections?: ProgressSection[];\n}\n\nfunction getCumulativeSections(\n  sections: ProgressSection[]\n): (ProgressSection & { accumulated: number })[] {\n  return sections.reduce(\n    (acc, section) => {\n      acc.sections.push({ ...section, accumulated: acc.accumulated });\n      acc.accumulated += section.value;\n      return acc;\n    },\n    { accumulated: 0, sections: [] }\n  ).sections;\n}\n\nconst defaultProps: Partial<ProgressProps> = {\n  size: 'md',\n  radius: 'sm',\n  striped: false,\n  animate: false,\n  label: '',\n};\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) => {\n  const {\n    className,\n    value,\n    color,\n    size,\n    radius,\n    striped,\n    animate,\n    label,\n    'aria-label': ariaLabel,\n    classNames,\n    styles,\n    sections,\n    unstyled,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Progress', defaultProps, props);\n\n  const { classes, cx, theme } = useStyles(\n    { color, radius },\n    { name: 'Progress', classNames, styles, unstyled, variant, size }\n  );\n\n  const segments = Array.isArray(sections)\n    ? getCumulativeSections(sections).map(\n        (\n          {\n            tooltip,\n            accumulated,\n            value: sectionValue,\n            label: sectionLabel,\n            color: sectionColor,\n            ...sectionProps\n          },\n          index\n        ) => (\n          <Tooltip.Floating label={tooltip} disabled={!tooltip} key={index}>\n            <Box\n              {...sectionProps}\n              className={cx(classes.bar, sectionProps.className)}\n              data-striped={striped || animate || undefined}\n              data-animate={animate || undefined}\n              sx={{\n                width: `${sectionValue}%`,\n                left: `${accumulated}%`,\n                backgroundColor: theme.fn.variant({\n                  variant: 'filled',\n                  primaryFallback: false,\n                  color: sectionColor || theme.primaryColor,\n                }).background,\n              }}\n            >\n              {sectionLabel && <Text className={classes.label}>{sectionLabel}</Text>}\n            </Box>\n          </Tooltip.Floating>\n        )\n      )\n    : null;\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      {segments || (\n        <div\n          role=\"progressbar\"\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={value}\n          aria-label={ariaLabel}\n          className={classes.bar}\n          style={{ width: `${value}%` }}\n          data-striped={striped || animate || undefined}\n          data-animate={animate || undefined}\n        >\n          {label ? <Text className={classes.label}>{label}</Text> : ''}\n        </div>\n      )}\n    </Box>\n  );\n});\n\nProgress.displayName = '@mantine/core/Progress';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","Tooltip","Box","Text"],"mappings":"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"}

package/cjs/Progress/Progress.styles.js

@@ -5,22 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
 
 const sizes = {
-  xs: 3,
-  sm: 5,
-  md: 8,
-  lg: 12,
-  xl: 16
+  xs: styles.rem(3),
+  sm: styles.rem(5),
+  md: styles.rem(8),
+  lg: styles.rem(12),
+  xl: styles.rem(16)
 };
 const stripesAnimation = styles.keyframes({
   from: { backgroundPosition: "0 0" },
-  to: { backgroundPosition: "40px 0" }
+  to: { backgroundPosition: `${styles.rem(40)} 0` }
 });
-var useStyles = styles.createStyles((theme, { color, radius, size, striped, animate }) => ({
+var useStyles = styles.createStyles((theme, { color, radius }, { size }) => ({
   root: {
     position: "relative",
-    height: theme.fn.size({ size, sizes }),
+    height: styles.getSize({ size, sizes }),
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
-    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
+    borderRadius: theme.fn.radius(radius),
     overflow: "hidden"
   },
   bar: {
@@ -38,16 +38,20 @@ var useStyles = styles.createStyles((theme, { color, radius, size, striped, anim
       color: color || theme.primaryColor
     }).background,
     transition: "width 100ms linear",
-    animation: animate ? `${stripesAnimation} 1000ms linear infinite` : "none",
-    backgroundSize: "20px 20px",
-    backgroundImage: striped ? "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)" : "none",
+    "&[data-animate]": {
+      animation: `${stripesAnimation} 1000ms linear infinite`
+    },
+    "&[data-striped]": {
+      backgroundSize: `${styles.rem(20)} ${styles.rem(20)}`,
+      backgroundImage: "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)"
+    },
     "&:last-of-type": {
-      borderTopRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-      borderBottomRightRadius: theme.fn.size({ size: radius, sizes: theme.radius })
+      borderTopRightRadius: theme.fn.radius(radius),
+      borderBottomRightRadius: theme.fn.radius(radius)
     },
     "&:first-of-type": {
-      borderTopLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-      borderBottomLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius })
+      borderTopLeftRadius: theme.fn.radius(radius),
+      borderBottomLeftRadius: theme.fn.radius(radius)
     },
     "@media (prefers-reduced-motion)": {
       transitionDuration: theme.respectReducedMotion ? "0ms" : void 0
@@ -55,7 +59,7 @@ var useStyles = styles.createStyles((theme, { color, radius, size, striped, anim
   },
   label: {
     color: theme.white,
-    fontSize: theme.fn.size({ size, sizes }) * 0.65,
+    fontSize: `calc(${styles.getSize({ size, sizes })} * 0.65)`,
     fontWeight: 700,
     userSelect: "none",
     overflow: "hidden",

package/cjs/Progress/Progress.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.js","sources":["../../src/Progress/Progress.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, keyframes } from '@mantine/styles';\n\nconst sizes = {\n  xs: 3,\n  sm: 5,\n  md: 8,\n  lg: 12,\n  xl: 16,\n};\n\nexport interface ProgressStylesParams {\n  color: MantineColor;\n  radius: MantineNumberSize;\n  size: MantineNumberSize;\n  striped: boolean;\n  animate: boolean;\n}\n\nconst stripesAnimation = keyframes({\n  from: { backgroundPosition: '0 0' },\n  to: { backgroundPosition: '40px 0' },\n});\n\nexport default createStyles(\n  (theme, { color, radius, size, striped, animate }: ProgressStylesParams) => ({\n    root: {\n      position: 'relative',\n      height: theme.fn.size({ size, sizes }),\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      overflow: 'hidden',\n    },\n\n    bar: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      backgroundColor: theme.fn.variant({\n        variant: 'filled',\n        primaryFallback: false,\n        color: color || theme.primaryColor,\n      }).background,\n      transition: 'width 100ms linear',\n      animation: animate ? `${stripesAnimation} 1000ms linear infinite` : 'none',\n      backgroundSize: '20px 20px',\n      backgroundImage: striped\n        ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)'\n        : 'none',\n\n      '&:last-of-type': {\n        borderTopRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        borderBottomRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      },\n\n      '&:first-of-type': {\n        borderTopLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        borderBottomLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      },\n\n      '@media (prefers-reduced-motion)': {\n        transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n      },\n    },\n\n    label: {\n      color: theme.white,\n      fontSize: theme.fn.size({ size, sizes }) * 0.65,\n      fontWeight: 700,\n      userSelect: 'none',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n  })\n);\n"],"names":["keyframes","createStyles"],"mappings":"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"}
+{"version":3,"file":"Progress.styles.js","sources":["../../src/Progress/Progress.styles.ts"],"sourcesContent":["import {\n  createStyles,\n  MantineNumberSize,\n  MantineColor,\n  keyframes,\n  rem,\n  getSize,\n} from '@mantine/styles';\n\nconst sizes = {\n  xs: rem(3),\n  sm: rem(5),\n  md: rem(8),\n  lg: rem(12),\n  xl: rem(16),\n};\n\nexport interface ProgressStylesParams {\n  color: MantineColor;\n  radius: MantineNumberSize;\n}\n\nconst stripesAnimation = keyframes({\n  from: { backgroundPosition: '0 0' },\n  to: { backgroundPosition: `${rem(40)} 0` },\n});\n\nexport default createStyles((theme, { color, radius }: ProgressStylesParams, { size }) => ({\n  root: {\n    position: 'relative',\n    height: getSize({ size, sizes }),\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n    borderRadius: theme.fn.radius(radius),\n    overflow: 'hidden',\n  },\n\n  bar: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    height: '100%',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: theme.fn.variant({\n      variant: 'filled',\n      primaryFallback: false,\n      color: color || theme.primaryColor,\n    }).background,\n    transition: 'width 100ms linear',\n\n    '&[data-animate]': {\n      animation: `${stripesAnimation} 1000ms linear infinite`,\n    },\n\n    '&[data-striped]': {\n      backgroundSize: `${rem(20)} ${rem(20)}`,\n      backgroundImage:\n        'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)',\n    },\n\n    '&:last-of-type': {\n      borderTopRightRadius: theme.fn.radius(radius),\n      borderBottomRightRadius: theme.fn.radius(radius),\n    },\n\n    '&:first-of-type': {\n      borderTopLeftRadius: theme.fn.radius(radius),\n      borderBottomLeftRadius: theme.fn.radius(radius),\n    },\n\n    '@media (prefers-reduced-motion)': {\n      transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n    },\n  },\n\n  label: {\n    color: theme.white,\n    fontSize: `calc(${getSize({ size, sizes })} * 0.65)`,\n    fontWeight: 700,\n    userSelect: 'none',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n  },\n}));\n"],"names":["rem","keyframes","createStyles","getSize"],"mappings":"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"}

package/cjs/Radio/Radio.js

@@ -70,7 +70,8 @@ const Radio = React.forwardRef((props, ref) => {
     unstyled,
     labelPosition,
     description,
-    error
+    error,
+    variant
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -89,12 +90,13 @@ const Radio = React.forwardRef((props, ref) => {
     "unstyled",
     "labelPosition",
     "description",
-    "error"
+    "error",
+    "variant"
   ]);
   const ctx = RadioGroup_context.useRadioGroupContext();
   const contextSize = (_b = ctx == null ? void 0 : ctx.size) != null ? _b : size;
   const componentSize = props.size ? size : contextSize;
-  const { classes } = Radio_styles['default']({ color, size: componentSize, transitionDuration, labelPosition, error: !!error }, { classNames, styles: styles$1, unstyled, name: "Radio" });
+  const { classes } = Radio_styles['default']({ color, transitionDuration, labelPosition, error: !!error }, { name: "Radio", classNames, styles: styles$1, unstyled, variant, size: componentSize });
   const { systemStyles, rest } = extractSystemStyles.extractSystemStyles(others);
   const uuid = hooks.useId(id);
   const contextProps = ctx ? {
@@ -117,7 +119,8 @@ const Radio = 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("div", {
     className: classes.inner
   }, /* @__PURE__ */ React__default.createElement("input", __spreadValues(__spreadValues({

package/cjs/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { extractSystemStyles } from '../Box';\nimport { RadioIcon } from './RadioIcon';\nimport { useRadioGroupContext } from './RadioGroup.context';\nimport { RadioGroup } from './RadioGroup/RadioGroup';\nimport { InlineInput, InlineInputStylesNames } from '../InlineInput';\nimport useStyles, { RadioStylesParams } from './Radio.styles';\n\nexport type RadioStylesNames = Selectors<typeof useStyles> | InlineInputStylesNames;\n\nexport interface RadioProps\n  extends DefaultProps<RadioStylesNames, RadioStylesParams>,\n    Omit<React.ComponentPropsWithRef<'input'>, 'size'> {\n  /** Radio label */\n  label?: React.ReactNode;\n\n  /** Active radio color from theme.colors */\n  color?: MantineColor;\n\n  /** Predefined label fontSize, radio width, height and border-radius */\n  size?: MantineSize;\n\n  /** Replace default icon */\n  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;\n\n  /** Animation duration in ms */\n  transitionDuration?: number;\n\n  /** Props spread to root element */\n  wrapperProps?: Record<string, any>;\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<RadioProps> = {\n  icon: RadioIcon,\n  transitionDuration: 100,\n  size: 'sm',\n  labelPosition: 'right',\n};\n\ntype RadioComponent = ForwardRefWithStaticComponents<RadioProps, { Group: typeof RadioGroup }>;\n\nexport const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n  const {\n    className,\n    style,\n    id,\n    label,\n    size,\n    title,\n    disabled,\n    color,\n    classNames,\n    styles,\n    sx,\n    icon: Icon,\n    transitionDuration,\n    wrapperProps,\n    unstyled,\n    labelPosition,\n    description,\n    error,\n    ...others\n  } = useComponentDefaultProps('Radio', defaultProps, props);\n  const ctx = useRadioGroupContext();\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { classes } = useStyles(\n    { color, size: componentSize, transitionDuration, labelPosition, error: !!error },\n    { classNames, styles, unstyled, name: 'Radio' }\n  );\n\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const uuid = useId(id);\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.value === rest.value,\n        name: rest.name ?? ctx.name,\n        onChange: ctx.onChange,\n      }\n    : {};\n\n  return (\n    <InlineInput\n      className={className}\n      sx={sx}\n      style={style}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={disabled}\n      __staticSelector=\"Radio\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={contextProps.checked || undefined}\n      {...systemStyles}\n      {...wrapperProps}\n    >\n      <div className={classes.inner}>\n        <input\n          ref={ref}\n          className={classes.radio}\n          type=\"radio\"\n          id={uuid}\n          disabled={disabled}\n          {...rest}\n          {...contextProps}\n        />\n        <Icon className={classes.icon} aria-hidden />\n      </div>\n    </InlineInput>\n  );\n}) as any;\n\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\n"],"names":["RadioIcon","forwardRef","useComponentDefaultProps","styles","useRadioGroupContext","useStyles","extractSystemStyles","useId","React","InlineInput","RadioGroup"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,YAAY,GAAG;AACrB,EAAE,IAAI,EAAEA,mBAAS;AACjB,EAAE,kBAAkB,EAAE,GAAG;AACzB,EAAE,IAAI,EAAE,IAAI;AACZ,EAAE,aAAa,EAAE,OAAO;AACxB,CAAC,CAAC;AACU,MAAC,KAAK,GAAGC,gBAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AAChD,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;AACb,EAAE,MAAM,EAAE,GAAGC,+BAAwB,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE;AACrE,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,EAAE;AACN,IAAI,KAAK;AACT,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,KAAK;AACT,IAAI,UAAU;AACd,YAAIC,QAAM;AACV,IAAI,EAAE;AACN,IAAI,IAAI,EAAE,IAAI;AACd,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,aAAa;AACjB,IAAI,WAAW;AACf,IAAI,KAAK;AACT,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,IAAI;AACR,IAAI,OAAO;AACX,IAAI,MAAM;AACV,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,MAAM;AACV,IAAI,oBAAoB;AACxB,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,eAAe;AACnB,IAAI,aAAa;AACjB,IAAI,OAAO;AACX,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,GAAG,GAAGC,uCAAoB,EAAE,CAAC;AACrC,EAAE,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC;AACjF,EAAE,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,GAAG,WAAW,CAAC;AACxD,EAAE,MAAM,EAAE,OAAO,EAAE,GAAGC,uBAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,UAAU,UAAEF,QAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACpK,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAGG,uCAAmB,CAAC,MAAM,CAAC,CAAC;AAC7D,EAAE,MAAM,IAAI,GAAGC,WAAK,CAAC,EAAE,CAAC,CAAC;AACzB,EAAE,MAAM,YAAY,GAAG,GAAG,GAAG;AAC7B,IAAI,OAAO,EAAE,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;AACrC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,GAAG,CAAC,IAAI;AAClD,IAAI,QAAQ,EAAE,GAAG,CAAC,QAAQ;AAC1B,GAAG,GAAG,EAAE,CAAC;AACT,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,uBAAW,EAAE,cAAc,CAAC,cAAc,CAAC;AACxF,IAAI,SAAS;AACb,IAAI,EAAE;AACN,IAAI,KAAK;AACT,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,IAAI,EAAE,aAAa;AACvB,IAAI,aAAa;AACjB,IAAI,KAAK;AACT,IAAI,WAAW;AACf,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,gBAAgB,EAAE,OAAO;AAC7B,IAAI,UAAU;AACd,YAAIN,QAAM;AACV,IAAI,QAAQ;AACZ,IAAI,cAAc,EAAE,YAAY,CAAC,OAAO,IAAI,KAAK,CAAC;AAClD,GAAG,EAAE,YAAY,CAAC,EAAE,YAAY,CAAC,kBAAkBK,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC9E,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,kBAAkBA,cAAK,CAAC,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC,cAAc,CAAC;AAChF,IAAI,GAAG;AACP,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,QAAQ;AACZ,GAAG,EAAE,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,kBAAkBA,cAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AACtE,IAAI,SAAS,EAAE,OAAO,CAAC,IAAI;AAC3B,IAAI,aAAa,EAAE,IAAI;AACvB,GAAG,CAAC,CAAC,CAAC,CAAC;AACP,CAAC,EAAE;AACH,KAAK,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAC1C,KAAK,CAAC,KAAK,GAAGE,qBAAU;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineColor,\n  Selectors,\n  useComponentDefaultProps,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { extractSystemStyles } from '../Box';\nimport { RadioIcon } from './RadioIcon';\nimport { useRadioGroupContext } from './RadioGroup.context';\nimport { RadioGroup } from './RadioGroup/RadioGroup';\nimport { InlineInput, InlineInputStylesNames } from '../InlineInput';\nimport useStyles, { RadioStylesParams } from './Radio.styles';\n\nexport type RadioStylesNames = Selectors<typeof useStyles> | InlineInputStylesNames;\n\nexport interface RadioProps\n  extends DefaultProps<RadioStylesNames, RadioStylesParams>,\n    Omit<React.ComponentPropsWithRef<'input'>, 'size'> {\n  variant?: string;\n\n  /** Radio label */\n  label?: React.ReactNode;\n\n  /** Active radio color from theme.colors */\n  color?: MantineColor;\n\n  /** Predefined label fontSize, radio width, height and border-radius */\n  size?: MantineSize;\n\n  /** Replace default icon */\n  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;\n\n  /** Animation duration in ms */\n  transitionDuration?: number;\n\n  /** Props spread to root element */\n  wrapperProps?: Record<string, any>;\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<RadioProps> = {\n  icon: RadioIcon,\n  transitionDuration: 100,\n  size: 'sm',\n  labelPosition: 'right',\n};\n\ntype RadioComponent = ForwardRefWithStaticComponents<RadioProps, { Group: typeof RadioGroup }>;\n\nexport const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n  const {\n    className,\n    style,\n    id,\n    label,\n    size,\n    title,\n    disabled,\n    color,\n    classNames,\n    styles,\n    sx,\n    icon: Icon,\n    transitionDuration,\n    wrapperProps,\n    unstyled,\n    labelPosition,\n    description,\n    error,\n    variant,\n    ...others\n  } = useComponentDefaultProps('Radio', defaultProps, props);\n  const ctx = useRadioGroupContext();\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { classes } = useStyles(\n    { color, transitionDuration, labelPosition, error: !!error },\n    { name: 'Radio', classNames, styles, unstyled, variant, size: componentSize }\n  );\n\n  const { systemStyles, rest } = extractSystemStyles(others);\n  const uuid = useId(id);\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.value === rest.value,\n        name: rest.name ?? ctx.name,\n        onChange: ctx.onChange,\n      }\n    : {};\n\n  return (\n    <InlineInput\n      className={className}\n      sx={sx}\n      style={style}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={disabled}\n      __staticSelector=\"Radio\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={contextProps.checked || undefined}\n      variant={variant}\n      {...systemStyles}\n      {...wrapperProps}\n    >\n      <div className={classes.inner}>\n        <input\n          ref={ref}\n          className={classes.radio}\n          type=\"radio\"\n          id={uuid}\n          disabled={disabled}\n          {...rest}\n          {...contextProps}\n        />\n        <Icon className={classes.icon} aria-hidden />\n      </div>\n    </InlineInput>\n  );\n}) as any;\n\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\n"],"names":["RadioIcon","forwardRef","useComponentDefaultProps","styles","useRadioGroupContext","useStyles","extractSystemStyles","useId","React","InlineInput","RadioGroup"],"mappings":"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"}

package/cjs/Radio/Radio.styles.js

@@ -24,20 +24,20 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const sizes = {
-  xs: 16,
-  sm: 20,
-  md: 24,
-  lg: 30,
-  xl: 36
+  xs: styles.rem(16),
+  sm: styles.rem(20),
+  md: styles.rem(24),
+  lg: styles.rem(30),
+  xl: styles.rem(36)
 };
 const iconSizes = {
-  xs: 6,
-  sm: 8,
-  md: 10,
-  lg: 14,
-  xl: 16
+  xs: styles.rem(6),
+  sm: styles.rem(8),
+  md: styles.rem(10),
+  lg: styles.rem(14),
+  xl: styles.rem(16)
 };
-var useStyles = styles.createStyles((theme, { size, color, transitionDuration, labelPosition, error }, getRef) => {
+var useStyles = styles.createStyles((theme, { color, transitionDuration, labelPosition, error }, { size }) => {
   const colors = theme.fn.variant({ variant: "filled", color });
   const errorColor = theme.fn.variant({ variant: "filled", color: "red" }).background;
   return {
@@ -47,26 +47,26 @@ var useStyles = styles.createStyles((theme, { size, color, transitionDuration, l
       alignSelf: "flex-start"
     },
     icon: {
-      ref: getRef("icon"),
+      ref: styles.getStylesRef("icon"),
       color: theme.white,
       opacity: 0,
-      transform: "scale(0.75) translateY(2px)",
+      transform: `scale(0.75) translateY(${styles.rem(2)})`,
       transition: `opacity ${transitionDuration}ms ${theme.transitionTimingFunction}`,
       pointerEvents: "none",
-      width: theme.fn.size({ sizes: iconSizes, size }),
-      height: theme.fn.size({ sizes: iconSizes, size }),
+      width: styles.getSize({ sizes: iconSizes, size }),
+      height: styles.getSize({ sizes: iconSizes, size }),
       position: "absolute",
-      top: `calc(50% - ${theme.fn.size({ sizes: iconSizes, size }) / 2}px)`,
-      left: `calc(50% - ${theme.fn.size({ sizes: iconSizes, size }) / 2}px)`
+      top: `calc(50% - ${styles.getSize({ sizes: iconSizes, size })} / 2)`,
+      left: `calc(50% - ${styles.getSize({ sizes: iconSizes, size })} / 2)`
     },
     radio: __spreadProps(__spreadValues({}, theme.fn.focusStyles()), {
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
-      border: `1px solid ${error ? errorColor : theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+      border: `${styles.rem(1)} solid ${error ? errorColor : theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
       position: "relative",
       appearance: "none",
-      width: theme.fn.size({ sizes, size }),
-      height: theme.fn.size({ sizes, size }),
-      borderRadius: theme.fn.size({ sizes, size }),
+      width: styles.getSize({ sizes, size }),
+      height: styles.getSize({ sizes, size }),
+      borderRadius: styles.getSize({ sizes, size }),
       margin: 0,
       display: "flex",
       alignItems: "center",
@@ -78,7 +78,7 @@ var useStyles = styles.createStyles((theme, { size, color, transitionDuration, l
       "&:checked": {
         background: colors.background,
         borderColor: colors.background,
-        [`& + .${getRef("icon")}`]: {
+        [`& + .${styles.getStylesRef("icon")}`]: {
           opacity: 1,
           transform: "scale(1)"
         }
@@ -86,7 +86,7 @@ var useStyles = styles.createStyles((theme, { size, color, transitionDuration, l
       "&:disabled": {
         borderColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[4],
         backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
-        [`& + .${getRef("icon")}`]: {
+        [`& + .${styles.getStylesRef("icon")}`]: {
           color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[4]
         }
       }