braid-design-system/CHANGELOG.md

Themeable design system for the SEEK Group

# braid-design-system

## 31.2.3

### Patch Changes

- Update experimental color mode flags ([#1050](https://github.com/seek-oss/braid-design-system/pull/1050))

## 31.2.2

### Patch Changes

- **BraidProvider:** Add `backgroundColor` to html node when `styleBody` is set (defaults to `true`) ([#1047](https://github.com/seek-oss/braid-design-system/pull/1047))

## 31.2.1

### Patch Changes

- useIcon: Return props compatible with public Box component ([#1045](https://github.com/seek-oss/braid-design-system/pull/1045))

## 31.2.0

### Minor Changes

- **vars:** Add light variant foreground colors ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

  **New foregrounds**
  The following foregrounds are now available on the `vars.foregroundColor` theme object:

  - `cautionLight`
  - `infoLight`
  - `linkLight`
  - `linkLightVisited`
  - `positiveLight`
  - `promoteLight`

- **Text:** Improve contrast of `caution`, `positive`, `info`, `promote` and `link` tones ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

  When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.

### Patch Changes

- **OverflowMenu:** Use `neutral` tone button style ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

- **Alert, Card, Toast:** Improve highlight keyline ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

  Ensures that components using a highlight keyline have the correct border radius and mask their overflow correctly.

- **Alert, Autosuggest, Tag, TextField:** Use `neutral` tone button style for clear action ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

- **Box:** Reset background color on `input` and `select` elements ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

  When specifying a `component` of `input` or `select` the background color was not being reset, falling through to the user agent styles. Reseting it to `transparent` to ensure predicatble styles across browsers and colour modes.

- **MenuItem, MenuItemLink, MenuItemCheckbox:** Use `span` elements internally for more valid HTML. ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

- **Loader:** Use current text color ([#1042](https://github.com/seek-oss/braid-design-system/pull/1042))

## 31.1.0

### Minor Changes

- **IconTip:** Add tip icon ([#1040](https://github.com/seek-oss/braid-design-system/pull/1040))

- **IconZoomIn, IconZoomOut:** Add zoom in/out icons ([#1035](https://github.com/seek-oss/braid-design-system/pull/1035))

## 31.0.0

### Major Changes

- **BraidTestProvider:** Move to separate entry ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  By moving `BraidTestProvider` to it’s own entry, we can prevent importing all the themes at dev-time. This improves the developer experience when debugging the stylesheet that is output by the development server.

  **MIGRATION GUIDE**

  Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:

  ```
  yarn braid-upgrade v31 "**/*.{ts,tsx}"
  ```

  ***

  It may be necessary to manually migrate code in some cases, here are the affected use cases:

  ```diff
  - import { BraidTestProvider } from 'braid-design-system';
  + import { BraidTestProvider } from 'braid-design-system/test';
  ```

- **BackgroundProvider** Removed in favour of setting a `background` of `customDark`/`customLight` directly on the `Box` that has the custom background color. ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **MIGRATION GUIDE**

  ```diff
  -<Box style={{ backgroundColor: 'purple' }}>
  +<Box background="customDark" style={{ backgroundColor: 'purple' }}>
  -   <BackgroundProvider value="UNKNOWN_DARK">
       <Text>Inverted text given dark context</Text>
  -   </BackgroundProvider>
   </Box>
  ```

- Remove previously deprecated `ButtonRenderer` component in favour of [`Button`](https://seek-oss.github.io/braid-design-system/components/Button) and [`ButtonLink`](https://seek-oss.github.io/braid-design-system/components/ButtonLink). ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **MIGRATION GUIDE**

  If you were using this to render an `a` element that visually looks like a button, you should be using [`ButtonLink`](https://seek-oss.github.io/braid-design-system/components/ButtonLink)

  ```diff
  -  <ButtonRenderer>
  -    {(ButtonChildren, buttonProps) => (
  -      <a to="#" {...buttonProps}>
  -        Visually a button
  -      </a>
  -    )}
  -  </ButtonRenderer>
  +  <ButtonLink>
  +    Visually a button
  +  </ButtonLink>
  ```

- **Button, ButtonLink:** Add `neutral` tone ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  Introduces a `neutral` tone for cases where actions need to be de-emphasised. As a result, there is a breaking change to the contextual design rules that invert buttons in dark containers.

  **BREAKING CHANGE:**

  A `Button` with a `variant` of `ghost`, `soft`, or `transparent` and no specified `tone` would previously invert when inside a dark container. Now, instead of inverting the foreground colour, these cases will use a lighter version of the default tone, i.e. `formAccent`.

  **MIGRATION GUIDE:**

  To maintain previous behaviour, consumers should opt into the `neutral` tone.

  ```diff
   <Box background="brand" padding="gutter">
  -   <Button variant="ghost">Click</Button>
  +   <Button variant="ghost" tone="neutral">Click</Button>
   </Box>
  ```

- Remove legacy seekAsia themes ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  Since the rebrand went live earlier this year, all consumers of `jobsDb`, `jobStreet`, `jobStreetClassic` and `seekUnifiedBeta` themes should now be using the `apac` theme in production.

  **MIGRATION GUIDE**

  ```diff
  -import jobStreet from 'braid-design-system/themes/jobStreet';
  +import apac from 'braid-design-system/themes/apac';

  -<BraidProvider theme={jobStreet}>
  +<BraidProvider theme={apac}>
     ...
   </BraidProvider>
  ```

- **BulletList** Remove deprecated component ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **MIGRATION GUIDE**

  ```diff
  -<BulletList>
  -  <Bullet large>Bullet</Bullet>
  -  <Bullet large>Bullet</Bullet>
  -  <Bullet large>Bullet</Bullet>
  -</BulletList>

  +<List size="large">
  +  <Text>Bullet</Text>
  +  <Text>Bullet</Text>
  +  <Text>Bullet</Text>
  +</List>
  ```

- Remove previously deprecated `TextLinkRenderer` component in favour of [`TextLink`](https://seek-oss.github.io/braid-design-system/components/TextLink) and [`TextLinkButton`](https://seek-oss.github.io/braid-design-system/components/TextLinkButton). ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **MIGRATION GUIDE**

  If you were using this to render a `button` element that visually looks like a link, you should be using [`TextLinkButton`](https://seek-oss.github.io/braid-design-system/components/TextLinkButton)

  ```diff
  <Text>
  -  <TextLinkRenderer reset={false}>
  -    {(textLinkProps) => (
  -      <Box component="button" {...textLinkProps}>
  -        Visually a link
  -      </Box>
  -    )}
  -  </TextLinkRenderer>
  +  <TextLinkButton>
  +    Visually a link
  +  </TextLinkButton>
    , rendered as a button.
  </Text>
  ```

  If you were using this to render an `a` element or using a client side router link component you should ensure you have configured the [`linkComponent on BraidProvider`](https://seek-oss.github.io/braid-design-system/components/BraidProvider#providing-a-custom-link-component) in your app. Once handled, migrating to [`TextLink`](https://seek-oss.github.io/braid-design-system/components/TextLink) should be straight forward.

  ```diff
  <Text>
  -  <TextLinkRenderer reset={false}>
  -    {(textLinkProps) => (
  -      <Link {...textLinkProps}>
  -        ...
  -      </Link>
  -    )}
  -  </TextLinkRenderer>
  +  <TextLink>
  +    ...
  +  </TextLink>
  </Text>
  ```

- **Button, ButtonLink:** Remove weight prop ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  Removing support for the `weight` prop. This was deprecated back in [v29.26.0](https://seek-oss.github.io/braid-design-system/releases#29.26.0) in favour of using the [`variant`](https://seek-oss.github.io/braid-design-system/components/Button#variants) prop.

- **TextLink, TextLinkButton:** Remove support inside `Actions` component ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  Removing support for `TextLink` and `TextLinkButton` components inside of `Actions`. This was previously deprecated back in [v29.26.0](https://seek-oss.github.io/braid-design-system/releases#29.26.0) in favour of using the `transparent` `variant` of [`ButtonLink`](https://seek-oss.github.io/braid-design-system/components/Button#variants).

  **MIGRATION GUIDE**

  ```diff
    <Actions>
      <Button>...</Button>
  -   <TextLink href="...">...</TextLink>
  +   <ButtonLink href="..." variant="transparent">...</ButtonLink>
    </Actions>
  ```

- Remove `BraidLoadableProvider` ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  As most Apps should run the `apac` theme across all brands, it no longer makes sense to centralise a loadable version of the `BraidProvider`. This should simplify builds across the board and may result in a small build-speed increase.

  **MIGRATION GUIDE**

  If you are only using a single theme, then you should migrate your `BraidLoadableProvider` usage to `BraidProvider`.

  ```diff
  +import apac from 'braid-design-system/themes/apac';
  +import { BraidProvider } from 'braid-design-system';
  -import { BraidLoadableProvider } from 'braid-design-system';

  export const App = () => (
  -    <BraidLoadableProvider themeName="apac">
  +    <BraidProvider theme={apac}>
      ...
  -    </BraidLoadableProvider>
  +    </BraidProvider>
  );
  ```

  If your app still needs to render different themes then you can replicate the `BraidLoadableProvider` functionality locally using the `loadable.lib` API.

  ```tsx
  import { BraidProvider } from 'braid-design-system';
  import React, { ReactNode } from 'react';
  import loadable from 'sku/@loadable/component';

  type ThemeName = 'apac' | 'catho';

  const BraidTheme = loadable.lib((props: { themeName: ThemeName }) =>
    import(`braid-design-system/themes/${props.themeName}`),
  );

  interface AppProps {
    themeName: ThemeName;
    children: ReactNode;
  }
  export const App = ({ themeName, children }: AppProps) => (
    <BraidTheme themeName={themeName}>
      {({ default: theme }) => (
        <BraidProvider theme={theme}>{children}</BraidProvider>
      )}
    </BraidTheme>
  );
  ```

- **Box, atoms, vars:** Update theme colour tokens with improved semantics. ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  Simplifies the semantics of the colour-based tokens to support upcoming colour mode work. Changes to the property values on `backgroundColor` and `borderColor` has flow on affects to the apis on `Box` and `atoms`.

  **TOKEN CHANGES**

  **New**

  - **backgroundColor:** `surface`, `neutralSoft`
  - **borderColor:** `neutral`, `neutralInverted`, `neutralLight`

  **Removed**

  - **backgroundColor:** `card`, `formAccentDisabled`, `input`, `inputDisabled`, `selection`
  - **borderColor:** `formHover`, `standard`, `standardInverted`

  **MIGRATION GUIDE**

  Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:

  ```
  yarn braid-upgrade v31 "**/*.{ts,tsx}"
  ```

  ***

  It may be necessary to manually migrate code in some cases, here are the affected use cases:

  **`Box` backgrounds**

  ```diff
  - <Box background="card" />
  + <Box background="surface" />

  - <Box background="formAccentDisabled" />
  + <Box background="neutralLight" />

  - <Box background="input" />
  + <Box background="surface" />

  - <Box background="inputDisabled" />
  + <Box background="neutralSoft" />

  - <Box background="selection" />
  + <Box background="formAccentSoft" />
  ```

  **`Box` boxShadows**

  ```diff
  - <Box boxShadow="borderStandard" />
  + <Box boxShadow="borderNeutralLight" />

  - <Box boxShadow="borderStandardInverted" />
  + <Box boxShadow="borderNeutralInverted" />

  - <Box boxShadow="borderStandardInvertedLarge" />
  + <Box boxShadow="borderNeutralInvertedLarge" />

  - <Box boxShadow="borderFormHover" />
  + <Box boxShadow="borderFormAccent" />
  ```

  **`vars`**

  ```diff
  - vars.borderColor.standard
  + vars.borderColor.neutralLight

  - vars.borderColor.standardInverted
  + vars.borderColor.neutralInverted

  - vars.borderColor.formHover
  + vars.borderColor.formAccent
  ```

  **`atoms`**

  ```diff
   atoms({
  -  boxShadow: 'borderStandard',
  +  boxShadow: 'borderNeutralLight',
   });

   atoms({
  -  boxShadow: 'borderStandardInverted',
  +  boxShadow: 'borderNeutralInverted',
   });

   atoms({
  -  boxShadow: 'borderStandardInvertedLarge',
  +  boxShadow: 'borderNeutralInvertedLarge',
   });

   atoms({
  -  boxShadow: 'borderFormHover',
  +  boxShadow: 'borderFormAccent',
   });
  ```

### Minor Changes

- **Box:** Add neutral background variants and new boxShadow border variants ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **New backgrounds**
  The following backgrounds are now available:

  - `neutralActive`
  - `neutralHover`
  - `neutralSoftActive`
  - `neutralSoftHover`

  **New boxShadows**
  The following box shadows are now available:

  - `borderBrandAccentLightLarge`
  - `borderCriticalLightLarge`
  - `borderFormAccentLight`
  - `borderFormAccentLightLarge`

- **atoms:** Add boxShadow border variants ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **New boxShadows**
  The following box shadows are now available:

  - `borderBrandAccentLightLarge`
  - `borderCriticalLightLarge`
  - `borderFormAccentLight`
  - `borderFormAccentLightLarge`

- **vars:** Darken neutral background for the `occ` theme. ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  A `neutral` background should be able to hold tone-based text. Moving from `grey700` to `grey800` as per the [Atomic Design System color palette](https://occmundial.github.io/occ-atomic/#Colors)

- **vars:** Add new backgrounds and light variant border colors ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  **New backgrounds**
  The following backgrounds are now available on the `vars.backgroundColor` theme object:

  - `neutralActive`
  - `neutralHover`
  - `neutralSoftActive`
  - `neutralSoftHover`

  **New borderColors**
  The following border colors are now available on the `vars.borderColor` theme object:

  - `brandAccentLight`
  - `criticalLight`
  - `formAccentLight`

- **vars:** Darken neutral background for the `seekAnz` theme. ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  A `neutral` background should be able to hold tone-based text. Moving from `sk-mid-gray-dark` to `sk-charcoal` as per the [Seek Style Guide color palette](https://seek-oss.github.io/seek-style-guide/palette)

### Patch Changes

- **Text:** Improve contrast of `brandAccent`, `critical` and `formAccent` tones ([#1031](https://github.com/seek-oss/braid-design-system/pull/1031))

  When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.

## 30.7.0

### Minor Changes

- **Toggle:** Add ref support ([#1029](https://github.com/seek-oss/braid-design-system/pull/1029))

## 30.6.0

### Minor Changes

- **TextLinkButton:** Add support for `tabIndex` ([#1025](https://github.com/seek-oss/braid-design-system/pull/1025))

## 30.5.1

### Patch Changes

- Move `@types/react` to devDependencies ([#1023](https://github.com/seek-oss/braid-design-system/pull/1023))

  Braid requires consumers to provide React, therefore they should also provide the appropriate version of `@types/react` rather than rely on the version installed in Braid.

## 30.5.0

### Minor Changes

- **FieldLabel:** Dim label when `disabled` ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))

### Patch Changes

- **Autosuggest, Dropdown, MonthPicker, PasswordField, TextField, Textarea:** Hide `placeholder` text when field is `disabled` ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))

- **Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup:** Dim the field value and label when field is `disabled` ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))

- **Autosuggest, TextField:** Hide clear button when field is `disabled`. ([#1019](https://github.com/seek-oss/braid-design-system/pull/1019))

## 30.4.3

### Patch Changes

- **Buttons, Fields, TextLinks, Toggle:** Use `span` for field state overlays instead of `div` ([#1006](https://github.com/seek-oss/braid-design-system/pull/1006))

  Produce more valid HTML as `div` elements are not as flexible with which elements they can be inside (from a validators perspective).

- Update vanilla-extract dependencies ([#1008](https://github.com/seek-oss/braid-design-system/pull/1008))

## 30.4.2

### Patch Changes

- Add support for Typescript 4.4 ([#995](https://github.com/seek-oss/braid-design-system/pull/995))

## 30.4.1

### Patch Changes

- Migrate to @capsizecss/core and @capsizecss/vanilla-extract ([#989](https://github.com/seek-oss/braid-design-system/pull/989))

- Textarea, TextField: Fix for characterLimit adding whitespace below field ([#994](https://github.com/seek-oss/braid-design-system/pull/994))

  Fix for additional white space being shown below a field when a `characterLimit` is specified and the count is not yet displayed.

## 30.4.0

### Minor Changes

- **`apac` and `seekBusiness` themes:** Update colour palette ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

  The colours used in these themes have been updated to the latest design standards.

  **A design review is highly recommended to ensure any custom design elements in your application still look correct when combined with these new colours.**

- **Box:** Add new background and border colours ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

  New `background` values:

  - `brandAccentSoft`
  - `brandAccentSoftActive`
  - `brandAccentSoftHover`
  - `criticalSoft`
  - `criticalSoftActive`
  - `criticalSoftHover`
  - `formAccentSoft`
  - `formAccentSoftActive`
  - `formAccentSoftHover`

  New `boxShadow` values:

  - `borderCautionLight`
  - `borderCriticalLight`
  - `borderInfoLight`
  - `borderPositiveLight`
  - `borderPromoteLight`

- **atoms:** Add new `boxShadow` values: ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

  - `borderCautionLight`
  - `borderCriticalLight`
  - `borderInfoLight`
  - `borderPositiveLight`
  - `borderPromoteLight`

- **vars:** Add new background and border colours ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

  New `backgroundColor` values:

  - `brandAccentSoft`
  - `brandAccentSoftActive`
  - `brandAccentSoftHover`
  - `criticalSoft`
  - `criticalSoftActive`
  - `criticalSoftHover`
  - `formAccentSoft`
  - `formAccentSoftActive`
  - `formAccentSoftHover`

  New `borderColor` values:

  - `cautionLight`
  - `criticalLight`
  - `infoLight`
  - `positiveLight`
  - `promoteLight`

- **Button, ButtonLink, ButtonRenderer:** The `soft` variant now has a solid background colour rather than an opacity. You may need to review any usage on top of coloured backgrounds. ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

- **Box, atoms, vars:** Add `large` and `xlarge` to `borderRadius` scale ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

- **`apac` and `seekBusiness` themes:** Increase size of focus ring (accessed via the `boxShadow` value of `"outlineFocus"`) and use updated colour palette. ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

- Display `formAccent` outline on form elements when focused ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

### Patch Changes

- **Dialog, Drawer:** Support long, unbroken title text ([#986](https://github.com/seek-oss/braid-design-system/pull/986))

- **Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast:** Increase border radius using updated `borderRadius` scale ([#983](https://github.com/seek-oss/braid-design-system/pull/983))

## 30.3.0

### Minor Changes

- **IconThumb, IconFlag:** Add new icons ([#980](https://github.com/seek-oss/braid-design-system/pull/980))

- **Autosuggest, Dropdown, MonthPicker, PasswordField, Textarea, TextField:** Add aria-label & aria-labelledby support ([#979](https://github.com/seek-oss/braid-design-system/pull/979))

  In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a **label** either **aria-label** or **aria-labelledby** can be provided.

  **EXAMPLE USAGE:**

  ```jsx
  // Standard field label
  <TextField label="My field" />

  // Hidden field label
  <TextField aria-label="My field" />

  // Labelled by another element
  <Heading id="title">Title</Heading>
  <TextField aria-labelledby="title" />
  ```

## 30.2.2

### Patch Changes

- Fix bug where patch-package attempts to run for consumers when installing ([#975](https://github.com/seek-oss/braid-design-system/pull/975))

## 30.2.1

### Patch Changes

- **Checkbox, RadioGroup, Radio:** Use atoms for label cursor styles ([#973](https://github.com/seek-oss/braid-design-system/pull/973))

  Since the disabled state of a checkbox can only be changed via JavaScript, cursor styles can be toggled via `Box` props rather than generating additional CSS.

  While this is an improvement in and of itself, this change is being made to work around a third-party testing bug where our use of `:disabled` in a complex CSS selector is causing an exception to be thrown.

## 30.2.0

### Minor Changes

- **TextField:** Add `characterLimit` prop ([#963](https://github.com/seek-oss/braid-design-system/pull/963))

  You can now provide a `characterLimit` that will communicate when the input text approaches or exceeds the specified limit.

  To prevent loss of information, exceeding the limit is permitted, however the count will be presented in a critical tone.

## 30.1.0

### Minor Changes

- Add `wide` breakpoint of 1200px ([#960](https://github.com/seek-oss/braid-design-system/pull/960))

  This adds support for `wide` to the following touchpoints:

  - Responsive values, e.g.
    ```ts
    { mobile: 'small', wide: 'large' }
    ```
  - Responsive range props, e.g.
    ```tsx
    <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
    ```
  - The `responsiveStyle` function, e.g.
    ```ts
    export const className = style(responsiveStyle({ wide: '...' }));
    ```
  - The `breakpoints` object, which now exposes the number `1200` via `breakpoints.wide`, i.e.
    ```ts
    {
      mobile: 0,
      tablet: 740,
      desktop: 940,
      wide: 1200
    }
    ```

- Add `useResponsiveValue` Hook ([#960](https://github.com/seek-oss/braid-design-system/pull/960))

  This Hook will return the resolved value based on the breakpoint the browser viewport currently falls within (`mobile`, `tablet`, `desktop` or `wide`). As this can only be calculated in the browser, the value will also be `null` when rendering server-side or statically rendering.

  Note that this Hook returns a function so that it can be called anywhere within your component.

  **EXAMPLE USAGE**

  ```tsx
  const responsiveValue = useResponsiveValue();

  const screenSize = responsiveValue({
    mobile: 'Small',
    desktop: 'Large',
  });
  ```

  You can also resolve to boolean values for breakpoint detection.

  ```tsx
  const responsiveValue = useResponsiveValue();

  const isMobile = responsiveValue({
    mobile: true,
    tablet: false,
  });

  const isDesktopOrAbove = responsiveValue({
    mobile: false,
    desktop: true,
  });
  ```

- **Dialog, Drawer:** Support nested Dialogs & Drawers ([#959](https://github.com/seek-oss/braid-design-system/pull/959))

  Remove restriction preventing the nesting of modal components, e.g. `Dialog` and `Drawer`. While it is still discouraged to keep experiences simple, there is no longer a technical guard against it.

### Patch Changes

- Deprecate `useBreakpoint` ([#960](https://github.com/seek-oss/braid-design-system/pull/960))

  This Hook has been deprecated in favour of the new `useResponsiveValue` Hook.

  This is because `useBreakpoint` leads consumers to inadvertently couple themselves to the current set of breakpoints, making it risky for us to introduce new breakpoints.

  For example, you may have chosen to detect large screens by checking that the user is on the (current) largest breakpoint (e.g. `const isDesktop = useBreakpoint() === "desktop"`), but this logic would break if we introduced an even larger breakpoint and the Hook started returning other values.

  To maintain backwards compatibility, `useBreakpoint` will continue to return `"desktop"` when the user is technically on larger breakpoints.

  **MIGRATION GUIDE**

  _Note that the `useResponsiveValue` Hook returns a `responsiveValue` function, so in these cases we're double-calling the function._

  ```diff
  -const isMobile = useBreakpoint() === 'mobile';
  +const isMobile = useResponsiveValue()({
  +  mobile: true,
  +  tablet: false
  +});
  ```

  ```diff
  -const isTablet = useBreakpoint() === 'tablet';
  +const isTablet = useResponsiveValue()({
  +  mobile: false,
  +  tablet: true,
  +  desktop: false,
  +});
  ```

  ```diff
  -const isDesktop = useBreakpoint() === 'desktop';
  +const isDesktop = useResponsiveValue()({
  +  mobile: false,
  +  desktop: true
  +});
  ```

## 30.0.3

### Patch Changes

- Ensure atoms are always lowest specificity ([#955](https://github.com/seek-oss/braid-design-system/pull/955))

## 30.0.2

### Patch Changes

- Replace [classnames](https://github.com/JedWatson/classnames) with [clsx](https://github.com/lukeed/clsx) ([#953](https://github.com/seek-oss/braid-design-system/pull/953))

## 30.0.1

### Patch Changes

- Narrow `fontWeight` token type from `string | number` to the expected values ([#952](https://github.com/seek-oss/braid-design-system/pull/952))

- **Textarea:** Fix "Received NaN for the `rows` attribute." warning. ([#950](https://github.com/seek-oss/braid-design-system/pull/950))

  Fixes the warning in node testing environments where updating the `rows` attribute was failing due to `line-height` being `normal`. Now falling back to the predefined `lines` prop when the dynamic `grow` size is not valid.

## 30.0.0

### Major Changes

- **Box:** Remove `transform="touchable"` in favour of `transform={{ active: 'touchable' }}` ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  **MIGRATION GUIDE**

  ```diff
  -<Box transform="touchable">
  +<Box transform={{ active: 'touchable' }}>
  ```

- Updated minimum browser requirement to browsers that support CSS variables ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  For the major browsers this includes:

  - Chrome 49+
  - iOS 9.3+
  - Safari 9.1+
  - Microsoft Edge 16+
  - Firefox 31+
  - Samsung 5+

- Update minimum required sku version to `10.13.1` ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  **BREAKING CHANGE**

  Ensure your version of [sku](https://github.com/seek-oss/sku) is at least `10.13.1`. This is required as Braid now uses [vanilla-extract](https://vanilla-extract.style/) for styling.

- Standardise breakpoints across all themes ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  All themes now use the following breakpoints:

  - Mobile: `0px`
  - Tablet: `740px`
  - Desktop: `992px`

  **BREAKING CHANGE**

  This is a change for the following themes:

  **jobStreet, jobStreetClassic, jobsDb, occ, wireframe**

  - Tablet: `768px` → `740px`

  **catho**

  - Tablet: `600px` → `740px`
  - Desktop: `1024px` → `992px`

  **docs**

  - Tablet: `768px` → `740px`
  - Desktop: `1136px` → `992px`

- Migrate to vanilla-extract ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  Braid now uses [vanilla-extract](http://vanilla-extract.style) rather than [treat](https://seek-oss.github.io/treat) to power its theme-based styling.

  Since they use different file extensions (`.css.ts` vs `.treat.ts`), we're able to ease the migration by supporting both approaches simultaneously in the same project.

  While we encourage you to write new CSS with vanilla-extract files and slowly migrate your existing treat files over time, the goal is to eventually remove treat entirely to enable further improvements to build tooling.

  We've written a **[treat to vanilla-extract migration guide](https://github.com/seek-oss/braid-design-system/blob/master/docs/treat%20to%20vanilla-extract%20migration.md)** to make it easier when opting to migrate a treat file. If you have any questions or concerns, or if you need assistance with implementation or migration work, please reach out to us in the `#braid-support` channel.

  **BREAKING CHANGE**

  **React Portals containing Braid components/styles must use the new `BraidPortal` component**

  CSS-based theming doesn't automatically cascade through React portals. The new [`BraidPortal`](https://seek-oss.github.io/braid-design-system/components/BraidPortal) component handles this for you by forwarding Braid's CSS variables through the portal.

  ```diff
  -import { createPortal } from 'react-dom';
  +import { BraidPortal } from 'braid-design-system';

  // ...

  -return open ? createPortal(<SomeComponent />) : null;
  +return open ? (
  +  <BraidPortal>
  +    <SomeComponent />
  +  </BraidPortal>
  +) : null;
  ```

### Minor Changes

- **TextLinkRenderer:** Allow custom CSS reset via the `reset` prop, and allow it to be disabled by setting the prop to `false`. ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

- Support object notation for responsive props ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.

  ```ts
  { mobile: 'small', tablet: 'medium', desktop: 'large' }
  ```

  This also means that breakpoints can be skipped.

  ```ts
  { mobile: 'small', desktop: 'large' }
  ```

- Add **breakpoints** object for accessing standard breakpoint values ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  The breakpoints object provides a named set of screen sizes that form the basis of all responsive rules in Braid, available in the following format:

  ```ts
  {
    mobile: 0,
    tablet: 740,
    desktop: 992
  }
  ```

- Add **globalTextStyle** and **globalHeadingStyle** functions for applying standard text styles to foreign markup in [vanilla-extract stylesheets](http://vanilla-extract.style) ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  Note: These utilities should only be used when you have no control over the HTML.

  **EXAMPLE USAGE**

  ```ts
  // styles.css.ts
  import { style, globalStyle } from '@vanilla-extract/css';
  import { globalHeadingStyle, globalTextStyle } from 'braid-design-system/css';

  export const root = style({});

  // Target all <h2> elements within the root class
  globalStyle(
    `${root} h2`,
    globalHeadingStyle({
      level: '2',
    }),
  );

  // Target all <p> elements within the root class
  globalStyle(
    `${root} p`,
    globalTextStyle({
      size: 'standard',
      weight: 'regular',
    }),
  );
  ```

- Add **atoms** function for accessing re-usable atomic classes within [vanilla-extract stylesheets](http://vanilla-extract.style) ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  Braid's re-usable atomic classes were previously only available via `Box`, but they are now accessible via the new `atoms` function.

  ```ts
  // styles.css.ts
  import { atoms } from 'braid-design-system/css';

  export const className = atoms({
    paddingTop: 'small',
  });
  ```

  This allows you to co-locate custom styles with Braid's atomic classes in your stylesheets.

  ```ts
  // styles.css.ts
  import { style, composeStyles } from '@vanilla-extract/css';
  import { atoms } from 'braid-design-system/css';

  export const className = composeStyles(
    atoms({ position: 'absolute' }),
    style({ top: 300 }),
  );
  ```

- Add **responsiveStyle** function for creating custom mobile-first styles within [vanilla-extract stylesheets](http://vanilla-extract.style) ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  **EXAMPLE USAGE**

  ```ts
  // styles.css.ts
  import { style } from '@vanilla-extract/css';
  import { vars, responsiveStyle } from 'braid-design-system/css';

  export const className = style(
    responsiveStyle({
      mobile: {
        flexBasis: vars.space.small,
      },
      tablet: {
        flexBasis: vars.space.medium,
      },
      desktop: {
        flexBasis: vars.space.large,
      },
    }),
  );

  // is equivalent to
  import { style } from '@vanilla-extract/css';
  import { vars, breakpoints } from 'braid-design-system/css';

  export const className = style({
    flexBasis: vars.space.small,
    '@media': {
      [`screen and (min-width: ${breakpoints.tablet}px)`]: {
        flexBasis: vars.space.medium,
      },
      [`screen and (min-width: ${breakpoints.desktop}px)`]: {
        flexBasis: vars.space.large,
      },
    },
  });
  ```

- Add **vars** object for accessing themed CSS variables within [vanilla-extract stylesheets](http://vanilla-extract.style) and runtime files. ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  Theming is now achieved natively with CSS variables rather than generating separate styles for each theme. CSS variables are exposed via the `braid-design-system/css` import.

  ```ts
  // styles.css.ts
  import { style } from '@vanilla-extract/css';
  import { vars } from 'braid-design-system/css';

  export const className = style({
    paddingTop: vars.space.small,
  });
  ```

### Patch Changes

- **Loader:** Adjust size to better match text ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

- **Badge:** Use correct text size for `bleedY` positioning ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

- **Box, Tag, Toggle:** Make `borderRadius="full"` always circular ([#947](https://github.com/seek-oss/braid-design-system/pull/947))

  Fixes circular border radius bug where non-square elements would result in an ellipse.

## 29.32.1

### Patch Changes

- **MenuItem:** Prevent click events from bubbling ([#939](https://github.com/seek-oss/braid-design-system/pull/939))

- **Autosuggest:** Fix missing/invalid group headings in some cases ([#937](https://github.com/seek-oss/braid-design-system/pull/937))

## 29.32.0

### Minor Changes

- **CheckboxStandalone:**: Add component ([#935](https://github.com/seek-oss/braid-design-system/pull/935))

  Adds support for cases where a Checkbox needs to be used without a form field style label.

  To maintain accessibility, it is required to provide either a **aria-label** or **aria-labelledby** property, to describe the field's intent.

  Given there is no visual label, the following features from a standard Checkbox cannot be supported:

  - description
  - message
  - badge
  - children (nested content)

  **EXAMPLE USAGE:**

  ```jsx
  <CheckboxStandalone
    id={...}
    checked={...}
    onChange={...}
    aria-label="Label"
  />
  ```

- Add support for data attribute maps on all components. ([#934](https://github.com/seek-oss/braid-design-system/pull/934))

  **EXAMPLE USAGE:**

  ```tsx
  <Alert
    data={{
      testId: 'message',
    }}
  />

  // => <div data-testId="message" />
  ```

### Patch Changes

- Sku dependencies update ([#924](https://github.com/seek-oss/braid-design-system/pull/924))

## 29.31.0

### Minor Changes

- **Checkbox,RadioGroup,Toggle:** Add `size` support to Checkbox, RadioGroup & Toggle ([#928](https://github.com/seek-oss/braid-design-system/pull/928))

  Adds support for adjusting the `size` of a `Checkbox`, the RadioItems within a `RadioGroup` or a `Toggle`. Setting the size adjusts both the visual control and the text size of the label.

  **EXAMPLE USAGE:**

  ```jsx
  <Checkbox size="small" label="Label" />
  ```

  ```jsx
  <RadioGroup size="small" label="Label">
    ...
  </RadioGroup>
  ```

  ```jsx
  <Toggle size="small" label="Label" />
  ```

### Patch Changes

- **Pagination:** Add keyline to improve active page indicator contrast ([#926](https://github.com/seek-oss/braid-design-system/pull/926))

  Improves the contrast of the active page indicator by adding a keyline when `Pagination` is used outside of a `Card`.

## 29.30.0

### Minor Changes

- **Accordion, AccordionItem:** Allow customisation of size, tone, space and dividers. ([#925](https://github.com/seek-oss/braid-design-system/pull/925))

  Note that, to ensure adequate space for touch targets, the `space` prop only accepts values of `"medium"`, `"large"` and `"xlarge"`.

  **EXAMPLE USAGE**

  ```tsx
  <Accordion size="standard" tone="secondary" space="xlarge" dividers={false}>
    <AccordionItem label="Accordion item 1">...</AccordionItem>
    <AccordionItem label="Accordion item 2">...</AccordionItem>
    <AccordionItem label="Accordion item 3">...</AccordionItem>
  </Accordion>
  ```

### Patch Changes

- Update capsize dependency ([#921](https://github.com/seek-oss/braid-design-system/pull/921))

## 29.29.3

### Patch Changes

- **Textarea:** Highlight excess characters when `characterLimit` is provided ([#919](https://github.com/seek-oss/braid-design-system/pull/919))

## 29.29.2

### Patch Changes

- Fix type errors in TypeScript v4.2.2 ([#915](https://github.com/seek-oss/braid-design-system/pull/915))

## 29.29.1

### Patch Changes

- **TooltipRenderer:** Support usage within `Text` elements ([#912](https://github.com/seek-oss/braid-design-system/pull/912))

## 29.29.0

### Minor Changes

- **Box:** Support responsive `borderRadius` ([#910](https://github.com/seek-oss/braid-design-system/pull/910))

  Adds support for responsive values to `borderRadius`.

  **EXAMPLE USAGE:**

  ```jsx
  <Box borderRadius={['none', 'standard']}>...</Box>
  ```

- **Button:** Add support for `ref` and `tabIndex` props ([#905](https://github.com/seek-oss/braid-design-system/pull/905))

- **Card:** Add `component` support ([#910](https://github.com/seek-oss/braid-design-system/pull/910))

  The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports `div` (default), `article`, `aside`, `details`, `main` and `section`.

  **EXAMPLE USAGE:**

  ```jsx
  <Card component="article">...</Card>
  ```

- **Badge:** Add support for `ref`, `tabIndex` and `aria-describedby` props ([#905](https://github.com/seek-oss/braid-design-system/pull/905))

- **Card:** Add `tone` support ([#910](https://github.com/seek-oss/braid-design-system/pull/910))

  Specifying a `tone` will now add a keyline down the left hand side of the container. The supported tones are `promote` and `formAccent`.

  **As a result, Cards are now position relative containers.**

  **EXAMPLE USAGE:**

  ```jsx
  <Card tone="formAccent">...</Card>
  ```

- **TextLink, ButtonLink:** Add support for `ref` prop ([#905](https://github.com/seek-oss/braid-design-system/pull/905))

- **Card:** Add `rounded` and `roundedAbove` support ([#910](https://github.com/seek-oss/braid-design-system/pull/910))

  Card corners can be rounded by providing the `rounded` prop.

  Alternatively, rounding may be applied responsively using the `roundedAbove` prop, and providing either `mobile` or `tablet`. This enables card edges to be softened on larger screens, but squared off if it runs full bleed on smaller devices.

  **EXAMPLE USAGE:**

  ```jsx
  <Card rounded>...</Card>
  ```

  or

  ```jsx
  <Card roundedAbove="mobile">...</Card>
  ```

### Patch Changes

- **Badge:** Ensure `ref`, `title`, `tabIndex` and `aria-describedby` props are applied to the visual badge element, not its container element ([#908](https://github.com/seek-oss/braid-design-system/pull/908))

- **TooltipRenderer:** Add arrow to tooltip ([#908](https://github.com/seek-oss/braid-design-system/pull/908))

## 29.28.1

### Patch Changes

- **TextLink, TextLinkButton, TextLinkRenderer:** Scope deprecation warning to only be in Actions context. ([#903](https://github.com/seek-oss/braid-design-system/pull/903))

## 29.28.0

### Minor Changes

- **Box:** Support value of `default` on `cursor` prop ([#901](https://github.com/seek-oss/braid-design-system/pull/901))

  **EXAMPLE USAGE**

  ```tsx
  <Box cursor="default">...</Box>
  ```

- **TooltipRenderer:** Add `placement` prop, support `top` and `bottom`. Set default placement to `top`. ([#901](https://github.com/seek-oss/braid-design-system/pull/901))

  **EXAMPLE USAGE**

  ```tsx
  <TooltipRenderer
    id={id}
    tooltip={<Text>This is a tooltip!</Text>}
    placement="bottom"
  >
    {({ triggerProps }) => (
      <Box aria-label="Help" {...triggerProps}>
        <IconHelp />
      </Box>
    )}
  </TooltipRenderer>
  ```

- **Button, ButtonLink, ButtonRenderer:** Add `bleedY` prop ([#900](https://github.com/seek-oss/braid-design-system/pull/900))

  You can now choose to allow the button’s background colour to bleed out into the surrounding layout, making it easier to align with other elements.

  For example, we can align a button to a Heading element using an Inline, even though the button is actually taller than the heading. If we didn’t use the **bleedY** prop in this case, the button would introduce unwanted space above and below the heading.

  **EXAMPLE USAGE:**

  ```jsx
  <Inline space="small" alignY="center">
    <Heading level="4">Heading</Heading>
    <Button bleedY>Button</Button>
    <Button bleedY size="small">
      Button
    </Button>
  </Inline>
  ```

## 29.27.0

### Minor Changes

- Add **TooltipRenderer** component ([#897](https://github.com/seek-oss/braid-design-system/pull/897))

  Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.

  Tooltips cannot contain interactive elements like links, buttons or form elements.

  Note: The trigger element must support `ref`, `tabIndex` and `aria-describedby` props.

  **EXAMPLE USAGE**

  ```tsx
  <TooltipRenderer id={id} tooltip={<Text>This is a tooltip!</Text>}>
    {({ triggerProps }) => (
      <Box aria-label="Help" {...triggerProps}>
        <IconHelp />
      </Box>
    )}
  </TooltipRenderer>
  ```

## 29.26.0

### Minor Changes

- **Box:** Add `borderBrandAccentLarge` to `boxShadow` prop ([#893](https://github.com/seek-oss/braid-design-system/pull/893))

- **Text, Icons:** Add brandAccent tone to Text and Icons ([#893](https://github.com/seek-oss/braid-design-system/pull/893))

  **EXAMPLE USAGE:**

  ```jsx
  <Text tone="brandAccent">...</Text>
  ```

- **Button,ButtonLink:** Add variant to Button and deprecate weight ([#893](https://github.com/seek-oss/braid-design-system/pull/893))

  Introduces a new `variant` prop to `Button`/`ButtonLink` giving consumers a single prop to use for selecting the visual style of the button. Choose from `solid` (default), `ghost`, `soft` or `transparent`. The colour of the button is now consistently controlled via the `tone` prop, with supported values being `"brandAccent"`, `"critical"` or `undefined`.

  As a result the `weight` prop is now deprecated. See the migration guide below.

  **EXAMPLE USAGE:**

  ```jsx
  <Inline space="small" collapseBelow="desktop">
    <Button>Solid</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="soft">Soft</Button>
    <Button variant="transparent">Transparent</Button>
  </Inline>
  ```

  **MIGRATION GUIDE:**
  The `weight` prop is now deprecated. If you are not specifying a `weight` there is no change required.

  If you are, each weight can be migrated as follows:

  #### Regular

  Can be replicated with a `variant` of `solid` (default).

  ```diff
  -<Button weight="regular">...</Button>
  +<Button variant="solid">...</Button>
  ```

  Given it is the default `variant`, you could also choose to simply remove the `weight` prop.

  ```diff
  -<Button weight="regular">...</Button>
  +<Button>...</Button>
  ```

  #### Strong

  Can be replicated with a `variant` of `solid` (default), with a `tone` of `brandAccent`.

  ```diff
  -<Button weight="strong">...</Button>
  +<Button tone="brandAccent">...</Button>
  ```

  #### Weak

  Can be replicated with a `variant` of `ghost`.

  ```diff
  -<Button weight="weak">...</Button>
  +<Button variant="ghost">...</Button>
  ```

### Patch Changes

- **TextLink,TextLinkButton:** Deprecate inside of Actions in favour of transparent Button ([#893](https://github.com/seek-oss/braid-design-system/pull/893))

  Usage of `TextLink` or `TextLinkButton` inside of an `Actions` container should now use a `Button` with a `variant` of `transparent`.

  Previously when a `TextLink` or `TextLinkButton` was placed inside of an `Actions` container, it would be given a custom layout to align with the `Button` elements. We are deprecating this behaviour.

  **MIGRATION GUIDE:**
  Going forward `Actions` should only contain `Button` elements. To migrate towards this, both `TextLink` and `TextLinkButton` should now use either a `ButtonLink` or `Button` respectively, with a `variant` or `transparent`.

  #### TextLink

  ```diff
  <Actions>
    <Button>...</Button>
  - <TextLink href="...">...</TextLink>
  + <ButtonLink href="..." variant="transparent">...</ButtonLink>
  </Actions>
  ```

  #### TextLinkButton

  ```diff
  <Actions>
    <Button>...</Button>
  - <TextLinkButton onClick={...}>...</TextLinkButton>
  + <Button onClick={...} variant="transparent">...</Button>
  </Actions>
  ```

- **Button, ButtonLink:** Remove all interactive styles when loading ([#895](https://github.com/seek-oss/braid-design-system/pull/895))

  No longer applies hover and cursor pointer styles when a `Button` is set to `loading`.

## 29.25.0

### Minor Changes

- **Tabs:** Support fragments and `null`/`undefined` as children in `Tabs` and `TabPanels` ([#889](https://github.com/seek-oss/braid-design-system/pull/889))

### Patch Changes

- Add space between page and navigation controls above mobile to improve affordance between the current page and the hover state of surrounding buttons. ([#888](https://github.com/seek-oss/braid-design-system/pull/888))

## 29.24.0

### Minor Changes

- **Hidden:** Add `component` support ([#880](https://github.com/seek-oss/braid-design-system/pull/880))

  You can now customise the DOM element rendered when using `Hidden`. If no `component` is specified, it will fall back to the current behaviour — a `div` by default, or a `span` when setting `inline` to `true`.

  **EXAMPLE USAGE:**

  ```jsx
  <Hidden component="li">...</Hidden>
  ```

- **Pagination:** Add component ([#880](https://github.com/seek-oss/braid-design-system/pull/880))

  **EXAMPLE USAGE:**

  ```jsx
  <Pagination
    label="Search results pagination"
    page={1}
    total={20}
    linkProps={({ page }) => ({
      href: `/results?page=${page}`,
    })}
  />
  ```

### Patch Changes

- Update dependencies ([#883](https://github.com/seek-oss/braid-design-system/pull/883))

## 29.23.0

### Minor Changes

- **Button, ButtonLink, ButtonRenderer, Actions:** Add `size` prop, support `small` size ([#879](https://github.com/seek-oss/braid-design-system/pull/879))

  You can now render smaller variants of button/action elements by setting the `size` prop to `small`.

  **EXAMPLE USAGE**

  **Small Button**

  ```jsx
  <Button size="small">Small Button</Button>
  ```

  **Small Actions**

  ```jsx
  <Actions size="small">
    <Button>Regular Button</Button>
    <Button weight="weak">Weak Button</Button>
    <TextLink href="#">TextLink</TextLink>
  </Actions>
  ```

### Patch Changes

- **Button, ButtonLink, ButtonRenderer:** Reduce horizontal padding of `standard` size from `gutter` to `medium` ([#879](https://github.com/seek-oss/braid-design-system/pull/879))

## 29.22.0

### Minor Changes

- **Tabs:** Add `divider` prop, support `full` and `none` ([#875](https://github.com/seek-oss/braid-design-system/pull/875))

  You can now customise the width of the divider line underneath the tab strip. The default value is `minimal`, but you can now set it to `full` or `none`.

  **EXAMPLE USAGE**

  ```jsx
  <TabsProvider id="id">
    <Tabs label="Label" divider="full">
      <Tab>The first tab</Tab>
      <Tab>The second tab</Tab>
    </Tabs>
    <TabPanels>
      <TabPanel>...</TabPanel>
      <TabPanel>...</TabPanel>
    </TabPanels>
  </TabsProvider>
  ```

## 29.21.1

### Patch Changes

- **Autosuggest:** Ensure input occupies the full width of its container ([#872](https://github.com/seek-oss/braid-design-system/pull/872))

## 29.21.0

### Minor Changes

- Add IconMobile and IconDesktop icons. ([#867](https://github.com/seek-oss/braid-design-system/pull/867))

- **TextField:** Add `prefix` prop ([#866](https://github.com/seek-oss/braid-design-system/pull/866))

  The `prefix` prop allows you to prepend read-only content on the left-hand s