@mantine/core 9.0.0-alpha.7 → 9.0.0

package/esm/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuGA,MAAM,eAAe;CACnB,eAAe;CACf,MAAM;CACN,iBAAiB;CACjB,SAAS;CACV;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,MAAM;EACJ,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,IACA,MACA,QACA,cACA,SACA,eACA,aACA,OACA,UACA,SACA,eACA,MAAM,MACN,SACA,WACA,UACA,cACA,KACA,YACA,UACA,SACA,iBACA,KACA,GAAG,WACD;CAEJ,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,MAAM,IAAI,qBAAqB;CACrC,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,mBAAmB;EACvB,SAAS,KAAK,MAAM,SAAS,KAAK,MAAgB,IAAI;EACtD,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEpB;CAED,MAAM,oBAAoB,KAAK,aAAa,KAAK,MAAgB,IAAI;CACrE,MAAM,gBAAgB,YAAY;AAElC,iBAAgB;AACd,MAAI,SAAS,SAAS;AACpB,YAAS,QAAQ,gBAAgB,iBAAiB;AAElD,OAAI,cACF,UAAS,QAAQ,aAAa,sBAAsB,OAAO;OAE3D,UAAS,QAAQ,gBAAgB,qBAAqB;;IAGzD,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU;EACE;EACJ;EACE;EACV,gBAAc,iBAAiB,WAAW,WAAW,KAAA;EAC5C;EACT,KAAK;EACA;EACO;EACZ,OAAO,KAAK;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK,EAAE,uBAAuB,eAAe;aAA1E,CACE,oBAAC,KAAD;IACE,WAAU;IACV,IAAI;IACJ,KAAK,aAAa,UAAU,IAAI;IAChC,KAAK,EAAE,OAAO,CAAC,CAAC,OAAO;IACvB,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;KAAS,CAAC;IACpD,GAAI;IACJ,GAAI;IACJ,UAAU;IACV,OAAO,KAAK;IACZ,MAAK;IACL,UAAU,UAAU;AAClB,SAAI,SACF,OAAM,gBAAgB;AAGxB,eAAU,MAAM;;IAElB,CAAA,EAEF,oBAAC,MAAD;IAAqB;IAAe,GAAI,UAAU,OAAO;IAAI,CAAA,CACzD;;EACM,CAAA;EAEhB;AAEF,SAAS,UAAU;CAAE,GAAGC;CAAS,GAAG;CAAoB;AACxD,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,QAAQ;AACjB,SAAS,YAAY;AACrB,SAAS,OAAO"}
+{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs

@@ -17,7 +17,8 @@ import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx
 const defaultProps = {
 	icon: CheckboxIcon,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = parseThemeColor({

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;CACT;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}

package/esm/components/Chip/Chip.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.mjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.mjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}

package/esm/components/Pill/Pill.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  overflow: hidden;\n  height: 100%;\n  line-height: var(--pill-height);\n  text-overflow: ellipsis;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}
+{"version":3,"file":"Pill.module.mjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}

package/esm/components/SegmentedControl/SegmentedControl.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n  --sc-padding-xs: 2px 6px;\n  --sc-padding-sm: 3px 10px;\n  --sc-padding-md: 4px 14px;\n  --sc-padding-lg: 7px 16px;\n  --sc-padding-xl: 10px 20px;\n\n  --sc-transition-duration: 200ms;\n  --sc-padding: var(--sc-padding-sm);\n  --sc-transition-timing-function: ease;\n  --sc-font-size: var(--mantine-font-size-sm);\n\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  width: auto;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  overflow: hidden;\n  padding: 4px;\n\n  &:where([data-full-width]) {\n    display: flex;\n  }\n\n  &:where([data-orientation='vertical']) {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n\n    &:where([data-full-width]) {\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n}\n\n.indicator {\n  position: absolute;\n  display: block;\n  z-index: 1;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n  @mixin where-light {\n    box-shadow: var(--sc-shadow, none);\n    background-color: var(--sc-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    box-shadow: none;\n    background-color: var(--sc-color, var(--mantine-color-dark-5));\n  }\n}\n\n.label {\n  -webkit-tap-highlight-color: transparent;\n  font-weight: var(--mantine-font-weight-medium);\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  font-size: var(--sc-font-size);\n  padding: var(--sc-padding);\n  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  cursor: pointer;\n\n  /* outline is controlled by .input */\n  outline: var(--segmented-control-outline, none);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  &:where([data-active]) {\n    @mixin where-light {\n      color: var(--sc-label-color, var(--mantine-color-black));\n    }\n\n    @mixin where-dark {\n      color: var(--sc-label-color, var(--mantine-color-white));\n    }\n\n    &::before {\n      .root:where([data-initialized]) & {\n        display: none;\n      }\n      content: '';\n      inset: 0;\n      z-index: 0;\n      position: absolute;\n      border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n      @mixin where-light {\n        box-shadow: var(--sc-shadow, none);\n        background-color: var(--sc-color, var(--mantine-color-white));\n      }\n\n      @mixin where-dark {\n        box-shadow: none;\n        background-color: var(--sc-color, var(--mantine-color-dark-5));\n      }\n    }\n  }\n\n  &:where(:not([data-disabled], [data-active], [data-read-only])) {\n    @mixin hover {\n      @mixin where-light {\n        color: var(--mantine-color-black);\n      }\n\n      @mixin where-dark {\n        color: var(--mantine-color-white);\n      }\n    }\n  }\n\n  fieldset:disabled & {\n    @mixin hover {\n      color: var(--mantine-color-disabled-color) !important;\n    }\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n\n  &[data-focus-ring='auto'] {\n    &:focus:focus-visible {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n\n  &[data-focus-ring='always'] {\n    &:focus {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n}\n\n.control {\n  position: relative;\n  flex: 1;\n  z-index: 2;\n  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n  .root[data-with-items-borders] :where(&)::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    inset-inline-start: 0;\n    background-color: var(--separator-color);\n    width: 1px;\n    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  }\n\n  &[data-orientation='vertical'] {\n    &::before {\n      top: 0;\n      inset-inline: 0;\n      bottom: auto;\n      height: 1px;\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    --separator-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --separator-color: var(--mantine-color-dark-4);\n  }\n\n  &:first-of-type {\n    &::before {\n      --separator-color: transparent;\n    }\n  }\n\n  &[data-active] {\n    [data-mantine-color-scheme] & {\n      &,\n      & + .control {\n        &::before {\n          --separator-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n.innerLabel {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n  --sc-padding-xs: 2px 6px;\n  --sc-padding-sm: 3px 10px;\n  --sc-padding-md: 4px 14px;\n  --sc-padding-lg: 7px 16px;\n  --sc-padding-xl: 10px 20px;\n\n  --sc-transition-duration: 200ms;\n  --sc-padding: var(--sc-padding-sm);\n  --sc-transition-timing-function: ease;\n  --sc-font-size: var(--mantine-font-size-sm);\n\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  width: auto;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  overflow: hidden;\n  padding: 4px;\n\n  &:where([data-full-width]) {\n    display: flex;\n  }\n\n  &:where([data-orientation='vertical']) {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n\n    &:where([data-full-width]) {\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n}\n\n.indicator {\n  position: absolute;\n  display: block;\n  z-index: 1;\n  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n  @mixin where-light {\n    box-shadow: var(--sc-shadow, none);\n    background-color: var(--sc-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    box-shadow: none;\n    background-color: var(--sc-color, var(--mantine-color-dark-5));\n  }\n}\n\n.label {\n  -webkit-tap-highlight-color: transparent;\n  font-weight: var(--mantine-font-weight-medium);\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n  font-size: var(--sc-font-size);\n  padding: var(--sc-padding);\n  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  cursor: pointer;\n\n  /* outline is controlled by .input */\n  outline: var(--segmented-control-outline, none);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  &:where([data-active]) {\n    @mixin where-light {\n      color: var(--sc-label-color, var(--mantine-color-black));\n    }\n\n    @mixin where-dark {\n      color: var(--sc-label-color, var(--mantine-color-white));\n    }\n\n    &::before {\n      .root:where([data-initialized]) & {\n        display: none;\n      }\n      content: '';\n      inset: 0;\n      z-index: 0;\n      position: absolute;\n      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n      @mixin where-light {\n        box-shadow: var(--sc-shadow, none);\n        background-color: var(--sc-color, var(--mantine-color-white));\n      }\n\n      @mixin where-dark {\n        box-shadow: none;\n        background-color: var(--sc-color, var(--mantine-color-dark-5));\n      }\n    }\n  }\n\n  &:where(:not([data-disabled], [data-active], [data-read-only])) {\n    @mixin hover {\n      @mixin where-light {\n        color: var(--mantine-color-black);\n      }\n\n      @mixin where-dark {\n        color: var(--mantine-color-white);\n      }\n    }\n  }\n\n  fieldset:disabled & {\n    @mixin hover {\n      color: var(--mantine-color-disabled-color) !important;\n    }\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n\n  &[data-focus-ring='auto'] {\n    &:focus:focus-visible {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n\n  &[data-focus-ring='always'] {\n    &:focus {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n}\n\n.control {\n  position: relative;\n  flex: 1;\n  z-index: 2;\n  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n  .root[data-with-items-borders] :where(&)::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    inset-inline-start: 0;\n    background-color: var(--separator-color);\n    width: 1px;\n    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  }\n\n  &[data-orientation='vertical'] {\n    &::before {\n      top: 0;\n      inset-inline: 0;\n      bottom: auto;\n      height: 1px;\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    --separator-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --separator-color: var(--mantine-color-dark-4);\n  }\n\n  &:first-of-type {\n    &::before {\n      --separator-color: transparent;\n    }\n  }\n\n  &[data-active] {\n    [data-mantine-color-scheme] & {\n      &,\n      & + .control {\n        &::before {\n          --separator-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n.innerLabel {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}

package/esm/components/Stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","names":["classes"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n  /** `Stepper.Step` components */\n  children: React.ReactNode;\n\n  /** Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon @default step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed @default CheckIcon */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress @default step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' */\n  contentPadding?: MantineSpacing;\n\n  /** Stepper orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body @default 'left' */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: MantineSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" */\n  radius?: MantineRadius;\n\n  /** When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true */\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available @default true */\n  wrap?: boolean;\n\n  /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */\n  autoContrast?: boolean;\n\n  /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n  keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    keepMounted,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter(\n    (child) => child.type !== StepperCompleted\n  ) as React.ReactElement<StepperStepProps>[];\n  const completedStep = convertedChildren.find(\n    (item) => item.type === StepperCompleted\n  ) as React.ReactElement<StepperCompletedProps>;\n\n  const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n    (acc, item: React.ReactElement<StepperStepProps>, 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          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          iconPosition: item.props.iconPosition || iconPosition,\n          orientation,\n        })\n      );\n\n      if (orientation === 'horizontal' && index !== _children.length - 1) {\n        acc.push(\n          <div\n            {...getStyles('separator')}\n            data-active={index < active || undefined}\n            data-orientation={orientation}\n            key={`separator-${index}`}\n          />\n        );\n      }\n\n      return acc;\n    },\n    []\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  const contentSection = keepMounted ? (\n    <>\n      {_children.map((child, index) => (\n        <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{child.props.children}</div>\n        </Activity>\n      ))}\n      {completedStep && (\n        <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{completedStep.props.children}</div>\n        </Activity>\n      )}\n    </>\n  ) : (\n    content && <div {...getStyles('content')}>{content}</div>\n  );\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {contentSection}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","names":["classes"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n  /** `Stepper.Step` components */\n  children: React.ReactNode;\n\n  /** Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon @default step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed @default CheckIcon */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress @default step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' */\n  contentPadding?: MantineSpacing;\n\n  /** Stepper orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body @default 'left' */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: MantineSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" */\n  radius?: MantineRadius;\n\n  /** When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true */\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available @default true */\n  wrap?: boolean;\n\n  /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */\n  autoContrast?: boolean;\n\n  /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n  keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    keepMounted,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter(\n    (child) => child.type !== StepperCompleted\n  ) as React.ReactElement<StepperStepProps>[];\n  const completedStep = convertedChildren.find(\n    (item) => item.type === StepperCompleted\n  ) as React.ReactElement<StepperCompletedProps>;\n\n  const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n    (acc, item: React.ReactElement<StepperStepProps>, 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          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          iconPosition: item.props.iconPosition || iconPosition,\n          orientation,\n        })\n      );\n\n      if (orientation === 'horizontal' && index !== _children.length - 1) {\n        acc.push(\n          <div\n            {...getStyles('separator')}\n            data-active={index < active || undefined}\n            data-orientation={orientation}\n            key={`separator-${index}`}\n          />\n        );\n      }\n\n      return acc;\n    },\n    []\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  const contentSection = keepMounted ? (\n    <>\n      {_children.map((child, index) => (\n        <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{child.props.children}</div>\n        </Activity>\n      ))}\n      {completedStep && (\n        <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{completedStep.props.children}</div>\n        </Activity>\n      )}\n    </>\n  ) : (\n    content && <div {...getStyles('content')}>{content}</div>\n  );\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {contentSection}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"mappings":"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"}

package/esm/components/Stepper/Stepper.module.mjs

@@ -11,6 +11,7 @@ var Stepper_module_default = {
 	"verticalSeparator": "m_6496b3f3",
 	"stepWrapper": "m_818e70b",
 	"stepIcon": "m_1959ad01",
+	"stepIconContent": "m_8faaac38",
 	"stepCompletedIcon": "m_a79331dc",
 	"stepBody": "m_1956aa2a",
 	"stepLabel": "m_12051f6c",

package/esm/components/Stepper/Stepper.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.module.mjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".root {\n  --stepper-icon-size-xs: 34px;\n  --stepper-icon-size-sm: 36px;\n  --stepper-icon-size-md: 42px;\n  --stepper-icon-size-lg: 48px;\n  --stepper-icon-size-xl: 52px;\n\n  --stepper-icon-size: var(--stepper-icon-size-md);\n  --stepper-color: var(--mantine-primary-color-filled);\n  --stepper-content-padding: var(--mantine-spacing-md);\n  --stepper-spacing: var(--mantine-spacing-md);\n  --stepper-radius: 1000px;\n  --stepper-fz: var(--mantine-font-size-md);\n  --stepper-outline-thickness: 2px;\n\n  @mixin light {\n    --stepper-outline-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin dark {\n    --stepper-outline-color: var(--mantine-color-dark-5);\n  }\n}\n\n.steps {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  &:where([data-wrap]) {\n    flex-wrap: wrap;\n    gap: var(--mantine-spacing-md) 0;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    &:where([data-icon-position='left']) {\n      align-items: flex-start;\n    }\n\n    &:where([data-icon-position='right']) {\n      align-items: flex-end;\n    }\n  }\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n}\n\n.separator {\n  transition: background-color 150ms ease;\n  flex: 1;\n  height: var(--stepper-outline-thickness);\n  margin-inline: var(--mantine-spacing-md);\n  background-color: var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    background-color: var(--stepper-color);\n  }\n}\n\n.content {\n  padding-top: var(--stepper-content-padding);\n}\n\n.step {\n  --step-color: var(--stepper-color);\n\n  display: flex;\n  cursor: default;\n\n  &:where([data-allow-click]) {\n    cursor: pointer;\n  }\n\n  &:where([data-icon-position='left']) {\n    flex-direction: row;\n  }\n\n  &:where([data-icon-position='right']) {\n    flex-direction: row-reverse;\n  }\n}\n\n.step--horizontal {\n  align-items: center;\n}\n\n.step--vertical {\n  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);\n\n  justify-content: flex-start;\n  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));\n  margin-top: var(--separator-spacing);\n  overflow: hidden;\n\n  &:where(:first-of-type) {\n    margin-top: 0;\n  }\n\n  &:where(:last-of-type) {\n    min-height: auto;\n\n    & .verticalSeparator {\n      display: none;\n    }\n  }\n}\n\n.stepWrapper {\n  position: relative;\n}\n\n.verticalSeparator {\n  top: calc(var(--stepper-icon-size) + var(--separator-spacing));\n  inset-inline-start: calc(var(--stepper-icon-size) / 2);\n  height: 100vh;\n  position: absolute;\n  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    border-color: var(--stepper-color);\n  }\n}\n\n.stepIcon {\n  height: var(--stepper-icon-size);\n  width: var(--stepper-icon-size);\n  min-height: var(--stepper-icon-size);\n  min-width: var(--stepper-icon-size);\n  border-radius: var(--stepper-radius);\n  font-size: var(--stepper-fz);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  font-weight: bold;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease;\n  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n  background-color: var(--stepper-outline-color);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-progress]) {\n    border-color: var(--step-color);\n  }\n\n  &:where([data-completed]) {\n    color: var(--stepper-icon-color, var(--mantine-color-white));\n    background-color: var(--step-color);\n    border-color: var(--step-color);\n  }\n}\n\n.stepCompletedIcon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--stepper-icon-color, var(--mantine-color-white));\n}\n\n.stepBody {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-icon-position='left']) {\n    margin-inline-start: var(--mantine-spacing-sm);\n  }\n\n  &:where([data-icon-position='right']) {\n    text-align: right;\n    margin-inline-end: var(--mantine-spacing-sm);\n\n    @mixin where-rtl {\n      text-align: left;\n    }\n  }\n}\n\n.stepLabel {\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--stepper-fz);\n  line-height: 1;\n}\n\n.stepDescription {\n  margin-top: calc(var(--stepper-spacing) / 3);\n  margin-bottom: calc(var(--stepper-spacing) / 3);\n  font-size: calc(var(--stepper-fz) - rem(2px));\n  line-height: 1;\n  color: var(--mantine-color-dimmed);\n}\n"],"mappings":""}
+{"version":3,"file":"Stepper.module.mjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".root {\n  --stepper-icon-size-xs: 34px;\n  --stepper-icon-size-sm: 36px;\n  --stepper-icon-size-md: 42px;\n  --stepper-icon-size-lg: 48px;\n  --stepper-icon-size-xl: 52px;\n\n  --stepper-icon-size: var(--stepper-icon-size-md);\n  --stepper-color: var(--mantine-primary-color-filled);\n  --stepper-content-padding: var(--mantine-spacing-md);\n  --stepper-spacing: var(--mantine-spacing-md);\n  --stepper-radius: 1000px;\n  --stepper-fz: var(--mantine-font-size-md);\n  --stepper-outline-thickness: 2px;\n\n  @mixin light {\n    --stepper-outline-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin dark {\n    --stepper-outline-color: var(--mantine-color-dark-5);\n  }\n}\n\n.steps {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  &:where([data-wrap]) {\n    flex-wrap: wrap;\n    gap: var(--mantine-spacing-md) 0;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    &:where([data-icon-position='left']) {\n      align-items: flex-start;\n    }\n\n    &:where([data-icon-position='right']) {\n      align-items: flex-end;\n    }\n  }\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n}\n\n.separator {\n  transition: background-color 150ms ease;\n  flex: 1;\n  height: var(--stepper-outline-thickness);\n  margin-inline: var(--mantine-spacing-md);\n  background-color: var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    background-color: var(--stepper-color);\n  }\n}\n\n.content {\n  padding-top: var(--stepper-content-padding);\n}\n\n.step {\n  --step-color: var(--stepper-color);\n\n  display: flex;\n  cursor: default;\n\n  &:where([data-allow-click]) {\n    cursor: pointer;\n  }\n\n  &:where([data-icon-position='left']) {\n    flex-direction: row;\n  }\n\n  &:where([data-icon-position='right']) {\n    flex-direction: row-reverse;\n  }\n}\n\n.step--horizontal {\n  align-items: center;\n}\n\n.step--vertical {\n  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);\n\n  justify-content: flex-start;\n  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));\n  margin-top: var(--separator-spacing);\n  overflow: hidden;\n\n  &:where(:first-of-type) {\n    margin-top: 0;\n  }\n\n  &:where(:last-of-type) {\n    min-height: auto;\n\n    & .verticalSeparator {\n      display: none;\n    }\n  }\n}\n\n.stepWrapper {\n  position: relative;\n}\n\n.verticalSeparator {\n  top: calc(var(--stepper-icon-size) + var(--separator-spacing));\n  inset-inline-start: calc(var(--stepper-icon-size) / 2);\n  height: 100vh;\n  position: absolute;\n  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    border-color: var(--stepper-color);\n  }\n}\n\n.stepIcon {\n  height: var(--stepper-icon-size);\n  width: var(--stepper-icon-size);\n  min-height: var(--stepper-icon-size);\n  min-width: var(--stepper-icon-size);\n  border-radius: var(--stepper-radius);\n  font-size: var(--stepper-fz);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  font-weight: bold;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease;\n  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n  background-color: var(--stepper-outline-color);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-progress]) {\n    border-color: var(--step-color);\n  }\n\n  &:where([data-completed]) {\n    color: var(--stepper-icon-color, var(--mantine-color-white));\n    background-color: var(--step-color);\n    border-color: var(--step-color);\n  }\n}\n\n.stepIconContent {\n  display: flex;\n}\n\n.stepCompletedIcon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--stepper-icon-color, var(--mantine-color-white));\n}\n\n.stepBody {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-icon-position='left']) {\n    margin-inline-start: var(--mantine-spacing-sm);\n  }\n\n  &:where([data-icon-position='right']) {\n    text-align: right;\n    margin-inline-end: var(--mantine-spacing-sm);\n\n    @mixin where-rtl {\n      text-align: left;\n    }\n  }\n}\n\n.stepLabel {\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--stepper-fz);\n  line-height: 1;\n}\n\n.stepDescription {\n  margin-top: calc(var(--stepper-spacing) / 3);\n  margin-bottom: calc(var(--stepper-spacing) / 3);\n  font-size: calc(var(--stepper-fz) - rem(2px));\n  line-height: 1;\n  color: var(--mantine-color-dimmed);\n}\n"],"mappings":""}

package/esm/components/Stepper/StepperStep/StepperStep.mjs

@@ -68,11 +68,14 @@ const StepperStep = factory((props) => {
 							...ctx.getStyles("stepLoader", stylesApi)
 						}) : getStepFragment(completedIcon, step) || /* @__PURE__ */ jsx(CheckIcon, { size: "60%" })
 					})
-				}), state !== "stepCompleted" ? /* @__PURE__ */ jsx("span", { children: loading ? /* @__PURE__ */ jsx(Loader, {
-					...ctx.getStyles("stepLoader", stylesApi),
-					size: "calc(var(--stepper-icon-size) / 2)",
-					color
-				}) : getStepFragment(_icon || icon, step) }) : null]
+				}), state !== "stepCompleted" ? /* @__PURE__ */ jsx("span", {
+					...ctx.getStyles("stepIconContent", stylesApi),
+					children: loading ? /* @__PURE__ */ jsx(Loader, {
+						...ctx.getStyles("stepLoader", stylesApi),
+						size: "calc(var(--stepper-icon-size) / 2)",
+						color
+					}) : getStepFragment(_icon || icon, step)
+				}) : null]
 			}), orientation === "vertical" && /* @__PURE__ */ jsx("span", {
 				...ctx.getStyles("verticalSeparator", stylesApi),
 				"data-active": state === "stepCompleted" || void 0

package/esm/components/Stepper/StepperStep/StepperStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStep.mjs","names":["classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\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?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the 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\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\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      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;AACH,KAAI,OAAO,aAAa,WACtB,QAAO,oBAAC,UAAD,EAAU,MAAM,QAAQ,GAAK,CAAA;AAGtC,QAAO;;AAwET,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;CACf;AAED,MAAa,cAAc,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,YAAY;EAAE;EAAY;EAAQ;CAExC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;EAChD;AAED,QACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;GAAW,CAAC;EACvF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;GAAgB,EACpF,IACD;EACD,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,qBAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,UAAU;aAAjD,CACE,qBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,UAAU;IAAE,GAAI;cAApD,CACE,oBAAC,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;OAAW,CAAC;gBAEhF,UACC,oBAAC,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,UAAU;OAC1C,CAAA,GAEF,gBAAgB,eAAe,KAAK,IAAI,oBAAC,WAAD,EAAW,MAAK,OAAQ,CAAA;MAE7D,CAAA;KAEE,CAAA,EAEZ,UAAU,kBACT,oBAAC,QAAD,EAAA,UACG,UACC,oBAAC,QAAD;KACE,GAAI,IAAI,UAAU,cAAc,UAAU;KAC1C,MAAK;KACE;KACP,CAAA,GAEF,gBAAgB,SAAS,MAAM,KAAK,EAEjC,CAAA,GACL,KACC;OACN,gBAAgB,cACf,oBAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,UAAU;IACjD,eAAa,UAAU,mBAAmB,KAAA;IAC1C,CAAA,CAEC;OAGP,SAAS,gBACT,qBAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,UAAU;GACxC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,UAAU;cAAG,gBAAgB,OAAO,KAAK;IAAQ,CAAA,EAEvF,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;cAClD,gBAAgB,aAAa,KAAK;IAC9B,CAAA,CAEJ;KAEM;;EAEnB;AAEF,YAAY,UAAUA;AACtB,YAAY,cAAc"}
+{"version":3,"file":"StepperStep.mjs","names":["classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\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?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the 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\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\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      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span {...ctx.getStyles('stepIconContent', stylesApi)}>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;AACH,KAAI,OAAO,aAAa,WACtB,QAAO,oBAAC,UAAD,EAAU,MAAM,QAAQ,GAAK,CAAA;AAGtC,QAAO;;AAyET,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;CACf;AAED,MAAa,cAAc,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,YAAY;EAAE;EAAY;EAAQ;CAExC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;EAChD;AAED,QACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;GAAW,CAAC;EACvF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;GAAgB,EACpF,IACD;EACD,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,qBAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,UAAU;aAAjD,CACE,qBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,UAAU;IAAE,GAAI;cAApD,CACE,oBAAC,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;OAAW,CAAC;gBAEhF,UACC,oBAAC,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,UAAU;OAC1C,CAAA,GAEF,gBAAgB,eAAe,KAAK,IAAI,oBAAC,WAAD,EAAW,MAAK,OAAQ,CAAA;MAE7D,CAAA;KAEE,CAAA,EAEZ,UAAU,kBACT,oBAAC,QAAD;KAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;eAClD,UACC,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,cAAc,UAAU;MAC1C,MAAK;MACE;MACP,CAAA,GAEF,gBAAgB,SAAS,MAAM,KAAK;KAEjC,CAAA,GACL,KACC;OACN,gBAAgB,cACf,oBAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,UAAU;IACjD,eAAa,UAAU,mBAAmB,KAAA;IAC1C,CAAA,CAEC;OAGP,SAAS,gBACT,qBAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,UAAU;GACxC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,UAAU;cAAG,gBAAgB,OAAO,KAAK;IAAQ,CAAA,EAEvF,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;cAClD,gBAAgB,aAAa,KAAK;IAC9B,CAAA,CAEJ;KAEM;;EAEnB;AAEF,YAAY,UAAUA;AACtB,YAAY,cAAc"}

package/esm/components/Timeline/TimelineItem/TimelineItem.mjs

@@ -28,7 +28,7 @@ const TimelineItem = factory((_props) => {
 			active: __active
 		}, mod],
 		__vars: {
-			"--tli-radius": radius ? getRadius(radius) : void 0,
+			"--tli-radius": radius !== void 0 ? getRadius(radius) : void 0,
 			"--tli-color": color ? getThemeColor(color, theme) : void 0,
 			"--tli-border-style": lineVariant || void 0
 		},

package/esm/components/Timeline/TimelineItem/TimelineItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.mjs","names":["classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n      __vars={{\n        '--tli-radius': radius ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n        {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n        <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AAwDA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBS,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAM,oBAAoB;CAChC,MAAM,QAAQ,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,qBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,SAAS,UAAU,OAAO,GAAG,KAAA;GAC7C,eAAe,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,oBAAC,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,qBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUA;AACvB,aAAa,cAAc"}
+{"version":3,"file":"TimelineItem.mjs","names":["classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n      __vars={{\n        '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n        {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n        <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AAwDA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBS,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAM,oBAAoB;CAChC,MAAM,QAAQ,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,qBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAY,UAAU,OAAO,GAAG,KAAA;GAC3D,eAAe,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,oBAAC,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,qBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUA;AACvB,aAAa,cAAc"}

package/esm/core/MantineProvider/default-theme.mjs

@@ -27,7 +27,7 @@ const DEFAULT_THEME = {
 		to: "cyan",
 		deg: 45
 	},
-	defaultRadius: "sm",
+	defaultRadius: "md",
 	activeClassName: "mantine-active",
 	focusClassName: "",
 	headings: {

package/esm/core/MantineProvider/default-theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.mjs","names":[],"sources":["../../../src/core/MantineProvider/default-theme.ts"],"sourcesContent":["import { rem } from '../utils';\nimport { defaultVariantColorsResolver } from './color-functions';\nimport { DEFAULT_COLORS } from './default-colors';\nimport type { MantineTheme } from './theme.types';\n\nconst DEFAULT_FONT_FAMILY =\n  '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji';\n\nexport const DEFAULT_THEME: MantineTheme = {\n  scale: 1,\n  fontSmoothing: true,\n  focusRing: 'auto',\n  white: '#fff',\n  black: '#000',\n  colors: DEFAULT_COLORS,\n  primaryShade: { light: 6, dark: 8 },\n  primaryColor: 'blue',\n  variantColorResolver: defaultVariantColorsResolver,\n  autoContrast: false,\n  luminanceThreshold: 0.3,\n  fontFamily: DEFAULT_FONT_FAMILY,\n  fontFamilyMonospace:\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',\n  respectReducedMotion: false,\n  cursorType: 'default',\n  defaultGradient: { from: 'blue', to: 'cyan', deg: 45 },\n  defaultRadius: 'sm',\n  activeClassName: 'mantine-active',\n  focusClassName: '',\n\n  headings: {\n    fontFamily: DEFAULT_FONT_FAMILY,\n    fontWeight: '700',\n    textWrap: 'wrap',\n    sizes: {\n      h1: { fontSize: rem(34), lineHeight: '1.3' },\n      h2: { fontSize: rem(26), lineHeight: '1.35' },\n      h3: { fontSize: rem(22), lineHeight: '1.4' },\n      h4: { fontSize: rem(18), lineHeight: '1.45' },\n      h5: { fontSize: rem(16), lineHeight: '1.5' },\n      h6: { fontSize: rem(14), lineHeight: '1.5' },\n    },\n  },\n\n  fontSizes: {\n    xs: rem(12),\n    sm: rem(14),\n    md: rem(16),\n    lg: rem(18),\n    xl: rem(20),\n  },\n\n  lineHeights: {\n    xs: '1.4',\n    sm: '1.45',\n    md: '1.55',\n    lg: '1.6',\n    xl: '1.65',\n  },\n\n  fontWeights: {\n    regular: '400',\n    medium: '600',\n    bold: '700',\n  },\n\n  radius: {\n    xs: rem(2),\n    sm: rem(4),\n    md: rem(8),\n    lg: rem(16),\n    xl: rem(32),\n  },\n\n  spacing: {\n    xs: rem(10),\n    sm: rem(12),\n    md: rem(16),\n    lg: rem(20),\n    xl: rem(32),\n  },\n\n  breakpoints: {\n    xs: '36em',\n    sm: '48em',\n    md: '62em',\n    lg: '75em',\n    xl: '88em',\n  },\n\n  shadows: {\n    xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,\n    sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(\n      15\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,\n    md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(\n      25\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,\n    lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(\n      23\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,\n    xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(\n      28\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`,\n  },\n\n  other: {},\n  components: {},\n};\n"],"mappings":";;;;AAKA,MAAM,sBACJ;AAEF,MAAa,gBAA8B;CACzC,OAAO;CACP,eAAe;CACf,WAAW;CACX,OAAO;CACP,OAAO;CACP,QAAQ;CACR,cAAc;EAAE,OAAO;EAAG,MAAM;EAAG;CACnC,cAAc;CACd,sBAAsB;CACtB,cAAc;CACd,oBAAoB;CACpB,YAAY;CACZ,qBACE;CACF,sBAAsB;CACtB,YAAY;CACZ,iBAAiB;EAAE,MAAM;EAAQ,IAAI;EAAQ,KAAK;EAAI;CACtD,eAAe;CACf,iBAAiB;CACjB,gBAAgB;CAEhB,UAAU;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,OAAO;GACL,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC7C;EACF;CAED,WAAW;EACT,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,aAAa;EACX,SAAS;EACT,QAAQ;EACR,MAAM;EACP;CAED,QAAQ;EACN,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACZ;CAED,SAAS;EACP,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,SAAS;EACP,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,0BAA0B,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC;EACrE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG;EAClE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG;EACpE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG;EACpE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG;EACrE;CAED,OAAO,EAAE;CACT,YAAY,EAAE;CACf"}
+{"version":3,"file":"default-theme.mjs","names":[],"sources":["../../../src/core/MantineProvider/default-theme.ts"],"sourcesContent":["import { rem } from '../utils';\nimport { defaultVariantColorsResolver } from './color-functions';\nimport { DEFAULT_COLORS } from './default-colors';\nimport type { MantineTheme } from './theme.types';\n\nconst DEFAULT_FONT_FAMILY =\n  '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji';\n\nexport const DEFAULT_THEME: MantineTheme = {\n  scale: 1,\n  fontSmoothing: true,\n  focusRing: 'auto',\n  white: '#fff',\n  black: '#000',\n  colors: DEFAULT_COLORS,\n  primaryShade: { light: 6, dark: 8 },\n  primaryColor: 'blue',\n  variantColorResolver: defaultVariantColorsResolver,\n  autoContrast: false,\n  luminanceThreshold: 0.3,\n  fontFamily: DEFAULT_FONT_FAMILY,\n  fontFamilyMonospace:\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',\n  respectReducedMotion: false,\n  cursorType: 'default',\n  defaultGradient: { from: 'blue', to: 'cyan', deg: 45 },\n  defaultRadius: 'md',\n  activeClassName: 'mantine-active',\n  focusClassName: '',\n\n  headings: {\n    fontFamily: DEFAULT_FONT_FAMILY,\n    fontWeight: '700',\n    textWrap: 'wrap',\n    sizes: {\n      h1: { fontSize: rem(34), lineHeight: '1.3' },\n      h2: { fontSize: rem(26), lineHeight: '1.35' },\n      h3: { fontSize: rem(22), lineHeight: '1.4' },\n      h4: { fontSize: rem(18), lineHeight: '1.45' },\n      h5: { fontSize: rem(16), lineHeight: '1.5' },\n      h6: { fontSize: rem(14), lineHeight: '1.5' },\n    },\n  },\n\n  fontSizes: {\n    xs: rem(12),\n    sm: rem(14),\n    md: rem(16),\n    lg: rem(18),\n    xl: rem(20),\n  },\n\n  lineHeights: {\n    xs: '1.4',\n    sm: '1.45',\n    md: '1.55',\n    lg: '1.6',\n    xl: '1.65',\n  },\n\n  fontWeights: {\n    regular: '400',\n    medium: '600',\n    bold: '700',\n  },\n\n  radius: {\n    xs: rem(2),\n    sm: rem(4),\n    md: rem(8),\n    lg: rem(16),\n    xl: rem(32),\n  },\n\n  spacing: {\n    xs: rem(10),\n    sm: rem(12),\n    md: rem(16),\n    lg: rem(20),\n    xl: rem(32),\n  },\n\n  breakpoints: {\n    xs: '36em',\n    sm: '48em',\n    md: '62em',\n    lg: '75em',\n    xl: '88em',\n  },\n\n  shadows: {\n    xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,\n    sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(\n      15\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,\n    md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(\n      25\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,\n    lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(\n      23\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,\n    xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(\n      28\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`,\n  },\n\n  other: {},\n  components: {},\n};\n"],"mappings":";;;;AAKA,MAAM,sBACJ;AAEF,MAAa,gBAA8B;CACzC,OAAO;CACP,eAAe;CACf,WAAW;CACX,OAAO;CACP,OAAO;CACP,QAAQ;CACR,cAAc;EAAE,OAAO;EAAG,MAAM;EAAG;CACnC,cAAc;CACd,sBAAsB;CACtB,cAAc;CACd,oBAAoB;CACpB,YAAY;CACZ,qBACE;CACF,sBAAsB;CACtB,YAAY;CACZ,iBAAiB;EAAE,MAAM;EAAQ,IAAI;EAAQ,KAAK;EAAI;CACtD,eAAe;CACf,iBAAiB;CACjB,gBAAgB;CAEhB,UAAU;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,OAAO;GACL,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAU,IAAI,GAAG;IAAE,YAAY;IAAO;GAC7C;EACF;CAED,WAAW;EACT,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,aAAa;EACX,SAAS;EACT,QAAQ;EACR,MAAM;EACP;CAED,QAAQ;EACN,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,EAAE;EACV,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACZ;CAED,SAAS;EACP,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACX,IAAI,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,SAAS;EACP,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,0BAA0B,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC;EACrE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG;EAClE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG;EACpE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG;EACpE,IAAI,KAAK,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,8CAA8C,IAAI,GAAG,CAAC,GAAG,IACjF,GACD,CAAC,GAAG,IAAI,GAAG,CAAC,0BAA0B,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG;EACrE;CAED,OAAO,EAAE;CACT,YAAY,EAAE;CACf"}

package/lib/components/Stepper/Stepper.d.ts

@@ -4,7 +4,7 @@ import { StepperStep } from './StepperStep/StepperStep';
 export type StepFragmentComponent = React.FC<{
     step: number;
 }>;
-export type StepperStylesNames = 'root' | 'separator' | 'steps' | 'content' | 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepBody' | 'stepLabel' | 'stepDescription';
+export type StepperStylesNames = 'root' | 'separator' | 'steps' | 'content' | 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepIconContent' | 'stepBody' | 'stepLabel' | 'stepDescription';
 export type StepperCssVariables = {
     root: '--stepper-color' | '--stepper-icon-color' | '--stepper-icon-size' | '--stepper-content-padding' | '--stepper-radius' | '--stepper-fz' | '--stepper-spacing';
 };

package/lib/components/Stepper/StepperStep/StepperStep.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
 import type { StepFragmentComponent } from '../Stepper';
-export type StepperStepStylesNames = 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepBody' | 'stepLabel' | 'stepDescription';
+export type StepperStepStylesNames = 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepIconContent' | 'stepBody' | 'stepLabel' | 'stepDescription';
 export interface StepperStepProps extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {
     /** 0-based step index, automatically set by Stepper component */
     step?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.0.0-alpha.7",
+  "version": "9.0.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.0-alpha.7",
+    "@mantine/hooks": "9.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Badge.css

@@ -107,6 +107,8 @@
   text-overflow: ellipsis;
   text-align: center;
   cursor: inherit;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_91fdda9b {

package/styles/Badge.layer.css

@@ -107,6 +107,8 @@
   text-overflow: ellipsis;
   text-align: center;
   cursor: inherit;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_91fdda9b {

package/styles/Button.css

@@ -137,6 +137,8 @@
   display: flex;
   align-items: center;
   opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_811560b9:where([data-loading]) {

package/styles/Button.layer.css

@@ -137,6 +137,8 @@
   display: flex;
   align-items: center;
   opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_811560b9:where([data-loading]) {

package/styles/Chip.css

@@ -54,6 +54,8 @@
   -webkit-tap-highlight-color: transparent;
   border: 1px solid transparent;
   color: var(--mantine-color-text);
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_be049a53:where([data-checked]) {

package/styles/Chip.layer.css

@@ -54,6 +54,8 @@
   -webkit-tap-highlight-color: transparent;
   border: 1px solid transparent;
   color: var(--mantine-color-text);
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_be049a53:where([data-checked]) {

package/styles/Pill.css

@@ -64,9 +64,12 @@
 .m_1e0e6180 {
   cursor: inherit;
   overflow: hidden;
-  height: 100%;
-  line-height: var(--pill-height);
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_ae386778 {

package/styles/Pill.layer.css

@@ -64,9 +64,12 @@
 .m_1e0e6180 {
   cursor: inherit;
   overflow: hidden;
-  height: 100%;
-  line-height: var(--pill-height);
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_ae386778 {

package/styles/SegmentedControl.css

@@ -45,7 +45,7 @@
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {
@@ -67,7 +67,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
   font-size: var(--sc-font-size);
   padding: var(--sc-padding);
   transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
@@ -112,7 +112,7 @@ fieldset:disabled .m_1738fcb2,
       inset: 0;
       z-index: 0;
       position: absolute;
-      border-radius: var(--sc-radius, var(--mantine-radius-default));
+      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {

package/styles/SegmentedControl.layer.css

@@ -45,7 +45,7 @@
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {
@@ -67,7 +67,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
   font-size: var(--sc-font-size);
   padding: var(--sc-padding);
   transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
@@ -112,7 +112,7 @@ fieldset:disabled .m_1738fcb2,
       inset: 0;
       z-index: 0;
       position: absolute;
-      border-radius: var(--sc-radius, var(--mantine-radius-default));
+      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {