braid-design-system 34.1.0 → 34.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.1.0",
+  "version": "34.2.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -105,7 +105,7 @@
   ],
   "dependencies": {
     "@capsizecss/core": "^4.1.2",
-    "@capsizecss/metrics": "^3.0.0",
+    "@capsizecss/metrics": "^4.0.0",
     "@capsizecss/vanilla-extract": "^2.0.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@vanilla-extract/css": "^1.9.2",
@@ -140,13 +140,11 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/babel__core": "^7.20.1",
-    "@types/gradient-parser": "^0.1.5",
     "@types/lodash.curry": "^4.1.9",
     "@types/node": "^22.16.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/sanitize-html": "^2.13.0",
-    "@types/testing-library__jest-dom": "^5.9.1",
     "@types/throttle-debounce": "^5.0.2",
     "@vanilla-extract/rollup-plugin": "^1.5.1",
     "babel-plugin-macros": "^3.1.0",
@@ -163,6 +161,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sanitize-html": "^2.12.1",
+    "skott": "^0.32.1",
     "storybook": "^10.2.7",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3",

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

@@ -1,22 +0,0 @@
-
-//#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

@@ -1,21 +0,0 @@
-//#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/sections.cjs

@@ -1,59 +0,0 @@
-
-//#region src/lib/playroom/snippets/sections.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>"
-	},
-	{
-		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>"
-	},
-	{
-		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      <>\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: "Sections",
-		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: "Sections",
-		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: "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>"
-	},
-	{
-		group: "Sections",
-		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: "Sections",
-		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: "Sections",
-		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/sections.mjs

@@ -1,58 +0,0 @@
-//#region src/lib/playroom/snippets/sections.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>"
-	},
-	{
-		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>"
-	},
-	{
-		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      <>\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: "Sections",
-		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: "Sections",
-		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: "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>"
-	},
-	{
-		group: "Sections",
-		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: "Sections",
-		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: "Sections",
-		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 };