braid-design-system 34.0.2 → 34.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # braid-design-system
 
+## 34.0.3
+
+### Patch Changes
+
+- **Textarea:** Add support for automatic shrinking height with the `grow` prop (`true` by default). ([#2000](https://github.com/seek-oss/braid-design-system/pull/2000))
+
+  Automatically shrink and grow height with content when using the `grow` prop.
+
 ## 34.0.2
 
 ### Patch Changes

package/dist/lib/components/Textarea/Textarea.cjs

@@ -11,11 +11,17 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const pxToInt = (str) => typeof str === "string" ? parseInt(str.replace("px", ""), 10) : 0;
 const calculateLines = (target, lines, lineLimit) => {
 	const { paddingBottom, paddingTop, lineHeight } = window.getComputedStyle(target);
-	if (!lineHeight.endsWith("px")) return lines;
+	const lineHeightCannotBeAccuratelyCalculated = !lineHeight.endsWith("px");
+	const heightSetByUser = Boolean(target.style.height);
+	if (lineHeightCannotBeAccuratelyCalculated || heightSetByUser) return lines;
 	const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
-	const currentRows = Math.floor((target.scrollHeight - padding) / pxToInt(lineHeight));
+	target.style.height = "0";
+	const scrollHeight = target.scrollHeight;
+	target.style.height = "";
+	const currentRows = Math.floor((scrollHeight - padding) / pxToInt(lineHeight));
 	if (target && target.value === "") return lines;
-	return typeof lineLimit === "number" && currentRows > lineLimit ? lineLimit : currentRows;
+	const linesWithLimitApplied = typeof lineLimit === "number" ? Math.min(currentRows, lineLimit) : currentRows;
+	return Math.max(linesWithLimitApplied, lines);
 };
 const Textarea = (0, react.forwardRef)(({ value, onChange, onBlur, onFocus, onPaste, placeholder, characterLimit, highlightRanges: highlightRangesProp = [], lines = 3, lineLimit, grow = true, tone, spellCheck, ...restProps }, ref) => {
 	const [rows, setRows] = (0, react.useState)(lines);

package/dist/lib/components/Textarea/Textarea.mjs

@@ -10,11 +10,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const pxToInt = (str) => typeof str === "string" ? parseInt(str.replace("px", ""), 10) : 0;
 const calculateLines = (target, lines, lineLimit) => {
 	const { paddingBottom, paddingTop, lineHeight } = window.getComputedStyle(target);
-	if (!lineHeight.endsWith("px")) return lines;
+	const lineHeightCannotBeAccuratelyCalculated = !lineHeight.endsWith("px");
+	const heightSetByUser = Boolean(target.style.height);
+	if (lineHeightCannotBeAccuratelyCalculated || heightSetByUser) return lines;
 	const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
-	const currentRows = Math.floor((target.scrollHeight - padding) / pxToInt(lineHeight));
+	target.style.height = "0";
+	const scrollHeight = target.scrollHeight;
+	target.style.height = "";
+	const currentRows = Math.floor((scrollHeight - padding) / pxToInt(lineHeight));
 	if (target && target.value === "") return lines;
-	return typeof lineLimit === "number" && currentRows > lineLimit ? lineLimit : currentRows;
+	const linesWithLimitApplied = typeof lineLimit === "number" ? Math.min(currentRows, lineLimit) : currentRows;
+	return Math.max(linesWithLimitApplied, lines);
 };
 const Textarea = forwardRef(({ value, onChange, onBlur, onFocus, onPaste, placeholder, characterLimit, highlightRanges: highlightRangesProp = [], lines = 3, lineLimit, grow = true, tone, spellCheck, ...restProps }, ref) => {
 	const [rows, setRows] = useState(lines);

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

@@ -2,31 +2,31 @@
 //#region src/lib/playroom/snippets/Accordion.ts
 const snippets = [
 	{
-		name: "Large",
+		description: "Large",
 		code: "<Accordion>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Large, without dividers",
+		description: "Large, without dividers",
 		code: "<Accordion dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Accordion size=\"standard\">\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Standard, without dividers",
+		description: "Standard, without dividers",
 		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Large standalone item",
+		description: "Large standalone item",
 		code: "<AccordionItem label=\"Label\">\n  <Placeholder height={100} />\n</AccordionItem>"
 	},
 	{
-		name: "Standard standalone item",
+		description: "Standard standalone item",
 		code: "<AccordionItem label=\"Label\" size=\"standard\">\n  <Placeholder height={100} />\n</AccordionItem>"
 	},
 	{
-		name: "Standalone item with a badge",
+		description: "Standalone item with a badge",
 		code: "<AccordionItem\n  label=\"Label\"\n  badge={\n    <Badge tone=\"promote\" weight=\"strong\">\n      Badge\n    </Badge>\n  }\n>\n  <Placeholder height={100} />\n</AccordionItem>"
 	}
 ];

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

@@ -1,31 +1,31 @@
 //#region src/lib/playroom/snippets/Accordion.ts
 const snippets = [
 	{
-		name: "Large",
+		description: "Large",
 		code: "<Accordion>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Large, without dividers",
+		description: "Large, without dividers",
 		code: "<Accordion dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Accordion size=\"standard\">\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Standard, without dividers",
+		description: "Standard, without dividers",
 		code: "<Accordion size=\"standard\" dividers={false}>\n  <AccordionItem label=\"Item 1\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 2\">\n    <Placeholder height={100} />\n  </AccordionItem>\n  <AccordionItem label=\"Item 3\">\n    <Placeholder height={100} />\n  </AccordionItem>\n</Accordion>"
 	},
 	{
-		name: "Large standalone item",
+		description: "Large standalone item",
 		code: "<AccordionItem label=\"Label\">\n  <Placeholder height={100} />\n</AccordionItem>"
 	},
 	{
-		name: "Standard standalone item",
+		description: "Standard standalone item",
 		code: "<AccordionItem label=\"Label\" size=\"standard\">\n  <Placeholder height={100} />\n</AccordionItem>"
 	},
 	{
-		name: "Standalone item with a badge",
+		description: "Standalone item with a badge",
 		code: "<AccordionItem\n  label=\"Label\"\n  badge={\n    <Badge tone=\"promote\" weight=\"strong\">\n      Badge\n    </Badge>\n  }\n>\n  <Placeholder height={100} />\n</AccordionItem>"
 	}
 ];

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

@@ -1,10 +1,10 @@
 
 //#region src/lib/playroom/snippets/Actions.ts
 const snippets = [{
-	name: "Standard size",
+	description: "Standard size",
 	code: "<Actions>\n  <Button>Button 1</Button>\n  <Button variant=\"transparent\">Button 2</Button>\n</Actions>"
 }, {
-	name: "Small size",
+	description: "Small size",
 	code: "<Actions size=\"small\">\n  <Button>Button 1</Button>\n  <Button>Button 2</Button>\n  <Button variant=\"transparent\">Button 3</Button>\n</Actions>"
 }];
 

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

@@ -1,9 +1,9 @@
 //#region src/lib/playroom/snippets/Actions.ts
 const snippets = [{
-	name: "Standard size",
+	description: "Standard size",
 	code: "<Actions>\n  <Button>Button 1</Button>\n  <Button variant=\"transparent\">Button 2</Button>\n</Actions>"
 }, {
-	name: "Small size",
+	description: "Small size",
 	code: "<Actions size=\"small\">\n  <Button>Button 1</Button>\n  <Button>Button 2</Button>\n  <Button variant=\"transparent\">Button 3</Button>\n</Actions>"
 }];
 

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

@@ -2,27 +2,27 @@
 //#region src/lib/playroom/snippets/Alert.ts
 const snippets = [
 	{
-		name: "Critical",
+		description: "Critical",
 		code: "<Alert tone=\"critical\">\n  <Text>Critical Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Caution",
+		description: "Caution",
 		code: "<Alert tone=\"caution\">\n  <Text>Caution Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Positive",
+		description: "Positive",
 		code: "<Alert tone=\"positive\">\n  <Text>Positive Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Info",
+		description: "Info",
 		code: "<Alert tone=\"info\">\n  <Text>Info Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Promote",
+		description: "Promote",
 		code: "<Alert tone=\"promote\">\n  <Text>Promote Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Dismissible alert",
+		description: "Dismissible alert",
 		code: "<Alert onClose={() => {}} closeLabel=\"Close\">\n  <Text>Dismissible Alert</Text>\n</Alert>"
 	}
 ];

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

@@ -1,27 +1,27 @@
 //#region src/lib/playroom/snippets/Alert.ts
 const snippets = [
 	{
-		name: "Critical",
+		description: "Critical",
 		code: "<Alert tone=\"critical\">\n  <Text>Critical Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Caution",
+		description: "Caution",
 		code: "<Alert tone=\"caution\">\n  <Text>Caution Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Positive",
+		description: "Positive",
 		code: "<Alert tone=\"positive\">\n  <Text>Positive Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Info",
+		description: "Info",
 		code: "<Alert tone=\"info\">\n  <Text>Info Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Promote",
+		description: "Promote",
 		code: "<Alert tone=\"promote\">\n  <Text>Promote Alert</Text>\n</Alert>"
 	},
 	{
-		name: "Dismissible alert",
+		description: "Dismissible alert",
 		code: "<Alert onClose={() => {}} closeLabel=\"Close\">\n  <Text>Dismissible Alert</Text>\n</Alert>"
 	}
 ];

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

@@ -2,27 +2,27 @@
 //#region src/lib/playroom/snippets/Autosuggest.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Autosuggest\n  label=\"Fruit\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "Grouped suggestions",
+		description: "Grouped suggestions",
 		code: "<Autosuggest\n  label=\"I like to eat\"\n  suggestions={[\n    {\n      label: \"Fruit\",\n      suggestions: [\n        { text: \"Apples\" },\n        { text: \"Bananas\" },\n        { text: \"Carrots\" },\n      ],\n    },\n    {\n      label: \"Vegetables\",\n      suggestions: [\n        { text: \"Broccoli\" },\n        { text: \"Carrots\" },\n        { text: \"Carrots\" },\n      ],\n    },\n  ]}\n/>"
 	},
 	{
-		name: "With mobile backdrop",
+		description: "With mobile backdrop",
 		code: "<Autosuggest\n  showMobileBackdrop\n  label=\"Fruit\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "With error",
+		description: "With error",
 		code: "<Autosuggest\n  label=\"I like to eat\"\n  tone=\"critical\"\n  message=\"You must make a selection\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "With description",
+		description: "With description",
 		code: "<Autosuggest\n  label=\"Fruit\"\n  description=\"Select your favourite fruit to eat from the available suggestions.\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "With icon",
+		description: "With icon",
 		code: "<Autosuggest\n  aria-label=\"Location\"\n  icon={<IconLocation />}\n  placeholder=\"Enter a location\"\n  suggestions={[\n    { text: \"Adelaide\" },\n    { text: \"Brisbane\" },\n    { text: \"Darwin\" },\n    { text: \"Hobart\" },\n    { text: \"Melbourne\" },\n    { text: \"Perth\" },\n    { text: \"Sydney\" },\n  ]}\n/>"
 	}
 ];

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

@@ -1,27 +1,27 @@
 //#region src/lib/playroom/snippets/Autosuggest.ts
 const snippets = [
 	{
-		name: "Standard",
+		description: "Standard",
 		code: "<Autosuggest\n  label=\"Fruit\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "Grouped suggestions",
+		description: "Grouped suggestions",
 		code: "<Autosuggest\n  label=\"I like to eat\"\n  suggestions={[\n    {\n      label: \"Fruit\",\n      suggestions: [\n        { text: \"Apples\" },\n        { text: \"Bananas\" },\n        { text: \"Carrots\" },\n      ],\n    },\n    {\n      label: \"Vegetables\",\n      suggestions: [\n        { text: \"Broccoli\" },\n        { text: \"Carrots\" },\n        { text: \"Carrots\" },\n      ],\n    },\n  ]}\n/>"
 	},
 	{
-		name: "With mobile backdrop",
+		description: "With mobile backdrop",
 		code: "<Autosuggest\n  showMobileBackdrop\n  label=\"Fruit\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "With error",
+		description: "With error",
 		code: "<Autosuggest\n  label=\"I like to eat\"\n  tone=\"critical\"\n  message=\"You must make a selection\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "With description",
+		description: "With description",
 		code: "<Autosuggest\n  label=\"Fruit\"\n  description=\"Select your favourite fruit to eat from the available suggestions.\"\n  suggestions={[{ text: \"Apples\" }, { text: \"Bananas\" }, { text: \"Carrots\" }]}\n/>"
 	},
 	{
-		name: "With icon",
+		description: "With icon",
 		code: "<Autosuggest\n  aria-label=\"Location\"\n  icon={<IconLocation />}\n  placeholder=\"Enter a location\"\n  suggestions={[\n    { text: \"Adelaide\" },\n    { text: \"Brisbane\" },\n    { text: \"Darwin\" },\n    { text: \"Hobart\" },\n    { text: \"Melbourne\" },\n    { text: \"Perth\" },\n    { text: \"Sydney\" },\n  ]}\n/>"
 	}
 ];

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

@@ -2,55 +2,55 @@
 //#region src/lib/playroom/snippets/Badge.ts
 const snippets = [
 	{
-		name: "Info",
+		description: "Info",
 		code: "<Badge tone=\"info\">Badge</Badge>"
 	},
 	{
-		name: "Info (strong)",
+		description: "Info (strong)",
 		code: "<Badge tone=\"info\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Promote",
+		description: "Promote",
 		code: "<Badge tone=\"promote\">Badge</Badge>"
 	},
 	{
-		name: "Promote (strong)",
+		description: "Promote (strong)",
 		code: "<Badge tone=\"promote\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Positive",
+		description: "Positive",
 		code: "<Badge tone=\"positive\">Badge</Badge>"
 	},
 	{
-		name: "Positive (strong)",
+		description: "Positive (strong)",
 		code: "<Badge tone=\"positive\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Caution",
+		description: "Caution",
 		code: "<Badge tone=\"caution\">Badge</Badge>"
 	},
 	{
-		name: "Caution (strong)",
+		description: "Caution (strong)",
 		code: "<Badge tone=\"caution\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Critical",
+		description: "Critical",
 		code: "<Badge tone=\"critical\">Badge</Badge>"
 	},
 	{
-		name: "Critical (strong)",
+		description: "Critical (strong)",
 		code: "<Badge tone=\"critical\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Neutral",
+		description: "Neutral",
 		code: "<Badge tone=\"neutral\">Badge</Badge>"
 	},
 	{
-		name: "Neutral (strong)",
+		description: "Neutral (strong)",
 		code: "<Badge tone=\"neutral\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Multiple",
+		description: "Multiple",
 		code: "<Inline space=\"small\">\n  <Badge tone=\"info\">Badge</Badge>\n  <Badge tone=\"positive\">Badge</Badge>\n  <Badge tone=\"promote\">Badge</Badge>\n</Inline>"
 	}
 ];

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

@@ -1,55 +1,55 @@
 //#region src/lib/playroom/snippets/Badge.ts
 const snippets = [
 	{
-		name: "Info",
+		description: "Info",
 		code: "<Badge tone=\"info\">Badge</Badge>"
 	},
 	{
-		name: "Info (strong)",
+		description: "Info (strong)",
 		code: "<Badge tone=\"info\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Promote",
+		description: "Promote",
 		code: "<Badge tone=\"promote\">Badge</Badge>"
 	},
 	{
-		name: "Promote (strong)",
+		description: "Promote (strong)",
 		code: "<Badge tone=\"promote\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Positive",
+		description: "Positive",
 		code: "<Badge tone=\"positive\">Badge</Badge>"
 	},
 	{
-		name: "Positive (strong)",
+		description: "Positive (strong)",
 		code: "<Badge tone=\"positive\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Caution",
+		description: "Caution",
 		code: "<Badge tone=\"caution\">Badge</Badge>"
 	},
 	{
-		name: "Caution (strong)",
+		description: "Caution (strong)",
 		code: "<Badge tone=\"caution\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Critical",
+		description: "Critical",
 		code: "<Badge tone=\"critical\">Badge</Badge>"
 	},
 	{
-		name: "Critical (strong)",
+		description: "Critical (strong)",
 		code: "<Badge tone=\"critical\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Neutral",
+		description: "Neutral",
 		code: "<Badge tone=\"neutral\">Badge</Badge>"
 	},
 	{
-		name: "Neutral (strong)",
+		description: "Neutral (strong)",
 		code: "<Badge tone=\"neutral\" weight=\"strong\">\n  Badge\n</Badge>"
 	},
 	{
-		name: "Multiple",
+		description: "Multiple",
 		code: "<Inline space=\"small\">\n  <Badge tone=\"info\">Badge</Badge>\n  <Badge tone=\"positive\">Badge</Badge>\n  <Badge tone=\"promote\">Badge</Badge>\n</Inline>"
 	}
 ];

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

@@ -2,31 +2,31 @@
 //#region src/lib/playroom/snippets/Bleed.ts
 const snippets = [
 	{
-		name: "On all sides",
+		description: "On all sides",
 		code: "<Bleed space=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "Horizontally",
+		description: "Horizontally",
 		code: "<Bleed horizontal=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "Vertically",
+		description: "Vertically",
 		code: "<Bleed vertical=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the top",
+		description: "To the top",
 		code: "<Bleed top=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the bottom",
+		description: "To the bottom",
 		code: "<Bleed bottom=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the left",
+		description: "To the left",
 		code: "<Bleed left=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the right",
+		description: "To the right",
 		code: "<Bleed right=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	}
 ];

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

@@ -1,31 +1,31 @@
 //#region src/lib/playroom/snippets/Bleed.ts
 const snippets = [
 	{
-		name: "On all sides",
+		description: "On all sides",
 		code: "<Bleed space=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "Horizontally",
+		description: "Horizontally",
 		code: "<Bleed horizontal=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "Vertically",
+		description: "Vertically",
 		code: "<Bleed vertical=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the top",
+		description: "To the top",
 		code: "<Bleed top=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the bottom",
+		description: "To the bottom",
 		code: "<Bleed bottom=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the left",
+		description: "To the left",
 		code: "<Bleed left=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	},
 	{
-		name: "To the right",
+		description: "To the right",
 		code: "<Bleed right=\"gutter\">\n  <Placeholder height={80} />\n</Bleed>"
 	}
 ];

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

@@ -2,83 +2,83 @@
 //#region src/lib/playroom/snippets/Button.ts
 const snippets = [
 	{
-		name: "Solid",
+		description: "Solid",
 		code: "<Button variant=\"solid\">Button</Button>"
 	},
 	{
-		name: "Ghost",
+		description: "Ghost",
 		code: "<Button variant=\"ghost\">Button</Button>"
 	},
 	{
-		name: "Soft",
+		description: "Soft",
 		code: "<Button variant=\"soft\">Button</Button>"
 	},
 	{
-		name: "Transparent",
+		description: "Transparent",
 		code: "<Button variant=\"transparent\">Button</Button>"
 	},
 	{
-		name: "Critical Solid",
+		description: "Critical Solid",
 		code: "<Button tone=\"critical\" variant=\"solid\">\n  Button\n</Button>"
 	},
 	{
-		name: "Critical Ghost",
+		description: "Critical Ghost",
 		code: "<Button tone=\"critical\" variant=\"ghost\">\n  Button\n</Button>"
 	},
 	{
-		name: "Critical Soft",
+		description: "Critical Soft",
 		code: "<Button tone=\"critical\" variant=\"soft\">\n  Button\n</Button>"
 	},
 	{
-		name: "Critical Transparent",
+		description: "Critical Transparent",
 		code: "<Button tone=\"critical\" variant=\"transparent\">\n  Button\n</Button>"
 	},
 	{
-		name: "BrandAccent Solid",
+		description: "BrandAccent Solid",
 		code: "<Button tone=\"brandAccent\" variant=\"solid\">\n  Button\n</Button>"
 	},
 	{
-		name: "BrandAccent Ghost",
+		description: "BrandAccent Ghost",
 		code: "<Button tone=\"brandAccent\" variant=\"ghost\">\n  Button\n</Button>"
 	},
 	{
-		name: "BrandAccent Soft",
+		description: "BrandAccent Soft",
 		code: "<Button tone=\"brandAccent\" variant=\"soft\">\n  Button\n</Button>"
 	},
 	{
-		name: "BrandAccent Transparent",
+		description: "BrandAccent Transparent",
 		code: "<Button tone=\"brandAccent\" variant=\"transparent\">\n  Button\n</Button>"
 	},
 	{
-		name: "Neutral Solid",
+		description: "Neutral Solid",
 		code: "<Button tone=\"neutral\" variant=\"solid\">\n  Button\n</Button>"
 	},
 	{
-		name: "Neutral Ghost",
+		description: "Neutral Ghost",
 		code: "<Button tone=\"neutral\" variant=\"ghost\">\n  Button\n</Button>"
 	},
 	{
-		name: "Neutral Soft",
+		description: "Neutral Soft",
 		code: "<Button tone=\"neutral\" variant=\"soft\">\n  Button\n</Button>"
 	},
 	{
-		name: "Neutral Transparent",
+		description: "Neutral Transparent",
 		code: "<Button tone=\"neutral\" variant=\"transparent\">\n  Button\n</Button>"
 	},
 	{
-		name: "Small Solid",
+		description: "Small Solid",
 		code: "<Button size=\"small\" variant=\"solid\">\n  Button\n</Button>"
 	},
 	{
-		name: "Small Ghost",
+		description: "Small Ghost",
 		code: "<Button size=\"small\" variant=\"ghost\">\n  Button\n</Button>"
 	},
 	{
-		name: "Small Soft",
+		description: "Small Soft",
 		code: "<Button size=\"small\" variant=\"soft\">\n  Button\n</Button>"
 	},
 	{
-		name: "Small Transparent",
+		description: "Small Transparent",
 		code: "<Button size=\"small\" variant=\"transparent\">\n  Button\n</Button>"
 	}
 ];