braid-design-system 34.9.0 → 34.9.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # braid-design-system
 
+## 34.9.1
+
+### Patch Changes
+
+- **Drawer:** Reject empty `title` ([#2171](https://github.com/seek-oss/braid-design-system/pull/2171))
+
+  An empty `title` is now treated as invalid, consistent with `aria-label`. Provide a non-empty `title`, or use `aria-label` for an untitled `Drawer`.
+
+- **Avatar:** Ensure loading background fills completely in dark mode ([#2169](https://github.com/seek-oss/braid-design-system/pull/2169))
+
+- playroom: Add Patterns group to snippets ([#2167](https://github.com/seek-oss/braid-design-system/pull/2167))
+
+- **Avatar:** Prevent layout collapse inside Inline component ([#2169](https://github.com/seek-oss/braid-design-system/pull/2169))
+
+- **BraidProvider:** Ensure default text tone follows the theme ([#2163](https://github.com/seek-oss/braid-design-system/pull/2163))
+
+  Nested `BraidProvider` components using different themes now always apply the default text tones according to the selected theme.
+
+- **Dialog:** Restore header rendering when `title` is empty ([#2171](https://github.com/seek-oss/braid-design-system/pull/2171))
+
+  Fixes a regression where a `Dialog` with an empty `title` no longer rendered its `illustration` or `description`.
+
 ## 34.9.0
 
 ### Minor Changes

package/dist/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

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

@@ -187,7 +187,6 @@ const Avatar = (0, react.forwardRef)(({ name = "", "aria-label": ariaLabel, "ari
 		outline: !clickable && focusable ? "focus" : void 0,
 		className: {
 			[require_Avatar_css.size[size$1]]: true,
-			[require_Avatar_css.keyline]: true,
 			[require_virtualTouchable_css.virtualTouchable]: clickable && (size$1 === "xsmall" || size$1 === "small")
 		},
 		style: colour ? { background: colour.value } : void 0,
@@ -204,6 +203,7 @@ const Avatar = (0, react.forwardRef)(({ name = "", "aria-label": ariaLabel, "ari
 			height: "full",
 			overflow: "hidden",
 			borderRadius,
+			className: require_Avatar_css.keyline,
 			children: content
 		})
 	});

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

@@ -1,3 +1,4 @@
+const require_px = require("../../utils/px.cjs");
 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");
@@ -12,7 +13,7 @@ const size = (0, _vanilla_extract_css.styleVariants)({
 	xxlarge: 96
 }, (pixels) => ({
 	height: pixels,
-	width: pixels
+	width: `${require_px.px(pixels)} !important`
 }), "size");
 const keyline = (0, _vanilla_extract_css.style)({
 	borderWidth: require_vars_css.vars.borderWidth.standard,

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

@@ -1,3 +1,4 @@
+import { px } from "../../utils/px.mjs";
 import { vars } from "../../themes/vars.css.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants } from "@vanilla-extract/css";
@@ -12,7 +13,7 @@ const size = styleVariants({
 	xxlarge: 96
 }, (pixels) => ({
 	height: pixels,
-	width: pixels
+	width: `${px(pixels)} !important`
 }), "size");
 const keyline = style({
 	borderWidth: vars.borderWidth.standard,

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

@@ -185,7 +185,6 @@ const Avatar = forwardRef(({ name = "", "aria-label": ariaLabel, "aria-described
 		outline: !clickable && focusable ? "focus" : void 0,
 		className: {
 			[size[size$1]]: true,
-			[keyline]: true,
 			[virtualTouchable]: clickable && (size$1 === "xsmall" || size$1 === "small")
 		},
 		style: colour ? { background: colour.value } : void 0,
@@ -202,6 +201,7 @@ const Avatar = forwardRef(({ name = "", "aria-label": ariaLabel, "aria-described
 			height: "full",
 			overflow: "hidden",
 			borderRadius,
+			className: keyline,
 			children: content
 		})
 	});

package/dist/lib/components/BraidPortal/BraidPortal.cjs

@@ -10,7 +10,6 @@ const BraidPortal = ({ children, container }) => {
 		value: null,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VanillaThemeContainer.VanillaThemeContainer, {
 			theme: vanillaTheme,
-			setDefaultTextTones: true,
 			children
 		})
 	}), container ?? document.body);

package/dist/lib/components/BraidPortal/BraidPortal.mjs

@@ -10,7 +10,6 @@ const BraidPortal = ({ children, container }) => {
 		value: null,
 		children: /* @__PURE__ */ jsx(VanillaThemeContainer, {
 			theme: vanillaTheme,
-			setDefaultTextTones: true,
 			children
 		})
 	}), container ?? document.body);

package/dist/lib/components/BraidProvider/BraidProvider.cjs

@@ -46,7 +46,6 @@ const BraidProvider = ({ theme, styleBody = true, linkComponent, children }) =>
           `
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VanillaThemeContainer.VanillaThemeContainer, {
 			theme: theme.vanillaTheme,
-			setDefaultTextTones: !alreadyInBraidProvider,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponentContext.Provider, {
 				value: linkComponent || linkComponentFromContext,
 				children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BreakpointContext.BreakpointProvider, { children })

package/dist/lib/components/BraidProvider/BraidProvider.mjs

@@ -43,7 +43,6 @@ const BraidProvider = ({ theme, styleBody = true, linkComponent, children }) =>
           `
 		}) : null, /* @__PURE__ */ jsx(VanillaThemeContainer, {
 			theme: theme.vanillaTheme,
-			setDefaultTextTones: !alreadyInBraidProvider,
 			children: /* @__PURE__ */ jsx(LinkComponentContext.Provider, {
 				value: linkComponent || linkComponentFromContext,
 				children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ jsx(BreakpointProvider, { children })

package/dist/lib/components/BraidProvider/VanillaThemeContainer.cjs

@@ -2,8 +2,8 @@ const require_typography_css = require("../../css/typography.css.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/BraidProvider/VanillaThemeContainer.tsx
 const textTones = [require_typography_css.lightModeTone.light, require_typography_css.darkModeTone.dark].join(" ");
-const VanillaThemeContainer = ({ children, theme, setDefaultTextTones }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: `${theme}${setDefaultTextTones ? ` ${textTones}` : ""}`,
+const VanillaThemeContainer = ({ children, theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: `${theme} ${textTones}`,
 	children
 });
 //#endregion

package/dist/lib/components/BraidProvider/VanillaThemeContainer.mjs

@@ -2,8 +2,8 @@ import { darkModeTone, lightModeTone } from "../../css/typography.css.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/BraidProvider/VanillaThemeContainer.tsx
 const textTones = [lightModeTone.light, darkModeTone.dark].join(" ");
-const VanillaThemeContainer = ({ children, theme, setDefaultTextTones }) => /* @__PURE__ */ jsx("div", {
-	className: `${theme}${setDefaultTextTones ? ` ${textTones}` : ""}`,
+const VanillaThemeContainer = ({ children, theme }) => /* @__PURE__ */ jsx("div", {
+	className: `${theme} ${textTones}`,
 	children
 });
 //#endregion

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

@@ -23,6 +23,11 @@ const assertAccessibleName = ({ title, description, "aria-label": ariaLabel, "ar
 	(0, assert.default)(typeof title === "string" !== (typeof ariaLabel === "string"), dedent.default`
       Drawer requires either a title or an aria-label.
 
+      ${docsMessage}
+    `);
+	(0, assert.default)(typeof title !== "string" || title.trim() !== "", dedent.default`
+      Drawer title must not be empty.
+
       ${docsMessage}
     `);
 	(0, assert.default)(typeof ariaLabel !== "string" || ariaLabel.trim() !== "", dedent.default`

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

@@ -20,6 +20,11 @@ const assertAccessibleName = ({ title, description, "aria-label": ariaLabel, "ar
 	assert(typeof title === "string" !== (typeof ariaLabel === "string"), dedent`
       Drawer requires either a title or an aria-label.
 
+      ${docsMessage}
+    `);
+	assert(typeof title !== "string" || title.trim() !== "", dedent`
+      Drawer title must not be empty.
+
       ${docsMessage}
     `);
 	assert(typeof ariaLabel !== "string" || ariaLabel.trim() !== "", dedent`

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

@@ -158,6 +158,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		right: "flexEnd"
 	}[position];
 	const modalRadius = !isDrawer ? "xlarge" : void 0;
+	/**
+	* Only Drawer supports omitting the title, in which case there is no header
+	* to hold the content clear of the close button.
+	*/
+	const untitledDrawer = isDrawer && !title;
 	const modalLayout = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalContentScrollLayout, {
 		applyPageBlockGutters: isDrawer,
 		applyFullHeight: isDrawer || allowColumnLayout && Boolean(footer) && !isMobile,
@@ -165,7 +170,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		coverImageEnabled,
 		hasFooter: Boolean(footer),
 		children: [
-			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
+			!untitledDrawer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContentHeader, {
 				title,
 				headingLevel,
 				description,
@@ -174,7 +179,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				ref: headingRef,
 				reserveCloseArea: true
 			}) : null,
-			isDrawer && !title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
+			untitledDrawer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
 				require_Bleed.Bleed,
 				/**
 				* Matches close button size so content starts below it. `bottom`
@@ -203,9 +208,9 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		ref: dialogRef,
 		role: "dialog",
 		"aria-label": ariaLabel || title,
-		"aria-describedby": title && description || ariaDescription ? descriptionId : void 0,
+		"aria-describedby": !untitledDrawer && description || ariaDescription ? descriptionId : void 0,
 		"aria-modal": "true",
-		tabIndex: title ? void 0 : -1,
+		tabIndex: untitledDrawer ? -1 : void 0,
 		id: resolvedId,
 		onKeyDown: handleEscape,
 		position: "relative",

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

@@ -158,6 +158,11 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		right: "flexEnd"
 	}[position];
 	const modalRadius = !isDrawer ? "xlarge" : void 0;
+	/**
+	* Only Drawer supports omitting the title, in which case there is no header
+	* to hold the content clear of the close button.
+	*/
+	const untitledDrawer = isDrawer && !title;
 	const modalLayout = /* @__PURE__ */ jsxs(ModalContentScrollLayout, {
 		applyPageBlockGutters: isDrawer,
 		applyFullHeight: isDrawer || allowColumnLayout && Boolean(footer) && !isMobile,
@@ -165,7 +170,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		coverImageEnabled,
 		hasFooter: Boolean(footer),
 		children: [
-			title ? /* @__PURE__ */ jsx(ModalContentHeader, {
+			!untitledDrawer ? /* @__PURE__ */ jsx(ModalContentHeader, {
 				title,
 				headingLevel,
 				description,
@@ -174,7 +179,7 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 				ref: headingRef,
 				reserveCloseArea: true
 			}) : null,
-			isDrawer && !title ? /* @__PURE__ */ jsx(
+			untitledDrawer ? /* @__PURE__ */ jsx(
 				Bleed,
 				/**
 				* Matches close button size so content starts below it. `bottom`
@@ -203,9 +208,9 @@ const ModalContent = ({ id, children, description, onClose, width, closeLabel =
 		ref: dialogRef,
 		role: "dialog",
 		"aria-label": ariaLabel || title,
-		"aria-describedby": title && description || ariaDescription ? descriptionId : void 0,
+		"aria-describedby": !untitledDrawer && description || ariaDescription ? descriptionId : void 0,
 		"aria-modal": "true",
-		tabIndex: title ? void 0 : -1,
+		tabIndex: untitledDrawer ? -1 : void 0,
 		id: resolvedId,
 		onKeyDown: handleEscape,
 		position: "relative",

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

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

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

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

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/BulkActions.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Bulk actions",
+	code: "<>\n  {setDefaultState(\"one\", false)}\n  {setDefaultState(\"two\", false)}\n  {setDefaultState(\"three\", false)}\n  <Stack space=\"large\">\n    <Inline space=\"medium\" alignY=\"center\">\n      <CheckboxStandalone\n        aria-label=\"Select all\"\n        checked={[getState(\"one\"), getState(\"two\"), getState(\"three\")]}\n        onChange={({ currentTarget: { checked } }) => {\n          setState(\"one\", checked)\n          setState(\"two\", checked)\n          setState(\"three\", checked)\n        }}\n      />\n\n      {getState(\"one\") || getState(\"two\") || getState(\"three\") ? (\n        <Inline space=\"large\">\n          <ButtonIcon bleed icon={<IconDownload />} label=\"Action 1\" />\n          <ButtonIcon bleed icon={<IconDelete />} label=\"Action 2\" />\n        </Inline>\n      ) : null}\n    </Inline>\n    <Columns space=\"small\">\n      <Column width=\"content\">\n        <Text>\n          <CheckboxStandalone\n            aria-label=\"one\"\n            checked={getState(\"one\")}\n            onChange={() => toggleState(\"one\")}\n          />\n        </Text>\n      </Column>\n      <Column>\n        <Text>Item 1</Text>\n      </Column>\n    </Columns>\n    <Columns space=\"small\">\n      <Column width=\"content\">\n        <Text>\n          <CheckboxStandalone\n            aria-label=\"two\"\n            checked={getState(\"two\")}\n            onChange={() => toggleState(\"two\")}\n          />\n        </Text>\n      </Column>\n      <Column>\n        <Text>Item 2</Text>\n      </Column>\n    </Columns>\n    <Columns space=\"small\">\n      <Column width=\"content\">\n        <Text>\n          <CheckboxStandalone\n            aria-label=\"three\"\n            checked={getState(\"three\")}\n            onChange={() => toggleState(\"three\")}\n          />\n        </Text>\n      </Column>\n      <Column>\n        <Text>Item 3</Text>\n      </Column>\n    </Columns>\n  </Stack>\n</>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/BulkActions.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Bulk actions",
+	code: "<>\n  {setDefaultState(\"one\", false)}\n  {setDefaultState(\"two\", false)}\n  {setDefaultState(\"three\", false)}\n  <Stack space=\"large\">\n    <Inline space=\"medium\" alignY=\"center\">\n      <CheckboxStandalone\n        aria-label=\"Select all\"\n        checked={[getState(\"one\"), getState(\"two\"), getState(\"three\")]}\n        onChange={({ currentTarget: { checked } }) => {\n          setState(\"one\", checked)\n          setState(\"two\", checked)\n          setState(\"three\", checked)\n        }}\n      />\n\n      {getState(\"one\") || getState(\"two\") || getState(\"three\") ? (\n        <Inline space=\"large\">\n          <ButtonIcon bleed icon={<IconDownload />} label=\"Action 1\" />\n          <ButtonIcon bleed icon={<IconDelete />} label=\"Action 2\" />\n        </Inline>\n      ) : null}\n    </Inline>\n    <Columns space=\"small\">\n      <Column width=\"content\">\n        <Text>\n          <CheckboxStandalone\n            aria-label=\"one\"\n            checked={getState(\"one\")}\n            onChange={() => toggleState(\"one\")}\n          />\n        </Text>\n      </Column>\n      <Column>\n        <Text>Item 1</Text>\n      </Column>\n    </Columns>\n    <Columns space=\"small\">\n      <Column width=\"content\">\n        <Text>\n          <CheckboxStandalone\n            aria-label=\"two\"\n            checked={getState(\"two\")}\n            onChange={() => toggleState(\"two\")}\n          />\n        </Text>\n      </Column>\n      <Column>\n        <Text>Item 2</Text>\n      </Column>\n    </Columns>\n    <Columns space=\"small\">\n      <Column width=\"content\">\n        <Text>\n          <CheckboxStandalone\n            aria-label=\"three\"\n            checked={getState(\"three\")}\n            onChange={() => toggleState(\"three\")}\n          />\n        </Text>\n      </Column>\n      <Column>\n        <Text>Item 3</Text>\n      </Column>\n    </Columns>\n  </Stack>\n</>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/DividedLists.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Divided list",
+	code: "<Stack space=\"xlarge\">\n  <Heading level=\"2\">Heading</Heading>\n  <Stack space=\"large\">\n    {[\n      {\n        title: \"Strong text lorem ipsum\",\n        description: \"Secondary text dolor sit amet\",\n      },\n      {\n        title: \"Strong text\",\n        description: \"Secondary text consectetur adipiscing\",\n      },\n      {\n        title: \"Strong text ipsum\",\n        description: \"Secondary text vel odio\",\n      },\n    ].map((item) => (\n      <Stack key={item.title} space=\"large\">\n        <Columns space=\"small\">\n          <Column>\n            <Stack space=\"small\">\n              <Text weight=\"strong\">{item.title}</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      </Stack>\n    ))}\n  </Stack>\n</Stack>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/DividedLists.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Divided list",
+	code: "<Stack space=\"xlarge\">\n  <Heading level=\"2\">Heading</Heading>\n  <Stack space=\"large\">\n    {[\n      {\n        title: \"Strong text lorem ipsum\",\n        description: \"Secondary text dolor sit amet\",\n      },\n      {\n        title: \"Strong text\",\n        description: \"Secondary text consectetur adipiscing\",\n      },\n      {\n        title: \"Strong text ipsum\",\n        description: \"Secondary text vel odio\",\n      },\n    ].map((item) => (\n      <Stack key={item.title} space=\"large\">\n        <Columns space=\"small\">\n          <Column>\n            <Stack space=\"small\">\n              <Text weight=\"strong\">{item.title}</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      </Stack>\n    ))}\n  </Stack>\n</Stack>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/EmptyState.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Empty state (full page)",
+	code: "<ContentBlock width=\"small\">\n  <Stack align=\"center\" space={{ mobile: \"medium\", desktop: \"large\" }}>\n    <Placeholder\n      shape=\"round\"\n      width={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n      height={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n    />\n\n    <Stack space=\"medium\" align=\"center\">\n      <Heading level=\"2\" weight=\"weak\" align=\"center\">\n        An example empty state\n      </Heading>\n      <Text tone=\"secondary\" align=\"center\">\n        This is a center aligned example with a short summary. You can use a\n        button or <TextLink href=\"#\">a TextLink</TextLink> to suit your needs.\n      </Text>\n      <Actions>\n        <Button variant=\"ghost\">Button</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</ContentBlock>"
+}, {
+	group: "Patterns",
+	name: "Empty state (inline)",
+	code: "<Tiles columns={{ mobile: 1, tablet: 3 }} space=\"small\">\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Notice tone=\"info\">\n        <Text>\n          We don&rsquo;t have any data for this yet. Please check back later.\n        </Text>\n      </Notice>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n</Tiles>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/EmptyState.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Empty state (full page)",
+	code: "<ContentBlock width=\"small\">\n  <Stack align=\"center\" space={{ mobile: \"medium\", desktop: \"large\" }}>\n    <Placeholder\n      shape=\"round\"\n      width={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n      height={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n    />\n\n    <Stack space=\"medium\" align=\"center\">\n      <Heading level=\"2\" weight=\"weak\" align=\"center\">\n        An example empty state\n      </Heading>\n      <Text tone=\"secondary\" align=\"center\">\n        This is a center aligned example with a short summary. You can use a\n        button or <TextLink href=\"#\">a TextLink</TextLink> to suit your needs.\n      </Text>\n      <Actions>\n        <Button variant=\"ghost\">Button</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</ContentBlock>"
+}, {
+	group: "Patterns",
+	name: "Empty state (inline)",
+	code: "<Tiles columns={{ mobile: 1, tablet: 3 }} space=\"small\">\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Notice tone=\"info\">\n        <Text>\n          We don&rsquo;t have any data for this yet. Please check back later.\n        </Text>\n      </Notice>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n</Tiles>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/ErrorState.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Error state (full page)",
+	code: "<ContentBlock width=\"small\">\n  <Stack align=\"center\" space={{ mobile: \"medium\", desktop: \"large\" }}>\n    <Placeholder\n      shape=\"round\"\n      width={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n      height={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n    />\n\n    <Stack space=\"medium\" align=\"center\">\n      <Heading level=\"2\" weight=\"weak\" align=\"center\">\n        How an error might look\n      </Heading>\n      <Text tone=\"secondary\" align=\"center\">\n        This is a center aligned example with a short summary. You can use a\n        button or <TextLink href=\"#\">a TextLink</TextLink> to suit your needs.\n      </Text>\n      <Actions>\n        <Button variant=\"ghost\">Button</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</ContentBlock>"
+}, {
+	group: "Patterns",
+	name: "Error state (inline)",
+	code: "<Tiles columns={{ mobile: 1, tablet: 3 }} space=\"small\">\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Notice tone=\"critical\">\n        <Text>\n          We can&rsquo;t load this data right now. Please check back later.\n        </Text>\n      </Notice>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n</Tiles>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/ErrorState.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Error state (full page)",
+	code: "<ContentBlock width=\"small\">\n  <Stack align=\"center\" space={{ mobile: \"medium\", desktop: \"large\" }}>\n    <Placeholder\n      shape=\"round\"\n      width={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n      height={responsiveValue({\n        mobile: \"96px\",\n        tablet: \"128px\",\n        desktop: \"192px\",\n      })}\n    />\n\n    <Stack space=\"medium\" align=\"center\">\n      <Heading level=\"2\" weight=\"weak\" align=\"center\">\n        How an error might look\n      </Heading>\n      <Text tone=\"secondary\" align=\"center\">\n        This is a center aligned example with a short summary. You can use a\n        button or <TextLink href=\"#\">a TextLink</TextLink> to suit your needs.\n      </Text>\n      <Actions>\n        <Button variant=\"ghost\">Button</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</ContentBlock>"
+}, {
+	group: "Patterns",
+	name: "Error state (inline)",
+	code: "<Tiles columns={{ mobile: 1, tablet: 3 }} space=\"small\">\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Notice tone=\"critical\">\n        <Text>\n          We can&rsquo;t load this data right now. Please check back later.\n        </Text>\n      </Notice>\n    </Stack>\n  </Card>\n  <Card height=\"full\">\n    <Stack space=\"large\">\n      <Heading level=\"4\">Widget title</Heading>\n      <Text>\n        Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit\n        amet.\n      </Text>\n    </Stack>\n  </Card>\n</Tiles>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/Forms.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Form",
+	code: "<>\n  {setDefaultState(\"shouldValidate\", false)}\n  {setDefaultState(\"Name\", \"\")}\n  {setDefaultState(\"RoleTitle\", \"\")}\n  {setDefaultState(\"textfield\", \"\")}\n  <ContentBlock width=\"small\">\n    <Stack space=\"xlarge\">\n      <Heading level=\"2\">Form heading</Heading>\n      <Stack space=\"large\">\n        <Stack space=\"small\">\n          <TextField\n            label=\"Name\"\n            onChange={setState(\"Name\")}\n            value={getState(\"Name\")}\n            reserveMessageSpace\n            message={\n              getState(\"shouldValidate\") === true &&\n              getState(\"Name\").length === 0\n                ? \"Enter your name\"\n                : undefined\n            }\n            tone={\n              getState(\"shouldValidate\") === true &&\n              getState(\"Name\").length === 0\n                ? \"critical\"\n                : undefined\n            }\n          />\n\n          <TextField\n            label=\"Role title\"\n            onChange={setState(\"RoleTitle\")}\n            value={getState(\"RoleTitle\")}\n            reserveMessageSpace\n            message={\n              getState(\"shouldValidate\") === true &&\n              getState(\"RoleTitle\").length === 0\n                ? \"Enter your role title\"\n                : undefined\n            }\n            tone={\n              getState(\"shouldValidate\") === true &&\n              getState(\"RoleTitle\").length === 0\n                ? \"critical\"\n                : undefined\n            }\n          />\n\n          <TextField\n            label=\"Phone number\"\n            onChange={setState(\"textfield\")}\n            value={getState(\"textfield\")}\n            secondaryLabel=\"optional\"\n            reserveMessageSpace\n          />\n        </Stack>\n        <Actions>\n          <Button\n            variant=\"solid\"\n            onClick={() => setState(\"shouldValidate\", true)}\n          >\n            Submit\n          </Button>\n        </Actions>\n      </Stack>\n    </Stack>\n  </ContentBlock>\n</>"
+}, {
+	group: "Patterns",
+	name: "Form (multi-page)",
+	code: "<>\n  {setDefaultState(\"progress\", 2)}\n  <ContentBlock width=\"small\">\n    <Stack space=\"medium\">\n      <Stepper label=\"Linear steps\" progress={getState(\"progress\")}>\n        <Step>1. First step</Step>\n        <Step>2. Second step</Step>\n        <Step>3. Third step</Step>\n        <Step>4. Fourth step</Step>\n      </Stepper>\n      <Placeholder height={500} label=\"Form contents\" />\n      <Hidden below=\"tablet\">\n        <Columns space=\"none\">\n          <Column>\n            <Inline space=\"small\">\n              {getState(\"progress\") > 1 ? (\n                <Button\n                  icon={<IconArrow direction=\"left\" />}\n                  variant=\"soft\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") - 1)}\n                >\n                  Back\n                </Button>\n              ) : null}\n            </Inline>\n          </Column>\n          <Column>\n            <Inline align=\"right\" space=\"medium\">\n              <Inline space=\"small\">\n                <Button variant=\"transparent\">Save draft</Button>\n                {getState(\"progress\") < 4 ? (\n                  <Button\n                    variant=\"solid\"\n                    tone=\"formAccent\"\n                    icon={<IconArrow direction=\"right\" />}\n                    iconPosition=\"trailing\"\n                    onClick={() =>\n                      setState(\"progress\", getState(\"progress\") + 1)\n                    }\n                  >\n                    Continue\n                  </Button>\n                ) : null}\n                {getState(\"progress\") > 3 ? (\n                  <Button\n                    icon={<IconSend />}\n                    iconPosition=\"trailing\"\n                    tone=\"brandAccent\"\n                    onClick={() =>\n                      setState(\"progress\", getState(\"progress\") + 1)\n                    }\n                  >\n                    Submit\n                  </Button>\n                ) : null}\n              </Inline>\n            </Inline>\n          </Column>\n        </Columns>\n      </Hidden>\n      <Hidden above=\"mobile\">\n        <Stack space=\"small\">\n          <Columns space=\"xsmall\">\n            <Column>\n              {getState(\"progress\") > 1 ? (\n                <Button\n                  icon={<IconArrow direction=\"left\" />}\n                  variant=\"soft\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") - 1)}\n                >\n                  Back\n                </Button>\n              ) : null}\n            </Column>\n            <Column>\n              {getState(\"progress\") < 4 ? (\n                <Button\n                  variant=\"solid\"\n                  tone=\"formAccent\"\n                  icon={<IconArrow direction=\"right\" />}\n                  iconPosition=\"trailing\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") + 1)}\n                >\n                  Continue\n                </Button>\n              ) : null}\n              {getState(\"progress\") > 3 ? (\n                <Button\n                  icon={<IconSend />}\n                  iconPosition=\"trailing\"\n                  tone=\"brandAccent\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") + 1)}\n                >\n                  Submit\n                </Button>\n              ) : null}\n            </Column>\n          </Columns>\n          <Button variant=\"transparent\">Save draft</Button>\n        </Stack>\n      </Hidden>\n    </Stack>\n  </ContentBlock>\n</>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/Forms.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Form",
+	code: "<>\n  {setDefaultState(\"shouldValidate\", false)}\n  {setDefaultState(\"Name\", \"\")}\n  {setDefaultState(\"RoleTitle\", \"\")}\n  {setDefaultState(\"textfield\", \"\")}\n  <ContentBlock width=\"small\">\n    <Stack space=\"xlarge\">\n      <Heading level=\"2\">Form heading</Heading>\n      <Stack space=\"large\">\n        <Stack space=\"small\">\n          <TextField\n            label=\"Name\"\n            onChange={setState(\"Name\")}\n            value={getState(\"Name\")}\n            reserveMessageSpace\n            message={\n              getState(\"shouldValidate\") === true &&\n              getState(\"Name\").length === 0\n                ? \"Enter your name\"\n                : undefined\n            }\n            tone={\n              getState(\"shouldValidate\") === true &&\n              getState(\"Name\").length === 0\n                ? \"critical\"\n                : undefined\n            }\n          />\n\n          <TextField\n            label=\"Role title\"\n            onChange={setState(\"RoleTitle\")}\n            value={getState(\"RoleTitle\")}\n            reserveMessageSpace\n            message={\n              getState(\"shouldValidate\") === true &&\n              getState(\"RoleTitle\").length === 0\n                ? \"Enter your role title\"\n                : undefined\n            }\n            tone={\n              getState(\"shouldValidate\") === true &&\n              getState(\"RoleTitle\").length === 0\n                ? \"critical\"\n                : undefined\n            }\n          />\n\n          <TextField\n            label=\"Phone number\"\n            onChange={setState(\"textfield\")}\n            value={getState(\"textfield\")}\n            secondaryLabel=\"optional\"\n            reserveMessageSpace\n          />\n        </Stack>\n        <Actions>\n          <Button\n            variant=\"solid\"\n            onClick={() => setState(\"shouldValidate\", true)}\n          >\n            Submit\n          </Button>\n        </Actions>\n      </Stack>\n    </Stack>\n  </ContentBlock>\n</>"
+}, {
+	group: "Patterns",
+	name: "Form (multi-page)",
+	code: "<>\n  {setDefaultState(\"progress\", 2)}\n  <ContentBlock width=\"small\">\n    <Stack space=\"medium\">\n      <Stepper label=\"Linear steps\" progress={getState(\"progress\")}>\n        <Step>1. First step</Step>\n        <Step>2. Second step</Step>\n        <Step>3. Third step</Step>\n        <Step>4. Fourth step</Step>\n      </Stepper>\n      <Placeholder height={500} label=\"Form contents\" />\n      <Hidden below=\"tablet\">\n        <Columns space=\"none\">\n          <Column>\n            <Inline space=\"small\">\n              {getState(\"progress\") > 1 ? (\n                <Button\n                  icon={<IconArrow direction=\"left\" />}\n                  variant=\"soft\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") - 1)}\n                >\n                  Back\n                </Button>\n              ) : null}\n            </Inline>\n          </Column>\n          <Column>\n            <Inline align=\"right\" space=\"medium\">\n              <Inline space=\"small\">\n                <Button variant=\"transparent\">Save draft</Button>\n                {getState(\"progress\") < 4 ? (\n                  <Button\n                    variant=\"solid\"\n                    tone=\"formAccent\"\n                    icon={<IconArrow direction=\"right\" />}\n                    iconPosition=\"trailing\"\n                    onClick={() =>\n                      setState(\"progress\", getState(\"progress\") + 1)\n                    }\n                  >\n                    Continue\n                  </Button>\n                ) : null}\n                {getState(\"progress\") > 3 ? (\n                  <Button\n                    icon={<IconSend />}\n                    iconPosition=\"trailing\"\n                    tone=\"brandAccent\"\n                    onClick={() =>\n                      setState(\"progress\", getState(\"progress\") + 1)\n                    }\n                  >\n                    Submit\n                  </Button>\n                ) : null}\n              </Inline>\n            </Inline>\n          </Column>\n        </Columns>\n      </Hidden>\n      <Hidden above=\"mobile\">\n        <Stack space=\"small\">\n          <Columns space=\"xsmall\">\n            <Column>\n              {getState(\"progress\") > 1 ? (\n                <Button\n                  icon={<IconArrow direction=\"left\" />}\n                  variant=\"soft\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") - 1)}\n                >\n                  Back\n                </Button>\n              ) : null}\n            </Column>\n            <Column>\n              {getState(\"progress\") < 4 ? (\n                <Button\n                  variant=\"solid\"\n                  tone=\"formAccent\"\n                  icon={<IconArrow direction=\"right\" />}\n                  iconPosition=\"trailing\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") + 1)}\n                >\n                  Continue\n                </Button>\n              ) : null}\n              {getState(\"progress\") > 3 ? (\n                <Button\n                  icon={<IconSend />}\n                  iconPosition=\"trailing\"\n                  tone=\"brandAccent\"\n                  onClick={() => setState(\"progress\", getState(\"progress\") + 1)}\n                >\n                  Submit\n                </Button>\n              ) : null}\n            </Column>\n          </Columns>\n          <Button variant=\"transparent\">Save draft</Button>\n        </Stack>\n      </Hidden>\n    </Stack>\n  </ContentBlock>\n</>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,20 @@
+//#region src/lib/playroom/snippets/Nudge.ts
+const snippets = [
+	{
+		group: "Patterns",
+		name: "Nudge",
+		code: "<Box background=\"formAccentSoft\" padding=\"gutter\" borderRadius=\"large\">\n  <Columns reverse space=\"gutter\" collapseBelow=\"tablet\">\n    <Column width=\"content\">\n      <Columns space=\"xsmall\">\n        <Column>\n          <Box\n            background=\"surface\"\n            borderRadius=\"full\"\n            padding={{ mobile: \"small\", tablet: \"medium\" }}\n            display=\"inlineBlock\"\n          >\n            <Placeholder\n              shape=\"round\"\n              label=\"illo\"\n              width={responsiveValue({\n                mobile: \"80px\",\n                tablet: \"96px\",\n              })}\n              height={responsiveValue({\n                mobile: \"80px\",\n                tablet: \"96px\",\n              })}\n            />\n          </Box>\n        </Column>\n        <Column width=\"content\">\n          <ButtonIcon\n            variant=\"transparent\"\n            icon={<IconClear />}\n            label=\"Close\"\n            bleed\n          />\n        </Column>\n      </Columns>\n    </Column>\n    <Column>\n      <Stack space=\"medium\">\n        <Heading level=\"4\">Create a nudge today</Heading>\n        <Text>\n          Use a nudge to drive specific behaviour that leads to better outcomes\n          for customers or SEEK.\n        </Text>\n        <Inline space=\"xsmall\">\n          <Button>Create nudge</Button>\n          <Button variant=\"transparent\">Learn more</Button>\n        </Inline>\n      </Stack>\n    </Column>\n  </Columns>\n</Box>"
+	},
+	{
+		group: "Patterns",
+		name: "Nudge (small)",
+		code: "<Box background=\"formAccentSoft\" padding=\"gutter\" borderRadius=\"large\">\n  <Columns reverse space=\"gutter\" collapseBelow=\"tablet\">\n    <Column width=\"content\">\n      <Columns space=\"xsmall\">\n        <Column>\n          <Box\n            background=\"surface\"\n            borderRadius=\"full\"\n            padding={{ mobile: \"xsmall\", tablet: \"small\" }}\n            display=\"inlineBlock\"\n          >\n            <Placeholder\n              shape=\"round\"\n              label=\"illo\"\n              width={responsiveValue({\n                mobile: \"72px\",\n                tablet: \"80px\",\n              })}\n              height={responsiveValue({\n                mobile: \"72px\",\n                tablet: \"80px\",\n              })}\n            />\n          </Box>\n        </Column>\n        <Column width=\"content\">\n          <ButtonIcon\n            variant=\"transparent\"\n            icon={<IconClear />}\n            label=\"Close\"\n            bleed\n          />\n        </Column>\n      </Columns>\n    </Column>\n    <Column>\n      <Stack space=\"small\">\n        <Text size=\"large\" weight=\"strong\">\n          Create a small nudge\n        </Text>\n        <Text size=\"small\">\n          Use a nudge to drive specific behaviour that leads to better outcomes\n          for customers or SEEK.\n        </Text>\n        <Inline space=\"none\">\n          <Button size=\"small\">Create nudge</Button>\n        </Inline>\n      </Stack>\n    </Column>\n  </Columns>\n</Box>"
+	},
+	{
+		group: "Patterns",
+		name: "Nudge (xsmall)",
+		code: "<Box background=\"formAccentSoft\" padding=\"gutter\" borderRadius=\"large\">\n  <Columns reverse space=\"medium\" collapseBelow=\"tablet\">\n    <Column width=\"content\">\n      <Columns space=\"xsmall\">\n        <Column>\n          <Box\n            background=\"surface\"\n            borderRadius=\"full\"\n            padding={{ mobile: \"xxsmall\", tablet: \"xsmall\" }}\n            display=\"inlineBlock\"\n          >\n            <Placeholder\n              shape=\"round\"\n              label=\"illo\"\n              width=\"72px\"\n              height=\"72px\"\n            />\n          </Box>\n        </Column>\n        <Column width=\"content\">\n          <ButtonIcon\n            variant=\"transparent\"\n            icon={<IconClear />}\n            label=\"Close\"\n            bleed\n          />\n        </Column>\n      </Columns>\n    </Column>\n    <Column>\n      <Stack space=\"small\">\n        <Text weight=\"strong\">Create an xsmall nudge</Text>\n        <Text size=\"small\">\n          Use a nudge to drive specific behaviour that leads to better outcomes\n          for customers or SEEK.\n        </Text>\n        <Text size=\"small\">\n          <TextLinkButton>Create nudge</TextLinkButton>\n        </Text>\n      </Stack>\n    </Column>\n  </Columns>\n</Box>"
+	}
+];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,20 @@
+//#region src/lib/playroom/snippets/Nudge.ts
+const snippets = [
+	{
+		group: "Patterns",
+		name: "Nudge",
+		code: "<Box background=\"formAccentSoft\" padding=\"gutter\" borderRadius=\"large\">\n  <Columns reverse space=\"gutter\" collapseBelow=\"tablet\">\n    <Column width=\"content\">\n      <Columns space=\"xsmall\">\n        <Column>\n          <Box\n            background=\"surface\"\n            borderRadius=\"full\"\n            padding={{ mobile: \"small\", tablet: \"medium\" }}\n            display=\"inlineBlock\"\n          >\n            <Placeholder\n              shape=\"round\"\n              label=\"illo\"\n              width={responsiveValue({\n                mobile: \"80px\",\n                tablet: \"96px\",\n              })}\n              height={responsiveValue({\n                mobile: \"80px\",\n                tablet: \"96px\",\n              })}\n            />\n          </Box>\n        </Column>\n        <Column width=\"content\">\n          <ButtonIcon\n            variant=\"transparent\"\n            icon={<IconClear />}\n            label=\"Close\"\n            bleed\n          />\n        </Column>\n      </Columns>\n    </Column>\n    <Column>\n      <Stack space=\"medium\">\n        <Heading level=\"4\">Create a nudge today</Heading>\n        <Text>\n          Use a nudge to drive specific behaviour that leads to better outcomes\n          for customers or SEEK.\n        </Text>\n        <Inline space=\"xsmall\">\n          <Button>Create nudge</Button>\n          <Button variant=\"transparent\">Learn more</Button>\n        </Inline>\n      </Stack>\n    </Column>\n  </Columns>\n</Box>"
+	},
+	{
+		group: "Patterns",
+		name: "Nudge (small)",
+		code: "<Box background=\"formAccentSoft\" padding=\"gutter\" borderRadius=\"large\">\n  <Columns reverse space=\"gutter\" collapseBelow=\"tablet\">\n    <Column width=\"content\">\n      <Columns space=\"xsmall\">\n        <Column>\n          <Box\n            background=\"surface\"\n            borderRadius=\"full\"\n            padding={{ mobile: \"xsmall\", tablet: \"small\" }}\n            display=\"inlineBlock\"\n          >\n            <Placeholder\n              shape=\"round\"\n              label=\"illo\"\n              width={responsiveValue({\n                mobile: \"72px\",\n                tablet: \"80px\",\n              })}\n              height={responsiveValue({\n                mobile: \"72px\",\n                tablet: \"80px\",\n              })}\n            />\n          </Box>\n        </Column>\n        <Column width=\"content\">\n          <ButtonIcon\n            variant=\"transparent\"\n            icon={<IconClear />}\n            label=\"Close\"\n            bleed\n          />\n        </Column>\n      </Columns>\n    </Column>\n    <Column>\n      <Stack space=\"small\">\n        <Text size=\"large\" weight=\"strong\">\n          Create a small nudge\n        </Text>\n        <Text size=\"small\">\n          Use a nudge to drive specific behaviour that leads to better outcomes\n          for customers or SEEK.\n        </Text>\n        <Inline space=\"none\">\n          <Button size=\"small\">Create nudge</Button>\n        </Inline>\n      </Stack>\n    </Column>\n  </Columns>\n</Box>"
+	},
+	{
+		group: "Patterns",
+		name: "Nudge (xsmall)",
+		code: "<Box background=\"formAccentSoft\" padding=\"gutter\" borderRadius=\"large\">\n  <Columns reverse space=\"medium\" collapseBelow=\"tablet\">\n    <Column width=\"content\">\n      <Columns space=\"xsmall\">\n        <Column>\n          <Box\n            background=\"surface\"\n            borderRadius=\"full\"\n            padding={{ mobile: \"xxsmall\", tablet: \"xsmall\" }}\n            display=\"inlineBlock\"\n          >\n            <Placeholder\n              shape=\"round\"\n              label=\"illo\"\n              width=\"72px\"\n              height=\"72px\"\n            />\n          </Box>\n        </Column>\n        <Column width=\"content\">\n          <ButtonIcon\n            variant=\"transparent\"\n            icon={<IconClear />}\n            label=\"Close\"\n            bleed\n          />\n        </Column>\n      </Columns>\n    </Column>\n    <Column>\n      <Stack space=\"small\">\n        <Text weight=\"strong\">Create an xsmall nudge</Text>\n        <Text size=\"small\">\n          Use a nudge to drive specific behaviour that leads to better outcomes\n          for customers or SEEK.\n        </Text>\n        <Text size=\"small\">\n          <TextLinkButton>Create nudge</TextLinkButton>\n        </Text>\n      </Stack>\n    </Column>\n  </Columns>\n</Box>"
+	}
+];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/ServiceOutageBanner.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Service outage banner (widespread)",
+	code: "<>\n  {setDefaultState(\"dialog\", false)}\n  <Box\n    background=\"criticalLight\"\n    paddingY=\"gutter\"\n    paddingX={{ mobile: \"xsmall\", tablet: \"gutter\" }}\n  >\n    <Stack space=\"none\" align=\"center\">\n      <Text icon={<IconCritical />}>\n        Critical system outage banner example. Notice how the text wraps across\n        different screen sizes. We maximise text width to limit the height of\n        the banner.{\" \"}\n        <TextLink href=\"#\" onClick={() => toggleState(\"dialog\")}>\n          Read more\n        </TextLink>\n      </Text>\n    </Stack>\n  </Box>\n  <Dialog\n    title=\"Critical message\"\n    description={<Text tone=\"secondary\">Optional description</Text>}\n    open={getState(\"dialog\")}\n    onClose={() => toggleState(\"dialog\")}\n  >\n    <Placeholder height={100} width=\"100%\" />\n  </Dialog>\n</>"
+}, {
+	group: "Patterns",
+	name: "Service outage banner (isolated)",
+	code: "<Alert tone=\"caution\" onClose={() => {}} closeLabel=\"Close info alert\">\n  <Text>This is a contextual caution message that can be dismissed.</Text>\n</Alert>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,12 @@
+//#region src/lib/playroom/snippets/ServiceOutageBanner.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Service outage banner (widespread)",
+	code: "<>\n  {setDefaultState(\"dialog\", false)}\n  <Box\n    background=\"criticalLight\"\n    paddingY=\"gutter\"\n    paddingX={{ mobile: \"xsmall\", tablet: \"gutter\" }}\n  >\n    <Stack space=\"none\" align=\"center\">\n      <Text icon={<IconCritical />}>\n        Critical system outage banner example. Notice how the text wraps across\n        different screen sizes. We maximise text width to limit the height of\n        the banner.{\" \"}\n        <TextLink href=\"#\" onClick={() => toggleState(\"dialog\")}>\n          Read more\n        </TextLink>\n      </Text>\n    </Stack>\n  </Box>\n  <Dialog\n    title=\"Critical message\"\n    description={<Text tone=\"secondary\">Optional description</Text>}\n    open={getState(\"dialog\")}\n    onClose={() => toggleState(\"dialog\")}\n  >\n    <Placeholder height={100} width=\"100%\" />\n  </Dialog>\n</>"
+}, {
+	group: "Patterns",
+	name: "Service outage banner (isolated)",
+	code: "<Alert tone=\"caution\" onClose={() => {}} closeLabel=\"Close info alert\">\n  <Text>This is a contextual caution message that can be dismissed.</Text>\n</Alert>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/SkeletonLoader.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Skeleton loader",
+	code: "<Card>\n  <Stack space=\"medium\">\n    <Stack space=\"xsmall\">\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"standard\"\n        style={{\n          height: vars.space.xxlarge,\n          width: vars.space.xxxlarge,\n        }}\n      />\n\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.medium, width: \"60%\" }}\n      />\n    </Stack>\n    <Stack space=\"xsmall\">\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.xsmall, width: \"90%\" }}\n      />\n\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.xsmall, width: \"90%\" }}\n      />\n\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.xsmall, width: \"60%\" }}\n      />\n    </Stack>\n    <Box\n      background=\"neutralLight\"\n      borderRadius=\"standard\"\n      style={{ height: \"40px\", width: vars.space.xxxlarge }}\n    />\n  </Stack>\n</Card>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/SkeletonLoader.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Skeleton loader",
+	code: "<Card>\n  <Stack space=\"medium\">\n    <Stack space=\"xsmall\">\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"standard\"\n        style={{\n          height: vars.space.xxlarge,\n          width: vars.space.xxxlarge,\n        }}\n      />\n\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.medium, width: \"60%\" }}\n      />\n    </Stack>\n    <Stack space=\"xsmall\">\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.xsmall, width: \"90%\" }}\n      />\n\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.xsmall, width: \"90%\" }}\n      />\n\n      <Box\n        background=\"neutralLight\"\n        borderRadius=\"full\"\n        style={{ height: vars.space.xsmall, width: \"60%\" }}\n      />\n    </Stack>\n    <Box\n      background=\"neutralLight\"\n      borderRadius=\"standard\"\n      style={{ height: \"40px\", width: vars.space.xxxlarge }}\n    />\n  </Stack>\n</Card>"
+}];
+//#endregion
+export { snippets };

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/SocialShare.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Social share",
+	code: "<Inline space=\"none\">\n  <MenuRenderer\n    offsetSpace=\"small\"\n    align=\"right\"\n    width=\"small\"\n    trigger={(triggerProps) => (\n      <Button variant=\"transparent\" icon={<IconShare />} {...triggerProps}>\n        Share job\n      </Button>\n    )}\n  >\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialFacebook />}>\n      Facebook\n    </MenuItemLink>\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialInstagram />}>\n      Instagram\n    </MenuItemLink>\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialLinkedIn />}>\n      LinkedIn\n    </MenuItemLink>\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialX />}>\n      Twitter\n    </MenuItemLink>\n    <MenuItemLink\n      href=\"#\"\n      icon={<IconLink />}\n      onClick={() =>\n        showToast({\n          message: \"Link copied\",\n          tone: \"positive\",\n          key: \"1\",\n        })\n      }\n    >\n      Copy link\n    </MenuItemLink>\n  </MenuRenderer>\n</Inline>"
+}];
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,8 @@
+//#region src/lib/playroom/snippets/SocialShare.ts
+const snippets = [{
+	group: "Patterns",
+	name: "Social share",
+	code: "<Inline space=\"none\">\n  <MenuRenderer\n    offsetSpace=\"small\"\n    align=\"right\"\n    width=\"small\"\n    trigger={(triggerProps) => (\n      <Button variant=\"transparent\" icon={<IconShare />} {...triggerProps}>\n        Share job\n      </Button>\n    )}\n  >\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialFacebook />}>\n      Facebook\n    </MenuItemLink>\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialInstagram />}>\n      Instagram\n    </MenuItemLink>\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialLinkedIn />}>\n      LinkedIn\n    </MenuItemLink>\n    <MenuItemLink href=\"#\" target=\"_blank\" icon={<IconSocialX />}>\n      Twitter\n    </MenuItemLink>\n    <MenuItemLink\n      href=\"#\"\n      icon={<IconLink />}\n      onClick={() =>\n        showToast({\n          message: \"Link copied\",\n          tone: \"positive\",\n          key: \"1\",\n        })\n      }\n    >\n      Copy link\n    </MenuItemLink>\n  </MenuRenderer>\n</Inline>"
+}];
+//#endregion
+export { snippets };

package/dist/lib/playroom/snippets.cjs

@@ -6,6 +6,7 @@ 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");
+const require_BulkActions = require("./snippets/BulkActions.cjs");
 const require_Button = require("./snippets/Button.cjs");
 const require_ButtonIcon = require("./snippets/ButtonIcon.cjs");
 const require_Card = require("./snippets/Card.cjs");
@@ -16,11 +17,15 @@ 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_DividedLists = require("./snippets/DividedLists.cjs");
 const require_Divider = require("./snippets/Divider.cjs");
 const require_Drawer = require("./snippets/Drawer.cjs");
 const require_Dropdown = require("./snippets/Dropdown.cjs");
+const require_EmptyState = require("./snippets/EmptyState.cjs");
+const require_ErrorState = require("./snippets/ErrorState.cjs");
 const require_FieldLabel = require("./snippets/FieldLabel.cjs");
 const require_FieldMessage = require("./snippets/FieldMessage.cjs");
+const require_Forms = require("./snippets/Forms.cjs");
 const require_Heading = require("./snippets/Heading.cjs");
 const require_Inline = require("./snippets/Inline.cjs");
 const require_List = require("./snippets/List.cjs");
@@ -28,6 +33,7 @@ const require_Loader = require("./snippets/Loader.cjs");
 const require_MenuRenderer = require("./snippets/MenuRenderer.cjs");
 const require_MonthPicker = require("./snippets/MonthPicker.cjs");
 const require_Notice = require("./snippets/Notice.cjs");
+const require_Nudge = require("./snippets/Nudge.cjs");
 const require_OverflowMenu = require("./snippets/OverflowMenu.cjs");
 const require_Page = require("./snippets/Page.cjs");
 const require_PageBlock = require("./snippets/PageBlock.cjs");
@@ -36,6 +42,9 @@ const require_PasswordField = require("./snippets/PasswordField.cjs");
 const require_RadioGroup = require("./snippets/RadioGroup.cjs");
 const require_Rating = require("./snippets/Rating.cjs");
 const require_Secondary = require("./snippets/Secondary.cjs");
+const require_ServiceOutageBanner = require("./snippets/ServiceOutageBanner.cjs");
+const require_SkeletonLoader = require("./snippets/SkeletonLoader.cjs");
+const require_SocialShare = require("./snippets/SocialShare.cjs");
 const require_SpaciousPage = require("./snippets/SpaciousPage.cjs");
 const require_Spread = require("./snippets/Spread.cjs");
 const require_Stack = require("./snippets/Stack.cjs");
@@ -58,6 +67,7 @@ const require_TooltipRenderer = require("./snippets/TooltipRenderer.cjs");
 const groupOrder = [
 	"Layouts",
 	"Sections",
+	"Patterns",
 	"Components"
 ];
 const allSnippets = [];
@@ -68,6 +78,15 @@ const snippetsMap = {
 	SpaciousPage: require_SpaciousPage.snippets,
 	StandardPage: require_StandardPage.snippets,
 	StandardSection: require_StandardSection.snippets,
+	BulkActions: require_BulkActions.snippets,
+	DividedLists: require_DividedLists.snippets,
+	EmptyState: require_EmptyState.snippets,
+	ErrorState: require_ErrorState.snippets,
+	Forms: require_Forms.snippets,
+	Nudge: require_Nudge.snippets,
+	ServiceOutageBanner: require_ServiceOutageBanner.snippets,
+	SkeletonLoader: require_SkeletonLoader.snippets,
+	SocialShare: require_SocialShare.snippets,
 	Accordion: require_Accordion.snippets,
 	Actions: require_Actions.snippets,
 	Alert: require_Alert.snippets,
@@ -127,7 +146,7 @@ for (const [name, snippets] of Object.entries(snippetsMap)) for (const snippet o
 allSnippets.sort((a, b) => {
 	const aIndex = groupOrder.indexOf(a.group);
 	const bIndex = groupOrder.indexOf(b.group);
-	return (aIndex === -1 ? 3 : aIndex) - (bIndex === -1 ? 3 : bIndex);
+	return (aIndex === -1 ? 4 : aIndex) - (bIndex === -1 ? 4 : bIndex);
 });
 //#endregion
 exports.default = allSnippets;

package/dist/lib/playroom/snippets.mjs

@@ -6,68 +6,87 @@ 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/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";
+import { snippets as snippets$8 } from "./snippets/BulkActions.mjs";
+import { snippets as snippets$9 } from "./snippets/Button.mjs";
+import { snippets as snippets$10 } from "./snippets/ButtonIcon.mjs";
+import { snippets as snippets$11 } from "./snippets/Card.mjs";
+import { snippets as snippets$12 } from "./snippets/CardList.mjs";
+import { snippets as snippets$13 } from "./snippets/Checkbox.mjs";
+import { snippets as snippets$14 } from "./snippets/Columns.mjs";
+import { snippets as snippets$15 } from "./snippets/CompactPage.mjs";
+import { snippets as snippets$16 } from "./snippets/ContentBlock.mjs";
+import { snippets as snippets$17 } from "./snippets/Dialog.mjs";
+import { snippets as snippets$18 } from "./snippets/Disclosure.mjs";
+import { snippets as snippets$19 } from "./snippets/DividedLists.mjs";
+import { snippets as snippets$20 } from "./snippets/Divider.mjs";
+import { snippets as snippets$21 } from "./snippets/Drawer.mjs";
+import { snippets as snippets$22 } from "./snippets/Dropdown.mjs";
+import { snippets as snippets$23 } from "./snippets/EmptyState.mjs";
+import { snippets as snippets$24 } from "./snippets/ErrorState.mjs";
+import { snippets as snippets$25 } from "./snippets/FieldLabel.mjs";
+import { snippets as snippets$26 } from "./snippets/FieldMessage.mjs";
+import { snippets as snippets$27 } from "./snippets/Forms.mjs";
+import { snippets as snippets$28 } from "./snippets/Heading.mjs";
+import { snippets as snippets$29 } from "./snippets/Inline.mjs";
+import { snippets as snippets$30 } from "./snippets/List.mjs";
+import { snippets as snippets$31 } from "./snippets/Loader.mjs";
+import { snippets as snippets$32 } from "./snippets/MenuRenderer.mjs";
+import { snippets as snippets$33 } from "./snippets/MonthPicker.mjs";
+import { snippets as snippets$34 } from "./snippets/Notice.mjs";
+import { snippets as snippets$35 } from "./snippets/Nudge.mjs";
+import { snippets as snippets$36 } from "./snippets/OverflowMenu.mjs";
+import { snippets as snippets$37 } from "./snippets/Page.mjs";
+import { snippets as snippets$38 } from "./snippets/PageBlock.mjs";
+import { snippets as snippets$39 } from "./snippets/Pagination.mjs";
+import { snippets as snippets$40 } from "./snippets/PasswordField.mjs";
+import { snippets as snippets$41 } from "./snippets/RadioGroup.mjs";
+import { snippets as snippets$42 } from "./snippets/Rating.mjs";
+import { snippets as snippets$43 } from "./snippets/Secondary.mjs";
+import { snippets as snippets$44 } from "./snippets/ServiceOutageBanner.mjs";
+import { snippets as snippets$45 } from "./snippets/SkeletonLoader.mjs";
+import { snippets as snippets$46 } from "./snippets/SocialShare.mjs";
+import { snippets as snippets$47 } from "./snippets/SpaciousPage.mjs";
+import { snippets as snippets$48 } from "./snippets/Spread.mjs";
+import { snippets as snippets$49 } from "./snippets/Stack.mjs";
+import { snippets as snippets$50 } from "./snippets/StandardPage.mjs";
+import { snippets as snippets$51 } from "./snippets/StandardSection.mjs";
+import { snippets as snippets$52 } from "./snippets/Stepper.mjs";
+import { snippets as snippets$53 } from "./snippets/Strong.mjs";
+import { snippets as snippets$54 } from "./snippets/Table.mjs";
+import { snippets as snippets$55 } from "./snippets/Tabs.mjs";
+import { snippets as snippets$56 } from "./snippets/Tag.mjs";
+import { snippets as snippets$57 } from "./snippets/Text.mjs";
+import { snippets as snippets$58 } from "./snippets/TextDropdown.mjs";
+import { snippets as snippets$59 } from "./snippets/TextField.mjs";
+import { snippets as snippets$60 } from "./snippets/TextLink.mjs";
+import { snippets as snippets$61 } from "./snippets/Textarea.mjs";
+import { snippets as snippets$62 } from "./snippets/Tiles.mjs";
+import { snippets as snippets$63 } from "./snippets/Toggle.mjs";
+import { snippets as snippets$64 } from "./snippets/TooltipRenderer.mjs";
 //#region src/lib/playroom/snippets.ts
 const groupOrder = [
 	"Layouts",
 	"Sections",
+	"Patterns",
 	"Components"
 ];
 const allSnippets = [];
 const snippetsMap = {
 	BrandedContainer: snippets$7,
-	CardList: snippets$11,
-	CompactPage: snippets$14,
-	SpaciousPage: snippets$38,
-	StandardPage: snippets$41,
-	StandardSection: snippets$42,
+	CardList: snippets$12,
+	CompactPage: snippets$15,
+	SpaciousPage: snippets$47,
+	StandardPage: snippets$50,
+	StandardSection: snippets$51,
+	BulkActions: snippets$8,
+	DividedLists: snippets$19,
+	EmptyState: snippets$23,
+	ErrorState: snippets$24,
+	Forms: snippets$27,
+	Nudge: snippets$35,
+	ServiceOutageBanner: snippets$44,
+	SkeletonLoader: snippets$45,
+	SocialShare: snippets$46,
 	Accordion: snippets,
 	Actions: snippets$1,
 	Alert: snippets$2,
@@ -75,49 +94,49 @@ const snippetsMap = {
 	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$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
+	Button: snippets$9,
+	ButtonIcon: snippets$10,
+	Card: snippets$11,
+	Checkbox: snippets$13,
+	Columns: snippets$14,
+	ContentBlock: snippets$16,
+	Dialog: snippets$17,
+	Disclosure: snippets$18,
+	Divider: snippets$20,
+	Drawer: snippets$21,
+	Dropdown: snippets$22,
+	FieldLabel: snippets$25,
+	FieldMessage: snippets$26,
+	Heading: snippets$28,
+	Inline: snippets$29,
+	List: snippets$30,
+	Loader: snippets$31,
+	MenuRenderer: snippets$32,
+	MonthPicker: snippets$33,
+	Notice: snippets$34,
+	OverflowMenu: snippets$36,
+	Page: snippets$37,
+	PageBlock: snippets$38,
+	Pagination: snippets$39,
+	PasswordField: snippets$40,
+	RadioGroup: snippets$41,
+	Rating: snippets$42,
+	Secondary: snippets$43,
+	Spread: snippets$48,
+	Stack: snippets$49,
+	Stepper: snippets$52,
+	Strong: snippets$53,
+	Table: snippets$54,
+	Tabs: snippets$55,
+	Tag: snippets$56,
+	Text: snippets$57,
+	TextDropdown: snippets$58,
+	TextField: snippets$59,
+	TextLink: snippets$60,
+	Textarea: snippets$61,
+	Tiles: snippets$62,
+	Toggle: snippets$63,
+	TooltipRenderer: snippets$64
 };
 for (const [name, snippets] of Object.entries(snippetsMap)) for (const snippet of snippets) allSnippets.push({
 	...snippet,
@@ -127,7 +146,7 @@ for (const [name, snippets] of Object.entries(snippetsMap)) for (const snippet o
 allSnippets.sort((a, b) => {
 	const aIndex = groupOrder.indexOf(a.group);
 	const bIndex = groupOrder.indexOf(b.group);
-	return (aIndex === -1 ? 3 : aIndex) - (bIndex === -1 ? 3 : bIndex);
+	return (aIndex === -1 ? 4 : aIndex) - (bIndex === -1 ? 4 : bIndex);
 });
 //#endregion
 export { allSnippets as default };

package/dist/playroom/components.d.cts

@@ -198,4 +198,9 @@ 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";
+//#region src/playroom/components.d.ts
+declare global {
+  var __IS_PLAYROOM_ENVIRONMENT__: string;
+}
+//#endregion
 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

@@ -198,4 +198,9 @@ 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";
+//#region src/playroom/components.d.ts
+declare global {
+  var __IS_PLAYROOM_ENVIRONMENT__: string;
+}
+//#endregion
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.9.0",
+  "version": "34.9.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -143,7 +143,7 @@
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/babel__core": "^7.20.1",
     "@types/lodash.curry": "^4.1.9",
-    "@types/node": "^22.16.0",
+    "@types/node": "^24.13.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/sanitize-html": "^2.13.0",
@@ -164,7 +164,8 @@
     "sanitize-html": "^2.12.1",
     "skott": "^0.32.1",
     "storybook": "^10.2.7",
-    "title-case": "^3.0.3"
+    "title-case": "^3.0.3",
+    "tsx": "^4.19.2"
   },
   "peerDependencies": {
     "react": "^18 || ^19",