7.13.0

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-13-0)

## Container queries support in Grid

You can now use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
in [Grid](https://mantine.dev/core/grid) component. With container queries, all responsive values
are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element
of the demo with the resize handle located at the bottom right corner of the demo:

```tsx
import { Grid } from '@mantine/core';

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // it is not required in real projects
    <div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
      <Grid
        type="container"
        breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }}
      >
        <Col span={{ base: 12, md: 6, lg: 3 }}>1</Col>
        <Col span={{ base: 12, md: 6, lg: 3 }}>2</Col>
        <Col span={{ base: 12, md: 6, lg: 3 }}>3</Col>
        <Col span={{ base: 12, md: 6, lg: 3 }}>4</Col>
      </Grid>
    </div>
  );
}
```

## CompositeChart component

New [CompositeChart](https://mantine.dev/charts/composite-chart) component allows using `Line`, `Area` and `Bar` charts together in a single chart:

```tsx
import { CompositeChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CompositeChart
      h={300}
      data={data}
      dataKey="date"
      unit="$"
      maxBarWidth={30}
      series={[
        { name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
        { name: 'Apples', color: 'red.8', type: 'line' },
        { name: 'Oranges', color: 'yellow.8', type: 'area' },
      ]}
    />
  );
}
```

## Points labels

[LineChart](https://mantine.dev/charts/line-chart) and [AreaChart](https://mantine.dev/charts/area-chart) now support `withPointLabels` prop to display labels on data points:

```tsx
import { LineChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <LineChart
      h={300}
      data={data}
      dataKey="date"
      withLegend
      withPointLabels
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
      ]}
    />
  );
}
```

[ScatterChart](https://mantine.dev/charts/scatter-chart) also supports point labels, but also allows to control which axis should display labels with `pointLabels` prop:

```tsx
import { ScatterChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <ScatterChart
      h={350}
      data={data}
      dataKey={{ x: 'age', y: 'BMI' }}
      xAxisLabel="Age"
      yAxisLabel="BMI"
      pointLabels="x"
    />
  );
}
```

## BarChart: Mixed stacks

You can now control how [BarChart](https://mantine.dev/charts/bar-chart) series are stacked by setting `stackId` property in series object:

```tsx
import { BarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      series={[
        { name: 'Smartphones', color: 'violet.6', stackId: 'a' },
        { name: 'Laptops', color: 'blue.6', stackId: 'b' },
        { name: 'Tablets', color: 'teal.6', stackId: 'b' },
      ]}
    />
  );
}
```

## BarChart: Minimum bar size

[BarChart](https://mantine.dev/charts/bar-chart) now supports `minBarSize` prop to set the minimum size of the bar in px:

```tsx
import { BarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      withLegend
      series={[
        { name: 'Smartphones', color: 'violet.6' },
        { name: 'Laptops', color: 'blue.6' },
        { name: 'Tablets', color: 'teal.6' },
      ]}
    />
  );
}
```

## Help Center updates

- New [How to integrate custom input with use-form hook?](https://help.mantine.dev/q/custom-input-use-form) question
- New [Can I remove MultiSelect placeholder when the component has selected values?](https://help.mantine.dev/q/multiselect-value-placeholder) question
- New [How can I load fonts in Remix?](https://help.mantine.dev/q/remix-load-fonts) question
- New [My styles are overridden by Mantine components styles, what should I do?](https://help.mantine.dev/q/styles-order) question
- New [Why I cannot use one polymorphic component in component prop of another polymorphic component?](https://help.mantine.dev/q/polymorphic-in-polymorphic) question
- New [Can I use an array of strings as a list in use-form?](https://help.mantine.dev/q/list-of-strings-in-use-form) question

## Other changes

- New demo has been added to [Chip](https://mantine.dev/core/chip) component with an example of how to deselect radio chip
- [BarChart](https://mantine.dev/charts/bar-chart) now supports `maxBarWidth` prop to set the maximum width of each bar in px