braid-design-system 34.0.2 → 34.0.3

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\" />"
 	}
 ];

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/lib/playroom/snippets.cjs

@@ -99,9 +99,9 @@ var snippets_default = Object.entries({
 	Tiles: require_Tiles.snippets,
 	Toggle: require_Toggle.snippets,
 	TooltipRenderer: require_TooltipRenderer.snippets
-}).map(([group, snippets]) => snippets.map((snippet) => ({
+}).map(([name, snippets]) => snippets.map((snippet) => ({
 	...snippet,
-	group
+	name: "name" in snippet ? snippet.name : name
 }))).flat();
 
 //#endregion

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

@@ -1,7 +1,7 @@
 //#region src/lib/playroom/snippets.d.ts
 declare const _default: {
-  group: string;
-  name: string;
+  name: unknown;
+  description: string;
   code: string;
 }[];
 //#endregion

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

@@ -1,7 +1,7 @@
 //#region src/lib/playroom/snippets.d.ts
 declare const _default: {
-  group: string;
-  name: string;
+  name: unknown;
+  description: string;
   code: string;
 }[];
 //#endregion

package/dist/lib/playroom/snippets.mjs

@@ -99,9 +99,9 @@ var snippets_default = Object.entries({
 	Tiles: snippets$46,
 	Toggle: snippets$47,
 	TooltipRenderer: snippets$48
-}).map(([group, snippets]) => snippets.map((snippet) => ({
+}).map(([name, snippets]) => snippets.map((snippet) => ({
 	...snippet,
-	group
+	name: "name" in snippet ? snippet.name : name
 }))).flat();
 
 //#endregion