braid-design-system 34.9.0 → 34.10.0

package/dist/lib/components/useToast/useFlipList.mjs

@@ -154,11 +154,11 @@ const useFlipList = (expanded) => {
 							property: "transform",
 							from: transform
 						},
-						{
+						...element.classList.contains(collapsed) ? [{
 							property: "className",
-							from: expanded ? collapsed : void 0,
+							from: collapsed,
 							to: void 0
-						}
+						}] : []
 					]
 				});
 			}

package/dist/lib/components/useToast/useTimeout.cjs

@@ -8,7 +8,7 @@ const useTimeout = ({ onTimeout, duration }) => {
 		setActivated(false);
 	}, []);
 	(0, react.useEffect)(() => {
-		if (activated) {
+		if (activated && duration !== null) {
 			timeoutRef.current = window.setTimeout(() => {
 				onTimeout();
 			}, duration);

package/dist/lib/components/useToast/useTimeout.mjs

@@ -8,7 +8,7 @@ const useTimeout = ({ onTimeout, duration }) => {
 		setActivated(false);
 	}, []);
 	useEffect(() => {
-		if (activated) {
+		if (activated && duration !== null) {
 			timeoutRef.current = window.setTimeout(() => {
 				onTimeout();
 			}, duration);

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

@@ -2,31 +2,27 @@
 const snippets = [
 	{
 		description: "Large",
-		code: "<Accordion>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Large, without dividers",
-		code: "<Accordion dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard",
-		code: "<Accordion size=\"standard\">\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard, without dividers",
-		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Large standalone item",
-		code: "<AccordionItem label=\"Label\">\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item",
+		code: "<Accordion multiple={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Standard standalone item",
-		code: "<AccordionItem label=\"Label\" size=\"standard\">\n  <Placeholder height={100} />\n</AccordionItem>"
-	},
-	{
-		description: "Standalone item with a badge",
-		code: "<AccordionItem\n  label=\"Label\"\n  badge={\n    <Badge tone=\"promote\" weight=\"strong\">\n      Badge\n    </Badge>\n  }\n>\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item with a default value",
+		code: "<Accordion multiple={false} defaultValue=\"item-1\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	}
 ];
 //#endregion

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

@@ -2,31 +2,27 @@
 const snippets = [
 	{
 		description: "Large",
-		code: "<Accordion>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Large, without dividers",
-		code: "<Accordion dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard",
-		code: "<Accordion size=\"standard\">\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
 		description: "Standard, without dividers",
-		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
+		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Large standalone item",
-		code: "<AccordionItem label=\"Label\">\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item",
+		code: "<Accordion multiple={false}>\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		description: "Standard standalone item",
-		code: "<AccordionItem label=\"Label\" size=\"standard\">\n  <Placeholder height={100} />\n</AccordionItem>"
-	},
-	{
-		description: "Standalone item with a badge",
-		code: "<AccordionItem\n  label=\"Label\"\n  badge={\n    <Badge tone=\"promote\" weight=\"strong\">\n      Badge\n    </Badge>\n  }\n>\n  <Placeholder height={100} />\n</AccordionItem>"
+		description: "Single open item with a default value",
+		code: "<Accordion multiple={false} defaultValue=\"item-1\">\n  <AccordionItem value=\"item-1\" label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-2\" label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem value=\"item-3\" label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	}
 ];
 //#endregion

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;