@mantine/core 9.0.1 → 9.1.0

package/cjs/components/Blockquote/Blockquote.cjs

@@ -20,13 +20,12 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { c
 		theme,
 		colorScheme: "dark"
 	});
-	const lightParsed = require_parse_theme_color.parseThemeColor({
-		color: color || theme.primaryColor,
-		theme,
-		colorScheme: "light"
-	});
 	return { root: {
-		"--bq-bg-light": require_rgba.rgba(lightParsed.value, .07),
+		"--bq-bg-light": require_rgba.rgba(require_parse_theme_color.parseThemeColor({
+			color: color || theme.primaryColor,
+			theme,
+			colorScheme: "light"
+		}).value, .07),
 		"--bq-bg-dark": require_rgba.rgba(darkParsed.value, .06),
 		"--bq-bd": require_get_theme_color.getThemeColor(color, theme),
 		"--bq-icon-size": require_rem.rem(iconSize),

package/cjs/components/Blockquote/Blockquote.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.cjs","names":["createVarsResolver","parseThemeColor","rgba","getThemeColor","rem","getRadius","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  parseThemeColor,\n  rem,\n  rgba,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n  root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\n};\n\nexport interface BlockquoteProps\n  extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n  /** Blockquote icon, displayed at the top left side */\n  icon?: React.ReactNode;\n\n  /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n  iconSize?: number | string;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Reference to a cited quote */\n  cite?: React.ReactNode;\n}\n\nexport type BlockquoteFactory = Factory<{\n  props: BlockquoteProps;\n  ref: HTMLQuoteElement;\n  stylesNames: BlockquoteStylesNames;\n  vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n  iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>((theme, { color, iconSize, radius }) => {\n  const darkParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'dark',\n  });\n\n  const lightParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'light',\n  });\n\n  return {\n    root: {\n      '--bq-bg-light': rgba(lightParsed.value, 0.07),\n      '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n      '--bq-bd': getThemeColor(color, theme),\n      '--bq-icon-size': rem(iconSize),\n      '--bq-radius': getRadius(radius),\n    },\n  };\n});\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n  const props = useProps('Blockquote', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    icon,\n    iconSize,\n    cite,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BlockquoteFactory>({\n    name: 'Blockquote',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n      {icon && <span {...getStyles('icon')}>{icon}</span>}\n      {children}\n      {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n    </Box>\n  );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n  export type Props = BlockquoteProps;\n  export type StylesNames = BlockquoteStylesNames;\n  export type CssVariables = BlockquoteCssVariables;\n  export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAaC,0BAAAA,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;CAEF,MAAM,cAAcA,0BAAAA,gBAAgB;EAClC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,iBAAiBC,aAAAA,KAAK,YAAY,OAAO,IAAK;EAC9C,gBAAgBA,aAAAA,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAWC,wBAAAA,cAAc,OAAO,MAAM;EACtC,kBAAkBC,YAAAA,IAAI,SAAS;EAC/B,eAAeC,iBAAAA,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUC,0BAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"Blockquote.cjs","names":["createVarsResolver","parseThemeColor","rgba","getThemeColor","rem","getRadius","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  parseThemeColor,\n  rem,\n  rgba,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Blockquote.module.css';\n\nexport type BlockquoteStylesNames = 'root' | 'icon' | 'cite';\nexport type BlockquoteCssVariables = {\n  root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';\n};\n\nexport interface BlockquoteProps\n  extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {\n  /** Blockquote icon, displayed at the top left side */\n  icon?: React.ReactNode;\n\n  /** Controls icon `width` and `height`, numbers are converted to rem @default 40 */\n  iconSize?: number | string;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Reference to a cited quote */\n  cite?: React.ReactNode;\n}\n\nexport type BlockquoteFactory = Factory<{\n  props: BlockquoteProps;\n  ref: HTMLQuoteElement;\n  stylesNames: BlockquoteStylesNames;\n  vars: BlockquoteCssVariables;\n}>;\n\nconst defaultProps = {\n  iconSize: 48,\n} satisfies Partial<BlockquoteProps>;\n\nconst varsResolver = createVarsResolver<BlockquoteFactory>((theme, { color, iconSize, radius }) => {\n  const darkParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'dark',\n  });\n\n  const lightParsed = parseThemeColor({\n    color: color || theme.primaryColor,\n    theme,\n    colorScheme: 'light',\n  });\n\n  return {\n    root: {\n      '--bq-bg-light': rgba(lightParsed.value, 0.07),\n      '--bq-bg-dark': rgba(darkParsed.value, 0.06),\n      '--bq-bd': getThemeColor(color, theme),\n      '--bq-icon-size': rem(iconSize),\n      '--bq-radius': getRadius(radius),\n    },\n  };\n});\n\nexport const Blockquote = factory<BlockquoteFactory>((_props) => {\n  const props = useProps('Blockquote', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    icon,\n    iconSize,\n    cite,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BlockquoteFactory>({\n    name: 'Blockquote',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box component=\"blockquote\" {...getStyles('root')} {...others}>\n      {icon && <span {...getStyles('icon')}>{icon}</span>}\n      {children}\n      {cite && <cite {...getStyles('cite')}>{cite}</cite>}\n    </Box>\n  );\n});\n\nBlockquote.classes = classes;\nBlockquote.varsResolver = varsResolver;\nBlockquote.displayName = '@mantine/core/Blockquote';\n\nexport namespace Blockquote {\n  export type Props = BlockquoteProps;\n  export type StylesNames = BlockquoteStylesNames;\n  export type CssVariables = BlockquoteCssVariables;\n  export type Factory = BlockquoteFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAaC,0BAAAA,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAQF,QAAO,EACL,MAAM;EACJ,iBAAiBC,aAAAA,KARDD,0BAAAA,gBAAgB;GAClC,OAAO,SAAS,MAAM;GACtB;GACA,aAAa;GACd,CAAC,CAIoC,OAAO,IAAK;EAC9C,gBAAgBC,aAAAA,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAWC,wBAAAA,cAAc,OAAO,MAAM;EACtC,kBAAkBC,YAAAA,IAAI,SAAS;EAC/B,eAAeC,iBAAAA,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUC,0BAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/Flex/Flex.cjs

@@ -1,10 +1,12 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_filter_props = require("../../core/utils/filter-props/filter-props.cjs");
+const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
 const require_MantineThemeProvider = require("../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
 const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
 const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
 const require_InlineStyles = require("../../core/InlineStyles/InlineStyles.cjs");
+const require_hash_styles = require("../../core/InlineStyles/hash-styles.cjs");
 const require_parse_style_props = require("../../core/Box/style-props/parse-style-props/parse-style-props.cjs");
 const require_use_random_classname = require("../../core/Box/use-random-classname/use-random-classname.cjs");
 const require_polymorphic_factory = require("../../core/factory/polymorphic-factory.cjs");
@@ -29,7 +31,7 @@ const Flex = require_polymorphic_factory.polymorphicFactory((_props) => {
 		vars
 	});
 	const theme = require_MantineThemeProvider.useMantineTheme();
-	const responsiveClassName = require_use_random_classname.useRandomClassName();
+	const randomClassName = require_use_random_classname.useRandomClassName();
 	const parsedStyleProps = require_parse_style_props.parseStyleProps({
 		styleProps: {
 			gap,
@@ -43,10 +45,13 @@ const Flex = require_polymorphic_factory.polymorphicFactory((_props) => {
 		theme,
 		data: require_flex_props.FLEX_STYLE_PROPS_DATA
 	});
+	const deduplicateInlineStyles = require_Mantine_context.useMantineDeduplicateInlineStyles();
+	const responsiveClassName = deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles ? require_hash_styles.hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media) : randomClassName;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [parsedStyleProps.hasResponsiveStyles && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
 		selector: `.${responsiveClassName}`,
 		styles: parsedStyleProps.styles,
-		media: parsedStyleProps.media
+		media: parsedStyleProps.media,
+		deduplicate: deduplicateInlineStyles
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		...getStyles("root", {
 			className: responsiveClassName,

package/cjs/components/Flex/Flex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.cjs","names":["polymorphicFactory","useProps","useStyles","useMantineTheme","useRandomClassName","parseStyleProps","FLEX_STYLE_PROPS_DATA","InlineStyles","Box","filterProps","classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  filterProps,\n  InlineStyles,\n  MantineSpacing,\n  parseStyleProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StyleProp,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useRandomClassName,\n  useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n  /** `gap` CSS property */\n  gap?: StyleProp<MantineSpacing>;\n\n  /** `row-gap` CSS property */\n  rowGap?: StyleProp<MantineSpacing>;\n\n  /** `column-gap` CSS property */\n  columnGap?: StyleProp<MantineSpacing>;\n\n  /** `align-items` CSS property */\n  align?: StyleProp<React.CSSProperties['alignItems']>;\n\n  /** `justify-content` CSS property */\n  justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n  /** `flex-wrap` CSS property */\n  wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n  /** `flex-direction` CSS property */\n  direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n  props: FlexProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n  const props = useProps('Flex', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    gap,\n    rowGap,\n    columnGap,\n    align,\n    justify,\n    wrap,\n    direction,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<FlexFactory>({\n    name: 'Flex',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const theme = useMantineTheme();\n  const responsiveClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n    theme,\n    data: FLEX_STYLE_PROPS_DATA,\n  });\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n        />\n      )}\n      <Box\n        {...getStyles('root', {\n          className: responsiveClassName,\n          style: filterProps(parsedStyleProps.inlineStyles),\n        })}\n        {...others}\n      />\n    </>\n  );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n\nexport namespace Flex {\n  export type Props = FlexProps;\n  export type StylesNames = FlexStylesNames;\n  export type Factory = FlexFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAa,OAAOA,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,sBAAsBC,6BAAAA,oBAAoB;CAChD,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAMC,mBAAAA;EACP,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAOC,qBAAAA,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,cAAc"}
+{"version":3,"file":"Flex.cjs","names":["polymorphicFactory","useProps","useStyles","useMantineTheme","useRandomClassName","parseStyleProps","FLEX_STYLE_PROPS_DATA","useMantineDeduplicateInlineStyles","hashStyleProps","InlineStyles","Box","filterProps","classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  filterProps,\n  hashStyleProps,\n  InlineStyles,\n  MantineSpacing,\n  parseStyleProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StyleProp,\n  StylesApiProps,\n  useMantineDeduplicateInlineStyles,\n  useMantineTheme,\n  useProps,\n  useRandomClassName,\n  useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n  /** `gap` CSS property */\n  gap?: StyleProp<MantineSpacing>;\n\n  /** `row-gap` CSS property */\n  rowGap?: StyleProp<MantineSpacing>;\n\n  /** `column-gap` CSS property */\n  columnGap?: StyleProp<MantineSpacing>;\n\n  /** `align-items` CSS property */\n  align?: StyleProp<React.CSSProperties['alignItems']>;\n\n  /** `justify-content` CSS property */\n  justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n  /** `flex-wrap` CSS property */\n  wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n  /** `flex-direction` CSS property */\n  direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n  props: FlexProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n  const props = useProps('Flex', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    gap,\n    rowGap,\n    columnGap,\n    align,\n    justify,\n    wrap,\n    direction,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<FlexFactory>({\n    name: 'Flex',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const theme = useMantineTheme();\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n    theme,\n    data: FLEX_STYLE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n      <Box\n        {...getStyles('root', {\n          className: responsiveClassName,\n          style: filterProps(parsedStyleProps.inlineStyles),\n        })}\n        {...others}\n      />\n    </>\n  );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n\nexport namespace Flex {\n  export type Props = FlexProps;\n  export type StylesNames = FlexStylesNames;\n  export type Factory = FlexFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsDA,MAAa,OAAOA,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,kBAAkBC,6BAAAA,oBAAoB;CAC5C,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAMC,mBAAAA;EACP,CAAC;CAEF,MAAM,0BAA0BC,wBAAAA,mCAAmC;CACnE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxCC,oBAAAA,eAAe,iBAAiB,QAAQ,iBAAiB,MAAM,GAC/D;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;EACb,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAOC,qBAAAA,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,cAAc"}

package/cjs/components/FloatingIndicator/FloatingIndicator.cjs

@@ -12,8 +12,7 @@ let _mantine_hooks = require("@mantine/hooks");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { transitionDuration }, { shouldReduceMotion }) => {
-	const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? "0ms" : typeof transitionDuration === "number" ? `${transitionDuration}ms` : transitionDuration || "150ms";
-	return { root: { "--transition-duration": duration } };
+	return { root: { "--transition-duration": (theme.respectReducedMotion ? shouldReduceMotion : false) ? "0ms" : typeof transitionDuration === "number" ? `${transitionDuration}ms` : transitionDuration || "150ms" } };
 });
 const FloatingIndicator = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("FloatingIndicator", null, _props);

package/cjs/components/FloatingIndicator/FloatingIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n  root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n  extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n  /** Target element over which the indicator is displayed.\n   * The indicator will be positioned to match the target's size and position.\n   * */\n  target: HTMLElement | null | undefined;\n\n  /** Parent container element that must have `position: relative`.\n   * The indicator's position is calculated relative to this element.\n   * */\n  parent: HTMLElement | null | undefined;\n\n  /** Transition duration in ms @default 150 */\n  transitionDuration?: number | string;\n\n  /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n   * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n   * the indicator from appearing at the wrong position during the parent's animation.\n   * @default false\n   * */\n  displayAfterTransitionEnd?: boolean;\n\n  /** Called when the indicator starts transitioning to a new position */\n  onTransitionStart?: () => void;\n\n  /** Called when the indicator finishes transitioning to a new position */\n  onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n  props: FloatingIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingIndicatorStylesNames;\n  vars: FloatingIndicatorCssVariables;\n  ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n  (theme, { transitionDuration }, { shouldReduceMotion }) => {\n    const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n    const duration = reduceMotion\n      ? '0ms'\n      : typeof transitionDuration === 'number'\n        ? `${transitionDuration}ms`\n        : transitionDuration || '150ms';\n\n    return {\n      root: {\n        '--transition-duration': duration,\n      },\n    };\n  }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n  const props = useProps('FloatingIndicator', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    target,\n    parent,\n    transitionDuration,\n    mod,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const shouldReduceMotion = useReducedMotion();\n\n  const getStyles = useStyles<FloatingIndicatorFactory>({\n    name: 'FloatingIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    stylesCtx: { shouldReduceMotion },\n  });\n\n  const innerRef = useRef<HTMLDivElement>(null);\n  const { initialized, hidden } = useFloatingIndicator({\n    target,\n    parent,\n    ref: innerRef,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n  });\n\n  const mergedRef = useMergedRef(ref, innerRef);\n\n  if (!target || !parent) {\n    return null;\n  }\n\n  return (\n    <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n  );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n  export type Props = FloatingIndicatorProps;\n  export type StylesNames = FloatingIndicatorStylesNames;\n  export type CssVariables = FloatingIndicatorCssVariables;\n  export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;CAEzD,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB;AAE5B,QAAO,EACL,MAAM,EACJ,yBAAyB,UAC1B,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,MAAM,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAIJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,qBAAA,GAAA,eAAA,mBAd8B,EAcV;EAClC,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,QAAkC,KAAK;CAC7C,MAAM,EAAE,aAAa,WAAWC,+BAAAA,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,SAAS;AAE7C,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;GAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAEjG;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n  root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n  extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n  /** Target element over which the indicator is displayed.\n   * The indicator will be positioned to match the target's size and position.\n   * */\n  target: HTMLElement | null | undefined;\n\n  /** Parent container element that must have `position: relative`.\n   * The indicator's position is calculated relative to this element.\n   * */\n  parent: HTMLElement | null | undefined;\n\n  /** Transition duration in ms @default 150 */\n  transitionDuration?: number | string;\n\n  /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n   * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n   * the indicator from appearing at the wrong position during the parent's animation.\n   * @default false\n   * */\n  displayAfterTransitionEnd?: boolean;\n\n  /** Called when the indicator starts transitioning to a new position */\n  onTransitionStart?: () => void;\n\n  /** Called when the indicator finishes transitioning to a new position */\n  onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n  props: FloatingIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingIndicatorStylesNames;\n  vars: FloatingIndicatorCssVariables;\n  ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n  (theme, { transitionDuration }, { shouldReduceMotion }) => {\n    const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n    const duration = reduceMotion\n      ? '0ms'\n      : typeof transitionDuration === 'number'\n        ? `${transitionDuration}ms`\n        : transitionDuration || '150ms';\n\n    return {\n      root: {\n        '--transition-duration': duration,\n      },\n    };\n  }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n  const props = useProps('FloatingIndicator', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    target,\n    parent,\n    transitionDuration,\n    mod,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const shouldReduceMotion = useReducedMotion();\n\n  const getStyles = useStyles<FloatingIndicatorFactory>({\n    name: 'FloatingIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    stylesCtx: { shouldReduceMotion },\n  });\n\n  const innerRef = useRef<HTMLDivElement>(null);\n  const { initialized, hidden } = useFloatingIndicator({\n    target,\n    parent,\n    ref: innerRef,\n    displayAfterTransitionEnd,\n    onTransitionStart,\n    onTransitionEnd,\n  });\n\n  const mergedRef = useMergedRef(ref, innerRef);\n\n  if (!target || !parent) {\n    return null;\n  }\n\n  return (\n    <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n  );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n  export type Props = FloatingIndicatorProps;\n  export type StylesNames = FloatingIndicatorStylesNames;\n  export type CssVariables = FloatingIndicatorCssVariables;\n  export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA0DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;AAQzD,QAAO,EACL,MAAM,EACJ,0BATiB,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB,SAKzB,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,MAAM,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAIJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,qBAAA,GAAA,eAAA,mBAd8B,EAcV;EAClC,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,QAAkC,KAAK;CAC7C,MAAM,EAAE,aAAa,WAAWC,+BAAAA,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,SAAS;AAE7C,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;GAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAEjG;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}

package/cjs/components/MaskInput/MaskInput.cjs

@@ -0,0 +1,24 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_factory = require("../../core/factory/factory.cjs");
+const require_InputBase = require("../InputBase/InputBase.cjs");
+const require_use_mask_input_props = require("./use-mask-input-props.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/MaskInput/MaskInput.tsx
+const defaultProps = {};
+const MaskInput = require_factory.factory((props) => {
+	const { maskRef, elementProps } = require_use_mask_input_props.useMaskInputProps(require_use_props.useProps("MaskInput", defaultProps, props));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
+		component: "input",
+		ref: maskRef,
+		...elementProps,
+		__staticSelector: "MaskInput"
+	});
+});
+MaskInput.classes = require_InputBase.InputBase.classes;
+MaskInput.displayName = "@mantine/core/MaskInput";
+//#endregion
+exports.MaskInput = MaskInput;
+
+//# sourceMappingURL=MaskInput.cjs.map

package/cjs/components/MaskInput/MaskInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaskInput.cjs","names":["factory","useMaskInputProps","useProps","InputBase"],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<MaskInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** Mask pattern string or array of string literals and RegExp objects */\n  mask: string | Array<string | RegExp>;\n\n  /** Override or extend the default token map */\n  tokens?: Record<string, RegExp>;\n\n  /** Called before masking on each keystroke, can return overrides for mask options */\n  modify?: (\n    value: string\n  ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n  /** When true, raw and display values are decoupled */\n  separate?: boolean;\n\n  /** Character displayed in unfilled slots, `\"_\"` by default */\n  slotChar?: string | null;\n\n  /** Show mask pattern even when field is empty and unfocused */\n  alwaysShowMask?: boolean;\n\n  /** Show mask placeholder on focus, `true` by default */\n  showMaskOnFocus?: boolean;\n\n  /** Transform each character before validation and insertion */\n  transform?: (char: string) => string;\n\n  /** Clear value on blur when mask is incomplete, `false` by default */\n  autoClear?: boolean;\n\n  /** Called on every change with raw and masked values */\n  onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n  /** Called when all required mask slots are filled */\n  onComplete?: (maskedValue: string, rawValue: string) => void;\n\n  /** Escape hatch for advanced cursor/value manipulation */\n  beforeMaskedStateChange?: (states: {\n    previousState: { value: string; selection: { start: number; end: number } | null };\n    currentState: { value: string; selection: { start: number; end: number } | null };\n    nextState: { value: string; selection: { start: number; end: number } | null };\n  }) => { value: string; selection: { start: number; end: number } | null };\n}\n\nexport type MaskInputFactory = Factory<{\n  props: MaskInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n  const _props = useProps('MaskInput', defaultProps, props);\n  const { maskRef, elementProps } = useMaskInputProps(_props);\n\n  return (\n    <InputBase\n      component=\"input\"\n      ref={maskRef}\n      {...(elementProps as any)}\n      __staticSelector=\"MaskInput\"\n    />\n  );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;;AA6DA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiBC,6BAAAA,kBADnBC,kBAAAA,SAAS,aAAa,cAAc,MAAM,CACE;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAUA,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}

package/cjs/components/MaskInput/use-mask-input-props.cjs

@@ -0,0 +1,29 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+let _mantine_hooks = require("@mantine/hooks");
+//#region packages/@mantine/core/src/components/MaskInput/use-mask-input-props.ts
+function useMaskInputProps(props) {
+	const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, ref, ...elementProps } = props;
+	const { ref: maskCallbackRef } = (0, _mantine_hooks.useMask)({
+		mask,
+		tokens,
+		modify,
+		separate,
+		slotChar,
+		alwaysShowMask,
+		showMaskOnFocus,
+		transform,
+		autoClear,
+		onChangeRaw,
+		onComplete,
+		beforeMaskedStateChange
+	});
+	return {
+		maskRef: (0, _mantine_hooks.useMergedRef)(ref, maskCallbackRef),
+		elementProps
+	};
+}
+//#endregion
+exports.useMaskInputProps = useMaskInputProps;
+
+//# sourceMappingURL=use-mask-input-props.cjs.map

package/cjs/components/MaskInput/use-mask-input-props.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mask-input-props.cjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const {\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n    ref,\n    ...elementProps\n  } = props;\n\n  const { ref: maskCallbackRef } = useMask({\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n  });\n\n  const maskRef = useMergedRef(ref, maskCallbackRef);\n\n  return { maskRef, elementProps };\n}\n"],"mappings":";;;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,qBAAA,GAAA,eAAA,SAA4B;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QAAO;EAAE,UAAA,GAAA,eAAA,cAFoB,KAAK,gBAAgB;EAEhC;EAAc"}

package/cjs/components/Rating/Rating.cjs

@@ -116,9 +116,8 @@ const Rating = require_factory.factory((_props) => {
 	const items = Array(_count).fill(0).map((_, index) => {
 		const integerValue = index + 1;
 		const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));
-		const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-active": isGroupActive || void 0,
+			"data-active": !readOnly && Math.ceil(hovered) === integerValue || void 0,
 			...getStyles("symbolGroup"),
 			children: fractionItems.map((__, fractionIndex) => {
 				const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);

package/cjs/components/Rating/Rating.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","RatingItem","RatingProvider","Box","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n  const rounded = Math.round(value / to) * to;\n  const precision = `${to}`.split('.')[1]?.length || 0;\n  return Number(rounded.toFixed(precision));\n}\n\nexport type RatingStylesNames =\n  | 'root'\n  | 'starSymbol'\n  | 'input'\n  | 'label'\n  | 'symbolBody'\n  | 'symbolGroup';\n\nexport type RatingCssVariables = {\n  root: '--rating-size' | '--rating-color';\n};\n\nexport interface RatingProps\n  extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */\n  emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Icon displayed for selected rating items. Can be a function that receives the rating value. */\n  fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Number of fractions each item can be divided into, default is 1 */\n  fractions?: number;\n\n  /** Controls component size @default 'sm' */\n  size?: MantineSize | number | (string & {});\n\n  /** Number of rating items (stars), default is 5 */\n  count?: number;\n\n  /** Called when rating item is hovered. Receives -1 when hover ends. */\n  onHover?: (value: number) => void;\n\n  /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */\n  getSymbolLabel?: (index: number) => string;\n\n  /** Name attribute for form submission. If not provided, a unique id will be generated. */\n  name?: string;\n\n  /** When true, rating cannot be changed by user interaction, default is false */\n  readOnly?: boolean;\n\n  /** When true, clicking the same rating value clears the rating to 0, default is false */\n  allowClear?: boolean;\n\n  /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */\n  highlightSelectedOnly?: boolean;\n\n  /** Key of theme.colors or any CSS color value, default is 'yellow' */\n  color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n  props: RatingProps;\n  ref: HTMLDivElement;\n  stylesNames: RatingStylesNames;\n  vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  getSymbolLabel: (value) => `${value}`,\n  count: 5,\n  fractions: 1,\n  color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n  root: {\n    '--rating-size': getSize(size, 'rating-size'),\n    '--rating-color': getThemeColor(color, theme),\n  },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n  const props = useProps('Rating', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    name,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    fractions,\n    count,\n    onMouseEnter,\n    readOnly,\n    allowClear,\n    onMouseMove,\n    onHover,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    size,\n    variant,\n    getSymbolLabel,\n    color,\n    emptySymbol,\n    fullSymbol,\n    highlightSelectedOnly,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RatingFactory>({\n    name: 'Rating',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { dir } = useDirection();\n\n  const _name = useId(name);\n  const _id = useId(id);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const [hovered, setHovered] = useState(-1);\n  const [isOutside, setOutside] = useState(true);\n\n  const _fractions = Math.floor(fractions);\n  const _count = Math.floor(count);\n\n  const decimalUnit = 1 / _fractions;\n  const stableValueRounded = roundValueTo(_value, decimalUnit);\n  const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n  const getRatingFromCoordinates = (x: number) => {\n    if (!rootRef.current) {\n      return 0;\n    }\n\n    const { left, right, width } = rootRef.current.getBoundingClientRect();\n    const symbolWidth = width / _count;\n\n    const hoverPosition = dir === 'rtl' ? right - x : x - left;\n    const hoverValue = hoverPosition / symbolWidth;\n\n    return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n  };\n\n  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n    !readOnly && setOutside(false);\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseMove?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    const rounded = getRatingFromCoordinates(event.clientX);\n\n    setHovered(rounded);\n    rounded !== hovered && onHover?.(rounded);\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseLeave?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    setHovered(-1);\n    setOutside(true);\n    hovered !== -1 && onHover?.(-1);\n  };\n\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n    const { touches } = event;\n    if (touches.length !== 1) {\n      return;\n    }\n\n    if (!readOnly) {\n      const touch = touches[0];\n      setValue(getRatingFromCoordinates(touch.clientX));\n    }\n\n    onTouchStart?.(event);\n  };\n\n  const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    onTouchEnd?.(event);\n  };\n\n  const handleItemBlur = () => isOutside && setHovered(-1);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      if (typeof event === 'number') {\n        setHovered(event);\n      } else {\n        setHovered(parseFloat(event.target.value));\n      }\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      const newValue = typeof event === 'number' ? event : parseFloat(event.target.value);\n\n      // If allowClear is true and clicking the same value, reset to 0\n      if (allowClear && newValue === stableValueRounded) {\n        setValue(0);\n      } else {\n        setValue(newValue);\n      }\n    }\n  };\n\n  const items = Array(_count)\n    .fill(0)\n    .map((_, index) => {\n      const integerValue = index + 1;\n      const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n      const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n      return (\n        <div\n          key={integerValue}\n          data-active={isGroupActive || undefined}\n          {...getStyles('symbolGroup')}\n        >\n          {fractionItems.map((__, fractionIndex) => {\n            const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);\n            const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n            return (\n              <RatingItem\n                key={`${integerValue}-${symbolValue}`}\n                getSymbolLabel={getSymbolLabel}\n                emptyIcon={emptySymbol}\n                fullIcon={fullSymbol}\n                full={\n                  highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n                }\n                active={symbolValue === finalValue}\n                checked={symbolValue === stableValueRounded}\n                readOnly={readOnly}\n                fractionValue={fractionValue}\n                value={symbolValue}\n                name={_name}\n                onChange={handleChange}\n                onBlur={handleItemBlur}\n                onInputChange={handleInputChange}\n                id={`${_id}-${index}-${fractionIndex}`}\n              />\n            );\n          })}\n        </div>\n      );\n    });\n\n  return (\n    <RatingProvider value={{ getStyles }}>\n      <Box\n        ref={useMergedRef(rootRef, ref)}\n        {...getStyles('root')}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\n        variant={variant}\n        size={size}\n        id={_id}\n        {...others}\n      >\n        {items}\n      </Box>\n    </RatingProvider>\n  );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n  export type Props = RatingProps;\n  export type StylesNames = RatingStylesNames;\n  export type Factory = RatingFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","RatingItem","RatingProvider","Box","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n  const rounded = Math.round(value / to) * to;\n  const precision = `${to}`.split('.')[1]?.length || 0;\n  return Number(rounded.toFixed(precision));\n}\n\nexport type RatingStylesNames =\n  | 'root'\n  | 'starSymbol'\n  | 'input'\n  | 'label'\n  | 'symbolBody'\n  | 'symbolGroup';\n\nexport type RatingCssVariables = {\n  root: '--rating-size' | '--rating-color';\n};\n\nexport interface RatingProps\n  extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */\n  emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Icon displayed for selected rating items. Can be a function that receives the rating value. */\n  fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Number of fractions each item can be divided into, default is 1 */\n  fractions?: number;\n\n  /** Controls component size @default 'sm' */\n  size?: MantineSize | number | (string & {});\n\n  /** Number of rating items (stars), default is 5 */\n  count?: number;\n\n  /** Called when rating item is hovered. Receives -1 when hover ends. */\n  onHover?: (value: number) => void;\n\n  /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */\n  getSymbolLabel?: (index: number) => string;\n\n  /** Name attribute for form submission. If not provided, a unique id will be generated. */\n  name?: string;\n\n  /** When true, rating cannot be changed by user interaction, default is false */\n  readOnly?: boolean;\n\n  /** When true, clicking the same rating value clears the rating to 0, default is false */\n  allowClear?: boolean;\n\n  /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */\n  highlightSelectedOnly?: boolean;\n\n  /** Key of theme.colors or any CSS color value, default is 'yellow' */\n  color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n  props: RatingProps;\n  ref: HTMLDivElement;\n  stylesNames: RatingStylesNames;\n  vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  getSymbolLabel: (value) => `${value}`,\n  count: 5,\n  fractions: 1,\n  color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n  root: {\n    '--rating-size': getSize(size, 'rating-size'),\n    '--rating-color': getThemeColor(color, theme),\n  },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n  const props = useProps('Rating', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    name,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    fractions,\n    count,\n    onMouseEnter,\n    readOnly,\n    allowClear,\n    onMouseMove,\n    onHover,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    size,\n    variant,\n    getSymbolLabel,\n    color,\n    emptySymbol,\n    fullSymbol,\n    highlightSelectedOnly,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RatingFactory>({\n    name: 'Rating',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { dir } = useDirection();\n\n  const _name = useId(name);\n  const _id = useId(id);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const [hovered, setHovered] = useState(-1);\n  const [isOutside, setOutside] = useState(true);\n\n  const _fractions = Math.floor(fractions);\n  const _count = Math.floor(count);\n\n  const decimalUnit = 1 / _fractions;\n  const stableValueRounded = roundValueTo(_value, decimalUnit);\n  const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n  const getRatingFromCoordinates = (x: number) => {\n    if (!rootRef.current) {\n      return 0;\n    }\n\n    const { left, right, width } = rootRef.current.getBoundingClientRect();\n    const symbolWidth = width / _count;\n\n    const hoverPosition = dir === 'rtl' ? right - x : x - left;\n    const hoverValue = hoverPosition / symbolWidth;\n\n    return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n  };\n\n  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n    !readOnly && setOutside(false);\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseMove?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    const rounded = getRatingFromCoordinates(event.clientX);\n\n    setHovered(rounded);\n    rounded !== hovered && onHover?.(rounded);\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseLeave?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    setHovered(-1);\n    setOutside(true);\n    hovered !== -1 && onHover?.(-1);\n  };\n\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n    const { touches } = event;\n    if (touches.length !== 1) {\n      return;\n    }\n\n    if (!readOnly) {\n      const touch = touches[0];\n      setValue(getRatingFromCoordinates(touch.clientX));\n    }\n\n    onTouchStart?.(event);\n  };\n\n  const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    onTouchEnd?.(event);\n  };\n\n  const handleItemBlur = () => isOutside && setHovered(-1);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      if (typeof event === 'number') {\n        setHovered(event);\n      } else {\n        setHovered(parseFloat(event.target.value));\n      }\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      const newValue = typeof event === 'number' ? event : parseFloat(event.target.value);\n\n      // If allowClear is true and clicking the same value, reset to 0\n      if (allowClear && newValue === stableValueRounded) {\n        setValue(0);\n      } else {\n        setValue(newValue);\n      }\n    }\n  };\n\n  const items = Array(_count)\n    .fill(0)\n    .map((_, index) => {\n      const integerValue = index + 1;\n      const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n      const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n      return (\n        <div\n          key={integerValue}\n          data-active={isGroupActive || undefined}\n          {...getStyles('symbolGroup')}\n        >\n          {fractionItems.map((__, fractionIndex) => {\n            const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);\n            const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n            return (\n              <RatingItem\n                key={`${integerValue}-${symbolValue}`}\n                getSymbolLabel={getSymbolLabel}\n                emptyIcon={emptySymbol}\n                fullIcon={fullSymbol}\n                full={\n                  highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n                }\n                active={symbolValue === finalValue}\n                checked={symbolValue === stableValueRounded}\n                readOnly={readOnly}\n                fractionValue={fractionValue}\n                value={symbolValue}\n                name={_name}\n                onChange={handleChange}\n                onBlur={handleItemBlur}\n                onInputChange={handleInputChange}\n                id={`${_id}-${index}-${fractionIndex}`}\n              />\n            );\n          })}\n        </div>\n      );\n    });\n\n  return (\n    <RatingProvider value={{ getStyles }}>\n      <Box\n        ref={useMergedRef(rootRef, ref)}\n        {...getStyles('root')}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\n        variant={variant}\n        size={size}\n        id={_id}\n        {...others}\n      >\n        {items}\n      </Box>\n    </RatingProvider>\n  );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n  export type Props = RatingProps;\n  export type StylesNames = RatingStylesNames;\n  export type Factory = RatingFactory;\n}\n"],"mappings":"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"}

package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs

@@ -65,6 +65,8 @@ const SemiCircleProgress = require_factory.factory((_props) => {
 			"data-orientation": orientation,
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			width: size,
+			height: size / 2,
 			viewBox: `0 0 ${size} ${size / 2}`,
 			...getStyles("svg"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {

package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SemiCircleProgress.cjs","names":["createVarsResolver","getThemeColor","rem","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './SemiCircleProgress.module.css';\n\nexport type SemiCircleProgressStylesNames =\n  | 'root'\n  | 'svg'\n  | 'emptySegment'\n  | 'filledSegment'\n  | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n  root:\n    | '--scp-filled-segment-color'\n    | '--scp-empty-segment-color'\n    | '--scp-rotation'\n    | '--scp-transition-duration'\n    | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n  extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {\n  /** Progress value from `0` to `100` */\n  value: number;\n\n  /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */\n  size?: number;\n\n  /** Stroke width of the circle segments in px @default 12 */\n  thickness?: number;\n\n  /** Orientation of the circle @default 'up' */\n  orientation?: 'up' | 'down';\n\n  /** Direction from which the circle is filled @default 'left-to-right' */\n  fillDirection?: 'right-to-left' | 'left-to-right';\n\n  /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n  filledSegmentColor?: MantineColor;\n\n  /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */\n  emptySegmentColor?: MantineColor;\n\n  /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */\n  transitionDuration?: number;\n\n  /** Label rendered inside the circle */\n  label?: React.ReactNode;\n\n  /** Label position relative to the circle center @default 'bottom' */\n  labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n  props: SemiCircleProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: SemiCircleProgressStylesNames;\n  vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 200,\n  thickness: 12,\n  orientation: 'up',\n  fillDirection: 'left-to-right',\n  labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>;\n\nfunction getRotation({\n  orientation,\n  fillDirection,\n}: Pick<SemiCircleProgressProps, 'orientation' | 'fillDirection'>) {\n  if (orientation === 'down') {\n    if (fillDirection === 'right-to-left') {\n      return 'rotate(180deg) rotateY(180deg)';\n    }\n    return 'rotate(180deg)';\n  }\n  if (fillDirection === 'left-to-right') {\n    return 'rotateY(180deg)';\n  }\n\n  return undefined;\n}\n\nconst varsResolver = createVarsResolver<SemiCircleProgressFactory>(\n  (\n    theme,\n    {\n      filledSegmentColor,\n      emptySegmentColor,\n      orientation,\n      fillDirection,\n      transitionDuration,\n      thickness,\n    }\n  ) => ({\n    root: {\n      '--scp-filled-segment-color': filledSegmentColor\n        ? getThemeColor(filledSegmentColor, theme)\n        : undefined,\n      '--scp-empty-segment-color': emptySegmentColor\n        ? getThemeColor(emptySegmentColor, theme)\n        : undefined,\n      '--scp-rotation': getRotation({ orientation, fillDirection }),\n      '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n      '--scp-thickness': rem(thickness),\n    },\n  })\n);\n\nexport const SemiCircleProgress = factory<SemiCircleProgressFactory>((_props) => {\n  const props = useProps('SemiCircleProgress', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    thickness,\n    value,\n    orientation,\n    fillDirection,\n    filledSegmentColor,\n    emptySegmentColor,\n    transitionDuration,\n    label,\n    labelPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SemiCircleProgressFactory>({\n    name: 'SemiCircleProgress',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const coordinateForCircle = size / 2;\n  const radius = (size - 2 * thickness) / 2;\n  const circumference = Math.PI * radius;\n  const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      {label && (\n        <div {...getStyles('label')} data-position={labelPosition} data-orientation={orientation}>\n          {label}\n        </div>\n      )}\n\n      <svg viewBox={`0 0 ${size} ${size / 2}`} {...getStyles('svg')}>\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-empty-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('emptySegment', { style: { strokeDashoffset: circumference } })}\n        />\n\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-filled-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('filledSegment', { style: { strokeDashoffset: semiCirclePercentage } })}\n        />\n      </svg>\n    </Box>\n  );\n});\n\nSemiCircleProgress.displayName = '@mantine/core/SemiCircleProgress';\nSemiCircleProgress.classes = classes;\nSemiCircleProgress.varsResolver = varsResolver;\n\nexport namespace SemiCircleProgress {\n  export type Props = SemiCircleProgressProps;\n  export type StylesNames = SemiCircleProgressStylesNames;\n  export type CssVariables = SemiCircleProgressCssVariables;\n  export type Factory = SemiCircleProgressFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,aAAa;CACb,eAAe;CACf,eAAe;CAChB;AAED,SAAS,YAAY,EACnB,aACA,iBACiE;AACjE,KAAI,gBAAgB,QAAQ;AAC1B,MAAI,kBAAkB,gBACpB,QAAO;AAET,SAAO;;AAET,KAAI,kBAAkB,gBACpB,QAAO;;AAMX,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,oBACA,mBACA,aACA,eACA,oBACA,iBAEE,EACJ,MAAM;CACJ,8BAA8B,qBAC1BC,wBAAAA,cAAc,oBAAoB,MAAM,GACxC,KAAA;CACJ,6BAA6B,oBACzBA,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACJ,kBAAkB,YAAY;EAAE;EAAa;EAAe,CAAC;CAC7D,6BAA6B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC9E,mBAAmBC,YAAAA,IAAI,UAAU;CAClC,EACF,EACF;AAED,MAAa,qBAAqBC,gBAAAA,SAAoC,WAAW;CAC/E,MAAM,QAAQC,kBAAAA,SAAS,sBAAsB,cAAc,OAAO;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,WACA,OACA,aACA,eACA,oBACA,mBACA,oBACA,OACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAqC;EACrD,MAAM;EACN,SAAA,kCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,OAAO;CACnC,MAAM,UAAU,OAAO,IAAI,aAAa;CACxC,MAAM,gBAAgB,KAAK,KAAK;CAChC,MAAM,wBAAA,GAAA,eAAA,OAA6B,OAAO,GAAG,IAAI,IAAI,gBAAgB;AAErE,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAA5C,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,iBAAe;GAAe,oBAAkB;aAC1E;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,SAAS,OAAO,KAAK,GAAG,OAAO;GAAK,GAAI,UAAU,MAAM;aAA7D,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,eAAe,EAAE,CAAC;IAC7E,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,sBAAsB,EAAE,CAAC;IACrF,CAAA,CACE;KACF;;EAER;AAEF,mBAAmB,cAAc;AACjC,mBAAmB,UAAUC,kCAAAA;AAC7B,mBAAmB,eAAe"}
+{"version":3,"file":"SemiCircleProgress.cjs","names":["createVarsResolver","getThemeColor","rem","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './SemiCircleProgress.module.css';\n\nexport type SemiCircleProgressStylesNames =\n  | 'root'\n  | 'svg'\n  | 'emptySegment'\n  | 'filledSegment'\n  | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n  root:\n    | '--scp-filled-segment-color'\n    | '--scp-empty-segment-color'\n    | '--scp-rotation'\n    | '--scp-transition-duration'\n    | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n  extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {\n  /** Progress value from `0` to `100` */\n  value: number;\n\n  /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */\n  size?: number;\n\n  /** Stroke width of the circle segments in px @default 12 */\n  thickness?: number;\n\n  /** Orientation of the circle @default 'up' */\n  orientation?: 'up' | 'down';\n\n  /** Direction from which the circle is filled @default 'left-to-right' */\n  fillDirection?: 'right-to-left' | 'left-to-right';\n\n  /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n  filledSegmentColor?: MantineColor;\n\n  /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */\n  emptySegmentColor?: MantineColor;\n\n  /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */\n  transitionDuration?: number;\n\n  /** Label rendered inside the circle */\n  label?: React.ReactNode;\n\n  /** Label position relative to the circle center @default 'bottom' */\n  labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n  props: SemiCircleProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: SemiCircleProgressStylesNames;\n  vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 200,\n  thickness: 12,\n  orientation: 'up',\n  fillDirection: 'left-to-right',\n  labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>;\n\nfunction getRotation({\n  orientation,\n  fillDirection,\n}: Pick<SemiCircleProgressProps, 'orientation' | 'fillDirection'>) {\n  if (orientation === 'down') {\n    if (fillDirection === 'right-to-left') {\n      return 'rotate(180deg) rotateY(180deg)';\n    }\n    return 'rotate(180deg)';\n  }\n  if (fillDirection === 'left-to-right') {\n    return 'rotateY(180deg)';\n  }\n\n  return undefined;\n}\n\nconst varsResolver = createVarsResolver<SemiCircleProgressFactory>(\n  (\n    theme,\n    {\n      filledSegmentColor,\n      emptySegmentColor,\n      orientation,\n      fillDirection,\n      transitionDuration,\n      thickness,\n    }\n  ) => ({\n    root: {\n      '--scp-filled-segment-color': filledSegmentColor\n        ? getThemeColor(filledSegmentColor, theme)\n        : undefined,\n      '--scp-empty-segment-color': emptySegmentColor\n        ? getThemeColor(emptySegmentColor, theme)\n        : undefined,\n      '--scp-rotation': getRotation({ orientation, fillDirection }),\n      '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n      '--scp-thickness': rem(thickness),\n    },\n  })\n);\n\nexport const SemiCircleProgress = factory<SemiCircleProgressFactory>((_props) => {\n  const props = useProps('SemiCircleProgress', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    thickness,\n    value,\n    orientation,\n    fillDirection,\n    filledSegmentColor,\n    emptySegmentColor,\n    transitionDuration,\n    label,\n    labelPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SemiCircleProgressFactory>({\n    name: 'SemiCircleProgress',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const coordinateForCircle = size / 2;\n  const radius = (size - 2 * thickness) / 2;\n  const circumference = Math.PI * radius;\n  const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      {label && (\n        <div {...getStyles('label')} data-position={labelPosition} data-orientation={orientation}>\n          {label}\n        </div>\n      )}\n\n      <svg width={size} height={size / 2} viewBox={`0 0 ${size} ${size / 2}`} {...getStyles('svg')}>\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-empty-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('emptySegment', { style: { strokeDashoffset: circumference } })}\n        />\n\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-filled-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('filledSegment', { style: { strokeDashoffset: semiCirclePercentage } })}\n        />\n      </svg>\n    </Box>\n  );\n});\n\nSemiCircleProgress.displayName = '@mantine/core/SemiCircleProgress';\nSemiCircleProgress.classes = classes;\nSemiCircleProgress.varsResolver = varsResolver;\n\nexport namespace SemiCircleProgress {\n  export type Props = SemiCircleProgressProps;\n  export type StylesNames = SemiCircleProgressStylesNames;\n  export type CssVariables = SemiCircleProgressCssVariables;\n  export type Factory = SemiCircleProgressFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,aAAa;CACb,eAAe;CACf,eAAe;CAChB;AAED,SAAS,YAAY,EACnB,aACA,iBACiE;AACjE,KAAI,gBAAgB,QAAQ;AAC1B,MAAI,kBAAkB,gBACpB,QAAO;AAET,SAAO;;AAET,KAAI,kBAAkB,gBACpB,QAAO;;AAMX,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,oBACA,mBACA,aACA,eACA,oBACA,iBAEE,EACJ,MAAM;CACJ,8BAA8B,qBAC1BC,wBAAAA,cAAc,oBAAoB,MAAM,GACxC,KAAA;CACJ,6BAA6B,oBACzBA,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACJ,kBAAkB,YAAY;EAAE;EAAa;EAAe,CAAC;CAC7D,6BAA6B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC9E,mBAAmBC,YAAAA,IAAI,UAAU;CAClC,EACF,EACF;AAED,MAAa,qBAAqBC,gBAAAA,SAAoC,WAAW;CAC/E,MAAM,QAAQC,kBAAAA,SAAS,sBAAsB,cAAc,OAAO;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,WACA,OACA,aACA,eACA,oBACA,mBACA,oBACA,OACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAqC;EACrD,MAAM;EACN,SAAA,kCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,OAAO;CACnC,MAAM,UAAU,OAAO,IAAI,aAAa;CACxC,MAAM,gBAAgB,KAAK,KAAK;CAChC,MAAM,wBAAA,GAAA,eAAA,OAA6B,OAAO,GAAG,IAAI,IAAI,gBAAgB;AAErE,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAA5C,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,iBAAe;GAAe,oBAAkB;aAC1E;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,OAAO;GAAM,QAAQ,OAAO;GAAG,SAAS,OAAO,KAAK,GAAG,OAAO;GAAK,GAAI,UAAU,MAAM;aAA5F,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,eAAe,EAAE,CAAC;IAC7E,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,sBAAsB,EAAE,CAAC;IACrF,CAAA,CACE;KACF;;EAER;AAEF,mBAAmB,cAAc;AACjC,mBAAmB,UAAUC,kCAAAA;AAC7B,mBAAmB,eAAe"}

package/cjs/components/Slider/Marks/Marks.cjs

@@ -7,7 +7,7 @@ const require_is_mark_filled = require("./is-mark-filled.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Slider/Marks/Marks.tsx
-function Marks({ marks, min, max, disabled, value, offset, inverted }) {
+function Marks({ marks, min, max, disabled, value, offset, inverted, startPointValue }) {
 	const { getStyles } = require_Slider_context.useSliderContext();
 	if (!marks) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: marks.map((mark, index) => {
@@ -27,7 +27,8 @@ function Marks({ marks, min, max, disabled, value, offset, inverted }) {
 					mark,
 					value,
 					offset,
-					inverted
+					inverted,
+					startPointValue
 				}),
 				disabled
 			}

package/cjs/components/Slider/Marks/Marks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Marks.cjs","names":["useSliderContext","Box","getPosition","isMarkFilled"],"sources":["../../../../src/components/Slider/Marks/Marks.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { useSliderContext } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\n\nexport interface MarksProps {\n  marks: SliderMark[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  offset: number | undefined;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n}\n\nexport function Marks({ marks, min, max, disabled, value, offset, inverted }: MarksProps) {\n  const { getStyles } = useSliderContext();\n\n  if (!marks) {\n    return null;\n  }\n\n  const items = marks.map((mark, index) => {\n    if (mark.hidden) {\n      return null;\n    }\n\n    return (\n      <Box\n        {...getStyles('markWrapper')}\n        __vars={{ '--mark-offset': `${getPosition({ value: mark.value, min, max })}%` }}\n        key={index}\n      >\n        <Box\n          {...getStyles('mark')}\n          mod={{ filled: isMarkFilled({ mark, value, offset, inverted }), disabled }}\n        />\n        {mark.label && <div {...getStyles('markLabel')}>{mark.label}</div>}\n      </Box>\n    );\n  });\n\n  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,MAAM,EAAE,OAAO,KAAK,KAAK,UAAU,OAAO,QAAQ,YAAwB;CACxF,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,KAAI,CAAC,MACH,QAAO;AAuBT,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UApBO,MAAM,KAAK,MAAM,UAAU;AACvC,MAAI,KAAK,OACP,QAAO;AAGT,SACE,iBAAA,GAAA,MAAA,eAACC,YAAAA,KAAD;GACE,GAAI,UAAU,cAAc;GAC5B,QAAQ,EAAE,iBAAiB,GAAGC,qBAAAA,YAAY;IAAE,OAAO,KAAK;IAAO;IAAK;IAAK,CAAC,CAAC,IAAI;GAC/E,KAAK;GAOD,EALJ,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;GACE,GAAI,UAAU,OAAO;GACrB,KAAK;IAAE,QAAQE,uBAAAA,aAAa;KAAE;KAAM;KAAO;KAAQ;KAAU,CAAC;IAAE;IAAU;GAC1E,CAAA,EACD,KAAK,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,YAAY;aAAG,KAAK;GAAY,CAAA,CAC9D;GAER,EAEuB,CAAA;;AAG3B,MAAM,cAAc"}
+{"version":3,"file":"Marks.cjs","names":["useSliderContext","Box","getPosition","isMarkFilled"],"sources":["../../../../src/components/Slider/Marks/Marks.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { useSliderContext } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\n\nexport interface MarksProps {\n  marks: SliderMark[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  offset: number | undefined;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  startPointValue?: number;\n}\n\nexport function Marks({\n  marks,\n  min,\n  max,\n  disabled,\n  value,\n  offset,\n  inverted,\n  startPointValue,\n}: MarksProps) {\n  const { getStyles } = useSliderContext();\n\n  if (!marks) {\n    return null;\n  }\n\n  const items = marks.map((mark, index) => {\n    if (mark.hidden) {\n      return null;\n    }\n\n    return (\n      <Box\n        {...getStyles('markWrapper')}\n        __vars={{ '--mark-offset': `${getPosition({ value: mark.value, min, max })}%` }}\n        key={index}\n      >\n        <Box\n          {...getStyles('mark')}\n          mod={{\n            filled: isMarkFilled({ mark, value, offset, inverted, startPointValue }),\n            disabled,\n          }}\n        />\n        {mark.label && <div {...getStyles('markLabel')}>{mark.label}</div>}\n      </Box>\n    );\n  });\n\n  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"mappings":";;;;;;;;;AAiBA,SAAgB,MAAM,EACpB,OACA,KACA,KACA,UACA,OACA,QACA,UACA,mBACa;CACb,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,KAAI,CAAC,MACH,QAAO;AA0BT,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAvBO,MAAM,KAAK,MAAM,UAAU;AACvC,MAAI,KAAK,OACP,QAAO;AAGT,SACE,iBAAA,GAAA,MAAA,eAACC,YAAAA,KAAD;GACE,GAAI,UAAU,cAAc;GAC5B,QAAQ,EAAE,iBAAiB,GAAGC,qBAAAA,YAAY;IAAE,OAAO,KAAK;IAAO;IAAK;IAAK,CAAC,CAAC,IAAI;GAC/E,KAAK;GAUD,EARJ,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;GACE,GAAI,UAAU,OAAO;GACrB,KAAK;IACH,QAAQE,uBAAAA,aAAa;KAAE;KAAM;KAAO;KAAQ;KAAU;KAAiB,CAAC;IACxE;IACD;GACD,CAAA,EACD,KAAK,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,YAAY;aAAG,KAAK;GAAY,CAAA,CAC9D;GAER,EAEuB,CAAA;;AAG3B,MAAM,cAAc"}

package/cjs/components/Slider/Marks/is-mark-filled.cjs

@@ -1,6 +1,7 @@
 "use client";
 //#region packages/@mantine/core/src/components/Slider/Marks/is-mark-filled.ts
-function isMarkFilled({ mark, offset, value, inverted = false }) {
+function isMarkFilled({ mark, offset, value, inverted = false, startPointValue }) {
+	if (typeof startPointValue === "number" && !inverted) return mark.value >= startPointValue && mark.value <= value || mark.value <= startPointValue && mark.value >= value;
 	return inverted ? typeof offset === "number" ? mark.value <= offset || mark.value >= value : mark.value >= value : typeof offset === "number" ? mark.value >= offset && mark.value <= value : mark.value <= value;
 }
 //#endregion

package/cjs/components/Slider/Marks/is-mark-filled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"is-mark-filled.cjs","names":[],"sources":["../../../../src/components/Slider/Marks/is-mark-filled.ts"],"sourcesContent":["interface IsMarkFilled {\n  mark: { value: number; label?: any };\n  offset?: number;\n  value: number;\n  inverted?: boolean;\n}\n\nexport function isMarkFilled({ mark, offset, value, inverted = false }: IsMarkFilled) {\n  return inverted\n    ? typeof offset === 'number'\n      ? mark.value <= offset || mark.value >= value\n      : mark.value >= value\n    : typeof offset === 'number'\n      ? mark.value >= offset && mark.value <= value\n      : mark.value <= value;\n}\n"],"mappings":";;AAOA,SAAgB,aAAa,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAuB;AACpF,QAAO,WACH,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS,QAChB,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS"}
+{"version":3,"file":"is-mark-filled.cjs","names":[],"sources":["../../../../src/components/Slider/Marks/is-mark-filled.ts"],"sourcesContent":["interface IsMarkFilled {\n  mark: { value: number; label?: any };\n  offset?: number;\n  value: number;\n  inverted?: boolean;\n  startPointValue?: number;\n}\n\nexport function isMarkFilled({\n  mark,\n  offset,\n  value,\n  inverted = false,\n  startPointValue,\n}: IsMarkFilled) {\n  if (typeof startPointValue === 'number' && !inverted) {\n    return (\n      (mark.value >= startPointValue && mark.value <= value) ||\n      (mark.value <= startPointValue && mark.value >= value)\n    );\n  }\n\n  return inverted\n    ? typeof offset === 'number'\n      ? mark.value <= offset || mark.value >= value\n      : mark.value >= value\n    : typeof offset === 'number'\n      ? mark.value >= offset && mark.value <= value\n      : mark.value <= value;\n}\n"],"mappings":";;AAQA,SAAgB,aAAa,EAC3B,MACA,QACA,OACA,WAAW,OACX,mBACe;AACf,KAAI,OAAO,oBAAoB,YAAY,CAAC,SAC1C,QACG,KAAK,SAAS,mBAAmB,KAAK,SAAS,SAC/C,KAAK,SAAS,mBAAmB,KAAK,SAAS;AAIpD,QAAO,WACH,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS,QAChB,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS"}

package/cjs/components/Slider/Slider/Slider.cjs

@@ -47,7 +47,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { s
 } }));
 const Slider = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Slider", defaultProps, _props);
-	const { classNames, styles, value, onChange, onChangeEnd, size, min, max, domain, step, precision: _precision, defaultValue, name, marks, label, labelTransitionProps, labelAlwaysOn, thumbLabel, showLabelOnHover, thumbChildren, disabled, unstyled, scale, inverted, orientation, className, style, vars, hiddenInputProps, restrictToMarks, thumbProps, attributes, ref, ...others } = props;
+	const { classNames, styles, value, onChange, onChangeEnd, size, min, max, domain, step, precision: _precision, defaultValue, name, marks, label, labelTransitionProps, labelAlwaysOn, thumbLabel, showLabelOnHover, thumbChildren, disabled, unstyled, scale, inverted, startPointValue, orientation, className, style, vars, hiddenInputProps, restrictToMarks, thumbProps, attributes, ref, ...others } = props;
 	const getStyles = require_use_styles.useStyles({
 		name: "Slider",
 		props,
@@ -85,6 +85,14 @@ const Slider = require_factory.factory((_props) => {
 	const scaledValue = scale(_value);
 	const _label = typeof label === "function" ? label(scaledValue) : label;
 	const precision = _precision ?? require_get_precision.getPrecision(step);
+	const hasStartPoint = typeof startPointValue === "number" && !inverted;
+	const startPosition = hasStartPoint ? require_get_position.getPosition({
+		value: startPointValue,
+		min: domainMin,
+		max: domainMax
+	}) : 0;
+	const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;
+	const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;
 	const handleChange = (0, react.useCallback)(({ x }) => {
 		if (!disabled) {
 			const clampedValue = (0, _mantine_hooks.clamp)(require_get_change_value.getChangeValue({
@@ -217,12 +225,13 @@ const Slider = require_factory.factory((_props) => {
 			orientation,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Track.Track, {
 				inverted,
-				offset: 0,
-				filled: position,
+				offset: trackOffset,
+				filled: trackFilled,
 				marks,
 				min: domainMin,
 				max: domainMax,
 				value: scaledValue,
+				startPointValue: hasStartPoint ? startPointValue : void 0,
 				disabled,
 				containerProps: {
 					ref: container,

package/cjs/components/Slider/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","getChangeValue","findClosestNumber","getNextMarkValue","getFloatingValue","getPreviousMarkValue","getFirstMarkValue","getLastMarkValue","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n  extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n  color?: MantineColor;\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  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: number) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Thumb `aria-label` */\n  thumbLabel?: string;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track value representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element */\n  thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n  props: SliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n  radius: 'xl',\n  min: 0,\n  max: 100,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  thumbLabel: '',\n  showLabelOnHover: true,\n  scale: (v) => v,\n  size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n  const props = useProps('Slider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbLabel,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SliderFactory>({\n    name: 'Slider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const { dir } = useDirection();\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled({\n    value: typeof value === 'number' ? clamp(value, min, max) : value,\n    defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n    finalValue: clamp(0, min, max),\n    onChange,\n  });\n\n  const valueRef = useRef(_value);\n  const onChangeEndRef = useRef(onChangeEnd);\n\n  useEffect(() => {\n    onChangeEndRef.current = onChangeEnd;\n  }, [onChangeEnd]);\n\n  const root = useRef<HTMLDivElement>(null);\n  const thumb = useRef<HTMLDivElement>(null);\n  const [domainMin, domainMax] = domain || [min, max];\n  const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n  const scaledValue = scale!(_value);\n  const _label = typeof label === 'function' ? label(scaledValue) : label;\n  const precision = _precision ?? getPrecision(step);\n\n  const handleChange = useCallback(\n    ({ x }: { x: number }) => {\n      if (!disabled) {\n        const nextValue = getChangeValue({\n          value: x,\n          min: domainMin,\n          max: domainMax,\n          step,\n          precision,\n        });\n        const clampedValue = clamp(nextValue, min!, max!);\n        setValue(\n          restrictToMarks && marks?.length\n            ? findClosestNumber(\n                clampedValue,\n                marks.map((mark) => mark.value)\n              )\n            : clampedValue\n        );\n        valueRef.current = clampedValue;\n      }\n    },\n    [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n  );\n\n  const handleScrubEnd = useCallback(() => {\n    if (!disabled && onChangeEndRef.current) {\n      const finalValue =\n        restrictToMarks && marks?.length\n          ? findClosestNumber(\n              valueRef.current,\n              marks.map((mark) => mark.value)\n            )\n          : valueRef.current;\n      onChangeEndRef.current(finalValue);\n    }\n  }, [disabled, marks, restrictToMarks]);\n\n  const { ref: container, active } = useMove(\n    ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n    { onScrubEnd: handleScrubEnd },\n    dir\n  );\n\n  const callOnChangeEnd = useCallback(\n    (value: number) => {\n      if (!disabled && onChangeEndRef.current) {\n        onChangeEndRef.current(value);\n      }\n    },\n    [disabled]\n  );\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'Home': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getFirstMarkValue(marks));\n            callOnChangeEnd(getFirstMarkValue(marks));\n            break;\n          }\n\n          setValue(min);\n          callOnChangeEnd(min);\n          break;\n        }\n\n        case 'End': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getLastMarkValue(marks));\n            callOnChangeEnd(getLastMarkValue(marks));\n            break;\n          }\n\n          setValue(max);\n          callOnChangeEnd(max);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        ref={useMergedRef(ref, root)}\n        onKeyDownCapture={handleTrackKeydownCapture}\n        onMouseDownCapture={() => root.current?.focus()}\n        size={size}\n        disabled={disabled}\n        orientation={orientation}\n      >\n        <Track\n          inverted={inverted}\n          offset={0}\n          filled={position}\n          marks={marks}\n          min={domainMin}\n          max={domainMax}\n          value={scaledValue}\n          disabled={disabled}\n          containerProps={{\n            ref: container,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n          }}\n        >\n          <Thumb\n            max={domainMax}\n            min={domainMin}\n            value={scaledValue}\n            position={position}\n            dragging={active}\n            label={_label}\n            ref={thumb as any}\n            labelTransitionProps={labelTransitionProps}\n            labelAlwaysOn={labelAlwaysOn}\n            thumbLabel={thumbLabel}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            orientation={orientation}\n            {...thumbProps}\n          >\n            {thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n  export type Props = SliderProps;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Factory = SliderFactory;\n  export type Mark = SliderMark;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","getChangeValue","findClosestNumber","getNextMarkValue","getFloatingValue","getPreviousMarkValue","getFirstMarkValue","getLastMarkValue","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n  extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n  color?: MantineColor;\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  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: number) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Thumb `aria-label` */\n  thumbLabel?: string;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track value representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set. */\n  startPointValue?: number;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element */\n  thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n  props: SliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n  radius: 'xl',\n  min: 0,\n  max: 100,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  thumbLabel: '',\n  showLabelOnHover: true,\n  scale: (v) => v,\n  size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n  const props = useProps('Slider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbLabel,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    startPointValue,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SliderFactory>({\n    name: 'Slider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const { dir } = useDirection();\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled({\n    value: typeof value === 'number' ? clamp(value, min, max) : value,\n    defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n    finalValue: clamp(0, min, max),\n    onChange,\n  });\n\n  const valueRef = useRef(_value);\n  const onChangeEndRef = useRef(onChangeEnd);\n\n  useEffect(() => {\n    onChangeEndRef.current = onChangeEnd;\n  }, [onChangeEnd]);\n\n  const root = useRef<HTMLDivElement>(null);\n  const thumb = useRef<HTMLDivElement>(null);\n  const [domainMin, domainMax] = domain || [min, max];\n  const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n  const scaledValue = scale!(_value);\n  const _label = typeof label === 'function' ? label(scaledValue) : label;\n  const precision = _precision ?? getPrecision(step);\n\n  const hasStartPoint = typeof startPointValue === 'number' && !inverted;\n  const startPosition = hasStartPoint\n    ? getPosition({ value: startPointValue!, min: domainMin, max: domainMax })\n    : 0;\n  const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;\n  const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;\n\n  const handleChange = useCallback(\n    ({ x }: { x: number }) => {\n      if (!disabled) {\n        const nextValue = getChangeValue({\n          value: x,\n          min: domainMin,\n          max: domainMax,\n          step,\n          precision,\n        });\n        const clampedValue = clamp(nextValue, min!, max!);\n        setValue(\n          restrictToMarks && marks?.length\n            ? findClosestNumber(\n                clampedValue,\n                marks.map((mark) => mark.value)\n              )\n            : clampedValue\n        );\n        valueRef.current = clampedValue;\n      }\n    },\n    [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n  );\n\n  const handleScrubEnd = useCallback(() => {\n    if (!disabled && onChangeEndRef.current) {\n      const finalValue =\n        restrictToMarks && marks?.length\n          ? findClosestNumber(\n              valueRef.current,\n              marks.map((mark) => mark.value)\n            )\n          : valueRef.current;\n      onChangeEndRef.current(finalValue);\n    }\n  }, [disabled, marks, restrictToMarks]);\n\n  const { ref: container, active } = useMove(\n    ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n    { onScrubEnd: handleScrubEnd },\n    dir\n  );\n\n  const callOnChangeEnd = useCallback(\n    (value: number) => {\n      if (!disabled && onChangeEndRef.current) {\n        onChangeEndRef.current(value);\n      }\n    },\n    [disabled]\n  );\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'Home': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getFirstMarkValue(marks));\n            callOnChangeEnd(getFirstMarkValue(marks));\n            break;\n          }\n\n          setValue(min);\n          callOnChangeEnd(min);\n          break;\n        }\n\n        case 'End': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getLastMarkValue(marks));\n            callOnChangeEnd(getLastMarkValue(marks));\n            break;\n          }\n\n          setValue(max);\n          callOnChangeEnd(max);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        ref={useMergedRef(ref, root)}\n        onKeyDownCapture={handleTrackKeydownCapture}\n        onMouseDownCapture={() => root.current?.focus()}\n        size={size}\n        disabled={disabled}\n        orientation={orientation}\n      >\n        <Track\n          inverted={inverted}\n          offset={trackOffset}\n          filled={trackFilled}\n          marks={marks}\n          min={domainMin}\n          max={domainMax}\n          value={scaledValue}\n          startPointValue={hasStartPoint ? startPointValue : undefined}\n          disabled={disabled}\n          containerProps={{\n            ref: container,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n          }}\n        >\n          <Thumb\n            max={domainMax}\n            min={domainMin}\n            value={scaledValue}\n            position={position}\n            dragging={active}\n            label={_label}\n            ref={thumb as any}\n            labelTransitionProps={labelTransitionProps}\n            labelAlwaysOn={labelAlwaysOn}\n            thumbLabel={thumbLabel}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            orientation={orientation}\n            {...thumbProps}\n          >\n            {thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n  export type Props = SliderProps;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Factory = SliderFactory;\n  export type Mark = SliderMark;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwIA,MAAM,eAAe;CACnB,QAAQ;CACR,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO,EAAE;CACT,QAAQ,MAAM;CACd,sBAAsB;EAAE,YAAY;EAAQ,UAAU;EAAG;CACzD,YAAY;CACZ,kBAAkB;CAClB,QAAQ,MAAM;CACd,MAAM;CACP;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,OAAO,WAAW,cAAc,EAC9C,MAAM;CACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,cAAc;CAC7C,kBAAkB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CACxD,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACvE,uBACE,cAAc,KAAA,IAAYC,YAAAA,IAAI,UAAU,GAAG;CAC9C,EACF,EACF;AAED,MAAa,SAASC,gBAAAA,SAAwB,WAAW;CACvD,MAAM,QAAQC,kBAAAA,SAAS,UAAU,cAAc,OAAO;CACtD,MAAM,EACJ,YACA,QACA,OACA,UACA,aACA,MACA,KACA,KACA,QACA,MACA,WAAW,YACX,cACA,MACA,OACA,OACA,sBACA,eACA,YACA,kBACA,eACA,UACA,UACA,OACA,UACA,iBACA,aACA,WACA,OACA,MACA,kBACA,iBACA,YACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN;EACA,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,QAAQC,0BAAAA,cAAc;CAC9B,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC,OAAO,OAAO,UAAU,YAAA,GAAA,eAAA,OAAiB,OAAO,KAAK,IAAI,GAAG;EAC5D,cAAc,OAAO,iBAAiB,YAAA,GAAA,eAAA,OAAiB,cAAc,KAAK,IAAI,GAAG;EACjF,aAAA,GAAA,eAAA,OAAkB,GAAG,KAAK,IAAI;EAC9B;EACD,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,QAAkB,OAAO;CAC/B,MAAM,kBAAA,GAAA,MAAA,QAAwB,YAAY;AAE1C,EAAA,GAAA,MAAA,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,YAAY,CAAC;CAEjB,MAAM,QAAA,GAAA,MAAA,QAA8B,KAAK;CACzC,MAAM,SAAA,GAAA,MAAA,QAA+B,KAAK;CAC1C,MAAM,CAAC,WAAW,aAAa,UAAU,CAAC,KAAK,IAAI;CACnD,MAAM,WAAWC,qBAAAA,YAAY;EAAE,OAAO;EAAQ,KAAK;EAAW,KAAK;EAAW,CAAC;CAC/E,MAAM,cAAc,MAAO,OAAO;CAClC,MAAM,SAAS,OAAO,UAAU,aAAa,MAAM,YAAY,GAAG;CAClE,MAAM,YAAY,cAAcC,sBAAAA,aAAa,KAAK;CAElD,MAAM,gBAAgB,OAAO,oBAAoB,YAAY,CAAC;CAC9D,MAAM,gBAAgB,gBAClBD,qBAAAA,YAAY;EAAE,OAAO;EAAkB,KAAK;EAAW,KAAK;EAAW,CAAC,GACxE;CACJ,MAAM,cAAc,gBAAgB,KAAK,IAAI,UAAU,cAAc,GAAG;CACxE,MAAM,cAAc,gBAAgB,KAAK,IAAI,WAAW,cAAc,GAAG;CAEzE,MAAM,gBAAA,GAAA,MAAA,cACH,EAAE,QAAuB;AACxB,MAAI,CAAC,UAAU;GAQb,MAAM,gBAAA,GAAA,eAAA,OAPYE,yBAAAA,eAAe;IAC/B,OAAO;IACP,KAAK;IACL,KAAK;IACL;IACA;IACD,CAAC,EACoC,KAAM,IAAK;AACjD,YACE,mBAAmB,OAAO,SACtBC,4BAAAA,kBACE,cACA,MAAM,KAAK,SAAS,KAAK,MAAM,CAChC,GACD,aACL;AACD,YAAS,UAAU;;IAGvB;EAAC;EAAU;EAAK;EAAK;EAAW;EAAW;EAAM;EAAW;EAAU;EAAO;EAAgB,CAC9F;CAeD,MAAM,EAAE,KAAK,WAAW,YAAA,GAAA,eAAA,UACrB,EAAE,GAAG,QAAQ,aAAa,EAAE,GAAG,gBAAgB,aAAa,IAAI,IAAI,GAAG,CAAC,EACzE,EAAE,aAAA,GAAA,MAAA,mBAfqC;AACvC,MAAI,CAAC,YAAY,eAAe,SAAS;GACvC,MAAM,aACJ,mBAAmB,OAAO,SACtBA,4BAAAA,kBACE,SAAS,SACT,MAAM,KAAK,SAAS,KAAK,MAAM,CAChC,GACD,SAAS;AACf,kBAAe,QAAQ,WAAW;;IAEnC;EAAC;EAAU;EAAO;EAAgB,CAAC,EAIN,EAC9B,IACD;CAED,MAAM,mBAAA,GAAA,MAAA,cACH,UAAkB;AACjB,MAAI,CAAC,YAAY,eAAe,QAC9B,gBAAe,QAAQ,MAAM;IAGjC,CAAC,SAAS,CACX;CAED,MAAM,6BAA6B,UAA+C;AAChF,MAAI,CAAC,SACH,SAAQ,MAAM,KAAd;GACE,KAAK,WAAW;AACd,UAAM,gBAAgB;AACtB,UAAM,SAAS,OAAO;AAEtB,QAAI,mBAAmB,OAAO;KAC5B,MAAM,YAAYC,4BAAAA,iBAAiB,QAAQ,MAAM;AACjD,cAAS,UAAU;AACnB,qBAAgB,UAAU;AAC1B;;IAGF,MAAM,YAAYC,2BAAAA,iBAChB,KAAK,IAAI,KAAK,IAAI,SAAS,MAAM,UAAU,EAAE,UAAU,EACvD,UACD;AACD,aAAS,UAAU;AACnB,oBAAgB,UAAU;AAC1B;;GAGF,KAAK,cAAc;AACjB,UAAM,gBAAgB;AACtB,UAAM,SAAS,OAAO;AAEtB,QAAI,mBAAmB,OAAO;KAC5B,MAAM,YACJ,QAAQ,QAAQC,4BAAAA,qBAAqB,QAAQ,MAAM,GAAGF,4BAAAA,iBAAiB,QAAQ,MAAM;AACvF,cAAS,UAAU;AACnB,qBAAgB,UAAU;AAC1B;;IAGF,MAAM,YAAYC,2BAAAA,iBAChB,KAAK,IAAI,KAAK,IAAI,QAAQ,QAAQ,SAAS,OAAO,SAAS,MAAM,UAAU,EAAE,UAAU,EACvF,UACD;AACD,aAAS,UAAU;AACnB,oBAAgB,UAAU;AAC1B;;GAGF,KAAK,aAAa;AAChB,UAAM,gBAAgB;AACtB,UAAM,SAAS,OAAO;AAEtB,QAAI,mBAAmB,OAAO;KAC5B,MAAM,YAAYC,4BAAAA,qBAAqB,QAAQ,MAAM;AACrD,cAAS,UAAU;AACnB,qBAAgB,UAAU;AAC1B;;IAGF,MAAM,YAAYD,2BAAAA,iBAChB,KAAK,IAAI,KAAK,IAAI,SAAS,MAAM,UAAU,EAAE,UAAU,EACvD,UACD;AACD,aAAS,UAAU;AACnB,oBAAgB,UAAU;AAC1B;;GAGF,KAAK,aAAa;AAChB,UAAM,gBAAgB;AACtB,UAAM,SAAS,OAAO;AAEtB,QAAI,mBAAmB,OAAO;KAC5B,MAAM,YACJ,QAAQ,QAAQD,4BAAAA,iBAAiB,QAAQ,MAAM,GAAGE,4BAAAA,qBAAqB,QAAQ,MAAM;AACvF,cAAS,UAAU;AACnB,qBAAgB,UAAU;AAC1B;;IAGF,MAAM,YAAYD,2BAAAA,iBAChB,KAAK,IAAI,KAAK,IAAI,QAAQ,QAAQ,SAAS,OAAO,SAAS,MAAM,UAAU,EAAE,UAAU,EACvF,UACD;AACD,aAAS,UAAU;AACnB,oBAAgB,UAAU;AAC1B;;GAGF,KAAK;AACH,UAAM,gBAAgB;AACtB,UAAM,SAAS,OAAO;AAEtB,QAAI,mBAAmB,OAAO;AAC5B,cAASE,4BAAAA,kBAAkB,MAAM,CAAC;AAClC,qBAAgBA,4BAAAA,kBAAkB,MAAM,CAAC;AACzC;;AAGF,aAAS,IAAI;AACb,oBAAgB,IAAI;AACpB;GAGF,KAAK;AACH,UAAM,gBAAgB;AACtB,UAAM,SAAS,OAAO;AAEtB,QAAI,mBAAmB,OAAO;AAC5B,cAASC,4BAAAA,iBAAiB,MAAM,CAAC;AACjC,qBAAgBA,4BAAAA,iBAAiB,MAAM,CAAC;AACxC;;AAGF,aAAS,IAAI;AACb,oBAAgB,IAAI;AACpB;GAGF,QACE;;;AAMR,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,OAAO,EAAE,WAAW;YAClC,iBAAA,GAAA,kBAAA,MAACC,mBAAAA,YAAD;GACE,GAAI;GACJ,MAAA,GAAA,eAAA,cAAkB,KAAK,KAAK;GAC5B,kBAAkB;GAClB,0BAA0B,KAAK,SAAS,OAAO;GACzC;GACI;GACG;aAPf,CASE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;IACY;IACV,QAAQ;IACR,QAAQ;IACD;IACP,KAAK;IACL,KAAK;IACL,OAAO;IACP,iBAAiB,gBAAgB,kBAAkB,KAAA;IACzC;IACV,gBAAgB;KACd,KAAK;KACL,cAAc,yBAAyB,WAAW,KAAK,GAAG,KAAA;KAC1D,cAAc,yBAAyB,WAAW,MAAM,GAAG,KAAA;KAC5D;cAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;KACE,KAAK;KACL,KAAK;KACL,OAAO;KACG;KACV,UAAU;KACV,OAAO;KACP,KAAK;KACiB;KACP;KACH;KACM;KAClB,WAAW;KACD;KACG;KACb,GAAI;eAEH;KACK,CAAA;IACF,CAAA,EAER,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAa,GAAI;IAAoB,CAAA,CAClE;;EACE,CAAA;EAEnB;AAEF,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

package/cjs/components/Slider/Track/Track.cjs

@@ -5,7 +5,7 @@ const require_Slider_context = require("../Slider.context.cjs");
 const require_Marks = require("../Marks/Marks.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Slider/Track/Track.tsx
-function Track({ filled, children, offset, disabled, marksOffset, inverted, containerProps, ...others }) {
+function Track({ filled, children, offset, disabled, marksOffset, inverted, startPointValue, containerProps, ...others }) {
 	const { getStyles } = require_Slider_context.useSliderContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		...getStyles("trackContainer"),
@@ -34,7 +34,8 @@ function Track({ filled, children, offset, disabled, marksOffset, inverted, cont
 					...others,
 					offset: marksOffset,
 					disabled,
-					inverted
+					inverted,
+					startPointValue
 				})
 			]
 		})

package/cjs/components/Slider/Track/Track.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Track.cjs","names":["useSliderContext","Box","Marks"],"sources":["../../../../src/components/Slider/Track/Track.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { Marks } from '../Marks/Marks';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface TrackProps {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  containerProps?: React.ComponentProps<'div'>;\n}\n\nexport function Track({\n  filled,\n  children,\n  offset,\n  disabled,\n  marksOffset,\n  inverted,\n  containerProps,\n  ...others\n}: TrackProps) {\n  const { getStyles } = useSliderContext();\n\n  return (\n    <Box {...getStyles('trackContainer')} mod={{ disabled }} {...containerProps}>\n      <Box {...getStyles('track')} mod={{ inverted, disabled }}>\n        <Box\n          mod={{ inverted, disabled }}\n          __vars={{\n            '--slider-bar-width': `calc(${filled}% + 2 * var(--slider-size))`,\n            '--slider-bar-offset': `calc(${offset}% - var(--slider-size))`,\n          }}\n          {...getStyles('bar')}\n        />\n\n        {children}\n\n        <Marks {...others} offset={marksOffset} disabled={disabled} inverted={inverted} />\n      </Box>\n    </Box>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"mappings":";;;;;;;AAkBA,SAAgB,MAAM,EACpB,QACA,UACA,QACA,UACA,aACA,UACA,gBACA,GAAG,UACU;CACb,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAE,KAAK,EAAE,UAAU;EAAE,GAAI;YAC3D,iBAAA,GAAA,kBAAA,MAACA,YAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK;IAAE;IAAU;IAAU;aAAxD;IACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;KACE,KAAK;MAAE;MAAU;MAAU;KAC3B,QAAQ;MACN,sBAAsB,QAAQ,OAAO;MACrC,uBAAuB,QAAQ,OAAO;MACvC;KACD,GAAI,UAAU,MAAM;KACpB,CAAA;IAED;IAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;KAAO,GAAI;KAAQ,QAAQ;KAAuB;KAAoB;KAAY,CAAA;IAC9E;;EACF,CAAA;;AAIV,MAAM,cAAc"}
+{"version":3,"file":"Track.cjs","names":["useSliderContext","Box","Marks"],"sources":["../../../../src/components/Slider/Track/Track.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { Marks } from '../Marks/Marks';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface TrackProps {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  startPointValue?: number;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  containerProps?: React.ComponentProps<'div'>;\n}\n\nexport function Track({\n  filled,\n  children,\n  offset,\n  disabled,\n  marksOffset,\n  inverted,\n  startPointValue,\n  containerProps,\n  ...others\n}: TrackProps) {\n  const { getStyles } = useSliderContext();\n\n  return (\n    <Box {...getStyles('trackContainer')} mod={{ disabled }} {...containerProps}>\n      <Box {...getStyles('track')} mod={{ inverted, disabled }}>\n        <Box\n          mod={{ inverted, disabled }}\n          __vars={{\n            '--slider-bar-width': `calc(${filled}% + 2 * var(--slider-size))`,\n            '--slider-bar-offset': `calc(${offset}% - var(--slider-size))`,\n          }}\n          {...getStyles('bar')}\n        />\n\n        {children}\n\n        <Marks\n          {...others}\n          offset={marksOffset}\n          disabled={disabled}\n          inverted={inverted}\n          startPointValue={startPointValue}\n        />\n      </Box>\n    </Box>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"mappings":";;;;;;;AAmBA,SAAgB,MAAM,EACpB,QACA,UACA,QACA,UACA,aACA,UACA,iBACA,gBACA,GAAG,UACU;CACb,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAE,KAAK,EAAE,UAAU;EAAE,GAAI;YAC3D,iBAAA,GAAA,kBAAA,MAACA,YAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK;IAAE;IAAU;IAAU;aAAxD;IACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;KACE,KAAK;MAAE;MAAU;MAAU;KAC3B,QAAQ;MACN,sBAAsB,QAAQ,OAAO;MACrC,uBAAuB,QAAQ,OAAO;MACvC;KACD,GAAI,UAAU,MAAM;KACpB,CAAA;IAED;IAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;KACE,GAAI;KACJ,QAAQ;KACE;KACA;KACO;KACjB,CAAA;IACE;;EACF,CAAA;;AAIV,MAAM,cAAc"}