@intility/bifrost-react/CHANGELOG.md

React library for Intility's design system, Bifrost.

# @intility/bifrost-react

## 6.1.1

### Patch Changes

- 1af8578: Fix: `<Bifrost>` now properly marked as client component (for RSC/Next.js support)

## 6.1.0

### Minor Changes

- 281e85a: New `eager` prop for `<Tabs.Item>`, will render its `content` even while the tab
  is inactive and hidden. Useful if the tab content has some internal state that
  should persist between switching tabs. #318

## 6.0.1

### Patch Changes

- 8087081: Mark `<Icon.Spinner fixedWidth>` prop as deprecated and add `widthAuto` prop to TypeScript definition.

## 6.0.0

### Major Changes

- 5de0e05: Update `peerDependencies` to explicit major versions:

  ```
  react: ^17 || ^18 || ^19
  react-dom: ^17 || ^18 || ^19
  ```

- 5de0e05: Updated Font Awesome dependencies from `^6.4.2` to `^7.0.0`.
  - `<Icon fixedWidth>` prop deprecated since icons are now fixed width default.
  - New `<Icon widthAuto>` prop if you want the old behavior.
  - If you have trouble installing, try deleting your `node_modules` and
    `package-lock.json`.

### Patch Changes

- Updated dependencies [5de0e05]
  - @intility/bifrost-css@6.0.0

## 5.9.0

### Minor Changes

- a79e31b: Feat: Added optional `align="left"` prop to `<CheckboxCard>` #246

### Patch Changes

- 26b8063: Add focus styling for `recharts` (`accessibilityLayer` is default active since v3) #258
- 593ec3c: bump `@floating-ui/react` from `0.27.14` to `0.27.15`
- Updated dependencies [26b8063]
- Updated dependencies [a79e31b]
- Updated dependencies [96b38eb]
  - @intility/bifrost-css@5.5.0

## 5.8.2

### Patch Changes

- d1a1d0e: Bump `@floating-ui/react` dependency from `0.27.13` to `0.27.14`
- 1f39455: Fix: default to `eager` rendering for `<Nav.Group>` so collapsed groups with
  active children are still styled as active. #265
- 3dc2523: cloneElement usage in Dropdown and Tooltip now works with newer nextjs and react versions
- Updated dependencies [4dc9711]
  - @intility/bifrost-css@5.4.1

## 5.8.1

### Patch Changes

- Updated dependencies [3180fb3]
- Updated dependencies [5ca8cab]
  - @intility/bifrost-css@5.4.0

## 5.8.0

### Minor Changes

- b16e76d: Added new prop `readOnly` and changed `disabled` styling for:
  - `<Input>`
  - `<TextArea>`
  - `<FieldGroup>`
  - `<Label>`
    Changed icon from "ban" to "lock" for disabled (and readOnly) labels.

### Patch Changes

- Updated dependencies [b16e76d]
  - @intility/bifrost-css@5.3.0

## 5.7.0

### Minor Changes

- a161a0c: feat: add `noArrow` and `unstyled` props to `<Dropdown>` to allow custom styling

### Patch Changes

- 15a01f9: bump @floating-ui/react from 0.27.12 to 0.27.13 #251
- Updated dependencies [a161a0c]
  - @intility/bifrost-css@5.2.0

## 5.6.0

### Minor Changes

- 7a4b3a2: Bump dependency `@floating-ui/react` from `0.27.11` to `0.27.12`
- 7626122: Added new `useHotkey(key, callback)` hook for platform-independent hotkeys.
  - `key` (string) - the key to listen to, a single lowercase character (like
    `"k"` or `"s"`)
  - `callback` (function) - will be called when user presses `⌘ + key` on
    macOS, or `Ctrl + key` on win/linux
  - returns an object with `hotkeyText` (string) which will be `"⌘ + key"` or
    `"Ctrl + key"` depending on platform

  ```js
  import useHotkey from "@intility/bifrost-react/hooks/useHotkey";

  // listen to Ctrl/⌘ + K keypress
  const { hotkeyText } = useHotkey("k", (e) => {
    // focus search input
    inputRef.current?.focus();
  });
  // hotkeyText will be "⌘ + K" or "Ctrl + K"
  ```

### Patch Changes

- 9aea814: Fix: `<Dropdown>` no longer auto-closes itself when elements outside it receive focus. #200
- Updated dependencies [aea5b6f]
  - @intility/bifrost-css@5.1.1

## 5.5.0

### Minor Changes

- 75033e2: - Added new theme colors
  - `.bf-theme-pink` applies a pink theme (equivalent to "attn").
  - `.bf-theme-yellow` applies a yellow theme
    - Equivalent to "warning" in dark mode
    - A new "gold/tan" color in light mode
    - While in yellow theme, do not use `--bfc-warning` (e.g. inverted warning badge) on `--bfc-theme` background (this will look like it is working in light mode, but will be invisible in dark mode)
  - `<Box theme>` prop now allows `"pink"` and `"yellow"` values.
  - `--bfc-theme-c` has been updated for all color themes in light mode. It is
    now using a lighter color to establish WCAG-approved contrast against main
    colors (`--bfc-theme`, `--bfc-theme-2`, `--bfc-theme-3`).
- 097aa66: - Bump `@floating-ui/react` dependency from `0.27.9` to `0.27.10`
  - Bump `focus-trap-react` dependency from `11.0.3` to `11.0.4`

### Patch Changes

- Updated dependencies [75033e2]
  - @intility/bifrost-css@5.1.0

## 5.4.1

### Patch Changes

- Updated dependencies [8267f6a]
- Updated dependencies [c7dfe7f]
  - @intility/bifrost-css@5.0.6

## 5.4.0

### Minor Changes

- 8ba9274: Added new `<FileInputArea>` component for file upload
  - Wraps a native `<input type="file">` styled as drag-and-droppable area with customizable content
  - `state="alert"` prop gives a red border

## 5.3.0

### Minor Changes

- ab00bab: Bump `@floating-ui/react` dependency to `0.27.8`

## 5.2.1

### Patch Changes

- aad6e0e: fix: add missing `.js` suffix in internal import (some build systems require it)

## 5.2.0

### Minor Changes

- 3fd8295: New `radius` prop for `<Accordion>` allows different sizes:
  - `"none"` = no border radius
  - `"xs"` = `4px`
  - `"s"` = `8px`
  - `"m"` (or `undefined`) = `12px` (default)
  - `"l"` = `16px`
  - `"xl"` = `24px`
- 109c5b4: Add new props for `<Icon.Spinner>`: `marginLeft`, `marginRight`, and
  `fixedWidth` (works same as for `<Icon>`) #153
- 36114d3: Added optional `noMain` prop to `<Nav>` to allow custom landmark elements like
  `<header>`, `<main>`, and `<footer>`. #120

### Patch Changes

- 3fd8295: Tweaked size of `<button>` in `.bf-accordion-item-title` to better match
  `.bf-section-header`.
  Added `border-top` to `.bf-accordion-item-content` for "styled" variant.
- 074a3aa: Internal tweak: Update deprecated `FocusTrap` imports. #108
- 41412ec: Fix: Prevent `<Tooltip>` and `<Dropdown>` from overflowing viewport width. #148
- Updated dependencies [3fd8295]
- Updated dependencies [87f41a8]
- Updated dependencies [41412ec]
  - @intility/bifrost-css@5.0.5

## 5.1.0

### Minor Changes

- d70cdab: New `eager` prop (renders children/content even when closed) #112
  - `<SlideDown>`
  - `<Dropdown>`
  - `<Accordion.Item>`
  - `<Nav.Group>`
  - `<Message>` (when using `expandable` prop)
  - `<Table.Row>` (when using `content` prop)

### Patch Changes

- 8c9709c: Fix: `<Dropdown>`, `<Dropdown.Group>`, and `<Tooltip>` should be better
  contained inside viewport on small screens. #131
- 15a5ea0: Fix: `.bf-state-icon` icon color (used by `<Input state="warning">`) should be `base-c` by default. #127
- a2994eb: Fixed bug where chromium-based browsers closes `<Modal>` even if `isOpen` and
  `noCloseOnEsc` is `true`, when users press `ESC` **more than once**. #143
- Updated dependencies [15a5ea0]
  - @intility/bifrost-css@5.0.4

## 5.0.4

### Patch Changes

- Updated dependencies [391862a]
  - @intility/bifrost-css@5.0.3

## 5.0.3

### Patch Changes

- c12aaed: Fix: `<CheckboxCard>` (and `<SwitchCard>` and `<RadioCard>`) `label` should not
  have `margin-bottom` when there's no content (`children`) below it.
  [#59](https://github.com/intility/bifrost/issues/59)
- 08849e2: Fix: support string for `logo` prop on `<Nav.Side>` and `<Nav.Top>` (adds fallback graphic, like the `logo` prop on `<Nav>`)

## 5.0.2

### Patch Changes

- 6d67f5f: Fix: Explicitly set `font-family` to "Open Sans" to prevent inheriting wrong
  font from parent for components that may likely be nested inside a heading. #86
  - `<Badge>`
  - `<Tag>`
  - `<Button>`
  - `<Checkbox>`
  - `<Drawer>`
  - `<Modal>`
- Updated dependencies [e136063]
- Updated dependencies [6d67f5f]
- Updated dependencies [4b313b9]
  - @intility/bifrost-css@5.0.2

## 5.0.1

### Patch Changes

- Updated dependencies [b1a6a7f]
  - @intility/bifrost-css@5.0.1

## 5.0.0

### Major Changes

- Added support for React 19
- 582d87e: `<SlideDown>` no longers renders its `children` while `open` is `false` (unless mid-transition).
  - This change also affects components that use `<SlideDown>` internally:
    - `<Accordion.Item>`
    - `<Nav.Group>` when used in sidebar (non-collapsed)
    - `<Message expandable>` expandable message
    - `<Table.Row content>` expandable table row
- 65c4ebd: - New prop `theme` for `<Box>` component, applies a color theme to itself and descendant elements. Supports values:
  - `"inherit"` (default), same as not passing a `theme` prop.
  - `"teal"` default theme color (equivalent to "brand", useful if the parent theme isn't default).
  - `"purple"` purple theme color (equivalent to "chill").
- ac7ff14: Rewritten `<Tooltip>` and `<Dropdown>` components from scratch.
  - Removed `@tippyjs/react` dependency since it's no longer maintained and does not support React 19
    - All props previously forwarded to `<Tippy>` are no longer supported, but we have re-implemented the ones most used. See [upgrade guide](https://bifrost.intility.com/react/install/upgradeTo5) for migration tips.
  - Added `@floating-ui/react` dependency
  - They are no longer stacked using `z-index` but uses the browser top layer via [Popover Web API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) instead.
  - `disabled` prop not only disables the `<Dropdown>` or `<Tooltip>`, but no longer renders the `content` in the DOM tree.
  - Clicking on the hovered element no longer hides the `<Tooltip>`.
  - The `<Tooltip>` DOM node is no longer attached to the `document.body` default, but is placed as a sibling to the `children` of the `<Tooltip>`.
  - `onClickOutside` prop is removed, use `onHide` instead (triggers on `click` outside, and `ESC` kepress, and on `focusin` event on other elements).
  - `placement` no longer supports `"auto"` (default is now `"top"` for `<Tooltip>` and `"bottom-start"` for `<Dropdown>`). Valid values are:
    - `"top"`
    - `"right"`
    - `"bottom"`
    - `"left"`
    - `"top-start"`
    - `"top-end"`
    - `"right-start"`
    - `"right-end"`
    - `"bottom-start"`
    - `"bottom-end"`
    - `"left-start"`
    - `"left-end"`
- 8943b49: Refactored `<FloatingMessage>` to use [Popover Web API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).
  - Fixes issue where floating messages would always appear behind an open `<Modal>` #738
  - Removed the extra `<div>` wrapper with `position: relative` and a `z-index`.
    - This includes forwarded props like `ref`, `className` and `style` (all documented props remain unchanged).

#### Removed

- 11e52eb: Removed `<Spinner>` component. Use `<Icon.Spinner>` instead:

```jsx
<Icon.Spinner size={64} /> // equivalent to `<Spinner />`
<Icon.Spinner /> // equivalent to `<Spinner size="1em" />`
```

- `theme` prop on `<Bifrost>` component removed (deprecated in 4.0)
  - to use light or dark mode, apply `.bf-darkmode` or `.bf-lightmode` to `<html>` element.
- `useTheme()` hook removed (deprecated in 4.0)
- 11e52eb: Removed `icon` and `iconRight` props from `<Button>` (deprecated since 4.7). Place `<Icon>` as child element instead:

```jsx
<Button>
  <Icon marginRight icon={faHome} />
  Click me
</Button>
```

- 11e52eb: Removed `"outline"` value for `<Button variant>` prop (deprecated since 4.7)
- 11e52eb: Removed `variant` prop from `<Dropdown>` (only has a single variant since 4.5)
- 11e52eb: Removed `hideCircle` prop from `<Nav.Item>` (deprecated since 4.2)
- 11e52eb: Removed `appName`, `collapsedAppName`, `logoHref` and `logoOnClick` from `<Nav>` - use `logo` instead. Same goes for `<Nav.Side>` and `<Nav.Top>` as well.
  `useFloatingMessage` hook no longer exported from FloatingMessage file - use `import useFloatingMessage from "@intility/bifrost-react/hooks/useFloatingMessage"`
- 285f893: Removed `dateFormat()` and `timeFormat()` functions (deprecated since 4.0) - use the `useDateTimeFormatter()` hook instead.

#### Renamed

- `useApplyTheme(theme: Theme)` hook renamed to `useApplyColorMode(mode: ColorMode)`. Still functions the same way.

#### TypeScript

- `Theme` type (`"light" | "dark" | "system"`) renamed to `ColorMode`

#### Dependencies

- 4e54726: Bump `focus-trap-react` dependency (used internally by Nav and Drawer) from `10.2.3` to `11.0.3`
- 526d727: Refactor: removed `date-fns` dependency from `@intility/bifrost-react` and added it to `@intility/bifrost-react-datepicker` and bumped from `3.6.0` to `4.1.0`

### Minor Changes

- a40486b: - New `<Badge state>` prop value `"brand"`
  - New `<Message state>` prop values `"brand"`, `"attn"`, and `"chill"`
  - `<Box background>` prop updated to match css background classes (some removed and some added, see bifrost-css changelog)
- c5b07ac: Added new `<Dropdown.Group>` component, styles a button for nested dropdown menu hierarchy, meant to use inside `content` of `<Dropdown>`.
  - `name` prop for labelling the button
  - Optional `icon` prop, styled equivalent to `<Dropdown.Item icon>`
  - `children` content will be placed inside a toggleable sub-dropdown

  Useful for dropdown menus with multiple levels, example:

  ```tsx
  <Dropdown
    content={
      <Dropdown.Group name="Group">
        <Dropdown.Item>Item 1</Dropdown.Item>
        <Dropdown.Item>Item 2</Dropdown.Item>
      </Dropdown.Group>
    }
  >
    <Button>Two levels</Button>
  </Dropdown>
  ```

  Can be nested inside eachother:

  ```tsx
  <Dropdown
    content={
      <Dropdown.Group name="Group">
        <Dropdown.Group name="Nested Group A">
          <Dropdown.Item>Item A1</Dropdown.Item>
          <Dropdown.Item>Item A2</Dropdown.Item>
        </Dropdown.Group>
        <Dropdown.Group name="Nested Group B">
          <Dropdown.Item>Item B1</Dropdown.Item>
          <Dropdown.Item>Item B2</Dropdown.Item>
        </Dropdown.Group>
      </Dropdown.Group>
    }
  >
    <Button>Three levels</Button>
  </Dropdown>
  ```

- bd4e754: Add new `usePrefersColorMode()` hook:
  - Uses CSS media query to find the users `prefers-color-scheme`.
  - Returns `"light"` or `"dark"` when running client-side. (which is the case for single-page-apps)
  - Falls back to `undefined` when server-side-rendering. (like preloading a next.js page, or statically generated)

### Patch Changes

- a26abe7: Deprecated `<Banner>` component. It's been removed from figma components for a while, no current designs should be using it.
- Updated dependencies [fef5acd]
- Updated dependencies [a40486b]
- Updated dependencies [11e52eb]
- Updated dependencies [3e16543]
  - @intility/bifrost-css@5.0.0

## 4.19.1 - 2025-02-26

### Patch Changes

- 1e2116f: update package metadata
- Updated dependencies [1e2116f]
  - @intility/bifrost-css@4.18.3

## 4.19.0 - 2025-02-19

### Minor Changes

- d40b0c3: feat: add noTooltip prop to FormatDate

## 4.18.2 - 2025-02-14

### Patch Changes

- Updated dependencies [66a9741]
- Updated dependencies [8bc2846]
  - @intility/bifrost-css@4.18.2

## 4.18.1 - 2025-01-29

### Patch Changes

- 53e3e7b: fix: `<Ellipsis>` and `.bf-ellipsis` should now work for single-word content,
  and also not break on hyphens for single line (will take all available width)
- Updated dependencies [53e3e7b]
  - @intility/bifrost-css@4.18.1

## 4.18.0 - 2025-01-13

### Minor Changes

- 96071ef: - New `<Menu>` component suitable for nesting inside other wrappers like `<Section>`, `<Accordion>`, or `<Box>`
  - Simple flex container with `8px` gap (no background or other styling)
  - Optional `horizontal` boolean prop for laying out menu items inline.
  - New `<Menu.Item>` sub-component with some padding and hover bg, suitable for nesting inside a `<Link>`, `<a>`, or `<button>`.
    - Marked as active when nested inside a link or button with `.active` css class.
  - New `<Icon.Step>` component, suitable for creating a flexible "step-bar"
    - `variant` prop to choose which icon to display:
      - `"default"` - a faded dot, use for unvisited (future) step
      - `"active"` - right-arrow in a faded circle, use for current step
      - `"completed"` - checkmark in a solid circle, use for steps that are done
      - `"incomplete"` - unfinished progress-pie, use for steps that are visited but not done

  ```jsx
  <Menu>
    <a href="/step1">
      <Menu.Item>
        <Icon.Step variant="completed" marginRight />
        Step 1
      </Menu.Item>
    </a>
    <a href="/step2" class="active">
      <Menu.Item>
        <Icon.Step variant="active" marginRight />
        Step 1
      </Menu.Item>
    </a>
    [more steps...]
  </Menu>
  ```

### Patch Changes

- 548d6e7: Don't close modal on overlay click if click started on a different element
- Updated dependencies [49c20c4]
- Updated dependencies [96071ef]
- Updated dependencies [1716d20]
  - @intility/bifrost-css@4.18.0

## 4.17.0 - 2024-12-13

### Minor Changes

- 10509f3: - Introduced `padded` parameter to `<Ellipsis>` component to prevent clipping of focus outline
  - Added `bf-ellipsis-padded` css class

### Patch Changes

- 958b541: Fix: Only apply padding for `<Input clearable>` when the icon is rendered
- Updated dependencies [eb3b1cc]
- Updated dependencies [97de3fe]
- Updated dependencies [174f259]
- Updated dependencies [10509f3]
  - @intility/bifrost-css@4.17.0

## 4.16.1 - 2024-11-29

### Patch Changes

- a9d985b: Fix: `<Icon.Spinner size>` prop type should now properly accept `number` and `string`.

## 4.16.0 - 2024-11-28

### Minor Changes

- 17060a3: Add new `<Icon.Spinner />` sub-component as an alias for:

  ```jsx
  <Icon
    icon={faSpinnerThird}
    className="bf-icon-spinner bfc-theme"
    style={{ fontSize: /* size prop */ }}
  />
  ```

- b9c82ea: Add `transparent` prop to `<Modal>` to allow better control for custom styling

### Patch Changes

- Updated dependencies [b9c82ea]
  - @intility/bifrost-css@4.16.0

## 4.15.0 - 2024-11-26

### Minor Changes

- 91f354b: New `<Ellipsis>` component, cuts off overflowing text and adds an ellipsis (…)
  - Renders a tooltip on hover when text is overflowing.
  - Configure allowed lines with `lines` prop (default `1`)

### Patch Changes

- bbb8a57: Deprecate `<Spinner>` component in favor of using the more flexible `<Icon>` directly. Example:

  ```jsx
  <Icon icon={faSpinnerThird} className="bf-icon-spinner bfc-theme" />
  ```

- Updated dependencies [bbb8a57]
- Updated dependencies [91f354b]
- Updated dependencies [bae3a2f]
  - @intility/bifrost-css@4.15.0

## 4.14.1 - 2024-11-06

### Patch Changes

- 7668263: Fix scaling issue with nav branding
- 9ac0d65: allow react 17 as a peer dep
- 908fd54: - Fixed `disabled` styling for pagination next/prev buttons
  - Fixed `:focus` styling for link-styled buttons
- Updated dependencies [7668263]
- Updated dependencies [908fd54]
  - @intility/bifrost-css@4.14.1

## 4.14.0 - 2024-10-21

### Minor Changes

- d090112: `<Drawer>` design update
  - Removed left border from right-positioned drawer
  - New drop shadow (while open)
  - Changed background from `bfc-base-2` to `bfc-base-3`
  - Changed right-positioned drawer width to `550px` for all screen widths wider than small
- c8990f1: Color change in light mode: `bfc-theme-*` variables and classes are now teal colored instead of blue.

### Patch Changes

- fe1d4fc: Add convenience aliases for some components:
  - `<RadioCard>` is the same as `<CheckboxCard type="radio">`
  - `<SwitchCard>` is the same as `<CheckboxCard type="switch">`
- Updated dependencies [7915aaf]
- Updated dependencies [d090112]
- Updated dependencies [a486693]
- Updated dependencies [c8990f1]
- Updated dependencies [cb6baa6]
  - @intility/bifrost-css@4.14.0

## 4.13.0 - 2024-10-15

### Minor Changes

- 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.
  - `<Input>`
  - `<DatePicker>`
  - `<FieldGroup.Item>`
  - `<Select>`

### Patch Changes

- 1fbff6b: Fix: Section.Header and Section.Content now has `border-radius` (useful when designers put separate custom background colors on them)
- c2dfb58: Added translation text for select loading state
- Updated dependencies [1fa1483]
- Updated dependencies [1fbff6b]
- Updated dependencies [2703b98]
  - @intility/bifrost-css@4.13.0

## 4.12.1 - 2024-10-01

### Patch Changes

- 553fe3b: Set a (14px) font-size for `<Section>` component (previously inherited from parent)
- d303cff: TypeScript: Add missing values for `<Box background>` prop

## 4.12.0 - 2024-09-16

### Minor Changes

- eac9a11: New `<Dropdown.Item>` sub-component for styling buttons and links in a dropdown. #774
  - Padding for `<Dropdown>` reduced from `12` to `8` px.

### Patch Changes

- Updated dependencies [de00f8f]
- Updated dependencies [e7d617e]
- Updated dependencies [eac9a11]
- Updated dependencies [4fd0770]
  - @intility/bifrost-css@4.12.0

## 4.11.0 - 2024-09-03

### Minor Changes

- df8ce99: `<Tabs>` component restyled and made a bit more flexible
  - Neutralised active tab underline color for default `variant`
  - Added shadow on styled tab selected and hover
  - Added border bottom for basic tab on hover
  - Changed paddings
  - New props for `<Tabs>`:
    - `noBakground` (boolean) makes the tab bar transparent
    - `noPadding` (boolean) removes padding from the tab bar
    - `contentProps` (object) props forwarded to the content area `<div>` element (if any)
    - `contentBackground` (string) sets background-color for content area and active tab for `variant="styled"`. Possible values:
      - `"base"` (default),
      - `"base-2"`
      - `"base-3"`
      - `"transparent"` (not supported by `variant="styled"`)
    - `radius` (string | boolean) adds a border-radius to top of tab bar, and bottom of content area (if any). Possible values:
      - `false` or `undefined` (default) = no border radius
      - `"xs"` = `4px`
      - `"s"` = `8px`
      - `true` or `"m"` = `12px`
      - `"l"` = `16px`
      - `"xl"` = `24px`
  - `radiusTop` same values as `radius`, but only applied to top of tab bar
  - `radiusBottom` same values as `radius`, but only applied to bottom of content area (if any)

### Patch Changes

- c54884f: Fix: `useBreakpoint()` (used by `<Nav>` and `<Drawer>`) should no longer cause [hydration](https://react.dev/reference/react-dom/client/hydrateRoot) errors.
- 3bcdf74: Removed some old CSS that was mis-styling the input background color based on parent context. This was needed before inputs got their current outline styling, and removing it should fix several small issues, including:
  - Nesting form elements like `<Input>`, `<Select>`, and `<TextArea>`, inside `.bfc-base-3-bg` should no longer result in wrong background colors.
  - Nesting a `<Select>` that is `disabled` inside a `<Section>` should now look as expected.
  - `<Input>` should look the same inside a `<Table>` as it does outside.
- ea682a9: Fix: Render `<Tabs>` overflow arrows based on container size as opposed to window size. #776
- 8fb3f6c: Changed typescript definitions for union props to make them more readable in props docs table and on hover in IDE !693
- Updated dependencies [cfc369e]
- Updated dependencies [3bcdf74]
- Updated dependencies [3a5ae26]
- Updated dependencies [df8ce99]
  - @intility/bifrost-css@4.11.0

## 4.10.1 - 2024-08-27

### Patch Changes

- 6ef5ced: Fix: Use pointer cursor when hovering hidden native `<input>` for checkbox, radio, switch, and checkboxcard. #777
- Updated dependencies [6ef5ced]
  - @intility/bifrost-css@4.10.1

## 4.10.0 - 2024-08-22

### Minor Changes

- 810663f: Added some new color classes: `.bfc-base-c-attention-bg` and `.bfc-base-c-chill-bg`
  Recolored some badges to use base-3 as text color (attn, chill)
  Fixed link color for background class names
- f1be5f4: Add `external` prop to `<Box.Arrow>` component, for an arrow poiting up and to the right, suitable for use with external links.

### Patch Changes

- 46d07a6: Fix: "skip to content" button (from `<Nav>`) should no longer be part of printed content.
- 8cbbf46: fix: `<Button.Group active>` focus and hover styling fixes
- bb6765e: fix: increase native (hidden) checkbox input element size to make it more compatible with how tippy works (Dropdown and Tooltip components) #525
- Updated dependencies [810663f]
- Updated dependencies [46d07a6]
- Updated dependencies [8cbbf46]
- Updated dependencies [bb6765e]
- Updated dependencies [f1be5f4]
  - @intility/bifrost-css@4.10.0

## 4.9.0 - 2024-08-14

### Minor Changes

- a727d33: Based on feedback we've changed the default `<Button>` color back to `theme`. We're preparing components to be compatible with a theming system we're currently working on. Hopefully we don't create too many issues :)
  - Same goes for `<Input iconButton>`, `<Button.Group>` and `<Tag active>`
  - Add new `state="neutral"` to `<Button>` (`.bf-button-neutral` CSS class)

### Patch Changes

- e3da5e5: Fix: `<Modal>` should no longer close itself when nested elements trigger a `cancel` event.
- 8685fcf: Removed theme color from table header and border left
- e8faca6: Fixed bug where clicking the outer edges of wide buttons doesn't register clicks (because it was scaled down, placing the cursor outside button)
- Updated dependencies [8685fcf]
- Updated dependencies [e8faca6]
- Updated dependencies [fe7ec62]
- Updated dependencies [a727d33]
  - @intility/bifrost-css@4.9.0

## 4.8.0 - 2024-08-07

### Minor Changes

- 77c67b4: Updated checkbox styling
  - Removed theme color
  - Increased size of checkbox, radio and switch
  - Now supports custom browser font size
  - New active state for switch
  - New hover state for checkbox, radio and switch
  - Neutralized select checkboxes

### Patch Changes

- 9326af8: add locale for the word "of"
- Updated dependencies [77c67b4]
  - @intility/bifrost-css@4.8.0

## 4.7.5 - 2024-08-07

### Patch Changes

- Updated dependencies [fd3acaa]
  - @intility/bifrost-css@4.7.2

## 4.7.4 - 2024-08-06

### Patch Changes

- 633e7b2: chore: avoid internal barrel file imports
- Updated dependencies [899927b]
- Updated dependencies [2cbf99a]
  - @intility/bifrost-css@4.7.1

## 4.7.3 - 2024-08-02

### Patch Changes

- 1755cfb: fix: autoFocus not working in `<Modal />` when initial `isOpen` is true

## 4.7.2 - 2024-08-02

### Patch Changes

- Updated dependencies [3ccc958]
- Updated dependencies [6dfd55d]
- Updated dependencies [14c207d]
  - @intility/bifrost-css@4.7.0

## 4.7.1 - 2024-07-31

### Patch Changes

- Updated dependencies [9ae0e80]
  - @intility/bifrost-css@4.6.1

## 4.7.0 - 2024-07-30

### Minor Changes

- daa6eee: New breadcrumbs styling
  - Added CSS to allow buttons inside `.bf-breadcrumbs` container (to allow forward/back buttons)
  - Use `/` instead of `>` icon to separate path segments
    - `.bf-breadcrumb-angle` renamed to `.bf-breadcrumb-separator`
- 365100c: Changed color values for:
  - `--bfc-base-dimmed`
  - `--bfc-base-c-alert`
  - `--bfc-base-c-wcag`
  - `--bfc-base-c-dimmed` (alias for `--bfc-base-dimmed`)
  - `--bfc-base-c-inverted-1`
  - `--bfc-base-c-inverted-2`
  - `--bfc-alert`
  - `--bfc-alert-c` (big change, from almost black to white)
  - `--bfc-alert-fade`
  - `--bfc-alert-fade-c`
  - `--bfc-alert-fade-1` (alias for `--bfc-alert-fade`)
  - `--bfc-alert-fade-1-c` (alias for `--bfc-alert-fade-c`)

  Added new colors:
  - `--bfc-base-c-inverted-3`
  - `--bfc-base-dimmed-1` (alias for existing `--bfc-base-dimmed`)
  - `--bfc-base-dimmed-2`
  - `--bfc-base-dimmed-3`
  - `--bfc-alert-2`

  Added new class names:
  - `.bfc-base-c-bg`
  - `.bfc-base-c-2-bg`

  New `<Button>` styling:
  - Increased `border-radius` (from xs to s)
  - New outline styling on keyboard focus
  - Removed theme color from `variant="filled"`
  - Added `variant="flat"`, no background or outline
  - Added `state="inverted"`, for contrasting background
  - Deprecated `variant="outline"` since default `variant` has outline
  - `state="alert"` now supported by every `variant`
  - New `<Button.Group>` styling
    - Removed theme color from `active` button
  - Fixed outline overlapping on `:focus-visible` with `z-index: 1`

  Update `<Checkbox button>`, `<CheckboxCard>`, `<Tag>` and `<Drawer>` (close button) styling to match new bifrost Button.

  Update `border` styling for `<Input>`, `<Textarea>` and `<FieldGroup>` to match new bifrost Button.

  New `<Badge>` styling: updated `font-weight` and `padding`. Background changed for `inverted` `state="neutral"` variant.

  Increased `marginRight` and `marginLeft` for `<Icon>` from `4px` to `8px`.

### Patch Changes

- ac738a9: Fix: Remove "." placeholder from `<Skeleton.Text>` and pray browsers support `lh` CSS unit.
- 7b2eacc: Fix: Apparently, Chrome has changed its `<input autocomplete>` behaviour and now appears to only respect `autoComplete="off"`, so lets try that and pray to the browser gods that this will satisfy all of them for the forseeable future. #758
- 49761c2: support `autoFocus` on elements inside `<Modal />`
- Updated dependencies [ac738a9]
- Updated dependencies [4df5421]
- Updated dependencies [841993b]
- Updated dependencies [daa6eee]
- Updated dependencies [a23cc4f]
- Updated dependencies [365100c]
  - @intility/bifrost-css@4.6.0

## 4.6.0 - 2024-06-21

### Minor Changes

- 43dc6cf9: New `removeFloatingMessage()` function exposed from `useFloatingMessage()` hook when called from a component nested inside a floating message. #708

### Patch Changes

- 426d9481: Fix: Floating messages should now transition properly regardless of message box height, and respect users `prefers-reduced-motion` setting.
- Updated dependencies [a2ec3e53]
- Updated dependencies [23ff3593]
  - @intility/bifrost-css@4.5.1

## 4.5.1 - 2024-06-13

### Patch Changes

- fd392752: Fix: Drawer `inert` prop should now support react 19
- 6a6a8cd5: import tippy with a fallback to avoid failing in some build systems
- Updated dependencies [833a15e4]
  - @intility/bifrost-css@4.5.0

## 4.5.0 - 2024-06-06

### Minor Changes

- 0b24673c: Feat: New styling for dropdowns, now always renders with both a shadow and border. Deprecated the `<Dropdown variant>` prop and removed `.bf-dropdown-border` since there's only one variant now.

### Patch Changes

- 13a6a698: Fix: `<Tooltip>` should no longer be overlapped by `<Nav>` #744
- Updated dependencies [0b24673c]
- Updated dependencies [e6ead541]
  - @intility/bifrost-css@4.4.0

## 4.4.0 - 2024-06-05

### Minor Changes

- c0206816: Added new `<Section>` component

### Patch Changes

- c20e24ae: Fix Nav.Search styling when used in top bar
- 409b9e4d: Fix: allow deep import of `useBreakpoint` hook, e.g. `import useBreakpoint from "@intility/bifrost-react/hooks/useBreakpoint";`
- Updated dependencies [c20e24ae]
- Updated dependencies [5de6a97c]
  - @intility/bifrost-css@4.3.1

## 4.3.0 - 2024-05-31

### Minor Changes

- 069614ed: Slight tweaks to .bf-input, .bf-datepicker and .bf-textarea on hover and focus #740
- 9b7cead3: Fix: Font-size variables are now defined in `rem` in order to respect user agent font settings. #742
- fd90da94: Feat: add scrollbar styling
  - Default `scrollbar-color` set on root element, `.bf-scrollbar`, and `.bf-scrollbar-small`
  - `.bf-scrollbar-small` now applies `scrollbar-width: thin`

### Patch Changes

- 503ffd86: Performance tweaks for `useDateTimeFormatter()` #725
- 9749173c: Fixed positioning for nav top bar #746
- Updated dependencies [069614ed]
- Updated dependencies [9b7cead3]
- Updated dependencies [fd90da94]
- Updated dependencies [9749173c]
  - @intility/bifrost-css@4.3.0

## 4.2.7 - 2024-05-29

### Patch Changes

- Updated dependencies [d2bb0be5]
  - @intility/bifrost-css@4.2.7

## 4.2.6 - 2024-05-29

### Patch Changes

- Updated dependencies [4c0b4e5e]
  - @intility/bifrost-css@4.2.6

## 4.2.5 - 2024-05-27

### Patch Changes

- c00455e8: bump focus-trap-react dep
- Updated dependencies [af52c2d7]
  - @intility/bifrost-css@4.2.5

## 4.2.4 - 2024-05-22

### Patch Changes

- 92cc2649: Fixed error assigning sub-components to a client component
- bf863902: New custom icon for Nav sidebar collapse button
- 751340b2: fix intility logo asset import in Nav.Logo and internal Branding component
- Updated dependencies [366de21e]
- Updated dependencies [bf863902]
- Updated dependencies [917825cb]
  - @intility/bifrost-css@4.2.4

## 4.2.3 - 2024-05-16

### Patch Changes

- Updated dependencies [9c1de768]
  - @intility/bifrost-css@4.2.3

## 4.2.2 - 2024-05-16

### Patch Changes

- Updated dependencies [08583204]
  - @intility/bifrost-css@4.2.2

## 4.2.1 - 2024-05-15

### Patch Changes

- 99fc0cdc: Change nav side collapse icon from pro to free bundle
- 33a242ff: Fix text-align in top nav for some scenarios
- Updated dependencies [33a242ff]
  - @intility/bifrost-css@4.2.1

## 4.2.0 - 2024-05-15

### Minor Changes

- 74dc6d6f: - `<Nav>` component redesigned:
  - A lot of styling changes, including removal of top-left Intility logo. See [bifrost-css changelog](https://gitlab.intility.com/DeveloperServices/portal2/bifrost/-/blob/master/packages/bifrost-css/CHANGELOG.md).
  - Added "an intility service" branding to bottom of sidebar (and mobile nav).
    - New prop `hideBranding` can disable it.
    - Changes to an "it" graphic for collapsed sidebar.
  - New prop `logo`, which accepts an app name as string, or JSX content.
  - Deprecated props `appName`, `collapsedAppName`, `logoHref`, and `logoOnClick` (all you need is `logo`)
  - New helper component `<Nav.Logo>` for topbar logo layout (custom graphic + text). See updated [Nav component docs](https://bifrost.intility.com/react/nav#logo-graphic) for examples.
- dfb6fbfb: - New `<Box>` component to make bifrost styling more easily accessible in JSX.
  - Unstyled by default, use props to add styling:
  - `shadow` - `boolean`
  - `border` (plus `borderTop`, `borderRight`, `borderBottom`, `borderLeft`) - `boolean`
  - `padding` (plus `paddingInline`, `paddingBlock`) - `boolean` | `number`
  - `background` - `boolean` | `"base"` | `"base-2"` | `"base-3"` | `"dimmed"` | `"dimmed-c"` | `"inverted"` | `"inverted-2"` | `"theme"` | `"theme-fade"` | `"success"` | `"success-fade"` | `"warning"` | `"warning-fade"` | `"alert"` | `"alert-fade"` | `"alert-fade-2"` | `"attn"` | `"attn-c"` | `"chill"` | `"chill-c"`
  - `radius` (plus `radiusTopLeft`, `radiusTopRight`, `radiusBottomRight`, `radiusBottomLeft`)
    - `"xs"` = `4px`
    - `"s"` = `8px`
    - `true` or `"m"` = `12px`
    - `"l"` = `16px`
    - `"xl"` = `24px`
    - `"full"` = `9999px`
    - `false` or `undefined` (default) = no border radius
  - New `<Box.Arrow>` component, renders an arrow-right icon with a transition on hover when nested inside a link.
    - E.g. `<a href="/path">link with arrow <Box.Arrow /></a>`

### Patch Changes

- Updated dependencies [2207b865]
- Updated dependencies [f3eae438]
  - @intility/bifrost-css@4.2.0

## 4.1.2 - 2024-05-15

### Patch Changes

- 924c0b5f: Bump datepicker and date-fns versions !557

## 4.1.1 - 2024-04-24

### Patch Changes

- Updated dependencies [31205e8d]
  - @intility/bifrost-css@4.1.1

## 4.1.0 - 2024-04-23

### Minor Changes

- f39613ed: Changes to `<Drawer>` and `.bf-drawer`
  - Use `margin` instead of `transform` to show/hide drawer. Fixes #736
  - Use `inert` html attribute for closed drawer instead of `display: none;` and `aria-hidden`

### Patch Changes

- 1efa0916: Fix: Avoid double border for `<Table.Row content>` #731
- 660407c2: fix: Disable autofocus on initial item when opening mobile Nav
- Updated dependencies [f39613ed]
- Updated dependencies [29572cca]
  - @intility/bifrost-css@4.1.0

## 4.0.2 - 2024-04-10

### Patch Changes

- 79b9ab5d: Fix deep import paths for `useNav` and `useFloatingMessage`

## 4.0.1 - 2024-04-05

### Patch Changes

- 611f82ca: Removed unnecessary files from npm package output.
- Updated dependencies [bb9e438b]
- Updated dependencies [611f82ca]
  - @intility/bifrost-css@4.0.1

## 4.0.0 - 2024-04-03

### Major Changes

- Removed dependencies `react-modal`, `react-animate-height`, `react-select`,
  `react-datepicker`, and `prop-types` from `@intility/bifrost-react`
  - Removed components `<Select>` and `<DatePicker>` from
    `@intility/bifrost-react`
  - 5c7ba5a4: New packages `@intility/bifrost-react-select` and
    `@intility/bifrost-react-datepicker`
- Removed `setTheme` method from deprecated `useTheme()` hook.
- 3f3af703: `<Button type>` prop now defaults to `"button"` (previously
  `"submit"`)
  - If you're using a bifrost `<Button>` inside a `<form>` (listening to the
    `onSubmit` event), and want it to submit the form, you now need to explicitly
    set `<Button type="submit">`
- `<Breakpoint>` rewritten from scratch.
  - No longer relies on `matchMedia` browser API (making it server-side
    friendly)
  - Will now always render its child content to the DOM, and show/hide it with
    [breakpoint CSS classes](/css/breakpoints)
  - Introduces a `<div>` wrapper.
  - We still recommend using [breakpoint CSS classes](/css/breakpoints) instead
- `<Modal>` rewritten from scratch, using brower native `<dialog>` element.
  - 81af701b: `fromBottom` prop removed, use `<Drawer position='bottom'>`
    instead.
    - Drawer with `position="buttom"` should not disable main scroll.
  - ae6a87d3: Refactor `<Modal>` component close props:
    - `noCloseButton` prevents rendering an "X" close button
    - `noCloseOnOverlayClick` prevents closing on overlay click (previously
      `shouldCloseOnOverlayClick`)
    - `noCloseOnEsc` prevents closing on ESC keypress (previously
      `shouldCloseOnEsc`)
    - removed `noClose` prop from previous beta prerelease
- `<SlideDown>` rewritten from scratch
  - Will now always render its child content to the DOM, and hide/transition
    with CSS classes [`.bf-expand` and `.bf-expand-closed`](/css/expand).
  - Uses a
    [css trick](https://css-tricks.com/css-grid-can-do-auto-height-transitions)
    that does not allow `padding` on the container. Create a child element with
    `padding` if needed.
  - Used internally by `<Message expandable>`, `<Accordion.Item>`,
    `<Table.Row content>` and `<Nav.Group>`
- 19500ce7: Removed all internal `localStorage` usage, `<Bifrost>` component is
  now strictly authorative
- 81af701b: New `position="bottom"` prop for `<Drawer>`
- 6b355639: New styling for inputs, now always outlined. Removed `variant` prop
  from `<Input>`.
- 3785f8d6: New `package.json` definitions, updated import paths
  - Allows deep imports (incl. TypeScript definitions)  
    ex: `import Accordion from '@intility/bifrost-react/Accordion'`
  - Support for React Server Components (RSC) and Server-Side Rendering (SSR or
    SSG)
  - Dropped support for CJS (only shipped in ES Module format, meaning
    `require('@intility/bifrost-react')` will not work, only `import` or
    `import()`)
  - 165904af: Hooks can be imported from `/hooks/*`
- Removed margins from block level typograpy classes
  - `.bf-h1`
  - `.bf-h2`
  - `.bf-h3`
  - `.bf-h4`
  - `.bf-h5`
  - `.bf-h6`
  - `.bf-p`
  - `.bf-ul`
  - `.bf-ol`
  - `.bf-li`
- Removed all `propTypes` in favor of TypeScript with JSDoc comments

### Minor Changes

- Deprecated ~~`icon`~~ and ~~`rightIcon`~~ props for `<Button>` (Use nested
  `<Icon>` instead: `<Button><Icon /> Click me</Button>`)
- Deprecated the (potentially confusing) `l` in `bfl-*` for:
  - `.bf-border` and `--bf-border`
  - `.bf-padding` and `--bf-box-padding`
  - `.bf-page-padding` and `--bf-page-padding`
  - `.bf-autocol`, `--bf-autocol-width`, and `--bf-autocol-gap`
  - The old names (like `.bfl-border`) are aliased and should still work, but
    might get removed in a future release.
- Deprecated ~~`theme`~~ prop from `<Bifrost>` component.
  - Apply theme class names `.bf-darkmode` and `.bf-lightmode` on root element
    (`<html>`) instead.
- New `useApplyTheme()` helper hook for applying a theme class to the root.
  - Only use in a single-page app, for SSR/RSC/SSG (like Next.js) you may have
    direct control over the root `<html>` element.
  - `useApplyTheme("dark")` applies `.bf-darkmode` class to `<html>`
  - `useApplyTheme("light")` applies `.bf-lightmode` class to `<html>`
  - `useApplyTheme("system")` does not apply any class (bifrost will follow
    device setting)
- `<Message>` components uses new (solid) default icons, you may prefer to
  pass in font awesome pro icons to the `icon` prop instead.
- `<Drawer>` with `overlay` (or fullscreen mobile) should disable scroll on root
  element instead of `<body>`, like the mobile `<Nav>` menu does.
  - Drawer content padding should now match `.bf-page-padding`.
- `<Accordion>` HTML structure and styling
  - Angle icon moved left for styled variant
  - No text-decoration on hover
- `<Message>` styling changes, angle icon moved left + minor tweaks. #719
- All form fields (`<Input>`, `<TextArea>`, `<Select>`, `<DatePicker>`, and
  `<FieldGroup>`) now have an `1px` outline instead of a `2px` underline
- Top nav logo color changed to neutral `base-c` and given a proper keyboard
  focus state.
- Slight tweaks to `base` and `attn` color values. #711 & #723
- New `position="bottom"` prop for `<Drawer>`
- b9a6353b: New classes for single edge bifrost default border:
  - `.bf-border-top`
  - `.bf-border-right`
  - `.bf-border-bottom`
  - `.bf-border-left`
- New CSS classes for rendering content for _either_ dark or light mode
  _exclusively_:
  - `.bf-dark-only` will be hidden (`display: none`) when in light mode
  - `.bf-light-only` will be hidden in dark mode
- New `.bf-elements` CSS class to apply typography CSS without margins
  (`.bf-content` does the same, but _with margins_)
- New standard values for `border-radius`
  - CSS Variables
    - `--bf-radius-none` = 0px
    - `--bf-radius-xs` = 4px
    - `--bf-radius-s` = 8px
    - `--bf-radius` or `--bf-radius-m` = 12px
    - `--bf-radius-l` = 16px
    - `--bf-radius-xl` = 24px
    - `--bf-radius-full` = 9999px
  - Corresponding CSS helper classes
    - `.bf-radius-xs` applies 4px `border-radius`
    - `.bf-radius-s` applies 8px `border-radius`
    - `.bf-radius` or `.bf-radius-m` applies 12px `border-radius`
    - `.bf-radius-l` applies 16px `border-radius`
    - `.bf-radius-xl` applies 24px `border-radius`
    - `.bf-radius-full` applies 9999px `border-radius`
  - Deprecated old border radius classes and variable
    - ~~`--bfl-border-radius`~~ use `--bf-radius-xs` instead.
    - ~~`.bfl-border-radius`~~ and ~~`.bf-border-radius`~~, use `.bf-radius-xs`
      instead.
  - All `border-radius` values updated to use new `--bf-radius-*` variables.
- New [`<Inline>`](/react/inline) component for inline layouts
  - Places its child elements on same line with a `8px` gap default
  - Uses `.bf-inline` CSS class
  - Use `<Inline.Separator />` as a child to push its siblings away
    - Alternatively use `.bf-inline-separator` CSS class
  - Use `<Inline.Stretch>` to stretch its own nested child element.
    - `<Inline.Stretch><Button>Stretched button</Button></Inline.Stretch>`
    - Alternatively use `.bf-inline-stretch` CSS class
      - `<Button className="bf-inline-stretch">Stretched button</Button>`
- 7f1969b7: New `fullTooltip` prop for `<FormatDate>` displays full date and
  time in tooltip even if `show` is set to `date` or `time`
- 6edfa7a4: Improve accessibility and keyboard navigation for `<Nav>` component
  #441
  - New "Skip to content" button for keyboard users
  - Trap focus inside mobile nav menu when open, with a close button for
    keyboard users
  - Added missing `aria` attributes
- cc16df41: `<Tooltip>` DOM node is now appended to `parentNode` by default, in
  order to work correctly when used inside a `<Modal>`. #722  
  [Read more about appendTo at tippyjs docs](https://atomiks.github.io/tippyjs/v6/all-props/#appendto).
- 6b355639: New `<Accordion>` styling and DOM structure
  - New `buttonProps` prop for `<Accordion.Item>`, allows customizing the
    underlying `<button>` element
- 9814ef52: New `useDateTimeFormatter()` hook for formatting date and/or time.
  - Follows the locale passed to `<Bifrost locale>`
  - Replaces `dateFormat()` and `timeFormat()` (now marked as deprecated)
  - Returns a function that accepts an object parameter with same API as
    `<FormatDate>`:
    - `show`: either "date" (default), "time", or "datetime"
    - `date`: an ISO formatted date string, or a `Date` objet
    - `locale`: (optional) override the default
      [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
    - `options` (optional) override the default
      [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
- 62b02461: Include JSDoc comments in TypeScript Definition output
- 50b76941: Fix: Mobile landscape font size iOS #721
- 3849abc3: Optional padding (`noPadding` prop) and close button
  (`onRequestClose` no longer required) for `<Drawer>`
- be0a4fcf: `<Checkbox>` and `<CheckboxCard>` internal rewrite. Input wrapped
  in label, removes need for generated `id`. Props and usage unchanged.
- 56d60bd8: Add convenience aliases for some components:
  - `<SubmitButton>` is the same as `<Button type="submit" variant="filled">`
  - `<Radio>` is the same as `<Checkbox type="radio">`
  - `<Switch>` is the same as `<Checkbox type="switch">`
- ec250594: `<Drawer>` content padding should now match `.bf-page-padding`.
- 710afa88: New `<Message>` component styling #719

### Patch Changes

- `<Breadcrumbs.Item>` separator angle color and spacing changed to more closely
  match Figma component.
- Fixed bug that allowed users to focus elements inside a closed `<Drawer>` when
  using the `footer` prop.
- Updated mobile landscape font size for IOS. #721
- Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal` with
  `overscroll-behavior: contain` #678
- Add `safe-area` (mobile device screen "notch" or "dynamic island") padding for
  `.bf-drawer` #734
- Use `dvh` instead of `vh` for supporting browsers #733
- 5e25cfc0: Fix: `index.d.ts` files in package output should no longer strip out
  JSDoc comments for component props. Hovering over a prop in vscode should now
  properly display a description.
- 82b1a248: Fix: Allow clicks outside focus-trapped mobile `<Nav>`
- 18c2b063: Allow `<SlideDown>` overflow when expanded
- 82ab21b5: Update `border-radius` values to use bifrost css variables
- 5504294e: Fix `<Drawer>` spacing when no close button
- 14a9b64b: Fix: `<Grid.Span cols>` prop should now properly default to `1`
- 1076f2cb: Fix: internal `<button>`s are now `type="button"` and should no
  longer trigger a submit if wrapped in `<form>`
- 8263586d: Fix: allow `dist/*` css import
- 7db473c6: Fixed bug that allowed focus inside a closed `<Drawer>` when using
  `footer` prop

## [3.12.0] - 2023-09-28

### Added

- Added support for swedish `svSE` locale and date format.

### Fixed

- `useUniqueId` should no longer cause warnings when attempting to build projects using pre-18 react

## [3.11.0] - 2023-08-24

### Changed

- [`<Nav>`](#/Components/Navigation/Nav) styling changed, mobile and tablet menu items are now styled same as desktop sidebar.

### Fixed

- [`<Table.Row>`](#/Components/Interactive/Table) with `content` will now correctly span all available columns. !446
- [`<Checkbox>`](#/Components/Inputs/Checkbox) and [`<CheckboxCard>`](#/Components/Inputs/CheckboxCard) should now render correct state even without `checked` prop (useful if used inside a `<form>`, for instance). !450
- Ids generated under the hood by Bifrost components will now use `useId` when on React 18, giving better SSR support
- Open Sans and Satoshi font family names are now read from variables (`--font-open-sans` and `--font-satoshi`), allowing usage of NextJS font system
- Mobile nav menu should now correctly prevent main browser scroll while open (even for first toggle).
- [`<FloatingArea>`](#/Components/Utility/FloatingArea) should be positioned correctly even if `body` has `overflow: scroll` styling (don't do this)

## [3.10.0] - 2023-06-07

### Changed

- Cleaned up a lot of potential CSS issues (with help from [`stylelint`](https://stylelint.io/)). #684
- [`<Select>`](#/Components/Inputs/Select) now displays current selection (for single value) in input field while opened.
- Added screen reader accessible label for [`<Modal>`](#/Components/Interactive/Modal) and [`<Drawer>`](#/Components/Interactive/Drawer) close button. !443

### Fixed

- Icon files in `/es/assets` directory of the package output should now correctly be ES module format. #688
- Updated [`react-datepicker`](https://reactdatepicker.com/) dependency to version [`^4.12.0`](https://github.com/Hacker0x01/react-datepicker/releases/tag/v4.12.0) which should fix timepicker issue. #620
- [`<Select>`](#/Components/Inputs/Select) and other scrollable elements should no longer get extra padding when used inside [`<Drawer>`](#/Components/Interactive/Drawer). #690

## [3.9.0] - 2023-05-05

### Added

- New prop `footer` for [`<Drawer>`](#/Components/Interactive/Drawer) provides a fixed (non-scrollable) area at the bottom of the drawer. #606

### Fixed

- Using [`<Select>`](#/Components/Inputs/Select) with grouped options should no longer produce an error about ":first-child" CSS. #682
- `<Tabs.Item content>` prop type should now work properly, even with latest react types. Refactored all component prop types to avoid potential conflicts with any global `@types/react` HTML attributes. #683

## [3.8.3] - 2023-04-25

### Fixed

- Downgraded [`react-datepicker`](https://reactdatepicker.com/) dependency to version `4.8.0` since it's [currently the latest version with a working timepicker](https://github.com/Hacker0x01/react-datepicker/issues/3952) (hopefully temporarily). #679

## [3.8.2] - 2023-04-21

### Fixed

- [`<Dropdown>`](#/Components/Interactive/Dropdown) padding moved inside its scrollable area. #671
- Close button for [`<Modal>`](#/Components/Interactive/Modal) and [`<Drawer>`](#/Components/Interactive/Drawer) should now render correctly for