@abgov/react-components 4.0.0-alpha.141 → 4.0.0-alpha.143

package/react-components.umd.js

@@ -1168,7 +1168,7 @@
 	/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$P(ctx) {
+	function create_fragment$Q(ctx) {
 	  let div3;
 	  let details;
 	  let summary;
@@ -1371,7 +1371,7 @@
 	  };
 	}
 
-	function instance$J($$self, $$props, $$invalidate) {
+	function instance$K($$self, $$props, $$invalidate) {
 	  let isOpen;
 	  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
 	  let {
@@ -1449,7 +1449,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$J, create_fragment$P, safe_not_equal, {
+	    }, instance$K, create_fragment$Q, safe_not_equal, {
 	      open: 10,
 	      heading: 0,
 	      secondarytext: 1,
@@ -1705,7 +1705,7 @@
 	  };
 	}
 
-	function create_fragment$O(ctx) {
+	function create_fragment$P(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1789,7 +1789,7 @@
 	  };
 	}
 
-	function instance$I($$self, $$props, $$invalidate) {
+	function instance$J($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1821,7 +1821,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$I, create_fragment$O, safe_not_equal, {
+	    }, instance$J, create_fragment$P, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1981,7 +1981,7 @@
 	  };
 	}
 
-	function create_fragment$N(ctx) {
+	function create_fragment$O(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -2117,7 +2117,7 @@
 	  };
 	}
 
-	function instance$H($$self, $$props, $$invalidate) {
+	function instance$I($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2197,7 +2197,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$H, create_fragment$N, safe_not_equal, {
+	    }, instance$I, create_fragment$O, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      content: 2,
@@ -2317,7 +2317,7 @@
 	customElements.define("goa-badge", Badge);
 	/* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$M(ctx) {
+	function create_fragment$N(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -2391,7 +2391,7 @@
 	  };
 	}
 
-	function instance$G($$self, $$props, $$invalidate) {
+	function instance$H($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -2435,7 +2435,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$G, create_fragment$M, safe_not_equal, {
+	    }, instance$H, create_fragment$N, safe_not_equal, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2741,7 +2741,7 @@
 	  };
 	}
 
-	function create_fragment$L(ctx) {
+	function create_fragment$M(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2895,7 +2895,7 @@
 	  };
 	}
 
-	function instance$F($$self, $$props, $$invalidate) {
+	function instance$G($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2990,7 +2990,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$F, create_fragment$L, safe_not_equal, {
+	    }, instance$G, create_fragment$M, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -3146,7 +3146,7 @@
 	customElements.define("goa-button", Button);
 	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$K(ctx) {
+	function create_fragment$L(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3216,7 +3216,7 @@
 	  };
 	}
 
-	function instance$E($$self, $$props, $$invalidate) {
+	function instance$F($$self, $$props, $$invalidate) {
 	  let _alignment;
 
 	  let {
@@ -3280,7 +3280,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$E, create_fragment$K, safe_not_equal, {
+	    }, instance$F, create_fragment$L, safe_not_equal, {
 	      alignment: 7,
 	      gap: 0,
 	      testid: 1,
@@ -3419,7 +3419,7 @@
 	  };
 	}
 
-	function create_fragment$J(ctx) {
+	function create_fragment$K(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -3554,7 +3554,7 @@
 	  };
 	}
 
-	function instance$D($$self, $$props, $$invalidate) {
+	function instance$E($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	  let {
@@ -3611,7 +3611,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$D, create_fragment$J, safe_not_equal, {
+	    }, instance$E, create_fragment$K, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -3719,7 +3719,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$I(ctx) {
+	function create_fragment$J(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -3750,7 +3750,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$I, safe_not_equal, {}, null);
+	    }, null, create_fragment$J, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3764,7 +3764,7 @@
 	customElements.define("goa-card-actions", CardActions);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$H(ctx) {
+	function create_fragment$I(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3843,7 +3843,7 @@
 	  };
 	}
 
-	function instance$C($$self, $$props, $$invalidate) {
+	function instance$D($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3891,7 +3891,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$C, create_fragment$H, safe_not_equal, {
+	    }, instance$D, create_fragment$I, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      height: 2,
@@ -4011,7 +4011,7 @@
 	customElements.define("goa-card", Card);
 	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$G(ctx) {
+	function create_fragment$H(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4044,7 +4044,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$G, safe_not_equal, {}, null);
+	    }, null, create_fragment$H, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4058,7 +4058,7 @@
 	customElements.define("goa-card-content", CardContent);
 	/* libs/web-components/src/components/card-group/CardGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$F(ctx) {
+	function create_fragment$G(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4091,7 +4091,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$F, safe_not_equal, {}, null);
+	    }, null, create_fragment$G, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4105,7 +4105,7 @@
 	customElements.define("goa-card-group", CardGroup);
 	/* libs/web-components/src/components/card-image/CardImage.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$E(ctx) {
+	function create_fragment$F(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4153,7 +4153,7 @@
 	  };
 	}
 
-	function instance$B($$self, $$props, $$invalidate) {
+	function instance$C($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -4177,7 +4177,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$B, create_fragment$E, safe_not_equal, {
+	    }, instance$C, create_fragment$F, safe_not_equal, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -4279,7 +4279,7 @@
 	  };
 	}
 
-	function create_fragment$D(ctx) {
+	function create_fragment$E(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -4528,7 +4528,7 @@
 	  };
 	}
 
-	function instance$A($$self, $$props, $$invalidate) {
+	function instance$B($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4643,7 +4643,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$A, create_fragment$D, safe_not_equal, {
+	    }, instance$B, create_fragment$E, safe_not_equal, {
 	      name: 0,
 	      checked: 14,
 	      text: 1,
@@ -4901,7 +4901,7 @@
 	  };
 	}
 
-	function create_fragment$C(ctx) {
+	function create_fragment$D(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -5083,7 +5083,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -5184,7 +5184,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$z, create_fragment$C, safe_not_equal, {
+	    }, instance$A, create_fragment$D, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -5809,7 +5809,7 @@
 	  };
 	}
 
-	function create_fragment$B(ctx) {
+	function create_fragment$C(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -5874,7 +5874,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5932,7 +5932,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$B, safe_not_equal, {
+	    }, instance$z, create_fragment$C, safe_not_equal, {
 	      variant: 6,
 	      size: 7,
 	      message: 0,
@@ -6016,7 +6016,7 @@
 	customElements.define("goa-circular-progress", CircularProgress);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$A(ctx) {
+	function create_fragment$B(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -6141,7 +6141,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Container type", ["interactive", "info", "error", "success", "important", "non-interactive"]);
 	  const [Accents, validateAccent] = typeValidator("Container accent", ["thick", "thin", "filled"]);
 	  const [Paddings, validatePadding] = typeValidator("Container padding", ["relaxed", "compact"]);
@@ -6197,7 +6197,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$A, safe_not_equal, {
+	    }, instance$y, create_fragment$B, safe_not_equal, {
 	      type: 0,
 	      accent: 1,
 	      padding: 2,
@@ -6317,7 +6317,7 @@
 	customElements.define("goa-container", Container);
 	/* libs/web-components/src/components/details/Details.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$z(ctx) {
+	function create_fragment$A(ctx) {
 	  let details;
 	  let summary;
 	  let goa_icon;
@@ -6417,7 +6417,7 @@
 	  };
 	}
 
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -6477,7 +6477,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$z, safe_not_equal, {
+	    }, instance$x, create_fragment$A, safe_not_equal, {
 	      heading: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6561,7 +6561,7 @@
 	customElements.define("goa-details", Details);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$y(ctx) {
+	function create_fragment$z(ctx) {
 	  let hr;
 	  let hr_style_value;
 	  return {
@@ -6620,7 +6620,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -6656,7 +6656,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$y, safe_not_equal, {
+	    }, instance$w, create_fragment$z, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -7471,7 +7471,7 @@
 	  };
 	}
 
-	function create_fragment$x(ctx) {
+	function create_fragment$y(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -7602,7 +7602,7 @@
 	  return rawValues.map(val => `${val}`);
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
 	      return;
@@ -8001,7 +8001,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$x, safe_not_equal, {
+	    }, instance$v, create_fragment$y, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
 	      value: 29,
@@ -8205,7 +8205,7 @@
 	customElements.define("goa-dropdown", Dropdown);
 	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$w(ctx) {
+	function create_fragment$x(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -8226,7 +8226,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$w, safe_not_equal, {}, null);
+	    }, null, create_fragment$x, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8240,7 +8240,7 @@
 	customElements.define("goa-dropdown-item", DropdownItem);
 	/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$v(ctx) {
+	function create_fragment$w(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -8300,7 +8300,7 @@
 	  }
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$u($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -8469,7 +8469,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$t, create_fragment$v, safe_not_equal, {
+	    }, instance$u, create_fragment$w, safe_not_equal, {
 	      active: 1
 	    }, null);
 
@@ -8524,7 +8524,7 @@
 	  };
 	}
 
-	function create_fragment$u(ctx) {
+	function create_fragment$v(ctx) {
 	  let div5;
 	  let div4;
 	  let div0;
@@ -8667,7 +8667,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let {
 	    maxcontentwidth = ""
 	  } = $$props;
@@ -8706,7 +8706,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$u, safe_not_equal, {
+	    }, instance$t, create_fragment$v, safe_not_equal, {
 	      maxcontentwidth: 0
 	    }, null);
 
@@ -8796,7 +8796,7 @@
 	  };
 	}
 
-	function create_fragment$t(ctx) {
+	function create_fragment$u(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -8884,7 +8884,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -8919,7 +8919,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$t, safe_not_equal, {}, null);
+	    }, instance$s, create_fragment$u, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -9029,7 +9029,7 @@
 	  };
 	}
 
-	function create_fragment$s(ctx) {
+	function create_fragment$t(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -9176,7 +9176,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -9228,7 +9228,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$s, safe_not_equal, {
+	    }, instance$r, create_fragment$t, safe_not_equal, {
 	      heading: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -9458,7 +9458,7 @@
 	  };
 	}
 
-	function create_fragment$r(ctx) {
+	function create_fragment$s(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -9595,7 +9595,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	  let {
 	    testid = ""
@@ -9651,7 +9651,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$r, safe_not_equal, {
+	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9783,7 +9783,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$q(ctx) {
+	function create_fragment$r(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -9851,7 +9851,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9896,7 +9896,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$q, safe_not_equal, {
+	    }, instance$p, create_fragment$r, safe_not_equal, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9992,7 +9992,7 @@
 	customElements.define("goa-grid", Grid);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$p(ctx) {
+	function create_fragment$q(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -10077,7 +10077,7 @@
 	  };
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -10105,7 +10105,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$p, safe_not_equal, {
+	    }, instance$o, create_fragment$q, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1,
 	      minheight: 2
@@ -10165,7 +10165,7 @@
 	customElements.define("goa-hero-banner", HeroBanner);
 	/* libs/web-components/src/components/icon-button/IconButton.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$o(ctx) {
+	function create_fragment$p(ctx) {
 	  let button;
 	  let goa_icon;
 	  let button_style_value;
@@ -10337,7 +10337,7 @@
 	  }));
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -10442,7 +10442,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$m, create_fragment$o, safe_not_equal, {
+	    }, instance$n, create_fragment$p, safe_not_equal, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -10747,7 +10747,7 @@
 	  };
 	}
 
-	function create_fragment$n(ctx) {
+	function create_fragment$o(ctx) {
 	  let div;
 	  let div_class_value;
 	  let div_style_value;
@@ -10883,7 +10883,7 @@
 	  };
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  let isInverted;
 	  let {
 	    mt = null
@@ -10976,7 +10976,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$l, create_fragment$n, safe_not_equal, {
+	    }, instance$m, create_fragment$o, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -11345,7 +11345,7 @@
 	  };
 	}
 
-	function create_fragment$m(ctx) {
+	function create_fragment$n(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -11826,7 +11826,7 @@
 	  }));
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -12070,7 +12070,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -12407,35 +12407,25 @@
 	/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_3$5(ctx) {
-	  let div0;
-	  let t0;
-	  let div1;
+	  let div;
 	  return {
 	    c() {
-	      div0 = element("div");
-	      div0.innerHTML = `<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26Z" fill="#00AAD2"></path><path d="M16.9764 17.7174C15.942 17.3358 14.9325 16.8896 13.9539 16.3817C14.8446 16.0551 15.7131 15.6708 16.5539 15.2312C16.6398 16.0688 16.7831 16.8995 16.9829 17.7174H16.9764ZM22.5339 7.42143C22.1016 7.36618 22.3259 7.56931 22.2089 8.13968C21.863 9.3075 21.2806 10.3917 20.4978 11.3248C19.7151 12.258 18.7487 13.0201 17.6589 13.5639C17.3972 10.9368 17.5336 8.28529 18.0635 5.69893C18.5104 4.07393 19.0385 4.3778 18.3885 4.03818C17.6946 3.68068 16.9471 4.15356 16.3443 5.35931C14.4174 9.81946 11.7695 13.932 8.50689 17.5322C7.96404 18.2422 7.16875 18.7161 6.28592 18.8556C5.40309 18.9951 4.50044 18.7894 3.76514 18.2813C3.43039 17.9986 3.30689 18.4357 3.72289 18.8826C4.47366 19.5882 5.47211 19.9699 6.50216 19.945C7.53222 19.92 8.51102 19.4905 9.22677 18.7493C12.0405 15.3939 14.429 11.7038 16.3378 7.76268C16.1901 9.91268 16.2243 12.0713 16.4401 14.2156C15.4158 14.7181 14.3475 15.1256 13.2486 15.4327C12.6181 15.5952 12.2281 15.8552 12.2168 16.1461C12.2054 16.4711 12.6279 16.7359 13.2405 17.0252C14.3293 17.5419 17.5191 19.0499 18.3056 19.5066C18.9784 19.8966 19.3066 19.5927 19.5065 19.1702C19.7665 18.6209 19.0531 18.3041 18.369 18.0961C18.0632 16.9353 17.8555 15.7508 17.7483 14.5552C19.4404 13.5939 20.8636 12.2226 21.8871 10.5674C22.1817 9.98406 22.4001 9.36529 22.5371 8.7263C22.6338 8.3321 22.6602 7.92393 22.6151 7.52056C22.6151 7.52056 22.6038 7.43281 22.5371 7.42468" fill="white"></path></svg>`;
-	      t0 = space();
-	      div1 = element("div");
-	      div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
-	      attr(div0, "class", "service-type service-type--live");
-	      attr(div1, "data-testid", "type");
-	      attr(div1, "class", "site-text");
+	      div = element("div");
+	      div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
+	      attr(div, "data-testid", "type");
+	      attr(div, "class", "site-text");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div0, anchor);
-	      insert(target, t0, anchor);
-	      insert(target, div1, anchor);
+	      insert(target, div, anchor);
 	    },
 
 	    d(detaching) {
-	      if (detaching) detach(div0);
-	      if (detaching) detach(t0);
-	      if (detaching) detach(div1);
+	      if (detaching) detach(div);
 	    }
 
 	  };
-	} // (41:2) {#if ["alpha", "beta"].includes(type)}
+	} // (29:2) {#if ["alpha", "beta"].includes(type)}
 
 
 	function create_if_block_1$5(ctx) {
@@ -12523,7 +12513,7 @@
 	    }
 
 	  };
-	} // (50:6) {#if feedbackurl}
+	} // (38:6) {#if feedbackurl}
 
 
 	function create_if_block_2$5(ctx) {
@@ -12565,7 +12555,7 @@
 	    }
 
 	  };
-	} // (56:2) {#if version}
+	} // (44:2) {#if version}
 
 
 	function create_if_block$b(ctx) {
@@ -12601,7 +12591,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$m(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -12710,7 +12700,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	  let {
 	    type
@@ -12737,12 +12727,12 @@
 	class MicrositeHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {
+	    }, instance$k, create_fragment$m, safe_not_equal, {
 	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -13231,7 +13221,7 @@
 	  };
 	}
 
-	function create_fragment$k(ctx) {
+	function create_fragment$l(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -13296,7 +13286,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let _isClosable;
 
 	  let _transitionTime;
@@ -13500,7 +13490,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
+	    }, instance$j, create_fragment$l, safe_not_equal, {
 	      heading: 0,
 	      closable: 14,
 	      open: 1,
@@ -13720,7 +13710,7 @@
 	  };
 	}
 
-	function create_fragment$j(ctx) {
+	function create_fragment$k(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
@@ -13785,7 +13775,7 @@
 	  };
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	  let {
@@ -13827,7 +13817,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -13869,7 +13859,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$i(ctx) {
+	function create_fragment$j(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -13909,7 +13899,7 @@
 	  };
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -13950,7 +13940,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -14168,7 +14158,7 @@
 	  };
 	}
 
-	function create_fragment$h(ctx) {
+	function create_fragment$i(ctx) {
 	  let goa_block1;
 	  let div;
 	  let t0;
@@ -14331,7 +14321,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  let _pageCount;
 
 	  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14451,7 +14441,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      pagenumber: 0,
 	      itemcount: 10,
 	      perpagecount: 11,
@@ -14655,7 +14645,7 @@
 	  };
 	}
 
-	function create_fragment$g(ctx) {
+	function create_fragment$h(ctx) {
 	  let div1;
 	  let div0;
 	  let t;
@@ -14738,7 +14728,7 @@
 	  };
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let paddedContent;
 	  let {
 	    testid = ""
@@ -14832,7 +14822,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      testid: 0,
 	      maxwidth: 1,
 	      padded: 7
@@ -15082,7 +15072,7 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$g(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -15205,7 +15195,7 @@
 	  };
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -15349,7 +15339,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$d, create_fragment$f, safe_not_equal, {
+	    }, instance$e, create_fragment$g, safe_not_equal, {
 	      name: 1,
 	      value: 0,
 	      orientation: 2,
@@ -15505,7 +15495,7 @@
 	customElements.define("goa-radio-group", RadioGroup);
 	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$e(ctx) {
+	function create_fragment$f(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -15590,7 +15580,7 @@
 	  };
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -15656,7 +15646,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$c, create_fragment$e, safe_not_equal, {
+	    }, instance$d, create_fragment$f, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -16336,7 +16326,7 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$e(ctx) {
 	  let div;
 	  let current_block_type_index;
 	  let if_block;
@@ -16455,7 +16445,7 @@
 	  };
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "lines", "profile", "article"], true);
 	  const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
 	  let {
@@ -16513,7 +16503,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$b, create_fragment$d, safe_not_equal, {
+	    }, instance$c, create_fragment$e, safe_not_equal, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -16645,7 +16635,7 @@
 	customElements.define("goa-skeleton", Skeleton);
 	/* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$c(ctx) {
+	function create_fragment$d(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -16674,7 +16664,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -16712,7 +16702,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$a, create_fragment$c, safe_not_equal, {
+	    }, instance$b, create_fragment$d, safe_not_equal, {
 	      hspacing: 1,
 	      vspacing: 2
 	    }, null);
@@ -17134,7 +17124,7 @@
 	  };
 	}
 
-	function create_fragment$b(ctx) {
+	function create_fragment$c(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
@@ -17179,7 +17169,7 @@
 	  };
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -17310,7 +17300,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$9, create_fragment$b, safe_not_equal, {
+	    }, instance$a, create_fragment$c, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -17382,7 +17372,7 @@
 	customElements.define("goa-spinner", Spinner);
 	/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$a(ctx) {
+	function create_fragment$b(ctx) {
 	  let table;
 	  let slot;
 	  let t0;
@@ -17484,7 +17474,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$9($$self, $$props, $$invalidate) {
 	  const attachSortEventHandling = function attachSortEventHandling() {
 	    return _call(tick, function () {
 	      const headings = _rootEl.querySelectorAll("goa-table-sort-header");
@@ -17598,7 +17588,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$8, create_fragment$a, safe_not_equal, {
+	    }, instance$9, create_fragment$b, safe_not_equal, {
 	      width: 0,
 	      stickyheader: 8,
 	      variant: 1,
@@ -17774,7 +17764,7 @@
 	  };
 	}
 
-	function create_fragment$9(ctx) {
+	function create_fragment$a(ctx) {
 	  let button;
 	  let slot;
 	  let t;
@@ -17829,7 +17819,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "none"
 	  } = $$props;
@@ -17849,7 +17839,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$7, create_fragment$9, safe_not_equal, {
+	    }, instance$8, create_fragment$a, safe_not_equal, {
 	      direction: 0
 	    }, null);
 
@@ -17885,7 +17875,7 @@
 	customElements.define("goa-table-sort-header", TableSortHeader);
 	/* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$8(ctx) {
+	function create_fragment$9(ctx) {
 	  let div;
 	  let textarea;
 	  let textarea_aria_label_value;
@@ -18066,7 +18056,7 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let isError;
 	  let isDisabled;
 	  let isReadonly;
@@ -18183,7 +18173,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$6, create_fragment$8, safe_not_equal, {
+	    }, instance$7, create_fragment$9, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      placeholder: 2,
@@ -18387,7 +18377,7 @@
 	customElements.define("goa-textarea", TextArea);
 	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$7(ctx) {
+	function create_fragment$8(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -18431,7 +18421,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$7, safe_not_equal, {}, null);
+	    }, null, create_fragment$8, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -18445,7 +18435,7 @@
 	customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
 	/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$6(ctx) {
+	function create_fragment$7(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -18482,7 +18472,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$6, safe_not_equal, {}, null);
+	    }, null, create_fragment$7, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -18496,7 +18486,7 @@
 	customElements.define("goa-one-column-layout", OneColumnLayout);
 	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$5(ctx) {
+	function create_fragment$6(ctx) {
 	  let div;
 	  let header;
 	  let t0;
@@ -18566,7 +18556,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  let {
 	    navcolumnwidth = ""
 	  } = $$props;
@@ -18590,7 +18580,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$5, safe_not_equal, {
+	    }, instance$6, create_fragment$6, safe_not_equal, {
 	      navcolumnwidth: 0,
 	      maxcontentwidth: 1
 	    }, null);
@@ -18636,6 +18626,172 @@
 	}
 
 	customElements.define("goa-two-column-layout", TwoColumnLayout);
+	/* libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte generated by Svelte v3.51.0 */
+
+	function create_fragment$5(ctx) {
+	  let div;
+	  let header;
+	  let t0;
+	  let section;
+	  let t3;
+	  let footer;
+	  let div_style_value;
+	  return {
+	    c() {
+	      div = element("div");
+	      header = element("header");
+	      header.innerHTML = `<slot name="header"></slot>`;
+	      t0 = space();
+	      section = element("section");
+	      section.innerHTML = `<nav class="nav"><slot name="nav"></slot></nav> 
+
+    <main><slot></slot></main> 
+
+    <nav class="nav sidebar"><slot name="sidebar"></slot></nav>`;
+	      t3 = space();
+	      footer = element("footer");
+	      footer.innerHTML = `<slot name="footer"></slot>`;
+	      this.c = noop;
+	      attr(header, "class", "header");
+	      attr(section, "class", "content");
+	      attr(footer, "class", "footer");
+	      attr(div, "class", "page");
+	      attr(div, "style", div_style_value = `
+    --max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[2] || "100%"};
+    --nav-column-width: ${
+      /*leftcolumnwidth*/
+      ctx[0] || "256px"};
+    --sidebar-column-width: ${
+      /*rightcolumnwidth*/
+      ctx[1] || "256px"}
+  `);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, header);
+	      append(div, t0);
+	      append(div, section);
+	      append(div, t3);
+	      append(div, footer);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*maxcontentwidth, leftcolumnwidth, rightcolumnwidth*/
+	      7 && div_style_value !== (div_style_value = `
+    --max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[2] || "100%"};
+    --nav-column-width: ${
+      /*leftcolumnwidth*/
+      ctx[0] || "256px"};
+    --sidebar-column-width: ${
+      /*rightcolumnwidth*/
+      ctx[1] || "256px"}
+  `)) {
+	        attr(div, "style", div_style_value);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	function instance$5($$self, $$props, $$invalidate) {
+	  let {
+	    leftcolumnwidth
+	  } = $$props;
+	  let {
+	    rightcolumnwidth
+	  } = $$props;
+	  let {
+	    maxcontentwidth
+	  } = $$props;
+
+	  $$self.$$set = $$props => {
+	    if ('leftcolumnwidth' in $$props) $$invalidate(0, leftcolumnwidth = $$props.leftcolumnwidth);
+	    if ('rightcolumnwidth' in $$props) $$invalidate(1, rightcolumnwidth = $$props.rightcolumnwidth);
+	    if ('maxcontentwidth' in $$props) $$invalidate(2, maxcontentwidth = $$props.maxcontentwidth);
+	  };
+
+	  return [leftcolumnwidth, rightcolumnwidth, maxcontentwidth];
+	}
+
+	class ThreeColumnLayout extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--goa-color-greyscale-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem;transform:translateX(0)}.nav:not(.sidebar){flex:0 0 var(--nav-column-width)}.nav.sidebar{flex:0 0 var(--sidebar-column-width)}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$5, create_fragment$5, safe_not_equal, {
+	      leftcolumnwidth: 0,
+	      rightcolumnwidth: 1,
+	      maxcontentwidth: 2
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["leftcolumnwidth", "rightcolumnwidth", "maxcontentwidth"];
+	  }
+
+	  get leftcolumnwidth() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set leftcolumnwidth(leftcolumnwidth) {
+	    this.$$set({
+	      leftcolumnwidth
+	    });
+	    flush();
+	  }
+
+	  get rightcolumnwidth() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set rightcolumnwidth(rightcolumnwidth) {
+	    this.$$set({
+	      rightcolumnwidth
+	    });
+	    flush();
+	  }
+
+	  get maxcontentwidth() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set maxcontentwidth(maxcontentwidth) {
+	    this.$$set({
+	      maxcontentwidth
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-three-column-layout", ThreeColumnLayout);
 	/* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$3(ctx) {
@@ -22920,6 +23076,32 @@
 	  }), void 0);
 	}
 
+	function GoAThreeColumnLayout(props) {
+	  return jsxRuntime.jsxs("goa-three-column-layout", __assign({
+	    leftcolumnwidth: props.leftColumnWidth,
+	    rightcolumnwidth: props.rightColumnWidth,
+	    maxcontentwidth: props.maxContentWidth
+	  }, {
+	    children: [props.header && jsxRuntime.jsx("div", __assign({
+	      slot: "header"
+	    }, {
+	      children: props.header
+	    }), void 0), props.nav && jsxRuntime.jsx("div", __assign({
+	      slot: "nav"
+	    }, {
+	      children: props.nav
+	    }), void 0), props.sidebar && jsxRuntime.jsx("div", __assign({
+	      slot: "sidebar"
+	    }, {
+	      children: props.sidebar
+	    }), void 0), props.children, props.footer && jsxRuntime.jsx("div", __assign({
+	      slot: "footer"
+	    }, {
+	      children: props.footer
+	    }), void 0)]
+	  }), void 0);
+	}
+
 	exports.GoAAccordion = GoAAccordion;
 	exports.GoAAppFooter = GoAAppFooter;
 	exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
@@ -22982,6 +23164,7 @@
 	exports.GoASuccessBadge = GoASuccessBadge;
 	exports.GoATable = GoATable;
 	exports.GoATextArea = GoATextArea;
+	exports.GoAThreeColumnLayout = GoAThreeColumnLayout;
 	exports.GoATwoColumnLayout = GoATwoColumnLayout;
 
 	Object.defineProperty(exports, '__esModule', { value: true });