braid-design-system 34.6.0 → 34.6.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # braid-design-system
 
+## 34.6.2
+
+### Patch Changes
+
+- **Autosuggest:** Add `translate="no"` to the suggestion list and the ARIA live announcement region to prevent browser translations from wrapping text nodes in `<font>` elements, which breaks React DOM updates. Also key suggestion rows by index instead of `index + text`, so locale changes to suggestion labels no longer remount the list, and numeric text can no longer collide keys via string concatenation. ([#2117](https://github.com/seek-oss/braid-design-system/pull/2117))
+
+- **Autosuggest:** Allow the suggestions list to flip above the field when there is insufficient space below, and keep keyboard highlight scrolling inside the menu so it no longer jumps the page ([#2113](https://github.com/seek-oss/braid-design-system/pull/2113))
+
+## 34.6.1
+
+### Patch Changes
+
+- Fix Dialog/Drawer crashing under Jest (CJS) when resolving `react-focus-lock` ([#2108](https://github.com/seek-oss/braid-design-system/pull/2108))
+
 ## 34.6.0
 
 ### Minor Changes

package/README.md

@@ -1,6 +1,8 @@
 <div align="center" >
-  <img src="logo.png#gh-light-mode-only" alt="BRAID" title="BRAID" width="186px" />
-  <img src="logo-inverted.png#gh-dark-mode-only" alt="BRAID" title="BRAID" width="186px" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/seek-oss/braid-design-system/HEAD/logo-inverted.png" />
+    <img src="https://raw.githubusercontent.com/seek-oss/braid-design-system/HEAD/logo.png" alt="BRAID" title="BRAID" width="186px" />
+  </picture>
   <br/>
   <br/>
   Themeable design system for the SEEK Group.

package/dist/_virtual/_rolldown/runtime.cjs

@@ -24,7 +24,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));

package/dist/lib/components/Autosuggest/Autosuggest.cjs

@@ -20,6 +20,7 @@ const require_normalizeKey = require("../private/normalizeKey.cjs");
 const require_smoothScroll = require("../private/smoothScroll.cjs");
 const require_createAccessibilityProps = require("./createAccessibilityProps.cjs");
 const require_reverseMatches = require("./reverseMatches.cjs");
+const require_useScrollIntoView = require("./useScrollIntoView.cjs");
 const require_Autosuggest_css = require("./Autosuggest.css.cjs");
 let dedent = require("dedent");
 dedent = require_runtime.__toESM(dedent, 1);
@@ -43,7 +44,8 @@ const SUGGESTION_MOUSE_ENTER = 8;
 const HAS_SUGGESTIONS_CHANGED = 9;
 function SuggestionItem({ suggestion, highlighted, selected, onHover, id, ...restProps }) {
 	const { highlights = [], onClear, clearLabel, data } = suggestion;
-	const suggestionParts = (0, autosuggest_highlight_parse_index_js.default)(suggestion.label ?? suggestion.text, highlights.map(({ start, end }) => [start, end]));
+	const label = suggestion.label ?? suggestion.text;
+	const suggestionParts = (0, autosuggest_highlight_parse_index_js.default)(label, highlights.map(({ start, end }) => [start, end]));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "li",
 		cursor: "pointer",
@@ -256,24 +258,15 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 		isFocused: false
 	});
 	const isOpen = showSuggestionsIfAvailable && hasItems;
-	(typeof highlightedIndex === "number" ? document.getElementById(require_createAccessibilityProps.getItemId(resolvedId, highlightedIndex)) : null)?.scrollIntoView({ block: "nearest" });
-	(0, react.useEffect)(() => {
+	const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(require_createAccessibilityProps.getItemId(resolvedId, highlightedIndex)) : null;
+	(0, react.useLayoutEffect)(() => {
 		dispatch({ type: HAS_SUGGESTIONS_CHANGED });
 	}, [hasSuggestions]);
 	const isMobile = require_useResponsiveValue.useResponsiveValue()({
 		mobile: true,
 		tablet: false
 	});
-	(0, react.useEffect)(() => {
-		if (menuRef.current && isOpen && !isMobile) {
-			const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
-			if (menuBottom > document.documentElement.clientHeight) menuRef.current.scrollIntoView(false);
-		}
-	}, [
-		isOpen,
-		isMobile,
-		suggestionCount
-	]);
+	require_useScrollIntoView.useScrollIntoView(highlightedItem, menuRef);
 	const inputProps = {
 		value: previewValue ? previewValue.text : value.text,
 		type: type === "search" ? type : "text",
@@ -336,14 +329,16 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 	const clearable = Boolean(typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0);
 	const announcements = [];
 	const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
-	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) if (hasSuggestions) {
-		announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
-		if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
-		announcements.push(translations.suggestionInstructions);
-	} else if (noSuggestionsMessage) {
-		if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
-		announcements.push(noSuggestionsMessage.description);
-	} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+		if (hasSuggestions) {
+			announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
+			if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
+			announcements.push(translations.suggestionInstructions);
+		} else if (noSuggestionsMessage) {
+			if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
+			announcements.push(noSuggestionsMessage.description);
+		} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [showMobileBackdrop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		position: "fixed",
 		zIndex: "dropdownBackdrop",
@@ -396,7 +391,6 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 					triggerRef: fieldRef,
 					open: isOpen,
 					width: "full",
-					lockPlacement: true,
 					offsetSpace: "xxsmall",
 					modal: false,
 					role: false,
@@ -407,6 +401,7 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 							textAlign: "left",
 							component: "ul",
+							translate: "no",
 							background: !hasSuggestions && noSuggestionsMessage ? {
 								lightMode: "neutralSoft",
 								darkMode: "neutral"
@@ -432,7 +427,6 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 									children: noSuggestionsMessage.description
 								})]
 							}) : null, hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
-								const { text } = suggestion;
 								const groupHeading = groupHeadingIndexes.get(index);
 								const highlights = suggestionHighlight ? highlightSuggestions(suggestion.text, value.text, suggestionHighlight) : suggestion.highlights;
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [groupHeading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupHeading, { children: groupHeading }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionItem, {
@@ -458,7 +452,7 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 										description: suggestion.description,
 										groupHeading: groupHeadingForSuggestion.get(suggestion)
 									})
-								})] }, index + text);
+								})] }, index);
 							}) : null]
 						})
 					})

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -19,9 +19,10 @@ import { normalizeKey } from "../private/normalizeKey.mjs";
 import { smoothScroll } from "../private/smoothScroll.mjs";
 import { createAccessibilityProps, getItemId } from "./createAccessibilityProps.mjs";
 import { reverseMatches } from "./reverseMatches.mjs";
+import { useScrollIntoView } from "./useScrollIntoView.mjs";
 import { backdrop, backdropVisible, menu } from "./Autosuggest.css.mjs";
 import dedent from "dedent";
-import { Fragment, forwardRef, useCallback, useEffect, useReducer, useRef } from "react";
+import { Fragment, forwardRef, useCallback, useLayoutEffect, useReducer, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import matchHighlights from "autosuggest-highlight/match/index.js";
 import parseHighlights from "autosuggest-highlight/parse/index.js";
@@ -39,7 +40,8 @@ const SUGGESTION_MOUSE_ENTER = 8;
 const HAS_SUGGESTIONS_CHANGED = 9;
 function SuggestionItem({ suggestion, highlighted, selected, onHover, id, ...restProps }) {
 	const { highlights = [], onClear, clearLabel, data } = suggestion;
-	const suggestionParts = parseHighlights(suggestion.label ?? suggestion.text, highlights.map(({ start, end }) => [start, end]));
+	const label = suggestion.label ?? suggestion.text;
+	const suggestionParts = parseHighlights(label, highlights.map(({ start, end }) => [start, end]));
 	return /* @__PURE__ */ jsx(Box, {
 		component: "li",
 		cursor: "pointer",
@@ -252,24 +254,15 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 		isFocused: false
 	});
 	const isOpen = showSuggestionsIfAvailable && hasItems;
-	(typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null)?.scrollIntoView({ block: "nearest" });
-	useEffect(() => {
+	const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null;
+	useLayoutEffect(() => {
 		dispatch({ type: HAS_SUGGESTIONS_CHANGED });
 	}, [hasSuggestions]);
 	const isMobile = useResponsiveValue()({
 		mobile: true,
 		tablet: false
 	});
-	useEffect(() => {
-		if (menuRef.current && isOpen && !isMobile) {
-			const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
-			if (menuBottom > document.documentElement.clientHeight) menuRef.current.scrollIntoView(false);
-		}
-	}, [
-		isOpen,
-		isMobile,
-		suggestionCount
-	]);
+	useScrollIntoView(highlightedItem, menuRef);
 	const inputProps = {
 		value: previewValue ? previewValue.text : value.text,
 		type: type === "search" ? type : "text",
@@ -332,14 +325,16 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 	const clearable = Boolean(typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0);
 	const announcements = [];
 	const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
-	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) if (hasSuggestions) {
-		announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
-		if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
-		announcements.push(translations.suggestionInstructions);
-	} else if (noSuggestionsMessage) {
-		if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
-		announcements.push(noSuggestionsMessage.description);
-	} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+		if (hasSuggestions) {
+			announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
+			if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
+			announcements.push(translations.suggestionInstructions);
+		} else if (noSuggestionsMessage) {
+			if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
+			announcements.push(noSuggestionsMessage.description);
+		} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	}
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [showMobileBackdrop ? /* @__PURE__ */ jsx(Box, {
 		position: "fixed",
 		zIndex: "dropdownBackdrop",
@@ -392,7 +387,6 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 					triggerRef: fieldRef,
 					open: isOpen,
 					width: "full",
-					lockPlacement: true,
 					offsetSpace: "xxsmall",
 					modal: false,
 					role: false,
@@ -403,6 +397,7 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 						children: /* @__PURE__ */ jsxs(Box, {
 							textAlign: "left",
 							component: "ul",
+							translate: "no",
 							background: !hasSuggestions && noSuggestionsMessage ? {
 								lightMode: "neutralSoft",
 								darkMode: "neutral"
@@ -428,7 +423,6 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 									children: noSuggestionsMessage.description
 								})]
 							}) : null, hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
-								const { text } = suggestion;
 								const groupHeading = groupHeadingIndexes.get(index);
 								const highlights = suggestionHighlight ? highlightSuggestions(suggestion.text, value.text, suggestionHighlight) : suggestion.highlights;
 								return /* @__PURE__ */ jsxs(Fragment, { children: [groupHeading ? /* @__PURE__ */ jsx(GroupHeading, { children: groupHeading }) : null, /* @__PURE__ */ jsx(SuggestionItem, {
@@ -454,7 +448,7 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 										description: suggestion.description,
 										groupHeading: groupHeadingForSuggestion.get(suggestion)
 									})
-								})] }, index + text);
+								})] }, index);
 							}) : null]
 						})
 					})

package/dist/lib/components/Autosuggest/useScrollIntoView.cjs

@@ -0,0 +1,14 @@
+let react = require("react");
+//#region src/lib/components/Autosuggest/useScrollIntoView.ts
+function useScrollIntoView(element, scrollContainerRef) {
+	(0, react.useEffect)(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer || !element) return;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.top < containerRect.top) scrollContainer.scrollTop -= containerRect.top - elementRect.top;
+		else if (elementRect.bottom > containerRect.bottom) scrollContainer.scrollTop += elementRect.bottom - containerRect.bottom;
+	}, [scrollContainerRef, element]);
+}
+//#endregion
+exports.useScrollIntoView = useScrollIntoView;

package/dist/lib/components/Autosuggest/useScrollIntoView.mjs

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+//#region src/lib/components/Autosuggest/useScrollIntoView.ts
+function useScrollIntoView(element, scrollContainerRef) {
+	useEffect(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer || !element) return;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.top < containerRect.top) scrollContainer.scrollTop -= containerRect.top - elementRect.top;
+		else if (elementRect.bottom > containerRect.bottom) scrollContainer.scrollTop += elementRect.bottom - containerRect.bottom;
+	}, [scrollContainerRef, element]);
+}
+//#endregion
+export { useScrollIntoView };

package/dist/lib/components/BraidProvider/BraidProvider.cjs

@@ -14,10 +14,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/BraidProvider/BraidProvider.tsx
 if (process.env.NODE_ENV === "development") require_resetTracker.ensureResetImported();
 const makeLinkComponent = (render) => ({ __forwardRef__: (0, react.forwardRef)(render) });
-const LinkComponentContext = (0, react.createContext)(makeLinkComponent((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+const DefaultLinkComponent = makeLinkComponent((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 	ref,
 	...props
-})));
+}));
+const LinkComponentContext = (0, react.createContext)(DefaultLinkComponent);
 const useLinkComponent = (ref) => {
 	const linkComponent = (0, react.useContext)(LinkComponentContext);
 	(0, assert.default)(!ref || "__forwardRef__" in linkComponent, dedent.default`

package/dist/lib/components/BraidProvider/BraidProvider.mjs

@@ -11,10 +11,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/components/BraidProvider/BraidProvider.tsx
 if (process.env.NODE_ENV === "development") ensureResetImported();
 const makeLinkComponent = (render) => ({ __forwardRef__: forwardRef(render) });
-const LinkComponentContext = createContext(makeLinkComponent((props, ref) => /* @__PURE__ */ jsx("a", {
+const DefaultLinkComponent = makeLinkComponent((props, ref) => /* @__PURE__ */ jsx("a", {
 	ref,
 	...props
-})));
+}));
+const LinkComponentContext = createContext(DefaultLinkComponent);
 const useLinkComponent = (ref) => {
 	const linkComponent = useContext(LinkComponentContext);
 	assert(!ref || "__forwardRef__" in linkComponent, dedent`

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

@@ -2,7 +2,8 @@ import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { keyframes, style } from "@vanilla-extract/css";
 //#region src/lib/components/Button/ButtonLoader.css.ts
 setFileScope("src/lib/components/Button/ButtonLoader.css.ts", "braid-design-system");
-const loading = style({ animation: `${keyframes({ to: { transform: "rotate(360deg)" } }, "spin")} 0.7s linear infinite` }, "loading");
+const spin = keyframes({ to: { transform: "rotate(360deg)" } }, "spin");
+const loading = style({ animation: `${spin} 0.7s linear infinite` }, "loading");
 endFileScope();
 //#endregion
 export { loading };

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

@@ -4,9 +4,10 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/ButtonLink/ButtonLink.playroom.tsx
 const ButtonLink = (0, react.forwardRef)(({ variant, ...restProps }, ref) => {
+	const isValidVariant = variant && require_Button.buttonVariants.indexOf(variant) > -1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonLink.ButtonLink, {
 		ref,
-		variant: variant && require_Button.buttonVariants.indexOf(variant) > -1 ? variant : void 0,
+		variant: isValidVariant ? variant : void 0,
 		...restProps
 	});
 });

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

@@ -4,9 +4,10 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/ButtonLink/ButtonLink.playroom.tsx
 const ButtonLink = forwardRef(({ variant, ...restProps }, ref) => {
+	const isValidVariant = variant && buttonVariants.indexOf(variant) > -1;
 	return /* @__PURE__ */ jsx(ButtonLink$1, {
 		ref,
-		variant: variant && buttonVariants.indexOf(variant) > -1 ? variant : void 0,
+		variant: isValidVariant ? variant : void 0,
 		...restProps
 	});
 });

package/dist/lib/components/FieldMessage/FieldMessage.playroom.cjs

@@ -3,8 +3,9 @@ const require_FieldMessage = require("./FieldMessage.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/FieldMessage/FieldMessage.playroom.tsx
 const FieldMessage = ({ id, tone, ...restProps }) => {
+	const resolvedId = require_useFallbackId.useFallbackId(id);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FieldMessage.FieldMessage, {
-		id: require_useFallbackId.useFallbackId(id),
+		id: resolvedId,
 		tone: tone && require_FieldMessage.tones.indexOf(tone) > -1 ? tone : void 0,
 		...restProps
 	});

package/dist/lib/components/FieldMessage/FieldMessage.playroom.mjs

@@ -3,8 +3,9 @@ import { FieldMessage as FieldMessage$1, tones } from "./FieldMessage.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/FieldMessage/FieldMessage.playroom.tsx
 const FieldMessage = ({ id, tone, ...restProps }) => {
+	const resolvedId = useFallbackId(id);
 	return /* @__PURE__ */ jsx(FieldMessage$1, {
-		id: useFallbackId(id),
+		id: resolvedId,
 		tone: tone && tones.indexOf(tone) > -1 ? tone : void 0,
 		...restProps
 	});

package/dist/lib/components/Link/Link.cjs

@@ -8,7 +8,8 @@ let clsx = require("clsx");
 clsx = require_runtime.__toESM(clsx, 1);
 //#region src/lib/components/Link/Link.tsx
 const Link = (0, react.forwardRef)(({ href, className, data, ...restProps }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BraidProvider.useLinkComponent(ref), {
+	const LinkComponent = require_BraidProvider.useLinkComponent(ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
 		ref,
 		href,
 		className: (0, clsx.default)(require_atoms.atoms({ reset: "a" }), className),

package/dist/lib/components/Link/Link.mjs

@@ -6,7 +6,8 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/lib/components/Link/Link.tsx
 const Link = forwardRef(({ href, className, data, ...restProps }, ref) => {
-	return /* @__PURE__ */ jsx(useLinkComponent(ref), {
+	const LinkComponent = useLinkComponent(ref);
+	return /* @__PURE__ */ jsx(LinkComponent, {
 		ref,
 		href,
 		className: clsx(atoms({ reset: "a" }), className),

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

@@ -13,11 +13,12 @@ const size = (0, _vanilla_extract_css.styleVariants)(require_vars_css.vars.textS
 	tablet: { height: tablet.fontSize }
 }), "size");
 const currentColor = (0, _vanilla_extract_css.style)({ fill: "currentcolor" }, "currentColor");
+const bounce = (0, _vanilla_extract_css.keyframes)({
+	"33%": { transform: `translateY(-1.4em)` },
+	"66%": { transform: `translateY(1.4em)` }
+}, "bounce");
 const bounceAnimation = (0, _vanilla_extract_css.style)({
-	animationName: (0, _vanilla_extract_css.keyframes)({
-		"33%": { transform: `translateY(-1.4em)` },
-		"66%": { transform: `translateY(1.4em)` }
-	}, "bounce"),
+	animationName: bounce,
 	animationFillMode: "both",
 	animationIterationCount: "infinite",
 	animationTimingFunction: "ease-in-out",
@@ -27,7 +28,7 @@ const animationDelayInMs = 70;
 const circle = (0, _vanilla_extract_css.style)([bounceAnimation, (0, _vanilla_extract_css.style)({
 	transform: `translateY(1.4em)`,
 	selectors: {
-		[`&:nth-child(1)`]: { animationDelay: `${animationDelayInMs * 2}ms` },
+		[`&:nth-child(1)`]: { animationDelay: `140ms` },
 		[`&:nth-child(2)`]: { animationDelay: `${animationDelayInMs}ms` }
 	}
 }, "circle")], "circle");

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

@@ -13,11 +13,12 @@ const size = styleVariants(vars.textSize, ({ mobile, tablet }) => responsiveStyl
 	tablet: { height: tablet.fontSize }
 }), "size");
 const currentColor = style({ fill: "currentcolor" }, "currentColor");
+const bounce = keyframes({
+	"33%": { transform: `translateY(-1.4em)` },
+	"66%": { transform: `translateY(1.4em)` }
+}, "bounce");
 const bounceAnimation = style({
-	animationName: keyframes({
-		"33%": { transform: `translateY(-1.4em)` },
-		"66%": { transform: `translateY(1.4em)` }
-	}, "bounce"),
+	animationName: bounce,
 	animationFillMode: "both",
 	animationIterationCount: "infinite",
 	animationTimingFunction: "ease-in-out",
@@ -27,16 +28,17 @@ const animationDelayInMs = 70;
 const circle = style([bounceAnimation, style({
 	transform: `translateY(1.4em)`,
 	selectors: {
-		[`&:nth-child(1)`]: { animationDelay: `${animationDelayInMs * 2}ms` },
+		[`&:nth-child(1)`]: { animationDelay: `140ms` },
 		[`&:nth-child(2)`]: { animationDelay: `${animationDelayInMs}ms` }
 	}
 }, "circle")], "circle");
+const fade = keyframes({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}, "fade");
 const delay = style({
 	opacity: 0,
-	animationName: keyframes({
-		from: { opacity: 0 },
-		to: { opacity: 1 }
-	}, "fade"),
+	animationName: fade,
 	animationIterationCount: "1",
 	animationFillMode: "forwards",
 	animationTimingFunction: "ease-in",

package/dist/lib/components/PageBlock/PageBlock.cjs

@@ -13,9 +13,10 @@ const validPageBlockComponents = [
 	"nav"
 ];
 const PageBlock = ({ children, width = "large", component: componentProp, data, ...restProps }) => {
+	const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		width: "full",
-		component: componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div",
+		component,
 		paddingX: require_pageBlockGutters.pageBlockGutters,
 		...require_buildDataAttributes.default({
 			data,

package/dist/lib/components/PageBlock/PageBlock.mjs

@@ -13,9 +13,10 @@ const validPageBlockComponents = [
 	"nav"
 ];
 const PageBlock = ({ children, width = "large", component: componentProp, data, ...restProps }) => {
+	const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
 	return /* @__PURE__ */ jsx(Box, {
 		width: "full",
-		component: componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div",
+		component,
 		paddingX: pageBlockGutters,
 		...buildDataAttributes_default({
 			data,

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

@@ -76,7 +76,7 @@ const tick = (0, _vanilla_extract_css.style)([
 const progressBarGap = "xxsmall";
 const dotSize = 2;
 const progressTrack = (0, _vanilla_extract_css.style)({
-	background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
+	background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent 4px)`,
 	height: require_vars_css.vars.borderWidth.large,
 	width: `${(0, _vanilla_extract_css_utils.calc)("100%").subtract(stepIndicatorSize).subtract((0, _vanilla_extract_css_utils.calc)(require_vars_css.vars.space[progressBarGap]).multiply(2))}`,
 	top: `${(0, _vanilla_extract_css_utils.calc)(stepIndicatorSize).subtract(require_vars_css.vars.borderWidth.large).divide(2)}`,

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

@@ -76,7 +76,7 @@ const tick = style([
 const progressBarGap = "xxsmall";
 const dotSize = 2;
 const progressTrack = style({
-	background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
+	background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent 4px)`,
 	height: vars.borderWidth.large,
 	width: `${calc("100%").subtract(stepIndicatorSize).subtract(calc(vars.space[progressBarGap]).multiply(2))}`,
 	top: `${calc(stepIndicatorSize).subtract(vars.borderWidth.large).divide(2)}`,

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

@@ -9,7 +9,8 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/Table/TableBody.tsx
 const TableBody = (0, react.forwardRef)(({ children, data, ...restProps }, ref) => {
-	(0, assert.default)((0, react.useContext)(require_TableContext.TableContext), "TableBody must be used within a Table component");
+	const tableContext = (0, react.useContext)(require_TableContext.TableContext);
+	(0, assert.default)(tableContext, "TableBody must be used within a Table component");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableContext.TableBodyContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {

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

@@ -7,7 +7,8 @@ import { forwardRef, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableBody.tsx
 const TableBody = forwardRef(({ children, data, ...restProps }, ref) => {
-	assert(useContext(TableContext), "TableBody must be used within a Table component");
+	const tableContext = useContext(TableContext);
+	assert(tableContext, "TableBody must be used within a Table component");
 	return /* @__PURE__ */ jsx(TableBodyContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ jsx(Box, {

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

@@ -93,7 +93,8 @@ const TableCell = (0, react.forwardRef)((props, ref) => {
 });
 const TableHeaderCell = (0, react.forwardRef)((props, ref) => {
 	const tableHeaderContext = (0, react.useContext)(require_TableContext.TableHeaderContext);
-	(0, assert.default)((0, react.useContext)(require_TableContext.TableRowContext), "TableHeaderCell cannot be used outside a TableRow component");
+	const tableRowContext = (0, react.useContext)(require_TableContext.TableRowContext);
+	(0, assert.default)(tableRowContext, "TableHeaderCell cannot be used outside a TableRow component");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cell, {
 		...props,
 		header: true,

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

@@ -91,7 +91,8 @@ const TableCell = forwardRef((props, ref) => {
 });
 const TableHeaderCell = forwardRef((props, ref) => {
 	const tableHeaderContext = useContext(TableHeaderContext);
-	assert(useContext(TableRowContext), "TableHeaderCell cannot be used outside a TableRow component");
+	const tableRowContext = useContext(TableRowContext);
+	assert(tableRowContext, "TableHeaderCell cannot be used outside a TableRow component");
 	return /* @__PURE__ */ jsx(Cell, {
 		...props,
 		header: true,

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

@@ -9,7 +9,8 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/Table/TableFooter.tsx
 const TableFooter = (0, react.forwardRef)(({ children, data, ...restProps }, ref) => {
-	(0, assert.default)((0, react.useContext)(require_TableContext.TableContext), "TableFooter must be used within a Table component");
+	const tableContext = (0, react.useContext)(require_TableContext.TableContext);
+	(0, assert.default)(tableContext, "TableFooter must be used within a Table component");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableContext.TableFooterContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {

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

@@ -7,7 +7,8 @@ import { forwardRef, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableFooter.tsx
 const TableFooter = forwardRef(({ children, data, ...restProps }, ref) => {
-	assert(useContext(TableContext), "TableFooter must be used within a Table component");
+	const tableContext = useContext(TableContext);
+	assert(tableContext, "TableFooter must be used within a Table component");
 	return /* @__PURE__ */ jsx(TableFooterContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ jsx(Box, {

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

@@ -9,7 +9,8 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/Table/TableHeader.tsx
 const TableHeader = (0, react.forwardRef)(({ children, data, ...restProps }, ref) => {
-	(0, assert.default)((0, react.useContext)(require_TableContext.TableContext), "TableHeader must be used within a Table component");
+	const tableContext = (0, react.useContext)(require_TableContext.TableContext);
+	(0, assert.default)(tableContext, "TableHeader must be used within a Table component");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableContext.TableHeaderContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {

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

@@ -7,7 +7,8 @@ import { forwardRef, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/Table/TableHeader.tsx
 const TableHeader = forwardRef(({ children, data, ...restProps }, ref) => {
-	assert(useContext(TableContext), "TableHeader must be used within a Table component");
+	const tableContext = useContext(TableContext);
+	assert(tableContext, "TableHeader must be used within a Table component");
 	return /* @__PURE__ */ jsx(TableHeaderContext.Provider, {
 		value: true,
 		children: /* @__PURE__ */ jsx(Box, {