braid-design-system 34.0.2 → 34.0.4

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

@@ -1,35 +1,35 @@
 //#region src/lib/playroom/snippets/TextField.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<TextField label=\"Label\" />"
 	},
 	{
-		name: "With additional labels",
+		description: "With additional labels",
 		code: "<TextField\n  label=\"Label\"\n  secondaryLabel=\"optional\"\n  tertiaryLabel={\n    <TextLink href=\"#\" icon={<IconHelp />}>\n      Help\n    </TextLink>\n  }\n/>"
 	},
 	{
-		name: "With a description",
+		description: "With a description",
 		code: "<TextField label=\"Label\" description=\"More detailed description of field.\" />"
 	},
 	{
-		name: "With an icon",
+		description: "With an icon",
 		code: "<TextField label=\"Label\" icon={<IconSearch />} placeholder=\"Search\" />"
 	},
 	{
-		name: "With a prefix",
+		description: "With a prefix",
 		code: "<TextField label=\"Label\" prefix=\"Prefix\" placeholder=\"Search\" />"
 	},
 	{
-		name: "With a critical message",
+		description: "With a critical message",
 		code: "<TextField label=\"Label\" tone=\"critical\" message=\"Critical message\" />"
 	},
 	{
-		name: "With a positive message",
+		description: "With a positive message",
 		code: "<TextField label=\"Label\" tone=\"positive\" message=\"Positive message\" />"
 	},
 	{
-		name: "With a neutral message",
+		description: "With a neutral message",
 		code: "<TextField label=\"Label\" tone=\"neutral\" message=\"Neutral message\" />"
 	}
 ];

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

@@ -2,15 +2,15 @@
 //#region src/lib/playroom/snippets/TextLink.ts
 const snippets = [
 	{
-		name: "Inline link",
+		description: "Inline link",
 		code: "<Text>\n  <TextLink href=\"#\">Link text</TextLink>\n</Text>"
 	},
 	{
-		name: "Large hit area",
+		description: "Large hit area",
 		code: "<Text>\n  <TextLink href=\"#\" hitArea=\"large\">\n    Large hit area\n  </TextLink>\n</Text>"
 	},
 	{
-		name: "Visited",
+		description: "Visited",
 		code: "<Text>\n  <TextLink href=\"\" showVisited>\n    Visited link\n  </TextLink>\n</Text>"
 	}
 ];

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

@@ -1,15 +1,15 @@
 //#region src/lib/playroom/snippets/TextLink.ts
 const snippets = [
 	{
-		name: "Inline link",
+		description: "Inline link",
 		code: "<Text>\n  <TextLink href=\"#\">Link text</TextLink>\n</Text>"
 	},
 	{
-		name: "Large hit area",
+		description: "Large hit area",
 		code: "<Text>\n  <TextLink href=\"#\" hitArea=\"large\">\n    Large hit area\n  </TextLink>\n</Text>"
 	},
 	{
-		name: "Visited",
+		description: "Visited",
 		code: "<Text>\n  <TextLink href=\"\" showVisited>\n    Visited link\n  </TextLink>\n</Text>"
 	}
 ];

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

@@ -2,43 +2,43 @@
 //#region src/lib/playroom/snippets/Textarea.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Textarea label=\"Label\" />"
 	},
 	{
-		name: "With additional labels",
+		description: "With additional labels",
 		code: "<Textarea\n  label=\"Label\"\n  secondaryLabel=\"optional\"\n  tertiaryLabel={\n    <TextLink href=\"#\" icon={<IconHelp />}>\n      Help\n    </TextLink>\n  }\n/>"
 	},
 	{
-		name: "With a description",
+		description: "With a description",
 		code: "<Textarea label=\"Label\" description=\"More detailed description of field.\" />"
 	},
 	{
-		name: "With a critical message",
+		description: "With a critical message",
 		code: "<Textarea label=\"Label\" tone=\"critical\" message=\"Critical message\" />"
 	},
 	{
-		name: "With a positive message",
+		description: "With a positive message",
 		code: "<Textarea label=\"Label\" tone=\"positive\" message=\"Positive message\" />"
 	},
 	{
-		name: "With a neutral message",
+		description: "With a neutral message",
 		code: "<Textarea label=\"Label\" tone=\"neutral\" message=\"Neutral message\" />"
 	},
 	{
-		name: "With fixed height of 5 lines",
+		description: "With fixed height of 5 lines",
 		code: "<Textarea label=\"Label\" grow={false} lines={5} />"
 	},
 	{
-		name: "With dynamic height, limited to 7 lines",
+		description: "With dynamic height, limited to 7 lines",
 		code: "<Textarea label=\"Label\" grow={true} lineLimit={7} />"
 	},
 	{
-		name: "With character limit",
+		description: "With character limit",
 		code: "<Textarea\n  label=\"Label\"\n  description=\"Character limit of 100\"\n  characterLimit={100}\n/>"
 	},
 	{
-		name: "With a highlighted range",
+		description: "With a highlighted range",
 		code: "<Textarea\n  label=\"Label\"\n  description=\"Characters 11-20 are highlighted\"\n  tone=\"critical\"\n  message=\"Critical message\"\n  highlightRanges={[{ start: 11, end: 20 }]}\n/>"
 	}
 ];

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

@@ -1,43 +1,43 @@
 //#region src/lib/playroom/snippets/Textarea.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Textarea label=\"Label\" />"
 	},
 	{
-		name: "With additional labels",
+		description: "With additional labels",
 		code: "<Textarea\n  label=\"Label\"\n  secondaryLabel=\"optional\"\n  tertiaryLabel={\n    <TextLink href=\"#\" icon={<IconHelp />}>\n      Help\n    </TextLink>\n  }\n/>"
 	},
 	{
-		name: "With a description",
+		description: "With a description",
 		code: "<Textarea label=\"Label\" description=\"More detailed description of field.\" />"
 	},
 	{
-		name: "With a critical message",
+		description: "With a critical message",
 		code: "<Textarea label=\"Label\" tone=\"critical\" message=\"Critical message\" />"
 	},
 	{
-		name: "With a positive message",
+		description: "With a positive message",
 		code: "<Textarea label=\"Label\" tone=\"positive\" message=\"Positive message\" />"
 	},
 	{
-		name: "With a neutral message",
+		description: "With a neutral message",
 		code: "<Textarea label=\"Label\" tone=\"neutral\" message=\"Neutral message\" />"
 	},
 	{
-		name: "With fixed height of 5 lines",
+		description: "With fixed height of 5 lines",
 		code: "<Textarea label=\"Label\" grow={false} lines={5} />"
 	},
 	{
-		name: "With dynamic height, limited to 7 lines",
+		description: "With dynamic height, limited to 7 lines",
 		code: "<Textarea label=\"Label\" grow={true} lineLimit={7} />"
 	},
 	{
-		name: "With character limit",
+		description: "With character limit",
 		code: "<Textarea\n  label=\"Label\"\n  description=\"Character limit of 100\"\n  characterLimit={100}\n/>"
 	},
 	{
-		name: "With a highlighted range",
+		description: "With a highlighted range",
 		code: "<Textarea\n  label=\"Label\"\n  description=\"Characters 11-20 are highlighted\"\n  tone=\"critical\"\n  message=\"Critical message\"\n  highlightRanges={[{ start: 11, end: 20 }]}\n/>"
 	}
 ];

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

@@ -1,10 +1,10 @@
 
 //#region src/lib/playroom/snippets/Tiles.ts
 const snippets = [{
-	name: "2 columns",
+	description: "2 columns",
 	code: "<Tiles space=\"small\" columns={2}>\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n</Tiles>"
 }, {
-	name: "Responsive columns",
+	description: "Responsive columns",
 	code: "<Tiles space=\"small\" columns={{ mobile: 2, tablet: 4 }}>\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n</Tiles>"
 }];
 

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

@@ -1,9 +1,9 @@
 //#region src/lib/playroom/snippets/Tiles.ts
 const snippets = [{
-	name: "2 columns",
+	description: "2 columns",
 	code: "<Tiles space=\"small\" columns={2}>\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n</Tiles>"
 }, {
-	name: "Responsive columns",
+	description: "Responsive columns",
 	code: "<Tiles space=\"small\" columns={{ mobile: 2, tablet: 4 }}>\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n  <Placeholder height={48} />\n</Tiles>"
 }];
 

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

@@ -2,23 +2,23 @@
 //#region src/lib/playroom/snippets/Toggle.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Toggle label=\"Label\" />"
 	},
 	{
-		name: "Small",
+		description: "Small",
 		code: "<Toggle label=\"Label\" size=\"small\" />"
 	},
 	{
-		name: "Right aligned",
+		description: "Right aligned",
 		code: "<Toggle label=\"Label\" align=\"right\" />"
 	},
 	{
-		name: "Justified",
+		description: "Justified",
 		code: "<Toggle label=\"Label\" align=\"justify\" />"
 	},
 	{
-		name: "Trailing toggle position",
+		description: "Trailing toggle position",
 		code: "<Toggle label=\"Label\" togglePosition=\"trailing\" />"
 	}
 ];

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

@@ -1,23 +1,23 @@
 //#region src/lib/playroom/snippets/Toggle.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Toggle label=\"Label\" />"
 	},
 	{
-		name: "Small",
+		description: "Small",
 		code: "<Toggle label=\"Label\" size=\"small\" />"
 	},
 	{
-		name: "Right aligned",
+		description: "Right aligned",
 		code: "<Toggle label=\"Label\" align=\"right\" />"
 	},
 	{
-		name: "Justified",
+		description: "Justified",
 		code: "<Toggle label=\"Label\" align=\"justify\" />"
 	},
 	{
-		name: "Trailing toggle position",
+		description: "Trailing toggle position",
 		code: "<Toggle label=\"Label\" togglePosition=\"trailing\" />"
 	}
 ];

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

@@ -1,7 +1,7 @@
 
 //#region src/lib/playroom/snippets/TooltipRenderer.ts
 const snippets = [{
-	name: "Standard",
+	description: "Standard",
 	code: "<TooltipRenderer tooltip={<Text>This is a tooltip!</Text>}>\n  {({ triggerProps }) => (\n    <Box {...triggerProps}>\n      <Placeholder label=\"Tooltip trigger\" height={100} />\n    </Box>\n  )}\n</TooltipRenderer>"
 }];
 

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

@@ -1,6 +1,6 @@
 //#region src/lib/playroom/snippets/TooltipRenderer.ts
 const snippets = [{
-	name: "Standard",
+	description: "Standard",
 	code: "<TooltipRenderer tooltip={<Text>This is a tooltip!</Text>}>\n  {({ triggerProps }) => (\n    <Box {...triggerProps}>\n      <Placeholder label=\"Tooltip trigger\" height={100} />\n    </Box>\n  )}\n</TooltipRenderer>"
 }];
 

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

@@ -0,0 +1,59 @@
+
+//#region src/lib/playroom/snippets/blocks.ts
+const snippets = [
+	{
+		group: "Blocks",
+		name: "Standard",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text tone=\"secondary\">\n        Subtitle (optional, consider using secondary tone to avoid clashing with\n        content below)\n      </Text>\n    </Stack>\n\n    <Text>\n      Combines a <Strong>Heading level 3</Strong> with a{\" \"}\n      <Strong>medium Stack</Strong> spacing content groups within the section.\n    </Text>\n\n    <Text>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n      cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n      egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed tempus\n      magna. Duis a malesuada diam.\n    </Text>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Card list",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Stack component=\"ul\" space=\"small\">\n      {[\n        {\n          title: \"Item 1\",\n          subTitle: \"Ea proident nulla veniam\",\n          description: \"Lorem ipsum\",\n          date: \"2d ago\",\n        },\n        {\n          title: \"Item 2\",\n          subTitle: \"Occaecat ad sunt elit\",\n          description: \"Consectetur adipiscing\",\n          date: \"6d ago\",\n        },\n        {\n          title: \"Item 3\",\n          subTitle: \"Commodo exercitation nisi laborum\",\n          description: \"Vel odio\",\n          date: \"3w ago\",\n        },\n      ].map((item) => (\n        <Box component=\"li\" key={item.title}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Heading level=\"4\">{item.title}</Heading>\n                <Text>{item.subTitle}</Text>\n              </Stack>\n              <Text>{item.description}</Text>\n              <Text tone=\"secondary\">{item.date}</Text>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Divided list",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    {[\n      {\n        title: \"Item 1\",\n        description: \"Lorem ipsum\",\n      },\n      {\n        title: \"Item 2\",\n        description: \"Consectetur adipiscing\",\n      },\n      {\n        title: \"Item 3\",\n        description: \"Vel odio\",\n      },\n    ].map((item) => (\n      <>\n        <Columns space=\"small\">\n          <Column>\n            <Stack space=\"small\">\n              <Text component=\"h4\" weight=\"strong\">\n                {item.title}\n              </Text>\n              <Text tone=\"secondary\">{item.description}</Text>\n            </Stack>\n          </Column>\n          <Column width=\"content\">\n            <ButtonIcon\n              variant=\"transparent\"\n              icon={<IconEdit />}\n              label=\"Edit\"\n            />\n          </Column>\n        </Columns>\n        <Divider />\n      </>\n    ))}\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Branded container",
+		description: "Full bleed",
+		code: "<Box background=\"brand\" paddingY=\"xlarge\">\n  <PageBlock width=\"medium\">\n    <Stack space=\"large\">\n      <Heading level=\"2\">Heading</Heading>\n\n      <Text>\n        Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n        <Strong>large Stack</Strong> spacing content groups within the section.\n        <br />\n        Uses a <Strong>PageBlock</Strong> inside the section to maintain screen\n        gutters on small screens.\n      </Text>\n\n      <Text>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n        cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n        egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed\n        tempus magna. Duis a malesuada diam.\n      </Text>\n    </Stack>\n  </PageBlock>\n</Box>"
+	},
+	{
+		group: "Blocks",
+		name: "Branded container",
+		description: "Rounded from desktop (full bleed below)",
+		code: "<Box paddingX={{ desktop: \"gutter\" }}>\n  <ContentBlock width=\"large\">\n    <Box\n      background=\"brand\"\n      paddingY=\"xlarge\"\n      borderRadius={{ desktop: \"xlarge\" }}\n    >\n      <PageBlock width=\"medium\">\n        <Stack space=\"large\">\n          <Heading level=\"2\">Heading</Heading>\n\n          <Text>\n            Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n            <Strong>large Stack</Strong> spacing content groups within the\n            section.\n            <br />\n            Uses a <Strong>PageBlock</Strong> inside the section to maintain\n            screen gutters on small screens.\n          </Text>\n\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In\n            convallis cursus quam nec volutpat. In hac habitasse platea\n            dictumst. Praesent egestas erat id mollis imperdiet. Vestibulum non\n            commodo nisi, sed tempus magna. Duis a malesuada diam.\n          </Text>\n        </Stack>\n      </PageBlock>\n    </Box>\n  </ContentBlock>\n</Box>"
+	},
+	{
+		group: "Blocks",
+		name: "Form (basic)",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms with minimal or no validation as errors will impact layout.\n      </Text>\n\n      <Text>\n        Uses a <Strong>large Stack</Strong> for fields, with a{\" \"}\n        <Strong>xlarge Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <TextField label=\"TextField\" />\n\n      <Dropdown\n        label=\"Dropdown\"\n        tone={getState(\"error\") ? \"critical\" : undefined}\n        message={getState(\"error\") ? \"Required field\" : undefined}\n      >\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>\n\n      <MonthPicker label=\"MonthPicker\" />\n\n      <Checkbox label=\"Checkbox\" />\n    </Stack>\n\n    <Actions>\n      <Button>Primary action</Button>\n      <Button variant=\"transparent\" onClick={() => toggleState(\"error\")}>\n        Toggle error\n      </Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Form (validation)",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms that are more likely to show validation errors, it is\n        recommended to use <Strong>reserveMessageSpace</Strong> to prevent the\n        elements shifting when messages appear.\n      </Text>\n\n      <Text>\n        Uses a <Strong>small Stack</Strong> for fields, with a{\" \"}\n        <Strong>large Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <Stack space=\"small\">\n        <TextField\n          label=\"TextField\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Dropdown\n          label=\"Dropdown\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        >\n          <option>Option 1</option>\n          <option>Option 2</option>\n          <option>Option 3</option>\n        </Dropdown>\n\n        <MonthPicker\n          label=\"MonthPicker\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Checkbox\n          label=\"Checkbox\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n      </Stack>\n\n      <Actions>\n        <Button onClick={() => toggleState(\"error\")}>Toggle errors</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Table",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Table label=\"Table Block\">\n      <TableHeader>\n        <TableRow>\n          <TableHeaderCell width=\"content\">\n            <Text>Status</Text>\n          </TableHeaderCell>\n          <TableHeaderCell>\n            <Text>Data 1</Text>\n          </TableHeaderCell>\n          <TableHeaderCell>\n            <Text>Data 2</Text>\n          </TableHeaderCell>\n          <TableHeaderCell>\n            <Text>Data 3</Text>\n          </TableHeaderCell>\n          <TableHeaderCell width=\"content\" align=\"right\">\n            <Text>Actions</Text>\n          </TableHeaderCell>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {[\n          {\n            status: \"Lorem\",\n            data1: \"Sit\",\n            data2: \"Amet\",\n            data3: \"Consectetur\",\n          },\n          {\n            status: \"Ipsum\",\n            data1: \"Adipiscing\",\n            data2: \"Elit\",\n            data3: \"Praesent\",\n          },\n          {\n            status: \"Dolor\",\n            data1: \"Semper\",\n            data2: \"Interdum\",\n            data3: \"Viverra\",\n          },\n        ].map((row) => (\n          <TableRow key={row.data1}>\n            <TableCell width=\"content\">\n              <Badge>{row.status}</Badge>\n            </TableCell>\n            <TableCell>\n              <Text>{row.data1}</Text>\n            </TableCell>\n            <TableCell>\n              <Text>{row.data2}</Text>\n            </TableCell>\n            <TableCell>\n              <Text>{row.data3}</Text>\n            </TableCell>\n            <TableCell width=\"content\" align=\"right\">\n              <OverflowMenu size=\"small\" label=\"Options\">\n                <MenuItem>Option 1</MenuItem>\n                <MenuItem>Option 2</MenuItem>\n              </OverflowMenu>\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Stepper",
+		code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <Step>Step 5</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n    {getState(\"activeStep\") === 5 && (\n      <Placeholder label=\"Step content 5\" height={400} />\n    )}\n\n    <Columns space=\"small\">\n      <Column>\n        {getState(\"activeStep\") > 1 && (\n          <Actions>\n            <Button\n              icon={<IconArrow direction=\"left\" />}\n              onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n            >\n              Back\n            </Button>\n          </Actions>\n        )}\n      </Column>\n      <Column width=\"content\">\n        {getState(\"activeStep\") < 5 && (\n          <Actions>\n            <Button\n              variant=\"solid\"\n              tone=\"formAccent\"\n              icon={<IconArrow direction=\"right\" />}\n              iconPosition=\"trailing\"\n              onClick={() => {\n                const newStep = getState(\"activeStep\") + 1\n                setState(\"activeStep\", newStep)\n                if (newStep > getState(\"progress\")) {\n                  setState(\"progress\", newStep)\n                }\n              }}\n            >\n              Continue\n            </Button>\n          </Actions>\n        )}\n      </Column>\n    </Columns>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Tabs",
+		code: "<PageBlock width=\"medium\">\n  <TabsProvider>\n    <Stack space=\"large\">\n      <Tabs divider=\"none\" label=\"Tabs Block\">\n        <Tab>Tab 1</Tab>\n        <Tab>Tab 2</Tab>\n        <Tab>Tab 3</Tab>\n      </Tabs>\n\n      <TabPanels>\n        <TabPanel>\n          <Placeholder label=\"Tab 1 content\" height={500} />\n        </TabPanel>\n        <TabPanel>\n          <Placeholder label=\"Tab 2 content\" height={300} />\n        </TabPanel>\n        <TabPanel>\n          <Placeholder label=\"Tab 3 content\" height={400} />\n        </TabPanel>\n      </TabPanels>\n    </Stack>\n  </TabsProvider>\n</PageBlock>"
+	}
+];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,58 @@
+//#region src/lib/playroom/snippets/blocks.ts
+const snippets = [
+	{
+		group: "Blocks",
+		name: "Standard",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text tone=\"secondary\">\n        Subtitle (optional, consider using secondary tone to avoid clashing with\n        content below)\n      </Text>\n    </Stack>\n\n    <Text>\n      Combines a <Strong>Heading level 3</Strong> with a{\" \"}\n      <Strong>medium Stack</Strong> spacing content groups within the section.\n    </Text>\n\n    <Text>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n      cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n      egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed tempus\n      magna. Duis a malesuada diam.\n    </Text>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Card list",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Stack component=\"ul\" space=\"small\">\n      {[\n        {\n          title: \"Item 1\",\n          subTitle: \"Ea proident nulla veniam\",\n          description: \"Lorem ipsum\",\n          date: \"2d ago\",\n        },\n        {\n          title: \"Item 2\",\n          subTitle: \"Occaecat ad sunt elit\",\n          description: \"Consectetur adipiscing\",\n          date: \"6d ago\",\n        },\n        {\n          title: \"Item 3\",\n          subTitle: \"Commodo exercitation nisi laborum\",\n          description: \"Vel odio\",\n          date: \"3w ago\",\n        },\n      ].map((item) => (\n        <Box component=\"li\" key={item.title}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Heading level=\"4\">{item.title}</Heading>\n                <Text>{item.subTitle}</Text>\n              </Stack>\n              <Text>{item.description}</Text>\n              <Text tone=\"secondary\">{item.date}</Text>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Divided list",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    {[\n      {\n        title: \"Item 1\",\n        description: \"Lorem ipsum\",\n      },\n      {\n        title: \"Item 2\",\n        description: \"Consectetur adipiscing\",\n      },\n      {\n        title: \"Item 3\",\n        description: \"Vel odio\",\n      },\n    ].map((item) => (\n      <>\n        <Columns space=\"small\">\n          <Column>\n            <Stack space=\"small\">\n              <Text component=\"h4\" weight=\"strong\">\n                {item.title}\n              </Text>\n              <Text tone=\"secondary\">{item.description}</Text>\n            </Stack>\n          </Column>\n          <Column width=\"content\">\n            <ButtonIcon\n              variant=\"transparent\"\n              icon={<IconEdit />}\n              label=\"Edit\"\n            />\n          </Column>\n        </Columns>\n        <Divider />\n      </>\n    ))}\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Branded container",
+		description: "Full bleed",
+		code: "<Box background=\"brand\" paddingY=\"xlarge\">\n  <PageBlock width=\"medium\">\n    <Stack space=\"large\">\n      <Heading level=\"2\">Heading</Heading>\n\n      <Text>\n        Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n        <Strong>large Stack</Strong> spacing content groups within the section.\n        <br />\n        Uses a <Strong>PageBlock</Strong> inside the section to maintain screen\n        gutters on small screens.\n      </Text>\n\n      <Text>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n        cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n        egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed\n        tempus magna. Duis a malesuada diam.\n      </Text>\n    </Stack>\n  </PageBlock>\n</Box>"
+	},
+	{
+		group: "Blocks",
+		name: "Branded container",
+		description: "Rounded from desktop (full bleed below)",
+		code: "<Box paddingX={{ desktop: \"gutter\" }}>\n  <ContentBlock width=\"large\">\n    <Box\n      background=\"brand\"\n      paddingY=\"xlarge\"\n      borderRadius={{ desktop: \"xlarge\" }}\n    >\n      <PageBlock width=\"medium\">\n        <Stack space=\"large\">\n          <Heading level=\"2\">Heading</Heading>\n\n          <Text>\n            Combines a <Strong>Heading level 2</Strong> with a{\" \"}\n            <Strong>large Stack</Strong> spacing content groups within the\n            section.\n            <br />\n            Uses a <Strong>PageBlock</Strong> inside the section to maintain\n            screen gutters on small screens.\n          </Text>\n\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In\n            convallis cursus quam nec volutpat. In hac habitasse platea\n            dictumst. Praesent egestas erat id mollis imperdiet. Vestibulum non\n            commodo nisi, sed tempus magna. Duis a malesuada diam.\n          </Text>\n        </Stack>\n      </PageBlock>\n    </Box>\n  </ContentBlock>\n</Box>"
+	},
+	{
+		group: "Blocks",
+		name: "Form (basic)",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms with minimal or no validation as errors will impact layout.\n      </Text>\n\n      <Text>\n        Uses a <Strong>large Stack</Strong> for fields, with a{\" \"}\n        <Strong>xlarge Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <TextField label=\"TextField\" />\n\n      <Dropdown\n        label=\"Dropdown\"\n        tone={getState(\"error\") ? \"critical\" : undefined}\n        message={getState(\"error\") ? \"Required field\" : undefined}\n      >\n        <option>Option 1</option>\n        <option>Option 2</option>\n        <option>Option 3</option>\n      </Dropdown>\n\n      <MonthPicker label=\"MonthPicker\" />\n\n      <Checkbox label=\"Checkbox\" />\n    </Stack>\n\n    <Actions>\n      <Button>Primary action</Button>\n      <Button variant=\"transparent\" onClick={() => toggleState(\"error\")}>\n        Toggle error\n      </Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Form (validation)",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms that are more likely to show validation errors, it is\n        recommended to use <Strong>reserveMessageSpace</Strong> to prevent the\n        elements shifting when messages appear.\n      </Text>\n\n      <Text>\n        Uses a <Strong>small Stack</Strong> for fields, with a{\" \"}\n        <Strong>large Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <Stack space=\"small\">\n        <TextField\n          label=\"TextField\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Dropdown\n          label=\"Dropdown\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        >\n          <option>Option 1</option>\n          <option>Option 2</option>\n          <option>Option 3</option>\n        </Dropdown>\n\n        <MonthPicker\n          label=\"MonthPicker\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Checkbox\n          label=\"Checkbox\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n      </Stack>\n\n      <Actions>\n        <Button onClick={() => toggleState(\"error\")}>Toggle errors</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Table",
+		code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Table label=\"Table Block\">\n      <TableHeader>\n        <TableRow>\n          <TableHeaderCell width=\"content\">\n            <Text>Status</Text>\n          </TableHeaderCell>\n          <TableHeaderCell>\n            <Text>Data 1</Text>\n          </TableHeaderCell>\n          <TableHeaderCell>\n            <Text>Data 2</Text>\n          </TableHeaderCell>\n          <TableHeaderCell>\n            <Text>Data 3</Text>\n          </TableHeaderCell>\n          <TableHeaderCell width=\"content\" align=\"right\">\n            <Text>Actions</Text>\n          </TableHeaderCell>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {[\n          {\n            status: \"Lorem\",\n            data1: \"Sit\",\n            data2: \"Amet\",\n            data3: \"Consectetur\",\n          },\n          {\n            status: \"Ipsum\",\n            data1: \"Adipiscing\",\n            data2: \"Elit\",\n            data3: \"Praesent\",\n          },\n          {\n            status: \"Dolor\",\n            data1: \"Semper\",\n            data2: \"Interdum\",\n            data3: \"Viverra\",\n          },\n        ].map((row) => (\n          <TableRow key={row.data1}>\n            <TableCell width=\"content\">\n              <Badge>{row.status}</Badge>\n            </TableCell>\n            <TableCell>\n              <Text>{row.data1}</Text>\n            </TableCell>\n            <TableCell>\n              <Text>{row.data2}</Text>\n            </TableCell>\n            <TableCell>\n              <Text>{row.data3}</Text>\n            </TableCell>\n            <TableCell width=\"content\" align=\"right\">\n              <OverflowMenu size=\"small\" label=\"Options\">\n                <MenuItem>Option 1</MenuItem>\n                <MenuItem>Option 2</MenuItem>\n              </OverflowMenu>\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Stepper",
+		code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <Step>Step 5</Step>\n    </Stepper>\n\n    {getState(\"activeStep\") === 1 && (\n      <Placeholder label=\"Step content 1\" height={400} />\n    )}\n    {getState(\"activeStep\") === 2 && (\n      <Placeholder label=\"Step content 2\" height={400} />\n    )}\n    {getState(\"activeStep\") === 3 && (\n      <Placeholder label=\"Step content 3\" height={400} />\n    )}\n    {getState(\"activeStep\") === 4 && (\n      <Placeholder label=\"Step content 4\" height={400} />\n    )}\n    {getState(\"activeStep\") === 5 && (\n      <Placeholder label=\"Step content 5\" height={400} />\n    )}\n\n    <Columns space=\"small\">\n      <Column>\n        {getState(\"activeStep\") > 1 && (\n          <Actions>\n            <Button\n              icon={<IconArrow direction=\"left\" />}\n              onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n            >\n              Back\n            </Button>\n          </Actions>\n        )}\n      </Column>\n      <Column width=\"content\">\n        {getState(\"activeStep\") < 5 && (\n          <Actions>\n            <Button\n              variant=\"solid\"\n              tone=\"formAccent\"\n              icon={<IconArrow direction=\"right\" />}\n              iconPosition=\"trailing\"\n              onClick={() => {\n                const newStep = getState(\"activeStep\") + 1\n                setState(\"activeStep\", newStep)\n                if (newStep > getState(\"progress\")) {\n                  setState(\"progress\", newStep)\n                }\n              }}\n            >\n              Continue\n            </Button>\n          </Actions>\n        )}\n      </Column>\n    </Columns>\n  </Stack>\n</PageBlock>"
+	},
+	{
+		group: "Blocks",
+		name: "Tabs",
+		code: "<PageBlock width=\"medium\">\n  <TabsProvider>\n    <Stack space=\"large\">\n      <Tabs divider=\"none\" label=\"Tabs Block\">\n        <Tab>Tab 1</Tab>\n        <Tab>Tab 2</Tab>\n        <Tab>Tab 3</Tab>\n      </Tabs>\n\n      <TabPanels>\n        <TabPanel>\n          <Placeholder label=\"Tab 1 content\" height={500} />\n        </TabPanel>\n        <TabPanel>\n          <Placeholder label=\"Tab 2 content\" height={300} />\n        </TabPanel>\n        <TabPanel>\n          <Placeholder label=\"Tab 3 content\" height={400} />\n        </TabPanel>\n      </TabPanels>\n    </Stack>\n  </TabsProvider>\n</PageBlock>"
+	}
+];
+
+//#endregion
+export { snippets };

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

@@ -0,0 +1,22 @@
+
+//#region src/lib/playroom/snippets/layouts.ts
+const snippets = [
+	{
+		group: "Layouts",
+		name: "Standard Page",
+		code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"medium\">\n      <Stack space=\"medium\">\n        <Heading level=\"2\">Standard Page</Heading>\n\n        <Text>\n          Combines a <Strong>Heading level 2</Strong> with{\" \"}\n          <Strong>xxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>medium PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text>\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>standard Text</Strong> and grouping with a{\" \"}\n          <Strong>medium Stack</Strong>.\n        </Text>\n\n        <Text>Use this layout as a starting point.</Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
+	},
+	{
+		group: "Layouts",
+		name: "Compact Page",
+		code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"medium\">\n      <Stack space=\"medium\">\n        <Heading level=\"2\">Compact Page</Heading>\n\n        <Text>\n          Combines a <Strong>Heading level 2</Strong> with{\" \"}\n          <Strong>xlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>medium PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text>\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>standard Text</Strong> and grouping with a{\" \"}\n          <Strong>medium Stack</Strong>.\n        </Text>\n\n        <Text>\n          Use this layout as a starting point where information density needs to\n          be optimised.\n        </Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
+	},
+	{
+		group: "Layouts",
+		name: "Spacious Page",
+		code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"large\">\n      <Stack space=\"large\">\n        <Heading level=\"1\">Spacious Page</Heading>\n\n        <Text size=\"large\">\n          Combines a <Strong>Heading level 1</Strong> with{\" \"}\n          <Strong>xxxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>large PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text size=\"large\">\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>large Text</Strong> and grouping with a{\" \"}\n          <Strong>large Stack</Strong>.\n        </Text>\n\n        <Text size=\"large\">\n          Use this layout for landing pages and larger form content.\n        </Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
+	}
+];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,21 @@
+//#region src/lib/playroom/snippets/layouts.ts
+const snippets = [
+	{
+		group: "Layouts",
+		name: "Standard Page",
+		code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"medium\">\n      <Stack space=\"medium\">\n        <Heading level=\"2\">Standard Page</Heading>\n\n        <Text>\n          Combines a <Strong>Heading level 2</Strong> with{\" \"}\n          <Strong>xxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>medium PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text>\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>standard Text</Strong> and grouping with a{\" \"}\n          <Strong>medium Stack</Strong>.\n        </Text>\n\n        <Text>Use this layout as a starting point.</Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
+	},
+	{
+		group: "Layouts",
+		name: "Compact Page",
+		code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"medium\">\n      <Stack space=\"medium\">\n        <Heading level=\"2\">Compact Page</Heading>\n\n        <Text>\n          Combines a <Strong>Heading level 2</Strong> with{\" \"}\n          <Strong>xlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>medium PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text>\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>standard Text</Strong> and grouping with a{\" \"}\n          <Strong>medium Stack</Strong>.\n        </Text>\n\n        <Text>\n          Use this layout as a starting point where information density needs to\n          be optimised.\n        </Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
+	},
+	{
+		group: "Layouts",
+		name: "Spacious Page",
+		code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"large\">\n      <Stack space=\"large\">\n        <Heading level=\"1\">Spacious Page</Heading>\n\n        <Text size=\"large\">\n          Combines a <Strong>Heading level 1</Strong> with{\" \"}\n          <Strong>xxxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>large PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text size=\"large\">\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>large Text</Strong> and grouping with a{\" \"}\n          <Strong>large Stack</Strong>.\n        </Text>\n\n        <Text size=\"large\">\n          Use this layout for landing pages and larger form content.\n        </Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
+	}
+];
+
+//#endregion
+export { snippets };

package/dist/lib/playroom/snippets.cjs

@@ -47,9 +47,19 @@ const require_Textarea = require('./snippets/Textarea.cjs');
 const require_Tiles = require('./snippets/Tiles.cjs');
 const require_Toggle = require('./snippets/Toggle.cjs');
 const require_TooltipRenderer = require('./snippets/TooltipRenderer.cjs');
+const require_blocks = require('./snippets/blocks.cjs');
+const require_layouts = require('./snippets/layouts.cjs');
 
 //#region src/lib/playroom/snippets.ts
-var snippets_default = Object.entries({
+const groupOrder = [
+	"Layouts",
+	"Blocks",
+	"Components"
+];
+const allSnippets = [];
+const snippetsMap = {
+	blocks: require_blocks.snippets,
+	layouts: require_layouts.snippets,
 	Accordion: require_Accordion.snippets,
 	Actions: require_Actions.snippets,
 	Alert: require_Alert.snippets,
@@ -99,10 +109,17 @@ var snippets_default = Object.entries({
 	Tiles: require_Tiles.snippets,
 	Toggle: require_Toggle.snippets,
 	TooltipRenderer: require_TooltipRenderer.snippets
-}).map(([group, snippets]) => snippets.map((snippet) => ({
+};
+for (const [name, snippets] of Object.entries(snippetsMap)) for (const snippet of snippets) allSnippets.push({
 	...snippet,
-	group
-}))).flat();
+	name: "name" in snippet ? snippet.name : name,
+	group: "group" in snippet ? snippet.group : "Components"
+});
+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);
+});
 
 //#endregion
-exports.default = snippets_default;
+exports.default = allSnippets;

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

@@ -1,8 +1,4 @@
 //#region src/lib/playroom/snippets.d.ts
-declare const _default: {
-  group: string;
-  name: string;
-  code: string;
-}[];
+declare const allSnippets: any[];
 //#endregion
-export { _default };
+export { allSnippets };

package/dist/lib/playroom/snippets.d.mts

@@ -1,8 +1,4 @@
 //#region src/lib/playroom/snippets.d.ts
-declare const _default: {
-  group: string;
-  name: string;
-  code: string;
-}[];
+declare const allSnippets: any[];
 //#endregion
-export { _default };
+export { allSnippets };