braid-design-system 34.6.0 → 34.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # braid-design-system
 
+## 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/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

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

@@ -43,7 +43,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",

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

@@ -39,7 +39,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",

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, {

package/dist/lib/components/TextLink/TextLink.mjs

@@ -18,7 +18,8 @@ const useLinkStyles = ({ reset = "a", weight, showVisited = false, hitArea = "st
 	const backgroundContext = useBackground();
 	const textContext = useContext(TextContext);
 	const isWeakDueToTextTone = !useContext(HeadingContext_default) && textContext?.tone !== "neutral";
-	return clsx(base, weight === "weak" || isWeakDueToTextTone ? weakLink : [isPlainBackground(backgroundContext.lightMode, "light") || weight === "regular" ? regularLinkLightMode[backgroundLightness.lightMode] : weakLink, isPlainBackground(backgroundContext.darkMode, "dark") || weight === "regular" ? regularLinkDarkMode[backgroundLightness.darkMode] : weakLink], weight !== "weak" ? fontWeight.medium : void 0, showVisited ? [visitedLightMode[backgroundLightness.lightMode], visitedDarkMode[backgroundLightness.darkMode]] : "", reset !== false ? atoms({ reset: typeof reset === "string" ? reset : "a" }) : null, atoms({ cursor: "pointer" }), hitArea === "large" && virtualTouchable);
+	const linkStyles = weight === "weak" || isWeakDueToTextTone ? weakLink : [isPlainBackground(backgroundContext.lightMode, "light") || weight === "regular" ? regularLinkLightMode[backgroundLightness.lightMode] : weakLink, isPlainBackground(backgroundContext.darkMode, "dark") || weight === "regular" ? regularLinkDarkMode[backgroundLightness.darkMode] : weakLink];
+	return clsx(base, linkStyles, weight !== "weak" ? fontWeight.medium : void 0, showVisited ? [visitedLightMode[backgroundLightness.lightMode], visitedDarkMode[backgroundLightness.darkMode]] : "", reset !== false ? atoms({ reset: typeof reset === "string" ? reset : "a" }) : null, atoms({ cursor: "pointer" }), hitArea === "large" && virtualTouchable);
 };
 const TextLinkContent = ({ icon, iconPosition = "leading", children }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 	icon && iconPosition === "leading" ? /* @__PURE__ */ jsx(AvoidWidowIcon, {

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

@@ -7,7 +7,7 @@ autosuggest_highlight_parse_index_js = require_runtime.__toESM(autosuggest_highl
 const formatRanges = (value, highlightRanges, tone) => {
 	if (highlightRanges && value) {
 		let lastEnd = 0;
-		return (0, autosuggest_highlight_parse_index_js.default)(value, highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
+		const validatedAndSortedRanges = highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
 			const resolvedEnd = end || value.length;
 			if (resolvedEnd <= start) return acc;
 			const adjustedRange = [];
@@ -19,7 +19,8 @@ const formatRanges = (value, highlightRanges, tone) => {
 				lastEnd = resolvedEnd;
 			}
 			return [...acc, ...adjustedRange];
-		}, []).map(({ start, end }) => [start, end || value.length])).reduce((acc, { text, highlight }, i) => {
+		}, []);
+		return (0, autosuggest_highlight_parse_index_js.default)(value, validatedAndSortedRanges.map(({ start, end }) => [start, end || value.length])).reduce((acc, { text, highlight }, i) => {
 			if (text) acc.push(highlight ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Highlight.Highlight, {
 				tone,
 				children: text

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

@@ -5,7 +5,7 @@ import parseHighlights from "autosuggest-highlight/parse/index.js";
 const formatRanges = (value, highlightRanges, tone) => {
 	if (highlightRanges && value) {
 		let lastEnd = 0;
-		return parseHighlights(value, highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
+		const validatedAndSortedRanges = highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
 			const resolvedEnd = end || value.length;
 			if (resolvedEnd <= start) return acc;
 			const adjustedRange = [];
@@ -17,7 +17,8 @@ const formatRanges = (value, highlightRanges, tone) => {
 				lastEnd = resolvedEnd;
 			}
 			return [...acc, ...adjustedRange];
-		}, []).map(({ start, end }) => [start, end || value.length])).reduce((acc, { text, highlight }, i) => {
+		}, []);
+		return parseHighlights(value, validatedAndSortedRanges.map(({ start, end }) => [start, end || value.length])).reduce((acc, { text, highlight }, i) => {
 			if (text) acc.push(highlight ? /* @__PURE__ */ jsx(Highlight, {
 				tone,
 				children: text

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -17,8 +17,9 @@ const offsetSpace = "small";
 const StaticTooltipContext = (0, react.createContext)(false);
 const clamp = (min, value, max) => Math.max(min, Math.min(value, max));
 const TooltipTextDefaultsProvider = ({ children }) => {
+	const themeName = require_useThemeName.useThemeName();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_defaultTextProps.DefaultTextPropsProvider, {
-		size: require_useThemeName.useThemeName() === "docs" ? "small" : void 0,
+		size: themeName === "docs" ? "small" : void 0,
 		weight: "medium",
 		children
 	});

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -15,8 +15,9 @@ const offsetSpace = "small";
 const StaticTooltipContext = createContext(false);
 const clamp = (min, value, max) => Math.max(min, Math.min(value, max));
 const TooltipTextDefaultsProvider = ({ children }) => {
+	const themeName = useThemeName();
 	return /* @__PURE__ */ jsx(DefaultTextPropsProvider, {
-		size: useThemeName() === "docs" ? "small" : void 0,
+		size: themeName === "docs" ? "small" : void 0,
 		weight: "medium",
 		children
 	});

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

@@ -10,6 +10,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react_focus_lock = require("react-focus-lock");
 react_focus_lock = require_runtime.__toESM(react_focus_lock, 1);
 //#region src/lib/components/private/Modal/Modal.tsx
+const FocusLock = react_focus_lock.default.default ?? react_focus_lock.default;
 const AllowCloseContext = (0, react.createContext)(true);
 const ModalPortal = ({ children }) => {
 	const [modalElement, setElement] = (0, react.useState)(null);
@@ -106,7 +107,7 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 			window.removeEventListener(event, handleEvent);
 		};
 	}, [trapActive]);
-	return state === OPENING || state === OPEN || state === CLOSING ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_focus_lock.default, {
+	return state === OPENING || state === OPEN || state === CLOSING ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FocusLock, {
 		className: require_Modal_css.resetStackingContext,
 		disabled: !trapActive,
 		autoFocus: false,

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

@@ -6,8 +6,9 @@ import { ModalContent } from "./ModalContent.mjs";
 import { ariaHideOthers } from "./ariaHideOthers.mjs";
 import { createContext, useContext, useEffect, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import FocusLock from "react-focus-lock";
+import FocusLockImport from "react-focus-lock";
 //#region src/lib/components/private/Modal/Modal.tsx
+const FocusLock = FocusLockImport.default ?? FocusLockImport;
 const AllowCloseContext = createContext(true);
 const ModalPortal = ({ children }) => {
 	const [modalElement, setElement] = useState(null);

package/dist/lib/components/private/Popover/Popover.cjs

@@ -55,16 +55,18 @@ const PopoverContent = (0, react.forwardRef)(({ id, role, align = "start", width
 	const spaceScale = require_useSpace.useSpace();
 	let offsetSpacePx = 0;
 	if (resolvedOffsetSpace !== "none") offsetSpacePx = spaceScale.space[resolvedOffsetSpace] * spaceScale.grid;
+	const floatingUiRequestedPosition = getFloatingUiPosition(placement, align);
+	const middleware = [
+		(0, _floating_ui_react_dom.offset)(offsetSpacePx),
+		!lockPlacement && (0, _floating_ui_react_dom.flip)(),
+		width === "full" ? (0, _floating_ui_react_dom.size)({ apply({ rects, elements }) {
+			Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
+		} }) : (0, _floating_ui_react_dom.shift)({ crossAxis: align === "center" }),
+		arrowRef && (0, _floating_ui_react_dom.arrow)({ element: arrowRef })
+	].filter(Boolean);
 	const { refs, floatingStyles, middlewareData, placement: floatingUiEvaluatedPosition, isPositioned } = (0, _floating_ui_react_dom.useFloating)({
-		placement: getFloatingUiPosition(placement, align),
-		middleware: [
-			(0, _floating_ui_react_dom.offset)(offsetSpacePx),
-			!lockPlacement && (0, _floating_ui_react_dom.flip)(),
-			width === "full" ? (0, _floating_ui_react_dom.size)({ apply({ rects, elements }) {
-				Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
-			} }) : (0, _floating_ui_react_dom.shift)({ crossAxis: align === "center" }),
-			arrowRef && (0, _floating_ui_react_dom.arrow)({ element: arrowRef })
-		].filter(Boolean),
+		placement: floatingUiRequestedPosition,
+		middleware,
 		whileElementsMounted: _floating_ui_react_dom.autoUpdate
 	});
 	(0, react.useEffect)(() => {

package/dist/lib/components/private/Popover/Popover.css.mjs

@@ -11,11 +11,12 @@ const backdrop = style({
 const placementModifier = createVar("placementModifier");
 const invertPlacement = style({ vars: { [placementModifier]: "-1" } }, "invertPlacement");
 const transitionThreshold = "xxsmall";
+const popupAnimation = keyframes({ from: {
+	opacity: 0,
+	transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
+} }, "popupAnimation");
 const animation = style({
-	animationName: keyframes({ from: {
-		opacity: 0,
-		transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
-	} }, "popupAnimation"),
+	animationName: popupAnimation,
 	animationFillMode: "both",
 	animationTimingFunction: "ease",
 	animationDuration: "0.125s",

package/dist/lib/components/private/Popover/Popover.mjs

@@ -53,16 +53,18 @@ const PopoverContent = forwardRef(({ id, role, align = "start", width = "content
 	const spaceScale = useSpace();
 	let offsetSpacePx = 0;
 	if (resolvedOffsetSpace !== "none") offsetSpacePx = spaceScale.space[resolvedOffsetSpace] * spaceScale.grid;
+	const floatingUiRequestedPosition = getFloatingUiPosition(placement, align);
+	const middleware = [
+		offset(offsetSpacePx),
+		!lockPlacement && flip(),
+		width === "full" ? size({ apply({ rects, elements }) {
+			Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
+		} }) : shift({ crossAxis: align === "center" }),
+		arrowRef && arrow({ element: arrowRef })
+	].filter(Boolean);
 	const { refs, floatingStyles, middlewareData, placement: floatingUiEvaluatedPosition, isPositioned } = useFloating({
-		placement: getFloatingUiPosition(placement, align),
-		middleware: [
-			offset(offsetSpacePx),
-			!lockPlacement && flip(),
-			width === "full" ? size({ apply({ rects, elements }) {
-				Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
-			} }) : shift({ crossAxis: align === "center" }),
-			arrowRef && arrow({ element: arrowRef })
-		].filter(Boolean),
+		placement: floatingUiRequestedPosition,
+		middleware,
 		whileElementsMounted: autoUpdate
 	});
 	useEffect(() => {

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

@@ -25,20 +25,21 @@ const toneToIcon = {
 	critical: require_IconCritical.IconCritical,
 	positive: require_IconPositive.IconPositive
 };
-const toastDuration = 10 * 1e3;
+const toastDuration = 1e4;
 const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
+	const handleClick = (0, react.useCallback)((event) => {
+		event.stopPropagation();
+		removeToast();
+		onClick();
+	}, [removeToast, onClick]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 		baseline: false,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			component: "span",
 			"aria-hidden": true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextLinkButton.TextLinkButton, {
-				onClick: (0, react.useCallback)((event) => {
-					event.stopPropagation();
-					removeToast();
-					onClick();
-				}, [removeToast, onClick]),
+				onClick: handleClick,
 				hitArea: "large",
 				children: label
 			})

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

@@ -23,20 +23,21 @@ const toneToIcon = {
 	critical: IconCritical,
 	positive: IconPositive
 };
-const toastDuration = 10 * 1e3;
+const toastDuration = 1e4;
 const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
+	const handleClick = useCallback((event) => {
+		event.stopPropagation();
+		removeToast();
+		onClick();
+	}, [removeToast, onClick]);
 	return /* @__PURE__ */ jsx(Text, {
 		baseline: false,
 		children: /* @__PURE__ */ jsx(Box, {
 			component: "span",
 			"aria-hidden": true,
 			children: /* @__PURE__ */ jsx(TextLinkButton, {
-				onClick: useCallback((event) => {
-					event.stopPropagation();
-					removeToast();
-					onClick();
-				}, [removeToast, onClick]),
+				onClick: handleClick,
 				hitArea: "large",
 				children: label
 			})

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

@@ -139,28 +139,26 @@ const useFlipList = (expanded) => {
 						}]
 					});
 					break;
-				case "become-first":
-					animations.push({
-						element,
-						transition: baseTransition,
-						transforms: [
-							{
-								property: "height",
-								from: require_px.px(currentHeight),
-								to: require_px.px(fullHeight)
-							},
-							{
-								property: "transform",
-								from: transform
-							},
-							{
-								property: "className",
-								from: expanded ? require_Toast_css.collapsed : void 0,
-								to: void 0
-							}
-						]
-					});
-					break;
+				case "become-first": animations.push({
+					element,
+					transition: baseTransition,
+					transforms: [
+						{
+							property: "height",
+							from: require_px.px(currentHeight),
+							to: require_px.px(fullHeight)
+						},
+						{
+							property: "transform",
+							from: transform
+						},
+						{
+							property: "className",
+							from: expanded ? require_Toast_css.collapsed : void 0,
+							to: void 0
+						}
+					]
+				});
 			}
 			toastStates.set(toastKey, "entered");
 		});

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

@@ -139,28 +139,26 @@ const useFlipList = (expanded) => {
 						}]
 					});
 					break;
-				case "become-first":
-					animations.push({
-						element,
-						transition: baseTransition,
-						transforms: [
-							{
-								property: "height",
-								from: px(currentHeight),
-								to: px(fullHeight)
-							},
-							{
-								property: "transform",
-								from: transform
-							},
-							{
-								property: "className",
-								from: expanded ? collapsed : void 0,
-								to: void 0
-							}
-						]
-					});
-					break;
+				case "become-first": animations.push({
+					element,
+					transition: baseTransition,
+					transforms: [
+						{
+							property: "height",
+							from: px(currentHeight),
+							to: px(fullHeight)
+						},
+						{
+							property: "transform",
+							from: transform
+						},
+						{
+							property: "className",
+							from: expanded ? collapsed : void 0,
+							to: void 0
+						}
+					]
+				});
 			}
 			toastStates.set(toastKey, "entered");
 		});

package/dist/lib/hooks/useIcon/icon.css.cjs

@@ -15,18 +15,15 @@ const inlineCrop = (0, _vanilla_extract_css.style)({
 	marginBottom: `-${iconScaleIncrease}em`
 }, "inlineCrop");
 const inline = (0, _vanilla_extract_css.style)({ verticalAlign: "middle" }, "inline");
-const uppercaseNudge = -.105;
-const lowercaseNudge = -.065;
-const verticalCorrection = .06;
 const alignY = {
 	uppercase: (0, _vanilla_extract_css.styleVariants)({
-		none: { top: `${uppercaseNudge}em` },
-		up: { top: `${uppercaseNudge - verticalCorrection}em` },
+		none: { top: `-0.105em` },
+		up: { top: `-0.16499999999999998em` },
 		down: { top: `-0.045em` }
 	}, "alignY_uppercase"),
 	lowercase: (0, _vanilla_extract_css.styleVariants)({
-		none: { top: `${lowercaseNudge}em` },
-		up: { top: `${lowercaseNudge - verticalCorrection}em` },
+		none: { top: `-0.065em` },
+		up: { top: `-0.125em` },
 		down: { top: `-0.0050000000000000044em` }
 	}, "alignY_lowercase")
 };

package/dist/lib/hooks/useIcon/icon.css.mjs

@@ -15,18 +15,15 @@ const inlineCrop = style({
 	marginBottom: `-${iconScaleIncrease}em`
 }, "inlineCrop");
 const inline = style({ verticalAlign: "middle" }, "inline");
-const uppercaseNudge = -.105;
-const lowercaseNudge = -.065;
-const verticalCorrection = .06;
 const alignY = {
 	uppercase: styleVariants({
-		none: { top: `${uppercaseNudge}em` },
-		up: { top: `${uppercaseNudge - verticalCorrection}em` },
+		none: { top: `-0.105em` },
+		up: { top: `-0.16499999999999998em` },
 		down: { top: `-0.045em` }
 	}, "alignY_uppercase"),
 	lowercase: styleVariants({
-		none: { top: `${lowercaseNudge}em` },
-		up: { top: `${lowercaseNudge - verticalCorrection}em` },
+		none: { top: `-0.065em` },
+		up: { top: `-0.125em` },
 		down: { top: `-0.0050000000000000044em` }
 	}, "alignY_lowercase")
 };

package/dist/lib/playroom/FrameComponent.cjs

@@ -17,7 +17,8 @@ const PlayroomLink = require_BraidProvider.makeLinkComponent(({ href, onClick, .
 	...restProps
 }));
 const ResponsiveReady = ({ children }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: require_useResponsiveValue.useResponsiveValue()({ mobile: true }) ?? false ? children : null });
+	const responsiveReady = require_useResponsiveValue.useResponsiveValue()({ mobile: true }) ?? false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: responsiveReady ? children : null });
 };
 var FrameComponent_default = ({ theme, children, frameSettings }) => {
 	const stackDebug = (0, react.useMemo)(() => frameSettings.stackDebug, [frameSettings.stackDebug]);

package/dist/lib/playroom/FrameComponent.mjs

@@ -17,7 +17,8 @@ const PlayroomLink = makeLinkComponent(({ href, onClick, ...restProps }, ref) =>
 	...restProps
 }));
 const ResponsiveReady = ({ children }) => {
-	return /* @__PURE__ */ jsx(Fragment$1, { children: useResponsiveValue()({ mobile: true }) ?? false ? children : null });
+	const responsiveReady = useResponsiveValue()({ mobile: true }) ?? false;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: responsiveReady ? children : null });
 };
 var FrameComponent_default = ({ theme, children, frameSettings }) => {
 	const stackDebug = useMemo(() => frameSettings.stackDebug, [frameSettings.stackDebug]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.6.0",
+  "version": "34.6.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {