braid-design-system 34.4.0 → 34.5.0

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Dropdown.ts
 const snippets = [
 	{
@@ -30,6 +29,5 @@ const snippets = [
 		code: "<Dropdown\n  label=\"Label\"\n  placeholder=\"Please select\"\n  tone=\"positive\"\n  message=\"Positive message\"\n>\n  <option>Option 1</option>\n  <option>Option 2</option>\n  <option>Option 3</option>\n</Dropdown>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -29,6 +29,5 @@ const snippets = [
 		code: "<Dropdown\n  label=\"Label\"\n  placeholder=\"Please select\"\n  tone=\"positive\"\n  message=\"Positive message\"\n>\n  <option>Option 1</option>\n  <option>Option 2</option>\n  <option>Option 3</option>\n</Dropdown>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/FieldLabel.ts
 const snippets = [
 	{
@@ -14,6 +13,5 @@ const snippets = [
 		code: "<FieldLabel\n  label=\"Label\"\n  secondaryLabel=\"Optional\"\n  tertiaryLabel={\n    <TextLink href=\"#\" icon={<IconHelp />}>\n      Help\n    </TextLink>\n  }\n/>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -13,6 +13,5 @@ const snippets = [
 		code: "<FieldLabel\n  label=\"Label\"\n  secondaryLabel=\"Optional\"\n  tertiaryLabel={\n    <TextLink href=\"#\" icon={<IconHelp />}>\n      Help\n    </TextLink>\n  }\n/>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/FieldMessage.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		code: "<FieldMessage\n  message=\"This is a message\"\n  secondaryMessage={\n    <Text size=\"small\" tone=\"secondary\">\n      Secondary\n    </Text>\n  }\n/>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		code: "<FieldMessage\n  message=\"This is a message\"\n  secondaryMessage={\n    <Text size=\"small\" tone=\"secondary\">\n      Secondary\n    </Text>\n  }\n/>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

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

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

@@ -8,6 +8,5 @@ const snippets = [{
 	name: "Form (validation)",
 	code: "<PageBlock width=\"medium\">\n  <Stack space=\"xlarge\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text>\n        For forms that are more likely to show validation errors, it is\n        recommended to use <Strong>reserveMessageSpace</Strong> to prevent the\n        elements shifting when messages appear.\n      </Text>\n\n      <Text>\n        Uses a <Strong>small Stack</Strong> for fields, with a{\" \"}\n        <Strong>large Stack</Strong> separating the actions from the form.\n      </Text>\n    </Stack>\n\n    <Stack space=\"large\">\n      <Stack space=\"small\">\n        <TextField\n          label=\"TextField\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Dropdown\n          label=\"Dropdown\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        >\n          <option>Option 1</option>\n          <option>Option 2</option>\n          <option>Option 3</option>\n        </Dropdown>\n\n        <MonthPicker\n          label=\"MonthPicker\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n\n        <Checkbox\n          label=\"Checkbox\"\n          reserveMessageSpace\n          tone={getState(\"error\") ? \"critical\" : undefined}\n          message={getState(\"error\") ? \"Required field\" : undefined}\n        />\n      </Stack>\n\n      <Actions>\n        <Button onClick={() => toggleState(\"error\")}>Toggle errors</Button>\n      </Actions>\n    </Stack>\n  </Stack>\n</PageBlock>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Heading.ts
 const snippets = [
 	{
@@ -38,6 +37,5 @@ const snippets = [
 		code: "<Heading level=\"4\" weight=\"weak\">\n  Heading\n</Heading>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -37,6 +37,5 @@ const snippets = [
 		code: "<Heading level=\"4\" weight=\"weak\">\n  Heading\n</Heading>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Inline.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		code: "<Inline space=\"small\" noWrap>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		code: "<Inline space=\"small\" noWrap>\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n  <Placeholder width={48} height={48} />\n</Inline>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/List.ts
 const snippets = [
 	{
@@ -34,6 +33,5 @@ const snippets = [
 		code: "<List space=\"medium\" type=\"icon\" icon={<IconTick tone=\"positive\" />}>\n  <Text>Text</Text>\n  <Text>Text</Text>\n  <Text>Text</Text>\n</List>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -33,6 +33,5 @@ const snippets = [
 		code: "<List space=\"medium\" type=\"icon\" icon={<IconTick tone=\"positive\" />}>\n  <Text>Text</Text>\n  <Text>Text</Text>\n  <Text>Text</Text>\n</List>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

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

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

@@ -3,6 +3,5 @@ const snippets = [{
 	description: "Standard",
 	code: "<Loader />"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/MenuRenderer.ts
 const snippets = [
 	{
@@ -22,6 +21,5 @@ const snippets = [
 		code: "<MenuRenderer\n  offsetSpace=\"small\"\n  trigger={(triggerProps) => (\n    <Box userSelect=\"none\" cursor=\"pointer\" {...triggerProps}>\n      <Placeholder height={50} label=\"Menu Trigger\" />\n    </Box>\n  )}\n>\n  <MenuItem onClick={() => {}}>Button</MenuItem>\n  <MenuItemLink href=\"#\">Link</MenuItemLink>\n</MenuRenderer>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -21,6 +21,5 @@ const snippets = [
 		code: "<MenuRenderer\n  offsetSpace=\"small\"\n  trigger={(triggerProps) => (\n    <Box userSelect=\"none\" cursor=\"pointer\" {...triggerProps}>\n      <Placeholder height={50} label=\"Menu Trigger\" />\n    </Box>\n  )}\n>\n  <MenuItem onClick={() => {}}>Button</MenuItem>\n  <MenuItemLink href=\"#\">Link</MenuItemLink>\n</MenuRenderer>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/MonthPicker.ts
 const snippets = [
 	{
@@ -30,6 +29,5 @@ const snippets = [
 		code: "<MonthPicker\n  label=\"Started\"\n  monthLabel=\"MM\"\n  yearLabel=\"YYYY\"\n  monthNames={[\n    \"01\",\n    \"02\",\n    \"03\",\n    \"04\",\n    \"05\",\n    \"06\",\n    \"07\",\n    \"08\",\n    \"09\",\n    \"10\",\n    \"11\",\n    \"12\",\n  ]}\n/>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -29,6 +29,5 @@ const snippets = [
 		code: "<MonthPicker\n  label=\"Started\"\n  monthLabel=\"MM\"\n  yearLabel=\"YYYY\"\n  monthNames={[\n    \"01\",\n    \"02\",\n    \"03\",\n    \"04\",\n    \"05\",\n    \"06\",\n    \"07\",\n    \"08\",\n    \"09\",\n    \"10\",\n    \"11\",\n    \"12\",\n  ]}\n/>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Notice.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		code: "<Notice tone=\"promote\">\n  <Text>Promote Notice</Text>\n</Notice>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		code: "<Notice tone=\"promote\">\n  <Text>Promote Notice</Text>\n</Notice>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/OverflowMenu.ts
 const snippets = [{
 	description: "Standard",
@@ -7,6 +6,5 @@ const snippets = [{
 	description: "Small",
 	code: "<OverflowMenu size=\"small\" label=\"Options\">\n  <MenuItem>Option</MenuItem>\n  <MenuItem>Option</MenuItem>\n</OverflowMenu>"
 }];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -6,6 +6,5 @@ const snippets = [{
 	description: "Small",
 	code: "<OverflowMenu size=\"small\" label=\"Options\">\n  <MenuItem>Option</MenuItem>\n  <MenuItem>Option</MenuItem>\n</OverflowMenu>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Page.ts
 const snippets = [{
 	description: "Default",
@@ -7,6 +6,5 @@ const snippets = [{
 	description: "Footer below fold",
 	code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <PlaceholderHeader />\n</Page>"
 }];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -6,6 +6,5 @@ const snippets = [{
 	description: "Footer below fold",
 	code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <PlaceholderHeader />\n</Page>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/PageBlock.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		code: "<PageBlock width=\"full\">\n  <Placeholder height={100} />\n</PageBlock>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		code: "<PageBlock width=\"full\">\n  <Placeholder height={100} />\n</PageBlock>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

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

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

@@ -3,6 +3,5 @@ const snippets = [{
 	description: "Standard",
 	code: "<Pagination />"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/PasswordField.ts
 const snippets = [
 	{
@@ -26,6 +25,5 @@ const snippets = [
 		code: "<PasswordField label=\"Label\" tone=\"neutral\" message=\"Neutral message\" />"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -25,6 +25,5 @@ const snippets = [
 		code: "<PasswordField label=\"Label\" tone=\"neutral\" message=\"Neutral message\" />"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/RadioGroup.ts
 const snippets = [
 	{
@@ -30,6 +29,5 @@ const snippets = [
 		code: "<RadioGroup label=\"Label\">\n  <RadioItem label=\"One\" value=\"1\" />\n  <RadioItem label=\"Two\" value=\"2\">\n    <Placeholder height={100} />\n  </RadioItem>\n</RadioGroup>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -29,6 +29,5 @@ const snippets = [
 		code: "<RadioGroup label=\"Label\">\n  <RadioItem label=\"One\" value=\"1\" />\n  <RadioItem label=\"Two\" value=\"2\">\n    <Placeholder height={100} />\n  </RadioItem>\n</RadioGroup>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Rating.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		code: "<Rating rating={3.7} variant=\"minimal\" />"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		code: "<Rating rating={3.7} variant=\"minimal\" />"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

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

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

@@ -3,6 +3,5 @@ const snippets = [{
 	description: "Standard",
 	code: "<Secondary>Secondary</Secondary>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,10 +1,8 @@
-
 //#region src/lib/playroom/snippets/SpaciousPage.ts
 const snippets = [{
 	group: "Layouts",
 	name: "Spacious Page",
 	code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"large\">\n      <Stack space=\"large\">\n        <Heading level=\"1\">Spacious Page</Heading>\n\n        <Text size=\"large\">\n          Combines a <Strong>Heading level 1</Strong> with{\" \"}\n          <Strong>xxxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>large PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text size=\"large\">\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>large Text</Strong> and grouping with a{\" \"}\n          <Strong>large Stack</Strong>.\n        </Text>\n\n        <Text size=\"large\">\n          Use this layout for landing pages and larger form content.\n        </Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"large\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
 }];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -4,6 +4,5 @@ const snippets = [{
 	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 };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Spread.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		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>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		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>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Stack.ts
 const snippets = [
 	{
@@ -38,6 +37,5 @@ const snippets = [
 		code: "<Stack space=\"xxxlarge\">\n  <Placeholder height={100} />\n  <Placeholder height={100} />\n</Stack>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -37,6 +37,5 @@ const snippets = [
 		code: "<Stack space=\"xxxlarge\">\n  <Placeholder height={100} />\n  <Placeholder height={100} />\n</Stack>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,10 +1,8 @@
-
 //#region src/lib/playroom/snippets/StandardPage.ts
 const snippets = [{
 	group: "Layouts",
 	name: "Standard Page",
 	code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"medium\">\n      <Stack space=\"medium\">\n        <Heading level=\"2\">Standard Page</Heading>\n\n        <Text>\n          Combines a <Strong>Heading level 2</Strong> with{\" \"}\n          <Strong>xxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>medium PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text>\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>standard Text</Strong> and grouping with a{\" \"}\n          <Strong>medium Stack</Strong>.\n        </Text>\n\n        <Text>Use this layout as a starting point.</Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
 }];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -4,6 +4,5 @@ const snippets = [{
 	name: "Standard Page",
 	code: "<Page footer={<PlaceholderFooter />} footerPosition=\"belowFold\">\n  <Stack space=\"xxlarge\">\n    <PlaceholderHeader />\n\n    <PageBlock width=\"medium\">\n      <Stack space=\"medium\">\n        <Heading level=\"2\">Standard Page</Heading>\n\n        <Text>\n          Combines a <Strong>Heading level 2</Strong> with{\" \"}\n          <Strong>xxlarge Stack</Strong> spacing between sections, where each\n          section uses a <Strong>medium PageBlock</Strong> to establish content\n          max width and consistent screen gutters.\n        </Text>\n\n        <Text>\n          If providing text immediately below the Heading, consider using{\" \"}\n          <Strong>standard Text</Strong> and grouping with a{\" \"}\n          <Strong>medium Stack</Strong>.\n        </Text>\n\n        <Text>Use this layout as a starting point.</Text>\n      </Stack>\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={300} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={250} />\n    </PageBlock>\n\n    <PageBlock width=\"medium\">\n      <Placeholder label=\"Section\" height={400} />\n    </PageBlock>\n  </Stack>\n</Page>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,10 +1,8 @@
-
 //#region src/lib/playroom/snippets/StandardSection.ts
 const snippets = [{
 	group: "Sections",
 	name: "Standard Section",
 	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text tone=\"secondary\">\n        Subtitle (optional, consider using secondary tone to avoid clashing with\n        content below)\n      </Text>\n    </Stack>\n\n    <Text>\n      Combines a <Strong>Heading level 3</Strong> with a{\" \"}\n      <Strong>medium Stack</Strong> spacing content groups within the section.\n    </Text>\n\n    <Text>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n      cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n      egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed tempus\n      magna. Duis a malesuada diam.\n    </Text>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
 }];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -4,6 +4,5 @@ const snippets = [{
 	name: "Standard Section",
 	code: "<PageBlock width=\"medium\">\n  <Stack space=\"medium\">\n    <Stack space=\"small\">\n      <Heading level=\"3\">Heading</Heading>\n\n      <Text tone=\"secondary\">\n        Subtitle (optional, consider using secondary tone to avoid clashing with\n        content below)\n      </Text>\n    </Stack>\n\n    <Text>\n      Combines a <Strong>Heading level 3</Strong> with a{\" \"}\n      <Strong>medium Stack</Strong> spacing content groups within the section.\n    </Text>\n\n    <Text>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis\n      cursus quam nec volutpat. In hac habitasse platea dictumst. Praesent\n      egestas erat id mollis imperdiet. Vestibulum non commodo nisi, sed tempus\n      magna. Duis a malesuada diam.\n    </Text>\n\n    <Actions>\n      <Button>Action (optional)</Button>\n    </Actions>\n  </Stack>\n</PageBlock>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,10 +1,8 @@
-
 //#region src/lib/playroom/snippets/SteppedSection.ts
 const snippets = [{
 	group: "Sections",
 	name: "Stepped Section",
 	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </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\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\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        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
 }];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -4,6 +4,5 @@ const snippets = [{
 	name: "Stepped Section",
 	code: "<PageBlock width=\"medium\">\n  {setDefaultState(\"progress\", 1)}\n  {setDefaultState(\"activeStep\", 1)}\n  <Stack space=\"large\">\n    <Stepper\n      label=\"Stepped Block\"\n      align=\"left\"\n      progress={getState(\"progress\")}\n      activeStep={getState(\"activeStep\")}\n      onStepClick={({ stepNumber }) => setState(\"activeStep\", stepNumber)}\n    >\n      <Step>Step 1</Step>\n      <Step>Step 2</Step>\n      <Step>Step 3</Step>\n      <Step>Step 4</Step>\n    </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\n    <Spread space=\"small\">\n      <Actions>\n        {getState(\"activeStep\") > 1 && (\n          <Button\n            variant=\"soft\"\n            icon={<IconArrow direction=\"left\" />}\n            onClick={() => setState(\"activeStep\", getState(\"activeStep\") - 1)}\n          >\n            Back\n          </Button>\n        )}\n      </Actions>\n      <Actions>\n        {getState(\"activeStep\") < 4 ? (\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        ) : (\n          <Button\n            variant=\"solid\"\n            tone=\"brandAccent\"\n            icon={<IconSend />}\n            iconPosition=\"trailing\"\n          >\n            Submit\n          </Button>\n        )}\n      </Actions>\n    </Spread>\n  </Stack>\n</PageBlock>"
 }];
-
 //#endregion
-export { snippets };
+export { snippets };

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

@@ -1,4 +1,3 @@
-
 //#region src/lib/playroom/snippets/Stepper.ts
 const snippets = [
 	{
@@ -18,6 +17,5 @@ const snippets = [
 		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>"
 	}
 ];
-
 //#endregion
-exports.snippets = snippets;
+exports.snippets = snippets;

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

@@ -17,6 +17,5 @@ const snippets = [
 		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>"
 	}
 ];
-
 //#endregion
-export { snippets };
+export { snippets };