braid-design-system 33.10.0 → 33.10.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # braid-design-system
 
+## 33.10.1
+
+### Patch Changes
+
+- **useToast:** Clean up internal refactor ([#1837](https://github.com/seek-oss/braid-design-system/pull/1837))
+
+- **Dialog, Drawer:** Refactor layout, ensure content area is the full height ([#1834](https://github.com/seek-oss/braid-design-system/pull/1834))
+
+  This change allows you to spread content to the bottom of a `Drawer`, for example with a `vertical` direction `Spread`.
+
+- Ensure focus rings are consistent across components ([#1828](https://github.com/seek-oss/braid-design-system/pull/1828))
+
+  Aligns a few edge cases where focus rings were not consistent due to elements or aria roles not captured by the reset.
+
+- **BraidTestProvider:** Align mock with real IntersectionObserver API ([#1837](https://github.com/seek-oss/braid-design-system/pull/1837))
+
+- **Table:** Ensure `alignY` prop is applied consistently across browsers ([#1832](https://github.com/seek-oss/braid-design-system/pull/1832))
+
+  Fixes an issue where setting the `alignY` prop to `top` would not apply the `vertical-align` CSS property — instead falling through to our CSS reset which sets `vertical-align: baseline` (rendering inconsistently across browsers).
+
 ## 33.10.0
 
 ### Minor Changes
@@ -21,7 +41,6 @@
   **MIGRATION GUIDE:**
 
   For styling the focus ring via `Box`:
-
   1. Remove usage of `outline="none"` and `boxShadow="outlineFocus"`
   2. Refer to [`focus outlines`] for guidance on leveraging Braid's focus outline styles.
 
@@ -1024,7 +1043,6 @@ See full changelog below 👇
 - Standardise `disabled` & `critical` state across form fields ([#1564](https://github.com/seek-oss/braid-design-system/pull/1564))
 
   Improves the consistency of form fields when combining both `disabled` and `critical` tone, which includes:
-
   - Hiding `critical` borders
   - Hiding `message` and not reserving space for it unless explicitly providing the `reserveMessageSpace` prop.
 
@@ -1656,7 +1674,6 @@ See full changelog below 👇
   Our different approach to using colour has seen links dialled back to compete less with other messaging and CTAs.
 
   This affects the following usages across the system:
-
   - `vars.foregroundColor.link`
   - `Text` (using `tone="link"`)
   - `TextLink` and (`TextLinkButton`)
@@ -2468,7 +2485,6 @@ For more detail on the specific changes in this release, please read on.
 - **Tab, Tabs:** Updated visual design ([#1180](https://github.com/seek-oss/braid-design-system/pull/1180))
 
   The appearance of a `Tab` has been updated. Changes include:
-
   - Tab button use `regular` text weight
   - Hover state of inactive tab toggles `neutral` tone instead of underline
   - Active tab indicator underlines content only, without the horizontal gutter and animates between tabs
@@ -3508,7 +3524,6 @@ For more detail on the specific changes in this release, please read on.
 
   **New foregrounds**
   The following foregrounds are now available on the `vars.foregroundColor` theme object:
-
   - `cautionLight`
   - `infoLight`
   - `linkLight`
@@ -3769,12 +3784,10 @@ For more detail on the specific changes in this release, please read on.
   **TOKEN CHANGES**
 
   **New**
-
   - **backgroundColor:** `surface`, `neutralSoft`
   - **borderColor:** `neutral`, `neutralInverted`, `neutralLight`
 
   **Removed**
-
   - **backgroundColor:** `card`, `formAccentDisabled`, `input`, `inputDisabled`, `selection`
   - **borderColor:** `formHover`, `standard`, `standardInverted`
 
@@ -3868,7 +3881,6 @@ For more detail on the specific changes in this release, please read on.
 
   **New backgrounds**
   The following backgrounds are now available:
-
   - `neutralActive`
   - `neutralHover`
   - `neutralSoftActive`
@@ -3876,7 +3888,6 @@ For more detail on the specific changes in this release, please read on.
 
   **New boxShadows**
   The following box shadows are now available:
-
   - `borderBrandAccentLightLarge`
   - `borderCriticalLightLarge`
   - `borderFormAccentLight`
@@ -3886,7 +3897,6 @@ For more detail on the specific changes in this release, please read on.
 
   **New boxShadows**
   The following box shadows are now available:
-
   - `borderBrandAccentLightLarge`
   - `borderCriticalLightLarge`
   - `borderFormAccentLight`
@@ -3900,7 +3910,6 @@ For more detail on the specific changes in this release, please read on.
 
   **New backgrounds**
   The following backgrounds are now available on the `vars.backgroundColor` theme object:
-
   - `neutralActive`
   - `neutralHover`
   - `neutralSoftActive`
@@ -3908,7 +3917,6 @@ For more detail on the specific changes in this release, please read on.
 
   **New borderColors**
   The following border colors are now available on the `vars.borderColor` theme object:
-
   - `brandAccentLight`
   - `criticalLight`
   - `formAccentLight`
@@ -3996,7 +4004,6 @@ For more detail on the specific changes in this release, please read on.
 - **Box:** Add new background and border colours ([#983](https://github.com/seek-oss/braid-design-system/pull/983))
 
   New `background` values:
-
   - `brandAccentSoft`
   - `brandAccentSoftActive`
   - `brandAccentSoftHover`
@@ -4008,7 +4015,6 @@ For more detail on the specific changes in this release, please read on.
   - `formAccentSoftHover`
 
   New `boxShadow` values:
-
   - `borderCautionLight`
   - `borderCriticalLight`
   - `borderInfoLight`
@@ -4016,7 +4022,6 @@ For more detail on the specific changes in this release, please read on.
   - `borderPromoteLight`
 
 - **atoms:** Add new `boxShadow` values: ([#983](https://github.com/seek-oss/braid-design-system/pull/983))
-
   - `borderCautionLight`
   - `borderCriticalLight`
   - `borderInfoLight`
@@ -4026,7 +4031,6 @@ For more detail on the specific changes in this release, please read on.
 - **vars:** Add new background and border colours ([#983](https://github.com/seek-oss/braid-design-system/pull/983))
 
   New `backgroundColor` values:
-
   - `brandAccentSoft`
   - `brandAccentSoftActive`
   - `brandAccentSoftHover`
@@ -4038,7 +4042,6 @@ For more detail on the specific changes in this release, please read on.
   - `formAccentSoftHover`
 
   New `borderColor` values:
-
   - `cautionLight`
   - `criticalLight`
   - `infoLight`
@@ -4116,7 +4119,6 @@ For more detail on the specific changes in this release, please read on.
 - 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' }
@@ -4255,7 +4257,6 @@ For more detail on the specific changes in this release, please read on.
 - 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+
@@ -4272,7 +4273,6 @@ For more detail on the specific changes in this release, please read on.
 - 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`
@@ -4282,16 +4282,13 @@ For more detail on the specific changes in this release, please read on.
   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`
 
@@ -4495,7 +4492,6 @@ For more detail on the specific changes in this release, please read on.
   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
@@ -5543,13 +5539,11 @@ For more detail on the specific changes in this release, please read on.
   The following z-index palette is now available on `Box`:
 
   **Local stacking**
-
   - `0`
   - `1`
   - `2`
 
   **Global stacking**
-
   - `"dropdownBackdrop"`
   - `"dropdown"`
   - `"sticky"`
@@ -5673,7 +5667,6 @@ For more detail on the specific changes in this release, please read on.
 - Add `List` component ([#710](https://github.com/seek-oss/braid-design-system/pull/710))
 
   `List` serves as a replacement for the `BulletList` and `Bullet` components which adds the following improvements:
-
   - Support for numbers and alpha characters as bullets
   - Support for custom start positions in number/alpha lists
   - Rich content support, e.g. list items with multiple paragraphs, nested lists, etc.
@@ -5738,7 +5731,6 @@ For more detail on the specific changes in this release, please read on.
   The `_LEGACY_SPACE_` prop was provided to support consumers migrating to [`v14`](https://github.com/seek-oss/braid-design-system/releases/tag/v14.0.0) when the white space cropping and layout components were originally introduced. This has now been removed to allow us to further improve on our approach.
 
   Migrating off this prop will require consumers to perform the following steps:
-
   - Remove the usage of `_LEGACY_SPACE_` on a component
   - Conduct a visual review of the impact (component will appear closer to neighbouring elements)
   - Use existing layout components, e.g. `Stack`, to define/control the reintroduction of the desired space.
@@ -5823,7 +5815,6 @@ For more detail on the specific changes in this release, please read on.
 - **`seekBusiness` theme:** Inherit from new `apac` theme rather than the deprecated `seekAnz` theme ([#694](https://github.com/seek-oss/braid-design-system/pull/694))
 
   Just like the migration from `seekAnz` to `apac`, the visual changes are as follows:
-
   - The body background has changed from `#eeeeee` to `#f5f6f8`.
   - All grey colours now have a hint of blue.
   - Buttons and form fields have decreased in height from `48px` to `44px`.
@@ -5854,7 +5845,6 @@ For more detail on the specific changes in this release, please read on.
   This component serves as a replacement for `ToggleContent` from [SEEK Style Guide.](https://github.com/seek-oss/seek-style-guide)
 
   **SEEK STYLE GUIDE MIGRATION GUIDE**
-
   - `ToggleContent` has been renamed to `Disclosure`.
   - The `onShowMore` prop has been renamed to `onToggle`.
   - The spacing around the button has changed to follow [Braid's layout guidelines.](https://seek-oss.github.io/braid-design-system/foundations/layout) Design review is recommeded.
@@ -5895,7 +5885,6 @@ For more detail on the specific changes in this release, please read on.
   Consumers of the `seekAnz` theme are under no immediate pressure to migrate and both themes will be provided for the forseeable future. For now, this theme is aimed at those teams that are explicitly wanting to adopt newer design standards.
 
   The visual changes to `seekAnz` are as follows:
-
   - The body background has changed from `#eeeeee` to `#f5f6f8`.
   - All grey colours now have a hint of blue.
   - Buttons and form fields have decreased in height from 48px to 44px.
@@ -5938,7 +5927,6 @@ For more detail on the specific changes in this release, please read on.
 - MonthPicker: Support custom month and year labels ([#672](https://github.com/seek-oss/braid-design-system/pull/672))
 
   To support internationalisation, you can now pass the following props to `MonthPicker`:
-
   - **monthLabel** (`string`)
   - **yearLabel** (`string`)
   - **monthNames** (`string[]`)
@@ -6120,7 +6108,6 @@ For more detail on the specific changes in this release, please read on.
 - Improve field border contrast ratio ([#638](https://github.com/seek-oss/braid-design-system/pull/638))
 
   To improve accessibility, field borders have been darkened for the following themes:
-
   - `seekAnz`
   - `seekBusiness`
   - `seekUnifiedBeta`
@@ -6329,7 +6316,6 @@ For more detail on the specific changes in this release, please read on.
   The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.
 
   Affects the following components:
-
   - PasswordField: visibility toggle button
   - TextField: clear button
   - Autosuggest: clear button
@@ -6343,7 +6329,6 @@ For more detail on the specific changes in this release, please read on.
   Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.
 
   Affects the following components:
-
   - PasswordField: visibility toggle button
   - TextField: clear button
   - Autosuggest: clear button
@@ -6553,7 +6538,6 @@ For more detail on the specific changes in this release, please read on.
 - Drop lodash usage to decrease bundle size. ([#585](https://github.com/seek-oss/braid-design-system/pull/585))
 
   This directly affects `MonthPicker` and any components using the `data` prop:
-
   - All field components
   - OverflowMenu
   - MenuRenderer
@@ -6610,7 +6594,6 @@ For more detail on the specific changes in this release, please read on.
   In order to make your custom link component available for any type of link (not just usages of `TextLink`), this release introduces a new `Link` component which renders an unstyled `a` tag by default.
 
   **BREAKING CHANGES**
-
   - `TextLink` now requires an `href` prop. Even though this is unlikely to affect anyone (a `TextLink` without an `href` isn't terribly useful), this is still technically a breaking change.
 
     However, if you find an instance of `TextLink` that you think _shouldn't_ have an `href`, this is a sign that it's not _actually_ a link and you should use a [`TextLinkRenderer`](https://seek-oss.github.io/braid-design-system/components/TextLinkRenderer) instead. Unfortunately, because there's no way for us to know the semantics of your usage ahead of time, we're unable to provide a migration guide, so you'll need to be mindful of how this might impact accessibility.
@@ -6737,7 +6720,6 @@ For more detail on the specific changes in this release, please read on.
 - Add customisable `MenuRenderer` component ([#514](https://github.com/seek-oss/braid-design-system/pull/514))
 
   **BREAKING CHANGES**
-
   - Rename `OverflowMenuItem` to `MenuItem`.
   - Removed `type="link"` from `OverflowMenuItem` due to an accessibility issue with the approach (based on review of consumer usage, it did not seem to be used).
 
@@ -6746,7 +6728,6 @@ For more detail on the specific changes in this release, please read on.
   **`MenuRenderer`**
 
   Encapsulates all the behaviours of an accessible menu button, allowing consumers to define a custom `trigger` to open the menu. The trigger function receives two arguments:
-
   1. Props required for accessibility, including mouse/keyboard interactions
   2. Menu state object containing the `open` state.
 
@@ -6807,7 +6788,6 @@ For more detail on the specific changes in this release, please read on.
 - Only show focus rings on buttons for keyboard navigation. ([#526](https://github.com/seek-oss/braid-design-system/pull/526))
 
   This impacts the following components:
-
   - `Button`
   - `ButtonRenderer`
   - `OverflowMenu`
@@ -6854,5 +6834,4 @@ For more detail on the specific changes in this release, please read on.
 - 33139c8: Clone seekAnz theme to seekUnifiedBeta
 
   BREAKING CHANGE
-
   - `jobsDbRebrand` theme has been removed

package/dist/index.d.mts

@@ -2811,10 +2811,10 @@ interface TextProps extends TypographyProps {
 }
 declare const Text: ({ size: sizeProp, tone: toneProp, weight: weightProp, maxLines: maxLinesProp, baseline, ...typographyProps }: TextProps) => react.JSX.Element;
 
-declare const validTones$1: readonly ["neutral", "secondary"];
+declare const validTones: readonly ["neutral", "secondary"];
 interface AccordionContextValue {
     size?: TextProps['size'];
-    tone?: (typeof validTones$1)[number];
+    tone?: (typeof validTones)[number];
     weight?: TextProps['weight'];
 }
 
@@ -2831,12 +2831,13 @@ interface AccordionProps {
 declare const Accordion$1: ({ children, size, tone, weight, space: spaceProp, dividers, data, ...restProps }: AccordionProps) => react.JSX.Element;
 
 type ValueOrArray<T> = T | T[];
-declare const validTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
-type Tone$2 = (typeof validTones)[number];
-type BadgeWeight = 'strong' | 'regular';
+declare const validBadgeTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
+type Tone$2 = (typeof validBadgeTones)[number];
+declare const validBadgeWeights: readonly ["strong", "regular"];
+type Weight = (typeof validBadgeWeights)[number];
 interface BadgeProps {
     tone?: Tone$2;
-    weight?: BadgeWeight;
+    weight?: Weight;
     bleedY?: boolean;
     title?: string;
     children: ValueOrArray<string | number>;
@@ -2872,7 +2873,8 @@ declare const AccordionItem$1: ({ id, label, children, badge, size: sizeProp, to
 declare const buttonTones: readonly ["formAccent", "brandAccent", "critical", "neutral"];
 
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
-type ButtonSize = 'standard' | 'small';
+declare const buttonSizes: readonly ["standard", "small"];
+type ButtonSize = (typeof buttonSizes)[number];
 type ButtonTone = (typeof buttonTones)[number];
 type ButtonVariant = (typeof buttonVariants)[number];
 interface ButtonStyleProps {
@@ -3754,10 +3756,12 @@ interface StrongProps {
 }
 declare const Strong: ({ children, data, id, ...restProps }: StrongProps) => react.JSX.Element;
 
+declare const alignY: Record<"top" | "center", string>;
+
 interface TableProps {
     label: string;
     children: ReactNode;
-    alignY?: 'top' | 'center';
+    alignY?: keyof typeof alignY;
     data?: DataAttributeMap;
 }
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;

package/dist/index.d.ts

@@ -2811,10 +2811,10 @@ interface TextProps extends TypographyProps {
 }
 declare const Text: ({ size: sizeProp, tone: toneProp, weight: weightProp, maxLines: maxLinesProp, baseline, ...typographyProps }: TextProps) => react.JSX.Element;
 
-declare const validTones$1: readonly ["neutral", "secondary"];
+declare const validTones: readonly ["neutral", "secondary"];
 interface AccordionContextValue {
     size?: TextProps['size'];
-    tone?: (typeof validTones$1)[number];
+    tone?: (typeof validTones)[number];
     weight?: TextProps['weight'];
 }
 
@@ -2831,12 +2831,13 @@ interface AccordionProps {
 declare const Accordion$1: ({ children, size, tone, weight, space: spaceProp, dividers, data, ...restProps }: AccordionProps) => react.JSX.Element;
 
 type ValueOrArray<T> = T | T[];
-declare const validTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
-type Tone$2 = (typeof validTones)[number];
-type BadgeWeight = 'strong' | 'regular';
+declare const validBadgeTones: readonly ["promote", "info", "neutral", "positive", "caution", "critical"];
+type Tone$2 = (typeof validBadgeTones)[number];
+declare const validBadgeWeights: readonly ["strong", "regular"];
+type Weight = (typeof validBadgeWeights)[number];
 interface BadgeProps {
     tone?: Tone$2;
-    weight?: BadgeWeight;
+    weight?: Weight;
     bleedY?: boolean;
     title?: string;
     children: ValueOrArray<string | number>;
@@ -2872,7 +2873,8 @@ declare const AccordionItem$1: ({ id, label, children, badge, size: sizeProp, to
 declare const buttonTones: readonly ["formAccent", "brandAccent", "critical", "neutral"];
 
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
-type ButtonSize = 'standard' | 'small';
+declare const buttonSizes: readonly ["standard", "small"];
+type ButtonSize = (typeof buttonSizes)[number];
 type ButtonTone = (typeof buttonTones)[number];
 type ButtonVariant = (typeof buttonVariants)[number];
 interface ButtonStyleProps {
@@ -3754,10 +3756,12 @@ interface StrongProps {
 }
 declare const Strong: ({ children, data, id, ...restProps }: StrongProps) => react.JSX.Element;
 
+declare const alignY: Record<"top" | "center", string>;
+
 interface TableProps {
     label: string;
     children: ReactNode;
-    alignY?: 'top' | 'center';
+    alignY?: keyof typeof alignY;
     data?: DataAttributeMap;
 }
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;

package/dist/lib/components/Badge/Badge.cjs

@@ -13,7 +13,7 @@ const lib_components_Badge_defaultBadgeProps_cjs = require("./defaultBadgeProps.
 const lib_components_Badge_Badge_css_cjs = require("./Badge.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const validTones = [
+const validBadgeTones = [
   "promote",
   "info",
   "neutral",
@@ -52,7 +52,7 @@ const Badge = react.forwardRef(
     ...restProps
   }, ref) => {
     assert__default.default(
-      validTones.indexOf(tone) >= 0,
+      validBadgeTones.indexOf(tone) >= 0,
       `Badge tone of "${tone}" is not valid.`
     );
     assert__default.default(

package/dist/lib/components/Badge/Badge.mjs

@@ -10,7 +10,7 @@ import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
 import { useDefaultBadgeProps } from "./defaultBadgeProps.mjs";
 import { inline, verticalPadding } from "./Badge.css.mjs";
-const validTones = [
+const validBadgeTones = [
   "promote",
   "info",
   "neutral",
@@ -49,7 +49,7 @@ const Badge = forwardRef(
     ...restProps
   }, ref) => {
     assert(
-      validTones.indexOf(tone) >= 0,
+      validBadgeTones.indexOf(tone) >= 0,
       `Badge tone of "${tone}" is not valid.`
     );
     assert(

package/dist/lib/components/BraidTestProvider/BraidTestProvider.cjs

@@ -1,4 +1,7 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
 const jsxRuntime = require("react/jsx-runtime");
 const lib_themes_index_cjs = require("../../themes/index.cjs");
@@ -12,21 +15,21 @@ if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navi
   });
   class MockResizeObserver {
     constructor() {
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
+      __publicField(this, "observe", noop);
+      __publicField(this, "unobserve", noop);
+      __publicField(this, "disconnect", noop);
     }
   }
   window.ResizeObserver = MockResizeObserver;
   class MockIntersectionObserver {
     constructor() {
-      this.root = null;
-      this.rootMargin = "";
-      this.thresholds = [];
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
-      this.takeRecords = noop;
+      __publicField(this, "root", null);
+      __publicField(this, "rootMargin", "");
+      __publicField(this, "thresholds", []);
+      __publicField(this, "observe", noop);
+      __publicField(this, "unobserve", noop);
+      __publicField(this, "disconnect", noop);
+      __publicField(this, "takeRecords", () => []);
     }
   }
   window.IntersectionObserver = MockIntersectionObserver;

package/dist/lib/components/BraidTestProvider/BraidTestProvider.mjs

@@ -1,3 +1,6 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
 import { jsx } from "react/jsx-runtime";
 import { themes } from "../../themes/index.mjs";
@@ -11,21 +14,21 @@ if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navi
   });
   class MockResizeObserver {
     constructor() {
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
+      __publicField(this, "observe", noop);
+      __publicField(this, "unobserve", noop);
+      __publicField(this, "disconnect", noop);
     }
   }
   window.ResizeObserver = MockResizeObserver;
   class MockIntersectionObserver {
     constructor() {
-      this.root = null;
-      this.rootMargin = "";
-      this.thresholds = [];
-      this.observe = noop;
-      this.unobserve = noop;
-      this.disconnect = noop;
-      this.takeRecords = noop;
+      __publicField(this, "root", null);
+      __publicField(this, "rootMargin", "");
+      __publicField(this, "thresholds", []);
+      __publicField(this, "observe", noop);
+      __publicField(this, "unobserve", noop);
+      __publicField(this, "disconnect", noop);
+      __publicField(this, "takeRecords", () => []);
     }
   }
   window.IntersectionObserver = MockIntersectionObserver;

package/dist/lib/components/Button/Button.css.cjs

@@ -10,7 +10,9 @@ fileScope.setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-
 const root = css.style({
   textDecoration: "none",
   // Necessary to overwrite Safari's default value for 'align-items' in 'button' elements (which is 'flex-start')
-  alignItems: "stretch"
+  alignItems: "stretch",
+  // Necessary to overwrite browser default for 'a' elements (which is '1px'), keeping Button & ButtonLink uniform.
+  outlineOffset: 0
 }, "root");
 const forceActive = css.style({}, "forceActive");
 const activeAnimation = css.style({

package/dist/lib/components/Button/Button.css.mjs

@@ -9,7 +9,9 @@ setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-system");
 const root = style({
   textDecoration: "none",
   // Necessary to overwrite Safari's default value for 'align-items' in 'button' elements (which is 'flex-start')
-  alignItems: "stretch"
+  alignItems: "stretch",
+  // Necessary to overwrite browser default for 'a' elements (which is '1px'), keeping Button & ButtonLink uniform.
+  outlineOffset: 0
 }, "root");
 const forceActive = style({}, "forceActive");
 const activeAnimation = style({

package/dist/lib/components/ButtonIcon/ButtonIcon.cjs

@@ -81,7 +81,6 @@ const ButtonIconContent = react.forwardRef(
               variant,
               tone,
               radius: "full",
-              keyboardFocusable: typeof tabIndex === "undefined" || tabIndex >= 0,
               forceActive: ariaExpanded === "true" || ariaExpanded === true
             }
           ),

package/dist/lib/components/ButtonIcon/ButtonIcon.mjs

@@ -78,7 +78,6 @@ const ButtonIconContent = forwardRef(
               variant,
               tone,
               radius: "full",
-              keyboardFocusable: typeof tabIndex === "undefined" || tabIndex >= 0,
               forceActive: ariaExpanded === "true" || ariaExpanded === true
             }
           ),

package/dist/lib/components/ButtonLink/ButtonLink.cjs

@@ -30,6 +30,7 @@ const ButtonLink = react.forwardRef(
       lib_components_Box_Box_cjs.Box,
       {
         component: LinkComponent,
+        outline: "focus",
         ref,
         ...restProps,
         ...root,

package/dist/lib/components/ButtonLink/ButtonLink.mjs

@@ -29,6 +29,7 @@ const ButtonLink = forwardRef(
       Box,
       {
         component: LinkComponent,
+        outline: "focus",
         ref,
         ...restProps,
         ...root,

package/dist/lib/components/Pagination/Pagination.cjs

@@ -13,7 +13,6 @@ const lib_components_Pagination_Pagination_css_cjs = require("./Pagination.css.c
 const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const borderRadius = "standard";
 const PageNav = ({
   label,
   direction
@@ -37,7 +36,7 @@ const PageNav = ({
           {
             component: "span",
             background: "formAccentSoft",
-            borderRadius,
+            borderRadius: lib_components_Pagination_Pagination_css_cjs.borderRadius,
             transition: "fast",
             className: lib_components_Pagination_Pagination_css_cjs.background
           }
@@ -82,7 +81,7 @@ const Page = ({ number, current }) => {
             component: "span",
             background: current ? "formAccent" : "formAccentSoft",
             transition: current ? void 0 : "fast",
-            borderRadius,
+            borderRadius: lib_components_Pagination_Pagination_css_cjs.borderRadius,
             className: [lib_components_Pagination_Pagination_css_cjs.background, current ? lib_components_Pagination_Pagination_css_cjs.current : void 0]
           }
         ),
@@ -90,7 +89,7 @@ const Page = ({ number, current }) => {
           lib_components_private_Overlay_Overlay_cjs.Overlay,
           {
             component: "span",
-            borderRadius,
+            borderRadius: lib_components_Pagination_Pagination_css_cjs.borderRadius,
             boxShadow: "borderFormAccent",
             className: {
               [lib_components_Pagination_Pagination_css_cjs.lightModeCurrentKeyline]: isLegacyTheme && parentBackground.lightMode !== "surface" && current,
@@ -161,6 +160,7 @@ const Pagination = ({
                 title: previousLabel,
                 "aria-hidden": !showPrevious,
                 tabIndex: !showPrevious ? -1 : void 0,
+                className: lib_components_Pagination_Pagination_css_cjs.focusRing,
                 children: /* @__PURE__ */ jsxRuntime.jsx(PageNav, { label: previousLabel, direction: "prev" })
               }
             )
@@ -184,6 +184,7 @@ const Pagination = ({
                   "aria-label": pageLabel(pageNumber),
                   "aria-current": current ? "page" : void 0,
                   title: pageLabel(pageNumber),
+                  className: lib_components_Pagination_Pagination_css_cjs.focusRing,
                   children: /* @__PURE__ */ jsxRuntime.jsx(Page, { number: pageNumber, current })
                 }
               )
@@ -211,6 +212,7 @@ const Pagination = ({
                 title: nextLabel,
                 "aria-hidden": !showNext,
                 tabIndex: !showNext ? -1 : void 0,
+                className: lib_components_Pagination_Pagination_css_cjs.focusRing,
                 children: /* @__PURE__ */ jsxRuntime.jsx(PageNav, { label: nextLabel, direction: "next" })
               }
             )

package/dist/lib/components/Pagination/Pagination.css.cjs

@@ -1,8 +1,18 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
 const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
 fileScope.setFileScope("src/lib/components/Pagination/Pagination.css.ts", "braid-design-system");
+const borderRadius = "standard";
+const focusRing = css.style([{
+  // Necessary to overwrite browser default for 'a' elements (which is '1px').
+  outlineOffset: 0
+}, lib_css_atoms_atoms_cjs.atoms({
+  display: "block",
+  outline: "focus",
+  borderRadius
+})], "focusRing");
 const hover = css.style({}, "hover");
 const lightModeCurrentKeyline = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
   lightMode: {
@@ -26,7 +36,9 @@ const background = css.style({
 }, "background");
 fileScope.endFileScope();
 exports.background = background;
+exports.borderRadius = borderRadius;
 exports.current = current;
 exports.darkModeCurrentKeyline = darkModeCurrentKeyline;
+exports.focusRing = focusRing;
 exports.hover = hover;
 exports.lightModeCurrentKeyline = lightModeCurrentKeyline;

package/dist/lib/components/Pagination/Pagination.css.mjs

@@ -1,7 +1,17 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
+import { atoms } from "../../css/atoms/atoms.mjs";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
 setFileScope("src/lib/components/Pagination/Pagination.css.ts", "braid-design-system");
+const borderRadius = "standard";
+const focusRing = style([{
+  // Necessary to overwrite browser default for 'a' elements (which is '1px').
+  outlineOffset: 0
+}, atoms({
+  display: "block",
+  outline: "focus",
+  borderRadius
+})], "focusRing");
 const hover = style({}, "hover");
 const lightModeCurrentKeyline = style(colorModeStyle({
   lightMode: {
@@ -26,8 +36,10 @@ const background = style({
 endFileScope();
 export {
   background,
+  borderRadius,
   current,
   darkModeCurrentKeyline,
+  focusRing,
   hover,
   lightModeCurrentKeyline
 };

package/dist/lib/components/Pagination/Pagination.mjs

@@ -8,9 +8,8 @@ import { Text } from "../Text/Text.mjs";
 import { Overlay } from "../private/Overlay/Overlay.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { paginate } from "./paginate.mjs";
-import { hover, background, current, darkModeCurrentKeyline, lightModeCurrentKeyline } from "./Pagination.css.mjs";
+import { focusRing, hover, background, borderRadius, current, darkModeCurrentKeyline, lightModeCurrentKeyline } from "./Pagination.css.mjs";
 import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
-const borderRadius = "standard";
 const PageNav = ({
   label,
   direction
@@ -158,6 +157,7 @@ const Pagination = ({
                 title: previousLabel,
                 "aria-hidden": !showPrevious,
                 tabIndex: !showPrevious ? -1 : void 0,
+                className: focusRing,
                 children: /* @__PURE__ */ jsx(PageNav, { label: previousLabel, direction: "prev" })
               }
             )
@@ -181,6 +181,7 @@ const Pagination = ({
                   "aria-label": pageLabel(pageNumber),
                   "aria-current": current2 ? "page" : void 0,
                   title: pageLabel(pageNumber),
+                  className: focusRing,
                   children: /* @__PURE__ */ jsx(Page, { number: pageNumber, current: current2 })
                 }
               )
@@ -208,6 +209,7 @@ const Pagination = ({
                 title: nextLabel,
                 "aria-hidden": !showNext,
                 tabIndex: !showNext ? -1 : void 0,
+                className: focusRing,
                 children: /* @__PURE__ */ jsx(PageNav, { label: nextLabel, direction: "next" })
               }
             )

package/dist/lib/components/Table/Table.css.cjs

@@ -42,9 +42,14 @@ css.globalStyle(`${tableSection}:not(${tableHeader}) > ${row} > ${headCell}:not(
 css.globalStyle(`${tableSection}:not(:first-child) > ${row}:first-child > ${cell}`, {
   borderTop: sectionBorder
 });
-const alignYCenter = css.style({
-  verticalAlign: "middle"
-}, "alignYCenter");
+const alignY = css.styleVariants({
+  center: {
+    verticalAlign: "middle"
+  },
+  top: {
+    verticalAlign: "top"
+  }
+}, "alignY");
 const nowrap = css.style({
   whiteSpace: "nowrap"
 }, "nowrap");
@@ -76,7 +81,7 @@ const showOnWide = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
   }
 }), "showOnWide");
 fileScope.endFileScope();
-exports.alignYCenter = alignYCenter;
+exports.alignY = alignY;
 exports.cell = cell;
 exports.headCell = headCell;
 exports.maxWidth = maxWidth;

package/dist/lib/components/Table/Table.css.mjs

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, createVar, globalStyle } from "@vanilla-extract/css";
+import { style, createVar, styleVariants, globalStyle } from "@vanilla-extract/css";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
 import { responsiveStyle } from "../../css/responsiveStyle.mjs";
 import { vars } from "../../themes/vars.css.mjs";
@@ -41,9 +41,14 @@ globalStyle(`${tableSection}:not(${tableHeader}) > ${row} > ${headCell}:not(:las
 globalStyle(`${tableSection}:not(:first-child) > ${row}:first-child > ${cell}`, {
   borderTop: sectionBorder
 });
-const alignYCenter = style({
-  verticalAlign: "middle"
-}, "alignYCenter");
+const alignY = styleVariants({
+  center: {
+    verticalAlign: "middle"
+  },
+  top: {
+    verticalAlign: "top"
+  }
+}, "alignY");
 const nowrap = style({
   whiteSpace: "nowrap"
 }, "nowrap");
@@ -76,7 +81,7 @@ const showOnWide = style(responsiveStyle({
 }), "showOnWide");
 endFileScope();
 export {
-  alignYCenter,
+  alignY,
   cell,
   headCell,
   maxWidth,

package/dist/lib/components/Table/TableCell.cjs

@@ -70,7 +70,7 @@ const Cell = react.forwardRef(
           [lib_components_Table_Table_css_cjs.softWidth]: softWidth,
           [lib_components_Table_Table_css_cjs.minWidth]: typeof minWidth !== "undefined",
           [lib_components_Table_Table_css_cjs.maxWidth]: hasMaxWidth,
-          [lib_components_Table_Table_css_cjs.alignYCenter]: tableContext.alignY === "center",
+          [lib_components_Table_Table_css_cjs.alignY[tableContext.alignY]]: true,
           [lib_components_Table_Table_css_cjs.showOnTablet]: !hideOnTablet && hideOnMobile,
           [lib_components_Table_Table_css_cjs.showOnDesktop]: !hideOnDesktop && (hideOnTablet || hideOnMobile),
           [lib_components_Table_Table_css_cjs.showOnWide]: !hideOnWide && (hideOnDesktop || hideOnTablet || hideOnMobile)

package/dist/lib/components/Table/TableCell.mjs

@@ -9,7 +9,7 @@ import { Inline } from "../Inline/Inline.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
 import { TableHeaderContext, TableRowContext, TableFooterContext, TableContext } from "./TableContext.mjs";
-import { maxWidthVar, minWidthVar, softWidthVar, showOnWide, showOnDesktop, showOnTablet, alignYCenter, maxWidth, minWidth, softWidth, nowrap, headCell, cell } from "./Table.css.mjs";
+import { maxWidthVar, minWidthVar, softWidthVar, showOnWide, showOnDesktop, showOnTablet, alignY, maxWidth, minWidth, softWidth, nowrap, headCell, cell } from "./Table.css.mjs";
 const resolveSoftWidth = (width) => {
   if (width === "content") {
     return "1%";
@@ -67,7 +67,7 @@ const Cell = forwardRef(
           [softWidth]: softWidth$1,
           [minWidth]: typeof minWidth$1 !== "undefined",
           [maxWidth]: hasMaxWidth,
-          [alignYCenter]: tableContext.alignY === "center",
+          [alignY[tableContext.alignY]]: true,
           [showOnTablet]: !hideOnTablet && hideOnMobile,
           [showOnDesktop]: !hideOnDesktop && (hideOnTablet || hideOnMobile),
           [showOnWide]: !hideOnWide && (hideOnDesktop || hideOnTablet || hideOnMobile)

package/dist/lib/components/TextLinkButton/TextLinkButton.cjs

@@ -45,6 +45,7 @@ const TextLinkButton = ({
       role: "button",
       tabIndex: tabIndex ?? 0,
       component: "span",
+      outline: "focus",
       onClick,
       onKeyDown: handleKeyboard,
       "aria-controls": ariaControls,

package/dist/lib/components/TextLinkButton/TextLinkButton.mjs

@@ -44,6 +44,7 @@ const TextLinkButton = ({
       role: "button",
       tabIndex: tabIndex ?? 0,
       component: "span",
+      outline: "focus",
       onClick,
       onKeyDown: handleKeyboard,
       "aria-controls": ariaControls,

package/dist/lib/components/Textarea/Textarea.cjs

@@ -117,6 +117,7 @@ const Textarea = react.forwardRef(
                   placeholder: !restProps.disabled ? placeholder : void 0,
                   spellCheck,
                   className: [lib_components_Textarea_Textarea_css_cjs.field, className],
+                  borderRadius,
                   ...fieldProps,
                   ref
                 }

package/dist/lib/components/Textarea/Textarea.mjs

@@ -116,6 +116,7 @@ const Textarea = forwardRef(
                   placeholder: !restProps.disabled ? placeholder : void 0,
                   spellCheck,
                   className: [field, className],
+                  borderRadius,
                   ...fieldProps,
                   ref
                 }

package/dist/lib/components/private/Modal/ModalContent.cjs

@@ -6,8 +6,6 @@ const lib_hooks_useFallbackId_cjs = require("../../../hooks/useFallbackId.cjs");
 const lib_components_Bleed_Bleed_cjs = require("../../Bleed/Bleed.cjs");
 const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
 const lib_components_ButtonIcon_ButtonIcon_cjs = require("../../ButtonIcon/ButtonIcon.cjs");
-const lib_components_Column_Column_cjs = require("../../Column/Column.cjs");
-const lib_components_Columns_Columns_cjs = require("../../Columns/Columns.cjs");
 const lib_components_Heading_Heading_cjs = require("../../Heading/Heading.cjs");
 const lib_components_PageBlock_PageBlock_cjs = require("../../PageBlock/PageBlock.cjs");
 const lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
@@ -109,9 +107,12 @@ const ModalContent = ({
                 noRelative: true,
                 forwardProps: true,
                 enabled: scrollLock,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
                   lib_components_Box_Box_cjs.Box,
                   {
+                    display: "flex",
+                    gap: "large",
+                    flexDirection: "column",
                     background: "surface",
                     borderRadius: modalRadius,
                     overflow: "auto",
@@ -125,7 +126,7 @@ const ModalContent = ({
                       position === "center" && lib_components_private_Modal_Modal_css_cjs.maxSize[position]
                     ],
                     ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: "large", children: [
+                    children: [
                       illustration ? /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: "medium", align: "center", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingX: "gutter", children: illustration }),
                         /* @__PURE__ */ jsxRuntime.jsx(
@@ -139,8 +140,8 @@ const ModalContent = ({
                             ref: headingRef
                           }
                         )
-                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "none", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { display: "flex", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { width: "full", minWidth: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
                           ModalContentHeader,
                           {
                             title,
@@ -151,10 +152,10 @@ const ModalContent = ({
                             ref: headingRef
                           }
                         ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { width: "touchable" }) })
+                        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { width: "touchable", flexShrink: 0, flexGrow: 0 })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children })
-                    ] })
+                    ]
                   }
                 )
               }

package/dist/lib/components/private/Modal/ModalContent.mjs

@@ -5,8 +5,6 @@ import { useFallbackId } from "../../../hooks/useFallbackId.mjs";
 import { Bleed } from "../../Bleed/Bleed.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
-import { Column } from "../../Column/Column.mjs";
-import { Columns } from "../../Columns/Columns.mjs";
 import { Heading } from "../../Heading/Heading.mjs";
 import { gutters } from "../../PageBlock/PageBlock.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
@@ -108,9 +106,12 @@ const ModalContent = ({
                 noRelative: true,
                 forwardProps: true,
                 enabled: scrollLock,
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxs(
                   Box,
                   {
+                    display: "flex",
+                    gap: "large",
+                    flexDirection: "column",
                     background: "surface",
                     borderRadius: modalRadius,
                     overflow: "auto",
@@ -124,7 +125,7 @@ const ModalContent = ({
                       position === "center" && maxSize[position]
                     ],
                     ...buildDataAttributes({ data, validateRestProps: restProps }),
-                    children: /* @__PURE__ */ jsxs(Stack, { space: "large", children: [
+                    children: [
                       illustration ? /* @__PURE__ */ jsxs(Stack, { space: "medium", align: "center", children: [
                         /* @__PURE__ */ jsx(Box, { paddingX: "gutter", children: illustration }),
                         /* @__PURE__ */ jsx(
@@ -138,8 +139,8 @@ const ModalContent = ({
                             ref: headingRef
                           }
                         )
-                      ] }) : /* @__PURE__ */ jsxs(Columns, { space: "none", children: [
-                        /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
+                      ] }) : /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
+                        /* @__PURE__ */ jsx(Box, { width: "full", minWidth: 0, children: /* @__PURE__ */ jsx(
                           ModalContentHeader,
                           {
                             title,
@@ -150,10 +151,10 @@ const ModalContent = ({
                             ref: headingRef
                           }
                         ) }),
-                        /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Box, { width: "touchable" }) })
+                        /* @__PURE__ */ jsx(Box, { width: "touchable", flexShrink: 0, flexGrow: 0 })
                       ] }),
                       /* @__PURE__ */ jsx(Fragment, { children })
-                    ] })
+                    ]
                   }
                 )
               }

package/dist/lib/components/useToast/ToastContext.cjs

@@ -2,7 +2,6 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const lib_components_BraidPortal_BraidPortal_cjs = require("../BraidPortal/BraidPortal.cjs");
-const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
 const lib_components_useToast_Toaster_cjs = require("./Toaster.cjs");
 let toastCounter = 0;
 const ToastControllerContext = react.createContext(null);
@@ -102,7 +101,6 @@ const ToastPortal = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidPortal_BraidPortal_cjs.BraidPortal, { container: toastElement, children });
 };
 const useToast = () => {
-  const { vanillaTheme } = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme();
   const addToast = react.useContext(ToastControllerContext);
   if (addToast === null) {
     throw new Error('No "ToastProvider" configured');
@@ -114,13 +112,12 @@ const useToast = () => {
       const dedupeKey = key ?? toastKey;
       addToast({
         ...rest,
-        vanillaTheme,
         toastKey,
         dedupeKey,
         shouldRemove: false
       });
     },
-    [vanillaTheme, addToast]
+    [addToast]
   );
 };
 exports.ToastProvider = ToastProvider;

package/dist/lib/components/useToast/ToastContext.mjs

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, createContext, Fragment, useCallback, useReducer, useState, useEffect } from "react";
 import { BraidPortal } from "../BraidPortal/BraidPortal.mjs";
-import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
 import { Toaster } from "./Toaster.mjs";
 let toastCounter = 0;
 const ToastControllerContext = createContext(null);
@@ -101,7 +100,6 @@ const ToastPortal = ({ children }) => {
   return /* @__PURE__ */ jsx(BraidPortal, { container: toastElement, children });
 };
 const useToast = () => {
-  const { vanillaTheme } = useBraidTheme();
   const addToast = useContext(ToastControllerContext);
   if (addToast === null) {
     throw new Error('No "ToastProvider" configured');
@@ -113,13 +111,12 @@ const useToast = () => {
       const dedupeKey = key ?? toastKey;
       addToast({
         ...rest,
-        vanillaTheme,
         toastKey,
         dedupeKey,
         shouldRemove: false
       });
     },
-    [vanillaTheme, addToast]
+    [addToast]
   );
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.10.0",
+  "version": "33.10.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -186,8 +186,7 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-typescript": "^7.20.13",
-    "@storybook/react": "7.6.20",
-    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/react-webpack5": "9.0.15",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
@@ -197,8 +196,9 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/babel__core": "^7.20.1",
+    "@types/gradient-parser": "^0.1.5",
     "@types/lodash.curry": "^4.1.9",
-    "@types/node": "^18.19.68",
+    "@types/node": "^22.16.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
@@ -210,18 +210,18 @@
     "babel-plugin-transform-remove-imports": "^1.7.0",
     "change-case": "^4.1.2",
     "cheerio": "1.0.0-rc.11",
-    "chromatic": "^12.2.0",
+    "chromatic": "^13.1.2",
     "fast-glob": "^3.3.2",
     "fs-extra": "^10.1.0",
-    "html-validate": "^9.7.0",
+    "html-validate": "^9.7.1",
     "playroom": "0.44.0",
     "prettier": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.12.1",
-    "sku": "14.7.0",
-    "storybook": "7.6.20",
+    "sku": "14.8.0",
+    "storybook": "9.0.15",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3",
     "@braid-design-system/source.macro": "1.0.0"
@@ -241,8 +241,8 @@
     "lint:prettier": "prettier --cache --list-different .",
     "lint:tsc": "tsc",
     "storybook": "storybook dev",
-    "storybook:build": "storybook build",
-    "storybook:chromatic": "chromatic --storybook-build-dir ./storybook-static --exit-zero-on-changes --exit-once-uploaded --auto-accept-changes master",
+    "storybook:build": "storybook build --stats-json",
+    "storybook:chromatic": "chromatic --only-changed --untraced './packages/!(braid-design-system)/**' --storybook-build-dir ./storybook-static --exit-zero-on-changes --exit-once-uploaded --auto-accept-changes master",
     "%skott": "skott --displayMode=file-tree --showCircularDependencies --no-trackTypeOnlyDependencies",
     "validate:src": "pnpm %skott src",
     "validate:dist": "pnpm %skott dist/index.mjs"