braid-design-system 34.8.2 → 34.9.0

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

@@ -1,3 +1,4 @@
+const require_atoms = require("../../css/atoms/atoms.cjs");
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/lib/components/Rating/Rating.css.ts
@@ -6,6 +7,39 @@ const inlineFlex = (0, _vanilla_extract_css.style)({
 	display: "inline-flex",
 	gap: "1px"
 }, "inlineFlex");
+const separatorSlot = "1em";
+const clip = (0, _vanilla_extract_css.style)([require_atoms.atoms({ display: "block" }), {
+	overflowX: "clip",
+	overflowInline: "clip",
+	overflowBlock: "visible"
+}], "clip");
+const row = (0, _vanilla_extract_css.style)({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	marginInlineStart: `-${separatorSlot}`
+}, "row");
+const group = (0, _vanilla_extract_css.style)({ paddingInlineStart: separatorSlot }, "group");
+const reviews = (0, _vanilla_extract_css.style)({
+	position: "relative",
+	paddingInlineStart: separatorSlot,
+	whiteSpace: "nowrap",
+	"::before": {
+		content: ["\"·\"", "\"·\" / \"\""],
+		position: "absolute",
+		insetInlineStart: 0,
+		top: 0,
+		bottom: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: separatorSlot
+	}
+}, "reviews");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
 //#endregion
+exports.clip = clip;
+exports.group = group;
 exports.inlineFlex = inlineFlex;
+exports.reviews = reviews;
+exports.row = row;

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

@@ -1,3 +1,4 @@
+import { atoms } from "../../css/atoms/atoms.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 //#region src/lib/components/Rating/Rating.css.ts
@@ -6,6 +7,35 @@ const inlineFlex = style({
 	display: "inline-flex",
 	gap: "1px"
 }, "inlineFlex");
+const separatorSlot = "1em";
+const clip = style([atoms({ display: "block" }), {
+	overflowX: "clip",
+	overflowInline: "clip",
+	overflowBlock: "visible"
+}], "clip");
+const row = style({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	marginInlineStart: `-${separatorSlot}`
+}, "row");
+const group = style({ paddingInlineStart: separatorSlot }, "group");
+const reviews = style({
+	position: "relative",
+	paddingInlineStart: separatorSlot,
+	whiteSpace: "nowrap",
+	"::before": {
+		content: ["\"·\"", "\"·\" / \"\""],
+		position: "absolute",
+		insetInlineStart: 0,
+		top: 0,
+		bottom: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: separatorSlot
+	}
+}, "reviews");
 endFileScope();
 //#endregion
-export { inlineFlex };
+export { clip, group, inlineFlex, reviews, row };

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

@@ -1,5 +1,5 @@
 import { TextProps } from "../Text/Text.cjs";
-import { FC } from "react";
+import { FC, MouseEventHandler } from "react";
 //#region src/lib/components/Rating/Rating.d.ts
 interface RatingBaseProps {
   rating: number;
@@ -9,7 +9,16 @@ interface RatingBaseProps {
   tone?: Extract<TextProps['tone'], 'brandAccent' | 'neutral'>;
 }
 type RatingVariants = 'full' | 'starsOnly' | 'minimal';
-type RatingProps = RatingBaseProps & ({
+type ReviewProps = {
+  reviewText?: string;
+  reviewLink?: never;
+  onClick?: never;
+} | {
+  reviewText: string;
+  reviewLink: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+type RatingProps = RatingBaseProps & ReviewProps & ({
   weight?: never;
   variant?: RatingVariants;
 } | {

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

@@ -1,5 +1,5 @@
 import { TextProps } from "../Text/Text.mjs";
-import { FC } from "react";
+import { FC, MouseEventHandler } from "react";
 //#region src/lib/components/Rating/Rating.d.ts
 interface RatingBaseProps {
   rating: number;
@@ -9,7 +9,16 @@ interface RatingBaseProps {
   tone?: Extract<TextProps['tone'], 'brandAccent' | 'neutral'>;
 }
 type RatingVariants = 'full' | 'starsOnly' | 'minimal';
-type RatingProps = RatingBaseProps & ({
+type ReviewProps = {
+  reviewText?: string;
+  reviewLink?: never;
+  onClick?: never;
+} | {
+  reviewText: string;
+  reviewLink: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+type RatingProps = RatingBaseProps & ReviewProps & ({
   weight?: never;
   variant?: RatingVariants;
 } | {

package/dist/lib/components/Rating/Rating.mjs

@@ -1,14 +1,15 @@
 import { Box } from "../Box/Box.mjs";
-import "../private/iconSlotSpace.mjs";
+import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
 import { Text } from "../Text/Text.mjs";
 import { IconContainer } from "../icons/IconContainer.mjs";
+import { TextLink } from "../TextLink/TextLink.mjs";
 import { IconRatingEmptySvg } from "../icons/IconRating/IconRatingEmptySvg.mjs";
 import { IconRatingFullSvg } from "../icons/IconRating/IconRatingFullSvg.mjs";
 import { IconRatingHalfSvg } from "../icons/IconRating/IconRatingHalfSvg.mjs";
-import { inlineFlex } from "./Rating.css.mjs";
+import { clip, group, inlineFlex, reviews, row } from "./Rating.css.mjs";
 import assert from "assert";
 import dedent from "dedent";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/components/Rating/Rating.tsx
 const getPercent = (rating, position) => Math.round(Math.min(Math.max(rating - position, 0), 1) * 100);
 const RatingStar = ({ percent, ...restProps }) => {
@@ -24,8 +25,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 }) => {
 	assert(!rating || rating >= 0 && rating <= 5, "Rating must be between 0 and 5");
+	assert(!reviewLink || typeof reviewText === "string", "reviewText must be set when reviewLink is provided");
+	assert(!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`
           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\`.
@@ -35,28 +38,53 @@ const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "b
              />
         `, "color: red", "color: inherit");
 	}
-	return /* @__PURE__ */ jsxs(Text, {
+	const stars = /* @__PURE__ */ jsx(Box, {
+		component: "span",
+		className: inlineFlex,
+		role: "img",
+		"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
+		children: variant === "minimal" ? /* @__PURE__ */ jsx(RatingStar, {
+			percent: 100,
+			tone: tone === "neutral" ? "neutral" : "brandAccent"
+		}) : ratingArr.map((_, position) => /* @__PURE__ */ jsx(RatingStar, {
+			percent: getPercent(rating, position),
+			tone: tone === "neutral" ? "neutral" : "brandAccent"
+		}, position))
+	});
+	const ratingText = variant !== "starsOnly" ? /* @__PURE__ */ jsx(Box, {
+		component: "span",
+		paddingLeft: iconSlotSpace,
+		"aria-hidden": true,
+		children: rating.toFixed(1)
+	}) : null;
+	let reviewContent = null;
+	if (reviewText) reviewContent = reviewLink ? /* @__PURE__ */ jsx(TextLink, {
+		href: reviewLink,
+		weight: "weak",
+		onClick,
+		children: reviewText
+	}) : reviewText;
+	return /* @__PURE__ */ jsx(Text, {
 		size,
 		data,
 		weight,
-		children: [/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: inlineFlex,
-			role: "img",
-			"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
-			children: variant === "minimal" ? /* @__PURE__ */ jsx(RatingStar, {
-				percent: 100,
-				tone: tone === "neutral" ? "neutral" : "brandAccent"
-			}) : ratingArr.map((_, position) => /* @__PURE__ */ jsx(RatingStar, {
-				percent: getPercent(rating, position),
-				tone: tone === "neutral" ? "neutral" : "brandAccent"
-			}, position))
-		}), variant !== "starsOnly" && /* @__PURE__ */ jsx(Box, {
+		children: reviewContent ? /* @__PURE__ */ jsx(Box, {
 			component: "span",
-			paddingLeft: "xxsmall",
-			"aria-hidden": true,
-			children: rating.toFixed(1)
-		})]
+			className: clip,
+			children: /* @__PURE__ */ jsxs(Box, {
+				component: "span",
+				className: row,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					component: "span",
+					className: group,
+					children: [stars, ratingText]
+				}), /* @__PURE__ */ jsx(Box, {
+					component: "span",
+					className: reviews,
+					children: reviewContent
+				})]
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [stars, ratingText] })
 	});
 };
 //#endregion

package/dist/lib/components/Text/Text.cjs

@@ -1,4 +1,5 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_typography_css = require("../../css/typography.css.cjs");
 const require_TextContext = require("./TextContext.cjs");
 const require_typography = require("../../css/typography.cjs");
 const require_Typography = require("../private/Typography/Typography.cjs");
@@ -32,7 +33,7 @@ const Text = ({ size: sizeProp, tone: toneProp, weight: weightProp, maxLines: ma
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 			maxLines,
 			...typographyProps,
-			className: require_typography.textStyles(textStylingProps)
+			className: [require_typography.textStyles(textStylingProps), require_typography_css.textSubSupScript]
 		})
 	});
 };

package/dist/lib/components/Text/Text.mjs

@@ -1,3 +1,4 @@
+import { textSubSupScript } from "../../css/typography.css.mjs";
 import { TextContext } from "./TextContext.mjs";
 import { textStyles } from "../../css/typography.mjs";
 import { Typography } from "../private/Typography/Typography.mjs";
@@ -30,7 +31,7 @@ const Text = ({ size: sizeProp, tone: toneProp, weight: weightProp, maxLines: ma
 		children: /* @__PURE__ */ jsx(Typography, {
 			maxLines,
 			...typographyProps,
-			className: textStyles(textStylingProps)
+			className: [textStyles(textStylingProps), textSubSupScript]
 		})
 	});
 };

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

@@ -18,6 +18,7 @@ import { FieldLabel } from "./FieldLabel/FieldLabel.cjs";
 import { FieldMessage } from "./FieldMessage/FieldMessage.cjs";
 import { Autosuggest } from "./Autosuggest/Autosuggest.cjs";
 import { filterSuggestions } from "./Autosuggest/filterSuggestions.cjs";
+import { Avatar } from "./Avatar/Avatar.cjs";
 import { Bleed } from "./Bleed/Bleed.cjs";
 import { BoxRenderer } from "./Box/BoxRenderer.cjs";
 import { ButtonIcon } from "./ButtonIcon/ButtonIcon.cjs";
@@ -199,4 +200,4 @@ import "./icons/index.cjs";
 //#region src/lib/components/index.d.ts
 type LinkComponent = LinkComponent$1;
 //#endregion
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompanyVerified, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconImageBroken, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPhotoAdd, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast };
+export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Avatar, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompanyVerified, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconImageBroken, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPhotoAdd, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast };

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

@@ -18,6 +18,7 @@ import { FieldLabel } from "./FieldLabel/FieldLabel.mjs";
 import { FieldMessage } from "./FieldMessage/FieldMessage.mjs";
 import { Autosuggest } from "./Autosuggest/Autosuggest.mjs";
 import { filterSuggestions } from "./Autosuggest/filterSuggestions.mjs";
+import { Avatar } from "./Avatar/Avatar.mjs";
 import { Bleed } from "./Bleed/Bleed.mjs";
 import { BoxRenderer } from "./Box/BoxRenderer.mjs";
 import { ButtonIcon } from "./ButtonIcon/ButtonIcon.mjs";
@@ -199,4 +200,4 @@ import "./icons/index.mjs";
 //#region src/lib/components/index.d.ts
 type LinkComponent = LinkComponent$1;
 //#endregion
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompanyVerified, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconImageBroken, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPhotoAdd, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast };
+export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Avatar, Badge, Bleed, PublicBox as Box, BoxRenderer, BraidPortal, BraidProvider, Button, ButtonIcon, ButtonLink, Card, Checkbox, CheckboxStandalone, Column, Columns, ContentBlock, Dialog, Disclosure, Divider, Drawer, Dropdown, FieldLabel, FieldMessage, Heading, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompanyVerified, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconImageBroken, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPhotoAdd, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline, Link, LinkComponent, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, RadioGroup, RadioItem, Rating, Secondary, Spread, Stack, Step, Stepper, Strong, Tab, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs, TabsProvider, Tag, Text, TextDropdown, TextField, TextLink, TextLinkButton, Textarea, ThemeNameConsumer, Tiles, ToastProvider, Toggle, TooltipRenderer, filterSuggestions, makeLinkComponent, useColor, useResponsiveValue, useSpace, useThemeName, useToast };

package/dist/lib/components/private/InlineField/StyledInput.cjs

@@ -12,10 +12,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const tones = ["neutral", "critical"];
 const Indicator = ({ type, checked, hover = false, disabled = false }) => {
 	const isCheckbox = type === "checkbox";
-	const iconTone = (() => {
-		if (disabled) return "secondary";
-		if (hover) return "formAccent";
-	})();
+	let iconTone;
+	if (disabled) iconTone = "secondary";
+	else if (hover) iconTone = "formAccent";
 	return isCheckbox ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 		height: "full",
 		transition: "fast",

package/dist/lib/components/private/InlineField/StyledInput.mjs

@@ -12,10 +12,9 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 const tones = ["neutral", "critical"];
 const Indicator = ({ type, checked, hover = false, disabled = false }) => {
 	const isCheckbox = type === "checkbox";
-	const iconTone = (() => {
-		if (disabled) return "secondary";
-		if (hover) return "formAccent";
-	})();
+	let iconTone;
+	if (disabled) iconTone = "secondary";
+	else if (hover) iconTone = "formAccent";
 	return isCheckbox ? /* @__PURE__ */ jsxs(Box, {
 		height: "full",
 		transition: "fast",

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

@@ -63,12 +63,13 @@ const reducer = (prevState, action) => {
 	}
 };
 const ANIMATION_DURATION = 300;
-const Modal = ({ id, open, children, description, onClose, width, closeLabel, illustration, title, headingLevel, position, ...restProps }) => {
+const Modal = ({ id, open, children, description, onClose, width, closeLabel, illustration, title, "aria-label": ariaLabel, "aria-description": ariaDescription, headingLevel, position, ...restProps }) => {
 	const [trapActive, setTrapActive] = (0, react.useState)(true);
 	const [state, dispatch] = (0, react.useReducer)(reducer, INITIAL);
 	const allowClose = (0, react.useContext)(AllowCloseContext);
 	const shouldFocus = typeof document !== "undefined" && typeof document.hasFocus === "function" && document.hasFocus();
 	const openRef = (0, react.useRef)(open);
+	const dialogRef = (0, react.useRef)(null);
 	const modalRef = (0, react.useRef)(null);
 	const headingRef = (0, react.useRef)(null);
 	const closeHandlerRef = (0, react.useRef)(onClose);
@@ -113,7 +114,7 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 		autoFocus: false,
 		onActivation: () => {
 			if (state === OPEN) return;
-			if (headingRef.current && shouldFocus) headingRef.current.focus();
+			if (shouldFocus) (headingRef.current || dialogRef.current)?.focus();
 			dispatch(ANIMATION_COMPLETE);
 		},
 		returnFocus: true,
@@ -147,8 +148,11 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 				closeLabel,
 				illustration,
 				title,
+				"aria-label": ariaLabel,
+				"aria-description": ariaDescription,
 				headingLevel,
 				headingRef,
+				dialogRef,
 				modalRef,
 				position,
 				scrollLock: !(state === CLOSING),

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

@@ -61,12 +61,13 @@ const reducer = (prevState, action) => {
 	}
 };
 const ANIMATION_DURATION = 300;
-const Modal = ({ id, open, children, description, onClose, width, closeLabel, illustration, title, headingLevel, position, ...restProps }) => {
+const Modal = ({ id, open, children, description, onClose, width, closeLabel, illustration, title, "aria-label": ariaLabel, "aria-description": ariaDescription, headingLevel, position, ...restProps }) => {
 	const [trapActive, setTrapActive] = useState(true);
 	const [state, dispatch] = useReducer(reducer, INITIAL);
 	const allowClose = useContext(AllowCloseContext);
 	const shouldFocus = typeof document !== "undefined" && typeof document.hasFocus === "function" && document.hasFocus();
 	const openRef = useRef(open);
+	const dialogRef = useRef(null);
 	const modalRef = useRef(null);
 	const headingRef = useRef(null);
 	const closeHandlerRef = useRef(onClose);
@@ -111,7 +112,7 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 		autoFocus: false,
 		onActivation: () => {
 			if (state === OPEN) return;
-			if (headingRef.current && shouldFocus) headingRef.current.focus();
+			if (shouldFocus) (headingRef.current || dialogRef.current)?.focus();
 			dispatch(ANIMATION_COMPLETE);
 		},
 		returnFocus: true,
@@ -145,8 +146,11 @@ const Modal = ({ id, open, children, description, onClose, width, closeLabel, il
 				closeLabel,
 				illustration,
 				title,
+				"aria-label": ariaLabel,
+				"aria-description": ariaDescription,
 				headingLevel,
 				headingRef,
+				dialogRef,
 				modalRef,
 				position,
 				scrollLock: !(state === CLOSING),

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

@@ -3,11 +3,13 @@ const require_buildDataAttributes = require("../buildDataAttributes.cjs");
 const require_Box = require("../../Box/Box.cjs");
 const require_Stack = require("../../Stack/Stack.cjs");
 const require_useFallbackId = require("../../../hooks/useFallbackId.cjs");
+const require_index = require("../../../hooks/useIcon/index.cjs");
 const require_IconClear = require("../../icons/IconClear/IconClear.cjs");
 const require_Column = require("../../Column/Column.cjs");
 const require_Columns = require("../../Columns/Columns.cjs");
 const require_Bleed = require("../../Bleed/Bleed.cjs");
 const require_ButtonIcon = require("../../ButtonIcon/ButtonIcon.cjs");
+const require_HiddenVisually = require("../../HiddenVisually/HiddenVisually.cjs");
 const require_normalizeKey = require("../normalizeKey.cjs");
 const require_Heading = require("../../Heading/Heading.cjs");
 const require_pageBlockGutters = require("../../PageBlock/pageBlockGutters.cjs");
@@ -22,6 +24,7 @@ const modalPadding = {
 	mobile: "gutter",
 	tablet: "large"
 };
+const modalContentGap = "large";
 const ModalContentHeader = (0, react.forwardRef)(({ title, headingLevel, description, descriptionId, illustration, reserveCloseArea }, ref) => {
 	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 		space: headingLevel === "2" ? {
@@ -79,7 +82,7 @@ const ModalContentScrollLayout = ({ children, contentStartRef, coverImageEnabled
 	direction: "vertical",
 	children: [coverImageEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { ref: contentStartRef }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		display: "flex",
-		gap: "large",
+		gap: modalContentGap,
 		flexDirection: "column",
 		height: applyFullHeight ? "full" : void 0,
 		paddingTop: modalPadding,
@@ -128,7 +131,7 @@ const ModalCoverImageLayout = ({ width, image, children, footer, applyHeightLimi
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.Column, { children: coverImage$1 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Column.Column, { children: content })]
 	});
 };
-const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, coverImage, title, headingRef: headingRefProp, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, footer, ...restProps }) => {
+const ModalContent = ({ id, children, description, onClose, width, closeLabel = "Close", illustration, coverImage, title, "aria-label": ariaLabel, "aria-description": ariaDescription, headingRef: headingRefProp, dialogRef, modalRef: modalRefProp, scrollLock = true, position, headingLevel, data, footer, ...restProps }) => {
 	const resolvedId = require_useFallbackId.useFallbackId(id);
 	const descriptionId = (0, react.useId)();
 	const defaultModalRef = (0, react.useRef)(null);
@@ -161,25 +164,48 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		contentStartRef,
 		coverImageEnabled,
 		hasFooter: Boolean(footer),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
-			title,
-			headingLevel,
-			description,
-			descriptionId,
-			illustration: illustration && !coverImageEnabled ? illustration : void 0,
-			ref: headingRef,
-			reserveCloseArea: true
-		}), children]
+		children: [
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
+				title,
+				headingLevel,
+				description,
+				descriptionId,
+				illustration: illustration && !coverImageEnabled ? illustration : void 0,
+				ref: headingRef,
+				reserveCloseArea: true
+			}) : null,
+			isDrawer && !title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
+				require_Bleed.Bleed,
+				/**
+				* Matches close button size so content starts below it. `bottom`
+				* cancels the gap that follows the spacer.
+				*/
+				{
+					top: "xxsmall",
+					bottom: modalContentGap,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+						padding: "xsmall",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, { className: require_index.iconSize({
+							size: "standard",
+							crop: true
+						}) })
+					})
+				}
+			) : null,
+			children
+		]
 	});
 	const modalFooter = footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalFooter, {
 		applyPageBlockGutters: isDrawer,
 		children: footer
 	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		ref: dialogRef,
 		role: "dialog",
-		"aria-label": title,
-		"aria-describedby": description ? descriptionId : void 0,
+		"aria-label": ariaLabel || title,
+		"aria-describedby": title && description || ariaDescription ? descriptionId : void 0,
 		"aria-modal": "true",
+		tabIndex: title ? void 0 : -1,
 		id: resolvedId,
 		onKeyDown: handleEscape,
 		position: "relative",
@@ -201,68 +227,75 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 			borderRadius: modalRadius,
 			width: width !== "content" ? "full" : void 0,
 			maxWidth: width !== "content" ? width : void 0,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
-				noRelative: true,
-				forwardProps: true,
-				enabled: scrollLock,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
-					display: "flex",
-					flexDirection: "column",
-					background: "surface",
-					borderRadius: modalRadius,
-					overflow: "auto",
-					position: "relative",
-					width: width !== "content" ? "full" : void 0,
-					height: isDrawer ? "full" : void 0,
-					className: {
-						[require_Modal_css.pointerEventsAll]: true,
-						[require_Modal_css.maxSize[position]]: !isDrawer,
-						[require_Modal_css.hideOverflowAboveMobile]: allowColumnLayout
-					},
-					...require_buildDataAttributes.default({
-						data,
-						validateRestProps: restProps
-					}),
-					children: [coverImageEnabled && coverImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollContainer.ScrollContainer, {
-						direction: "vertical",
-						startRef: contentStartRef,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCoverImageLayout, {
-							width,
-							image: coverImage,
-							footer: !isMobile ? modalFooter : null,
-							applyHeightLimit: allowColumnLayout,
-							children: modalLayout
-						})
-					}) : modalLayout, (!coverImageEnabled || isMobile) && modalFooter]
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-				position: "absolute",
-				zIndex: "sticky",
-				top: 0,
-				pointerEvents: "none",
-				width: "full",
-				display: "flex",
-				justifyContent: "flexEnd",
-				paddingTop: modalPadding,
-				paddingRight: isDrawer ? require_pageBlockGutters.pageBlockGutters : modalPadding,
-				className: !isDrawer && require_Modal_css.maxSize[position],
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Bleed.Bleed, {
-					space: "xxsmall",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-						position: "relative",
+			children: [
+				ariaDescription ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HiddenVisually.HiddenVisually, {
+					id: descriptionId,
+					children: ariaDescription
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
+					noRelative: true,
+					forwardProps: true,
+					enabled: scrollLock,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+						display: "flex",
+						flexDirection: "column",
 						background: "surface",
-						borderRadius: "full",
-						padding: "xsmall",
-						className: [require_Modal_css.closeIconOffset, require_Modal_css.pointerEventsAll],
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonIcon.ButtonIcon, {
-							label: closeLabel,
-							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconClear.IconClear, { tone: "secondary" }),
-							variant: "transparent",
-							onClick: onClose
+						borderRadius: modalRadius,
+						overflow: "auto",
+						position: "relative",
+						width: width !== "content" ? "full" : void 0,
+						height: isDrawer ? "full" : void 0,
+						className: {
+							[require_Modal_css.pointerEventsAll]: true,
+							[require_Modal_css.maxSize[position]]: !isDrawer,
+							[require_Modal_css.hideOverflowAboveMobile]: allowColumnLayout
+						},
+						...require_buildDataAttributes.default({
+							data,
+							validateRestProps: restProps
+						}),
+						children: [coverImageEnabled && coverImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollContainer.ScrollContainer, {
+							direction: "vertical",
+							startRef: contentStartRef,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCoverImageLayout, {
+								width,
+								image: coverImage,
+								footer: !isMobile ? modalFooter : null,
+								applyHeightLimit: allowColumnLayout,
+								children: modalLayout
+							})
+						}) : modalLayout, (!coverImageEnabled || isMobile) && modalFooter]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+					position: "absolute",
+					zIndex: "sticky",
+					top: 0,
+					pointerEvents: "none",
+					width: "full",
+					display: "flex",
+					justifyContent: "flexEnd",
+					paddingTop: modalPadding,
+					paddingRight: isDrawer ? require_pageBlockGutters.pageBlockGutters : modalPadding,
+					className: !isDrawer && require_Modal_css.maxSize[position],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Bleed.Bleed, {
+						space: "xxsmall",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+							position: "relative",
+							background: "surface",
+							borderRadius: "full",
+							padding: "xsmall",
+							className: [require_Modal_css.closeIconOffset, require_Modal_css.pointerEventsAll],
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonIcon.ButtonIcon, {
+								label: closeLabel,
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconClear.IconClear, { tone: "secondary" }),
+								variant: "transparent",
+								onClick: onClose
+							})
 						})
 					})
 				})
-			})]
+			]
 		})
 	});
 };