braid-design-system 34.6.0 → 34.6.2

package/dist/lib/components/Tabs/Tab.cjs

@@ -48,18 +48,20 @@ const Tab = ({ children, data, badge, icon, item, ...restProps }) => {
 	});
 	(0, react.useEffect)(() => {
 		if (!tabRef.current || !scrollContainer) return;
-		if (isSelected || isFocused) if (isMobile) require_smoothScroll.smoothScroll(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 3,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
-		else require_smoothScroll.smoothScrollIntoView(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 6,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
+		if (isSelected || isFocused) {
+			if (isMobile) require_smoothScroll.smoothScroll(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 3,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+			else require_smoothScroll.smoothScrollIntoView(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 6,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+		}
 		firstRenderRef.current = false;
 	}, [
 		isSelected,

package/dist/lib/components/Tabs/Tab.mjs

@@ -46,18 +46,20 @@ const Tab = ({ children, data, badge, icon, item, ...restProps }) => {
 	});
 	useEffect(() => {
 		if (!tabRef.current || !scrollContainer) return;
-		if (isSelected || isFocused) if (isMobile) smoothScroll(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 3,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
-		else smoothScrollIntoView(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 6,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
+		if (isSelected || isFocused) {
+			if (isMobile) smoothScroll(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 3,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+			else smoothScrollIntoView(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 6,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+		}
 		firstRenderRef.current = false;
 	}, [
 		isSelected,

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/Announcement/Announcement.cjs

@@ -20,6 +20,7 @@ const Announcement = ({ children }) => {
 		element.setAttribute("class", className);
 		element.setAttribute("aria-live", "polite");
 		element.setAttribute("aria-atomic", "true");
+		element.setAttribute("translate", "no");
 		document.body.appendChild(element);
 		setElement(element);
 		return () => {

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

@@ -20,6 +20,7 @@ const Announcement = ({ children }) => {
 		element.setAttribute("class", className);
 		element.setAttribute("aria-live", "polite");
 		element.setAttribute("aria-atomic", "true");
+		element.setAttribute("translate", "no");
 		document.body.appendChild(element);
 		setElement(element);
 		return () => {

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

@@ -55,8 +55,10 @@ const useFlipList = (expanded) => {
 		};
 		const activeToasts = [];
 		Array.from(refs.entries()).forEach(([toastKey, element]) => {
-			if (element !== null) if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
-			else activeToasts.push([toastKey, element]);
+			if (element !== null) {
+				if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
+				else activeToasts.push([toastKey, element]);
+			}
 		});
 		activeToasts.forEach(([toastKey, element], index) => {
 			const position = activeToasts.length - index - 1;
@@ -139,28 +141,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

@@ -55,8 +55,10 @@ const useFlipList = (expanded) => {
 		};
 		const activeToasts = [];
 		Array.from(refs.entries()).forEach(([toastKey, element]) => {
-			if (element !== null) if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
-			else activeToasts.push([toastKey, element]);
+			if (element !== null) {
+				if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
+				else activeToasts.push([toastKey, element]);
+			}
 		});
 		activeToasts.forEach(([toastKey, element], index) => {
 			const position = activeToasts.length - index - 1;
@@ -139,28 +141,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/css/atoms/sprinkles.css.d.cts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("lightMode" | "darkMode")[];
+    conditionNames: ("darkMode" | "lightMode")[];
   };
   styles: {
     readonly background: {

package/dist/lib/css/atoms/sprinkles.css.d.mts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("lightMode" | "darkMode")[];
+    conditionNames: ("darkMode" | "lightMode")[];
   };
   styles: {
     readonly background: {

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/dist/lib/utils/isLight/index.cjs

@@ -15,7 +15,7 @@ const isLight = (inputColor, foregroundColor = "#000") => {
 	const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
 	const foregroundYiq = calculateYiq(foregroundColor);
 	return colors.some((color) => {
-		return calculateYiq(color) >= 256 / 2 + foregroundYiq / 2;
+		return calculateYiq(color) >= 128 + foregroundYiq / 2;
 	});
 };
 //#endregion

package/dist/lib/utils/isLight/index.mjs

@@ -15,7 +15,7 @@ const isLight = (inputColor, foregroundColor = "#000") => {
 	const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
 	const foregroundYiq = calculateYiq(foregroundColor);
 	return colors.some((color) => {
-		return calculateYiq(color) >= 256 / 2 + foregroundYiq / 2;
+		return calculateYiq(color) >= 128 + foregroundYiq / 2;
 	});
 };
 //#endregion

package/package.json

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