@abgov/react-components 4.0.0-alpha.117 → 4.0.0-alpha.118

package/react-components.umd.js

@@ -251,6 +251,50 @@
 	  return e;
 	}
 
+	class HtmlTag {
+	  constructor(is_svg = false) {
+	    this.is_svg = false;
+	    this.is_svg = is_svg;
+	    this.e = this.n = null;
+	  }
+
+	  c(html) {
+	    this.h(html);
+	  }
+
+	  m(html, target, anchor = null) {
+	    if (!this.e) {
+	      if (this.is_svg) this.e = svg_element(target.nodeName);else this.e = element(target.nodeName);
+	      this.t = target;
+	      this.c(html);
+	    }
+
+	    this.i(anchor);
+	  }
+
+	  h(html) {
+	    this.e.innerHTML = html;
+	    this.n = Array.from(this.e.childNodes);
+	  }
+
+	  i(anchor) {
+	    for (let i = 0; i < this.n.length; i += 1) {
+	      insert(this.t, this.n[i], anchor);
+	    }
+	  }
+
+	  p(html) {
+	    this.d();
+	    this.h(html);
+	    this.i(this.a);
+	  }
+
+	  d() {
+	    this.n.forEach(detach);
+	  }
+
+	}
+
 	function attribute_to_object(attributes) {
 	  const result = {};
 
@@ -1149,7 +1193,7 @@
 	/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$J(ctx) {
+	function create_fragment$M(ctx) {
 	  let div3;
 	  let details;
 	  let summary;
@@ -1352,7 +1396,7 @@
 	  };
 	}
 
-	function instance$D($$self, $$props, $$invalidate) {
+	function instance$G($$self, $$props, $$invalidate) {
 	  let isOpen;
 	  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
 	  let {
@@ -1430,7 +1474,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$D, create_fragment$J, safe_not_equal, {
+	    }, instance$G, create_fragment$M, safe_not_equal, {
 	      open: 10,
 	      heading: 0,
 	      secondarytext: 1,
@@ -1562,7 +1606,7 @@
 	customElements.define("goa-accordion", Accordion);
 	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block$6(ctx) {
+	function create_else_block$8(ctx) {
 	  let div;
 	  let img0;
 	  let img0_src_value;
@@ -1619,7 +1663,7 @@
 	} // (19:4) {#if url}
 
 
-	function create_if_block$j(ctx) {
+	function create_if_block$l(ctx) {
 	  let a;
 	  let img0;
 	  let img0_src_value;
@@ -1686,7 +1730,7 @@
 	  };
 	}
 
-	function create_fragment$I(ctx) {
+	function create_fragment$L(ctx) {
 	  let div2;
 	  let div1;
 	  let t;
@@ -1696,8 +1740,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*url*/
-	    ctx[1]) return create_if_block$j;
-	    return create_else_block$6;
+	    ctx[1]) return create_if_block$l;
+	    return create_else_block$8;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -1770,7 +1814,7 @@
 	  };
 	}
 
-	function instance$C($$self, $$props, $$invalidate) {
+	function instance$F($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -1802,7 +1846,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$C, create_fragment$I, safe_not_equal, {
+	    }, instance$F, create_fragment$L, safe_not_equal, {
 	      heading: 0,
 	      url: 1,
 	      testid: 2,
@@ -1874,7 +1918,7 @@
 	customElements.define("goa-app-header", AppHeader);
 	/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block$5(ctx) {
+	function create_else_block$7(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -1897,7 +1941,7 @@
 	} // (45:2) {#if showIcon}
 
 
-	function create_if_block_1$a(ctx) {
+	function create_if_block_1$c(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -1930,7 +1974,7 @@
 	} // (50:2) {#if content}
 
 
-	function create_if_block$i(ctx) {
+	function create_if_block$k(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -1962,7 +2006,7 @@
 	  };
 	}
 
-	function create_fragment$H(ctx) {
+	function create_fragment$K(ctx) {
 	  let div;
 	  let t;
 	  let div_style_value;
@@ -1971,15 +2015,15 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*showIcon*/
-	    ctx[7]) return create_if_block_1$a;
-	    return create_else_block$5;
+	    ctx[7]) return create_if_block_1$c;
+	    return create_else_block$7;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
 	  let if_block0 = current_block_type(ctx);
 	  let if_block1 =
 	  /*content*/
-	  ctx[2] && create_if_block$i(ctx);
+	  ctx[2] && create_if_block$k(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -2036,7 +2080,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$i(ctx);
+	          if_block1 = create_if_block$k(ctx);
 	          if_block1.c();
 	          if_block1.m(div, null);
 	        }
@@ -2098,7 +2142,7 @@
 	  };
 	}
 
-	function instance$B($$self, $$props, $$invalidate) {
+	function instance$E($$self, $$props, $$invalidate) {
 	  let showIcon;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2178,7 +2222,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$B, create_fragment$H, safe_not_equal, {
+	    }, instance$E, create_fragment$K, safe_not_equal, {
 	      type: 0,
 	      testid: 1,
 	      content: 2,
@@ -2298,7 +2342,7 @@
 	customElements.define("goa-badge", Badge);
 	/* libs/web-components/src/components/block/Block.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$G(ctx) {
+	function create_fragment$J(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -2372,7 +2416,7 @@
 	  };
 	}
 
-	function instance$A($$self, $$props, $$invalidate) {
+	function instance$D($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -2416,7 +2460,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$A, create_fragment$G, safe_not_equal, {
+	    }, instance$D, create_fragment$J, safe_not_equal, {
 	      gap: 0,
 	      direction: 1,
 	      alignment: 2,
@@ -2524,17 +2568,17 @@
 	customElements.define("goa-block", Block);
 	/* libs/web-components/src/components/button/Button.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block$4(ctx) {
+	function create_else_block$6(ctx) {
 	  let t0;
 	  let span;
 	  let t1;
 	  let if_block1_anchor;
 	  let if_block0 =
 	  /*leadingicon*/
-	  ctx[3] && create_if_block_2$6(ctx);
+	  ctx[3] && create_if_block_2$7(ctx);
 	  let if_block1 =
 	  /*trailingicon*/
-	  ctx[4] && create_if_block_1$9(ctx);
+	  ctx[4] && create_if_block_1$b(ctx);
 	  return {
 	    c() {
 	      if (if_block0) if_block0.c();
@@ -2563,7 +2607,7 @@
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_2$6(ctx);
+	          if_block0 = create_if_block_2$7(ctx);
 	          if_block0.c();
 	          if_block0.m(t0.parentNode, t0);
 	        }
@@ -2578,7 +2622,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_1$9(ctx);
+	          if_block1 = create_if_block_1$b(ctx);
 	          if_block1.c();
 	          if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 	        }
@@ -2601,7 +2645,7 @@
 	} // (46:2) {#if type === "start"}
 
 
-	function create_if_block$h(ctx) {
+	function create_if_block$j(ctx) {
 	  let span;
 	  let t;
 	  let goa_icon;
@@ -2635,7 +2679,7 @@
 	} // (52:4) {#if leadingicon}
 
 
-	function create_if_block_2$6(ctx) {
+	function create_if_block_2$7(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -2679,7 +2723,7 @@
 	} // (58:4) {#if trailingicon}
 
 
-	function create_if_block_1$9(ctx) {
+	function create_if_block_1$b(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -2722,7 +2766,7 @@
 	  };
 	}
 
-	function create_fragment$F(ctx) {
+	function create_fragment$I(ctx) {
 	  let button;
 	  let button_class_value;
 	  let button_style_value;
@@ -2732,8 +2776,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*type*/
-	    ctx[0] === "start") return create_if_block$h;
-	    return create_else_block$4;
+	    ctx[0] === "start") return create_if_block$j;
+	    return create_else_block$6;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -2876,7 +2920,7 @@
 	  };
 	}
 
-	function instance$z($$self, $$props, $$invalidate) {
+	function instance$C($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isButtonDark;
 	  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2971,7 +3015,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$z, create_fragment$F, safe_not_equal, {
+	    }, instance$C, create_fragment$I, safe_not_equal, {
 	      type: 0,
 	      size: 1,
 	      variant: 2,
@@ -3127,7 +3171,7 @@
 	customElements.define("goa-button", Button);
 	/* libs/web-components/src/components/button-group/ButtonGroup.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$E(ctx) {
+	function create_fragment$H(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3197,7 +3241,7 @@
 	  };
 	}
 
-	function instance$y($$self, $$props, $$invalidate) {
+	function instance$B($$self, $$props, $$invalidate) {
 	  let _alignment;
 
 	  let {
@@ -3261,7 +3305,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$y, create_fragment$E, safe_not_equal, {
+	    }, instance$B, create_fragment$H, safe_not_equal, {
 	      alignment: 7,
 	      gap: 0,
 	      testid: 1,
@@ -3369,7 +3413,7 @@
 	customElements.define("goa-button-group", ButtonGroup);
 	/* libs/web-components/src/components/callout/Callout.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$g(ctx) {
+	function create_if_block$i(ctx) {
 	  let h3;
 	  let t;
 	  return {
@@ -3400,7 +3444,7 @@
 	  };
 	}
 
-	function create_fragment$D(ctx) {
+	function create_fragment$G(ctx) {
 	  let div;
 	  let span0;
 	  let goa_icon;
@@ -3413,7 +3457,7 @@
 	  let div_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[5] && create_if_block$g(ctx);
+	  ctx[5] && create_if_block$i(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -3492,7 +3536,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$g(ctx);
+	          if_block = create_if_block$i(ctx);
 	          if_block.c();
 	          if_block.m(span1, t1);
 	        }
@@ -3535,7 +3579,7 @@
 	  };
 	}
 
-	function instance$x($$self, $$props, $$invalidate) {
+	function instance$A($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
 	  let {
@@ -3592,7 +3636,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$x, create_fragment$D, safe_not_equal, {
+	    }, instance$A, create_fragment$G, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -3700,7 +3744,7 @@
 	customElements.define("goa-callout", Callout);
 	/* libs/web-components/src/components/card-actions/CardActions.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$C(ctx) {
+	function create_fragment$F(ctx) {
 	  let goa_card_content;
 	  return {
 	    c() {
@@ -3731,7 +3775,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$C, safe_not_equal, {}, null);
+	    }, null, create_fragment$F, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -3745,7 +3789,7 @@
 	customElements.define("goa-card-actions", CardActions);
 	/* libs/web-components/src/components/card/Card.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$B(ctx) {
+	function create_fragment$E(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -3824,7 +3868,7 @@
 	  };
 	}
 
-	function instance$w($$self, $$props, $$invalidate) {
+	function instance$z($$self, $$props, $$invalidate) {
 	  let {
 	    elevation = 0
 	  } = $$props;
@@ -3872,7 +3916,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$w, create_fragment$B, safe_not_equal, {
+	    }, instance$z, create_fragment$E, safe_not_equal, {
 	      elevation: 0,
 	      width: 1,
 	      height: 2,
@@ -3992,7 +4036,7 @@
 	customElements.define("goa-card", Card);
 	/* libs/web-components/src/components/card-content/CardContent.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$A(ctx) {
+	function create_fragment$D(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4025,7 +4069,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$A, safe_not_equal, {}, null);
+	    }, null, create_fragment$D, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4039,7 +4083,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$z(ctx) {
+	function create_fragment$C(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4072,7 +4116,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$z, safe_not_equal, {}, null);
+	    }, null, create_fragment$C, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -4086,7 +4130,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$y(ctx) {
+	function create_fragment$B(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -4134,7 +4178,7 @@
 	  };
 	}
 
-	function instance$v($$self, $$props, $$invalidate) {
+	function instance$y($$self, $$props, $$invalidate) {
 	  let {
 	    src
 	  } = $$props;
@@ -4158,7 +4202,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$v, create_fragment$y, safe_not_equal, {
+	    }, instance$y, create_fragment$B, safe_not_equal, {
 	      src: 0,
 	      height: 1
 	    }, null);
@@ -4206,7 +4250,7 @@
 	customElements.define("goa-card-image", CardImage);
 	/* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_1$8(ctx) {
+	function create_if_block_1$a(ctx) {
 	  let svg;
 	  let path;
 	  return {
@@ -4233,7 +4277,7 @@
 	} // (68:4) {#if isIndeterminate}
 
 
-	function create_if_block$f(ctx) {
+	function create_if_block$h(ctx) {
 	  let svg;
 	  let rect;
 	  return {
@@ -4260,7 +4304,7 @@
 	  };
 	}
 
-	function create_fragment$x(ctx) {
+	function create_fragment$A(ctx) {
 	  let label;
 	  let div0;
 	  let input;
@@ -4278,10 +4322,10 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*isIndeterminate*/
-	    ctx[10]) return create_if_block$f;
+	    ctx[10]) return create_if_block$h;
 	    if (
 	    /*isChecked*/
-	    ctx[9]) return create_if_block_1$8;
+	    ctx[9]) return create_if_block_1$a;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -4509,7 +4553,7 @@
 	  };
 	}
 
-	function instance$u($$self, $$props, $$invalidate) {
+	function instance$x($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  let isChecked;
@@ -4624,7 +4668,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$u, create_fragment$x, safe_not_equal, {
+	    }, instance$x, create_fragment$A, safe_not_equal, {
 	      name: 0,
 	      checked: 14,
 	      text: 1,
@@ -4792,7 +4836,7 @@
 	customElements.define("goa-checkbox", Checkbox);
 	/* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_1$7(ctx) {
+	function create_if_block_1$9(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -4826,7 +4870,7 @@
 	} // (54:2) {#if _deletable}
 
 
-	function create_if_block$e(ctx) {
+	function create_if_block$g(ctx) {
 	  let goa_icon;
 	  let goa_icon_fillcolor_value;
 	  let goa_icon_opacity_value;
@@ -4882,7 +4926,7 @@
 	  };
 	}
 
-	function create_fragment$w(ctx) {
+	function create_fragment$z(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -4893,10 +4937,10 @@
 	  let dispose;
 	  let if_block0 =
 	  /*leadingicon*/
-	  ctx[4] && create_if_block_1$7(ctx);
+	  ctx[4] && create_if_block_1$9(ctx);
 	  let if_block1 =
 	  /*_deletable*/
-	  ctx[11] && create_if_block$e(ctx);
+	  ctx[11] && create_if_block$g(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -4970,7 +5014,7 @@
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_1$7(ctx);
+	          if_block0 = create_if_block_1$9(ctx);
 	          if_block0.c();
 	          if_block0.m(div1, t0);
 	        }
@@ -4991,7 +5035,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block$e(ctx);
+	          if_block1 = create_if_block$g(ctx);
 	          if_block1.c();
 	          if_block1.m(div1, null);
 	        }
@@ -5064,7 +5108,7 @@
 	  };
 	}
 
-	function instance$t($$self, $$props, $$invalidate) {
+	function instance$w($$self, $$props, $$invalidate) {
 	  let {
 	    mt = null
 	  } = $$props;
@@ -5165,7 +5209,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$t, create_fragment$w, safe_not_equal, {
+	    }, instance$w, create_fragment$z, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
@@ -5419,12 +5463,12 @@
 	/* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block$d(ctx) {
+	function create_if_block$f(ctx) {
 	  let current_block_type_index;
 	  let if_block;
 	  let if_block_anchor;
 	  let current;
-	  const if_block_creators = [create_if_block_1$6, create_if_block_3$4];
+	  const if_block_creators = [create_if_block_1$8, create_if_block_3$6];
 	  const if_blocks = [];
 
 	  function select_block_type(ctx, dirty) {
@@ -5514,7 +5558,7 @@
 	} // (43:19) 
 
 
-	function create_if_block_3$4(ctx) {
+	function create_if_block_3$6(ctx) {
 	  let div;
 	  let goa_spinner;
 	  let t;
@@ -5610,7 +5654,7 @@
 	} // (32:2) {#if fullscreen}
 
 
-	function create_if_block_1$6(ctx) {
+	function create_if_block_1$8(ctx) {
 	  let div;
 	  let goa_spinner;
 	  let t;
@@ -5620,7 +5664,7 @@
 	  let dispose;
 	  let if_block =
 	  /*message*/
-	  ctx[0] && create_if_block_2$5(ctx);
+	  ctx[0] && create_if_block_2$6(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -5676,7 +5720,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block_2$5(ctx);
+	          if_block = create_if_block_2$6(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -5758,7 +5802,7 @@
 	} // (39:6) {#if message}
 
 
-	function create_if_block_2$5(ctx) {
+	function create_if_block_2$6(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -5790,12 +5834,12 @@
 	  };
 	}
 
-	function create_fragment$v(ctx) {
+	function create_fragment$y(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*isVisible*/
-	  ctx[5] && create_if_block$d(ctx);
+	  ctx[5] && create_if_block$f(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -5822,7 +5866,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$d(ctx);
+	          if_block = create_if_block$f(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5855,7 +5899,7 @@
 	  };
 	}
 
-	function instance$s($$self, $$props, $$invalidate) {
+	function instance$v($$self, $$props, $$invalidate) {
 	  let isVisible;
 	  const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
 	  const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5913,7 +5957,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$s, create_fragment$v, safe_not_equal, {
+	    }, instance$v, create_fragment$y, safe_not_equal, {
 	      variant: 6,
 	      size: 7,
 	      message: 0,
@@ -5997,7 +6041,7 @@
 	customElements.define("goa-circular-progress", CircularProgress);
 	/* libs/web-components/src/components/container/Container.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$u(ctx) {
+	function create_fragment$x(ctx) {
 	  let div3;
 	  let header;
 	  let div0;
@@ -6122,7 +6166,7 @@
 	  };
 	}
 
-	function instance$r($$self, $$props, $$invalidate) {
+	function instance$u($$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"]);
@@ -6178,7 +6222,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$r, create_fragment$u, safe_not_equal, {
+	    }, instance$u, create_fragment$x, safe_not_equal, {
 	      type: 0,
 	      accent: 1,
 	      padding: 2,
@@ -6298,7 +6342,7 @@
 	customElements.define("goa-container", Container);
 	/* libs/web-components/src/components/details/Details.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$t(ctx) {
+	function create_fragment$w(ctx) {
 	  let details;
 	  let summary;
 	  let goa_icon;
@@ -6398,7 +6442,7 @@
 	  };
 	}
 
-	function instance$q($$self, $$props, $$invalidate) {
+	function instance$t($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -6458,7 +6502,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$q, create_fragment$t, safe_not_equal, {
+	    }, instance$t, create_fragment$w, safe_not_equal, {
 	      heading: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6542,7 +6586,7 @@
 	customElements.define("goa-details", Details);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$s(ctx) {
+	function create_fragment$v(ctx) {
 	  let hr;
 	  let hr_style_value;
 	  return {
@@ -6601,7 +6645,7 @@
 	  };
 	}
 
-	function instance$p($$self, $$props, $$invalidate) {
+	function instance$s($$self, $$props, $$invalidate) {
 	  let {
 	    testid = ""
 	  } = $$props;
@@ -6637,7 +6681,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$p, create_fragment$s, safe_not_equal, {
+	    }, instance$s, create_fragment$v, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -6735,7 +6779,7 @@
 	} // (256:2) {:else}
 
 
-	function create_else_block$3(ctx) {
+	function create_else_block$5(ctx) {
 	  let t0;
 	  let goa_input;
 	  let goa_input_arialabel_value;
@@ -6751,7 +6795,7 @@
 	  let dispose;
 	  let if_block =
 	  /*_isMenuVisible*/
-	  ctx[15] && create_if_block_1$5(ctx);
+	  ctx[15] && create_if_block_1$7(ctx);
 	  let each_value_1 =
 	  /*_options*/
 	  ctx[13];
@@ -6863,7 +6907,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block_1$5(ctx);
+	          if_block = create_if_block_1$7(ctx);
 	          if_block.c();
 	          if_block.m(t0.parentNode, t0);
 	        }
@@ -7004,7 +7048,7 @@
 	} // (237:2) {#if _native}
 
 
-	function create_if_block$c(ctx) {
+	function create_if_block$e(ctx) {
 	  let select;
 	  let slot;
 	  let select_aria_label_value;
@@ -7130,7 +7174,7 @@
 	} // (257:4) {#if _isMenuVisible}
 
 
-	function create_if_block_1$5(ctx) {
+	function create_if_block_1$7(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let mounted;
@@ -7427,7 +7471,7 @@
 	  };
 	}
 
-	function create_fragment$r(ctx) {
+	function create_fragment$u(ctx) {
 	  let div;
 	  let div_data_testid_value;
 	  let div_style_value;
@@ -7435,8 +7479,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*_native*/
-	    ctx[22]) return create_if_block$c;
-	    return create_else_block$3;
+	    ctx[22]) return create_if_block$e;
+	    return create_else_block$5;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -7544,7 +7588,7 @@
 	  };
 	}
 
-	function instance$o($$self, $$props, $$invalidate) {
+	function instance$r($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
 	    if (_disabled || _isMenuVisible) {
 	      return;
@@ -7936,7 +7980,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$o, create_fragment$r, safe_not_equal, {
+	    }, instance$r, create_fragment$u, safe_not_equal, {
 	      name: 0,
 	      arialabel: 1,
 	      value: 28,
@@ -8140,7 +8184,7 @@
 	customElements.define("goa-dropdown", Dropdown);
 	/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$q(ctx) {
+	function create_fragment$t(ctx) {
 	  return {
 	    c() {
 	      this.c = noop;
@@ -8161,7 +8205,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$q, safe_not_equal, {}, null);
+	    }, null, create_fragment$t, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8175,7 +8219,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$p(ctx) {
+	function create_fragment$s(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -8235,7 +8279,7 @@
 	  }
 	}
 
-	function instance$n($$self, $$props, $$invalidate) {
+	function instance$q($$self, $$props, $$invalidate) {
 	  let isActive;
 	  let {
 	    active
@@ -8404,7 +8448,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$n, create_fragment$p, safe_not_equal, {
+	    }, instance$q, create_fragment$s, safe_not_equal, {
 	      active: 1
 	    }, null);
 
@@ -8440,7 +8484,7 @@
 	customElements.define("goa-focus-trap", FocusTrap);
 	/* libs/web-components/src/components/footer/Footer.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$b(ctx) {
+	function create_if_block$d(ctx) {
 	  let goa_divider;
 	  return {
 	    c() {
@@ -8459,7 +8503,7 @@
 	  };
 	}
 
-	function create_fragment$o(ctx) {
+	function create_fragment$r(ctx) {
 	  let div5;
 	  let div4;
 	  let div0;
@@ -8477,7 +8521,7 @@
 	  /*navLinks*/
 	  ctx[2] &&
 	  /*navLinks*/
-	  ctx[2].length > 0 && create_if_block$b();
+	  ctx[2].length > 0 && create_if_block$d();
 	  return {
 	    c() {
 	      div5 = element("div");
@@ -8550,7 +8594,7 @@
 	      /*navLinks*/
 	      ctx[2].length > 0) {
 	        if (if_block) ;else {
-	          if_block = create_if_block$b();
+	          if_block = create_if_block$d();
 	          if_block.c();
 	          if_block.m(div4, t1);
 	        }
@@ -8602,7 +8646,7 @@
 	  };
 	}
 
-	function instance$m($$self, $$props, $$invalidate) {
+	function instance$p($$self, $$props, $$invalidate) {
 	  let {
 	    maxcontentwidth = ""
 	  } = $$props;
@@ -8641,7 +8685,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$m, create_fragment$o, safe_not_equal, {
+	    }, instance$p, create_fragment$r, safe_not_equal, {
 	      maxcontentwidth: 0
 	    }, null);
 
@@ -8731,7 +8775,7 @@
 	  };
 	}
 
-	function create_fragment$n(ctx) {
+	function create_fragment$q(ctx) {
 	  let section;
 	  let div;
 	  let t;
@@ -8819,7 +8863,7 @@
 	  };
 	}
 
-	function instance$l($$self, $$props, $$invalidate) {
+	function instance$o($$self, $$props, $$invalidate) {
 	  let rootEl;
 	  let children = [];
 	  onMount(function () {
@@ -8854,7 +8898,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$l, create_fragment$n, safe_not_equal, {}, null);
+	    }, instance$o, create_fragment$q, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -8875,7 +8919,7 @@
 	} // (31:2) {#if heading}
 
 
-	function create_if_block$a(ctx) {
+	function create_if_block$c(ctx) {
 	  let div;
 	  let t0;
 	  let t1;
@@ -8964,7 +9008,7 @@
 	  };
 	}
 
-	function create_fragment$m(ctx) {
+	function create_fragment$p(ctx) {
 	  let section;
 	  let t0;
 	  let div;
@@ -8973,7 +9017,7 @@
 	  let ul_style_value;
 	  let if_block =
 	  /*heading*/
-	  ctx[0] && create_if_block$a(ctx);
+	  ctx[0] && create_if_block$c(ctx);
 	  let each_value =
 	  /*children*/
 	  ctx[3];
@@ -9040,7 +9084,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$a(ctx);
+	          if_block = create_if_block$c(ctx);
 	          if_block.c();
 	          if_block.m(section, t0);
 	        }
@@ -9111,7 +9155,7 @@
 	  };
 	}
 
-	function instance$k($$self, $$props, $$invalidate) {
+	function instance$n($$self, $$props, $$invalidate) {
 	  let {
 	    heading = ""
 	  } = $$props;
@@ -9163,7 +9207,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$k, create_fragment$m, safe_not_equal, {
+	    }, instance$n, create_fragment$p, safe_not_equal, {
 	      heading: 0,
 	      maxcolumncount: 1
 	    }, null);
@@ -9211,7 +9255,7 @@
 	customElements.define("goa-app-footer-nav-section", FooterNavSection);
 	/* libs/web-components/src/components/form-item/FormItem.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_2$4(ctx) {
+	function create_if_block_2$5(ctx) {
 	  let div;
 	  let t0;
 	  let t1;
@@ -9222,7 +9266,7 @@
 	  ctx[9].includes(
 	  /*requirement*/
 	  ctx[8]);
-	  let if_block = show_if && create_if_block_3$3(ctx);
+	  let if_block = show_if && create_if_block_3$5(ctx);
 	  return {
 	    c() {
 	      div = element("div");
@@ -9261,7 +9305,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block_3$3(ctx);
+	          if_block = create_if_block_3$5(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -9280,7 +9324,7 @@
 	} // (34:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
 
 
-	function create_if_block_3$3(ctx) {
+	function create_if_block_3$5(ctx) {
 	  let em;
 	  let t0;
 	  let t1;
@@ -9318,7 +9362,7 @@
 	} // (42:2) {#if error}
 
 
-	function create_if_block_1$4(ctx) {
+	function create_if_block_1$6(ctx) {
 	  let div;
 	  let goa_icon;
 	  let t0;
@@ -9361,7 +9405,7 @@
 	} // (48:2) {#if helptext}
 
 
-	function create_if_block$9(ctx) {
+	function create_if_block$b(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -9393,7 +9437,7 @@
 	  };
 	}
 
-	function create_fragment$l(ctx) {
+	function create_fragment$o(ctx) {
 	  let div1;
 	  let t0;
 	  let div0;
@@ -9402,13 +9446,13 @@
 	  let div1_style_value;
 	  let if_block0 =
 	  /*label*/
-	  ctx[5] && create_if_block_2$4(ctx);
+	  ctx[5] && create_if_block_2$5(ctx);
 	  let if_block1 =
 	  /*error*/
-	  ctx[7] && create_if_block_1$4(ctx);
+	  ctx[7] && create_if_block_1$6(ctx);
 	  let if_block2 =
 	  /*helptext*/
-	  ctx[6] && create_if_block$9(ctx);
+	  ctx[6] && create_if_block$b(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -9455,7 +9499,7 @@
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_2$4(ctx);
+	          if_block0 = create_if_block_2$5(ctx);
 	          if_block0.c();
 	          if_block0.m(div1, t0);
 	        }
@@ -9470,7 +9514,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_1$4(ctx);
+	          if_block1 = create_if_block_1$6(ctx);
 	          if_block1.c();
 	          if_block1.m(div1, t2);
 	        }
@@ -9485,7 +9529,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$9(ctx);
+	          if_block2 = create_if_block$b(ctx);
 	          if_block2.c();
 	          if_block2.m(div1, null);
 	        }
@@ -9530,7 +9574,7 @@
 	  };
 	}
 
-	function instance$j($$self, $$props, $$invalidate) {
+	function instance$m($$self, $$props, $$invalidate) {
 	  const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
 	  let {
 	    testid = ""
@@ -9586,7 +9630,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$j, create_fragment$l, safe_not_equal, {
+	    }, instance$m, create_fragment$o, safe_not_equal, {
 	      testid: 0,
 	      mt: 1,
 	      mr: 2,
@@ -9718,7 +9762,7 @@
 	customElements.define("goa-form-item", FormItem);
 	/* libs/web-components/src/components/grid/Grid.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$k(ctx) {
+	function create_fragment$n(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -9786,7 +9830,7 @@
 	  };
 	}
 
-	function instance$i($$self, $$props, $$invalidate) {
+	function instance$l($$self, $$props, $$invalidate) {
 	  let {
 	    gap = "m"
 	  } = $$props;
@@ -9831,7 +9875,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$i, create_fragment$k, safe_not_equal, {
+	    }, instance$l, create_fragment$n, safe_not_equal, {
 	      gap: 0,
 	      minchildwidth: 1,
 	      mt: 2,
@@ -9927,7 +9971,7 @@
 	customElements.define("goa-grid", Grid);
 	/* libs/web-components/src/components/hero-banner/HeroBanner.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$j(ctx) {
+	function create_fragment$m(ctx) {
 	  let div1;
 	  let goa_page_block;
 	  let h1;
@@ -10012,7 +10056,7 @@
 	  };
 	}
 
-	function instance$h($$self, $$props, $$invalidate) {
+	function instance$k($$self, $$props, $$invalidate) {
 	  let {
 	    heading
 	  } = $$props;
@@ -10040,7 +10084,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$h, create_fragment$j, safe_not_equal, {
+	    }, instance$k, create_fragment$m, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1,
 	      minheight: 2
@@ -10100,7 +10144,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$i(ctx) {
+	function create_fragment$l(ctx) {
 	  let button;
 	  let goa_icon;
 	  let button_style_value;
@@ -10272,7 +10316,7 @@
 	  }));
 	}
 
-	function instance$g($$self, $$props, $$invalidate) {
+	function instance$j($$self, $$props, $$invalidate) {
 	  let css;
 	  let isDisabled;
 	  let isInverted;
@@ -10377,7 +10421,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$g, create_fragment$i, safe_not_equal, {
+	    }, instance$j, create_fragment$l, safe_not_equal, {
 	      icon: 0,
 	      size: 1,
 	      theme: 2,
@@ -10545,7 +10589,60 @@
 	customElements.define("goa-icon-button", IconButton);
 	/* libs/web-components/src/components/icon/Icon.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$8(ctx) {
+	function create_if_block$a(ctx) {
+	  let show_if;
+	  let if_block_anchor;
+
+	  function select_block_type(ctx, dirty) {
+	    if (dirty &
+	    /*type*/
+	    16) show_if = null;
+	    if (show_if == null) show_if = !!Object.keys(
+	    /*_iconOverrides*/
+	    ctx[13]).includes(
+	    /*type*/
+	    ctx[4]);
+	    if (show_if) return create_if_block_1$5;
+	    return create_else_block$4;
+	  }
+
+	  let current_block_type = select_block_type(ctx, -1);
+	  let if_block = current_block_type(ctx);
+	  return {
+	    c() {
+	      if_block.c();
+	      if_block_anchor = empty();
+	    },
+
+	    m(target, anchor) {
+	      if_block.m(target, anchor);
+	      insert(target, if_block_anchor, anchor);
+	    },
+
+	    p(ctx, dirty) {
+	      if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
+	        if_block.p(ctx, dirty);
+	      } else {
+	        if_block.d(1);
+	        if_block = current_block_type(ctx);
+
+	        if (if_block) {
+	          if_block.c();
+	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
+	        }
+	      }
+	    },
+
+	    d(detaching) {
+	      if_block.d(detaching);
+	      if (detaching) detach(if_block_anchor);
+	    }
+
+	  };
+	} // (62:4) {:else}
+
+
+	function create_else_block$4(ctx) {
 	  let ion_icon;
 	  let ion_icon_name_value;
 	  return {
@@ -10591,21 +10688,66 @@
 	    }
 
 	  };
-	}
+	} // (57:4) {#if Object.keys(_iconOverrides).includes(type)}
 
-	function create_fragment$h(ctx) {
+
+	function create_if_block_1$5(ctx) {
 	  let div;
-	  let div_style_value;
-	  let if_block =
+	  let html_tag;
+	  let raw_value =
+	  /*_iconOverrides*/
+	  ctx[13][
 	  /*type*/
-	  ctx[4] && create_if_block$8(ctx);
+	  ctx[4]] + "";
+	  let t;
+	  let span;
 	  return {
 	    c() {
 	      div = element("div");
-	      if (if_block) if_block.c();
-	      this.c = noop;
-	      attr(div, "class", "goa-icon");
-	      attr(div, "data-testid",
+	      html_tag = new HtmlTag(false);
+	      t = space();
+	      span = element("span");
+	      html_tag.a = t;
+	      attr(div, "class", "icon-override");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      html_tag.m(raw_value, div);
+	      append(div, t);
+	      append(div, span);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*type*/
+	      16 && raw_value !== (raw_value =
+	      /*_iconOverrides*/
+	      ctx[13][
+	      /*type*/
+	      ctx[4]] + "")) html_tag.p(raw_value);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	function create_fragment$k(ctx) {
+	  let div;
+	  let div_style_value;
+	  let if_block =
+	  /*type*/
+	  ctx[4] && create_if_block$a(ctx);
+	  return {
+	    c() {
+	      div = element("div");
+	      if (if_block) if_block.c();
+	      this.c = noop;
+	      attr(div, "class", "goa-icon");
+	      attr(div, "data-testid",
 	      /*testid*/
 	      ctx[10]);
 	      attr(div, "title",
@@ -10651,7 +10793,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$8(ctx);
+	          if_block = create_if_block$a(ctx);
 	          if_block.c();
 	          if_block.m(div, null);
 	        }
@@ -10724,7 +10866,7 @@
 	  };
 	}
 
-	function instance$f($$self, $$props, $$invalidate) {
+	function instance$i($$self, $$props, $$invalidate) {
 	  let isInverted;
 
 	  let _size;
@@ -10767,7 +10909,19 @@
 	  } = $$props;
 	  let {
 	    testid = ""
-	  } = $$props;
+	  } = $$props; // Private
+
+	  const _iconOverrides = {
+	    pencil: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1442 5.47956L12.5355 1.87088L13.7196 0.686776C14.0391 0.367257 14.4385 0.212197 14.9178 0.221594C15.3971 0.230992 15.7965 0.39545 16.116 0.714969L17.3283 1.92726C17.6478 2.24678 17.8076 2.64148 17.8076 3.11136C17.8076 3.58124 17.6478 3.97594 17.3283 4.29546L16.1442 5.47956ZM1.03951 17.8424C0.795173 17.8424 0.593125 17.7626 0.433365 17.6028C0.273605 17.443 0.193726 17.241 0.193726 16.9966V14.5721C0.193726 14.4593 0.212521 14.356 0.250112 14.262C0.287702 14.168 0.353485 14.074 0.447461 13.9801L11.4689 2.93435L15.0776 6.54303L4.05615 17.5887C3.96217 17.6827 3.8682 17.7485 3.77422 17.7861C3.68024 17.8236 3.57687 17.8424 3.4641 17.8424H1.03951Z" fill="#333333"/>
+</svg>`,
+	    checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="#333333"/>
+</svg>`,
+	    remove: `<svg width="16" height="20" viewBox="0 0 16 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 -0.000244141C0.947715 -0.000244141 0.5 0.447471 0.5 0.999756C0.5 1.55204 0.947715 1.99976 1.5 1.99976H15C15.5523 1.99976 16 1.55204 16 0.999756C16 0.447471 15.5523 -0.000244141 15 -0.000244141H1.5Z" fill="#333333"/>
+</svg>`
+	  };
 
 	  $$self.$$set = $$props => {
 	    if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
@@ -10775,9 +10929,9 @@
 	    if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
 	    if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
 	    if ('type' in $$props) $$invalidate(4, type = $$props.type);
-	    if ('size' in $$props) $$invalidate(13, size = $$props.size);
+	    if ('size' in $$props) $$invalidate(14, size = $$props.size);
 	    if ('theme' in $$props) $$invalidate(5, theme = $$props.theme);
-	    if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
+	    if ('inverted' in $$props) $$invalidate(15, inverted = $$props.inverted);
 	    if ('fillcolor' in $$props) $$invalidate(6, fillcolor = $$props.fillcolor);
 	    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
 	    if ('opacity' in $$props) $$invalidate(8, opacity = $$props.opacity);
@@ -10788,13 +10942,13 @@
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*inverted*/
-	    16384) {
+	    32768) {
 	      $$invalidate(12, isInverted = toBoolean(inverted));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*size*/
-	    8192) {
+	    16384) {
 	      $$invalidate(11, _size = {
 	        small: "1.25rem",
 	        medium: "1.5rem",
@@ -10803,26 +10957,26 @@
 	    }
 	  };
 
-	  return [mt, mr, mb, ml, type, theme, fillcolor, hovercolor, opacity, title, testid, _size, isInverted, size, inverted];
+	  return [mt, mr, mb, ml, type, theme, fillcolor, hovercolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
 	}
 
 	class Icon extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.inverted{color:#fff;fill:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{width:var(--size);height:var(--size);fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.inverted *{color:#fff;fill:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$f, create_fragment$h, safe_not_equal, {
+	    }, instance$i, create_fragment$k, safe_not_equal, {
 	      mt: 0,
 	      mr: 1,
 	      mb: 2,
 	      ml: 3,
 	      type: 4,
-	      size: 13,
+	      size: 14,
 	      theme: 5,
-	      inverted: 14,
+	      inverted: 15,
 	      fillcolor: 6,
 	      hovercolor: 7,
 	      opacity: 8,
@@ -10902,7 +11056,7 @@
 	  }
 
 	  get size() {
-	    return this.$$.ctx[13];
+	    return this.$$.ctx[14];
 	  }
 
 	  set size(size) {
@@ -10924,7 +11078,7 @@
 	  }
 
 	  get inverted() {
-	    return this.$$.ctx[14];
+	    return this.$$.ctx[15];
 	  }
 
 	  set inverted(inverted) {
@@ -11027,7 +11181,7 @@
 	} // (109:4) {#if leadingicon}
 
 
-	function create_if_block_3$2(ctx) {
+	function create_if_block_3$4(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -11061,7 +11215,7 @@
 	} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
-	function create_if_block_2$3(ctx) {
+	function create_if_block_2$4(ctx) {
 	  let goa_icon;
 	  return {
 	    c() {
@@ -11096,7 +11250,7 @@
 	} // (149:4) {#if trailingicon && handlesTrailingIconClick}
 
 
-	function create_if_block_1$3(ctx) {
+	function create_if_block_1$4(ctx) {
 	  let goa_icon_button;
 	  let mounted;
 	  let dispose;
@@ -11151,7 +11305,7 @@
 	} // (161:4) {#if suffix}
 
 
-	function create_if_block$7(ctx) {
+	function create_if_block$9(ctx) {
 	  let span;
 	  let t;
 	  return {
@@ -11183,7 +11337,7 @@
 	  };
 	}
 
-	function create_fragment$g(ctx) {
+	function create_fragment$j(ctx) {
 	  let div3;
 	  let div2;
 	  let t0;
@@ -11208,20 +11362,20 @@
 	  ctx[14] && create_if_block_4(ctx);
 	  let if_block1 =
 	  /*leadingicon*/
-	  ctx[5] && create_if_block_3$2(ctx);
+	  ctx[5] && create_if_block_3$4(ctx);
 	  let if_block2 =
 	  /*trailingicon*/
 	  ctx[6] && !
 	  /*handlesTrailingIconClick*/
-	  ctx[24] && create_if_block_2$3(ctx);
+	  ctx[24] && create_if_block_2$4(ctx);
 	  let if_block3 =
 	  /*trailingicon*/
 	  ctx[6] &&
 	  /*handlesTrailingIconClick*/
-	  ctx[24] && create_if_block_1$3(ctx);
+	  ctx[24] && create_if_block_1$4(ctx);
 	  let if_block4 =
 	  /*suffix*/
-	  ctx[15] && create_if_block$7(ctx);
+	  ctx[15] && create_if_block$9(ctx);
 	  return {
 	    c() {
 	      div3 = element("div");
@@ -11377,7 +11531,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_3$2(ctx);
+	          if_block1 = create_if_block_3$4(ctx);
 	          if_block1.c();
 	          if_block1.m(div2, t2);
 	        }
@@ -11510,7 +11664,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block_2$3(ctx);
+	          if_block2 = create_if_block_2$4(ctx);
 	          if_block2.c();
 	          if_block2.m(div2, t4);
 	        }
@@ -11527,7 +11681,7 @@
 	        if (if_block3) {
 	          if_block3.p(ctx, dirty);
 	        } else {
-	          if_block3 = create_if_block_1$3(ctx);
+	          if_block3 = create_if_block_1$4(ctx);
 	          if_block3.c();
 	          if_block3.m(div2, t5);
 	        }
@@ -11542,7 +11696,7 @@
 	        if (if_block4) {
 	          if_block4.p(ctx, dirty);
 	        } else {
-	          if_block4 = create_if_block$7(ctx);
+	          if_block4 = create_if_block$9(ctx);
 	          if_block4.c();
 	          if_block4.m(div2, t6);
 	        }
@@ -11622,7 +11776,7 @@
 	  }));
 	}
 
-	function instance$e($$self, $$props, $$invalidate) {
+	function instance$h($$self, $$props, $$invalidate) {
 	  let handlesTrailingIconClick;
 	  let isFocused;
 	  let isReadonly;
@@ -11842,7 +11996,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$e, create_fragment$g, safe_not_equal, {
+	    }, instance$h, create_fragment$j, safe_not_equal, {
 	      type: 1,
 	      name: 2,
 	      value: 0,
@@ -12178,7 +12332,7 @@
 	customElements.define("goa-input", Input);
 	/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block_3$1(ctx) {
+	function create_if_block_3$3(ctx) {
 	  let div0;
 	  let t0;
 	  let div1;
@@ -12210,7 +12364,7 @@
 	} // (41:2) {#if ["alpha", "beta"].includes(type)}
 
 
-	function create_if_block_1$2(ctx) {
+	function create_if_block_1$3(ctx) {
 	  let div0;
 	  let t0_value = capitalize(
 	  /*type*/
@@ -12224,7 +12378,7 @@
 	  let t4;
 	  let if_block =
 	  /*feedbackurl*/
-	  ctx[2] && create_if_block_2$2(ctx);
+	  ctx[2] && create_if_block_2$3(ctx);
 	  return {
 	    c() {
 	      div0 = element("div");
@@ -12277,7 +12431,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block_2$2(ctx);
+	          if_block = create_if_block_2$3(ctx);
 	          if_block.c();
 	          if_block.m(div1, null);
 	        }
@@ -12298,7 +12452,7 @@
 	} // (50:6) {#if feedbackurl}
 
 
-	function create_if_block_2$2(ctx) {
+	function create_if_block_2$3(ctx) {
 	  let span;
 	  let t0;
 	  let a;
@@ -12340,7 +12494,7 @@
 	} // (56:2) {#if version}
 
 
-	function create_if_block$6(ctx) {
+	function create_if_block$8(ctx) {
 	  let div;
 	  let t;
 	  return {
@@ -12373,7 +12527,7 @@
 	  };
 	}
 
-	function create_fragment$f(ctx) {
+	function create_fragment$i(ctx) {
 	  let header;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
@@ -12384,11 +12538,11 @@
 	  let t2;
 	  let if_block0 =
 	  /*type*/
-	  ctx[0] === "live" && create_if_block_3$1();
-	  let if_block1 = show_if && create_if_block_1$2(ctx);
+	  ctx[0] === "live" && create_if_block_3$3();
+	  let if_block1 = show_if && create_if_block_1$3(ctx);
 	  let if_block2 =
 	  /*version*/
-	  ctx[1] && create_if_block$6(ctx);
+	  ctx[1] && create_if_block$8(ctx);
 	  return {
 	    c() {
 	      header = element("header");
@@ -12420,7 +12574,7 @@
 	      /*type*/
 	      ctx[0] === "live") {
 	        if (if_block0) ;else {
-	          if_block0 = create_if_block_3$1();
+	          if_block0 = create_if_block_3$3();
 	          if_block0.c();
 	          if_block0.m(header, t0);
 	        }
@@ -12439,7 +12593,7 @@
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
-	          if_block1 = create_if_block_1$2(ctx);
+	          if_block1 = create_if_block_1$3(ctx);
 	          if_block1.c();
 	          if_block1.m(header, t1);
 	        }
@@ -12454,7 +12608,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block$6(ctx);
+	          if_block2 = create_if_block$8(ctx);
 	          if_block2.c();
 	          if_block2.m(header, null);
 	        }
@@ -12482,7 +12636,7 @@
 	  return val[0].toUpperCase() + val.slice(1);
 	}
 
-	function instance$d($$self, $$props, $$invalidate) {
+	function instance$g($$self, $$props, $$invalidate) {
 	  const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
 	  let {
 	    type
@@ -12514,7 +12668,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$d, create_fragment$f, safe_not_equal, {
+	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      type: 0,
 	      version: 1,
 	      feedbackurl: 2
@@ -12574,7 +12728,7 @@
 	customElements.define("goa-microsite-header", MicrositeHeader);
 	/* libs/web-components/src/components/modal/Modal.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$5(ctx) {
+	function create_if_block$7(ctx) {
 	  let goa_focus_trap;
 	  let div6;
 	  let div0;
@@ -12601,20 +12755,20 @@
 	  let dispose;
 	  let if_block0 =
 	  /*calloutvariant*/
-	  ctx[3] !== null && create_if_block_3(ctx);
+	  ctx[3] !== null && create_if_block_3$2(ctx);
 
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*heading*/
-	    ctx[0]) return create_if_block_2$1;
-	    return create_else_block$2;
+	    ctx[0]) return create_if_block_2$2;
+	    return create_else_block$3;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
 	  let if_block1 = current_block_type(ctx);
 	  let if_block2 =
 	  /*_isClosable*/
-	  ctx[7] && create_if_block_1$1(ctx);
+	  ctx[7] && create_if_block_1$2(ctx);
 	  return {
 	    c() {
 	      goa_focus_trap = element("goa-focus-trap");
@@ -12712,7 +12866,7 @@
 	        if (if_block0) {
 	          if_block0.p(ctx, dirty);
 	        } else {
-	          if_block0 = create_if_block_3(ctx);
+	          if_block0 = create_if_block_3$2(ctx);
 	          if_block0.c();
 	          if_block0.m(div5, t1);
 	        }
@@ -12739,7 +12893,7 @@
 	        if (if_block2) {
 	          if_block2.p(ctx, dirty);
 	        } else {
-	          if_block2 = create_if_block_1$1(ctx);
+	          if_block2 = create_if_block_1$2(ctx);
 	          if_block2.c();
 	          if_block2.m(header, null);
 	        }
@@ -12843,7 +12997,7 @@
 	} // (102:8) {#if calloutvariant !== null}
 
 
-	function create_if_block_3(ctx) {
+	function create_if_block_3$2(ctx) {
 	  let div;
 	  let goa_icon;
 	  let goa_icon_inverted_value;
@@ -12902,7 +13056,7 @@
 	} // (115:14) {:else}
 
 
-	function create_else_block$2(ctx) {
+	function create_else_block$3(ctx) {
 	  let slot;
 	  return {
 	    c() {
@@ -12924,7 +13078,7 @@
 	} // (113:14) {#if heading}
 
 
-	function create_if_block_2$1(ctx) {
+	function create_if_block_2$2(ctx) {
 	  let t;
 	  return {
 	    c() {
@@ -12953,7 +13107,7 @@
 	} // (119:12) {#if _isClosable}
 
 
-	function create_if_block_1$1(ctx) {
+	function create_if_block_1$2(ctx) {
 	  let div;
 	  let goa_icon_button;
 	  let mounted;
@@ -12991,12 +13145,12 @@
 	  };
 	}
 
-	function create_fragment$e(ctx) {
+	function create_fragment$h(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*_isOpen*/
-	  ctx[6] && create_if_block$5(ctx);
+	  ctx[6] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13023,7 +13177,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$5(ctx);
+	          if_block = create_if_block$7(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13056,7 +13210,7 @@
 	  };
 	}
 
-	function instance$c($$self, $$props, $$invalidate) {
+	function instance$f($$self, $$props, $$invalidate) {
 	  let _isClosable;
 
 	  let _isOpen;
@@ -13207,7 +13361,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$c, create_fragment$e, safe_not_equal, {
+	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      heading: 0,
 	      closable: 12,
 	      open: 1,
@@ -13303,7 +13457,7 @@
 	customElements.define("goa-modal", Modal);
 	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$4(ctx) {
+	function create_if_block$6(ctx) {
 	  let div3;
 	  let div0;
 	  let goa_icon;
@@ -13427,12 +13581,12 @@
 	  };
 	}
 
-	function create_fragment$d(ctx) {
+	function create_fragment$g(ctx) {
 	  let if_block_anchor;
 	  let current;
 	  let if_block =
 	  /*show*/
-	  ctx[1] && create_if_block$4(ctx);
+	  ctx[1] && create_if_block$6(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13459,7 +13613,7 @@
 	            transition_in(if_block, 1);
 	          }
 	        } else {
-	          if_block = create_if_block$4(ctx);
+	          if_block = create_if_block$6(ctx);
 	          if_block.c();
 	          transition_in(if_block, 1);
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13492,7 +13646,7 @@
 	  };
 	}
 
-	function instance$b($$self, $$props, $$invalidate) {
+	function instance$e($$self, $$props, $$invalidate) {
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
 	  let {
@@ -13534,7 +13688,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$b, create_fragment$d, safe_not_equal, {
+	    }, instance$e, create_fragment$g, safe_not_equal, {
 	      type: 0
 	    }, null);
 
@@ -13576,7 +13730,7 @@
 	/* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-	function create_fragment$c(ctx) {
+	function create_fragment$f(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -13616,7 +13770,7 @@
 	  };
 	}
 
-	function instance$a($$self, $$props, $$invalidate) {
+	function instance$d($$self, $$props, $$invalidate) {
 	  const Sizes = {
 	    "full": "100%"
 	  };
@@ -13657,7 +13811,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$a, create_fragment$c, safe_not_equal, {
+	    }, instance$d, create_fragment$f, safe_not_equal, {
 	      width: 1,
 	      _width: 0
 	    }, null);
@@ -13705,7 +13859,7 @@
 	customElements.define("goa-page-block", PageBlock);
 	/* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
 
-	function create_if_block$3(ctx) {
+	function create_if_block$5(ctx) {
 	  let goa_block;
 	  let span0;
 	  let t1;
@@ -13803,7 +13957,7 @@
 	  };
 	}
 
-	function create_fragment$b(ctx) {
+	function create_fragment$e(ctx) {
 	  let goa_block1;
 	  let div;
 	  let t0;
@@ -13819,7 +13973,7 @@
 	  let dispose;
 	  let if_block =
 	  /*variant*/
-	  ctx[1] === "all" && create_if_block$3(ctx);
+	  ctx[1] === "all" && create_if_block$5(ctx);
 	  return {
 	    c() {
 	      goa_block1 = element("goa-block");
@@ -13893,7 +14047,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$3(ctx);
+	          if_block = create_if_block$5(ctx);
 	          if_block.c();
 	          if_block.m(div, t0);
 	        }
@@ -13966,7 +14120,7 @@
 	  };
 	}
 
-	function instance$9($$self, $$props, $$invalidate) {
+	function instance$c($$self, $$props, $$invalidate) {
 	  let _pageCount;
 
 	  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14092,7 +14246,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$9, create_fragment$b, safe_not_equal, {
+	    }, instance$c, create_fragment$e, safe_not_equal, {
 	      pagenumber: 0,
 	      itemcount: 10,
 	      perpagecount: 11,
@@ -14402,7 +14556,7 @@
 	  };
 	}
 
-	function create_fragment$a(ctx) {
+	function create_fragment$d(ctx) {
 	  let div;
 	  let slot;
 	  let t;
@@ -14525,7 +14679,7 @@
 	  };
 	}
 
-	function instance$8($$self, $$props, $$invalidate) {
+	function instance$b($$self, $$props, $$invalidate) {
 	  let isDisabled;
 	  let isError;
 	  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -14669,7 +14823,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$8, create_fragment$a, safe_not_equal, {
+	    }, instance$b, create_fragment$d, safe_not_equal, {
 	      name: 1,
 	      value: 0,
 	      orientation: 2,
@@ -14825,7 +14979,7 @@
 	customElements.define("goa-radio-group", RadioGroup);
 	/* libs/web-components/src/components/scrollable/Scrollable.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$9(ctx) {
+	function create_fragment$c(ctx) {
 	  let div;
 	  let slot;
 	  let div_style_value;
@@ -14910,7 +15064,7 @@
 	  };
 	}
 
-	function instance$7($$self, $$props, $$invalidate) {
+	function instance$a($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "vertical"
 	  } = $$props;
@@ -14976,7 +15130,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$7, create_fragment$9, safe_not_equal, {
+	    }, instance$a, create_fragment$c, safe_not_equal, {
 	      direction: 0,
 	      hpadding: 1,
 	      vpadding: 2,
@@ -15076,10 +15230,10 @@
 	  const child_ctx = ctx.slice();
 	  child_ctx[13] = list[i];
 	  return child_ctx;
-	} // (55:2) {:else}
+	} // (81:2) {:else}
 
 
-	function create_else_block$1(ctx) {
+	function create_else_block$2(ctx) {
 	  let div;
 	  let div_class_value;
 	  return {
@@ -15120,10 +15274,131 @@
 	    }
 
 	  };
-	} // (51:29) 
+	} // (68:31) 
 
 
-	function create_if_block_2(ctx) {
+	function create_if_block_3$1(ctx) {
+	  let div3;
+	  let div2;
+	  let div0;
+	  let skeleton0;
+	  let t0;
+	  let div1;
+	  let skeleton1;
+	  let t1;
+	  let skeleton2;
+	  let t2;
+	  let skeleton3;
+	  let current;
+	  skeleton0 = new Skeleton({
+	    props: {
+	      type: "image",
+	      size:
+	      /*size*/
+	      ctx[1]
+	    }
+	  });
+	  skeleton1 = new Skeleton({
+	    props: {
+	      type: "header",
+	      size: "4"
+	    }
+	  });
+	  skeleton2 = new Skeleton({
+	    props: {
+	      type: "header",
+	      size: "1"
+	    }
+	  });
+	  skeleton3 = new Skeleton({
+	    props: {
+	      type: "lines",
+	      size:
+	      /*size*/
+	      ctx[1]
+	    }
+	  });
+	  return {
+	    c() {
+	      div3 = element("div");
+	      div2 = element("div");
+	      div0 = element("div");
+	      create_component(skeleton0.$$.fragment);
+	      t0 = space();
+	      div1 = element("div");
+	      create_component(skeleton1.$$.fragment);
+	      t1 = space();
+	      create_component(skeleton2.$$.fragment);
+	      t2 = space();
+	      create_component(skeleton3.$$.fragment);
+	      set_style(div0, "flex", "1 1 auto");
+	      set_style(div1, "flex", "2 2 auto");
+	      set_style(div2, "display", "flex");
+	      set_style(div2, "gap", "1rem");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div3, anchor);
+	      append(div3, div2);
+	      append(div2, div0);
+	      mount_component(skeleton0, div0, null);
+	      append(div2, t0);
+	      append(div2, div1);
+	      mount_component(skeleton1, div1, null);
+	      append(div1, t1);
+	      mount_component(skeleton2, div1, null);
+	      append(div3, t2);
+	      mount_component(skeleton3, div3, null);
+	      current = true;
+	    },
+
+	    p(ctx, dirty) {
+	      const skeleton0_changes = {};
+	      if (dirty &
+	      /*size*/
+	      2) skeleton0_changes.size =
+	      /*size*/
+	      ctx[1];
+	      skeleton0.$set(skeleton0_changes);
+	      const skeleton3_changes = {};
+	      if (dirty &
+	      /*size*/
+	      2) skeleton3_changes.size =
+	      /*size*/
+	      ctx[1];
+	      skeleton3.$set(skeleton3_changes);
+	    },
+
+	    i(local) {
+	      if (current) return;
+	      transition_in(skeleton0.$$.fragment, local);
+	      transition_in(skeleton1.$$.fragment, local);
+	      transition_in(skeleton2.$$.fragment, local);
+	      transition_in(skeleton3.$$.fragment, local);
+	      current = true;
+	    },
+
+	    o(local) {
+	      transition_out(skeleton0.$$.fragment, local);
+	      transition_out(skeleton1.$$.fragment, local);
+	      transition_out(skeleton2.$$.fragment, local);
+	      transition_out(skeleton3.$$.fragment, local);
+	      current = false;
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(div3);
+	      destroy_component(skeleton0);
+	      destroy_component(skeleton1);
+	      destroy_component(skeleton2);
+	      destroy_component(skeleton3);
+	    }
+
+	  };
+	} // (64:29) 
+
+
+	function create_if_block_2$1(ctx) {
 	  let each_1_anchor;
 	  let current;
 	  let each_value = Array(Number.parseInt(
@@ -15216,10 +15491,10 @@
 	    }
 
 	  };
-	} // (41:31) 
+	} // (54:31) 
 
 
-	function create_if_block_1(ctx) {
+	function create_if_block_1$1(ctx) {
 	  let div2;
 	  let div0;
 	  let skeleton0;
@@ -15338,10 +15613,10 @@
 	    }
 
 	  };
-	} // (30:2) {#if type === "card"}
+	} // (43:2) {#if type === "card"}
 
 
-	function create_if_block$2(ctx) {
+	function create_if_block$4(ctx) {
 	  let div1;
 	  let skeleton0;
 	  let t0;
@@ -15475,7 +15750,7 @@
 	    }
 
 	  };
-	} // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
+	} // (65:4) {#each Array(Number.parseInt(linecount+"")) as _item}
 
 
 	function create_each_block(ctx) {
@@ -15535,13 +15810,13 @@
 	  };
 	}
 
-	function create_fragment$8(ctx) {
+	function create_fragment$b(ctx) {
 	  let div;
 	  let current_block_type_index;
 	  let if_block;
 	  let div_style_value;
 	  let current;
-	  const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block$1];
+	  const if_block_creators = [create_if_block$4, create_if_block_1$1, create_if_block_2$1, create_if_block_3$1, create_else_block$2];
 	  const if_blocks = [];
 
 	  function select_block_type(ctx, dirty) {
@@ -15554,7 +15829,10 @@
 	    if (
 	    /*type*/
 	    ctx[3] === "lines") return 2;
-	    return 3;
+	    if (
+	    /*type*/
+	    ctx[3] === "article") return 3;
+	    return 4;
 	  }
 
 	  current_block_type_index = select_block_type(ctx);
@@ -15651,8 +15929,8 @@
 	  };
 	}
 
-	function instance$6($$self, $$props, $$invalidate) {
-	  const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
+	function instance$9($$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 {
 	    maxwidth = ""
@@ -15709,7 +15987,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$6, create_fragment$8, safe_not_equal, {
+	    }, instance$9, create_fragment$b, safe_not_equal, {
 	      maxwidth: 0,
 	      size: 1,
 	      linecount: 2,
@@ -15841,7 +16119,7 @@
 	customElements.define("goa-skeleton", Skeleton);
 	/* libs/web-components/src/components/spacer/Spacer.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$7(ctx) {
+	function create_fragment$a(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -15870,7 +16148,7 @@
 	  };
 	}
 
-	function instance$5($$self, $$props, $$invalidate) {
+	function instance$8($$self, $$props, $$invalidate) {
 	  let {
 	    hspacing = "none"
 	  } = $$props;
@@ -15880,7 +16158,8 @@
 	  let rootEl;
 	  onMount(() => {
 	    injectCss(rootEl, ":host", {
-	      width: `var(--goa-space-${hspacing})`,
+	      display: "block",
+	      width: hspacing === "fill" ? "100%" : `var(--goa-space-${hspacing})`,
 	      height: `var(--goa-space-${vspacing})`
 	    });
 	  });
@@ -15907,7 +16186,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$5, create_fragment$7, safe_not_equal, {
+	    }, instance$8, create_fragment$a, safe_not_equal, {
 	      hspacing: 1,
 	      vspacing: 2
 	    }, null);
@@ -16139,7 +16418,7 @@
 	/* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
 
 
-	function create_if_block$1(ctx) {
+	function create_if_block$3(ctx) {
 	  let svg;
 	  let circle;
 	  let circle_stroke_value;
@@ -16329,11 +16608,11 @@
 	  };
 	}
 
-	function create_fragment$6(ctx) {
+	function create_fragment$9(ctx) {
 	  let if_block_anchor;
 	  let if_block =
 	  /*ready*/
-	  ctx[6] && create_if_block$1(ctx);
+	  ctx[6] && create_if_block$3(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -16353,7 +16632,7 @@
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
-	          if_block = create_if_block$1(ctx);
+	          if_block = create_if_block$3(ctx);
 	          if_block.c();
 	          if_block.m(if_block_anchor.parentNode, if_block_anchor);
 	        }
@@ -16374,7 +16653,7 @@
 	  };
 	}
 
-	function instance$4($$self, $$props, $$invalidate) {
+	function instance$7($$self, $$props, $$invalidate) {
 	  let diameter;
 	  let strokewidth;
 	  let radius;
@@ -16505,7 +16784,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$4, create_fragment$6, safe_not_equal, {
+	    }, instance$7, create_fragment$9, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
 	      progress: 11,
@@ -16577,7 +16856,7 @@
 	customElements.define("goa-spinner", Spinner);
 	/* libs/web-components/src/components/table/Table.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$5(ctx) {
+	function create_fragment$8(ctx) {
 	  let table;
 	  let slot;
 	  let t0;
@@ -16679,7 +16958,7 @@
 	  };
 	}
 
-	function instance$3($$self, $$props, $$invalidate) {
+	function instance$6($$self, $$props, $$invalidate) {
 	  const attachSortEventHandling = function attachSortEventHandling() {
 	    return _call(tick, function () {
 	      const headings = _rootEl.querySelectorAll("goa-table-sort-header");
@@ -16793,7 +17072,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$3, create_fragment$5, safe_not_equal, {
+	    }, instance$6, create_fragment$8, safe_not_equal, {
 	      width: 0,
 	      stickyheader: 8,
 	      variant: 1,
@@ -16901,7 +17180,7 @@
 	customElements.define("goa-table", Table);
 	/* libs/web-components/src/components/table/TableSortHeader.svelte generated by Svelte v3.51.0 */
 
-	function create_else_block(ctx) {
+	function create_else_block$1(ctx) {
 	  let img;
 	  let img_src_value;
 	  return {
@@ -16946,7 +17225,7 @@
 	} // (55:2) {#if direction === "none"}
 
 
-	function create_if_block(ctx) {
+	function create_if_block$2(ctx) {
 	  let img;
 	  let img_src_value;
 	  return {
@@ -16969,7 +17248,7 @@
 	  };
 	}
 
-	function create_fragment$4(ctx) {
+	function create_fragment$7(ctx) {
 	  let button;
 	  let slot;
 	  let t;
@@ -16977,8 +17256,8 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*direction*/
-	    ctx[0] === "none") return create_if_block;
-	    return create_else_block;
+	    ctx[0] === "none") return create_if_block$2;
+	    return create_else_block$1;
 	  }
 
 	  let current_block_type = select_block_type(ctx);
@@ -17024,7 +17303,7 @@
 	  };
 	}
 
-	function instance$2($$self, $$props, $$invalidate) {
+	function instance$5($$self, $$props, $$invalidate) {
 	  let {
 	    direction = "none"
 	  } = $$props;
@@ -17044,7 +17323,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$5, create_fragment$7, safe_not_equal, {
 	      direction: 0
 	    }, null);
 
@@ -17080,7 +17359,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$3(ctx) {
+	function create_fragment$6(ctx) {
 	  let div;
 	  let textarea;
 	  let textarea_aria_label_value;
@@ -17261,7 +17540,7 @@
 	  };
 	}
 
-	function instance$1($$self, $$props, $$invalidate) {
+	function instance$4($$self, $$props, $$invalidate) {
 	  let isError;
 	  let isDisabled;
 	  let isReadonly;
@@ -17378,7 +17657,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$1, create_fragment$3, safe_not_equal, {
+	    }, instance$4, create_fragment$6, safe_not_equal, {
 	      name: 0,
 	      value: 1,
 	      placeholder: 2,
@@ -17582,7 +17861,7 @@
 	customElements.define("goa-textarea", TextArea);
 	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
 
-	function create_fragment$2(ctx) {
+	function create_fragment$5(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -17626,7 +17905,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$2, safe_not_equal, {}, null);
+	    }, null, create_fragment$5, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -17640,7 +17919,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$1(ctx) {
+	function create_fragment$4(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -17677,7 +17956,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$1, safe_not_equal, {}, null);
+	    }, null, create_fragment$4, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -17691,7 +17970,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(ctx) {
+	function create_fragment$3(ctx) {
 	  let div;
 	  let header;
 	  let t0;
@@ -17761,7 +18040,7 @@
 	  };
 	}
 
-	function instance($$self, $$props, $$invalidate) {
+	function instance$3($$self, $$props, $$invalidate) {
 	  let {
 	    navcolumnwidth = ""
 	  } = $$props;
@@ -17785,7 +18064,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance, create_fragment, safe_not_equal, {
+	    }, instance$3, create_fragment$3, safe_not_equal, {
 	      navcolumnwidth: 0,
 	      maxcontentwidth: 1
 	    }, null);
@@ -17831,75 +18110,1363 @@
 	}
 
 	customElements.define("goa-two-column-layout", TwoColumnLayout);
+	/* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */
 
-	/*! *****************************************************************************
-	Copyright (c) Microsoft Corporation.
-
-	Permission to use, copy, modify, and/or distribute this software for any
-	purpose with or without fee is hereby granted.
-
-	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-	PERFORMANCE OF THIS SOFTWARE.
-	***************************************************************************** */
-
-	var __assign = function() {
-	    __assign = Object.assign || function __assign(t) {
-	        for (var s, i = 1, n = arguments.length; i < n; i++) {
-	            s = arguments[i];
-	            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-	        }
-	        return t;
-	    };
-	    return __assign.apply(this, arguments);
-	};
-
-	function __rest(s, e) {
-	    var t = {};
-	    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-	        t[p] = s[p];
-	    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-	        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-	            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-	                t[p[i]] = s[p[i]];
-	        }
-	    return t;
+	function create_if_block$1(ctx) {
+	  let progress0;
+	  let t;
+	  let progress1;
+	  return {
+	    c() {
+	      progress0 = element("progress");
+	      t = space();
+	      progress1 = element("progress");
+	      attr(progress0, "class", "horizontal");
+	      progress0.value =
+	      /*_progress*/
+	      ctx[11];
+	      attr(progress0, "max", "100");
+	      attr(progress1, "class", "vertical");
+	      progress1.value =
+	      /*_progress*/
+	      ctx[11];
+	      attr(progress1, "max", "100");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, progress0, anchor);
+	      insert(target, t, anchor);
+	      insert(target, progress1, anchor);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*_progress*/
+	      2048) {
+	        progress0.value =
+	        /*_progress*/
+	        ctx[11];
+	      }
+
+	      if (dirty &
+	      /*_progress*/
+	      2048) {
+	        progress1.value =
+	        /*_progress*/
+	        ctx[11];
+	      }
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(progress0);
+	      if (detaching) detach(t);
+	      if (detaching) detach(progress1);
+	    }
+
+	  };
 	}
 
-	var GoAAccordion = function GoAAccordion(_a) {
-	  var open = _a.open,
-	      heading = _a.heading,
-	      headingSize = _a.headingSize,
-	      secondaryText = _a.secondaryText,
-	      headingContent = _a.headingContent,
-	      testid = _a.testid,
-	      children = _a.children,
-	      mt = _a.mt,
-	      mr = _a.mr,
-	      mb = _a.mb,
-	      ml = _a.ml;
-	  return jsxRuntime.jsxs("goa-accordion", __assign({
-	    open: open,
-	    headingSize: headingSize,
-	    heading: heading,
-	    secondaryText: secondaryText,
-	    "data-testid": testid,
-	    mt: mt,
-	    mr: mr,
-	    mb: mb,
-	    ml: ml
-	  }, {
-	    children: [children, headingContent && jsxRuntime.jsx("div", __assign({
-	      slot: "headingcontent"
-	    }, {
-	      children: headingContent
-	    }), void 0)]
-	  }), void 0);
-	};
+	function create_fragment$2(ctx) {
+	  let section;
+	  let div1;
+	  let t;
+	  let div0;
+	  let div1_style_value;
+	  let if_block =
+	  /*_steps*/
+	  ctx[4].length > 0 &&
+	  /*_showProgressBars*/
+	  ctx[10] && create_if_block$1(ctx);
+	  return {
+	    c() {
+	      section = element("section");
+	      div1 = element("div");
+	      if (if_block) if_block.c();
+	      t = space();
+	      div0 = element("div");
+	      div0.innerHTML = `<goa-grid minchildwidth="1px"><slot></slot></goa-grid>`;
+	      this.c = noop;
+	      attr(div0, "class", "slots");
+	      attr(div1, "class", "form-stepper");
+	      attr(div1, "style", div1_style_value = `
+      ${calculateMargin(
+      /*mt*/
+      ctx[0],
+      /*mr*/
+      ctx[1],
+      /*mb*/
+      ctx[2],
+      /*ml*/
+      ctx[3])}; 
+      --progress: ${
+      /*_progress*/
+      ctx[11]}%;
+      --step-width: ${
+      /*_stepWidth*/
+      ctx[7]}px;
+      --step-height: ${
+      /*_stepHeight*/
+      ctx[8]}px;
+      --height: ${
+      /*_progressHeight*/
+      ctx[9]}px;
+    `);
+	      attr(section, "role", "list");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, section, anchor);
+	      append(section, div1);
+	      if (if_block) if_block.m(div1, null);
+	      append(div1, t);
+	      append(div1, div0);
+	      /*div0_binding*/
+
+	      ctx[15](div0);
+	      /*div1_binding*/
+
+	      ctx[16](div1);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (
+	      /*_steps*/
+	      ctx[4].length > 0 &&
+	      /*_showProgressBars*/
+	      ctx[10]) {
+	        if (if_block) {
+	          if_block.p(ctx, dirty);
+	        } else {
+	          if_block = create_if_block$1(ctx);
+	          if_block.c();
+	          if_block.m(div1, t);
+	        }
+	      } else if (if_block) {
+	        if_block.d(1);
+	        if_block = null;
+	      }
+
+	      if (dirty &
+	      /*mt, mr, mb, ml, _progress, _stepWidth, _stepHeight, _progressHeight*/
+	      2959 && div1_style_value !== (div1_style_value = `
+      ${calculateMargin(
+      /*mt*/
+      ctx[0],
+      /*mr*/
+      ctx[1],
+      /*mb*/
+      ctx[2],
+      /*ml*/
+      ctx[3])}; 
+      --progress: ${
+      /*_progress*/
+      ctx[11]}%;
+      --step-width: ${
+      /*_stepWidth*/
+      ctx[7]}px;
+      --step-height: ${
+      /*_stepHeight*/
+      ctx[8]}px;
+      --height: ${
+      /*_progressHeight*/
+      ctx[9]}px;
+    `)) {
+	        attr(div1, "style", div1_style_value);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(section);
+	      if (if_block) if_block.d();
+	      /*div0_binding*/
+
+	      ctx[15](null);
+	      /*div1_binding*/
+
+	      ctx[16](null);
+	    }
+
+	  };
+	}
+
+	function instance$2($$self, $$props, $$invalidate) {
+	  let _progress;
+
+	  let {
+	    step = -1
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = null
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props; // =======
+	  // Private
+	  // =======
+
+	  let _rootEl; // events bound to it
+
+
+	  let _gridEl; // used to obtain component dimensions
+
+
+	  let _steps = []; // step DOM elements to allow for width calculations
+
+	  let _stepWidth; // calculated x distance (px) between each step point
+
+
+	  let _stepHeight; // calculated y distance (px) between each step point
+
+
+	  let _progressHeight; // allow css calculations for mobile view
+
+
+	  let _maxAllowedStep = 1; // prevent users from using the stepper to access future steps
+
+	  let _maxProgressStep = 1; // controls the progress bars value
+
+	  let _showProgressBars = false; // delays the showing of the progress bars to prevent it from
+
+	  onMount(function () {
+	    return _call(tick, function () {
+	      // children steps
+	      const slot = _rootEl.querySelector("slot");
+
+	      if (slot) {
+	        $$invalidate(4, _steps = slot.assignedElements());
+	      } else {
+	        // for unit tests only
+	        $$invalidate(4, _steps = [..._rootEl.querySelector("goa-grid").children]);
+	      } // allow access to all steps if not step property is provided
+
+
+	      if (step <= 0) {
+	        $$invalidate(12, step = 1);
+	        setTimeout(() => {
+	          dispatch(step);
+	        }, 1);
+	        $$invalidate(13, _maxAllowedStep = _steps.length);
+	      } // set step a11y label
+
+
+	      _steps.forEach((_step, index) => {
+	        const s = _step;
+	        s.setAttribute("arialabel", `Step ${index + 1} of ${_steps.length}`);
+	        s.setAttribute("childindex", `${index + 1}`);
+	      }); // handle click events from progress items
+
+
+	      _rootEl.addEventListener("_click", e => {
+	        $$invalidate(12, step = e.detail);
+	        dispatch(step);
+	      });
+
+	      setCurrentStepStatus(step);
+	      calcStepDims();
+	      setTimeout(() => {
+	        $$invalidate(10, _showProgressBars = true);
+	      }, 10); // add listener to recalculate the step widths
+
+	      window.addEventListener('resize', calcStepDims);
+	      window.addEventListener('orientationchange', calcStepDims);
+	      return () => {
+	        window.removeEventListener('resize', calcStepDims);
+	        window.removeEventListener('orientationchange', calcStepDims);
+	      };
+	    });
+	  });
+
+	  function dispatch(step) {
+	    _rootEl.dispatchEvent(new CustomEvent("_change", {
+	      composed: true,
+	      bubbles: true,
+	      detail: {
+	        step
+	      }
+	    }));
+	  }
+
+	  function setCurrentStepStatus(step) {
+	    _steps.forEach((stepEl, index) => {
+	      stepEl.setAttribute("current", index === step - 1 ? "true" : "false");
+	    });
+	  }
+
+	  function calcStepDims() {
+	    // timeout required, without it the _steps elements width was not yet updated
+	    setTimeout(() => {
+	      $$invalidate(7, _stepWidth = _steps.length > 0 && _steps[0].offsetWidth);
+	      $$invalidate(8, _stepHeight = _steps.length > 0 && _steps[0].offsetHeight);
+	      $$invalidate(9, _progressHeight = _gridEl === null || _gridEl === void 0 ? void 0 : _gridEl.offsetHeight);
+	    }, 1);
+	  }
+
+	  function div0_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _gridEl = $$value;
+	      $$invalidate(6, _gridEl);
+	    });
+	  }
+
+	  function div1_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _rootEl = $$value;
+	      $$invalidate(5, _rootEl);
+	    });
+	  }
+
+	  $$self.$$set = $$props => {
+	    if ('step' in $$props) $$invalidate(12, step = $$props.step);
+	    if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*_steps, step, _maxProgressStep, _maxAllowedStep*/
+	    28688) {
+	      {
+	        if (_steps.length) {
+	          if (step > _maxProgressStep) $$invalidate(14, _maxProgressStep = step);
+	          if (step > _maxAllowedStep) $$invalidate(13, _maxAllowedStep = step);
+
+	          _steps.forEach((stepEl, index) => {
+	            stepEl.setAttribute("enabled", index > _maxAllowedStep - 1 ? "false" : "true");
+	          });
+	        }
+	      }
+	    }
+
+	    if ($$self.$$.dirty &
+	    /*_maxProgressStep, _steps*/
+	    16400) {
+	      // being temporarily visible with an unwanted offset
+	      // ========
+	      // Reactive
+	      // ========
+	      // handles the 1-based step value and the number of line segments is one less
+	      // than the number of steps
+	      $$invalidate(11, _progress = (_maxProgressStep - 1) / (_steps.length - 1) * 100);
+	    }
+
+	    if ($$self.$$.dirty &
+	    /*step*/
+	    4096) {
+	      setCurrentStepStatus(step);
+	    }
+	  };
+
+	  return [mt, mr, mb, ml, _steps, _rootEl, _gridEl, _stepWidth, _stepHeight, _progressHeight, _showProgressBars, _progress, step, _maxAllowedStep, _maxProgressStep, div0_binding, div1_binding];
+	}
+
+	class FormStepper extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>.form-stepper{position:relative}.slots{position:relative;inset:0;z-index:2}progress{position:absolute;z-index:1;-webkit-appearance:none;appearance:none;height:4px;border:none;background:var(--goa-color-greyscale-200);pointer-events:none}progress.horizontal{display:block;top:calc(1.75rem + (2.5rem / 2) - 2px);left:calc(var(--step-width) / 2);width:calc(100% - var(--step-width))}progress.vertical{display:none;width:calc(var(--height) - var(--step-height));transform:rotate(90deg) 
+      translate(
+        calc(50% + 1.25rem + 1.75rem), 
+        calc((var(--height) - var(--step-height)) / 2 - 1.25rem - 1.75rem)
+      )}progress::-webkit-progress-value{background:var(--goa-color-interactive-default)}progress::-webkit-progress-bar{background:var(--goa-color-greyscale-200)}progress::-moz-progress-bar{background:var(--goa-color-interactive-default)}@media(max-width: 639px){progress.horizontal{display:none}progress.vertical{display:inline-block}.form-stepper{display:inline-block}}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$2, create_fragment$2, safe_not_equal, {
+	      step: 12,
+	      mt: 0,
+	      mr: 1,
+	      mb: 2,
+	      ml: 3
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["step", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get step() {
+	    return this.$$.ctx[12];
+	  }
+
+	  set step(step) {
+	    this.$$set({
+	      step
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-form-stepper", FormStepper);
+	/* libs/web-components/src/components/form-step/FormStep.svelte generated by Svelte v3.51.0 */
+
+	function create_else_block(ctx) {
+	  let div;
+	  let t;
+	  return {
+	    c() {
+	      div = element("div");
+	      t = text(
+	      /*childindex*/
+	      ctx[1]);
+	      attr(div, "data-testid", "child-index");
+	      attr(div, "class", "step-number");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, t);
+	    },
+
+	    p(ctx, dirty) {
+	      if (dirty &
+	      /*childindex*/
+	      2) set_data(t,
+	      /*childindex*/
+	      ctx[1]);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	} // (148:38) 
+
+
+	function create_if_block_3(ctx) {
+	  let goa_icon;
+	  return {
+	    c() {
+	      goa_icon = element("goa-icon");
+	      set_custom_element_data(goa_icon, "type", "remove");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, goa_icon, anchor);
+	    },
+
+	    p: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(goa_icon);
+	    }
+
+	  };
+	} // (146:36) 
+
+
+	function create_if_block_2(ctx) {
+	  let goa_icon;
+	  return {
+	    c() {
+	      goa_icon = element("goa-icon");
+	      set_custom_element_data(goa_icon, "type", "checkmark");
+	      set_custom_element_data(goa_icon, "inverted", "");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, goa_icon, anchor);
+	    },
+
+	    p: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(goa_icon);
+	    }
+
+	  };
+	} // (144:4) {#if _isCurrent}
+
+
+	function create_if_block_1(ctx) {
+	  let goa_icon;
+	  return {
+	    c() {
+	      goa_icon = element("goa-icon");
+	      set_custom_element_data(goa_icon, "type", "pencil");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, goa_icon, anchor);
+	    },
+
+	    p: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(goa_icon);
+	    }
+
+	  };
+	} // (156:4) {#if status === "incomplete"}
+
+
+	function create_if_block(ctx) {
+	  let div;
+	  return {
+	    c() {
+	      div = element("div");
+	      div.textContent = "Partially complete";
+	      attr(div, "class", "subtext");
+	      attr(div, "data-testid", "subtext");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	    },
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	function create_fragment$1(ctx) {
+	  let label;
+	  let input;
+	  let input_disabled_value;
+	  let t0;
+	  let div0;
+	  let t1;
+	  let div2;
+	  let div1;
+	  let t2;
+	  let t3;
+	  let label_aria_disabled_value;
+	  let label_aria_current_value;
+	  let label_aria_label_value;
+
+	  function select_block_type(ctx, dirty) {
+	    if (
+	    /*_isCurrent*/
+	    ctx[7]) return create_if_block_1;
+	    if (
+	    /*status*/
+	    ctx[3] === "complete") return create_if_block_2;
+	    if (
+	    /*status*/
+	    ctx[3] === "incomplete") return create_if_block_3;
+	    return create_else_block;
+	  }
+
+	  let current_block_type = select_block_type(ctx);
+	  let if_block0 = current_block_type(ctx);
+	  let if_block1 =
+	  /*status*/
+	  ctx[3] === "incomplete" && create_if_block();
+	  return {
+	    c() {
+	      label = element("label");
+	      input = element("input");
+	      t0 = space();
+	      div0 = element("div");
+	      if_block0.c();
+	      t1 = space();
+	      div2 = element("div");
+	      div1 = element("div");
+	      t2 = text(
+	      /*text*/
+	      ctx[0]);
+	      t3 = space();
+	      if (if_block1) if_block1.c();
+	      this.c = noop;
+	      attr(input, "id",
+	      /*text*/
+	      ctx[0]);
+	      attr(input, "type", "checkbox");
+	      input.checked =
+	      /*_isCurrent*/
+	      ctx[7];
+	      input.disabled = input_disabled_value = !
+	      /*_isEnabled*/
+	      ctx[6];
+	      attr(div0, "data-testid", "status");
+	      attr(div0, "class", "status");
+	      attr(div1, "class", "text");
+	      attr(div1, "data-testid", "text");
+	      attr(div2, "class", "details");
+	      attr(label, "id",
+	      /*arialabel*/
+	      ctx[2]);
+	      attr(label, "role", "listitem");
+	      attr(label, "for",
+	      /*text*/
+	      ctx[0]);
+	      attr(label, "data-status",
+	      /*status*/
+	      ctx[3]);
+	      attr(label, "aria-disabled", label_aria_disabled_value = !
+	      /*_isEnabled*/
+	      ctx[6] ? "true" : "false");
+	      attr(label, "aria-current", label_aria_current_value =
+	      /*_isCurrent*/
+	      ctx[7] ? "step" : "false");
+	      attr(label, "aria-label", label_aria_label_value = `${
+      /*arialabel*/
+      ctx[2]} ${
+      /*text*/
+      ctx[0]} ${
+      /*status*/
+      ctx[3] || ""}`);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, label, anchor);
+	      append(label, input);
+	      /*input_binding*/
+
+	      ctx[10](input);
+	      append(label, t0);
+	      append(label, div0);
+	      if_block0.m(div0, null);
+	      append(label, t1);
+	      append(label, div2);
+	      append(div2, div1);
+	      append(div1, t2);
+	      append(div2, t3);
+	      if (if_block1) if_block1.m(div2, null);
+	      /*label_binding*/
+
+	      ctx[11](label);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*text*/
+	      1) {
+	        attr(input, "id",
+	        /*text*/
+	        ctx[0]);
+	      }
+
+	      if (dirty &
+	      /*_isCurrent*/
+	      128) {
+	        input.checked =
+	        /*_isCurrent*/
+	        ctx[7];
+	      }
+
+	      if (dirty &
+	      /*_isEnabled*/
+	      64 && input_disabled_value !== (input_disabled_value = !
+	      /*_isEnabled*/
+	      ctx[6])) {
+	        input.disabled = input_disabled_value;
+	      }
+
+	      if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
+	        if_block0.p(ctx, dirty);
+	      } else {
+	        if_block0.d(1);
+	        if_block0 = current_block_type(ctx);
+
+	        if (if_block0) {
+	          if_block0.c();
+	          if_block0.m(div0, null);
+	        }
+	      }
+
+	      if (dirty &
+	      /*text*/
+	      1) set_data(t2,
+	      /*text*/
+	      ctx[0]);
+
+	      if (
+	      /*status*/
+	      ctx[3] === "incomplete") {
+	        if (if_block1) ;else {
+	          if_block1 = create_if_block();
+	          if_block1.c();
+	          if_block1.m(div2, null);
+	        }
+	      } else if (if_block1) {
+	        if_block1.d(1);
+	        if_block1 = null;
+	      }
+
+	      if (dirty &
+	      /*arialabel*/
+	      4) {
+	        attr(label, "id",
+	        /*arialabel*/
+	        ctx[2]);
+	      }
+
+	      if (dirty &
+	      /*text*/
+	      1) {
+	        attr(label, "for",
+	        /*text*/
+	        ctx[0]);
+	      }
+
+	      if (dirty &
+	      /*status*/
+	      8) {
+	        attr(label, "data-status",
+	        /*status*/
+	        ctx[3]);
+	      }
+
+	      if (dirty &
+	      /*_isEnabled*/
+	      64 && label_aria_disabled_value !== (label_aria_disabled_value = !
+	      /*_isEnabled*/
+	      ctx[6] ? "true" : "false")) {
+	        attr(label, "aria-disabled", label_aria_disabled_value);
+	      }
+
+	      if (dirty &
+	      /*_isCurrent*/
+	      128 && label_aria_current_value !== (label_aria_current_value =
+	      /*_isCurrent*/
+	      ctx[7] ? "step" : "false")) {
+	        attr(label, "aria-current", label_aria_current_value);
+	      }
+
+	      if (dirty &
+	      /*arialabel, text, status*/
+	      13 && label_aria_label_value !== (label_aria_label_value = `${
+      /*arialabel*/
+      ctx[2]} ${
+      /*text*/
+      ctx[0]} ${
+      /*status*/
+      ctx[3] || ""}`)) {
+	        attr(label, "aria-label", label_aria_label_value);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(label);
+	      /*input_binding*/
+
+	      ctx[10](null);
+	      if_block0.d();
+	      if (if_block1) if_block1.d();
+	      /*label_binding*/
+
+	      ctx[11](null);
+	    }
+
+	  };
+	}
+
+	function instance$1($$self, $$props, $$invalidate) {
+	  let _isCurrent;
+
+	  let _isEnabled;
+
+	  let {
+	    text
+	  } = $$props;
+	  let {
+	    current = "false"
+	  } = $$props;
+	  let {
+	    enabled = "false"
+	  } = $$props;
+	  let {
+	    childindex = ""
+	  } = $$props;
+	  let {
+	    arialabel = ""
+	  } = $$props;
+	  let {
+	    status
+	  } = $$props; // =======
+	  // Private
+	  // =======
+
+	  let _stepEl;
+
+	  let _checkbox;
+
+	  onMount(() => {
+	    // event binding
+	    _stepEl.addEventListener("click", () => {
+	      if (!_isEnabled) return;
+	      $$invalidate(5, _checkbox.checked = !_checkbox.checked, _checkbox);
+
+	      _stepEl.dispatchEvent(new CustomEvent("_click", {
+	        composed: true,
+	        bubbles: true,
+	        detail: +childindex
+	      }));
+	    });
+	  });
+
+	  function input_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _checkbox = $$value;
+	      $$invalidate(5, _checkbox);
+	    });
+	  }
+
+	  function label_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _stepEl = $$value;
+	      $$invalidate(4, _stepEl);
+	    });
+	  }
+
+	  $$self.$$set = $$props => {
+	    if ('text' in $$props) $$invalidate(0, text = $$props.text);
+	    if ('current' in $$props) $$invalidate(8, current = $$props.current);
+	    if ('enabled' in $$props) $$invalidate(9, enabled = $$props.enabled);
+	    if ('childindex' in $$props) $$invalidate(1, childindex = $$props.childindex);
+	    if ('arialabel' in $$props) $$invalidate(2, arialabel = $$props.arialabel);
+	    if ('status' in $$props) $$invalidate(3, status = $$props.status);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*current*/
+	    256) {
+	      // ========
+	      // Reactive
+	      // ========
+	      $$invalidate(7, _isCurrent = toBoolean(current));
+	    }
+
+	    if ($$self.$$.dirty &
+	    /*enabled*/
+	    512) {
+	      $$invalidate(6, _isEnabled = toBoolean(enabled));
+	    }
+	  };
+
+	  return [text, childindex, arialabel, status, _stepEl, _checkbox, _isEnabled, _isCurrent, current, enabled, input_binding, label_binding];
+	}
+
+	class FormStep extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
+  }[data-status=complete] .status{background-color:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
+    [data-status=complete], 
+    [data-status=incomplete], 
+    [aria-current="step"]
+  ) .status{border-color:var(--goa-color-greyscale-500)}.text{font:var(--goa-typography-body-s)}.subtext{margin-top:0.25rem;font:var(--goa-typography-body-xs);color:var(--goa-color-text-secondary)}.details{margin-top:0.75rem}@media(max-width: 639px){[role="listitem"]{flex-direction:row;align-items:center;text-align:start}.details{margin-left:1rem;margin-top:0}}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$1, create_fragment$1, safe_not_equal, {
+	      text: 0,
+	      current: 8,
+	      enabled: 9,
+	      childindex: 1,
+	      arialabel: 2,
+	      status: 3
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["text", "current", "enabled", "childindex", "arialabel", "status"];
+	  }
+
+	  get text() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set text(text) {
+	    this.$$set({
+	      text
+	    });
+	    flush();
+	  }
+
+	  get current() {
+	    return this.$$.ctx[8];
+	  }
+
+	  set current(current) {
+	    this.$$set({
+	      current
+	    });
+	    flush();
+	  }
+
+	  get enabled() {
+	    return this.$$.ctx[9];
+	  }
+
+	  set enabled(enabled) {
+	    this.$$set({
+	      enabled
+	    });
+	    flush();
+	  }
+
+	  get childindex() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set childindex(childindex) {
+	    this.$$set({
+	      childindex
+	    });
+	    flush();
+	  }
+
+	  get arialabel() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set arialabel(arialabel) {
+	    this.$$set({
+	      arialabel
+	    });
+	    flush();
+	  }
+
+	  get status() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set status(status) {
+	    this.$$set({
+	      status
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-form-step", FormStep);
+	/* libs/web-components/src/components/pages/Pages.svelte generated by Svelte v3.51.0 */
+
+	function create_fragment(ctx) {
+	  let div;
+	  let slot;
+	  let div_style_value;
+	  return {
+	    c() {
+	      div = element("div");
+	      slot = element("slot");
+	      this.c = noop;
+	      attr(div, "style", div_style_value = calculateMargin(
+	      /*mt*/
+	      ctx[0],
+	      /*mr*/
+	      ctx[1],
+	      /*mb*/
+	      ctx[2],
+	      /*ml*/
+	      ctx[3]));
+	      attr(div, "class", "pages");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	      append(div, slot);
+	      /*div_binding*/
+
+	      ctx[6](div);
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*mt, mr, mb, ml*/
+	      15 && div_style_value !== (div_style_value = calculateMargin(
+	      /*mt*/
+	      ctx[0],
+	      /*mr*/
+	      ctx[1],
+	      /*mb*/
+	      ctx[2],
+	      /*ml*/
+	      ctx[3]))) {
+	        attr(div, "style", div_style_value);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	      /*div_binding*/
+
+	      ctx[6](null);
+	    }
+
+	  };
+	}
+
+	function instance($$self, $$props, $$invalidate) {
+	  let {
+	    current = 1
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = null
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props; // Private
+
+	  let _rootEl; // Hooks
+
+
+	  onMount(function () {
+	    return _call(tick, function () {
+	      setCurrentPage(current);
+	    });
+	  });
+
+	  function setCurrentPage(current) {
+	    if (!_rootEl) return;
+	    const children = getChildren();
+	    children.forEach((child, index) => {
+	      const _child = child;
+	      _child.style.display = index + 1 === +current ? "block" : "none";
+	    });
+	  }
+
+	  function getChildren() {
+	    const slot = _rootEl.querySelector("slot");
+
+	    if (slot) {
+	      return [...slot.assignedElements()];
+	    } else {
+	      return [..._rootEl.children]; // unit tests
+	    }
+	  }
+
+	  function div_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _rootEl = $$value;
+	      $$invalidate(4, _rootEl);
+	    });
+	  }
+
+	  $$self.$$set = $$props => {
+	    if ('current' in $$props) $$invalidate(5, current = $$props.current);
+	    if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*current*/
+	    32) {
+	      // Reactive
+	      setCurrentPage(current);
+	    }
+	  };
+
+	  return [mt, mr, mb, ml, _rootEl, current, div_binding];
+	}
+
+	class Pages extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance, create_fragment, safe_not_equal, {
+	      current: 5,
+	      mt: 0,
+	      mr: 1,
+	      mb: 2,
+	      ml: 3
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["current", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get current() {
+	    return this.$$.ctx[5];
+	  }
+
+	  set current(current) {
+	    this.$$set({
+	      current
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-pages", Pages);
+
+	/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation.
+
+	Permission to use, copy, modify, and/or distribute this software for any
+	purpose with or without fee is hereby granted.
+
+	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+	PERFORMANCE OF THIS SOFTWARE.
+	***************************************************************************** */
+
+	var __assign = function() {
+	    __assign = Object.assign || function __assign(t) {
+	        for (var s, i = 1, n = arguments.length; i < n; i++) {
+	            s = arguments[i];
+	            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+	        }
+	        return t;
+	    };
+	    return __assign.apply(this, arguments);
+	};
+
+	function __rest(s, e) {
+	    var t = {};
+	    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+	        t[p] = s[p];
+	    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+	        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+	            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+	                t[p[i]] = s[p[i]];
+	        }
+	    return t;
+	}
+
+	function GoAPages(props) {
+	  return jsxRuntime.jsx("goa-pages", __assign({
+	    current: props.current,
+	    ml: props.ml,
+	    mr: props.mr,
+	    mt: props.mt,
+	    mb: props.mb
+	  }, {
+	    children: props.children
+	  }), void 0);
+	}
+
+	var GoAAccordion = function GoAAccordion(_a) {
+	  var open = _a.open,
+	      heading = _a.heading,
+	      headingSize = _a.headingSize,
+	      secondaryText = _a.secondaryText,
+	      headingContent = _a.headingContent,
+	      testid = _a.testid,
+	      children = _a.children,
+	      mt = _a.mt,
+	      mr = _a.mr,
+	      mb = _a.mb,
+	      ml = _a.ml;
+	  return jsxRuntime.jsxs("goa-accordion", __assign({
+	    open: open,
+	    headingSize: headingSize,
+	    heading: heading,
+	    secondaryText: secondaryText,
+	    "data-testid": testid,
+	    mt: mt,
+	    mr: mr,
+	    mb: mb,
+	    ml: ml
+	  }, {
+	    children: [children, headingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "headingcontent"
+	    }, {
+	      children: headingContent
+	    }), void 0)]
+	  }), void 0);
+	};
+
+	function GoAFormStep(props) {
+	  return jsxRuntime.jsx("goa-form-step", {
+	    text: props.text,
+	    status: props.status
+	  }, void 0);
+	}
+
+	function GoAFormStepper(_a) {
+	  var testId = _a.testId,
+	      step = _a.step,
+	      mt = _a.mt,
+	      mb = _a.mb,
+	      ml = _a.ml,
+	      mr = _a.mr,
+	      onChange = _a.onChange,
+	      children = _a.children;
+	  var ref = react.useRef(null);
+	  react.useEffect(function () {
+	    if (!ref.current) {
+	      return;
+	    }
+
+	    var current = ref.current;
+
+	    var changeListener = function changeListener(e) {
+	      var step = e.detail.step;
+	      onChange === null || onChange === void 0 ? void 0 : onChange(step);
+	    };
+
+	    current.addEventListener("_change", changeListener);
+	    return function () {
+	      current.removeEventListener("_change", changeListener);
+	    };
+	  }, [ref, onChange]);
+	  return jsxRuntime.jsx("goa-form-stepper", __assign({
+	    ref: ref,
+	    "data-testid": testId,
+	    step: step,
+	    mt: mt,
+	    mr: mr,
+	    mb: mb,
+	    ml: ml
+	  }, {
+	    children: children
+	  }), void 0);
+	}
 
 	var GoAAppHeader = function GoAAppHeader(_a) {
 	  var heading = _a.heading,
@@ -19247,6 +20814,8 @@
 	exports.GoADropdownOption = GoADropdownOption;
 	exports.GoAEmergencyBadge = GoAEmergencyBadge;
 	exports.GoAFormItem = GoAFormItem;
+	exports.GoAFormStep = GoAFormStep;
+	exports.GoAFormStepper = GoAFormStepper;
 	exports.GoAGrid = GoAGrid;
 	exports.GoAHeroBanner = GoAHeroBanner;
 	exports.GoAHeroBannerActions = GoAHeroBannerActions;
@@ -19273,6 +20842,7 @@
 	exports.GoANotification = GoANotification;
 	exports.GoAOneColumnLayout = GoAOneColumnLayout;
 	exports.GoAPageBlock = GoAPageBlock;
+	exports.GoAPages = GoAPages;
 	exports.GoAPagination = GoAPagination;
 	exports.GoARadioGroup = GoARadioGroup;
 	exports.GoARadioItem = GoARadioItem;