braid-design-system 34.8.2 → 34.9.0

package/dist/lib/playroom/snippets.cjs

@@ -2,6 +2,7 @@ const require_Accordion = require("./snippets/Accordion.cjs");
 const require_Actions = require("./snippets/Actions.cjs");
 const require_Alert = require("./snippets/Alert.cjs");
 const require_Autosuggest = require("./snippets/Autosuggest.cjs");
+const require_Avatar = require("./snippets/Avatar.cjs");
 const require_Badge = require("./snippets/Badge.cjs");
 const require_Bleed = require("./snippets/Bleed.cjs");
 const require_BrandedContainer = require("./snippets/BrandedContainer.cjs");
@@ -15,13 +16,11 @@ const require_CompactPage = require("./snippets/CompactPage.cjs");
 const require_ContentBlock = require("./snippets/ContentBlock.cjs");
 const require_Dialog = require("./snippets/Dialog.cjs");
 const require_Disclosure = require("./snippets/Disclosure.cjs");
-const require_DividedList = require("./snippets/DividedList.cjs");
 const require_Divider = require("./snippets/Divider.cjs");
 const require_Drawer = require("./snippets/Drawer.cjs");
 const require_Dropdown = require("./snippets/Dropdown.cjs");
 const require_FieldLabel = require("./snippets/FieldLabel.cjs");
 const require_FieldMessage = require("./snippets/FieldMessage.cjs");
-const require_Form = require("./snippets/Form.cjs");
 const require_Heading = require("./snippets/Heading.cjs");
 const require_Inline = require("./snippets/Inline.cjs");
 const require_List = require("./snippets/List.cjs");
@@ -42,12 +41,9 @@ const require_Spread = require("./snippets/Spread.cjs");
 const require_Stack = require("./snippets/Stack.cjs");
 const require_StandardPage = require("./snippets/StandardPage.cjs");
 const require_StandardSection = require("./snippets/StandardSection.cjs");
-const require_SteppedSection = require("./snippets/SteppedSection.cjs");
 const require_Stepper = require("./snippets/Stepper.cjs");
 const require_Strong = require("./snippets/Strong.cjs");
-const require_TabbedSection = require("./snippets/TabbedSection.cjs");
 const require_Table = require("./snippets/Table.cjs");
-const require_TableSection = require("./snippets/TableSection.cjs");
 const require_Tabs = require("./snippets/Tabs.cjs");
 const require_Tag = require("./snippets/Tag.cjs");
 const require_Text = require("./snippets/Text.cjs");
@@ -69,18 +65,14 @@ const snippetsMap = {
 	BrandedContainer: require_BrandedContainer.snippets,
 	CardList: require_CardList.snippets,
 	CompactPage: require_CompactPage.snippets,
-	DividedList: require_DividedList.snippets,
-	Form: require_Form.snippets,
 	SpaciousPage: require_SpaciousPage.snippets,
 	StandardPage: require_StandardPage.snippets,
 	StandardSection: require_StandardSection.snippets,
-	SteppedSection: require_SteppedSection.snippets,
-	TabbedSection: require_TabbedSection.snippets,
-	TableSection: require_TableSection.snippets,
 	Accordion: require_Accordion.snippets,
 	Actions: require_Actions.snippets,
 	Alert: require_Alert.snippets,
 	Autosuggest: require_Autosuggest.snippets,
+	Avatar: require_Avatar.snippets,
 	Badge: require_Badge.snippets,
 	Bleed: require_Bleed.snippets,
 	Button: require_Button.snippets,

package/dist/lib/playroom/snippets.mjs

@@ -2,62 +2,58 @@ import { snippets } from "./snippets/Accordion.mjs";
 import { snippets as snippets$1 } from "./snippets/Actions.mjs";
 import { snippets as snippets$2 } from "./snippets/Alert.mjs";
 import { snippets as snippets$3 } from "./snippets/Autosuggest.mjs";
-import { snippets as snippets$4 } from "./snippets/Badge.mjs";
-import { snippets as snippets$5 } from "./snippets/Bleed.mjs";
-import { snippets as snippets$6 } from "./snippets/BrandedContainer.mjs";
-import { snippets as snippets$7 } from "./snippets/Button.mjs";
-import { snippets as snippets$8 } from "./snippets/ButtonIcon.mjs";
-import { snippets as snippets$9 } from "./snippets/Card.mjs";
-import { snippets as snippets$10 } from "./snippets/CardList.mjs";
-import { snippets as snippets$11 } from "./snippets/Checkbox.mjs";
-import { snippets as snippets$12 } from "./snippets/Columns.mjs";
-import { snippets as snippets$13 } from "./snippets/CompactPage.mjs";
-import { snippets as snippets$14 } from "./snippets/ContentBlock.mjs";
-import { snippets as snippets$15 } from "./snippets/Dialog.mjs";
-import { snippets as snippets$16 } from "./snippets/Disclosure.mjs";
-import { snippets as snippets$17 } from "./snippets/DividedList.mjs";
+import { snippets as snippets$4 } from "./snippets/Avatar.mjs";
+import { snippets as snippets$5 } from "./snippets/Badge.mjs";
+import { snippets as snippets$6 } from "./snippets/Bleed.mjs";
+import { snippets as snippets$7 } from "./snippets/BrandedContainer.mjs";
+import { snippets as snippets$8 } from "./snippets/Button.mjs";
+import { snippets as snippets$9 } from "./snippets/ButtonIcon.mjs";
+import { snippets as snippets$10 } from "./snippets/Card.mjs";
+import { snippets as snippets$11 } from "./snippets/CardList.mjs";
+import { snippets as snippets$12 } from "./snippets/Checkbox.mjs";
+import { snippets as snippets$13 } from "./snippets/Columns.mjs";
+import { snippets as snippets$14 } from "./snippets/CompactPage.mjs";
+import { snippets as snippets$15 } from "./snippets/ContentBlock.mjs";
+import { snippets as snippets$16 } from "./snippets/Dialog.mjs";
+import { snippets as snippets$17 } from "./snippets/Disclosure.mjs";
 import { snippets as snippets$18 } from "./snippets/Divider.mjs";
 import { snippets as snippets$19 } from "./snippets/Drawer.mjs";
 import { snippets as snippets$20 } from "./snippets/Dropdown.mjs";
 import { snippets as snippets$21 } from "./snippets/FieldLabel.mjs";
 import { snippets as snippets$22 } from "./snippets/FieldMessage.mjs";
-import { snippets as snippets$23 } from "./snippets/Form.mjs";
-import { snippets as snippets$24 } from "./snippets/Heading.mjs";
-import { snippets as snippets$25 } from "./snippets/Inline.mjs";
-import { snippets as snippets$26 } from "./snippets/List.mjs";
-import { snippets as snippets$27 } from "./snippets/Loader.mjs";
-import { snippets as snippets$28 } from "./snippets/MenuRenderer.mjs";
-import { snippets as snippets$29 } from "./snippets/MonthPicker.mjs";
-import { snippets as snippets$30 } from "./snippets/Notice.mjs";
-import { snippets as snippets$31 } from "./snippets/OverflowMenu.mjs";
-import { snippets as snippets$32 } from "./snippets/Page.mjs";
-import { snippets as snippets$33 } from "./snippets/PageBlock.mjs";
-import { snippets as snippets$34 } from "./snippets/Pagination.mjs";
-import { snippets as snippets$35 } from "./snippets/PasswordField.mjs";
-import { snippets as snippets$36 } from "./snippets/RadioGroup.mjs";
-import { snippets as snippets$37 } from "./snippets/Rating.mjs";
-import { snippets as snippets$38 } from "./snippets/Secondary.mjs";
-import { snippets as snippets$39 } from "./snippets/SpaciousPage.mjs";
-import { snippets as snippets$40 } from "./snippets/Spread.mjs";
-import { snippets as snippets$41 } from "./snippets/Stack.mjs";
-import { snippets as snippets$42 } from "./snippets/StandardPage.mjs";
-import { snippets as snippets$43 } from "./snippets/StandardSection.mjs";
-import { snippets as snippets$44 } from "./snippets/SteppedSection.mjs";
-import { snippets as snippets$45 } from "./snippets/Stepper.mjs";
-import { snippets as snippets$46 } from "./snippets/Strong.mjs";
-import { snippets as snippets$47 } from "./snippets/TabbedSection.mjs";
-import { snippets as snippets$48 } from "./snippets/Table.mjs";
-import { snippets as snippets$49 } from "./snippets/TableSection.mjs";
-import { snippets as snippets$50 } from "./snippets/Tabs.mjs";
-import { snippets as snippets$51 } from "./snippets/Tag.mjs";
-import { snippets as snippets$52 } from "./snippets/Text.mjs";
-import { snippets as snippets$53 } from "./snippets/TextDropdown.mjs";
-import { snippets as snippets$54 } from "./snippets/TextField.mjs";
-import { snippets as snippets$55 } from "./snippets/TextLink.mjs";
-import { snippets as snippets$56 } from "./snippets/Textarea.mjs";
-import { snippets as snippets$57 } from "./snippets/Tiles.mjs";
-import { snippets as snippets$58 } from "./snippets/Toggle.mjs";
-import { snippets as snippets$59 } from "./snippets/TooltipRenderer.mjs";
+import { snippets as snippets$23 } from "./snippets/Heading.mjs";
+import { snippets as snippets$24 } from "./snippets/Inline.mjs";
+import { snippets as snippets$25 } from "./snippets/List.mjs";
+import { snippets as snippets$26 } from "./snippets/Loader.mjs";
+import { snippets as snippets$27 } from "./snippets/MenuRenderer.mjs";
+import { snippets as snippets$28 } from "./snippets/MonthPicker.mjs";
+import { snippets as snippets$29 } from "./snippets/Notice.mjs";
+import { snippets as snippets$30 } from "./snippets/OverflowMenu.mjs";
+import { snippets as snippets$31 } from "./snippets/Page.mjs";
+import { snippets as snippets$32 } from "./snippets/PageBlock.mjs";
+import { snippets as snippets$33 } from "./snippets/Pagination.mjs";
+import { snippets as snippets$34 } from "./snippets/PasswordField.mjs";
+import { snippets as snippets$35 } from "./snippets/RadioGroup.mjs";
+import { snippets as snippets$36 } from "./snippets/Rating.mjs";
+import { snippets as snippets$37 } from "./snippets/Secondary.mjs";
+import { snippets as snippets$38 } from "./snippets/SpaciousPage.mjs";
+import { snippets as snippets$39 } from "./snippets/Spread.mjs";
+import { snippets as snippets$40 } from "./snippets/Stack.mjs";
+import { snippets as snippets$41 } from "./snippets/StandardPage.mjs";
+import { snippets as snippets$42 } from "./snippets/StandardSection.mjs";
+import { snippets as snippets$43 } from "./snippets/Stepper.mjs";
+import { snippets as snippets$44 } from "./snippets/Strong.mjs";
+import { snippets as snippets$45 } from "./snippets/Table.mjs";
+import { snippets as snippets$46 } from "./snippets/Tabs.mjs";
+import { snippets as snippets$47 } from "./snippets/Tag.mjs";
+import { snippets as snippets$48 } from "./snippets/Text.mjs";
+import { snippets as snippets$49 } from "./snippets/TextDropdown.mjs";
+import { snippets as snippets$50 } from "./snippets/TextField.mjs";
+import { snippets as snippets$51 } from "./snippets/TextLink.mjs";
+import { snippets as snippets$52 } from "./snippets/Textarea.mjs";
+import { snippets as snippets$53 } from "./snippets/Tiles.mjs";
+import { snippets as snippets$54 } from "./snippets/Toggle.mjs";
+import { snippets as snippets$55 } from "./snippets/TooltipRenderer.mjs";
 //#region src/lib/playroom/snippets.ts
 const groupOrder = [
 	"Layouts",
@@ -66,66 +62,62 @@ const groupOrder = [
 ];
 const allSnippets = [];
 const snippetsMap = {
-	BrandedContainer: snippets$6,
-	CardList: snippets$10,
-	CompactPage: snippets$13,
-	DividedList: snippets$17,
-	Form: snippets$23,
-	SpaciousPage: snippets$39,
-	StandardPage: snippets$42,
-	StandardSection: snippets$43,
-	SteppedSection: snippets$44,
-	TabbedSection: snippets$47,
-	TableSection: snippets$49,
+	BrandedContainer: snippets$7,
+	CardList: snippets$11,
+	CompactPage: snippets$14,
+	SpaciousPage: snippets$38,
+	StandardPage: snippets$41,
+	StandardSection: snippets$42,
 	Accordion: snippets,
 	Actions: snippets$1,
 	Alert: snippets$2,
 	Autosuggest: snippets$3,
-	Badge: snippets$4,
-	Bleed: snippets$5,
-	Button: snippets$7,
-	ButtonIcon: snippets$8,
-	Card: snippets$9,
-	Checkbox: snippets$11,
-	Columns: snippets$12,
-	ContentBlock: snippets$14,
-	Dialog: snippets$15,
-	Disclosure: snippets$16,
+	Avatar: snippets$4,
+	Badge: snippets$5,
+	Bleed: snippets$6,
+	Button: snippets$8,
+	ButtonIcon: snippets$9,
+	Card: snippets$10,
+	Checkbox: snippets$12,
+	Columns: snippets$13,
+	ContentBlock: snippets$15,
+	Dialog: snippets$16,
+	Disclosure: snippets$17,
 	Divider: snippets$18,
 	Drawer: snippets$19,
 	Dropdown: snippets$20,
 	FieldLabel: snippets$21,
 	FieldMessage: snippets$22,
-	Heading: snippets$24,
-	Inline: snippets$25,
-	List: snippets$26,
-	Loader: snippets$27,
-	MenuRenderer: snippets$28,
-	MonthPicker: snippets$29,
-	Notice: snippets$30,
-	OverflowMenu: snippets$31,
-	Page: snippets$32,
-	PageBlock: snippets$33,
-	Pagination: snippets$34,
-	PasswordField: snippets$35,
-	RadioGroup: snippets$36,
-	Rating: snippets$37,
-	Secondary: snippets$38,
-	Spread: snippets$40,
-	Stack: snippets$41,
-	Stepper: snippets$45,
-	Strong: snippets$46,
-	Table: snippets$48,
-	Tabs: snippets$50,
-	Tag: snippets$51,
-	Text: snippets$52,
-	TextDropdown: snippets$53,
-	TextField: snippets$54,
-	TextLink: snippets$55,
-	Textarea: snippets$56,
-	Tiles: snippets$57,
-	Toggle: snippets$58,
-	TooltipRenderer: snippets$59
+	Heading: snippets$23,
+	Inline: snippets$24,
+	List: snippets$25,
+	Loader: snippets$26,
+	MenuRenderer: snippets$27,
+	MonthPicker: snippets$28,
+	Notice: snippets$29,
+	OverflowMenu: snippets$30,
+	Page: snippets$31,
+	PageBlock: snippets$32,
+	Pagination: snippets$33,
+	PasswordField: snippets$34,
+	RadioGroup: snippets$35,
+	Rating: snippets$36,
+	Secondary: snippets$37,
+	Spread: snippets$39,
+	Stack: snippets$40,
+	Stepper: snippets$43,
+	Strong: snippets$44,
+	Table: snippets$45,
+	Tabs: snippets$46,
+	Tag: snippets$47,
+	Text: snippets$48,
+	TextDropdown: snippets$49,
+	TextField: snippets$50,
+	TextLink: snippets$51,
+	Textarea: snippets$52,
+	Tiles: snippets$53,
+	Toggle: snippets$54,
+	TooltipRenderer: snippets$55
 };
 for (const [name, snippets] of Object.entries(snippetsMap)) for (const snippet of snippets) allSnippets.push({
 	...snippet,

package/dist/lib/themes/docs/tokens.cjs

@@ -1,4 +1,4 @@
-const require_index = require("../../../node_modules/.pnpm/@capsizecss_metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.cjs");
+const require_index = require("../../../node_modules/.pnpm/@capsizecss_metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.cjs");
 const require_palette = require("../../color/palette.cjs");
 const require_tokenType = require("../tokenType.cjs");
 let polished = require("polished");
@@ -234,9 +234,9 @@ const tokens = {
 			neutralActive: (0, polished.darken)(.05, require_palette.palette.grey["800"]),
 			neutralHover: (0, polished.lighten)(.05, require_palette.palette.grey["800"]),
 			neutralLight: require_palette.palette.grey["100"],
-			neutralSoft: require_palette.palette.grey["50"],
-			neutralSoftActive: (0, polished.darken)(.05, require_palette.palette.grey["50"]),
-			neutralSoftHover: (0, polished.darken)(.025, require_palette.palette.grey["50"]),
+			neutralSoft: require_palette.palette.grey["75"],
+			neutralSoftActive: (0, polished.darken)(.05, require_palette.palette.grey["75"]),
+			neutralSoftHover: (0, polished.darken)(.025, require_palette.palette.grey["75"]),
 			positive: require_palette.palette.mint["700"],
 			positiveLight: require_palette.palette.mint["100"],
 			promote: require_palette.palette.violet["600"],

package/dist/lib/themes/docs/tokens.mjs

@@ -1,4 +1,4 @@
-import appleSystem_default from "../../../node_modules/.pnpm/@capsizecss_metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs";
+import appleSystem_default from "../../../node_modules/.pnpm/@capsizecss_metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs";
 import { palette } from "../../color/palette.mjs";
 import { extractFontMetricsForTheme } from "../tokenType.mjs";
 import { darken, lighten, rgba } from "polished";
@@ -234,9 +234,9 @@ const tokens = {
 			neutralActive: darken(.05, palette.grey["800"]),
 			neutralHover: lighten(.05, palette.grey["800"]),
 			neutralLight: palette.grey["100"],
-			neutralSoft: palette.grey["50"],
-			neutralSoftActive: darken(.05, palette.grey["50"]),
-			neutralSoftHover: darken(.025, palette.grey["50"]),
+			neutralSoft: palette.grey["75"],
+			neutralSoftActive: darken(.05, palette.grey["75"]),
+			neutralSoftHover: darken(.025, palette.grey["75"]),
 			positive: palette.mint["700"],
 			positiveLight: palette.mint["100"],
 			promote: palette.violet["600"],

package/dist/lib/themes/wireframe/tokens.cjs

@@ -1,7 +1,7 @@
 const require_tokenType = require("../tokenType.cjs");
 const require_index = require("../../utils/isLight/index.cjs");
 const require_index$1 = require("../../utils/a11y/index.cjs");
-const require_index$2 = require("../../../node_modules/.pnpm/@capsizecss_metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.cjs");
+const require_index$2 = require("../../../node_modules/.pnpm/@capsizecss_metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.cjs");
 let polished = require("polished");
 //#region src/lib/themes/wireframe/tokens.ts
 const formAccent = "#767676";

package/dist/lib/themes/wireframe/tokens.mjs

@@ -1,7 +1,7 @@
 import { extractFontMetricsForTheme } from "../tokenType.mjs";
 import { isLight } from "../../utils/isLight/index.mjs";
 import { findClosestAccessibleLighterColor, getAccessibleVariant, getLightVariant } from "../../utils/a11y/index.mjs";
-import courierNew_default from "../../../node_modules/.pnpm/@capsizecss_metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs";
+import courierNew_default from "../../../node_modules/.pnpm/@capsizecss_metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs";
 import { darken, lighten, tint } from "polished";
 //#region src/lib/themes/wireframe/tokens.ts
 const formAccent = "#767676";

package/dist/node_modules/.pnpm/{@capsizecss_metrics@4.2.0 → @capsizecss_metrics@4.3.0}/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.cjs

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs
+//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs
 var appleSystem_default = {
 	familyName: "-apple-system",
 	fullName: "System Font",

package/dist/node_modules/.pnpm/{@capsizecss_metrics@4.2.0 → @capsizecss_metrics@4.3.0}/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs
+//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/appleSystem/index.mjs
 var appleSystem_default = {
 	familyName: "-apple-system",
 	fullName: "System Font",

package/dist/node_modules/.pnpm/{@capsizecss_metrics@4.2.0 → @capsizecss_metrics@4.3.0}/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.cjs

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs
+//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs
 var courierNew_default = {
 	familyName: "Courier New",
 	fullName: "Courier New",

package/dist/node_modules/.pnpm/{@capsizecss_metrics@4.2.0 → @capsizecss_metrics@4.3.0}/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.2.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs
+//#region ../../node_modules/.pnpm/@capsizecss+metrics@4.3.0/node_modules/@capsizecss/metrics/entireMetricsCollection/courierNew/index.mjs
 var courierNew_default = {
 	familyName: "Courier New",
 	fullName: "Courier New",

package/dist/playroom/components.cjs

@@ -154,6 +154,7 @@ const require_Accordion_playroom = require("../lib/components/Accordion/Accordio
 const require_AccordionItem_playroom = require("../lib/components/Accordion/AccordionItem.playroom.cjs");
 const require_Alert_playroom = require("../lib/components/Alert/Alert.playroom.cjs");
 const require_Autosuggest_playroom = require("../lib/components/Autosuggest/Autosuggest.playroom.cjs");
+const require_Avatar_playroom = require("../lib/components/Avatar/Avatar.playroom.cjs");
 const require_Badge_playroom = require("../lib/components/Badge/Badge.playroom.cjs");
 const require_Bleed_playroom = require("../lib/components/Bleed/Bleed.playroom.cjs");
 const require_Box_playroom = require("../lib/components/Box/Box.playroom.cjs");
@@ -215,6 +216,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/playroom/components.d.cts

@@ -153,6 +153,7 @@ import { Accordion } from "../lib/components/Accordion/Accordion.playroom.cjs";
 import { AccordionItem } from "../lib/components/Accordion/AccordionItem.playroom.cjs";
 import { Alert } from "../lib/components/Alert/Alert.playroom.cjs";
 import { Autosuggest } from "../lib/components/Autosuggest/Autosuggest.playroom.cjs";
+import { Avatar } from "../lib/components/Avatar/Avatar.playroom.cjs";
 import { Badge } from "../lib/components/Badge/Badge.playroom.cjs";
 import { Bleed } from "../lib/components/Bleed/Bleed.playroom.cjs";
 import { Box } from "../lib/components/Box/Box.playroom.cjs";
@@ -197,4 +198,4 @@ import { PlaceholderHeader } from "../lib/playroom/components/PlaceholderHeader/
 import { PlaceholderFooter } from "../lib/playroom/components/PlaceholderFooter/PlaceholderFooter.cjs";
 import { Placeholder } from "../lib/playroom/components/Placeholder/Placeholder.cjs";
 import { BraidPortal, BraidProvider, makeLinkComponent } from "../lib/playroom/components.cjs";
-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/playroom/components.d.mts

@@ -153,6 +153,7 @@ import { Accordion } from "../lib/components/Accordion/Accordion.playroom.mjs";
 import { AccordionItem } from "../lib/components/Accordion/AccordionItem.playroom.mjs";
 import { Alert } from "../lib/components/Alert/Alert.playroom.mjs";
 import { Autosuggest } from "../lib/components/Autosuggest/Autosuggest.playroom.mjs";
+import { Avatar } from "../lib/components/Avatar/Avatar.playroom.mjs";
 import { Badge } from "../lib/components/Badge/Badge.playroom.mjs";
 import { Bleed } from "../lib/components/Bleed/Bleed.playroom.mjs";
 import { Box } from "../lib/components/Box/Box.playroom.mjs";
@@ -197,4 +198,4 @@ import { PlaceholderHeader } from "../lib/playroom/components/PlaceholderHeader/
 import { PlaceholderFooter } from "../lib/playroom/components/PlaceholderFooter/PlaceholderFooter.mjs";
 import { Placeholder } from "../lib/playroom/components/Placeholder/Placeholder.mjs";
 import { BraidPortal, BraidProvider, makeLinkComponent } from "../lib/playroom/components.mjs";
-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/playroom/components.mjs

@@ -152,6 +152,7 @@ import { Accordion } from "../lib/components/Accordion/Accordion.playroom.mjs";
 import { AccordionItem } from "../lib/components/Accordion/AccordionItem.playroom.mjs";
 import { Alert } from "../lib/components/Alert/Alert.playroom.mjs";
 import { Autosuggest } from "../lib/components/Autosuggest/Autosuggest.playroom.mjs";
+import { Avatar } from "../lib/components/Avatar/Avatar.playroom.mjs";
 import { Badge } from "../lib/components/Badge/Badge.playroom.mjs";
 import { Bleed } from "../lib/components/Bleed/Bleed.playroom.mjs";
 import { Box } from "../lib/components/Box/Box.playroom.mjs";
@@ -207,4 +208,4 @@ if (globalThis.__IS_PLAYROOM_ENVIRONMENT__ !== "clearly") throw new Error(dedent
     +import { Component } from 'braid-design-system';
   `);
 //#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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.8.2",
+  "version": "34.9.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -157,7 +157,7 @@
     "fs-extra": "^10.1.0",
     "html-validate": "^10.13.1",
     "picocolors": "^1.1.1",
-    "playroom": "1.3.0",
+    "playroom": "1.4.0",
     "prettier": "^3.9.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -171,7 +171,7 @@
     "react-dom": "^18 || ^19"
   },
   "inlinedDependencies": {
-    "@capsizecss/metrics": "4.2.0"
+    "@capsizecss/metrics": "4.3.0"
   },
   "scripts": {
     "%skott": "skott --displayMode=file-tree --showCircularDependencies --no-trackTypeOnlyDependencies",

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

@@ -1,8 +0,0 @@
-//#region src/lib/playroom/snippets/DividedList.ts
-const snippets = [{
-	group: "Sections",
-	name: "Divided list",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    {[\n      {\n        title: \"Item 1\",\n        description: \"Lorem ipsum\",\n      },\n      {\n        title: \"Item 2\",\n        description: \"Consectetur adipiscing\",\n      },\n      {\n        title: \"Item 3\",\n        description: \"Vel odio\",\n      },\n    ].map((item) => (\n      <Fragment key={item.title}>\n        <Columns space=\"small\">\n          <Column>\n            <Stack space=\"small\">\n              <Text component=\"h4\" weight=\"strong\">\n                {item.title}\n              </Text>\n              <Text tone=\"secondary\">{item.description}</Text>\n            </Stack>\n          </Column>\n          <Column width=\"content\">\n            <ButtonIcon\n              variant=\"transparent\"\n              icon={<IconEdit />}\n              label=\"Edit\"\n            />\n          </Column>\n        </Columns>\n        <Divider />\n      </Fragment>\n    ))}\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
-}];
-//#endregion
-exports.snippets = snippets;

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

@@ -1,8 +0,0 @@
-//#region src/lib/playroom/snippets/DividedList.ts
-const snippets = [{
-	group: "Sections",
-	name: "Divided list",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    {[\n      {\n        title: \"Item 1\",\n        description: \"Lorem ipsum\",\n      },\n      {\n        title: \"Item 2\",\n        description: \"Consectetur adipiscing\",\n      },\n      {\n        title: \"Item 3\",\n        description: \"Vel odio\",\n      },\n    ].map((item) => (\n      <Fragment key={item.title}>\n        <Columns space=\"small\">\n          <Column>\n            <Stack space=\"small\">\n              <Text component=\"h4\" weight=\"strong\">\n                {item.title}\n              </Text>\n              <Text tone=\"secondary\">{item.description}</Text>\n            </Stack>\n          </Column>\n          <Column width=\"content\">\n            <ButtonIcon\n              variant=\"transparent\"\n              icon={<IconEdit />}\n              label=\"Edit\"\n            />\n          </Column>\n        </Columns>\n        <Divider />\n      </Fragment>\n    ))}\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
-}];
-//#endregion
-export { snippets };

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

@@ -1,12 +0,0 @@
-//#region src/lib/playroom/snippets/Form.ts
-const snippets = [{
-	group: "Sections",
-	name: "Form (basic)",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms with minimal or no validation as errors will impact layout.\n      </Text>\n\n      <Text>\n        Uses a <Strong>large Stack</Strong> for fields, with a{\" \"}\n        <Strong>xlarge Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <TextField label=\"TextField\" />\n\n      <Dropdown\n        label=\"Dropdown\"\n        tone={getState(\"error\") ? \"critical\" : undefined}\n        message={getState(\"error\") ? \"Required field\" : undefined}\n      >\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>\n\n      <MonthPicker label=\"MonthPicker\" />\n\n      <Checkbox label=\"Checkbox\" />\n    </Stack>\n\n    <Actions>\n      <Button>Primary action</Button>\n      <Button variant=\"transparent\" onClick={() => toggleState(\"error\")}>\n        Toggle error\n      </Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
-}, {
-	group: "Sections",
-	name: "Form (validation)",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms that are more likely to show validation errors, it is\n        recommended to use <Strong>reserveMessageSpace</Strong> to prevent the\n        elements shifting when messages appear.\n      </Text>\n\n      <Text>\n        Uses a <Strong>small Stack</Strong> for fields, with a{\" \"}\n        <Strong>large Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <Stack space=\"small\">\n        <TextField\n          label=\"TextField\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Dropdown\n          label=\"Dropdown\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        >\n          <option>Option 1</option>\n          <option>Option 2</option>\n          <option>Option 3</option>\n        </Dropdown>\n\n        <MonthPicker\n          label=\"MonthPicker\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Checkbox\n          label=\"Checkbox\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n      </Stack>\n\n      <Actions>\n        <Button onClick={() => toggleState(\"error\")}>Toggle errors</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</PageBlock>"
-}];
-//#endregion
-exports.snippets = snippets;

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

@@ -1,12 +0,0 @@
-//#region src/lib/playroom/snippets/Form.ts
-const snippets = [{
-	group: "Sections",
-	name: "Form (basic)",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms with minimal or no validation as errors will impact layout.\n      </Text>\n\n      <Text>\n        Uses a <Strong>large Stack</Strong> for fields, with a{\" \"}\n        <Strong>xlarge Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <TextField label=\"TextField\" />\n\n      <Dropdown\n        label=\"Dropdown\"\n        tone={getState(\"error\") ? \"critical\" : undefined}\n        message={getState(\"error\") ? \"Required field\" : undefined}\n      >\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>\n\n      <MonthPicker label=\"MonthPicker\" />\n\n      <Checkbox label=\"Checkbox\" />\n    </Stack>\n\n    <Actions>\n      <Button>Primary action</Button>\n      <Button variant=\"transparent\" onClick={() => toggleState(\"error\")}>\n        Toggle error\n      </Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
-}, {
-	group: "Sections",
-	name: "Form (validation)",
-	code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms that are more likely to show validation errors, it is\n        recommended to use <Strong>reserveMessageSpace</Strong> to prevent the\n        elements shifting when messages appear.\n      </Text>\n\n      <Text>\n        Uses a <Strong>small Stack</Strong> for fields, with a{\" \"}\n        <Strong>large Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <Stack space=\"small\">\n        <TextField\n          label=\"TextField\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Dropdown\n          label=\"Dropdown\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        >\n          <option>Option 1</option>\n          <option>Option 2</option>\n          <option>Option 3</option>\n        </Dropdown>\n\n        <MonthPicker\n          label=\"MonthPicker\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Checkbox\n          label=\"Checkbox\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n      </Stack>\n\n      <Actions>\n        <Button onClick={() => toggleState(\"error\")}>Toggle errors</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</PageBlock>"
-}];
-//#endregion
-export { snippets };

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

@@ -1,8 +0,0 @@
-//#region src/lib/playroom/snippets/SteppedSection.ts
-const snippets = [{
-	group: "Sections",
-	name: "Stepped Section",
-	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\n          <Button\n            variant=\"solid\"\n            tone=\"formAccent\"\n            icon={<IconArrow direction=\"right\" />}\n            iconPosition=\"trailing\"\n            onClick={() => {\n              const newStep = getState(\"activeStep\") + 1\n              setState(\"activeStep\", newStep)\n              if (newStep > getState(\"progress\")) {\n                setState(\"progress\", newStep)\n              }\n            }}\n          >\n            Continue\n          </Button>\n        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
-}];
-//#endregion
-exports.snippets = snippets;

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

@@ -1,8 +0,0 @@
-//#region src/lib/playroom/snippets/SteppedSection.ts
-const snippets = [{
-	group: "Sections",
-	name: "Stepped Section",
-	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\n          <Button\n            variant=\"solid\"\n            tone=\"formAccent\"\n            icon={<IconArrow direction=\"right\" />}\n            iconPosition=\"trailing\"\n            onClick={() => {\n              const newStep = getState(\"activeStep\") + 1\n              setState(\"activeStep\", newStep)\n              if (newStep > getState(\"progress\")) {\n                setState(\"progress\", newStep)\n              }\n            }}\n          >\n            Continue\n          </Button>\n        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
-}];
-//#endregion
-export { snippets };

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

@@ -1,8 +0,0 @@
-//#region src/lib/playroom/snippets/TabbedSection.ts
-const snippets = [{
-	group: "Sections",
-	name: "Tabbed Section",
-	code: "<PageBlock width=\"medium\">\n  <TabsProvider>\n    <Stack space=\"large\">\n      <Tabs divider=\"none\" label=\"Tabs Block\">\n        <Tab>Tab 1</Tab>\n        <Tab>Tab 2</Tab>\n        <Tab>Tab 3</Tab>\n      </Tabs>\n\n      <TabPanels>\n        <TabPanel>\n          <Placeholder label=\"Tab 1 content\" height={500} />\n        </TabPanel>\n        <TabPanel>\n          <Placeholder label=\"Tab 2 content\" height={300} />\n        </TabPanel>\n        <TabPanel>\n          <Placeholder label=\"Tab 3 content\" height={400} />\n        </TabPanel>\n      </TabPanels>\n    </Stack>\n  </TabsProvider>\n</PageBlock>"
-}];
-//#endregion
-exports.snippets = snippets;