braid-design-system 34.1.0 → 34.2.0

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

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/CardList.ts
+const snippets = [{
+	group: "Sections",
+	name: "Card list",
+	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Stack component=\"ul\" space=\"small\">\n      {[\n        {\n          title: \"Item 1\",\n          subTitle: \"Ea proident nulla veniam\",\n          description: \"Lorem ipsum\",\n          date: \"2d ago\",\n        },\n        {\n          title: \"Item 2\",\n          subTitle: \"Occaecat ad sunt elit\",\n          description: \"Consectetur adipiscing\",\n          date: \"6d ago\",\n        },\n        {\n          title: \"Item 3\",\n          subTitle: \"Commodo exercitation nisi laborum\",\n          description: \"Vel odio\",\n          date: \"3w ago\",\n        },\n      ].map((item) => (\n        <Box component=\"li\" key={item.title}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Heading level=\"4\">{item.title}</Heading>\n                <Text>{item.subTitle}</Text>\n              </Stack>\n              <Text>{item.description}</Text>\n              <Text tone=\"secondary\">{item.date}</Text>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+}];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/CardList.ts
+const snippets = [{
+	group: "Sections",
+	name: "Card list",
+	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Heading level=\"3\">Heading (optional)</Heading>\n\n    <Stack component=\"ul\" space=\"small\">\n      {[\n        {\n          title: \"Item 1\",\n          subTitle: \"Ea proident nulla veniam\",\n          description: \"Lorem ipsum\",\n          date: \"2d ago\",\n        },\n        {\n          title: \"Item 2\",\n          subTitle: \"Occaecat ad sunt elit\",\n          description: \"Consectetur adipiscing\",\n          date: \"6d ago\",\n        },\n        {\n          title: \"Item 3\",\n          subTitle: \"Commodo exercitation nisi laborum\",\n          description: \"Vel odio\",\n          date: \"3w ago\",\n        },\n      ].map((item) => (\n        <Box component=\"li\" key={item.title}>\n          <Card component=\"article\">\n            <Stack space=\"medium\">\n              <Stack space=\"small\">\n                <Heading level=\"4\">{item.title}</Heading>\n                <Text>{item.subTitle}</Text>\n              </Stack>\n              <Text>{item.description}</Text>\n              <Text tone=\"secondary\">{item.date}</Text>\n            </Stack>\n          </Card>\n        </Box>\n      ))}\n    </Stack>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
+}];
+
+//#endregion
+export { snippets };

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

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/CompactPage.ts
+const snippets = [{
+	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>"
+}];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/CompactPage.ts
+const snippets = [{
+	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>"
+}];
+
+//#endregion
+export { snippets };

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/SpaciousPage.ts
+const snippets = [{
+	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/SpaciousPage.mjs

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/SpaciousPage.ts
+const snippets = [{
+	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/StandardPage.cjs

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/StandardPage.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>"
+}];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/StandardPage.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>"
+}];
+
+//#endregion
+export { snippets };

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

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/StandardSection.ts
+const snippets = [{
+	group: "Sections",
+	name: "Standard Section",
+	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>"
+}];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/StandardSection.ts
+const snippets = [{
+	group: "Sections",
+	name: "Standard Section",
+	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>"
+}];
+
+//#endregion
+export { snippets };

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

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/SteppedSection.ts
+const snippets = [{
+	group: "Sections",
+	name: "Stepped Section",
+	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <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>"
+}];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/SteppedSection.ts
+const snippets = [{
+	group: "Sections",
+	name: "Stepped Section",
+	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n      <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>"
+}];
+
+//#endregion
+export { snippets };

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

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

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

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

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

@@ -0,0 +1,10 @@
+
+//#region src/lib/playroom/snippets/TableSection.ts
+const snippets = [{
+	group: "Sections",
+	name: "Table Section",
+	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>"
+}];
+
+//#endregion
+exports.snippets = snippets;

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

@@ -0,0 +1,9 @@
+//#region src/lib/playroom/snippets/TableSection.ts
+const snippets = [{
+	group: "Sections",
+	name: "Table Section",
+	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>"
+}];
+
+//#endregion
+export { snippets };

package/dist/lib/playroom/snippets.cjs

@@ -4,19 +4,24 @@ const require_Alert = require('./snippets/Alert.cjs');
 const require_Autosuggest = require('./snippets/Autosuggest.cjs');
 const require_Badge = require('./snippets/Badge.cjs');
 const require_Bleed = require('./snippets/Bleed.cjs');
+const require_BrandedContainer = require('./snippets/BrandedContainer.cjs');
 const require_Button = require('./snippets/Button.cjs');
 const require_ButtonIcon = require('./snippets/ButtonIcon.cjs');
 const require_Card = require('./snippets/Card.cjs');
+const require_CardList = require('./snippets/CardList.cjs');
 const require_Checkbox = require('./snippets/Checkbox.cjs');
 const require_Columns = require('./snippets/Columns.cjs');
+const require_CompactPage = require('./snippets/CompactPage.cjs');
 const require_ContentBlock = require('./snippets/ContentBlock.cjs');
 const require_Dialog = require('./snippets/Dialog.cjs');
 const require_Disclosure = require('./snippets/Disclosure.cjs');
+const require_DividedList = require('./snippets/DividedList.cjs');
 const require_Divider = require('./snippets/Divider.cjs');
 const require_Drawer = require('./snippets/Drawer.cjs');
 const require_Dropdown = require('./snippets/Dropdown.cjs');
 const require_FieldLabel = require('./snippets/FieldLabel.cjs');
 const require_FieldMessage = require('./snippets/FieldMessage.cjs');
+const require_Form = require('./snippets/Form.cjs');
 const require_Heading = require('./snippets/Heading.cjs');
 const require_Inline = require('./snippets/Inline.cjs');
 const require_List = require('./snippets/List.cjs');
@@ -32,11 +37,17 @@ 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_SpaciousPage = require('./snippets/SpaciousPage.cjs');
 const require_Spread = require('./snippets/Spread.cjs');
 const require_Stack = require('./snippets/Stack.cjs');
+const require_StandardPage = require('./snippets/StandardPage.cjs');
+const require_StandardSection = require('./snippets/StandardSection.cjs');
+const require_SteppedSection = require('./snippets/SteppedSection.cjs');
 const require_Stepper = require('./snippets/Stepper.cjs');
 const require_Strong = require('./snippets/Strong.cjs');
+const require_TabbedSection = require('./snippets/TabbedSection.cjs');
 const require_Table = require('./snippets/Table.cjs');
+const require_TableSection = require('./snippets/TableSection.cjs');
 const require_Tabs = require('./snippets/Tabs.cjs');
 const require_Tag = require('./snippets/Tag.cjs');
 const require_Text = require('./snippets/Text.cjs');
@@ -47,8 +58,6 @@ 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_layouts = require('./snippets/layouts.cjs');
-const require_sections = require('./snippets/sections.cjs');
 
 //#region src/lib/playroom/snippets.ts
 const groupOrder = [
@@ -58,8 +67,17 @@ const groupOrder = [
 ];
 const allSnippets = [];
 const snippetsMap = {
-	layouts: require_layouts.snippets,
-	sections: require_sections.snippets,
+	BrandedContainer: require_BrandedContainer.snippets,
+	CardList: require_CardList.snippets,
+	CompactPage: require_CompactPage.snippets,
+	DividedList: require_DividedList.snippets,
+	Form: require_Form.snippets,
+	SpaciousPage: require_SpaciousPage.snippets,
+	StandardPage: require_StandardPage.snippets,
+	StandardSection: require_StandardSection.snippets,
+	SteppedSection: require_SteppedSection.snippets,
+	TabbedSection: require_TabbedSection.snippets,
+	TableSection: require_TableSection.snippets,
 	Accordion: require_Accordion.snippets,
 	Actions: require_Actions.snippets,
 	Alert: require_Alert.snippets,

package/dist/lib/playroom/snippets.mjs

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

package/dist/lib/themes/baseTokens/nvl.cjs

@@ -18,7 +18,7 @@ const makeTokens = ({ name, displayName, brandAccent, brandAccentLight, brandAcc
 		displayName,
 		typography: {
 			fontFamily: "SeekSans, \"SeekSans Fallback\", Arial, Tahoma, sans-serif",
-			webFont: "https://www.seek.com.au/static/shared-web/seeksans.css",
+			webFont: "https://www.seek.com/static/shared-web/seeksans.css",
 			fontMetrics: {
 				capHeight: 783,
 				ascent: 1057,

package/dist/lib/themes/baseTokens/nvl.mjs

@@ -17,7 +17,7 @@ const makeTokens = ({ name, displayName, brandAccent, brandAccentLight, brandAcc
 		displayName,
 		typography: {
 			fontFamily: "SeekSans, \"SeekSans Fallback\", Arial, Tahoma, sans-serif",
-			webFont: "https://www.seek.com.au/static/shared-web/seeksans.css",
+			webFont: "https://www.seek.com/static/shared-web/seeksans.css",
 			fontMetrics: {
 				capHeight: 783,
 				ascent: 1057,