braid-design-system 34.0.2 → 34.0.4

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

@@ -1,6 +1,6 @@
 //#region src/lib/playroom/snippets/Secondary.ts
 const snippets = [{
-	name: "Standard",
+	description: "Standard",
 	code: "<Secondary>Secondary</Secondary>"
 }];
 

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

@@ -2,19 +2,19 @@
 //#region src/lib/playroom/snippets/Spread.ts
 const snippets = [
 	{
-		name: "Horizontal direction",
+		description: "Horizontal direction",
 		code: "<Spread space=\"small\" alignY=\"center\">\n  <Placeholder height={60} width={50} />\n  <Placeholder height={60} width={80} />\n</Spread>"
 	},
 	{
-		name: "Vertical direction",
+		description: "Vertical direction",
 		code: "<Spread space=\"small\" direction=\"vertical\">\n  <Placeholder height={60} />\n  <Placeholder height={30} />\n</Spread>"
 	},
 	{
-		name: "Heading and action",
+		description: "Heading and action",
 		code: "<Spread space=\"small\" alignY=\"center\">\n  <Heading level=\"4\">Heading</Heading>\n  <OverflowMenu label=\"Options\">\n    <MenuItem>First</MenuItem>\n    <MenuItem>Second</MenuItem>\n  </OverflowMenu>\n</Spread>"
 	},
 	{
-		name: "Content stack and date stamp",
+		description: "Content stack and date stamp",
 		code: "<Spread space=\"large\" direction=\"vertical\">\n  <Stack space=\"small\">\n    <Heading level=\"4\">Heading</Heading>\n    <Text>Text</Text>\n  </Stack>\n  <Text size=\"small\" tone=\"secondary\">\n    Date\n  </Text>\n</Spread>"
 	}
 ];

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

@@ -1,19 +1,19 @@
 //#region src/lib/playroom/snippets/Spread.ts
 const snippets = [
 	{
-		name: "Horizontal direction",
+		description: "Horizontal direction",
 		code: "<Spread space=\"small\" alignY=\"center\">\n  <Placeholder height={60} width={50} />\n  <Placeholder height={60} width={80} />\n</Spread>"
 	},
 	{
-		name: "Vertical direction",
+		description: "Vertical direction",
 		code: "<Spread space=\"small\" direction=\"vertical\">\n  <Placeholder height={60} />\n  <Placeholder height={30} />\n</Spread>"
 	},
 	{
-		name: "Heading and action",
+		description: "Heading and action",
 		code: "<Spread space=\"small\" alignY=\"center\">\n  <Heading level=\"4\">Heading</Heading>\n  <OverflowMenu label=\"Options\">\n    <MenuItem>First</MenuItem>\n    <MenuItem>Second</MenuItem>\n  </OverflowMenu>\n</Spread>"
 	},
 	{
-		name: "Content stack and date stamp",
+		description: "Content stack and date stamp",
 		code: "<Spread space=\"large\" direction=\"vertical\">\n  <Stack space=\"small\">\n    <Heading level=\"4\">Heading</Heading>\n    <Text>Text</Text>\n  </Stack>\n  <Text size=\"small\" tone=\"secondary\">\n    Date\n  </Text>\n</Spread>"
 	}
 ];

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

@@ -2,39 +2,39 @@
 //#region src/lib/playroom/snippets/Stack.ts
 const snippets = [
 	{
-		name: "Small content",
+		description: "Small content",
 		code: "<Stack space=\"xsmall\">\n  <Text size=\"small\">Small Text</Text>\n  <Text size=\"small\">Small Text</Text>\n</Stack>"
 	},
 	{
-		name: "Standard content",
+		description: "Standard content",
 		code: "<Stack space=\"small\">\n  <Text>Standard Text</Text>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Titled content",
+		description: "Titled content",
 		code: "<Stack space=\"small\">\n  <Heading level=\"4\">Heading</Heading>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Content groups",
+		description: "Content groups",
 		code: "<Stack space=\"medium\">\n  <Heading level=\"4\">Heading</Heading>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Content groups (loose)",
+		description: "Content groups (loose)",
 		code: "<Stack space=\"large\">\n  <Heading level=\"3\">Heading</Heading>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Section groups",
+		description: "Section groups",
 		code: "<Stack space=\"large\">\n  <Placeholder height={40} />\n  <Placeholder height={40} />\n</Stack>"
 	},
 	{
-		name: "Section groups (loose)",
+		description: "Section groups (loose)",
 		code: "<Stack space=\"xlarge\">\n  <Placeholder height={40} />\n  <Placeholder height={40} />\n</Stack>"
 	},
 	{
-		name: "Page sections",
+		description: "Page sections",
 		code: "<Stack space=\"xxlarge\">\n  <Placeholder height={100} />\n  <Placeholder height={100} />\n</Stack>"
 	},
 	{
-		name: "Page sections (loose)",
+		description: "Page sections (loose)",
 		code: "<Stack space=\"xxxlarge\">\n  <Placeholder height={100} />\n  <Placeholder height={100} />\n</Stack>"
 	}
 ];

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

@@ -1,39 +1,39 @@
 //#region src/lib/playroom/snippets/Stack.ts
 const snippets = [
 	{
-		name: "Small content",
+		description: "Small content",
 		code: "<Stack space=\"xsmall\">\n  <Text size=\"small\">Small Text</Text>\n  <Text size=\"small\">Small Text</Text>\n</Stack>"
 	},
 	{
-		name: "Standard content",
+		description: "Standard content",
 		code: "<Stack space=\"small\">\n  <Text>Standard Text</Text>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Titled content",
+		description: "Titled content",
 		code: "<Stack space=\"small\">\n  <Heading level=\"4\">Heading</Heading>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Content groups",
+		description: "Content groups",
 		code: "<Stack space=\"medium\">\n  <Heading level=\"4\">Heading</Heading>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Content groups (loose)",
+		description: "Content groups (loose)",
 		code: "<Stack space=\"large\">\n  <Heading level=\"3\">Heading</Heading>\n  <Text>Standard Text</Text>\n</Stack>"
 	},
 	{
-		name: "Section groups",
+		description: "Section groups",
 		code: "<Stack space=\"large\">\n  <Placeholder height={40} />\n  <Placeholder height={40} />\n</Stack>"
 	},
 	{
-		name: "Section groups (loose)",
+		description: "Section groups (loose)",
 		code: "<Stack space=\"xlarge\">\n  <Placeholder height={40} />\n  <Placeholder height={40} />\n</Stack>"
 	},
 	{
-		name: "Page sections",
+		description: "Page sections",
 		code: "<Stack space=\"xxlarge\">\n  <Placeholder height={100} />\n  <Placeholder height={100} />\n</Stack>"
 	},
 	{
-		name: "Page sections (loose)",
+		description: "Page sections (loose)",
 		code: "<Stack space=\"xxxlarge\">\n  <Placeholder height={100} />\n  <Placeholder height={100} />\n</Stack>"
 	}
 ];

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

@@ -2,19 +2,19 @@
 //#region src/lib/playroom/snippets/Stepper.ts
 const snippets = [
 	{
-		name: "Default",
+		description: "Default",
 		code: "<Stepper label=\"Linear steps\" progress={3}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step>4. Forth step</Step>\n</Stepper>"
 	},
 	{
-		name: "Non-linear",
+		description: "Non-linear",
 		code: "<Stepper mode=\"non-linear\" label=\"Non-linear steps\" activeStep={2}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step complete>4. Forth step</Step>\n</Stepper>"
 	},
 	{
-		name: "Neutral",
+		description: "Neutral",
 		code: "<Stepper label=\"Linear steps\" tone=\"neutral\" progress={3}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step>4. Forth step</Step>\n</Stepper>"
 	},
 	{
-		name: "Left aligned",
+		description: "Left aligned",
 		code: "<Stepper label=\"Linear steps\" align=\"left\" progress={3}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step>4. Forth step</Step>\n</Stepper>"
 	}
 ];

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

@@ -1,19 +1,19 @@
 //#region src/lib/playroom/snippets/Stepper.ts
 const snippets = [
 	{
-		name: "Default",
+		description: "Default",
 		code: "<Stepper label=\"Linear steps\" progress={3}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step>4. Forth step</Step>\n</Stepper>"
 	},
 	{
-		name: "Non-linear",
+		description: "Non-linear",
 		code: "<Stepper mode=\"non-linear\" label=\"Non-linear steps\" activeStep={2}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step complete>4. Forth step</Step>\n</Stepper>"
 	},
 	{
-		name: "Neutral",
+		description: "Neutral",
 		code: "<Stepper label=\"Linear steps\" tone=\"neutral\" progress={3}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step>4. Forth step</Step>\n</Stepper>"
 	},
 	{
-		name: "Left aligned",
+		description: "Left aligned",
 		code: "<Stepper label=\"Linear steps\" align=\"left\" progress={3}>\n  <Step>1. First step</Step>\n  <Step>2. Second step</Step>\n  <Step>3. Third step</Step>\n  <Step>4. Forth step</Step>\n</Stepper>"
 	}
 ];

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

@@ -1,7 +1,7 @@
 
 //#region src/lib/playroom/snippets/Strong.ts
 const snippets = [{
-	name: "Standard",
+	description: "Standard",
 	code: "<Strong>Strong text</Strong>"
 }];
 

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

@@ -1,6 +1,6 @@
 //#region src/lib/playroom/snippets/Strong.ts
 const snippets = [{
-	name: "Standard",
+	description: "Standard",
 	code: "<Strong>Strong text</Strong>"
 }];
 

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

@@ -2,15 +2,15 @@
 //#region src/lib/playroom/snippets/Table.ts
 const snippets = [
 	{
-		name: "Basic",
+		description: "Basic",
 		code: "<Table label=\"Basic table example\">\n  <TableHeader>\n    <TableRow>\n      <TableHeaderCell>\n        <Text>Lorem</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Ipsum</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Dolor</Text>\n      </TableHeaderCell>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {[\n      {\n        column1: \"Sit\",\n        column2: \"Amet\",\n        column3: \"Consectetur\",\n      },\n      {\n        column1: \"Adipiscing\",\n        column2: \"Elit\",\n        column3: \"Praesent\",\n      },\n      {\n        column1: \"Semper\",\n        column2: \"Interdum\",\n        column3: \"Viverra\",\n      },\n    ].map((row) => (\n      <TableRow key={row.column1}>\n        <TableCell>\n          <Text>{row.column1}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column2}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column3}</Text>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>"
 	},
 	{
-		name: "With status and actions columns",
+		description: "With status and actions columns",
 		code: "<Table label=\"Status and actions example\">\n  <TableHeader>\n    <TableRow>\n      <TableHeaderCell width=\"content\">\n        <Text>Status</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</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        column1: \"Sit\",\n        column2: \"Amet\",\n        column3: \"Consectetur\",\n      },\n      {\n        status: \"Ipsum\",\n        column1: \"Adipiscing\",\n        column2: \"Elit\",\n        column3: \"Praesent\",\n      },\n      {\n        status: \"Dolor\",\n        column1: \"Semper\",\n        column2: \"Interdum\",\n        column3: \"Viverra\",\n      },\n    ].map((row) => (\n      <TableRow key={row.column1}>\n        <TableCell width=\"content\">\n          <Badge>{row.status}</Badge>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column1}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column2}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column3}</Text>\n        </TableCell>\n        <TableCell width=\"content\" align=\"right\">\n          <OverflowMenu size=\"small\" label=\"Options\">\n            <MenuItem>Option</MenuItem>\n            <MenuItem>Option</MenuItem>\n          </OverflowMenu>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>"
 	},
 	{
-		name: "With multi-line cell data and actions",
+		description: "With multi-line cell data and actions",
 		code: "<Table label=\"Multi-line cell data example\">\n  <TableHeader>\n    <TableRow>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell width=\"content\" align=\"right\">\n        <Text>Actions</Text>\n      </TableHeaderCell>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {[\n      {\n        line1: \"Sit\",\n        line2: \"Amet\",\n        column2: \"Consectetur\",\n      },\n      {\n        line1: \"Adipiscing\",\n        line2: \"Elit\",\n        column2: \"Praesent\",\n      },\n      {\n        line1: \"Semper\",\n        line2: \"Interdum\",\n        column2: \"Viverra\",\n      },\n    ].map((row) => (\n      <TableRow key={row.line1}>\n        <TableCell>\n          <Stack space=\"xsmall\">\n            <Text>{row.line1}</Text>\n            <Text>{row.line2}</Text>\n          </Stack>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column2}</Text>\n        </TableCell>\n        <TableCell width=\"content\" align=\"right\">\n          <OverflowMenu size=\"small\" label=\"Options\">\n            <MenuItem>Option</MenuItem>\n            <MenuItem>Option</MenuItem>\n          </OverflowMenu>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>"
 	}
 ];

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

@@ -1,15 +1,15 @@
 //#region src/lib/playroom/snippets/Table.ts
 const snippets = [
 	{
-		name: "Basic",
+		description: "Basic",
 		code: "<Table label=\"Basic table example\">\n  <TableHeader>\n    <TableRow>\n      <TableHeaderCell>\n        <Text>Lorem</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Ipsum</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Dolor</Text>\n      </TableHeaderCell>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {[\n      {\n        column1: \"Sit\",\n        column2: \"Amet\",\n        column3: \"Consectetur\",\n      },\n      {\n        column1: \"Adipiscing\",\n        column2: \"Elit\",\n        column3: \"Praesent\",\n      },\n      {\n        column1: \"Semper\",\n        column2: \"Interdum\",\n        column3: \"Viverra\",\n      },\n    ].map((row) => (\n      <TableRow key={row.column1}>\n        <TableCell>\n          <Text>{row.column1}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column2}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column3}</Text>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>"
 	},
 	{
-		name: "With status and actions columns",
+		description: "With status and actions columns",
 		code: "<Table label=\"Status and actions example\">\n  <TableHeader>\n    <TableRow>\n      <TableHeaderCell width=\"content\">\n        <Text>Status</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</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        column1: \"Sit\",\n        column2: \"Amet\",\n        column3: \"Consectetur\",\n      },\n      {\n        status: \"Ipsum\",\n        column1: \"Adipiscing\",\n        column2: \"Elit\",\n        column3: \"Praesent\",\n      },\n      {\n        status: \"Dolor\",\n        column1: \"Semper\",\n        column2: \"Interdum\",\n        column3: \"Viverra\",\n      },\n    ].map((row) => (\n      <TableRow key={row.column1}>\n        <TableCell width=\"content\">\n          <Badge>{row.status}</Badge>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column1}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column2}</Text>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column3}</Text>\n        </TableCell>\n        <TableCell width=\"content\" align=\"right\">\n          <OverflowMenu size=\"small\" label=\"Options\">\n            <MenuItem>Option</MenuItem>\n            <MenuItem>Option</MenuItem>\n          </OverflowMenu>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>"
 	},
 	{
-		name: "With multi-line cell data and actions",
+		description: "With multi-line cell data and actions",
 		code: "<Table label=\"Multi-line cell data example\">\n  <TableHeader>\n    <TableRow>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell>\n        <Text>Data</Text>\n      </TableHeaderCell>\n      <TableHeaderCell width=\"content\" align=\"right\">\n        <Text>Actions</Text>\n      </TableHeaderCell>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {[\n      {\n        line1: \"Sit\",\n        line2: \"Amet\",\n        column2: \"Consectetur\",\n      },\n      {\n        line1: \"Adipiscing\",\n        line2: \"Elit\",\n        column2: \"Praesent\",\n      },\n      {\n        line1: \"Semper\",\n        line2: \"Interdum\",\n        column2: \"Viverra\",\n      },\n    ].map((row) => (\n      <TableRow key={row.line1}>\n        <TableCell>\n          <Stack space=\"xsmall\">\n            <Text>{row.line1}</Text>\n            <Text>{row.line2}</Text>\n          </Stack>\n        </TableCell>\n        <TableCell>\n          <Text>{row.column2}</Text>\n        </TableCell>\n        <TableCell width=\"content\" align=\"right\">\n          <OverflowMenu size=\"small\" label=\"Options\">\n            <MenuItem>Option</MenuItem>\n            <MenuItem>Option</MenuItem>\n          </OverflowMenu>\n        </TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>"
 	}
 ];

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

@@ -2,27 +2,27 @@
 //#region src/lib/playroom/snippets/Tabs.ts
 const snippets = [
 	{
-		name: "With full divider",
+		description: "With full divider",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs divider=\"full\">\n      <Tab>First Tab</Tab>\n      <Tab badge={<Badge tone=\"positive\">Badge</Badge>}>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "With no divider",
+		description: "With no divider",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs divider=\"none\">\n      <Tab>First Tab</Tab>\n      <Tab badge={<Badge tone=\"positive\">Badge</Badge>}>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "With a badge",
+		description: "With a badge",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs>\n      <Tab>First Tab</Tab>\n      <Tab badge={<Badge tone=\"positive\">Badge</Badge>}>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "With an icon",
+		description: "With an icon",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs>\n      <Tab icon={<IconHome />}>First Tab</Tab>\n      <Tab>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "Align center",
+		description: "Align center",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs align=\"center\">\n      <Tab>First Tab</Tab>\n      <Tab>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "Size small",
+		description: "Size small",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs size=\"small\">\n      <Tab>First Tab</Tab>\n      <Tab>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	}
 ];

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

@@ -1,27 +1,27 @@
 //#region src/lib/playroom/snippets/Tabs.ts
 const snippets = [
 	{
-		name: "With full divider",
+		description: "With full divider",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs divider=\"full\">\n      <Tab>First Tab</Tab>\n      <Tab badge={<Badge tone=\"positive\">Badge</Badge>}>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "With no divider",
+		description: "With no divider",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs divider=\"none\">\n      <Tab>First Tab</Tab>\n      <Tab badge={<Badge tone=\"positive\">Badge</Badge>}>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "With a badge",
+		description: "With a badge",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs>\n      <Tab>First Tab</Tab>\n      <Tab badge={<Badge tone=\"positive\">Badge</Badge>}>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "With an icon",
+		description: "With an icon",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs>\n      <Tab icon={<IconHome />}>First Tab</Tab>\n      <Tab>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "Align center",
+		description: "Align center",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs align=\"center\">\n      <Tab>First Tab</Tab>\n      <Tab>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	},
 	{
-		name: "Size small",
+		description: "Size small",
 		code: "<TabsProvider>\n  <Stack space=\"medium\">\n    <Tabs size=\"small\">\n      <Tab>First Tab</Tab>\n      <Tab>Second Tab</Tab>\n    </Tabs>\n    <TabPanels>\n      <TabPanel>\n        <Placeholder label=\"First\" height={200} />\n      </TabPanel>\n      <TabPanel>\n        <Placeholder label=\"Second\" height={200} />\n      </TabPanel>\n    </TabPanels>\n  </Stack>\n</TabsProvider>"
 	}
 ];

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

@@ -2,23 +2,23 @@
 //#region src/lib/playroom/snippets/Tag.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Inline space=\"small\">\n  <Tag>Tag</Tag>\n  <Tag>Tag</Tag>\n  <Tag>Tag</Tag>\n</Inline>"
 	},
 	{
-		name: "Small",
+		description: "Small",
 		code: "<Inline space=\"xsmall\">\n  <Tag size=\"small\">Tag</Tag>\n  <Tag size=\"small\">Tag</Tag>\n  <Tag size=\"small\">Tag</Tag>\n</Inline>"
 	},
 	{
-		name: "Clearable",
+		description: "Clearable",
 		code: "<Inline space=\"small\">\n  <Tag onClear={() => {}} clearLabel=\"Clear\">\n    Tag\n  </Tag>\n  <Tag onClear={() => {}} clearLabel=\"Clear\">\n    Tag\n  </Tag>\n  <Tag onClear={() => {}} clearLabel=\"Clear\">\n    Tag\n  </Tag>\n</Inline>"
 	},
 	{
-		name: "Addable",
+		description: "Addable",
 		code: "<Inline space=\"small\">\n  <Tag onAdd={() => {}} addLabel=\"Add\">\n    Tag\n  </Tag>\n  <Tag onAdd={() => {}} addLabel=\"Add\">\n    Tag\n  </Tag>\n  <Tag onAdd={() => {}} addLabel=\"Add\">\n    Tag\n  </Tag>\n</Inline>"
 	},
 	{
-		name: "With icon",
+		description: "With icon",
 		code: "<Inline space=\"small\">\n  <Tag icon={<IconTag />}>Tag</Tag>\n  <Tag icon={<IconTag />}>Tag</Tag>\n  <Tag icon={<IconTag />}>Tag</Tag>\n</Inline>"
 	}
 ];

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

@@ -1,23 +1,23 @@
 //#region src/lib/playroom/snippets/Tag.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Inline space=\"small\">\n  <Tag>Tag</Tag>\n  <Tag>Tag</Tag>\n  <Tag>Tag</Tag>\n</Inline>"
 	},
 	{
-		name: "Small",
+		description: "Small",
 		code: "<Inline space=\"xsmall\">\n  <Tag size=\"small\">Tag</Tag>\n  <Tag size=\"small\">Tag</Tag>\n  <Tag size=\"small\">Tag</Tag>\n</Inline>"
 	},
 	{
-		name: "Clearable",
+		description: "Clearable",
 		code: "<Inline space=\"small\">\n  <Tag onClear={() => {}} clearLabel=\"Clear\">\n    Tag\n  </Tag>\n  <Tag onClear={() => {}} clearLabel=\"Clear\">\n    Tag\n  </Tag>\n  <Tag onClear={() => {}} clearLabel=\"Clear\">\n    Tag\n  </Tag>\n</Inline>"
 	},
 	{
-		name: "Addable",
+		description: "Addable",
 		code: "<Inline space=\"small\">\n  <Tag onAdd={() => {}} addLabel=\"Add\">\n    Tag\n  </Tag>\n  <Tag onAdd={() => {}} addLabel=\"Add\">\n    Tag\n  </Tag>\n  <Tag onAdd={() => {}} addLabel=\"Add\">\n    Tag\n  </Tag>\n</Inline>"
 	},
 	{
-		name: "With icon",
+		description: "With icon",
 		code: "<Inline space=\"small\">\n  <Tag icon={<IconTag />}>Tag</Tag>\n  <Tag icon={<IconTag />}>Tag</Tag>\n  <Tag icon={<IconTag />}>Tag</Tag>\n</Inline>"
 	}
 ];

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

@@ -2,39 +2,39 @@
 //#region src/lib/playroom/snippets/Text.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Text>Standard text</Text>"
 	},
 	{
-		name: "Large",
+		description: "Large",
 		code: "<Text size=\"large\">Large text</Text>"
 	},
 	{
-		name: "Small",
+		description: "Small",
 		code: "<Text size=\"small\">Small text</Text>"
 	},
 	{
-		name: "Xsmall",
+		description: "Xsmall",
 		code: "<Text size=\"xsmall\">Xsmall text</Text>"
 	},
 	{
-		name: "Tone (critical)",
+		description: "Tone (critical)",
 		code: "<Text tone=\"critical\">Critical text</Text>"
 	},
 	{
-		name: "Tone (positive)",
+		description: "Tone (positive)",
 		code: "<Text tone=\"positive\">Positive text</Text>"
 	},
 	{
-		name: "Tone (secondary)",
+		description: "Tone (secondary)",
 		code: "<Text tone=\"secondary\">Secondary text</Text>"
 	},
 	{
-		name: "Weight (strong)",
+		description: "Weight (strong)",
 		code: "<Text weight=\"strong\">Strong text</Text>"
 	},
 	{
-		name: "Weight (medium)",
+		description: "Weight (medium)",
 		code: "<Text weight=\"medium\">Medium text</Text>"
 	}
 ];

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

@@ -1,39 +1,39 @@
 //#region src/lib/playroom/snippets/Text.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Text>Standard text</Text>"
 	},
 	{
-		name: "Large",
+		description: "Large",
 		code: "<Text size=\"large\">Large text</Text>"
 	},
 	{
-		name: "Small",
+		description: "Small",
 		code: "<Text size=\"small\">Small text</Text>"
 	},
 	{
-		name: "Xsmall",
+		description: "Xsmall",
 		code: "<Text size=\"xsmall\">Xsmall text</Text>"
 	},
 	{
-		name: "Tone (critical)",
+		description: "Tone (critical)",
 		code: "<Text tone=\"critical\">Critical text</Text>"
 	},
 	{
-		name: "Tone (positive)",
+		description: "Tone (positive)",
 		code: "<Text tone=\"positive\">Positive text</Text>"
 	},
 	{
-		name: "Tone (secondary)",
+		description: "Tone (secondary)",
 		code: "<Text tone=\"secondary\">Secondary text</Text>"
 	},
 	{
-		name: "Weight (strong)",
+		description: "Weight (strong)",
 		code: "<Text weight=\"strong\">Strong text</Text>"
 	},
 	{
-		name: "Weight (medium)",
+		description: "Weight (medium)",
 		code: "<Text weight=\"medium\">Medium text</Text>"
 	}
 ];

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

@@ -2,15 +2,15 @@
 //#region src/lib/playroom/snippets/TextDropdown.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Text>\n  <TextDropdown\n    label=\"Label\"\n    value=\"Option 1\"\n    options={[\"Option 1\", \"Option 2\", \"Option 3\"]}\n  />\n</Text>"
 	},
 	{
-		name: "Emphasised within a sentence",
+		description: "Emphasised within a sentence",
 		code: "<Text>\n  Sort by{\" \"}\n  <Strong>\n    <TextDropdown label=\"Sort by\" options={[\"Relevance\", \"Date\", \"Keyword\"]} />\n  </Strong>\n</Text>"
 	},
 	{
-		name: "Within a heading",
+		description: "Within a heading",
 		code: "<Heading level=\"2\">\n  Heading with{\" \"}\n  <TextDropdown\n    label=\"Options\"\n    options={[\"Option 1\", \"Option 2\", \"Option 3\"]}\n  />\n</Heading>"
 	}
 ];

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

@@ -1,15 +1,15 @@
 //#region src/lib/playroom/snippets/TextDropdown.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Text>\n  <TextDropdown\n    label=\"Label\"\n    value=\"Option 1\"\n    options={[\"Option 1\", \"Option 2\", \"Option 3\"]}\n  />\n</Text>"
 	},
 	{
-		name: "Emphasised within a sentence",
+		description: "Emphasised within a sentence",
 		code: "<Text>\n  Sort by{\" \"}\n  <Strong>\n    <TextDropdown label=\"Sort by\" options={[\"Relevance\", \"Date\", \"Keyword\"]} />\n  </Strong>\n</Text>"
 	},
 	{
-		name: "Within a heading",
+		description: "Within a heading",
 		code: "<Heading level=\"2\">\n  Heading with{\" \"}\n  <TextDropdown\n    label=\"Options\"\n    options={[\"Option 1\", \"Option 2\", \"Option 3\"]}\n  />\n</Heading>"
 	}
 ];

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

@@ -2,35 +2,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\" />"
 	}
 ];