@mantine/core 9.0.0 → 9.0.1

package/esm/components/BackgroundImage/BackgroundImage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackgroundImage.mjs","names":["classes"],"sources":["../../../src/components/BackgroundImage/BackgroundImage.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './BackgroundImage.module.css';\n\nexport type BackgroundImageStylesNames = 'root';\nexport type BackgroundImageCssVariables = {\n  root: '--bi-radius';\n};\n\nexport interface BackgroundImageProps extends BoxProps, StylesApiProps<BackgroundImageFactory> {\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Image url */\n  src: string;\n}\n\nexport type BackgroundImageFactory = PolymorphicFactory<{\n  props: BackgroundImageProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: BackgroundImageStylesNames;\n  vars: BackgroundImageCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<BackgroundImageFactory>((_, { radius }) => ({\n  root: { '--bi-radius': radius === undefined ? undefined : getRadius(radius) },\n}));\n\nexport const BackgroundImage = polymorphicFactory<BackgroundImageFactory>((_props) => {\n  const props = useProps('BackgroundImage', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    src,\n    variant,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BackgroundImageFactory>({\n    name: 'BackgroundImage',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      variant={variant}\n      {...getStyles('root', { style: { backgroundImage: `url(${src})` } })}\n      {...others}\n    />\n  );\n});\n\nBackgroundImage.classes = classes;\nBackgroundImage.varsResolver = varsResolver;\nBackgroundImage.displayName = '@mantine/core/BackgroundImage';\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAA4C,GAAG,EAAE,cAAc,EAClF,MAAM,EAAE,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO,EAAE,EAC9E,EAAE;AAEH,MAAa,kBAAkB,oBAA4C,WAAW;CACpF,MAAM,QAAQ,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,SACA,YACA,GAAG,WACD;AAgBJ,QACE,oBAAC,KAAD;EACW;EACT,GAjBc,UAAkC;GAClD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAKgB,QAAQ,EAAE,OAAO,EAAE,iBAAiB,OAAO,IAAI,IAAI,EAAE,CAAC;EACpE,GAAI;EACJ,CAAA;EAEJ;AAEF,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}
+{"version":3,"file":"BackgroundImage.mjs","names":["classes"],"sources":["../../../src/components/BackgroundImage/BackgroundImage.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  MantineRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './BackgroundImage.module.css';\n\nexport type BackgroundImageStylesNames = 'root';\nexport type BackgroundImageCssVariables = {\n  root: '--bi-radius';\n};\n\nexport interface BackgroundImageProps extends BoxProps, StylesApiProps<BackgroundImageFactory> {\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Image url */\n  src: string;\n}\n\nexport type BackgroundImageFactory = PolymorphicFactory<{\n  props: BackgroundImageProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: BackgroundImageStylesNames;\n  vars: BackgroundImageCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<BackgroundImageFactory>((_, { radius }) => ({\n  root: { '--bi-radius': radius === undefined ? undefined : getRadius(radius) },\n}));\n\nexport const BackgroundImage = polymorphicFactory<BackgroundImageFactory>((_props) => {\n  const props = useProps('BackgroundImage', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    src,\n    variant,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BackgroundImageFactory>({\n    name: 'BackgroundImage',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      variant={variant}\n      {...getStyles('root', { style: { backgroundImage: `url(${src})` } })}\n      {...others}\n    />\n  );\n});\n\nBackgroundImage.classes = classes;\nBackgroundImage.varsResolver = varsResolver;\nBackgroundImage.displayName = '@mantine/core/BackgroundImage';\n\nexport namespace BackgroundImage {\n  export type Props = BackgroundImageProps;\n  export type CssVariables = BackgroundImageCssVariables;\n  export type Factory = BackgroundImageFactory;\n  export type StylesNames = BackgroundImageStylesNames;\n}\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAA4C,GAAG,EAAE,cAAc,EAClF,MAAM,EAAE,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO,EAAE,EAC9E,EAAE;AAEH,MAAa,kBAAkB,oBAA4C,WAAW;CACpF,MAAM,QAAQ,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,SACA,YACA,GAAG,WACD;AAgBJ,QACE,oBAAC,KAAD;EACW;EACT,GAjBc,UAAkC;GAClD,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAKgB,QAAQ,EAAE,OAAO,EAAE,iBAAiB,OAAO,IAAI,IAAI,EAAE,CAAC;EACpE,GAAI;EACJ,CAAA;EAEJ;AAEF,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}

package/esm/components/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":["classes"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Badge.module.css';\n\nexport type BadgeStylesNames = 'root' | 'section' | 'label';\nexport type BadgeVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'dot'\n  | 'transparent'\n  | 'white'\n  | 'default'\n  | 'gradient';\n\nexport type BadgeCssVariables = {\n  root:\n    | '--badge-height'\n    | '--badge-padding-x'\n    | '--badge-fz'\n    | '--badge-radius'\n    | '--badge-bg'\n    | '--badge-color'\n    | '--badge-bd'\n    | '--badge-dot-color';\n};\n\nexport interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {\n  /** Controls `font-size`, `height` and horizontal `padding` @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */\n  circle?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Gradient configuration used when `variant=\\\"gradient\\\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Content displayed on the left side of the badge label */\n  leftSection?: React.ReactNode;\n\n  /** Content displayed on the right side of the badge label */\n  rightSection?: React.ReactNode;\n\n  /** Determines whether Badge should take 100% of its parent width @default false */\n  fullWidth?: boolean;\n\n  /** Main badge content */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type BadgeFactory = PolymorphicFactory<{\n  props: BadgeProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: BadgeStylesNames;\n  vars: BadgeCssVariables;\n  variant: BadgeVariant;\n}>;\n\nconst varsResolver = createVarsResolver<BadgeFactory>(\n  (theme, { radius, color, gradient, variant, size, autoContrast, circle }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--badge-height': getSize(size, 'badge-height'),\n        '--badge-padding-x': getSize(size, 'badge-padding-x'),\n        '--badge-fz': getSize(size, 'badge-fz'),\n        '--badge-radius': circle || radius === undefined ? undefined : getRadius(radius),\n        '--badge-bg': color || variant ? colors.background : undefined,\n        '--badge-color': color || variant ? colors.color : undefined,\n        '--badge-bd': color || variant ? colors.border : undefined,\n        '--badge-dot-color': variant === 'dot' ? getThemeColor(color, theme) : undefined,\n      },\n    };\n  }\n);\n\nexport const Badge = polymorphicFactory<BadgeFactory>((_props) => {\n  const props = useProps('Badge', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    color,\n    gradient,\n    leftSection,\n    rightSection,\n    children,\n    variant,\n    fullWidth,\n    autoContrast,\n    circle,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BadgeFactory>({\n    name: 'Badge',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      variant={variant}\n      mod={[\n        {\n          block: fullWidth,\n          circle,\n          'with-right-section': !!rightSection,\n          'with-left-section': !!leftSection,\n        },\n        mod,\n      ]}\n      {...getStyles('root', { variant })}\n      {...others}\n    >\n      {leftSection && (\n        <span {...getStyles('section')} data-position=\"left\">\n          {leftSection}\n        </span>\n      )}\n      <span {...getStyles('label')}>{children}</span>\n      {rightSection && (\n        <span {...getStyles('section')} data-position=\"right\">\n          {rightSection}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nBadge.classes = classes;\nBadge.varsResolver = varsResolver;\nBadge.displayName = '@mantine/core/Badge';\n"],"mappings":";;;;;;;;;;;AAmFA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,MAAM,cAAc,aAAa;CAC3E,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,kBAAkB,QAAQ,MAAM,eAAe;EAC/C,qBAAqB,QAAQ,MAAM,kBAAkB;EACrD,cAAc,QAAQ,MAAM,WAAW;EACvC,kBAAkB,UAAU,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EAChF,cAAc,SAAS,UAAU,OAAO,aAAa,KAAA;EACrD,iBAAiB,SAAS,UAAU,OAAO,QAAQ,KAAA;EACnD,cAAc,SAAS,UAAU,OAAO,SAAS,KAAA;EACjD,qBAAqB,YAAY,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;EACxE,EACF;EAEJ;AAED,MAAa,QAAQ,oBAAkC,WAAW;CAChE,MAAM,QAAQ,SAAS,SAAS,MAAM,OAAO;CAC7C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,OACA,UACA,aACA,cACA,UACA,SACA,WACA,cACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EACW;EACT,KAAK,CACH;GACE,OAAO;GACP;GACA,sBAAsB,CAAC,CAAC;GACxB,qBAAqB,CAAC,CAAC;GACxB,EACD,IACD;EACD,GAAI,UAAU,QAAQ,EAAE,SAAS,CAAC;EAClC,GAAI;YAZN;GAcG,eACC,oBAAC,QAAD;IAAM,GAAI,UAAU,UAAU;IAAE,iBAAc;cAC3C;IACI,CAAA;GAET,oBAAC,QAAD;IAAM,GAAI,UAAU,QAAQ;IAAG;IAAgB,CAAA;GAC9C,gBACC,oBAAC,QAAD;IAAM,GAAI,UAAU,UAAU;IAAE,iBAAc;cAC3C;IACI,CAAA;GAEL;;EAER;AAEF,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
+{"version":3,"file":"Badge.mjs","names":["classes"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Badge.module.css';\n\nexport type BadgeStylesNames = 'root' | 'section' | 'label';\nexport type BadgeVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'dot'\n  | 'transparent'\n  | 'white'\n  | 'default'\n  | 'gradient';\n\nexport type BadgeCssVariables = {\n  root:\n    | '--badge-height'\n    | '--badge-padding-x'\n    | '--badge-fz'\n    | '--badge-radius'\n    | '--badge-bg'\n    | '--badge-color'\n    | '--badge-bd'\n    | '--badge-dot-color';\n};\n\nexport interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {\n  /** Controls `font-size`, `height` and horizontal `padding` @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */\n  circle?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Gradient configuration used when `variant=\\\"gradient\\\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Content displayed on the left side of the badge label */\n  leftSection?: React.ReactNode;\n\n  /** Content displayed on the right side of the badge label */\n  rightSection?: React.ReactNode;\n\n  /** Determines whether Badge should take 100% of its parent width @default false */\n  fullWidth?: boolean;\n\n  /** Main badge content */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type BadgeFactory = PolymorphicFactory<{\n  props: BadgeProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: BadgeStylesNames;\n  vars: BadgeCssVariables;\n  variant: BadgeVariant;\n}>;\n\nconst varsResolver = createVarsResolver<BadgeFactory>(\n  (theme, { radius, color, gradient, variant, size, autoContrast, circle }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--badge-height': getSize(size, 'badge-height'),\n        '--badge-padding-x': getSize(size, 'badge-padding-x'),\n        '--badge-fz': getSize(size, 'badge-fz'),\n        '--badge-radius': circle || radius === undefined ? undefined : getRadius(radius),\n        '--badge-bg': color || variant ? colors.background : undefined,\n        '--badge-color': color || variant ? colors.color : undefined,\n        '--badge-bd': color || variant ? colors.border : undefined,\n        '--badge-dot-color': variant === 'dot' ? getThemeColor(color, theme) : undefined,\n      },\n    };\n  }\n);\n\nexport const Badge = polymorphicFactory<BadgeFactory>((_props) => {\n  const props = useProps('Badge', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    radius,\n    color,\n    gradient,\n    leftSection,\n    rightSection,\n    children,\n    variant,\n    fullWidth,\n    autoContrast,\n    circle,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BadgeFactory>({\n    name: 'Badge',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      variant={variant}\n      mod={[\n        {\n          block: fullWidth,\n          circle,\n          'with-right-section': !!rightSection,\n          'with-left-section': !!leftSection,\n        },\n        mod,\n      ]}\n      {...getStyles('root', { variant })}\n      {...others}\n    >\n      {leftSection && (\n        <span {...getStyles('section')} data-position=\"left\">\n          {leftSection}\n        </span>\n      )}\n      <span {...getStyles('label')}>{children}</span>\n      {rightSection && (\n        <span {...getStyles('section')} data-position=\"right\">\n          {rightSection}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nBadge.classes = classes;\nBadge.varsResolver = varsResolver;\nBadge.displayName = '@mantine/core/Badge';\n\nexport namespace Badge {\n  export type Props = BadgeProps;\n  export type StylesNames = BadgeStylesNames;\n  export type CssVariables = BadgeCssVariables;\n  export type Variant = BadgeVariant;\n  export type Factory = BadgeFactory;\n}\n"],"mappings":";;;;;;;;;;;AAmFA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,MAAM,cAAc,aAAa;CAC3E,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,kBAAkB,QAAQ,MAAM,eAAe;EAC/C,qBAAqB,QAAQ,MAAM,kBAAkB;EACrD,cAAc,QAAQ,MAAM,WAAW;EACvC,kBAAkB,UAAU,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EAChF,cAAc,SAAS,UAAU,OAAO,aAAa,KAAA;EACrD,iBAAiB,SAAS,UAAU,OAAO,QAAQ,KAAA;EACnD,cAAc,SAAS,UAAU,OAAO,SAAS,KAAA;EACjD,qBAAqB,YAAY,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;EACxE,EACF;EAEJ;AAED,MAAa,QAAQ,oBAAkC,WAAW;CAChE,MAAM,QAAQ,SAAS,SAAS,MAAM,OAAO;CAC7C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,OACA,UACA,aACA,cACA,UACA,SACA,WACA,cACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EACW;EACT,KAAK,CACH;GACE,OAAO;GACP;GACA,sBAAsB,CAAC,CAAC;GACxB,qBAAqB,CAAC,CAAC;GACxB,EACD,IACD;EACD,GAAI,UAAU,QAAQ,EAAE,SAAS,CAAC;EAClC,GAAI;YAZN;GAcG,eACC,oBAAC,QAAD;IAAM,GAAI,UAAU,UAAU;IAAE,iBAAc;cAC3C;IACI,CAAA;GAET,oBAAC,QAAD;IAAM,GAAI,UAAU,QAAQ;IAAG;IAAgB,CAAA;GAC9C,gBACC,oBAAC,QAAD;IAAM,GAAI,UAAU,UAAU;IAAE,iBAAc;cAC3C;IACI,CAAA;GAEL;;EAER;AAEF,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}

package/esm/components/Blockquote/Blockquote.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.mjs","names":["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"],"mappings":";;;;;;;;;;;;;;AAkDA,MAAM,eAAe,EACnB,UAAU,IACX;AAED,MAAM,eAAe,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;CAEF,MAAM,cAAc,gBAAgB;EAClC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,iBAAiB,KAAK,YAAY,OAAO,IAAK;EAC9C,gBAAgB,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAW,cAAc,OAAO,MAAM;EACtC,kBAAkB,IAAI,SAAS;EAC/B,eAAe,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"Blockquote.mjs","names":["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,eAAe,oBAAuC,OAAO,EAAE,OAAO,UAAU,aAAa;CACjG,MAAM,aAAa,gBAAgB;EACjC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;CAEF,MAAM,cAAc,gBAAgB;EAClC,OAAO,SAAS,MAAM;EACtB;EACA,aAAa;EACd,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,iBAAiB,KAAK,YAAY,OAAO,IAAK;EAC9C,gBAAgB,KAAK,WAAW,OAAO,IAAK;EAC5C,WAAW,cAAc,OAAO,MAAM;EACtC,kBAAkB,IAAI,SAAS;EAC/B,eAAe,UAAU,OAAO;EACjC,EACF;EACD;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,MACA,UACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,WAAU;EAAa,GAAI,UAAU,OAAO;EAAE,GAAI;YAAvD;GACG,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAClD;GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,UAAU,OAAO;cAAG;IAAY,CAAA;GAC/C;;EAER;AAEF,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/esm/components/Breadcrumbs/Breadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.mjs","names":["classes"],"sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  isElement,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Breadcrumbs.module.css';\n\nexport type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';\nexport type BreadcrumbsCssVariables = {\n  root: '--bc-separator-margin';\n};\n\nexport interface BreadcrumbsProps\n  extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {\n  /** Separator between children @default '/' */\n  separator?: React.ReactNode;\n\n  /** Controls spacing between separator and breadcrumb @default 'xs' */\n  separatorMargin?: MantineSpacing;\n\n  /** React nodes that should be separated with `separator` */\n  children: React.ReactNode;\n}\n\nexport type BreadcrumbsFactory = Factory<{\n  props: BreadcrumbsProps;\n  ref: HTMLDivElement;\n  stylesNames: BreadcrumbsStylesNames;\n  vars: BreadcrumbsCssVariables;\n}>;\n\nconst defaultProps = {\n  separator: '/',\n} satisfies Partial<BreadcrumbsProps>;\n\nconst varsResolver = createVarsResolver<BreadcrumbsFactory>((_, { separatorMargin }) => ({\n  root: {\n    '--bc-separator-margin': getSpacing(separatorMargin),\n  },\n}));\n\nexport const Breadcrumbs = factory<BreadcrumbsFactory>((_props) => {\n  const props = useProps('Breadcrumbs', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    separator,\n    separatorMargin,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BreadcrumbsFactory>({\n    name: 'Breadcrumbs',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const items = Children.toArray(children).reduce<React.ReactNode[]>((acc, child, index, array) => {\n    const item = isElement(child) ? (\n      cloneElement(child, {\n        ...getStyles('breadcrumb', { className: (child.props as any)?.className }),\n        key: index,\n      })\n    ) : (\n      <div {...getStyles('breadcrumb')} key={index}>\n        {child}\n      </div>\n    );\n\n    acc.push(item);\n\n    if (index !== array.length - 1) {\n      acc.push(\n        <Box {...getStyles('separator')} key={`separator-${index}`}>\n          {separator}\n        </Box>\n      );\n    }\n\n    return acc;\n  }, []);\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      {items}\n    </Box>\n  );\n});\n\nBreadcrumbs.classes = classes;\nBreadcrumbs.varsResolver = varsResolver;\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n"],"mappings":";;;;;;;;;;;;AAyCA,MAAM,eAAe,EACnB,WAAW,KACZ;AAED,MAAM,eAAe,oBAAwC,GAAG,EAAE,uBAAuB,EACvF,MAAM,EACJ,yBAAyB,WAAW,gBAAgB,EACrD,EACF,EAAE;AAEH,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,WACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,SAAS,QAAQ,SAAS,CAAC,QAA2B,KAAK,OAAO,OAAO,UAAU;EAC/F,MAAM,OAAO,UAAU,MAAM,GAC3B,aAAa,OAAO;GAClB,GAAG,UAAU,cAAc,EAAE,WAAY,MAAM,OAAe,WAAW,CAAC;GAC1E,KAAK;GACN,CAAC,GAEF,8BAAC,OAAD;GAAK,GAAI,UAAU,aAAa;GAAE,KAAK;GAEjC,EADH,MACG;AAGR,MAAI,KAAK,KAAK;AAEd,MAAI,UAAU,MAAM,SAAS,EAC3B,KAAI,KACF,8BAAC,KAAD;GAAK,GAAI,UAAU,YAAY;GAAE,KAAK,aAAa;GAE7C,EADH,UACG,CACP;AAGH,SAAO;IACN,EAAE,CAAC;AAEN,QACE,oBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;YAC7B;EACG,CAAA;EAER;AAEF,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"Breadcrumbs.mjs","names":["classes"],"sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  isElement,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Breadcrumbs.module.css';\n\nexport type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';\nexport type BreadcrumbsCssVariables = {\n  root: '--bc-separator-margin';\n};\n\nexport interface BreadcrumbsProps\n  extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {\n  /** Separator between children @default '/' */\n  separator?: React.ReactNode;\n\n  /** Controls spacing between separator and breadcrumb @default 'xs' */\n  separatorMargin?: MantineSpacing;\n\n  /** React nodes that should be separated with `separator` */\n  children: React.ReactNode;\n}\n\nexport type BreadcrumbsFactory = Factory<{\n  props: BreadcrumbsProps;\n  ref: HTMLDivElement;\n  stylesNames: BreadcrumbsStylesNames;\n  vars: BreadcrumbsCssVariables;\n}>;\n\nconst defaultProps = {\n  separator: '/',\n} satisfies Partial<BreadcrumbsProps>;\n\nconst varsResolver = createVarsResolver<BreadcrumbsFactory>((_, { separatorMargin }) => ({\n  root: {\n    '--bc-separator-margin': getSpacing(separatorMargin),\n  },\n}));\n\nexport const Breadcrumbs = factory<BreadcrumbsFactory>((_props) => {\n  const props = useProps('Breadcrumbs', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    separator,\n    separatorMargin,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BreadcrumbsFactory>({\n    name: 'Breadcrumbs',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const items = Children.toArray(children).reduce<React.ReactNode[]>((acc, child, index, array) => {\n    const item = isElement(child) ? (\n      cloneElement(child, {\n        ...getStyles('breadcrumb', { className: (child.props as any)?.className }),\n        key: index,\n      })\n    ) : (\n      <div {...getStyles('breadcrumb')} key={index}>\n        {child}\n      </div>\n    );\n\n    acc.push(item);\n\n    if (index !== array.length - 1) {\n      acc.push(\n        <Box {...getStyles('separator')} key={`separator-${index}`}>\n          {separator}\n        </Box>\n      );\n    }\n\n    return acc;\n  }, []);\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      {items}\n    </Box>\n  );\n});\n\nBreadcrumbs.classes = classes;\nBreadcrumbs.varsResolver = varsResolver;\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n\nexport namespace Breadcrumbs {\n  export type Props = BreadcrumbsProps;\n  export type StylesNames = BreadcrumbsStylesNames;\n  export type CssVariables = BreadcrumbsCssVariables;\n  export type Factory = BreadcrumbsFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAyCA,MAAM,eAAe,EACnB,WAAW,KACZ;AAED,MAAM,eAAe,oBAAwC,GAAG,EAAE,uBAAuB,EACvF,MAAM,EACJ,yBAAyB,WAAW,gBAAgB,EACrD,EACF,EAAE;AAEH,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,WACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,SAAS,QAAQ,SAAS,CAAC,QAA2B,KAAK,OAAO,OAAO,UAAU;EAC/F,MAAM,OAAO,UAAU,MAAM,GAC3B,aAAa,OAAO;GAClB,GAAG,UAAU,cAAc,EAAE,WAAY,MAAM,OAAe,WAAW,CAAC;GAC1E,KAAK;GACN,CAAC,GAEF,8BAAC,OAAD;GAAK,GAAI,UAAU,aAAa;GAAE,KAAK;GAEjC,EADH,MACG;AAGR,MAAI,KAAK,KAAK;AAEd,MAAI,UAAU,MAAM,SAAS,EAC3B,KAAI,KACF,8BAAC,KAAD;GAAK,GAAI,UAAU,YAAY;GAAE,KAAK,aAAa;GAE7C,EADH,UACG,CACP;AAGH,SAAO;IACN,EAAE,CAAC;AAEN,QACE,oBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,GAAI;YAC7B;EACG,CAAA;EAER;AAEF,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Burger/Burger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Burger.mjs","names":["classes"],"sources":["../../../src/components/Burger/Burger.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Burger.module.css';\n\nexport type BurgerStylesNames = 'root' | 'burger';\nexport type BurgerCssVariables = {\n  root:\n    | '--burger-color'\n    | '--burger-size'\n    | '--burger-line-size'\n    | '--burger-transition-duration'\n    | '--burger-transition-timing-function';\n};\n\nexport interface BurgerProps\n  extends BoxProps, StylesApiProps<BurgerFactory>, ElementProps<'button'> {\n  /** Controls burger `width` and `height`, numbers are converted to rem @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Controls height of lines, by default calculated based on `size` prop */\n  lineSize?: string | number;\n\n  /** Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light */\n  color?: MantineColor;\n\n  /** State of the burger, when `true` burger is transformed into X @default false */\n  opened?: boolean;\n\n  /** `transition-duration` property value in ms @default 300 */\n  transitionDuration?: number;\n\n  /** `transition-timing-function` property value @default 'ease' */\n  transitionTimingFunction?: string;\n}\n\nexport type BurgerFactory = Factory<{\n  props: BurgerProps;\n  ref: HTMLButtonElement;\n  stylesNames: BurgerStylesNames;\n  vars: BurgerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<BurgerFactory>(\n  (theme, { color, size, lineSize, transitionDuration, transitionTimingFunction }) => ({\n    root: {\n      '--burger-color': color ? getThemeColor(color, theme) : undefined,\n      '--burger-size': getSize(size, 'burger-size'),\n      '--burger-line-size': lineSize ? rem(lineSize) : undefined,\n      '--burger-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--burger-transition-timing-function': transitionTimingFunction,\n    },\n  })\n);\n\nexport const Burger = factory<BurgerFactory>((_props) => {\n  const props = useProps('Burger', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    opened,\n    children,\n    transitionDuration,\n    transitionTimingFunction,\n    lineSize,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BurgerFactory>({\n    name: 'Burger',\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    <UnstyledButton {...getStyles('root')} {...others}>\n      <Box mod={['reduce-motion', { opened }]} {...getStyles('burger')} />\n      {children}\n    </UnstyledButton>\n  );\n});\n\nBurger.classes = classes;\nBurger.varsResolver = varsResolver;\nBurger.displayName = '@mantine/core/Burger';\n"],"mappings":";;;;;;;;;;;;;AAyDA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,MAAM,UAAU,oBAAoB,gCAAgC,EACnF,MAAM;CACJ,kBAAkB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;CACxD,iBAAiB,QAAQ,MAAM,cAAc;CAC7C,sBAAsB,WAAW,IAAI,SAAS,GAAG,KAAA;CACjD,gCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,uCAAuC;CACxC,EACF,EACF;AAED,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,oBACA,0BACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,gBAAD;EAAgB,GAAI,UAAU,OAAO;EAAE,GAAI;YAA3C,CACE,oBAAC,KAAD;GAAK,KAAK,CAAC,iBAAiB,EAAE,QAAQ,CAAC;GAAE,GAAI,UAAU,SAAS;GAAI,CAAA,EACnE,SACc;;EAEnB;AAEF,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
+{"version":3,"file":"Burger.mjs","names":["classes"],"sources":["../../../src/components/Burger/Burger.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Burger.module.css';\n\nexport type BurgerStylesNames = 'root' | 'burger';\nexport type BurgerCssVariables = {\n  root:\n    | '--burger-color'\n    | '--burger-size'\n    | '--burger-line-size'\n    | '--burger-transition-duration'\n    | '--burger-transition-timing-function';\n};\n\nexport interface BurgerProps\n  extends BoxProps, StylesApiProps<BurgerFactory>, ElementProps<'button'> {\n  /** Controls burger `width` and `height`, numbers are converted to rem @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Controls height of lines, by default calculated based on `size` prop */\n  lineSize?: string | number;\n\n  /** Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light */\n  color?: MantineColor;\n\n  /** State of the burger, when `true` burger is transformed into X @default false */\n  opened?: boolean;\n\n  /** `transition-duration` property value in ms @default 300 */\n  transitionDuration?: number;\n\n  /** `transition-timing-function` property value @default 'ease' */\n  transitionTimingFunction?: string;\n}\n\nexport type BurgerFactory = Factory<{\n  props: BurgerProps;\n  ref: HTMLButtonElement;\n  stylesNames: BurgerStylesNames;\n  vars: BurgerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<BurgerFactory>(\n  (theme, { color, size, lineSize, transitionDuration, transitionTimingFunction }) => ({\n    root: {\n      '--burger-color': color ? getThemeColor(color, theme) : undefined,\n      '--burger-size': getSize(size, 'burger-size'),\n      '--burger-line-size': lineSize ? rem(lineSize) : undefined,\n      '--burger-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--burger-transition-timing-function': transitionTimingFunction,\n    },\n  })\n);\n\nexport const Burger = factory<BurgerFactory>((_props) => {\n  const props = useProps('Burger', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    opened,\n    children,\n    transitionDuration,\n    transitionTimingFunction,\n    lineSize,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<BurgerFactory>({\n    name: 'Burger',\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    <UnstyledButton {...getStyles('root')} {...others}>\n      <Box mod={['reduce-motion', { opened }]} {...getStyles('burger')} />\n      {children}\n    </UnstyledButton>\n  );\n});\n\nBurger.classes = classes;\nBurger.varsResolver = varsResolver;\nBurger.displayName = '@mantine/core/Burger';\n\nexport namespace Burger {\n  export type Props = BurgerProps;\n  export type StylesNames = BurgerStylesNames;\n  export type CssVariables = BurgerCssVariables;\n  export type Factory = BurgerFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyDA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,MAAM,UAAU,oBAAoB,gCAAgC,EACnF,MAAM;CACJ,kBAAkB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;CACxD,iBAAiB,QAAQ,MAAM,cAAc;CAC7C,sBAAsB,WAAW,IAAI,SAAS,GAAG,KAAA;CACjD,gCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,uCAAuC;CACxC,EACF,EACF;AAED,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,oBACA,0BACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,gBAAD;EAAgB,GAAI,UAAU,OAAO;EAAE,GAAI;YAA3C,CACE,oBAAC,KAAD;GAAK,KAAK,CAAC,iBAAiB,EAAE,QAAQ,CAAC;GAAE,GAAI,UAAU,SAAS;GAAI,CAAA,EACnE,SACc;;EAEnB;AAEF,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

package/esm/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["classes"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { MantineTransition, Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { ButtonGroup } from './ButtonGroup/ButtonGroup';\nimport { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';\nimport classes from './Button.module.css';\n\nexport type ButtonSize = MantineSize | `compact-${MantineSize}` | (string & {});\n\nexport type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';\nexport type ButtonVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'subtle'\n  | 'default'\n  | 'gradient';\n\nexport type ButtonCssVariables = {\n  root:\n    | '--button-justify'\n    | '--button-height'\n    | '--button-padding-x'\n    | '--button-fz'\n    | '--button-radius'\n    | '--button-bg'\n    | '--button-hover'\n    | '--button-hover-color'\n    | '--button-color'\n    | '--button-bd';\n};\n\nexport interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {\n  'data-disabled'?: boolean;\n\n  /** Controls button `height`, `font-size` and horizontal `padding` @default 'sm' */\n  size?: ButtonSize;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default 'center' */\n  justify?: React.CSSProperties['justifyContent'];\n\n  /** Content on the left side of the button label */\n  leftSection?: React.ReactNode;\n\n  /** Content on the right side of the button label */\n  rightSection?: React.ReactNode;\n\n  /** Sets `width: 100%` @default false */\n  fullWidth?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient configuration used for `variant=\"gradient\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Sets `disabled` attribute, applies disabled styles */\n  disabled?: boolean;\n\n  /** Button content */\n  children?: React.ReactNode;\n\n  /** If set, the `Loader` component is displayed over the button */\n  loading?: boolean;\n\n  /** Props added to the `Loader` component (only visible when `loading` prop is set) */\n  loaderProps?: LoaderProps;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ButtonFactory = PolymorphicFactory<{\n  props: ButtonProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ButtonStylesNames;\n  vars: ButtonCssVariables;\n  variant: ButtonVariant;\n  staticComponents: {\n    Group: typeof ButtonGroup;\n    GroupSection: typeof ButtonGroupSection;\n  };\n}>;\n\nconst loaderTransition: MantineTransition = {\n  in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n  out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n  common: { transformOrigin: 'center' },\n  transitionProperty: 'transform, opacity',\n};\n\nconst varsResolver = createVarsResolver<ButtonFactory>(\n  (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--button-justify': justify,\n        '--button-height': getSize(size, 'button-height'),\n        '--button-padding-x': getSize(size, 'button-padding-x'),\n        '--button-fz': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : getFontSize(size),\n        '--button-radius': radius === undefined ? undefined : getRadius(radius),\n        '--button-bg': color || variant ? colors.background : undefined,\n        '--button-hover': color || variant ? colors.hover : undefined,\n        '--button-color': colors.color,\n        '--button-bd': color || variant ? colors.border : undefined,\n        '--button-hover-color': color || variant ? colors.hoverColor : undefined,\n      },\n    };\n  }\n);\n\nexport const Button = polymorphicFactory<ButtonFactory>((_props) => {\n  const props = useProps('Button', null, _props);\n  const {\n    style,\n    vars,\n    className,\n    color,\n    disabled,\n    children,\n    leftSection,\n    rightSection,\n    fullWidth,\n    variant,\n    radius,\n    loading,\n    loaderProps,\n    gradient,\n    classNames,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ButtonFactory>({\n    name: 'Button',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const hasLeftSection = !!leftSection;\n  const hasRightSection = !!rightSection;\n\n  return (\n    <UnstyledButton\n      {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled || loading}\n      mod={[\n        {\n          disabled: disabled || dataDisabled,\n          loading,\n          block: fullWidth,\n          'with-left-section': hasLeftSection,\n          'with-right-section': hasRightSection,\n        },\n        mod,\n      ]}\n      {...others}\n    >\n      {typeof loading === 'boolean' && (\n        <Transition mounted={loading} transition={loaderTransition} duration={150}>\n          {(transitionStyles) => (\n            <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n              <Loader\n                color=\"var(--button-color)\"\n                size=\"calc(var(--button-height) / 1.8)\"\n                {...loaderProps}\n              />\n            </Box>\n          )}\n        </Transition>\n      )}\n\n      <span {...getStyles('inner')}>\n        {leftSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'left' }}>\n            {leftSection}\n          </Box>\n        )}\n\n        <Box component=\"span\" mod={{ loading }} {...getStyles('label')}>\n          {children}\n        </Box>\n\n        {rightSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'right' }}>\n            {rightSection}\n          </Box>\n        )}\n      </span>\n    </UnstyledButton>\n  );\n});\n\nButton.classes = classes;\nButton.varsResolver = varsResolver;\nButton.displayName = '@mantine/core/Button';\nButton.Group = ButtonGroup;\nButton.GroupSection = ButtonGroupSection;\n"],"mappings":";;;;;;;;;;;;;;;;AA4GA,MAAM,mBAAsC;CAC1C,IAAI;EAAE,SAAS;EAAG,WAAW,+BAA+B,IAAI,EAAE,CAAC;EAAK;CACxE,KAAK;EAAE,SAAS;EAAG,WAAW;EAA0B;CACxD,QAAQ,EAAE,iBAAiB,UAAU;CACrC,oBAAoB;CACrB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,MAAM,SAAS,mBAAmB;CAC5E,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,oBAAoB;EACpB,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,sBAAsB,QAAQ,MAAM,mBAAmB;EACvD,eAAe,MAAM,SAAS,UAAU,GACpC,YAAY,KAAK,QAAQ,YAAY,GAAG,CAAC,GACzC,YAAY,KAAK;EACrB,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACvE,eAAe,SAAS,UAAU,OAAO,aAAa,KAAA;EACtD,kBAAkB,SAAS,UAAU,OAAO,QAAQ,KAAA;EACpD,kBAAkB,OAAO;EACzB,eAAe,SAAS,UAAU,OAAO,SAAS,KAAA;EAClD,wBAAwB,SAAS,UAAU,OAAO,aAAa,KAAA;EAChE,EACF;EAEJ;AAED,MAAa,SAAS,oBAAmC,WAAW;CAClE,MAAM,QAAQ,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,OACA,MACA,WACA,OACA,UACA,UACA,aACA,cACA,WACA,SACA,QACA,SACA,aACA,UACA,YACA,QACA,UACA,iBAAiB,cACjB,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,CAAC,CAAC;CACzB,MAAM,kBAAkB,CAAC,CAAC;AAE1B,QACE,qBAAC,gBAAD;EACE,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,WAAW,CAAC,cAAc,CAAC;EAC/D;EACD;EACT,UAAU,YAAY;EACtB,KAAK,CACH;GACE,UAAU,YAAY;GACtB;GACA,OAAO;GACP,qBAAqB;GACrB,sBAAsB;GACvB,EACD,IACD;EACD,GAAI;YAfN,CAiBG,OAAO,YAAY,aAClB,oBAAC,YAAD;GAAY,SAAS;GAAS,YAAY;GAAkB,UAAU;cAClE,qBACA,oBAAC,KAAD;IAAK,WAAU;IAAO,GAAI,UAAU,UAAU,EAAE,OAAO,kBAAkB,CAAC;IAAE,eAAA;cAC1E,oBAAC,QAAD;KACE,OAAM;KACN,MAAK;KACL,GAAI;KACJ,CAAA;IACE,CAAA;GAEG,CAAA,EAGf,qBAAC,QAAD;GAAM,GAAI,UAAU,QAAQ;aAA5B;IACG,eACC,oBAAC,KAAD;KAAK,WAAU;KAAO,GAAI,UAAU,UAAU;KAAE,KAAK,EAAE,UAAU,QAAQ;eACtE;KACG,CAAA;IAGR,oBAAC,KAAD;KAAK,WAAU;KAAO,KAAK,EAAE,SAAS;KAAE,GAAI,UAAU,QAAQ;KAC3D;KACG,CAAA;IAEL,gBACC,oBAAC,KAAD;KAAK,WAAU;KAAO,GAAI,UAAU,UAAU;KAAE,KAAK,EAAE,UAAU,SAAS;eACvE;KACG,CAAA;IAEH;KACQ;;EAEnB;AAEF,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,QAAQ;AACf,OAAO,eAAe"}
+{"version":3,"file":"Button.mjs","names":["classes"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { MantineTransition, Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport {\n  ButtonGroup,\n  type ButtonGroupProps,\n  type ButtonGroupStylesNames,\n  type ButtonGroupCssVariables,\n  type ButtonGroupFactory,\n} from './ButtonGroup/ButtonGroup';\nimport {\n  ButtonGroupSection,\n  type ButtonGroupSectionProps,\n  type ButtonGroupSectionStylesNames,\n  type ButtonGroupSectionCssVariables,\n  type ButtonGroupSectionFactory,\n} from './ButtonGroupSection/ButtonGroupSection';\nimport classes from './Button.module.css';\nexport type ButtonSize = MantineSize | `compact-${MantineSize}` | (string & {});\n\nexport type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';\nexport type ButtonVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'subtle'\n  | 'default'\n  | 'gradient';\n\nexport type ButtonCssVariables = {\n  root:\n    | '--button-justify'\n    | '--button-height'\n    | '--button-padding-x'\n    | '--button-fz'\n    | '--button-radius'\n    | '--button-bg'\n    | '--button-hover'\n    | '--button-hover-color'\n    | '--button-color'\n    | '--button-bd';\n};\n\nexport interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {\n  'data-disabled'?: boolean;\n\n  /** Controls button `height`, `font-size` and horizontal `padding` @default 'sm' */\n  size?: ButtonSize;\n\n  /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default 'center' */\n  justify?: React.CSSProperties['justifyContent'];\n\n  /** Content on the left side of the button label */\n  leftSection?: React.ReactNode;\n\n  /** Content on the right side of the button label */\n  rightSection?: React.ReactNode;\n\n  /** Sets `width: 100%` @default false */\n  fullWidth?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient configuration used for `variant=\"gradient\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Sets `disabled` attribute, applies disabled styles */\n  disabled?: boolean;\n\n  /** Button content */\n  children?: React.ReactNode;\n\n  /** If set, the `Loader` component is displayed over the button */\n  loading?: boolean;\n\n  /** Props added to the `Loader` component (only visible when `loading` prop is set) */\n  loaderProps?: LoaderProps;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ButtonFactory = PolymorphicFactory<{\n  props: ButtonProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ButtonStylesNames;\n  vars: ButtonCssVariables;\n  variant: ButtonVariant;\n  staticComponents: {\n    Group: typeof ButtonGroup;\n    GroupSection: typeof ButtonGroupSection;\n  };\n}>;\n\nconst loaderTransition: MantineTransition = {\n  in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n  out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n  common: { transformOrigin: 'center' },\n  transitionProperty: 'transform, opacity',\n};\n\nconst varsResolver = createVarsResolver<ButtonFactory>(\n  (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--button-justify': justify,\n        '--button-height': getSize(size, 'button-height'),\n        '--button-padding-x': getSize(size, 'button-padding-x'),\n        '--button-fz': size?.includes('compact')\n          ? getFontSize(size.replace('compact-', ''))\n          : getFontSize(size),\n        '--button-radius': radius === undefined ? undefined : getRadius(radius),\n        '--button-bg': color || variant ? colors.background : undefined,\n        '--button-hover': color || variant ? colors.hover : undefined,\n        '--button-color': colors.color,\n        '--button-bd': color || variant ? colors.border : undefined,\n        '--button-hover-color': color || variant ? colors.hoverColor : undefined,\n      },\n    };\n  }\n);\n\nexport const Button = polymorphicFactory<ButtonFactory>((_props) => {\n  const props = useProps('Button', null, _props);\n  const {\n    style,\n    vars,\n    className,\n    color,\n    disabled,\n    children,\n    leftSection,\n    rightSection,\n    fullWidth,\n    variant,\n    radius,\n    loading,\n    loaderProps,\n    gradient,\n    classNames,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ButtonFactory>({\n    name: 'Button',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const hasLeftSection = !!leftSection;\n  const hasRightSection = !!rightSection;\n\n  return (\n    <UnstyledButton\n      {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled || loading}\n      mod={[\n        {\n          disabled: disabled || dataDisabled,\n          loading,\n          block: fullWidth,\n          'with-left-section': hasLeftSection,\n          'with-right-section': hasRightSection,\n        },\n        mod,\n      ]}\n      {...others}\n    >\n      {typeof loading === 'boolean' && (\n        <Transition mounted={loading} transition={loaderTransition} duration={150}>\n          {(transitionStyles) => (\n            <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n              <Loader\n                color=\"var(--button-color)\"\n                size=\"calc(var(--button-height) / 1.8)\"\n                {...loaderProps}\n              />\n            </Box>\n          )}\n        </Transition>\n      )}\n\n      <span {...getStyles('inner')}>\n        {leftSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'left' }}>\n            {leftSection}\n          </Box>\n        )}\n\n        <Box component=\"span\" mod={{ loading }} {...getStyles('label')}>\n          {children}\n        </Box>\n\n        {rightSection && (\n          <Box component=\"span\" {...getStyles('section')} mod={{ position: 'right' }}>\n            {rightSection}\n          </Box>\n        )}\n      </span>\n    </UnstyledButton>\n  );\n});\n\nButton.classes = classes;\nButton.varsResolver = varsResolver;\nButton.displayName = '@mantine/core/Button';\nButton.Group = ButtonGroup;\nButton.GroupSection = ButtonGroupSection;\n\nexport namespace Button {\n  export type Props = ButtonProps;\n  export type StylesNames = ButtonStylesNames;\n  export type CssVariables = ButtonCssVariables;\n  export type Factory = ButtonFactory;\n  export type Variant = ButtonVariant;\n  export type Size = ButtonSize;\n\n  export namespace Group {\n    export type Props = ButtonGroupProps;\n    export type StylesNames = ButtonGroupStylesNames;\n    export type CssVariables = ButtonGroupCssVariables;\n    export type Factory = ButtonGroupFactory;\n  }\n\n  export namespace GroupSection {\n    export type Props = ButtonGroupSectionProps;\n    export type StylesNames = ButtonGroupSectionStylesNames;\n    export type CssVariables = ButtonGroupSectionCssVariables;\n    export type Factory = ButtonGroupSectionFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuHA,MAAM,mBAAsC;CAC1C,IAAI;EAAE,SAAS;EAAG,WAAW,+BAA+B,IAAI,EAAE,CAAC;EAAK;CACxE,KAAK;EAAE,SAAS;EAAG,WAAW;EAA0B;CACxD,QAAQ,EAAE,iBAAiB,UAAU;CACrC,oBAAoB;CACrB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,UAAU,SAAS,MAAM,SAAS,mBAAmB;CAC5E,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,oBAAoB;EACpB,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,sBAAsB,QAAQ,MAAM,mBAAmB;EACvD,eAAe,MAAM,SAAS,UAAU,GACpC,YAAY,KAAK,QAAQ,YAAY,GAAG,CAAC,GACzC,YAAY,KAAK;EACrB,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACvE,eAAe,SAAS,UAAU,OAAO,aAAa,KAAA;EACtD,kBAAkB,SAAS,UAAU,OAAO,QAAQ,KAAA;EACpD,kBAAkB,OAAO;EACzB,eAAe,SAAS,UAAU,OAAO,SAAS,KAAA;EAClD,wBAAwB,SAAS,UAAU,OAAO,aAAa,KAAA;EAChE,EACF;EAEJ;AAED,MAAa,SAAS,oBAAmC,WAAW;CAClE,MAAM,QAAQ,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,OACA,MACA,WACA,OACA,UACA,UACA,aACA,cACA,WACA,SACA,QACA,SACA,aACA,UACA,YACA,QACA,UACA,iBAAiB,cACjB,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,CAAC,CAAC;CACzB,MAAM,kBAAkB,CAAC,CAAC;AAE1B,QACE,qBAAC,gBAAD;EACE,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,WAAW,CAAC,cAAc,CAAC;EAC/D;EACD;EACT,UAAU,YAAY;EACtB,KAAK,CACH;GACE,UAAU,YAAY;GACtB;GACA,OAAO;GACP,qBAAqB;GACrB,sBAAsB;GACvB,EACD,IACD;EACD,GAAI;YAfN,CAiBG,OAAO,YAAY,aAClB,oBAAC,YAAD;GAAY,SAAS;GAAS,YAAY;GAAkB,UAAU;cAClE,qBACA,oBAAC,KAAD;IAAK,WAAU;IAAO,GAAI,UAAU,UAAU,EAAE,OAAO,kBAAkB,CAAC;IAAE,eAAA;cAC1E,oBAAC,QAAD;KACE,OAAM;KACN,MAAK;KACL,GAAI;KACJ,CAAA;IACE,CAAA;GAEG,CAAA,EAGf,qBAAC,QAAD;GAAM,GAAI,UAAU,QAAQ;aAA5B;IACG,eACC,oBAAC,KAAD;KAAK,WAAU;KAAO,GAAI,UAAU,UAAU;KAAE,KAAK,EAAE,UAAU,QAAQ;eACtE;KACG,CAAA;IAGR,oBAAC,KAAD;KAAK,WAAU;KAAO,KAAK,EAAE,SAAS;KAAE,GAAI,UAAU,QAAQ;KAC3D;KACG,CAAA;IAEL,gBACC,oBAAC,KAAD;KAAK,WAAU;KAAO,GAAI,UAAU,UAAU;KAAE,KAAK,EAAE,UAAU,SAAS;eACvE;KACG,CAAA;IAEH;KACQ;;EAEnB;AAEF,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,QAAQ;AACf,OAAO,eAAe"}

package/esm/components/Card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineRadius,\n  MantineShadow,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection } from './CardSection/CardSection';\nimport classes from './Card.module.css';\n\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n  root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n  /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n  shadow?: MantineShadow;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Adds border to the card */\n  withBorder?: boolean;\n\n  /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n  padding?: MantineSpacing;\n\n  /** Card content */\n  children?: React.ReactNode;\n\n  /** Card orientation @default 'vertical' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n  props: CardProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CardStylesNames;\n  vars: CardCssVariables;\n  staticComponents: {\n    Section: typeof CardSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n  root: {\n    '--card-padding': getSpacing(padding),\n  },\n}));\n\nconst defaultProps = {\n  orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n  const props = useProps('Card', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    padding,\n    attributes,\n    orientation,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CardFactory>({\n    name: 'Card',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const content = _children.map((child, index) => {\n    if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {\n      return cloneElement(child, {\n        'data-orientation': orientation,\n        'data-first-section': index === 0 || undefined,\n        'data-last-section': index === _children.length - 1 || undefined,\n      } as any);\n    }\n\n    return child;\n  });\n\n  return (\n    <CardProvider value={{ getStyles }}>\n      <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n        {content}\n      </Paper>\n    </CardProvider>\n  );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n"],"mappings":";;;;;;;;;;;;;AAuDA,MAAM,eAAe,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkB,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MAAI,OAAO,UAAU,YAAY,SAAS,UAAU,SAAS,MAAM,SAAS,YAC1E,QAAO,aAAa,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,oBAAC,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,oBAAC,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU"}
+{"version":3,"file":"Card.mjs","names":["classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineRadius,\n  MantineShadow,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n  root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n  /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n  shadow?: MantineShadow;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Adds border to the card */\n  withBorder?: boolean;\n\n  /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n  padding?: MantineSpacing;\n\n  /** Card content */\n  children?: React.ReactNode;\n\n  /** Card orientation @default 'vertical' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n  props: CardProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CardStylesNames;\n  vars: CardCssVariables;\n  staticComponents: {\n    Section: typeof CardSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n  root: {\n    '--card-padding': getSpacing(padding),\n  },\n}));\n\nconst defaultProps = {\n  orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n  const props = useProps('Card', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    padding,\n    attributes,\n    orientation,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CardFactory>({\n    name: 'Card',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const content = _children.map((child, index) => {\n    if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {\n      return cloneElement(child, {\n        'data-orientation': orientation,\n        'data-first-section': index === 0 || undefined,\n        'data-last-section': index === _children.length - 1 || undefined,\n      } as any);\n    }\n\n    return child;\n  });\n\n  return (\n    <CardProvider value={{ getStyles }}>\n      <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n        {content}\n      </Paper>\n    </CardProvider>\n  );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n  export type Props = CardProps;\n  export type StylesNames = CardStylesNames;\n  export type CssVariables = CardCssVariables;\n  export type Factory = CardFactory;\n  export type SectionProps = CardSectionProps;\n\n  export namespace Section {\n    export type Props = CardSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,eAAe,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkB,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MAAI,OAAO,UAAU,YAAY,SAAS,UAAU,SAAS,MAAM,SAAS,YAC1E,QAAO,aAAa,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,oBAAC,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,oBAAC,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU"}

package/esm/components/Center/Center.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Center.mjs","names":["classes"],"sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Center.module.css';\n\nexport type CenterStylesNames = 'root';\n\nexport interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {\n  /** Content to center */\n  children?: React.ReactNode;\n\n  /** If set, `inline-flex` is used instead of `flex` */\n  inline?: boolean;\n}\n\nexport type CenterFactory = PolymorphicFactory<{\n  props: CenterProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CenterStylesNames;\n}>;\n\nexport const Center = polymorphicFactory<CenterFactory>((_props) => {\n  const props = useProps('Center', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    inline,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CenterFactory>({\n    name: 'Center',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  return <Box mod={[{ inline }, mod]} {...getStyles('root')} {...others} />;\n});\n\nCenter.classes = classes;\nCenter.displayName = '@mantine/core/Center';\n"],"mappings":";;;;;;;;AA4BA,MAAa,SAAS,oBAAmC,WAAW;CAClE,MAAM,QAAQ,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,oBAAC,KAAD;EAAK,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EACzE;AAEF,OAAO,UAAUA;AACjB,OAAO,cAAc"}
+{"version":3,"file":"Center.mjs","names":["classes"],"sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Center.module.css';\n\nexport type CenterStylesNames = 'root';\n\nexport interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {\n  /** Content to center */\n  children?: React.ReactNode;\n\n  /** If set, `inline-flex` is used instead of `flex` */\n  inline?: boolean;\n}\n\nexport type CenterFactory = PolymorphicFactory<{\n  props: CenterProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CenterStylesNames;\n}>;\n\nexport const Center = polymorphicFactory<CenterFactory>((_props) => {\n  const props = useProps('Center', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    inline,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CenterFactory>({\n    name: 'Center',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  return <Box mod={[{ inline }, mod]} {...getStyles('root')} {...others} />;\n});\n\nCenter.classes = classes;\nCenter.displayName = '@mantine/core/Center';\n\nexport namespace Center {\n  export type Props = CenterProps;\n  export type Factory = CenterFactory;\n  export type StylesNames = CenterStylesNames;\n}\n"],"mappings":";;;;;;;;AA4BA,MAAa,SAAS,oBAAmC,WAAW;CAClE,MAAM,QAAQ,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,oBAAC,KAAD;EAAK,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EACzE;AAEF,OAAO,UAAUA;AACjB,OAAO,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":["useId","classes"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { DataAttributes, Factory, genericFactory, MantineSize, useProps } from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends string = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends string = string> extends Omit<\n  InputWrapperProps,\n  'onChange'\n> {\n  /** `Checkbox` components and any other elements */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called with an array of selected checkboxes values when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the root element (`Input.Wrapper` component) */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */\n\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n  props: CheckboxGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxGroupStylesNames;\n  signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n  props: CheckboxGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('CheckboxGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {\n    const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (checkboxValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(checkboxValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"CheckboxGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </CheckboxGroupContext>\n  );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;AAaA,MAAa,uBAAuB,cAAgD,KAAK;AAqDzF,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,MAAa,gBAAgB,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACD,SAAS,iBAAiB,cAAc,MAAM;CAElD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;AAE1E,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,kBAA0B;AAC5C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,cAAc;EAC1D,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,oBAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACtF,qBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,oBAAC,qBAAD;IAAqB,MAAK;IAAS;IAA+B,CAAA,EAClE,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACK,CAAA;GAEjB;AAEV,cAAc,UAAU,MAAM,QAAQ;AACtC,cAAc,cAAc"}
+{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  DataAttributes,\n  Factory,\n  genericFactory,\n  MantineSize,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends Primitive = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends Primitive = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Checkbox` components and any other elements */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called with an array of selected checkboxes values when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the root element (`Input.Wrapper` component) */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */\n\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n  props: CheckboxGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxGroupStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: CheckboxGroupProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n  props: CheckboxGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('CheckboxGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {\n    const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (checkboxValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(checkboxValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"CheckboxGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </CheckboxGroupContext>\n  );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;AAoBA,MAAa,uBAAuB,cAAgD,KAAK;AAuDzF,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,MAAa,gBAAgB,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACD,SAAS,iBAAiB,cAAc,MAAM;CAElD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;AAE1E,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,kBAA0B;AAC5C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,cAAc;EAC1D,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,oBAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACtF,qBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,oBAAC,qBAAD;IAAqB,MAAK;IAAS;IAA+B,CAAA,EAClE,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACK,CAAA;GAEjB;AAEV,cAAc,UAAU,MAAM,QAAQ;AACtC,cAAc,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","names":["useId","classes"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport { ChipGroup, ChipGroupContext } from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';\nexport type ChipVariant = 'outline' | 'filled' | 'light';\nexport type ChipCssVariables = {\n  root:\n    | '--chip-fz'\n    | '--chip-size'\n    | '--chip-icon-size'\n    | '--chip-padding'\n    | '--chip-checked-padding'\n    | '--chip-radius'\n    | '--chip-bg'\n    | '--chip-hover'\n    | '--chip-color'\n    | '--chip-bd'\n    | '--chip-spacing';\n};\n\nexport interface ChipProps\n  extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls various properties related to the component size @default 'sm' */\n  size?: MantineSize;\n\n  /** Chip input type @default 'checkbox' */\n  type?: 'radio' | 'checkbox';\n\n  /** `label` element associated with the input */\n  children: React.ReactNode;\n\n  /** Controlled checked state */\n  checked?: boolean;\n\n  /** Uncontrolled checked state initial value */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Unique input id, generated randomly if not provided */\n  id?: string;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Any element or component to replace the default icon */\n  icon?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, adjusts text color based on the chip background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n  props: ChipProps;\n  ref: HTMLInputElement;\n  stylesNames: ChipStylesNames;\n  vars: ChipCssVariables;\n  variant: ChipVariant;\n  staticComponents: {\n    Group: typeof ChipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n  (theme, { size, radius, variant, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--chip-fz': getFontSize(size),\n        '--chip-size': getSize(size, 'chip-size'),\n        '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n        '--chip-padding': getSize(size, 'chip-padding'),\n        '--chip-icon-size': getSize(size, 'chip-icon-size'),\n        '--chip-bg': color || variant ? colors.background : undefined,\n        '--chip-hover': color || variant ? colors.hover : undefined,\n        '--chip-color': color || variant ? colors.color : undefined,\n        '--chip-bd': color || variant ? colors.border : undefined,\n        '--chip-spacing': getSize(size, 'chip-spacing'),\n      },\n    };\n  }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n  const props = useProps('Chip', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    checked,\n    defaultChecked,\n    onChange,\n    value,\n    wrapperProps,\n    type,\n    disabled,\n    children,\n    size,\n    variant,\n    icon,\n    rootRef,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ChipFactory>({\n    name: 'Chip',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(ChipGroupContext);\n  const uuid = useId(id);\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.isChipSelected(value as string),\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          ctx.onChange(event);\n          onChange?.(event.currentTarget.checked);\n        },\n        type: ctx.multiple ? 'checkbox' : 'radio',\n      }\n    : {};\n\n  const _checked = contextProps.checked || _value;\n\n  return (\n    <Box\n      size={size}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        type={type}\n        {...getStyles('input')}\n        checked={_checked}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        value={value}\n        {...contextProps}\n        {...rest}\n      />\n\n      <Box\n        component=\"label\"\n        htmlFor={uuid}\n        mod={{ checked: _checked, disabled }}\n        {...getStyles('label', { variant: variant || 'filled' })}\n      >\n        {_checked && icon !== null && icon !== false && (\n          <span {...getStyles('iconWrapper')}>\n            {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </Box>\n    </Box>\n  );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;AA+FA,MAAM,eAAe,EACnB,MAAM,YACP;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,OAAO,mBAAmB;CACzD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,aAAa,YAAY,KAAK;EAC9B,eAAe,QAAQ,MAAM,YAAY;EACzC,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACrE,0BAA0B,QAAQ,MAAM,uBAAuB;EAC/D,kBAAkB,QAAQ,MAAM,eAAe;EAC/C,oBAAoB,QAAQ,MAAM,iBAAiB;EACnD,aAAa,SAAS,UAAU,OAAO,aAAa,KAAA;EACpD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,aAAa,SAAS,UAAU,OAAO,SAAS,KAAA;EAChD,kBAAkB,QAAQ,MAAM,eAAe;EAChD,EACF;EAEJ;AAED,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,SACA,gBACA,UACA,OACA,cACA,MACA,UACA,UACA,MACA,SACA,MACA,SACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,OAAOA,QAAM,GAAG;CACtB,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CAEtD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAAO;EACP,cAAc;EACd,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,eAAe,MACjB;EACE,SAAS,IAAI,eAAe,MAAgB;EAC5C,WAAW,UAA+C;AACxD,OAAI,SAAS,MAAM;AACnB,cAAW,MAAM,cAAc,QAAQ;;EAEzC,MAAM,IAAI,WAAW,aAAa;EACnC,GACD,EAAE;CAEN,MAAM,WAAW,aAAa,WAAW;AAEzC,QACE,qBAAC,KAAD;EACQ;EACG;EACT,KAAK;EACA;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,GAAI;YAPN,CASE,oBAAC,SAAD;GACQ;GACN,GAAI,UAAU,QAAQ;GACtB,SAAS;GACT,WAAW,UAAU,SAAS,MAAM,cAAc,QAAQ;GAC1D,IAAI;GACM;GACH;GACP,GAAI;GACJ,GAAI;GACJ,CAAA,EAEF,qBAAC,KAAD;GACE,WAAU;GACV,SAAS;GACT,KAAK;IAAE,SAAS;IAAU;IAAU;GACpC,GAAI,UAAU,SAAS,EAAE,SAAS,WAAW,UAAU,CAAC;aAJ1D,CAMG,YAAY,SAAS,QAAQ,SAAS,SACrC,oBAAC,QAAD;IAAM,GAAI,UAAU,cAAc;cAC/B,SAAS,KAAA,IAAY,oBAAC,WAAD,EAAW,GAAI,UAAU,YAAY,EAAI,CAAA,GAAG;IAC7D,CAAA,EAET,oBAAC,QAAD,EAAO,UAAgB,CAAA,CACnB;KACF;;EAER;AAEF,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQ"}
+{"version":3,"file":"Chip.mjs","names":["useId","classes"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getFontSize,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n  ChipGroup,\n  ChipGroupContext,\n  type ChipGroupProps,\n  type ChipGroupContextValue,\n} from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';\nexport type ChipVariant = 'outline' | 'filled' | 'light';\nexport type ChipCssVariables = {\n  root:\n    | '--chip-fz'\n    | '--chip-size'\n    | '--chip-icon-size'\n    | '--chip-padding'\n    | '--chip-checked-padding'\n    | '--chip-radius'\n    | '--chip-bg'\n    | '--chip-hover'\n    | '--chip-color'\n    | '--chip-bd'\n    | '--chip-spacing';\n};\n\nexport interface ChipProps\n  extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls various properties related to the component size @default 'sm' */\n  size?: MantineSize;\n\n  /** Chip input type @default 'checkbox' */\n  type?: 'radio' | 'checkbox';\n\n  /** `label` element associated with the input */\n  children: React.ReactNode;\n\n  /** Controlled checked state */\n  checked?: boolean;\n\n  /** Uncontrolled checked state initial value */\n  defaultChecked?: boolean;\n\n  /** Calls when checked state changes */\n  onChange?: (checked: boolean) => void;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Unique input id, generated randomly if not provided */\n  id?: string;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Any element or component to replace the default icon */\n  icon?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, adjusts text color based on the chip background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n  props: ChipProps;\n  ref: HTMLInputElement;\n  stylesNames: ChipStylesNames;\n  vars: ChipCssVariables;\n  variant: ChipVariant;\n  staticComponents: {\n    Group: typeof ChipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n  (theme, { size, radius, variant, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--chip-fz': getFontSize(size),\n        '--chip-size': getSize(size, 'chip-size'),\n        '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n        '--chip-padding': getSize(size, 'chip-padding'),\n        '--chip-icon-size': getSize(size, 'chip-icon-size'),\n        '--chip-bg': color || variant ? colors.background : undefined,\n        '--chip-hover': color || variant ? colors.hover : undefined,\n        '--chip-color': color || variant ? colors.color : undefined,\n        '--chip-bd': color || variant ? colors.border : undefined,\n        '--chip-spacing': getSize(size, 'chip-spacing'),\n      },\n    };\n  }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n  const props = useProps('Chip', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    checked,\n    defaultChecked,\n    onChange,\n    value,\n    wrapperProps,\n    type,\n    disabled,\n    children,\n    size,\n    variant,\n    icon,\n    rootRef,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ChipFactory>({\n    name: 'Chip',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(ChipGroupContext);\n  const uuid = useId(id);\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value: checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n    onChange,\n  });\n\n  const contextProps = ctx\n    ? {\n        checked: ctx.isChipSelected(value as string),\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          ctx.onChange(event);\n          onChange?.(event.currentTarget.checked);\n        },\n        type: ctx.multiple ? 'checkbox' : 'radio',\n      }\n    : {};\n\n  const _checked = contextProps.checked || _value;\n\n  return (\n    <Box\n      size={size}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        type={type}\n        {...getStyles('input')}\n        checked={_checked}\n        onChange={(event) => setValue(event.currentTarget.checked)}\n        id={uuid}\n        disabled={disabled}\n        value={value}\n        {...contextProps}\n        {...rest}\n      />\n\n      <Box\n        component=\"label\"\n        htmlFor={uuid}\n        mod={{ checked: _checked, disabled }}\n        {...getStyles('label', { variant: variant || 'filled' })}\n      >\n        {_checked && icon !== null && icon !== false && (\n          <span {...getStyles('iconWrapper')}>\n            {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </Box>\n    </Box>\n  );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n\nexport namespace Chip {\n  export type Props = ChipProps;\n  export type StylesNames = ChipStylesNames;\n  export type CssVariables = ChipCssVariables;\n  export type Factory = ChipFactory;\n  export type Variant = ChipVariant;\n\n  export namespace Group {\n    export type Props<\n      Multiple extends boolean = false,\n      Value extends string = string,\n    > = ChipGroupProps<Multiple, Value>;\n\n    export type ContextValue<Value extends string = string> = ChipGroupContextValue<Value>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoGA,MAAM,eAAe,EACnB,MAAM,YACP;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,OAAO,mBAAmB;CACzD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,aAAa,YAAY,KAAK;EAC9B,eAAe,QAAQ,MAAM,YAAY;EACzC,iBAAiB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACrE,0BAA0B,QAAQ,MAAM,uBAAuB;EAC/D,kBAAkB,QAAQ,MAAM,eAAe;EAC/C,oBAAoB,QAAQ,MAAM,iBAAiB;EACnD,aAAa,SAAS,UAAU,OAAO,aAAa,KAAA;EACpD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,gBAAgB,SAAS,UAAU,OAAO,QAAQ,KAAA;EAClD,aAAa,SAAS,UAAU,OAAO,SAAS,KAAA;EAChD,kBAAkB,QAAQ,MAAM,eAAe;EAChD,EACF;EAEJ;AAED,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,SACA,gBACA,UACA,OACA,cACA,MACA,UACA,UACA,MACA,SACA,MACA,SACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,OAAOA,QAAM,GAAG;CACtB,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CAEtD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAAO;EACP,cAAc;EACd,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,eAAe,MACjB;EACE,SAAS,IAAI,eAAe,MAAgB;EAC5C,WAAW,UAA+C;AACxD,OAAI,SAAS,MAAM;AACnB,cAAW,MAAM,cAAc,QAAQ;;EAEzC,MAAM,IAAI,WAAW,aAAa;EACnC,GACD,EAAE;CAEN,MAAM,WAAW,aAAa,WAAW;AAEzC,QACE,qBAAC,KAAD;EACQ;EACG;EACT,KAAK;EACA;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,GAAI;YAPN,CASE,oBAAC,SAAD;GACQ;GACN,GAAI,UAAU,QAAQ;GACtB,SAAS;GACT,WAAW,UAAU,SAAS,MAAM,cAAc,QAAQ;GAC1D,IAAI;GACM;GACH;GACP,GAAI;GACJ,GAAI;GACJ,CAAA,EAEF,qBAAC,KAAD;GACE,WAAU;GACV,SAAS;GACT,KAAK;IAAE,SAAS;IAAU;IAAU;GACpC,GAAI,UAAU,SAAS,EAAE,SAAS,WAAW,UAAU,CAAC;aAJ1D,CAMG,YAAY,SAAS,QAAQ,SAAS,SACrC,oBAAC,QAAD;IAAM,GAAI,UAAU,cAAc;cAC/B,SAAS,KAAA,IAAY,oBAAC,WAAD,EAAW,GAAI,UAAU,YAAY,EAAI,CAAA,GAAG;IAC7D,CAAA,EAET,oBAAC,QAAD,EAAO,UAAgB,CAAA,CACnB;KACF;;EAER;AAEF,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChipGroup.mjs","names":[],"sources":["../../../../src/components/Chip/ChipGroup/ChipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { Factory, genericFactory, useProps } from '../../../core';\n\nexport interface ChipGroupProps<Multiple extends boolean = false, Value extends string = string> {\n  /** If set, multiple values can be selected */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? Value[] : Value | null;\n\n  /** Uncontrolled component initial value */\n  defaultValue?: Multiple extends true ? Value[] : Value | null;\n\n  /** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */\n  onChange?: (value: Multiple extends true ? Value[] : Value) => void;\n\n  /** `Chip` components and any other elements */\n  children?: React.ReactNode;\n}\n\nexport type ChipGroupFactory = Factory<{\n  props: ChipGroupProps;\n  signature: <Multiple extends boolean = false, Value extends string = string>(\n    props: ChipGroupProps<Multiple, Value>\n  ) => React.JSX.Element;\n}>;\n\nexport const ChipGroup = genericFactory<ChipGroupFactory>((props) => {\n  const { value, defaultValue, onChange, multiple, children } = useProps('ChipGroup', null, props);\n\n  const [_value, setValue] = useUncontrolled<string | null | string[]>({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as string[]) : null,\n    onChange: onChange as any,\n  });\n\n  const isChipSelected = (val: string) =>\n    Array.isArray(_value) ? _value.includes(val) : val === _value;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const val = event.currentTarget.value;\n    if (Array.isArray(_value)) {\n      setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n    } else {\n      setValue(val);\n    }\n  };\n\n  return (\n    <ChipGroupContext value={{ isChipSelected, onChange: handleChange, multiple }}>\n      {children}\n    </ChipGroupContext>\n  );\n});\n\nChipGroup.displayName = '@mantine/core/ChipGroup';\n\nexport interface ChipGroupContextValue<Value extends string = string> {\n  isChipSelected: (value: Value) => boolean;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  multiple: boolean | undefined;\n}\n\nexport const ChipGroupContext = createContext<ChipGroupContextValue | null>(null);\n"],"mappings":";;;;;;;AA4BA,MAAa,YAAY,gBAAkC,UAAU;CACnE,MAAM,EAAE,OAAO,cAAc,UAAU,UAAU,aAAa,SAAS,aAAa,MAAM,MAAM;CAEhG,MAAM,CAAC,QAAQ,YAAY,gBAA0C;EACnE;EACA;EACA,YAAY,WAAY,EAAE,GAAgB;EAChC;EACX,CAAC;CAEF,MAAM,kBAAkB,QACtB,MAAM,QAAQ,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,QAAQ;CAEzD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,MAAM,MAAM,cAAc;AAChC,MAAI,MAAM,QAAQ,OAAO,CACvB,UAAS,OAAO,SAAS,IAAI,GAAG,OAAO,QAAQ,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,QAAQ,IAAI,CAAC;MAEnF,UAAS,IAAI;;AAIjB,QACE,oBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAgB,UAAU;GAAc;GAAU;EAC1E;EACgB,CAAA;EAErB;AAEF,UAAU,cAAc;AAQxB,MAAa,mBAAmB,cAA4C,KAAK"}
+{"version":3,"file":"ChipGroup.mjs","names":[],"sources":["../../../../src/components/Chip/ChipGroup/ChipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { Factory, genericFactory, Primitive, useProps } from '../../../core';\n\nexport interface ChipGroupProps<\n  Multiple extends boolean = false,\n  Value extends Primitive = string,\n> {\n  /** If set, multiple values can be selected */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? Value[] : Value | null;\n\n  /** Uncontrolled component initial value */\n  defaultValue?: Multiple extends true ? Value[] : Value | null;\n\n  /** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */\n  onChange?: (value: Multiple extends true ? Value[] : Value) => void;\n\n  /** `Chip` components and any other elements */\n  children?: React.ReactNode;\n}\n\nexport type ChipGroupFactory = Factory<{\n  props: ChipGroupProps;\n  signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n    props: ChipGroupProps<Multiple, Value>\n  ) => React.JSX.Element;\n}>;\n\nexport const ChipGroup = genericFactory<ChipGroupFactory>((props) => {\n  const { value, defaultValue, onChange, multiple, children } = useProps('ChipGroup', null, props);\n\n  const [_value, setValue] = useUncontrolled<Primitive | null | Primitive[]>({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as Primitive[]) : null,\n    onChange: onChange as any,\n  });\n\n  const isChipSelected = (val: string) =>\n    Array.isArray(_value) ? _value.includes(val) : val === _value;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const val = event.currentTarget.value;\n    if (Array.isArray(_value)) {\n      setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n    } else {\n      setValue(val);\n    }\n  };\n\n  return (\n    <ChipGroupContext value={{ isChipSelected, onChange: handleChange, multiple }}>\n      {children}\n    </ChipGroupContext>\n  );\n});\n\nChipGroup.displayName = '@mantine/core/ChipGroup';\n\nexport interface ChipGroupContextValue<Value extends Primitive = string> {\n  isChipSelected: (value: Value) => boolean;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  multiple: boolean | undefined;\n}\n\nexport const ChipGroupContext = createContext<ChipGroupContextValue | null>(null);\n"],"mappings":";;;;;;;AA+BA,MAAa,YAAY,gBAAkC,UAAU;CACnE,MAAM,EAAE,OAAO,cAAc,UAAU,UAAU,aAAa,SAAS,aAAa,MAAM,MAAM;CAEhG,MAAM,CAAC,QAAQ,YAAY,gBAAgD;EACzE;EACA;EACA,YAAY,WAAY,EAAE,GAAmB;EACnC;EACX,CAAC;CAEF,MAAM,kBAAkB,QACtB,MAAM,QAAQ,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,QAAQ;CAEzD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,MAAM,MAAM,cAAc;AAChC,MAAI,MAAM,QAAQ,OAAO,CACvB,UAAS,OAAO,SAAS,IAAI,GAAG,OAAO,QAAQ,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,QAAQ,IAAI,CAAC;MAEnF,UAAS,IAAI;;AAIjB,QACE,oBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAgB,UAAU;GAAc;GAAU;EAC1E;EACgB,CAAA;EAErB;AAEF,UAAU,cAAc;AAQxB,MAAa,mBAAmB,cAA4C,KAAK"}

package/esm/components/CloseButton/CloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.mjs","names":["classes"],"sources":["../../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["import {\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { CloseIcon } from './CloseIcon';\nimport classes from './CloseButton.module.css';\n\nexport type CloseButtonVariant = 'subtle' | 'transparent';\nexport type CloseButtonStylesNames = 'root';\nexport type CloseButtonCssVariables = {\n  root: '--cb-icon-size' | '--cb-size' | '--cb-radius';\n};\n\nexport interface __CloseButtonProps {\n  'data-disabled'?: boolean;\n\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute, assigns disabled styles */\n  disabled?: boolean;\n\n  /** `X` icon `width` and `height` @default 70% */\n  iconSize?: number | string;\n\n  /** Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. */\n  children?: React.ReactNode;\n\n  /** React node to replace the default close icon. If set, `iconSize` prop is ignored. */\n  icon?: React.ReactNode;\n}\n\nexport interface CloseButtonProps\n  extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {\n  __staticSelector?: string;\n}\n\nexport type CloseButtonFactory = PolymorphicFactory<{\n  props: CloseButtonProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: CloseButtonStylesNames;\n  variant: CloseButtonVariant;\n  vars: CloseButtonCssVariables;\n}>;\n\nconst defaultProps = {\n  variant: 'subtle',\n} satisfies Partial<CloseButtonProps>;\n\nconst varsResolver = createVarsResolver<CloseButtonFactory>((_, { size, radius, iconSize }) => ({\n  root: {\n    '--cb-size': getSize(size, 'cb-size'),\n    '--cb-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cb-icon-size': rem(iconSize),\n  },\n}));\n\nexport const CloseButton = polymorphicFactory<CloseButtonFactory>((_props) => {\n  const props = useProps('CloseButton', defaultProps, _props);\n  const {\n    iconSize,\n    children,\n    vars,\n    radius,\n    className,\n    classNames,\n    style,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    disabled,\n    variant,\n    icon,\n    mod,\n    attributes,\n    __staticSelector,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CloseButtonFactory>({\n    name: __staticSelector || 'CloseButton',\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled}\n      mod={[{ disabled: disabled || dataDisabled }, mod]}\n      {...getStyles('root', { variant, active: !disabled && !dataDisabled })}\n    >\n      {icon || <CloseIcon />}\n      {children}\n    </UnstyledButton>\n  );\n});\n\nCloseButton.classes = classes;\nCloseButton.varsResolver = varsResolver;\nCloseButton.displayName = '@mantine/core/CloseButton';\n"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,SAAS,UACV;AAED,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,QAAQ,gBAAgB,EAC9F,MAAM;CACJ,aAAa,QAAQ,MAAM,UAAU;CACrC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACnE,kBAAkB,IAAI,SAAS;CAChC,EACF,EAAE;AAEH,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,UACA,UACA,MACA,QACA,WACA,YACA,OACA,QACA,UACA,iBAAiB,cACjB,UACA,SACA,MACA,KACA,YACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,gBAAD;EACE,GAAI;EACM;EACD;EACC;EACV,KAAK,CAAC,EAAE,UAAU,YAAY,cAAc,EAAE,IAAI;EAClD,GAAI,UAAU,QAAQ;GAAE;GAAS,QAAQ,CAAC,YAAY,CAAC;GAAc,CAAC;YANxE,CAQG,QAAQ,oBAAC,WAAD,EAAa,CAAA,EACrB,SACc;;EAEnB;AAEF,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"CloseButton.mjs","names":["classes"],"sources":["../../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["import {\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { CloseIcon } from './CloseIcon';\nimport classes from './CloseButton.module.css';\n\nexport type CloseButtonVariant = 'subtle' | 'transparent';\nexport type CloseButtonStylesNames = 'root';\nexport type CloseButtonCssVariables = {\n  root: '--cb-icon-size' | '--cb-size' | '--cb-radius';\n};\n\nexport interface __CloseButtonProps {\n  'data-disabled'?: boolean;\n\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Sets `disabled` attribute, assigns disabled styles */\n  disabled?: boolean;\n\n  /** `X` icon `width` and `height` @default 70% */\n  iconSize?: number | string;\n\n  /** Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. */\n  children?: React.ReactNode;\n\n  /** React node to replace the default close icon. If set, `iconSize` prop is ignored. */\n  icon?: React.ReactNode;\n}\n\nexport interface CloseButtonProps\n  extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {\n  __staticSelector?: string;\n}\n\nexport type CloseButtonFactory = PolymorphicFactory<{\n  props: CloseButtonProps;\n  defaultComponent: 'button';\n  defaultRef: HTMLButtonElement;\n  stylesNames: CloseButtonStylesNames;\n  variant: CloseButtonVariant;\n  vars: CloseButtonCssVariables;\n}>;\n\nconst defaultProps = {\n  variant: 'subtle',\n} satisfies Partial<CloseButtonProps>;\n\nconst varsResolver = createVarsResolver<CloseButtonFactory>((_, { size, radius, iconSize }) => ({\n  root: {\n    '--cb-size': getSize(size, 'cb-size'),\n    '--cb-radius': radius === undefined ? undefined : getRadius(radius),\n    '--cb-icon-size': rem(iconSize),\n  },\n}));\n\nexport const CloseButton = polymorphicFactory<CloseButtonFactory>((_props) => {\n  const props = useProps('CloseButton', defaultProps, _props);\n  const {\n    iconSize,\n    children,\n    vars,\n    radius,\n    className,\n    classNames,\n    style,\n    styles,\n    unstyled,\n    'data-disabled': dataDisabled,\n    disabled,\n    variant,\n    icon,\n    mod,\n    attributes,\n    __staticSelector,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CloseButtonFactory>({\n    name: __staticSelector || 'CloseButton',\n    props,\n    className,\n    style,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <UnstyledButton\n      {...others}\n      unstyled={unstyled}\n      variant={variant}\n      disabled={disabled}\n      mod={[{ disabled: disabled || dataDisabled }, mod]}\n      {...getStyles('root', { variant, active: !disabled && !dataDisabled })}\n    >\n      {icon || <CloseIcon />}\n      {children}\n    </UnstyledButton>\n  );\n});\n\nCloseButton.classes = classes;\nCloseButton.varsResolver = varsResolver;\nCloseButton.displayName = '@mantine/core/CloseButton';\n\nexport namespace CloseButton {\n  export type Props = CloseButtonProps;\n  export type StylesNames = CloseButtonStylesNames;\n  export type Factory = CloseButtonFactory;\n  export type Variant = CloseButtonVariant;\n  export type CssVariables = CloseButtonCssVariables;\n}\n"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,SAAS,UACV;AAED,MAAM,eAAe,oBAAwC,GAAG,EAAE,MAAM,QAAQ,gBAAgB,EAC9F,MAAM;CACJ,aAAa,QAAQ,MAAM,UAAU;CACrC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACnE,kBAAkB,IAAI,SAAS;CAChC,EACF,EAAE;AAEH,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,UACA,UACA,MACA,QACA,WACA,YACA,OACA,QACA,UACA,iBAAiB,cACjB,UACA,SACA,MACA,KACA,YACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B;EACA;EACA;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,gBAAD;EACE,GAAI;EACM;EACD;EACC;EACV,KAAK,CAAC,EAAE,UAAU,YAAY,cAAc,EAAE,IAAI;EAClD,GAAI,UAAU,QAAQ;GAAE;GAAS,QAAQ,CAAC,YAAY,CAAC;GAAc,CAAC;YANxE,CAQG,QAAQ,oBAAC,WAAD,EAAa,CAAA,EACrB,SACc;;EAEnB;AAEF,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Code/Code.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","names":["classes"],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Code.module.css';\n\nexport type CodeStylesNames = 'root';\nexport type CodeCssVariables = {\n  root: '--code-bg';\n};\n\nexport interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {\n  /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. */\n  color?: MantineColor;\n\n  /** If set, code is rendered in `pre` */\n  block?: boolean;\n}\n\nexport type CodeFactory = Factory<{\n  props: CodeProps;\n  ref: HTMLElement;\n  stylesNames: CodeStylesNames;\n  vars: CodeCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<CodeFactory>((theme, { color }) => ({\n  root: {\n    '--code-bg': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const Code = factory<CodeFactory>((_props) => {\n  const props = useProps('Code', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    block,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CodeFactory>({\n    name: 'Code',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box<any>\n      component={block ? 'pre' : 'code'}\n      mod={[{ block }, mod]}\n      {...getStyles('root')}\n      {...others}\n      dir=\"ltr\"\n    />\n  );\n});\n\nCode.classes = classes;\nCode.varsResolver = varsResolver;\nCode.displayName = '@mantine/core/Code';\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAAiC,OAAO,EAAE,aAAa,EAC1E,MAAM,EACJ,aAAa,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GACpD,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,WAAW,QAAQ,QAAQ;EAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;EACrB,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,KAAI;EACJ,CAAA;EAEJ;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}
+{"version":3,"file":"Code.mjs","names":["classes"],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Code.module.css';\n\nexport type CodeStylesNames = 'root';\nexport type CodeCssVariables = {\n  root: '--code-bg';\n};\n\nexport interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {\n  /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. */\n  color?: MantineColor;\n\n  /** If set, code is rendered in `pre` */\n  block?: boolean;\n}\n\nexport type CodeFactory = Factory<{\n  props: CodeProps;\n  ref: HTMLElement;\n  stylesNames: CodeStylesNames;\n  vars: CodeCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<CodeFactory>((theme, { color }) => ({\n  root: {\n    '--code-bg': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const Code = factory<CodeFactory>((_props) => {\n  const props = useProps('Code', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    block,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CodeFactory>({\n    name: 'Code',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box<any>\n      component={block ? 'pre' : 'code'}\n      mod={[{ block }, mod]}\n      {...getStyles('root')}\n      {...others}\n      dir=\"ltr\"\n    />\n  );\n});\n\nCode.classes = classes;\nCode.varsResolver = varsResolver;\nCode.displayName = '@mantine/core/Code';\n\nexport namespace Code {\n  export type Props = CodeProps;\n  export type CssVariables = CodeCssVariables;\n  export type Factory = CodeFactory;\n  export type StylesNames = CodeStylesNames;\n}\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAAiC,OAAO,EAAE,aAAa,EAC1E,MAAM,EACJ,aAAa,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GACpD,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,WAAW,QAAQ,QAAQ;EAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;EACrB,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,KAAI;EACJ,CAAA;EAEJ;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}

package/esm/components/Collapse/Collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */\n  keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && env !== 'test') {\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others}>{children}</Box>\n        </Activity>\n      );\n    }\n    return expanded ? <Box {...others}>{children}</Box> : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAM,eAAe;CAC3B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,qBAAqB,kBAAkB;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}
+{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */\n  keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && env !== 'test') {\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others}>{children}</Box>\n        </Activity>\n      );\n    }\n    return expanded ? <Box {...others}>{children}</Box> : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAM,eAAe;CAC3B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,qBAAqB,kBAAkB;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}

package/esm/components/ColorInput/ColorInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps('ColorInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps('ColorInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/ColorPicker/AlphaSlider/AlphaSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaSlider.mjs","names":[],"sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n  ColorSlider,\n  ColorSliderOptions,\n  ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends ColorSliderOptions {\n  color: string;\n}\n\nexport type AlphaSliderFactory = Factory<{\n  props: AlphaSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'AlphaSlider',\n} satisfies Partial<AlphaSliderProps>;\n\nexport const AlphaSlider = factory<AlphaSliderFactory>((props: AlphaSliderProps) => {\n  const { value, onChange, onChangeEnd, color, ...others } = useProps(\n    'AlphaSlider',\n    defaultProps,\n    props\n  );\n\n  return (\n    <ColorSlider\n      {...others}\n      value={value}\n      onChange={(val) => onChange?.(round(val, 2))}\n      onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n      maxValue={1}\n      round={false}\n      data-alpha\n      overlays={[\n        {\n          backgroundImage:\n            'linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)',\n          backgroundSize: `${rem(8)} ${rem(8)}`,\n          backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`,\n        },\n        {\n          backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n        },\n        {\n          boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n            4\n          )} inset`,\n        },\n      ]}\n    />\n  );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\nAlphaSlider.classes = ColorSlider.classes;\n"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,EACnB,kBAAkB,eACnB;AAED,MAAa,cAAc,SAA6B,UAA4B;CAClF,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAW,SACzD,eACA,cACA,MACD;AAED,QACE,oBAAC,aAAD;EACE,GAAI;EACG;EACP,WAAW,QAAQ,WAAW,MAAM,KAAK,EAAE,CAAC;EAC5C,cAAc,QAAQ,cAAc,MAAM,KAAK,EAAE,CAAC;EAClD,UAAU;EACV,OAAO;EACP,cAAA;EACA,UAAU;GACR;IACE,iBACE;IACF,gBAAgB,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE;IACnC,oBAAoB,UAAU,IAAI,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;IACxE;GACD,EACE,iBAAiB,uCAAuC,MAAM,IAC/D;GACD,EACE,WAAW,2BAA2B,IAAI,EAAE,CAAC,gCAAgC,IAC3E,EACD,CAAC,SACH;GACF;EACD,CAAA;EAEJ;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAU,YAAY"}
+{"version":3,"file":"AlphaSlider.mjs","names":[],"sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n  ColorSlider,\n  ColorSliderOptions,\n  ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends ColorSliderOptions {\n  color: string;\n}\n\nexport type AlphaSliderFactory = Factory<{\n  props: AlphaSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'AlphaSlider',\n} satisfies Partial<AlphaSliderProps>;\n\nexport const AlphaSlider = factory<AlphaSliderFactory>((props: AlphaSliderProps) => {\n  const { value, onChange, onChangeEnd, color, ...others } = useProps(\n    'AlphaSlider',\n    defaultProps,\n    props\n  );\n\n  return (\n    <ColorSlider\n      {...others}\n      value={value}\n      onChange={(val) => onChange?.(round(val, 2))}\n      onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n      maxValue={1}\n      round={false}\n      data-alpha\n      overlays={[\n        {\n          backgroundImage:\n            'linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)',\n          backgroundSize: `${rem(8)} ${rem(8)}`,\n          backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`,\n        },\n        {\n          backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n        },\n        {\n          boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n            4\n          )} inset`,\n        },\n      ]}\n    />\n  );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\nAlphaSlider.classes = ColorSlider.classes;\n\nexport namespace AlphaSlider {\n  export type Props = AlphaSliderProps;\n  export type Factory = AlphaSliderFactory;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,EACnB,kBAAkB,eACnB;AAED,MAAa,cAAc,SAA6B,UAA4B;CAClF,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAW,SACzD,eACA,cACA,MACD;AAED,QACE,oBAAC,aAAD;EACE,GAAI;EACG;EACP,WAAW,QAAQ,WAAW,MAAM,KAAK,EAAE,CAAC;EAC5C,cAAc,QAAQ,cAAc,MAAM,KAAK,EAAE,CAAC;EAClD,UAAU;EACV,OAAO;EACP,cAAA;EACA,UAAU;GACR;IACE,iBACE;IACF,gBAAgB,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE;IACnC,oBAAoB,UAAU,IAAI,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;IACxE;GACD,EACE,iBAAiB,uCAAuC,MAAM,IAC/D;GACD,EACE,WAAW,2BAA2B,IAAI,EAAE,CAAC,gCAAgC,IAC3E,EACD,CAAC,SACH;GACF;EACD,CAAA;EAEJ;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAU,YAAY"}