braid-design-system 34.8.2 → 34.9.0

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

@@ -3,11 +3,13 @@ import buildDataAttributes_default from "../buildDataAttributes.mjs";
 import { Box } from "../../Box/Box.mjs";
 import { Stack } from "../../Stack/Stack.mjs";
 import { useFallbackId } from "../../../hooks/useFallbackId.mjs";
+import { iconSize } from "../../../hooks/useIcon/index.mjs";
 import { IconClear } from "../../icons/IconClear/IconClear.mjs";
 import { Column } from "../../Column/Column.mjs";
 import { Columns } from "../../Columns/Columns.mjs";
 import { Bleed } from "../../Bleed/Bleed.mjs";
 import { ButtonIcon } from "../../ButtonIcon/ButtonIcon.mjs";
+import { HiddenVisually } from "../../HiddenVisually/HiddenVisually.mjs";
 import { normalizeKey } from "../normalizeKey.mjs";
 import { Heading } from "../../Heading/Heading.mjs";
 import { pageBlockGutters } from "../../PageBlock/pageBlockGutters.mjs";
@@ -22,6 +24,7 @@ const modalPadding = {
 	mobile: "gutter",
 	tablet: "large"
 };
+const modalContentGap = "large";
 const ModalContentHeader = forwardRef(({ title, headingLevel, description, descriptionId, illustration, reserveCloseArea }, ref) => {
 	const header = /* @__PURE__ */ jsxs(Stack, {
 		space: headingLevel === "2" ? {
@@ -79,7 +82,7 @@ const ModalContentScrollLayout = ({ children, contentStartRef, coverImageEnabled
 	direction: "vertical",
 	children: [coverImageEnabled && /* @__PURE__ */ jsx("span", { ref: contentStartRef }), /* @__PURE__ */ jsx(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__ */ jsx(Column, { children: coverImage$1 }), /* @__PURE__ */ jsx(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 = useFallbackId(id);
 	const descriptionId = useId();
 	const defaultModalRef = useRef(null);
@@ -161,25 +164,48 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		contentStartRef,
 		coverImageEnabled,
 		hasFooter: Boolean(footer),
-		children: [/* @__PURE__ */ jsx(ModalContentHeader, {
-			title,
-			headingLevel,
-			description,
-			descriptionId,
-			illustration: illustration && !coverImageEnabled ? illustration : void 0,
-			ref: headingRef,
-			reserveCloseArea: true
-		}), children]
+		children: [
+			title ? /* @__PURE__ */ jsx(ModalContentHeader, {
+				title,
+				headingLevel,
+				description,
+				descriptionId,
+				illustration: illustration && !coverImageEnabled ? illustration : void 0,
+				ref: headingRef,
+				reserveCloseArea: true
+			}) : null,
+			isDrawer && !title ? /* @__PURE__ */ jsx(
+				Bleed,
+				/**
+				* Matches close button size so content starts below it. `bottom`
+				* cancels the gap that follows the spacer.
+				*/
+				{
+					top: "xxsmall",
+					bottom: modalContentGap,
+					children: /* @__PURE__ */ jsx(Box, {
+						padding: "xsmall",
+						children: /* @__PURE__ */ jsx(Box, { className: iconSize({
+							size: "standard",
+							crop: true
+						}) })
+					})
+				}
+			) : null,
+			children
+		]
 	});
 	const modalFooter = footer ? /* @__PURE__ */ jsx(ModalFooter, {
 		applyPageBlockGutters: isDrawer,
 		children: footer
 	}) : null;
 	return /* @__PURE__ */ jsx(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__ */ jsx(RemoveScroll, {
-				noRelative: true,
-				forwardProps: true,
-				enabled: scrollLock,
-				children: /* @__PURE__ */ jsxs(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: {
-						[pointerEventsAll]: true,
-						[maxSize[position]]: !isDrawer,
-						[hideOverflowAboveMobile]: allowColumnLayout
-					},
-					...buildDataAttributes_default({
-						data,
-						validateRestProps: restProps
-					}),
-					children: [coverImageEnabled && coverImage ? /* @__PURE__ */ jsx(ScrollContainer, {
-						direction: "vertical",
-						startRef: contentStartRef,
-						children: /* @__PURE__ */ jsx(ModalCoverImageLayout, {
-							width,
-							image: coverImage,
-							footer: !isMobile ? modalFooter : null,
-							applyHeightLimit: allowColumnLayout,
-							children: modalLayout
-						})
-					}) : modalLayout, (!coverImageEnabled || isMobile) && modalFooter]
-				})
-			}), /* @__PURE__ */ jsx(Box, {
-				position: "absolute",
-				zIndex: "sticky",
-				top: 0,
-				pointerEvents: "none",
-				width: "full",
-				display: "flex",
-				justifyContent: "flexEnd",
-				paddingTop: modalPadding,
-				paddingRight: isDrawer ? pageBlockGutters : modalPadding,
-				className: !isDrawer && maxSize[position],
-				children: /* @__PURE__ */ jsx(Bleed, {
-					space: "xxsmall",
-					children: /* @__PURE__ */ jsx(Box, {
-						position: "relative",
+			children: [
+				ariaDescription ? /* @__PURE__ */ jsx(HiddenVisually, {
+					id: descriptionId,
+					children: ariaDescription
+				}) : null,
+				/* @__PURE__ */ jsx(RemoveScroll, {
+					noRelative: true,
+					forwardProps: true,
+					enabled: scrollLock,
+					children: /* @__PURE__ */ jsxs(Box, {
+						display: "flex",
+						flexDirection: "column",
 						background: "surface",
-						borderRadius: "full",
-						padding: "xsmall",
-						className: [closeIconOffset, pointerEventsAll],
-						children: /* @__PURE__ */ jsx(ButtonIcon, {
-							label: closeLabel,
-							icon: /* @__PURE__ */ jsx(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: {
+							[pointerEventsAll]: true,
+							[maxSize[position]]: !isDrawer,
+							[hideOverflowAboveMobile]: allowColumnLayout
+						},
+						...buildDataAttributes_default({
+							data,
+							validateRestProps: restProps
+						}),
+						children: [coverImageEnabled && coverImage ? /* @__PURE__ */ jsx(ScrollContainer, {
+							direction: "vertical",
+							startRef: contentStartRef,
+							children: /* @__PURE__ */ jsx(ModalCoverImageLayout, {
+								width,
+								image: coverImage,
+								footer: !isMobile ? modalFooter : null,
+								applyHeightLimit: allowColumnLayout,
+								children: modalLayout
+							})
+						}) : modalLayout, (!coverImageEnabled || isMobile) && modalFooter]
+					})
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					position: "absolute",
+					zIndex: "sticky",
+					top: 0,
+					pointerEvents: "none",
+					width: "full",
+					display: "flex",
+					justifyContent: "flexEnd",
+					paddingTop: modalPadding,
+					paddingRight: isDrawer ? pageBlockGutters : modalPadding,
+					className: !isDrawer && maxSize[position],
+					children: /* @__PURE__ */ jsx(Bleed, {
+						space: "xxsmall",
+						children: /* @__PURE__ */ jsx(Box, {
+							position: "relative",
+							background: "surface",
+							borderRadius: "full",
+							padding: "xsmall",
+							className: [closeIconOffset, pointerEventsAll],
+							children: /* @__PURE__ */ jsx(ButtonIcon, {
+								label: closeLabel,
+								icon: /* @__PURE__ */ jsx(IconClear, { tone: "secondary" }),
+								variant: "transparent",
+								onClick: onClose
+							})
 						})
 					})
 				})
-			})]
+			]
 		})
 	});
 };

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

@@ -0,0 +1,14 @@
+const require_Box = require("../../Box/Box.cjs");
+const require_Skeleton_css = require("./Skeleton.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/lib/components/private/Skeleton/Skeleton.tsx
+const Skeleton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+	"aria-hidden": true,
+	overflow: "hidden",
+	width: "full",
+	height: "full",
+	className: require_Skeleton_css.shimmerAnimation
+});
+Skeleton.displayName = "Skeleton";
+//#endregion
+exports.Skeleton = Skeleton;

package/dist/lib/components/private/Skeleton/Skeleton.css.cjs

@@ -0,0 +1,25 @@
+const require_vars_css = require("../../../themes/vars.css.cjs");
+let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+//#region src/lib/components/private/Skeleton/Skeleton.css.ts
+(0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/private/Skeleton/Skeleton.css.ts", "braid-design-system");
+const bone = require_vars_css.vars.backgroundColor.neutralLight;
+const sheen = require_vars_css.vars.backgroundColor.surface;
+const shimmer = (0, _vanilla_extract_css.keyframes)({
+	"0%": { backgroundPosition: "140% 0" },
+	"100%": { backgroundPosition: "-130% 0" }
+}, "shimmer");
+const shimmerAnimation = (0, _vanilla_extract_css.style)({
+	backgroundColor: bone,
+	backgroundImage: `linear-gradient(90deg, ${bone} 0%, ${sheen} 28%, ${bone} 56%)`,
+	backgroundRepeat: "no-repeat",
+	backgroundSize: "200% 100%",
+	animation: `${shimmer} 2s linear infinite`,
+	"@media": { "screen and (prefers-reduced-motion)": {
+		animation: "none",
+		backgroundImage: "none"
+	} }
+}, "shimmerAnimation");
+(0, _vanilla_extract_css_fileScope.endFileScope)();
+//#endregion
+exports.shimmerAnimation = shimmerAnimation;

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

@@ -0,0 +1,25 @@
+import { vars } from "../../../themes/vars.css.mjs";
+import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+//#region src/lib/components/private/Skeleton/Skeleton.css.ts
+setFileScope("src/lib/components/private/Skeleton/Skeleton.css.ts", "braid-design-system");
+const bone = vars.backgroundColor.neutralLight;
+const sheen = vars.backgroundColor.surface;
+const shimmer = keyframes({
+	"0%": { backgroundPosition: "140% 0" },
+	"100%": { backgroundPosition: "-130% 0" }
+}, "shimmer");
+const shimmerAnimation = style({
+	backgroundColor: bone,
+	backgroundImage: `linear-gradient(90deg, ${bone} 0%, ${sheen} 28%, ${bone} 56%)`,
+	backgroundRepeat: "no-repeat",
+	backgroundSize: "200% 100%",
+	animation: `${shimmer} 2s linear infinite`,
+	"@media": { "screen and (prefers-reduced-motion)": {
+		animation: "none",
+		backgroundImage: "none"
+	} }
+}, "shimmerAnimation");
+endFileScope();
+//#endregion
+export { shimmerAnimation };

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

@@ -0,0 +1,14 @@
+import { Box } from "../../Box/Box.mjs";
+import { shimmerAnimation } from "./Skeleton.css.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/private/Skeleton/Skeleton.tsx
+const Skeleton = () => /* @__PURE__ */ jsx(Box, {
+	"aria-hidden": true,
+	overflow: "hidden",
+	width: "full",
+	height: "full",
+	className: shimmerAnimation
+});
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { Skeleton };

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: ("darkMode" | "lightMode")[];
+    conditionNames: ("lightMode" | "darkMode")[];
   };
   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: ("darkMode" | "lightMode")[];
+    conditionNames: ("lightMode" | "darkMode")[];
   };
   styles: {
     readonly background: {

package/dist/lib/css/typography.css.cjs

@@ -29,6 +29,11 @@ const textSizeUntrimmed = (0, _vanilla_extract_css.styleVariants)(require_vars_c
 		lineHeight: tablet.lineHeight
 	}
 }), "textSizeUntrimmed");
+const textSubSupScript = (0, _vanilla_extract_css.style)({}, "textSubSupScript");
+(0, _vanilla_extract_css.globalStyle)(`${textSubSupScript} sup, ${textSubSupScript} sub`, {
+	fontSize: "0.7em",
+	lineHeight: "1em"
+});
 const headingWeight = (0, _vanilla_extract_css.styleVariants)(require_vars_css.vars.headingWeight, require_mapToProperty.mapToProperty("fontWeight"), "headingWeight");
 const heading = (0, _vanilla_extract_css.styleVariants)(require_vars_css.vars.headingLevel, ({ mobile, tablet }, variant) => [(0, _capsizecss_vanilla_extract.createTextStyle)({
 	fontSize: mobile.fontSize,
@@ -39,6 +44,11 @@ const heading = (0, _vanilla_extract_css.styleVariants)(require_vars_css.vars.he
 	lineHeight: tablet.lineHeight,
 	...tablet.capsizeTrims
 } } }, `heading_${variant}`)], "heading");
+const headingSubSupScript = (0, _vanilla_extract_css.style)({}, "headingSubSupScript");
+(0, _vanilla_extract_css.globalStyle)(`${headingSubSupScript} sup, ${headingSubSupScript} sub`, {
+	fontSize: "0.55em",
+	lineHeight: "1em"
+});
 const textToneVars = (0, _vanilla_extract_css.createThemeContract)({
 	critical: null,
 	caution: null,
@@ -115,10 +125,12 @@ exports.darkModeTone = darkModeTone;
 exports.fontFamily = fontFamily;
 exports.fontWeight = fontWeight;
 exports.heading = heading;
+exports.headingSubSupScript = headingSubSupScript;
 exports.headingWeight = headingWeight;
 exports.lightModeNeutralOverride = lightModeNeutralOverride;
 exports.lightModeTone = lightModeTone;
 exports.textSizeTrimmed = textSizeTrimmed;
 exports.textSizeUntrimmed = textSizeUntrimmed;
+exports.textSubSupScript = textSubSupScript;
 exports.tone = tone;
 exports.touchableText = touchableText;

package/dist/lib/css/typography.css.mjs

@@ -4,7 +4,7 @@ import { breakpointQuery, responsiveStyle } from "./responsiveStyle.mjs";
 import { mapToProperty } from "../utils/mapToProperty.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { createTextStyle } from "@capsizecss/vanilla-extract";
-import { assignVars, createThemeContract, style, styleVariants } from "@vanilla-extract/css";
+import { assignVars, createThemeContract, globalStyle, style, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 //#region src/lib/css/typography.css.ts
 setFileScope("src/lib/css/typography.css.ts", "braid-design-system");
@@ -29,6 +29,11 @@ const textSizeUntrimmed = styleVariants(vars.textSize, ({ mobile, tablet }) => r
 		lineHeight: tablet.lineHeight
 	}
 }), "textSizeUntrimmed");
+const textSubSupScript = style({}, "textSubSupScript");
+globalStyle(`${textSubSupScript} sup, ${textSubSupScript} sub`, {
+	fontSize: "0.7em",
+	lineHeight: "1em"
+});
 const headingWeight = styleVariants(vars.headingWeight, mapToProperty("fontWeight"), "headingWeight");
 const heading = styleVariants(vars.headingLevel, ({ mobile, tablet }, variant) => [createTextStyle({
 	fontSize: mobile.fontSize,
@@ -39,6 +44,11 @@ const heading = styleVariants(vars.headingLevel, ({ mobile, tablet }, variant) =
 	lineHeight: tablet.lineHeight,
 	...tablet.capsizeTrims
 } } }, `heading_${variant}`)], "heading");
+const headingSubSupScript = style({}, "headingSubSupScript");
+globalStyle(`${headingSubSupScript} sup, ${headingSubSupScript} sub`, {
+	fontSize: "0.55em",
+	lineHeight: "1em"
+});
 const textToneVars = createThemeContract({
 	critical: null,
 	caution: null,
@@ -110,4 +120,4 @@ const touchableText = styleVariants(vars.textSize, (textDefinition) => responsiv
 }), "touchableText");
 endFileScope();
 //#endregion
-export { darkModeNeutralOverride, darkModeTone, fontFamily, fontWeight, heading, headingWeight, lightModeNeutralOverride, lightModeTone, textSizeTrimmed, textSizeUntrimmed, tone, touchableText };
+export { darkModeNeutralOverride, darkModeTone, fontFamily, fontWeight, heading, headingSubSupScript, headingWeight, lightModeNeutralOverride, lightModeTone, textSizeTrimmed, textSizeUntrimmed, textSubSupScript, tone, touchableText };

package/dist/lib/playroom/components.cjs

@@ -152,6 +152,7 @@ const require_Accordion_playroom = require("../components/Accordion/Accordion.pl
 const require_AccordionItem_playroom = require("../components/Accordion/AccordionItem.playroom.cjs");
 const require_Alert_playroom = require("../components/Alert/Alert.playroom.cjs");
 const require_Autosuggest_playroom = require("../components/Autosuggest/Autosuggest.playroom.cjs");
+const require_Avatar_playroom = require("../components/Avatar/Avatar.playroom.cjs");
 const require_Badge_playroom = require("../components/Badge/Badge.playroom.cjs");
 const require_Bleed_playroom = require("../components/Bleed/Bleed.playroom.cjs");
 const require_Box_playroom = require("../components/Box/Box.playroom.cjs");
@@ -208,6 +209,7 @@ exports.AccordionItem = require_AccordionItem_playroom.AccordionItem;
 exports.Actions = require_Actions.Actions;
 exports.Alert = require_Alert_playroom.Alert;
 exports.Autosuggest = require_Autosuggest_playroom.Autosuggest;
+exports.Avatar = require_Avatar_playroom.Avatar;
 exports.Badge = require_Badge_playroom.Badge;
 exports.Bleed = require_Bleed_playroom.Bleed;
 exports.Box = require_Box_playroom.Box;

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

@@ -153,6 +153,7 @@ import { Accordion } from "../components/Accordion/Accordion.playroom.cjs";
 import { AccordionItem } from "../components/Accordion/AccordionItem.playroom.cjs";
 import { Alert } from "../components/Alert/Alert.playroom.cjs";
 import { Autosuggest } from "../components/Autosuggest/Autosuggest.playroom.cjs";
+import { Avatar } from "../components/Avatar/Avatar.playroom.cjs";
 import { Badge } from "../components/Badge/Badge.playroom.cjs";
 import { Bleed } from "../components/Bleed/Bleed.playroom.cjs";
 import { Box } from "../components/Box/Box.playroom.cjs";
@@ -204,4 +205,4 @@ declare const BraidPortal: undefined;
 declare const BraidProvider: undefined;
 declare const makeLinkComponent: undefined;
 //#endregion
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, 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, Placeholder, PlaceholderFooter, PlaceholderHeader, 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, 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, Placeholder, PlaceholderFooter, PlaceholderHeader, 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/playroom/components.d.mts

@@ -153,6 +153,7 @@ import { Accordion } from "../components/Accordion/Accordion.playroom.mjs";
 import { AccordionItem } from "../components/Accordion/AccordionItem.playroom.mjs";
 import { Alert } from "../components/Alert/Alert.playroom.mjs";
 import { Autosuggest } from "../components/Autosuggest/Autosuggest.playroom.mjs";
+import { Avatar } from "../components/Avatar/Avatar.playroom.mjs";
 import { Badge } from "../components/Badge/Badge.playroom.mjs";
 import { Bleed } from "../components/Bleed/Bleed.playroom.mjs";
 import { Box } from "../components/Box/Box.playroom.mjs";
@@ -204,4 +205,4 @@ declare const BraidPortal: undefined;
 declare const BraidProvider: undefined;
 declare const makeLinkComponent: undefined;
 //#endregion
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, 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, Placeholder, PlaceholderFooter, PlaceholderHeader, 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, 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, Placeholder, PlaceholderFooter, PlaceholderHeader, 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/playroom/components.mjs

@@ -152,6 +152,7 @@ import { Accordion } from "../components/Accordion/Accordion.playroom.mjs";
 import { AccordionItem } from "../components/Accordion/AccordionItem.playroom.mjs";
 import { Alert } from "../components/Alert/Alert.playroom.mjs";
 import { Autosuggest } from "../components/Autosuggest/Autosuggest.playroom.mjs";
+import { Avatar } from "../components/Avatar/Avatar.playroom.mjs";
 import { Badge } from "../components/Badge/Badge.playroom.mjs";
 import { Bleed } from "../components/Bleed/Bleed.playroom.mjs";
 import { Box } from "../components/Box/Box.playroom.mjs";
@@ -203,4 +204,4 @@ const BraidPortal = void 0;
 const BraidProvider = void 0;
 const makeLinkComponent = void 0;
 //#endregion
-export { Accordion, AccordionItem, Actions, Alert, Autosuggest, Badge, Bleed, 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, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, Placeholder, PlaceholderFooter, PlaceholderHeader, 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, 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, List, Loader, MenuItem, MenuItemCheckbox, MenuItemDivider, MenuItemLink, MenuRenderer, MonthPicker, Notice, OverflowMenu, Page, PageBlock, Pagination, PasswordField, Placeholder, PlaceholderFooter, PlaceholderHeader, 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/playroom/snippets/Avatar.cjs

@@ -0,0 +1,41 @@
+//#region src/lib/playroom/snippets/Avatar.ts
+const snippets = [
+	{
+		description: "Initials",
+		code: "<Avatar name=\"Leia Organa\" />"
+	},
+	{
+		description: "Empty",
+		code: "<Avatar />"
+	},
+	{
+		description: "Image",
+		code: "<Avatar name=\"Leia Organa\" imageUrl=\"https://example.com/photo.jpg\" />"
+	},
+	{
+		description: "With name",
+		code: "<Columns space=\"medium\" alignY=\"center\">\n  <Column width=\"content\">\n    <Avatar name=\"Leia Organa\" />\n  </Column>\n  <Column>\n    <Stack space=\"xsmall\">\n      <Text>Leia Organa</Text>\n      <Text size=\"small\" tone=\"secondary\">\n        Product Designer\n      </Text>\n    </Stack>\n  </Column>\n</Columns>"
+	},
+	{
+		description: "Sizes",
+		code: "<Inline space=\"small\" alignY=\"center\">\n  <Avatar name=\"Leia Organa\" size=\"xsmall\" />\n  <Avatar name=\"Leia Organa\" size=\"small\" />\n  <Avatar name=\"Leia Organa\" size=\"standard\" />\n  <Avatar name=\"Leia Organa\" size=\"large\" />\n  <Avatar name=\"Leia Organa\" size=\"xlarge\" />\n  <Avatar name=\"Leia Organa\" size=\"xxlarge\" />\n</Inline>"
+	},
+	{
+		description: "Loading",
+		code: "<Avatar name=\"Leia Organa\" loading />"
+	},
+	{
+		description: "Company",
+		code: "<Avatar icon={<IconCompany />} />"
+	},
+	{
+		description: "Add photo",
+		code: "<Avatar\n  icon={<IconPhotoAdd />}\n  aria-label=\"Add photo\"\n  onClick={() => undefined}\n/>"
+	},
+	{
+		description: "With tooltip",
+		code: "<TooltipRenderer tooltip={<Text>Leia Organa</Text>}>\n  {({ triggerProps }) => (\n    <Avatar name=\"Leia Organa\" aria-label=\"Leia Organa\" {...triggerProps} />\n  )}\n</TooltipRenderer>"
+	}
+];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,41 @@
+//#region src/lib/playroom/snippets/Avatar.ts
+const snippets = [
+	{
+		description: "Initials",
+		code: "<Avatar name=\"Leia Organa\" />"
+	},
+	{
+		description: "Empty",
+		code: "<Avatar />"
+	},
+	{
+		description: "Image",
+		code: "<Avatar name=\"Leia Organa\" imageUrl=\"https://example.com/photo.jpg\" />"
+	},
+	{
+		description: "With name",
+		code: "<Columns space=\"medium\" alignY=\"center\">\n  <Column width=\"content\">\n    <Avatar name=\"Leia Organa\" />\n  </Column>\n  <Column>\n    <Stack space=\"xsmall\">\n      <Text>Leia Organa</Text>\n      <Text size=\"small\" tone=\"secondary\">\n        Product Designer\n      </Text>\n    </Stack>\n  </Column>\n</Columns>"
+	},
+	{
+		description: "Sizes",
+		code: "<Inline space=\"small\" alignY=\"center\">\n  <Avatar name=\"Leia Organa\" size=\"xsmall\" />\n  <Avatar name=\"Leia Organa\" size=\"small\" />\n  <Avatar name=\"Leia Organa\" size=\"standard\" />\n  <Avatar name=\"Leia Organa\" size=\"large\" />\n  <Avatar name=\"Leia Organa\" size=\"xlarge\" />\n  <Avatar name=\"Leia Organa\" size=\"xxlarge\" />\n</Inline>"
+	},
+	{
+		description: "Loading",
+		code: "<Avatar name=\"Leia Organa\" loading />"
+	},
+	{
+		description: "Company",
+		code: "<Avatar icon={<IconCompany />} />"
+	},
+	{
+		description: "Add photo",
+		code: "<Avatar\n  icon={<IconPhotoAdd />}\n  aria-label=\"Add photo\"\n  onClick={() => undefined}\n/>"
+	},
+	{
+		description: "With tooltip",
+		code: "<TooltipRenderer tooltip={<Text>Leia Organa</Text>}>\n  {({ triggerProps }) => (\n    <Avatar name=\"Leia Organa\" aria-label=\"Leia Organa\" {...triggerProps} />\n  )}\n</TooltipRenderer>"
+	}
+];
+//#endregion
+export { snippets };

package/dist/lib/playroom/snippets/CardList.cjs

@@ -2,7 +2,7 @@
 const snippets = [{
 	group: "Sections",
 	name: "Card list",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Stack component=\"ul\" space=\"small\">\n      {[\n        {\n          title: \"Item 1\",\n          subTitle: \"Ea proident nulla veniam\",\n          description: \"Lorem ipsum\",\n          date: \"2d ago\",\n        },\n        {\n          title: \"Item 2\",\n          subTitle: \"Occaecat ad sunt elit\",\n          description: \"Consectetur adipiscing\",\n          date: \"6d ago\",\n        },\n        {\n          title: \"Item 3\",\n          subTitle: \"Commodo exercitation nisi laborum\",\n          description: \"Vel odio\",\n          date: \"3w ago\",\n        },\n      ].map((item) => (\n        <Box component=\"li\" key={item.title}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Heading level=\"4\">{item.title}</Heading>\n                <Text>{item.subTitle}</Text>\n              </Stack>\n              <Text>{item.description}</Text>\n              <Text tone=\"secondary\">{item.date}</Text>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n    <Stack component=\"ul\" space=\"small\">\n      {[1, 2, 3].map((item) => (\n        <Box component=\"li\" key={item}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Spread space=\"small\">\n                  <Heading level=\"4\">Heading level 4</Heading>\n                  <OverflowMenu label=\"Options\">\n                    <MenuItem icon={<IconNote />}>Menu item 1</MenuItem>\n                    <MenuItem icon={<IconBookmark />}>Menu item 2</MenuItem>\n                  </OverflowMenu>\n                </Spread>\n                <Text>Standard text</Text>\n              </Stack>\n              <Text>\n                Standard text lorem ipsum dolor sit amet consectetur adipiscing\n                elit. Vivamus iaculis ut neque sit amet egestas.\n              </Text>\n              <Text tone=\"secondary\">Standard, secondary text</Text>\n              <Actions>\n                <Button>Button</Button>\n              </Actions>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n  </Stack>\n</PageBlock>"
 }];
 //#endregion
 exports.snippets = snippets;

package/dist/lib/playroom/snippets/CardList.mjs

@@ -2,7 +2,7 @@
 const snippets = [{
 	group: "Sections",
 	name: "Card list",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Stack component=\"ul\" space=\"small\">\n      {[\n        {\n          title: \"Item 1\",\n          subTitle: \"Ea proident nulla veniam\",\n          description: \"Lorem ipsum\",\n          date: \"2d ago\",\n        },\n        {\n          title: \"Item 2\",\n          subTitle: \"Occaecat ad sunt elit\",\n          description: \"Consectetur adipiscing\",\n          date: \"6d ago\",\n        },\n        {\n          title: \"Item 3\",\n          subTitle: \"Commodo exercitation nisi laborum\",\n          description: \"Vel odio\",\n          date: \"3w ago\",\n        },\n      ].map((item) => (\n        <Box component=\"li\" key={item.title}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Heading level=\"4\">{item.title}</Heading>\n                <Text>{item.subTitle}</Text>\n              </Stack>\n              <Text>{item.description}</Text>\n              <Text tone=\"secondary\">{item.date}</Text>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n    <Stack component=\"ul\" space=\"small\">\n      {[1, 2, 3].map((item) => (\n        <Box component=\"li\" key={item}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Spread space=\"small\">\n                  <Heading level=\"4\">Heading level 4</Heading>\n                  <OverflowMenu label=\"Options\">\n                    <MenuItem icon={<IconNote />}>Menu item 1</MenuItem>\n                    <MenuItem icon={<IconBookmark />}>Menu item 2</MenuItem>\n                  </OverflowMenu>\n                </Spread>\n                <Text>Standard text</Text>\n              </Stack>\n              <Text>\n                Standard text lorem ipsum dolor sit amet consectetur adipiscing\n                elit. Vivamus iaculis ut neque sit amet egestas.\n              </Text>\n              <Text tone=\"secondary\">Standard, secondary text</Text>\n              <Actions>\n                <Button>Button</Button>\n              </Actions>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n  </Stack>\n</PageBlock>"
 }];
 //#endregion
 export { snippets };