@onsvisual/svelte-components 1.0.46 → 1.0.48

package/dist/templates/StandardArticle/StandardArticle.stories.svelte

@@ -1,86 +1,86 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import componentDocs from "./docs/component.md?raw";
-	import Header from "../../layout/Header/Header.svelte";
-	import Breadcrumb from "../../layout/Breadcrumb/Breadcrumb.svelte";
-	import Hero from "../../layout/Hero/Hero.svelte";
-	import Section from "../../layout/Section/Section.svelte";
-	import Grid from "../../layout/Grid/Grid.svelte";
-	import Blockquote from "../../decorators/Blockquote/Blockquote.svelte";
-	import Footer from "../../layout/Footer/Footer.svelte";
-
-	const { Story } = defineMeta({
-		title: "Templates/Standard article",
-		component: Header,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
-	});
-</script>
-
-<Story name="Default" args={{}} asChild>
-	<Header />
-	<Breadcrumb
-		links={[
-			{ label: "Home", href: "/" },
-			{ label: "Parent", href: "/parent/" }
-		]}
-	/>
-	<Hero title="Page title" theme="grey" meta={[{ key: "Release date", value: "1 January 2025" }]}
-	></Hero>
-
-	<Section title="Section title" marginTop={true}>
-		<p>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-		</p>
-		<Blockquote attribution="A. Person"
-			>This is a blockquote, white comprises of a large block of inset text.</Blockquote
-		>
-		<p>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-		</p>
-	</Section>
-
-	<Grid width="medium" colWidth="full" caption="This is a caption text">
-		<div class="grid-cell"></div>
-	</Grid>
-
-	<Section title="Another section title">
-		<p>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-		</p>
-	</Section>
-
-	<Section title="Yet another section title">
-		<p>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-		</p>
-	</Section>
-
-	<Footer theme="dark" />
-</Story>
-
-<style>
-	.grid-cell {
-		background: var(--ons-color-grey-10);
-		min-height: 300px;
-		width: 100%;
-	}
-</style>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import componentDocs from "./docs/component.md?raw";
+	import Header from "../../layout/Header/Header.svelte";
+	import Breadcrumb from "../../layout/Breadcrumb/Breadcrumb.svelte";
+	import Hero from "../../layout/Hero/Hero.svelte";
+	import Section from "../../layout/Section/Section.svelte";
+	import Grid from "../../layout/Grid/Grid.svelte";
+	import Blockquote from "../../decorators/Blockquote/Blockquote.svelte";
+	import Footer from "../../layout/Footer/Footer.svelte";
+
+	const { Story } = defineMeta({
+		title: "Templates/Standard article",
+		component: Header,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} asChild>
+	<Header />
+	<Breadcrumb
+		links={[
+			{ label: "Home", href: "/" },
+			{ label: "Parent", href: "/parent/" }
+		]}
+	/>
+	<Hero title="Page title" theme="grey" meta={[{ key: "Release date", value: "1 January 2025" }]}
+	></Hero>
+
+	<Section title="Section title" marginTop={true}>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+		<Blockquote attribution="A. Person"
+			>This is a blockquote, white comprises of a large block of inset text.</Blockquote
+		>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Grid width="medium" colWidth="full" caption="This is a caption text">
+		<div class="grid-cell"></div>
+	</Grid>
+
+	<Section title="Another section title">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Section title="Yet another section title">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Footer theme="dark" />
+</Story>
+
+<style>
+	.grid-cell {
+		background: var(--ons-color-grey-10);
+		min-height: 300px;
+		width: 100%;
+	}
+</style>

package/dist/templates/StandardArticle/docs/component.md

@@ -1,76 +1,76 @@
-A full page article template with compact header and footer, suitable for standard articles.
-
-An implementation of this template can be found in our [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project.
-
-<!-- prettier-ignore -->
-```html
-<!-- +page.svelte -->
-<script>
-  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
-  import {
-    Header,
-    Breadcrumb,
-    Hero,
-    Section,
-    Grid,
-    Blockquote,
-    Footer,
-  } from "@onsvisual/svelte-components";
-</script>
-
-<Header />
-<Breadcrumb
-  links={[
-    { label: "Home", href: "/" },
-    { label: "Parent", href: "/parent/" }
-  ]}
-/>
-<Hero title="Page title" theme="grey" meta={[{ key: "Release date", value: "1 January 2025" }]}
-></Hero>
-
-<Section title="Section title" marginTop={true}>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-  <Blockquote attribution="A. Person"
-    >This is a blockquote, white comprises of a large block of inset text.</Blockquote
-  >
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</Section>
-
-<Grid width="medium" colWidth="full" caption="This is a caption text">
-  <div class="grid-cell"></div>
-</Grid>
-
-<Section title="Another section title">
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</Section>
-
-<Section title="Yet another section title">
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</Section>
-
-<Footer theme="dark" />
-```
+A full page article template with compact header and footer, suitable for standard articles.
+
+An implementation of this template can be found in our [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project.
+
+<!-- prettier-ignore -->
+```html
+<!-- +page.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
+  import {
+    Header,
+    Breadcrumb,
+    Hero,
+    Section,
+    Grid,
+    Blockquote,
+    Footer,
+  } from "@onsvisual/svelte-components";
+</script>
+
+<Header />
+<Breadcrumb
+  links={[
+    { label: "Home", href: "/" },
+    { label: "Parent", href: "/parent/" }
+  ]}
+/>
+<Hero title="Page title" theme="grey" meta={[{ key: "Release date", value: "1 January 2025" }]}
+></Hero>
+
+<Section title="Section title" marginTop={true}>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <Blockquote attribution="A. Person"
+    >This is a blockquote, white comprises of a large block of inset text.</Blockquote
+  >
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Grid width="medium" colWidth="full" caption="This is a caption text">
+  <div class="grid-cell"></div>
+</Grid>
+
+<Section title="Another section title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Section title="Yet another section title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Footer theme="dark" />
+```

package/dist/templates/intro.mdx

@@ -1,19 +1,19 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="Templates/Using templates" />
-
-# Using templates
-
-This section includes a series of starter templates constructed from multiple components within this library. Similar templates to these examples are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically the easiest way to use them.
-
-When using these templates in an existing SvelteKit project (or one built from scratch), you will need to include the **main.css** file from this library, which is best imported to your top-level `+layout.svelte` file in Svelte Kit. By doing this, you will not need to include it on individual pages.
-
-{/* prettier-ignore */}
-```html
-<!-- /src/routes/+layout.svelte -->
-<script>
-  import "@onsvisual/svelte-components/css/main.css";
-</script>
-
-<slot />
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Templates/Using templates" />
+
+# Using templates
+
+This section includes a series of starter templates constructed from multiple components within this library. Similar templates to these examples are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically the easiest way to use them.
+
+When using these templates in an existing SvelteKit project (or one built from scratch), you will need to include the **main.css** file from this library, which is best imported to your top-level `+layout.svelte` file in Svelte Kit. By doing this, you will not need to include it on individual pages.
+
+{/* prettier-ignore */}
+```html
+<!-- /src/routes/+layout.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css";
+</script>
+
+<slot />
 ```

package/dist/wrappers/Container/Container.stories.svelte

@@ -1,38 +1,38 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Container from "./Container.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Wrappers/Container",
-		component: Container,
-		tags: ["autodocs"],
-		argTypes: {
-			width: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Container {...args}>
-		<div style:padding="24px 12px" style:background="var(--ons-color-grey-10)">
-			<p style:margin="0">Contents of container.</p>
-		</div>
-	</Container>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<Story name="Narrow" args={{ width: "narrow" }} {template} />
-
-<Story name="Medium" args={{ width: "medium" }} {template} />
-
-<Story name="Wide" args={{ width: "wide" }} {template} />
-
-<Story name="Wider" args={{ width: "wider" }} {template} />
-
-<Story name="Full" args={{ width: "full" }} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Container from "./Container.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Container",
+		component: Container,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Container {...args}>
+		<div style:padding="24px 12px" style:background="var(--ons-color-grey-10)">
+			<p style:margin="0">Contents of container.</p>
+		</div>
+	</Container>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Narrow" args={{ width: "narrow" }} {template} />
+
+<Story name="Medium" args={{ width: "medium" }} {template} />
+
+<Story name="Wide" args={{ width: "wide" }} {template} />
+
+<Story name="Wider" args={{ width: "wider" }} {template} />
+
+<Story name="Full" args={{ width: "full" }} {template} />

package/dist/wrappers/Container/Container.svelte

@@ -1,77 +1,77 @@
-<script>
-	import Theme from "../Theme/Theme.svelte";
-
-	/**
-	 * Optional: Set the unique ID of the container
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Optional: Set an additional CSS class for the container
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * Sets the width of the container
-	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-	 */
-	export let width = "wide";
-	/**
-	 * Sets the height of the container
-	 * @type {number|string|null}
-	 */
-	export let height = null;
-	/**
-	 * Adds margin above container
-	 * @type {boolean}
-	 */
-	export let marginTop = false;
-	/**
-	 * Adds margin below container
-	 * @type {boolean}
-	 */
-	export let marginBottom = false;
-	/**
-	 * Optional: Sets a base theme ("light", "dark" or null for no theme)
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
-	 */
-	export let theme = null;
-	/**
-	 * Optional: Define additional props to override the base theme
-	 * @type {object}
-	 */
-	export let themeOverrides = {};
-	/**
-	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
-	 * @type {string|null}
-	 */
-	export let background = null;
-</script>
-
-<Theme {theme} overrides={themeOverrides} {background}>
-	<div
-		{id}
-		class="ons-page__container {cls || ''}"
-		class:ons-container={width !== "full"}
-		class:ons-container--wide={width === "wider"}
-		class:ons-u-mt-xl={marginTop}
-		class:ons-u-mb-xl={marginBottom}
-		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
-	>
-		{#if width === "narrow"}
-			<div class="ons-grid">
-				<div class="ons-grid__col ons-col-10@m ons-col-8@l">
-					<slot />
-				</div>
-			</div>
-		{:else if width === "medium"}
-			<div class="ons-grid">
-				<div class="ons-grid__col ons-col-10@l">
-					<slot />
-				</div>
-			</div>
-		{:else}
-			<slot />
-		{/if}
-	</div>
-</Theme>
+<script>
+	import Theme from "../Theme/Theme.svelte";
+
+	/**
+	 * Optional: Set the unique ID of the container
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Optional: Set an additional CSS class for the container
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Sets the height of the container
+	 * @type {number|string|null}
+	 */
+	export let height = null;
+	/**
+	 * Adds margin above container
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Adds margin below container
+	 * @type {boolean}
+	 */
+	export let marginBottom = false;
+	/**
+	 * Optional: Sets a base theme ("light", "dark" or null for no theme)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Optional: Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
+</script>
+
+<Theme {theme} overrides={themeOverrides} {background}>
+	<div
+		{id}
+		class="ons-page__container {cls || ''}"
+		class:ons-container={width !== "full"}
+		class:ons-container--wide={width === "wider"}
+		class:ons-u-mt-xl={marginTop}
+		class:ons-u-mb-xl={marginBottom}
+		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+	>
+		{#if width === "narrow"}
+			<div class="ons-grid">
+				<div class="ons-grid__col ons-col-10@m ons-col-8@l">
+					<slot />
+				</div>
+			</div>
+		{:else if width === "medium"}
+			<div class="ons-grid">
+				<div class="ons-grid__col ons-col-10@l">
+					<slot />
+				</div>
+			</div>
+		{:else}
+			<slot />
+		{/if}
+	</div>
+</Theme>

package/dist/wrappers/Container/docs/component.md

@@ -1,12 +1,12 @@
-A container to set the width and minimum height of a block of content.
-
-Note that the this component includes the `<Theme>` component internally, allowing colour themes to be applied directly without adding an additional wrapper around it.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Container } from "@onsvisual/svelte-components";
-</script>
-
-<Container width="{narrow|medium|wide|wider|full}" theme="light">{child_components}</Container>
-```
+A container to set the width and minimum height of a block of content.
+
+Note that the this component includes the `<Theme>` component internally, allowing colour themes to be applied directly without adding an additional wrapper around it.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Container } from "@onsvisual/svelte-components";
+</script>
+
+<Container width="{narrow|medium|wide|wider|full}" theme="light">{child_components}</Container>
+```