# CHANGELOG

## 5.7.0 - 2026-03-05

### Changed

- The `Box` component's foreground color has been updated when the background is set to `canvas`, `tabdock`, `page`, `surface`, or `neutralLow`. There may be minor visual changes.
- The `Text` component's line height for size `large` has been adjusted from 26px to 24px to align proportionally with other sizes. Minor visual changes should affect whitespace only.
- `TestAppUiProvider` now supports an option to disable animations for testing purposes.
- The `SurfaceHeader` component now uses a larger size for the back icon, resulting in minor visual changes.

## 5.6.0 - 2026-02-19

### Changed

- Internal updates to css color token values, very minor visual regressions may appear.
- Updated the `colorUiOverlayBg` color token value to be slightly darker in dark mode.
- `Flyout` trigger has internal markup changes, removed an outer div wrapper from the `Flyout` component, no layout impact or regressions are expected.
- Flyout component internal behavior change, header content (title, description) now defaults to center alignment for mobile sheet view to align to the rest of Canva.
- Changes the line height of the `Title` component in size "large", from 32px to 30px on viewports <600px, and 42px to 40px on larger viewports. Visual changes are minor and affect whitespace only.
- Updated internal `Title` font weights for most `Title` sizes, large/medium/small titles from 700 to 600. No change required for consumers of the Title component, minimal visual shifts are expected affecting horizontal whitespace only.
- Added better viewport safe-area detection to pinned elements, like the `Flyout` or `FlyoutMenu`.

### Added

- Added a `HtmlPreview` component that can be used to display HTML in the `previewUi` of content publisher intent apps.

### Fixed

- Fixed an issue where the `Text` component font weight would behave differently than expected when when using a 'b' or 'strong' tag. They will now be 600 weight like the usual `bold` variant of that component.
- Fixed an issue with the `Carousel` and `Tabs` components would render incorrectly not follow the global ltr / rtl directions.
- Fixed an issue where the `PillsInput` remove button isn't being triggered when `maxRows` is set and content is scrollable.

## 5.5.0 - 2026-01-14

### Changed

- Reverted `Checkbox` component to use `box-shadow` spread animation for checked/indeterminate states. The previous `background-color` workaround was for an [iOS 26.1 Beta WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=300477) that has since been fixed in the stable release. No code changes required - this is a visual implementation detail.
- Made the `Flyout` component popover and sheet appearances have the same DOM structure on first paint.
- Updated CSS tokens used in various components. Expect very slight visual updates.

### Fixed

- Fixed the `Slider` component briefly flashing with the fill bar at 100% when first loading.
- Fixed the `Card` component fixed focus outline not visible on Safari.
- Fixed carousel items not properly applying item width when they have fluid content.

## 5.4.0 - 2025-12-19

### Changed

- Updated `react` and `react-dom` peer dependency requirement to `^19.2.3` from `^19.2.1`.
- Updated `mobx` peer dependency requirement to `^6.13.5` from `^6.13.3`.
- Updated CSS tokens used in `AudioCard`, expect very slight visual updates.

### Fixed

- Fixed `Carousel` snapping not working with virtualized items.
- Fixed a bug where the `Carousel` component would crash upon unmount.
- Fixed `onScroll` being called incorrectly in edge cases for the `Scrollable` component. It's now only called on scroll events.

## 5.3.0 - 2025-12-10

### Changed

- Updated `react` and `react-dom` peer dependencies to `^19.2.1`.
- `Carousel` component improvements:
  - Items that are not fully visible are now marked as `inert` by default. This means their elements and descendants won't be tabbable or interactive until they are fully visible. A new prop `outOfViewItemBehavior` has been added to opt out of this behavior.
  - Accessibility skip links have been disabled by default if the "inert" `outOfViewItemBehavior` is selected (or defaulted), otherwise become enabled if "none" behavior is selected.
  - Updated the scroll buttons to have smoother animations, and updated the buttons to have circle buttons.
  - Updated item visibility thresholds to improve stability and usability.
- Updated internal shadow colors, small variations in shadows can be expected.

### Added

- Introduced the `SurfaceHeader` component.
- Added a `trigger` prop to the `FlyoutMenu` component, enabling any React.ReactNode to be a FlyoutMenu trigger.
- Added a `variant` prop to the `LinkButton` component, supporting either `regular` (default) or `critical`.

### Fixed

- Fixed a focus abandonment issue occurring when a focused carousel item becomes inert as the container is scrolled with arrow keys.
- Fixed an issue in cards where card content was sometimes leaking outside the selection border.
- Fixed a bug that produced focus jumps when navigating carousels with items wider than the container.

## 5.2.1 - 2025-11-11

### Fixed

- Fixed `ColorSelector` component which stopped working in development mode, due to [a regression in React 19.2](https://github.com/facebook/react/issues/34840).

## 5.2.0 - 2025-10-22

### Changed

- Updated the README to reference canva.dev docs for design tokens.

### Fixed

- `Carousel`'s scroll button control now takes item gaps into account
- Fixed a couple of iOS 26.1 beta bugs impacting `FlyoutMenu`, `Flyout`,`Select`, `CustomizableSelect` and `ColorSelector` components.
  - The top edge of the `Sheet` component would change position when the virtual keyboard is open.
  - Regression affecting transition of full height `Sheet`s when virtual keyboard opens.

## 5.1.0 - 2025-10-14

### Changed

- Changed `react` and `react-dom` peer dependency versions to 19.2.0.

### Added

- Added `onPlay`, `onPause`, and `onEnded` callbacks to the `AudioCard` component.

### Fixed

- Fixed an [IOS 26.1 beta bug](https://bugs.webkit.org/show_bug.cgi?id=300477), which broke the way the box-shadow was applied to `Checkbox` to cover the entire area. Replaced it with background color.
- Fixed a bug where one `AudioCard` component unmounting would stop all currently playing `AudioCard`s.
- Restored missing colorControlBorder token.
- Updated the colorControlBorderHovered semantic token to be correct in dark mode.

## 5.0.2 - 2025-10-08

### Added

- Added `elevationSurfaceFloatingBg` token for use as a background (surface) color. It is the preferred migration for the colorSurface token that was removed in v5.

### Fixed

- Fixed a bug where the wrong ref could be returned for the `SearchInputMenu` component.

## 5.0.1 - 2025-09-30

### Removed

- **Breaking:** Added React 19 as a peer dependency and dropped React 18 support.
- **Breaking:** Remove tone property from InputPill component
- **Breaking:** Removed the default `colorSurface` background color styling for the global `html` tag.
- **Breaking:** Removed the deprecated `title` prop in the `Link` component. Use `tooltipLabel` instead.

### Changed

- **Breaking:** Implemented new design token system. See [App UI Kit v4 to v5 Migration Guide](https://www.canva.dev/docs/apps/app-ui-kit-v5-migration) for more information on upgrading.
- **Breaking:** The `source` parameter of the `onChange` callback for the `ColorSelector` component is now optional. The migration is to check for undefined values in the callback handler.
- **Breaking:** The default value for the `alignY` property of `Column` is now `stretch`. To continue using the old implicit behavior, set it to `start` explicitly.
- **Breaking:** Replaced `Pill` and `InputPill` `truncateText` prop with new `maxWidth` prop. The new prop better describes its functionality, and represents its size in a more explicit manner.
- **Breaking:** Changed the `size` property for the `Pill` component to be consistent with `Button` size variants. To retain the old "small" Pill size, use the new "xsmall" variant.
- **Breaking:** `Pill` now uses a round shape to match Canva styling.

### Added

- Added load callbacks to the media cards - `onImageLoad` to `ImageCard`, `onImageLoad` and `onVideoLoad` to `VideoCard` and `onImageLoad` and `onAudioLoad` to `AudioCard`
- Added `onTimeUpdate` callback to receive ontimeupdate events for the `Audio Card`
- Added new `LinkButton` component for in-app actions that do not need to open URLs.
- Added `type=multi` property to enable multiple selections for the `Select` component.

### Fixed

- Resolved an issue with color-scheme CSS that broke dark mode.
- Fixed a bug where `ProgressBar` always had 0 width when rendered in a flex container.

## 4.10.0 - 2025-06-25

### Deprecated

- Deprecated `title` prop in the `Link` component. Use the newly added `tooltipLabel` prop instead.

### Added

- Added the following components:
  - `TimeInput`
  - `CustomizableSelect`
- Added the following icons:
  - `TeamIcon`
- Added a `time` mode to the `DateTime` component.
- Added a `ref` property to the `AudioCard` component to enable programmatic control.

## 4.9.0 - 2025-04-29

### Added

- Add `onScroll` prop for `Scrollable` component
- Add `video/x-msvideo` as an accepted video mime-type for the `VideoCard` component
- Add `description` and `content` props to the `AudioCard` component

### Fixed

- Fixed a bug where the `VideoCard` and `EmbedCard` components were not correctly applying the `borderRadius` prop

## 4.8.0 - 2025-02-20

### Changed

- Changed the behavior of the `Image`, `Video` and `Embed` Cards to display the loading screen within the border rather than obscuring it.

### Added

- Added `inline-flex` as a display option for the `Box` component.
- Added `bottomEnd` and `bottomEndVisibility` props to `HorizontalCard`.

## 4.7.1 - 2025-01-29

### Fixed

- Fixed an issue where the `TruncatedText` component was not exported, making it unavailable for use.

## 4.7.0 - 2025-01-21

### Added

- Introduced the `TruncatedText` component

### Fixed

- `AudioCard` now stops the audio from playing when the component unmounts

## 4.6.0 - 2025-01-08

### Changed

- Updated the `Button` component to use `rem` for width and height instead of pixel values, ensuring the container scales appropriately when text scales due to browser or OS settings.
- Adjusted all form input components to use `rem` sizes, enabling them to adapt to text scaling via browser or OS settings.

### Added

- Introduced a `wrapInset` prop for the `Badge` component, with a `-1u` value to improve the appearance and spacing of badges wrapped around icons.

  ```tsx
  <Box padding="3u">
    <Badge shape="circle" text="4" tone="assist" wrapInset="-1u">
      <CogIcon />
    </Badge>
  </Box>
  ```

### Fixed

- Resolved an issue with the `AudioCard` component where the pause button would incorrectly stop the track instead of pausing it.
- Fixed a bug where content with scrollbars in the `TabPanel` component would not scale to the correct height.
- Prevented the `PillsInput` remove button's `onRemoveClick` event from bubbling up and inadvertently triggering the pill's `onClick` event.

## 4.5.0 - 2024-12-18

### Added

- Added a `triggerMode` prop to the `ColorSelector` component. Enabling the rendering of a `AddColorButton` as a trigger.
- Added a `onDeleteColor` prop to the `ColorSelector` component, when a callback is provided it adds a delete button in the picker flyout.
- Added a `onOpen` and `onClose` prop to the `ColorSelector` component.
- Added a `labelMarker` prop to the `FormField` component. When provided, it renders a marker next to the label (e.g. "optional").
- Added `thumbnailPadding` and `thumbnailBackground` props to `ImageCard` to allow for custom svg support on the `ImageCard` component.

### Fixed

- Fixed an issue where the text in the `Pill` and `InputPill` components would overflow incorrectly when `truncate` was set to `false`. No considerable visual changes are expected, but a minor width change may be present for truncated pills.
- Fixed an issue where arrow navigation in the `FlyoutMenu` component would not focus in some scenarios of nested FlyoutMenus.
- Other minor fixes and improvements.

## 4.4.0 - 2024-11-26

### Changed

- Reduced the size of the HorizontalCard thumbnail to match other card components

### Added

- Updated labels on `CheckboxGroup`, `Checkbox`, `FormField`, `RadioGroup` and `Switch` to allow for React.ReactNode

### Fixed

- Set the default delimiters for `PillsInput` to be [`','`, `';'`, `'\t'`]
- Updated `AppUiProvider` component to support multiple mounts.
- Fixed broken paste behavior when string without delimiters are pasted into `PillsInput`
- Fixed `Tab` contents display when overflowing as it would squash its contents.

## 4.3.0 - 2024-11-13

### Added

- Added screen reader announcements for `PillsInput`.
- Added the following icons:
  - `LayoutIcon`
  - `ChartLineIcon`
  - `GlobeIcon`
- Added the ability to group options in the `Select` component.
- Added a `description` prop to the `Checkbox`, `CheckboxGroup` and `RadioGroup` components.

## 4.2.0 - 2024-10-30

### Added

- Added the following components:
  - `HorizontalCard`
- Added the following icons:
  - `ImageIcon`
- Added a `topEnd` prop (with visibility control) to the `AudioCard` component, to add an icon button decorator to the top end corner of the card.
- Added a `"small"` size for the `Pill` component.
- Added improved `onDrag` behaviour to the `Audio`, `Video`, `Embed`, and `Image` Cards. They now hide their preview automatically when dragging (if dragging is enabled) and the preview is used as the drag image under the mouse cursor.
- Added a peer dependency on Mobx `v6.13.3` or later, due to an incompatibility with prior patches that would make components fail to update correctly.

### Changed

- Updated the `TabPanel` and `TabPanels` flex grow behavior to always fill to outer `Tabs` height regardless if is "fill", "fixed" or "auto". Resolves an issue where the `TabPanel` content was not filling the height of the `Tabs` component.

### Fixed

- Fixed an issue where the text was being truncated for the `FlyoutMenu` component's trigger button.
- Fixed an issue where the `FlyoutMenu` component was flickering on open due to React v18 changes.
- Other minor fixes and improvements.

## 4.1.0 - 2024-10-14

### Added

- Added a `showTooltip` prop to the `Pill` component.
- Added a `thumbnailAspectRatio` prop to the `ImageCard`, which can be used with `thumbnailHeight` and the `Carousel` component to make carousels of fixed-height thumbnails with variable widths.

### Fixed

- Fixed an issue where the `Button` tooltipDescription was not being used by screen readers.
- Fixed an issue where a disabled `AudioCard` could be dragged.
- Fixed a Safari display problem for `Tab` labels.
- Fixed a layout issue to the FileInput in button mode that caused multiple scrollbars in apps.

## 4.0.0 - 2024-09-23

### Removed

- **Breaking:** Removed the "xlarge" `size` option from the `Title` and `Text` components, please use the "large" size instead.
- **Breaking:** Removed the "neutral" `tone` option from the `Badge` component, it is recommend to use the "contrast" tone instead.
- **Breaking:** Removed the "large" `size` from the `LoadingIndicator` component.
- **Breaking:** Removed the "center" `align` option from the `TabList` component.
- **Breaking:** Removed the `state` prop from the `InputPill` component, the default state now becomes only "default".
- **Breaking:** Removed the `tone` prop from the `ProgressBar` component.
- **Breaking:** Removed the `size` prop from the `Swatch` component.
- **Breaking:** Removed the `MoreVerticalIcon` icon, as outlined in a previous release, the `MoreHorizontalIcon` is recommended instead.

### Changed

- **Breaking:** Changed the `alt` prop to be required for the `ImageCard` component.
- Updated the styling of the `Slider` component, the shadow on the slider knob is now removed when in a "disabled" state.
- Updated the behavior of the `NumberInput` component, a decimal (".") is now permitted as the first character.

### Added

- Added Localization support across all App UI Kit components.
  - With the introduction of Canva [Apps Localization](https://www.canva.dev/docs/apps/localization/), all messaging within apps can now go through the Canva Translation process.
  - Additionally all auxiliary messaging that cannot be directly managing in components are also now automatically translated when respective languages are preferred.
  - Additionally added LTR (left-to-right) and RTL (right-to-left) content direction support to pair with the addition of Apps Localization.
- Added a `pressed` prop to the `Button` component, for only "secondary" and "tertiary" variants.
- Added a "contrast" option to the `variant` prop for the `Button` component.
- Added the following icons:
  - `ArrowMultiDirectionalIcon`
  - `CopyPlusIcon`
  - `DatabaseIcon`
  - `LineWeightsIcon`
  - `MoveLayerDownIcon`
  - `MoveLayerUpIcon`
  - `SpacingIcon`
  - `TextSpacingIcon`

### Fixed

- Fixed an issue with the `Tabs` components where the `Tab` tooltip would snap to the start when the `TabList` component had the `align` prop set to "stretch".
- Fixed an issue where the `PillsInput` component would not display a grayed background when the `disabled` prop was set to true.
- Other minor fixes and improvements.

**Note:** Canva's app submission process requires a single app bundle. Implementing localization might increase the size of the app and cause webpack to split the bundle into multiple chunks. If this happens, you can force webpack to emmit a single bundle [using the LimitChunkCountPlugin](https://www.canva.dev/docs/apps/localization/migrate-an-existing-app/#step-4-configure-webpack-chunk-limit):

In your `webpack.config.js`:

1. Add the `optimize` module to the `webpack` import:

```diff
- const { DefinePlugin } = require("webpack");
+ const { DefinePlugin, optimize } = require("webpack");
```

2. In the `plugins` add the chunk limit before buildDevConfig is called. Modify the plugins definition:

```diff
plugins: [
  new DefinePlugin({
    BACKEND_HOST: JSON.stringify(backendHost),
  }),
+ new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
],
```

## 3.8.0 - 2024-08-05

### Added

- Added the following components:
  - `DateInput`
  - `FlyoutMenu`
  - `FlyoutMenuDivider`
  - `FlyoutMenuItem`
  - `InputPill`
  - `PillsInput`
  - `Scrollable`

### Fixed

- Fixed the heading size of the `Accordion` component.

## 3.7.0 - 2024-07-23

### Added

- Added the following components:
  - `Accordion`
  - `AccordionItem`
  - `Flyout`
  - `Menu`
  - `MenuDivider`
  - `MenuItem`
  - `SearchInputMenu`
- Added the following icons:
  - `DatabaseIcon`
  - `StarFilledIcon`
  - `StarIcon`
  - `TableMergedHeaderCellsIcon`
- Added a `TestAppUiProvider` component for use when testing `@canva/app-ui-kit` components in test environments such as Jest.
- Added a `size` prop to the `Button` component for tertiary icon buttons.
- Added a `selectable`, `selected`, and `disabled` prop to the `AudioCard` component.
- Added a `loading` prop to the `AudioCard`, `EmbedCard`, `ImageCard`, `TypographyCard`, and `VideoCard` components.

### Changed

- Updated the `onClick` and `ariaLabel` props to now be optional for the `ImageCard`, `AudioCard`, `VideoCard` and `EmbedCard` components.

### Fixed

- Fixed an issue in the `Slider` component where the handle overlay was getting cut off by the number input.
- Fixed an issue where screen readers were double announcing labels to RadioGroups.
- Other minor fixes and improvements.

### Deprecated

- `MoreVerticalIcon` is now deprecated, it is no longer recommended for use and will be removed in a future release. Use `MoreHorizontalIcon` instead.

## 3.6.0 - 2024-07-01

### Added

- Added the following components:
  - `Tab`
  - `TabList`
  - `Tabs`
  - `TabPanel`
  - `TabPanels`
- Added the following icons:
  - `CalendarIcon`
  - `MaximizeIcon`
  - `MinimizeIcon`
  - `MoreHorizontalIcon`
  - `MoreVerticalIcon`
  - `StrikethroughIcon`
- Added a `disabled` prop to the `ColorSelector` component.
- Added a `tooltipLabel` prop to the `Badge` component.
- Added a `selected` prop to the `Button` component.
- Added a `searchable` prop to the Form `Select` component to allow searching for options.
- Added a `thumbnailHeight`, `selectable`, `selected`, and `disabled` prop to the `VideoCard` and `EmbedCard` components.
- Added a `bottomEnd` and `bottomEndVisibility` prop for adding card decorators to the `AudioCard`, `EmbedCard`, `ImageCard`, and `VideoCard` components.

### Changed

- Updated React version to `v18.3.1` in Peer Dependencies.

### Fixed

- Fixed an issue where the `MultilineInput` component scroll positioning was resetting on input value change.
- Fixed an issue where closing the `Select` component on touch devices resulted in the options menu reopening.
- Fixed an issue with our build process to remove esm syntax from our cjs output.
- Other minor fixes and improvements.

## 3.5.1 - 2024-05-08

### Added

- The following components:
  - `Avatar`
  - `AvatarGroup`
  - `AvatarPlaceholder`
- The following icons:
  - `LinkIcon`
  - `FileTextIcon`
- Added a new `contrast` tone variant for the `Badge` component, along with TSDoc comments explaining the meaning of each `tone`.
- Added a new `neutral` tone variant for the `Alert` component.
- Added a new `disabled` prop to the `ImageCard` component.

### Changed

- Fixed `WordCountDecorator` displaying incorrect ARIA label.
- Update the `colorTabdock` token value ever so slightly.
- Render a truncated file name in `FileInputItem` when file name is too long, and show the full file name in a tooltip instead.
- Visual changes to `Pill` component selected and disabled states.
- Visual updates to the `Slider` component.

### Fixed

- Links with the `OpenInNewTab` icon no longer leave the icon 'hanging' on a new line.
- Fixed the `Link` component with `target="_blank"` letting punctuation drop onto a new line.
- Fixed a stacking context issue in `Carousel` component causing its buttons to be rendered above flyouts.

## 3.4.0 - 2024-03-18

### Added

- The following icons:
  - `FlagIcon`
  - `LightBulbIcon`

### Changed

- The `Badge` component now has a `wrapInset` prop.
- The `Box` component now has display and flexbox related props.
- The `ImageCard` component now has `selectable` and `selected` props.

### Fixed

- Fixed the text in the `SegmentedControl` component where active items were not rendering in the right tone.
- Fixes a stacking context issue in `SegmentedControl` causing its buttons to be rendered above flyouts.
- Fixed disabled `Select` displaying option lists using arrow keys.

## 3.3.0 - 2024-02-27

### Added

- The `Button` component now has an `alignment` prop.

## 3.2.0 - 2024-02-13

### Improvements

- Reduced bundle size by over 7% by optimizing dependencies and implementing tree-shaking, resulting in faster loading times and improved performance.

### Added

- The following components:
  - `Badge`
  - `Carousel`
  - `ClearDecorator`
  - `Masonry`
  - `Pill`
- The following icons:
  - `ExportIcon`
  - `EyeIcon`
  - `FlipHorizontalIcon`
  - `FlipVerticalIcon`
  - `FolderIcon`
  - `GridIcon`
  - `InfoIcon`
  - `ListBulletLtrIcon`
  - `RedoIcon`
  - `SlidersIcon`
  - `TransparencyIcon`
  - `UndoIcon`

### Changed

- The `Box` component now has a `className` prop.
- The `Button` component now has `iconPosition` and `tooltipLabel` props.
- The `EmbedCard` component `title` prop is now optional.
- The `Select` component options now has `description`, `disabled` and `Icon` props.
- The `Swatch` component now has an `onDelete` prop.
- The `TextInput` component now has `start` and `end` props.
- The `TypographyCard` component now has an `onHover` effect.
- The `VideoCard` component now has a `borderRadius` prop.
- Add `onBlur` and `onFocus` props to the following components: `Checkbox`, `CheckboxGroup`, `MultilineInput`, `NumberInput`, `TextInput`, `RadioGroup`, `SegmentedControl`, `Select`, `Switch`.
- Add `onKeyDown` prop to the following components: `MultilineInput`, `NumberInput`, `TextInput`.
- Updated primitive color scale, lighter colors are now more vibrant with less murky tones. Darker colors are lighter and more muted.

### Fixed

- Fixed `Slider` tab order to be `label`, `slider`, `input`. This fixes a bug where the `Slider` was being rendered on top of other components.
- Other minor fixes and improvements.

## 3.1.0 - 2023-12-12

### Added

- The following components:
  - `AudioCard`
  - `AudioContextProvider`
  - `EmbedCard`
  - `ImageCard`
  - `Link`
  - `TypographyCard`
  - `VideoCard`
- The following icons:
  - `LockOpenIcon`
  - `LockClosedIcon`

**Note:** With the addition of the various `Card` components, the equivalent `Draggable` components, such as `DraggableImage`, have been removed from the [starter kit](https://github.com/canva-sdks/canva-apps-sdk-starter-kit).

### Changed

- The `Button` component now has an `ariaLabel` and `icon` prop.
- The `Grid` component now has an `alignX` prop.
- The `Swatch` component now has a `tooltipLabel` prop.
- Renamed the `colorTypographyQuaternary` token to `colorTypographyPlaceholder`.

### Fixed

- The spacing of the `FormField` component, ensuring consistency with the rest of the components.

## 3.0.0 - 2023-11-02

### Added

- The following components:
  - `Alert`
  - `CharacterCountDecorator`
  - `ColorSelector`
  - `Slider`
  - `Swatch`
  - `Switch`
  - `WordCountDecorator`
- A number of new icons.

### Changed

- **Breaking:** Made the second argument to the `onChange` callback of the `MultilineInput` component optional.

Example update in consumer code:

```diff
<MultilineInput
  onChange={(value, event) => {
+   if (event == null) {
+     return;
+   }
    const cursorPosition = event.target.selectionStart;
    handleChangeAtCursorPosition(value, cursorPosition);
  }}
/>
```

- The `Button` component now accepts a `type` prop. This prop can be set to `"submit"`, `"button"`, or `"reset"`. The default value is `"button"`.
- The `TextInput` component now accepts a `type` prop. This prop can be set to `"search"`, `"tel"`, `"text"`, or `"url"`. The default value is `"text"`.
- The `MultilineInput` component now accepts a `footer` prop. You can use this prop to decorate the input with the `CharacterCountDecorator` or `WordCountDecorator` components.

## 2.0.0 - 2023-09-14

### Removed

- **Breaking:** Removed default reset styles, including `* { margin: 0 }`. Apps may need to update to add these styles back in to maintain current styling:

```
* {
    margin: 0;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
```

- **Breaking:** Removed `disableBubbles` prop from `ProgressBar` component. The bubble effect is now always enabled.
  Any usages of the `disableBubbles` prop will need to be removed.

### Changed

- **Breaking:** Renamed background color tokens. All usages must be updated to use the new name.

The `Box` component's `background` prop has changed and should be renamed accordingly:

| before                   | after                          |
| ------------------------ | ------------------------------ |
| `<Box background={1} />` | `<Box background="canvas" />`  |
| `<Box background={2} />` | `<Box background="tabdock" />` |
| `<Box background={3} />` | `<Box background="page" />`    |
| `<Box background={4} />` | `<Box background="surface" />` |

Any references to the following color tokens should be renamed accordingly:

| before                  | after               |
| ----------------------- | ------------------- |
| tokens.colorBackground1 | tokens.colorCanvas  |
| tokens.colorBackground2 | tokens.colorTabdock |
| tokens.colorBackground3 | tokens.colorPage    |
| tokens.colorBackground4 | tokens.colorSurface |

Any references to the following CSS variables should be renamed accordingly:

| before                      | after                  |
| --------------------------- | ---------------------- |
| --ui-kit-color-background-1 | --ui-kit-color-canvas  |
| --ui-kit-color-background-2 | --ui-kit-color-tabdock |
| --ui-kit-color-background-3 | --ui-kit-color-page    |
| --ui-kit-color-background-4 | --ui-kit-color-surface |

### Added

- Added new `Grid` layout component for displaying content in a grid.
- Added and edited prop documentation across multiple files, to clarify language and provide more context.

### Fixed

- Fixed disabled CSS bug in `Select` component.
- Fixed alignment of `Checkbox` with its label.
- Fixed `MultilineInput` textarea not auto-growing when wordbreaks occur from resizing.
- Validates input when using `FileInput` selector. When using the OS provided selector to choose files, users could override filetype restrictions.
- Other small bug fixes and improvements.

### Other

- `onChange` prop in `RadioGroup` component is now optional to align with the other form components.

## 1.0.0

### Added

- Initial package release