braid-design-system 34.8.2 → 34.9.0

package/dist/lib/components/Avatar/Avatar.mjs

@@ -0,0 +1,211 @@
+import { palette } from "../../color/palette.mjs";
+import buildDataAttributes_default from "../private/buildDataAttributes.mjs";
+import { Box } from "../Box/Box.mjs";
+import { Text } from "../Text/Text.mjs";
+import { IconImageBroken } from "../icons/IconImageBroken/IconImageBroken.mjs";
+import { IconProfile } from "../icons/IconProfile/IconProfile.mjs";
+import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
+import { Heading } from "../Heading/Heading.mjs";
+import { Skeleton } from "../private/Skeleton/Skeleton.mjs";
+import { image, keyline, size } from "./Avatar.css.mjs";
+import assert from "assert";
+import { forwardRef, isValidElement, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/Avatar/Avatar.tsx
+const backgroundColours = [
+	{
+		value: palette.seekPink[200],
+		type: "customLight"
+	},
+	{
+		value: palette.seekBlueLight[200],
+		type: "customLight"
+	},
+	{
+		value: palette.orange[200],
+		type: "customLight"
+	},
+	{
+		value: palette.red[200],
+		type: "customLight"
+	},
+	{
+		value: palette.purple[200],
+		type: "customLight"
+	}
+];
+const isNonSvgDataUri = (src) => /^data:/i.test(src) && !/^data:image\/svg/i.test(src);
+const isEmptyDecodedImage = (img) => img.naturalWidth === 0 && img.naturalHeight === 0;
+const rasterDataUriFailedToDecode = (img) => img.complete && isEmptyDecodedImage(img) && isNonSvgDataUri(img.src);
+const avatarSizeToBorderRadius = {
+	xxlarge: "large",
+	xlarge: "large",
+	large: "standard",
+	standard: "standard",
+	small: "standard",
+	xsmall: "small"
+};
+const avatarSizeToTextSize = {
+	xxlarge: "large",
+	xlarge: "large",
+	large: "large",
+	standard: "standard",
+	small: "small",
+	xsmall: "xsmall"
+};
+const AvatarTextContent = ({ size, children }) => {
+	if (size !== "xxlarge") return /* @__PURE__ */ jsx(Text, {
+		weight: "strong",
+		size: avatarSizeToTextSize[size],
+		baseline: false,
+		children
+	});
+	return /* @__PURE__ */ jsx(Heading, {
+		level: "3",
+		component: "span",
+		children
+	});
+};
+const letterRegex = /^\p{L}/u;
+const getInitials = (fullName) => {
+	for (const character of fullName) if (letterRegex.test(character)) return character.toLocaleUpperCase();
+	return null;
+};
+const backgroundColourForName = (name) => {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	return backgroundColours[Math.abs(hash) % backgroundColours.length];
+};
+const assertIconHasNoSize = (icon) => {
+	assert(isValidElement(icon) && icon.props.size === void 0, "Icons cannot set the 'size' prop when passed to an Avatar component");
+};
+const isAvatarSize = (value) => value in size;
+const resolveAvatarSize = (size) => isAvatarSize(size) ? size : "standard";
+const Avatar = forwardRef(({ name = "", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, size: sizeProp = "standard", loading = false, imageUrl, icon, onClick, tabIndex, data, ...restProps }, ref) => {
+	const size$1 = resolveAvatarSize(sizeProp);
+	const focusable = tabIndex != null;
+	assert(!onClick || Boolean(ariaLabel), "Avatar with onClick requires aria-label so the button has an accessible name.");
+	assert(!focusable || Boolean(ariaLabel), "Avatar with tabIndex requires aria-label so the focusable avatar has an accessible name.");
+	if (icon) assertIconHasNoSize(icon);
+	const [imageError, setImageError] = useState(false);
+	const [imageLoaded, setImageLoaded] = useState(false);
+	const [imageSource, setImageSource] = useState(imageUrl);
+	const [loadingSource, setLoadingSource] = useState(loading);
+	const imageRef = useRef(null);
+	if (imageUrl !== imageSource || loading !== loadingSource) {
+		setImageSource(imageUrl);
+		setLoadingSource(loading);
+		setImageError(false);
+		setImageLoaded(false);
+	}
+	useLayoutEffect(() => {
+		setImageError(false);
+		const img = imageRef.current;
+		if (img && rasterDataUriFailedToDecode(img)) {
+			setImageError(true);
+			setImageLoaded(false);
+			return;
+		}
+		setImageLoaded(Boolean(img?.complete));
+		if (!img || typeof img.decode !== "function" || !/^data:/i.test(img.src) || /^data:image\/svg/i.test(img.src)) return;
+		let cancelled = false;
+		img.decode().then(() => {
+			if (cancelled) return;
+			if (rasterDataUriFailedToDecode(img)) setImageError(true);
+		}, () => {
+			if (!cancelled) setImageError(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [imageUrl, loading]);
+	const labelled = Boolean(ariaLabel);
+	const clickable = Boolean(onClick);
+	const borderRadius = avatarSizeToBorderRadius[size$1];
+	let a11yProps;
+	if (clickable) a11yProps = {
+		component: "button",
+		type: "button",
+		onClick,
+		"aria-label": ariaLabel
+	};
+	else if (labelled) a11yProps = {
+		role: "img",
+		"aria-label": ariaLabel
+	};
+	else if (!focusable) a11yProps = { "aria-hidden": true };
+	else a11yProps = {};
+	let content;
+	let colour = null;
+	if (loading) content = /* @__PURE__ */ jsx(Skeleton, {});
+	else if (imageUrl && imageError) content = /* @__PURE__ */ jsx(AvatarTextContent, {
+		size: size$1,
+		children: /* @__PURE__ */ jsx(IconImageBroken, {})
+	});
+	else if (imageUrl) content = /* @__PURE__ */ jsx(Box, {
+		component: "img",
+		ref: imageRef,
+		src: imageUrl,
+		alt: "",
+		"aria-hidden": true,
+		width: "full",
+		height: "full",
+		className: image,
+		opacity: imageLoaded ? void 0 : 0,
+		onError: () => setImageError(true),
+		onLoad: () => {
+			const img = imageRef.current;
+			if (img && isEmptyDecodedImage(img) && isNonSvgDataUri(img.src)) {
+				setImageError(true);
+				return;
+			}
+			setImageLoaded(true);
+		}
+	}, imageUrl);
+	else {
+		const resolvedInitials = getInitials(name);
+		const showCustomIcon = resolvedInitials === null && Boolean(icon);
+		let textContent = resolvedInitials;
+		if (showCustomIcon) textContent = icon;
+		else if (resolvedInitials === null) textContent = /* @__PURE__ */ jsx(IconProfile, {});
+		colour = resolvedInitials && !showCustomIcon ? backgroundColourForName(name) : null;
+		content = /* @__PURE__ */ jsx(AvatarTextContent, {
+			size: size$1,
+			children: textContent
+		});
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		tabIndex,
+		"aria-describedby": ariaDescribedBy,
+		position: "relative",
+		cursor: clickable ? "pointer" : void 0,
+		borderRadius,
+		background: colour?.type ?? "neutralLight",
+		outline: !clickable && focusable ? "focus" : void 0,
+		className: {
+			[size[size$1]]: true,
+			[keyline]: true,
+			[virtualTouchable]: clickable && (size$1 === "xsmall" || size$1 === "small")
+		},
+		style: colour ? { background: colour.value } : void 0,
+		...a11yProps,
+		...buildDataAttributes_default({
+			data,
+			validateRestProps: restProps
+		}),
+		children: /* @__PURE__ */ jsx(Box, {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "full",
+			height: "full",
+			overflow: "hidden",
+			borderRadius,
+			children: content
+		})
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar };

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

@@ -0,0 +1,14 @@
+const require_Avatar_css = require("./Avatar.css.cjs");
+const require_Avatar = require("./Avatar.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/lib/components/Avatar/Avatar.playroom.tsx
+const Avatar = (0, react.forwardRef)(({ size: size$1, icon, ...restProps }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+	ref,
+	...restProps,
+	size: size$1 && size$1 in require_Avatar_css.size ? size$1 : void 0,
+	icon: typeof icon === "boolean" ? void 0 : icon
+}));
+Avatar.displayName = "Avatar";
+//#endregion
+exports.Avatar = Avatar;

package/dist/lib/components/Avatar/Avatar.playroom.d.cts

@@ -0,0 +1,8 @@
+import { AvatarProps } from "./Avatar.cjs";
+//#region src/lib/components/Avatar/Avatar.playroom.d.ts
+declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "size" | "icon"> & {
+  size?: string;
+  icon?: AvatarProps["icon"] | boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Avatar };

package/dist/lib/components/Avatar/Avatar.playroom.d.mts

@@ -0,0 +1,8 @@
+import { AvatarProps } from "./Avatar.mjs";
+//#region src/lib/components/Avatar/Avatar.playroom.d.ts
+declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "size" | "icon"> & {
+  size?: string;
+  icon?: AvatarProps["icon"] | boolean;
+} & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Avatar };

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

@@ -0,0 +1,14 @@
+import { size } from "./Avatar.css.mjs";
+import { Avatar as Avatar$1 } from "./Avatar.mjs";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/Avatar/Avatar.playroom.tsx
+const Avatar = forwardRef(({ size: size$1, icon, ...restProps }, ref) => /* @__PURE__ */ jsx(Avatar$1, {
+	ref,
+	...restProps,
+	size: size$1 && size$1 in size ? size$1 : void 0,
+	icon: typeof icon === "boolean" ? void 0 : icon
+}));
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar };

package/dist/lib/components/Drawer/Drawer.cjs

@@ -2,6 +2,8 @@ const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Modal = require("../private/Modal/Modal.cjs");
 let assert = require("assert");
 assert = require_runtime.__toESM(assert, 1);
+let dedent = require("dedent");
+dedent = require_runtime.__toESM(dedent, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/Drawer/Drawer.tsx
 const validWidths = [
@@ -16,9 +18,33 @@ const modalStyle = {
 	headingLevel: "2",
 	illustration: void 0
 };
+const assertAccessibleName = ({ title, description, "aria-label": ariaLabel, "aria-description": ariaDescription }) => {
+	const docsMessage = "See the Drawer documentation for more information: https://seek-oss.github.io/braid-design-system/components/Drawer#title-and-description";
+	(0, assert.default)(typeof title === "string" !== (typeof ariaLabel === "string"), dedent.default`
+      Drawer requires either a title or an aria-label.
+
+      ${docsMessage}
+    `);
+	(0, assert.default)(typeof ariaLabel !== "string" || ariaLabel.trim() !== "", dedent.default`
+      Drawer aria-label must not be empty.
+
+      ${docsMessage}
+    `);
+	(0, assert.default)(description === void 0 || typeof title === "string", dedent.default`
+      Drawer description can only be used with a title.
+
+      ${docsMessage}
+    `);
+	(0, assert.default)(ariaDescription === void 0 || typeof ariaLabel === "string", dedent.default`
+      Drawer aria-description can only be used with an aria-label.
+
+      ${docsMessage}
+    `);
+};
 const Drawer = ({ width = defaultWidth, position = defaultPosition, footer, ...restProps }) => {
 	(0, assert.default)(validWidths.indexOf(width) >= 0, `Invalid width: ${width}`);
 	(0, assert.default)(validPositions.indexOf(position) >= 0, `Invalid position: ${position}`);
+	assertAccessibleName(restProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Modal.Modal, {
 		width,
 		position,

package/dist/lib/components/Drawer/Drawer.d.cts

@@ -1,6 +1,5 @@
 import { ModalContentProps } from "../private/Modal/ModalContent.cjs";
 import { ModalProps } from "../private/Modal/Modal.cjs";
-import { FC } from "react";
 //#region src/lib/components/Drawer/Drawer.d.ts
 declare const validWidths: readonly ["small", "medium", "large"];
 declare const validPositions: readonly ["left", "right"];
@@ -8,11 +7,23 @@ declare const modalStyle: {
   readonly headingLevel: "2";
   readonly illustration: undefined;
 };
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position' | 'coverImage'> {
+type DrawerHeaderProps = {
+  title: string;
+  description?: ModalContentProps['description'];
+  'aria-label'?: never;
+  'aria-description'?: never;
+} | {
+  title?: never;
+  description?: never;
+  'aria-label': string;
+  'aria-description'?: string;
+};
+type DrawerModalOmittedKeys = keyof typeof modalStyle | 'width' | 'position' | 'coverImage' | 'title' | 'description' | 'aria-label' | 'aria-description';
+type DrawerProps = Omit<ModalProps, DrawerModalOmittedKeys> & DrawerHeaderProps & {
   width?: (typeof validWidths)[number];
   position?: (typeof validPositions)[number];
   footer?: ModalContentProps['footer'];
-}
-declare const Drawer: FC<DrawerProps>;
+};
+declare const Drawer: ({ width, position, footer, ...restProps }: DrawerProps) => import("react").JSX.Element;
 //#endregion
 export { Drawer, DrawerProps };

package/dist/lib/components/Drawer/Drawer.d.mts

@@ -1,6 +1,5 @@
 import { ModalContentProps } from "../private/Modal/ModalContent.mjs";
 import { ModalProps } from "../private/Modal/Modal.mjs";
-import { FC } from "react";
 //#region src/lib/components/Drawer/Drawer.d.ts
 declare const validWidths: readonly ["small", "medium", "large"];
 declare const validPositions: readonly ["left", "right"];
@@ -8,11 +7,23 @@ declare const modalStyle: {
   readonly headingLevel: "2";
   readonly illustration: undefined;
 };
-interface DrawerProps extends Omit<ModalProps, keyof typeof modalStyle | 'width' | 'position' | 'coverImage'> {
+type DrawerHeaderProps = {
+  title: string;
+  description?: ModalContentProps['description'];
+  'aria-label'?: never;
+  'aria-description'?: never;
+} | {
+  title?: never;
+  description?: never;
+  'aria-label': string;
+  'aria-description'?: string;
+};
+type DrawerModalOmittedKeys = keyof typeof modalStyle | 'width' | 'position' | 'coverImage' | 'title' | 'description' | 'aria-label' | 'aria-description';
+type DrawerProps = Omit<ModalProps, DrawerModalOmittedKeys> & DrawerHeaderProps & {
   width?: (typeof validWidths)[number];
   position?: (typeof validPositions)[number];
   footer?: ModalContentProps['footer'];
-}
-declare const Drawer: FC<DrawerProps>;
+};
+declare const Drawer: ({ width, position, footer, ...restProps }: DrawerProps) => import("react").JSX.Element;
 //#endregion
 export { Drawer, DrawerProps };

package/dist/lib/components/Drawer/Drawer.mjs

@@ -1,5 +1,6 @@
 import { AllowCloseContext, Modal } from "../private/Modal/Modal.mjs";
 import assert from "assert";
+import dedent from "dedent";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/Drawer/Drawer.tsx
 const validWidths = [
@@ -14,9 +15,33 @@ const modalStyle = {
 	headingLevel: "2",
 	illustration: void 0
 };
+const assertAccessibleName = ({ title, description, "aria-label": ariaLabel, "aria-description": ariaDescription }) => {
+	const docsMessage = "See the Drawer documentation for more information: https://seek-oss.github.io/braid-design-system/components/Drawer#title-and-description";
+	assert(typeof title === "string" !== (typeof ariaLabel === "string"), dedent`
+      Drawer requires either a title or an aria-label.
+
+      ${docsMessage}
+    `);
+	assert(typeof ariaLabel !== "string" || ariaLabel.trim() !== "", dedent`
+      Drawer aria-label must not be empty.
+
+      ${docsMessage}
+    `);
+	assert(description === void 0 || typeof title === "string", dedent`
+      Drawer description can only be used with a title.
+
+      ${docsMessage}
+    `);
+	assert(ariaDescription === void 0 || typeof ariaLabel === "string", dedent`
+      Drawer aria-description can only be used with an aria-label.
+
+      ${docsMessage}
+    `);
+};
 const Drawer = ({ width = defaultWidth, position = defaultPosition, footer, ...restProps }) => {
 	assert(validWidths.indexOf(width) >= 0, `Invalid width: ${width}`);
 	assert(validPositions.indexOf(position) >= 0, `Invalid position: ${position}`);
+	assertAccessibleName(restProps);
 	return /* @__PURE__ */ jsx(Modal, {
 		width,
 		position,

package/dist/lib/components/Heading/Heading.cjs

@@ -18,7 +18,8 @@ const Heading = ({ level, weight, component, ...typographyProps }) => /* @__PURE
 			require_typography_css.fontFamily,
 			require_typography_css.headingWeight[weight || "regular"],
 			require_typography_css.heading[level],
-			require_typography_css.tone.neutral
+			require_typography_css.tone.neutral,
+			require_typography_css.headingSubSupScript
 		]
 	})
 });

package/dist/lib/components/Heading/Heading.mjs

@@ -1,4 +1,4 @@
-import { fontFamily, heading, headingWeight, tone } from "../../css/typography.css.mjs";
+import { fontFamily, heading, headingSubSupScript, headingWeight, tone } from "../../css/typography.css.mjs";
 import { Typography } from "../private/Typography/Typography.mjs";
 import HeadingContext_default from "./HeadingContext.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -18,7 +18,8 @@ const Heading = ({ level, weight, component, ...typographyProps }) => /* @__PURE
 			fontFamily,
 			headingWeight[weight || "regular"],
 			heading[level],
-			tone.neutral
+			tone.neutral,
+			headingSubSupScript
 		]
 	})
 });

package/dist/lib/components/List/List.cjs

@@ -68,6 +68,21 @@ const List = ({ children, size: sizeProp, tone: toneProp, space: spaceProp, type
 			data,
 			children: react.Children.map(listItems, (listItem, index) => {
 				const resolvedIndex = index + (start - 1);
+				let indicator;
+				if (type === "number") indicator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CharacterBullet, {
+					length: lastNumberLength,
+					children: resolvedIndex + 1
+				});
+				else if (type === "alpha") indicator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CharacterBullet, { children: numberToAlpha(resolvedIndex + 1) });
+				else if (type === "roman") indicator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CharacterBullet, {
+					length: 2,
+					children: numberToRomanNumerals(resolvedIndex + 1)
+				});
+				else if (type === "icon" && "icon" in restProps) indicator = restProps.icon;
+				else indicator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+					borderRadius: "full",
+					className: [require_List_css.currentColor, require_List_css.size[size$1]]
+				});
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 					component: "li",
 					display: "flex",
@@ -81,22 +96,7 @@ const List = ({ children, size: sizeProp, tone: toneProp, space: spaceProp, type
 							className: require_lineHeightContainer_css.lineHeightContainer[size$1],
 							userSelect: "none",
 							"aria-hidden": true,
-							children: (() => {
-								if (type === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CharacterBullet, {
-									length: lastNumberLength,
-									children: resolvedIndex + 1
-								});
-								if (type === "alpha") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CharacterBullet, { children: numberToAlpha(resolvedIndex + 1) });
-								if (type === "roman") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CharacterBullet, {
-									length: 2,
-									children: numberToRomanNumerals(resolvedIndex + 1)
-								});
-								if (type === "icon" && "icon" in restProps) return restProps.icon;
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-									borderRadius: "full",
-									className: [require_List_css.currentColor, require_List_css.size[size$1]]
-								});
-							})()
+							children: indicator
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 						minWidth: 0,

package/dist/lib/components/List/List.mjs

@@ -68,6 +68,21 @@ const List = ({ children, size: sizeProp, tone: toneProp, space: spaceProp, type
 			data,
 			children: Children.map(listItems, (listItem, index) => {
 				const resolvedIndex = index + (start - 1);
+				let indicator;
+				if (type === "number") indicator = /* @__PURE__ */ jsx(CharacterBullet, {
+					length: lastNumberLength,
+					children: resolvedIndex + 1
+				});
+				else if (type === "alpha") indicator = /* @__PURE__ */ jsx(CharacterBullet, { children: numberToAlpha(resolvedIndex + 1) });
+				else if (type === "roman") indicator = /* @__PURE__ */ jsx(CharacterBullet, {
+					length: 2,
+					children: numberToRomanNumerals(resolvedIndex + 1)
+				});
+				else if (type === "icon" && "icon" in restProps) indicator = restProps.icon;
+				else indicator = /* @__PURE__ */ jsx(Box, {
+					borderRadius: "full",
+					className: [currentColor, size[size$1]]
+				});
 				return /* @__PURE__ */ jsxs(Box, {
 					component: "li",
 					display: "flex",
@@ -81,22 +96,7 @@ const List = ({ children, size: sizeProp, tone: toneProp, space: spaceProp, type
 							className: lineHeightContainer[size$1],
 							userSelect: "none",
 							"aria-hidden": true,
-							children: (() => {
-								if (type === "number") return /* @__PURE__ */ jsx(CharacterBullet, {
-									length: lastNumberLength,
-									children: resolvedIndex + 1
-								});
-								if (type === "alpha") return /* @__PURE__ */ jsx(CharacterBullet, { children: numberToAlpha(resolvedIndex + 1) });
-								if (type === "roman") return /* @__PURE__ */ jsx(CharacterBullet, {
-									length: 2,
-									children: numberToRomanNumerals(resolvedIndex + 1)
-								});
-								if (type === "icon" && "icon" in restProps) return restProps.icon;
-								return /* @__PURE__ */ jsx(Box, {
-									borderRadius: "full",
-									className: [currentColor, size[size$1]]
-								});
-							})()
+							children: indicator
 						})
 					}), /* @__PURE__ */ jsx(Box, {
 						minWidth: 0,

package/dist/lib/components/Rating/Rating.cjs

@@ -1,8 +1,9 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Box = require("../Box/Box.cjs");
-require("../private/iconSlotSpace.cjs");
+const require_iconSlotSpace = require("../private/iconSlotSpace.cjs");
 const require_Text = require("../Text/Text.cjs");
 const require_IconContainer = require("../icons/IconContainer.cjs");
+const require_TextLink = require("../TextLink/TextLink.cjs");
 const require_IconRatingEmptySvg = require("../icons/IconRating/IconRatingEmptySvg.cjs");
 const require_IconRatingFullSvg = require("../icons/IconRating/IconRatingFullSvg.cjs");
 const require_IconRatingHalfSvg = require("../icons/IconRating/IconRatingHalfSvg.cjs");
@@ -27,8 +28,10 @@ const RatingStar = ({ percent, ...restProps }) => {
 	});
 };
 const ratingArr = [...Array(5)];
-const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "brandAccent", "aria-label": ariaLabel, data }) => {
+const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "brandAccent", "aria-label": ariaLabel, data, reviewText, reviewLink, onClick }) => {
 	(0, assert.default)(!rating || rating >= 0 && rating <= 5, "Rating must be between 0 and 5");
+	(0, assert.default)(!reviewLink || typeof reviewText === "string", "reviewText must be set when reviewLink is provided");
+	(0, assert.default)(!onClick || reviewLink, "reviewLink must be set when onClick is provided");
 	if (process.env.NODE_ENV !== "production") {
 		if (typeof weight !== "undefined" && variant === "starsOnly") console.warn(dedent.default`
           The "weight" prop is not valid with the "starsOnly" variant as there is no visible text. Either remove the \`weight\` prop or choose an alternative \`variant\`.
@@ -38,28 +41,53 @@ const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "b
              />
         `, "color: red", "color: inherit");
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
+	const stars = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: "span",
+		className: require_Rating_css.inlineFlex,
+		role: "img",
+		"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
+		children: variant === "minimal" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingStar, {
+			percent: 100,
+			tone: tone === "neutral" ? "neutral" : "brandAccent"
+		}) : ratingArr.map((_, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingStar, {
+			percent: getPercent(rating, position),
+			tone: tone === "neutral" ? "neutral" : "brandAccent"
+		}, position))
+	});
+	const ratingText = variant !== "starsOnly" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: "span",
+		paddingLeft: require_iconSlotSpace.iconSlotSpace,
+		"aria-hidden": true,
+		children: rating.toFixed(1)
+	}) : null;
+	let reviewContent = null;
+	if (reviewText) reviewContent = reviewLink ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextLink.TextLink, {
+		href: reviewLink,
+		weight: "weak",
+		onClick,
+		children: reviewText
+	}) : reviewText;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 		size,
 		data,
 		weight,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Rating_css.inlineFlex,
-			role: "img",
-			"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
-			children: variant === "minimal" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingStar, {
-				percent: 100,
-				tone: tone === "neutral" ? "neutral" : "brandAccent"
-			}) : ratingArr.map((_, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingStar, {
-				percent: getPercent(rating, position),
-				tone: tone === "neutral" ? "neutral" : "brandAccent"
-			}, position))
-		}), variant !== "starsOnly" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		children: reviewContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			component: "span",
-			paddingLeft: "xxsmall",
-			"aria-hidden": true,
-			children: rating.toFixed(1)
-		})]
+			className: require_Rating_css.clip,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+				component: "span",
+				className: require_Rating_css.row,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+					component: "span",
+					className: require_Rating_css.group,
+					children: [stars, ratingText]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+					component: "span",
+					className: require_Rating_css.reviews,
+					children: reviewContent
+				})]
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [stars, ratingText] })
 	});
 };
 //#endregion