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

package/react-components.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { parseISO, format } from 'date-fns';
 
@@ -210,6 +210,50 @@ function custom_event(type, detail, {
   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 = {};
 
@@ -1108,7 +1152,7 @@ function typeValidator(message, values, required = false) {
 /* 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;
@@ -1311,7 +1355,7 @@ function create_fragment$J(ctx) {
   };
 }
 
-function instance$D($$self, $$props, $$invalidate) {
+function instance$G($$self, $$props, $$invalidate) {
   let isOpen;
   const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
   let {
@@ -1389,7 +1433,7 @@ class Accordion extends SvelteElement {
       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,
@@ -1521,7 +1565,7 @@ class Accordion extends SvelteElement {
 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;
@@ -1578,7 +1622,7 @@ function create_else_block$6(ctx) {
 } // (19:4) {#if url}
 
 
-function create_if_block$j(ctx) {
+function create_if_block$l(ctx) {
   let a;
   let img0;
   let img0_src_value;
@@ -1645,7 +1689,7 @@ function create_if_block$j(ctx) {
   };
 }
 
-function create_fragment$I(ctx) {
+function create_fragment$L(ctx) {
   let div2;
   let div1;
   let t;
@@ -1655,8 +1699,8 @@ function create_fragment$I(ctx) {
   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);
@@ -1729,7 +1773,7 @@ function create_fragment$I(ctx) {
   };
 }
 
-function instance$C($$self, $$props, $$invalidate) {
+function instance$F($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1761,7 +1805,7 @@ class AppHeader extends SvelteElement {
       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,
@@ -1833,7 +1877,7 @@ class AppHeader extends SvelteElement {
 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() {
@@ -1856,7 +1900,7 @@ function create_else_block$5(ctx) {
 } // (45:2) {#if showIcon}
 
 
-function create_if_block_1$a(ctx) {
+function create_if_block_1$c(ctx) {
   let goa_icon;
   return {
     c() {
@@ -1889,7 +1933,7 @@ function create_if_block_1$a(ctx) {
 } // (50:2) {#if content}
 
 
-function create_if_block$i(ctx) {
+function create_if_block$k(ctx) {
   let div;
   let t;
   return {
@@ -1921,7 +1965,7 @@ function create_if_block$i(ctx) {
   };
 }
 
-function create_fragment$H(ctx) {
+function create_fragment$K(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1930,15 +1974,15 @@ function create_fragment$H(ctx) {
   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");
@@ -1995,7 +2039,7 @@ function create_fragment$H(ctx) {
         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);
         }
@@ -2057,7 +2101,7 @@ function create_fragment$H(ctx) {
   };
 }
 
-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);
@@ -2137,7 +2181,7 @@ class Badge extends SvelteElement {
       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,
@@ -2257,7 +2301,7 @@ class Badge extends SvelteElement {
 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;
@@ -2331,7 +2375,7 @@ function create_fragment$G(ctx) {
   };
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$D($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -2375,7 +2419,7 @@ class Block extends SvelteElement {
       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,
@@ -2483,17 +2527,17 @@ class Block extends SvelteElement {
 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();
@@ -2522,7 +2566,7 @@ function create_else_block$4(ctx) {
         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);
         }
@@ -2537,7 +2581,7 @@ function create_else_block$4(ctx) {
         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);
         }
@@ -2560,7 +2604,7 @@ function create_else_block$4(ctx) {
 } // (46:2) {#if type === "start"}
 
 
-function create_if_block$h(ctx) {
+function create_if_block$j(ctx) {
   let span;
   let t;
   let goa_icon;
@@ -2594,7 +2638,7 @@ function create_if_block$h(ctx) {
 } // (52:4) {#if leadingicon}
 
 
-function create_if_block_2$6(ctx) {
+function create_if_block_2$7(ctx) {
   let goa_icon;
   return {
     c() {
@@ -2638,7 +2682,7 @@ function create_if_block_2$6(ctx) {
 } // (58:4) {#if trailingicon}
 
 
-function create_if_block_1$9(ctx) {
+function create_if_block_1$b(ctx) {
   let goa_icon;
   return {
     c() {
@@ -2681,7 +2725,7 @@ function create_if_block_1$9(ctx) {
   };
 }
 
-function create_fragment$F(ctx) {
+function create_fragment$I(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2691,8 +2735,8 @@ function create_fragment$F(ctx) {
   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);
@@ -2835,7 +2879,7 @@ function create_fragment$F(ctx) {
   };
 }
 
-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);
@@ -2930,7 +2974,7 @@ class Button extends SvelteElement {
       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,
@@ -3086,7 +3130,7 @@ class Button extends SvelteElement {
 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;
@@ -3156,7 +3200,7 @@ function create_fragment$E(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$B($$self, $$props, $$invalidate) {
   let _alignment;
 
   let {
@@ -3220,7 +3264,7 @@ class ButtonGroup extends SvelteElement {
       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,
@@ -3328,7 +3372,7 @@ class ButtonGroup extends SvelteElement {
 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 {
@@ -3359,7 +3403,7 @@ function create_if_block$g(ctx) {
   };
 }
 
-function create_fragment$D(ctx) {
+function create_fragment$G(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -3372,7 +3416,7 @@ function create_fragment$D(ctx) {
   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");
@@ -3451,7 +3495,7 @@ function create_fragment$D(ctx) {
         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);
         }
@@ -3494,7 +3538,7 @@ function create_fragment$D(ctx) {
   };
 }
 
-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 {
@@ -3551,7 +3595,7 @@ class Callout extends SvelteElement {
       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,
@@ -3659,7 +3703,7 @@ class Callout extends SvelteElement {
 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() {
@@ -3690,7 +3734,7 @@ class CardActions extends SvelteElement {
       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) {
@@ -3704,7 +3748,7 @@ class CardActions extends SvelteElement {
 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;
@@ -3783,7 +3827,7 @@ function create_fragment$B(ctx) {
   };
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3831,7 +3875,7 @@ class Card extends SvelteElement {
       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,
@@ -3951,7 +3995,7 @@ class Card extends SvelteElement {
 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() {
@@ -3984,7 +4028,7 @@ class CardContent extends SvelteElement {
       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) {
@@ -3998,7 +4042,7 @@ class CardContent extends SvelteElement {
 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() {
@@ -4031,7 +4075,7 @@ class CardGroup extends SvelteElement {
       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) {
@@ -4045,7 +4089,7 @@ class CardGroup extends SvelteElement {
 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() {
@@ -4093,7 +4137,7 @@ function create_fragment$y(ctx) {
   };
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -4117,7 +4161,7 @@ class CardImage extends SvelteElement {
       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);
@@ -4165,7 +4209,7 @@ class CardImage extends SvelteElement {
 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 {
@@ -4192,7 +4236,7 @@ function create_if_block_1$8(ctx) {
 } // (68:4) {#if isIndeterminate}
 
 
-function create_if_block$f(ctx) {
+function create_if_block$h(ctx) {
   let svg;
   let rect;
   return {
@@ -4219,7 +4263,7 @@ function create_if_block$f(ctx) {
   };
 }
 
-function create_fragment$x(ctx) {
+function create_fragment$A(ctx) {
   let label;
   let div0;
   let input;
@@ -4237,10 +4281,10 @@ function create_fragment$x(ctx) {
   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);
@@ -4468,7 +4512,7 @@ function create_fragment$x(ctx) {
   };
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4583,7 +4627,7 @@ class Checkbox extends SvelteElement {
       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,
@@ -4751,7 +4795,7 @@ class Checkbox extends SvelteElement {
 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() {
@@ -4785,7 +4829,7 @@ function create_if_block_1$7(ctx) {
 } // (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;
@@ -4841,7 +4885,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$w(ctx) {
+function create_fragment$z(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4852,10 +4896,10 @@ function create_fragment$w(ctx) {
   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");
@@ -4929,7 +4973,7 @@ function create_fragment$w(ctx) {
         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);
         }
@@ -4950,7 +4994,7 @@ function create_fragment$w(ctx) {
         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);
         }
@@ -5023,7 +5067,7 @@ function create_fragment$w(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -5124,7 +5168,7 @@ class Chip extends SvelteElement {
       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,
@@ -5378,12 +5422,12 @@ function noscroll(_node, opts) {
 /* 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) {
@@ -5473,7 +5517,7 @@ function create_if_block$d(ctx) {
 } // (43:19) 
 
 
-function create_if_block_3$4(ctx) {
+function create_if_block_3$6(ctx) {
   let div;
   let goa_spinner;
   let t;
@@ -5569,7 +5613,7 @@ function create_if_block_3$4(ctx) {
 } // (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;
@@ -5579,7 +5623,7 @@ function create_if_block_1$6(ctx) {
   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");
@@ -5635,7 +5679,7 @@ function create_if_block_1$6(ctx) {
         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);
         }
@@ -5717,7 +5761,7 @@ function create_if_block_4$1(ctx) {
 } // (39:6) {#if message}
 
 
-function create_if_block_2$5(ctx) {
+function create_if_block_2$6(ctx) {
   let div;
   let t;
   return {
@@ -5749,12 +5793,12 @@ function create_if_block_2$5(ctx) {
   };
 }
 
-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();
@@ -5781,7 +5825,7 @@ function create_fragment$v(ctx) {
             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);
@@ -5814,7 +5858,7 @@ function create_fragment$v(ctx) {
   };
 }
 
-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"]);
@@ -5871,7 +5915,7 @@ class CircularProgress extends SvelteElement {
       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,
@@ -5955,7 +5999,7 @@ class CircularProgress extends SvelteElement {
 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;
@@ -6080,7 +6124,7 @@ function create_fragment$u(ctx) {
   };
 }
 
-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"]);
@@ -6136,7 +6180,7 @@ class Container extends SvelteElement {
       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,
@@ -6256,7 +6300,7 @@ class Container extends SvelteElement {
 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;
@@ -6356,7 +6400,7 @@ function create_fragment$t(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -6416,7 +6460,7 @@ class Details extends SvelteElement {
       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,
@@ -6500,7 +6544,7 @@ class Details extends SvelteElement {
 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 {
@@ -6559,7 +6603,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -6595,7 +6639,7 @@ class Divider extends SvelteElement {
       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,
@@ -6693,7 +6737,7 @@ function get_each_context$4(ctx, list, i) {
 } // (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;
@@ -6709,7 +6753,7 @@ function create_else_block$3(ctx) {
   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];
@@ -6821,7 +6865,7 @@ function create_else_block$3(ctx) {
         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);
         }
@@ -6962,7 +7006,7 @@ function create_else_block$3(ctx) {
 } // (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;
@@ -7088,7 +7132,7 @@ function create_if_block$c(ctx) {
 } // (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;
@@ -7385,7 +7429,7 @@ function create_each_block$4(ctx) {
   };
 }
 
-function create_fragment$r(ctx) {
+function create_fragment$u(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -7393,8 +7437,8 @@ function create_fragment$r(ctx) {
   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);
@@ -7502,7 +7546,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let _disabled;
 
   let _error;
@@ -7892,7 +7936,7 @@ class Dropdown extends SvelteElement {
       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,
@@ -8096,7 +8140,7 @@ class Dropdown extends SvelteElement {
 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;
@@ -8117,7 +8161,7 @@ class DropdownItem extends SvelteElement {
       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) {
@@ -8131,7 +8175,7 @@ class DropdownItem extends SvelteElement {
 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() {
@@ -8191,7 +8235,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -8360,7 +8404,7 @@ class FocusTrap extends SvelteElement {
       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);
 
@@ -8396,7 +8440,7 @@ class FocusTrap extends SvelteElement {
 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() {
@@ -8415,7 +8459,7 @@ function create_if_block$b(ctx) {
   };
 }
 
-function create_fragment$o(ctx) {
+function create_fragment$r(ctx) {
   let div5;
   let div4;
   let div0;
@@ -8433,7 +8477,7 @@ function create_fragment$o(ctx) {
   /*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");
@@ -8506,7 +8550,7 @@ function create_fragment$o(ctx) {
       /*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);
         }
@@ -8558,7 +8602,7 @@ function create_fragment$o(ctx) {
   };
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
   let {
     maxcontentwidth = ""
   } = $$props;
@@ -8596,7 +8640,7 @@ class Footer extends SvelteElement {
       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);
 
@@ -8686,7 +8730,7 @@ function create_each_block$3(ctx) {
   };
 }
 
-function create_fragment$n(ctx) {
+function create_fragment$q(ctx) {
   let section;
   let div;
   let t;
@@ -8774,7 +8818,7 @@ function create_fragment$n(ctx) {
   };
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -8809,7 +8853,7 @@ class FooterMetaSection extends SvelteElement {
       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) {
@@ -8830,7 +8874,7 @@ function get_each_context$2(ctx, list, i) {
 } // (31:2) {#if heading}
 
 
-function create_if_block$a(ctx) {
+function create_if_block$c(ctx) {
   let div;
   let t0;
   let t1;
@@ -8919,7 +8963,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$m(ctx) {
+function create_fragment$p(ctx) {
   let section;
   let t0;
   let div;
@@ -8928,7 +8972,7 @@ function create_fragment$m(ctx) {
   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];
@@ -8995,7 +9039,7 @@ function create_fragment$m(ctx) {
         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);
         }
@@ -9066,7 +9110,7 @@ function create_fragment$m(ctx) {
   };
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -9117,7 +9161,7 @@ class FooterNavSection extends SvelteElement {
       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);
@@ -9165,7 +9209,7 @@ class FooterNavSection extends SvelteElement {
 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;
@@ -9176,7 +9220,7 @@ function create_if_block_2$4(ctx) {
   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");
@@ -9215,7 +9259,7 @@ function create_if_block_2$4(ctx) {
         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);
         }
@@ -9234,7 +9278,7 @@ function create_if_block_2$4(ctx) {
 } // (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;
@@ -9272,7 +9316,7 @@ function create_if_block_3$3(ctx) {
 } // (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;
@@ -9315,7 +9359,7 @@ function create_if_block_1$4(ctx) {
 } // (48:2) {#if helptext}
 
 
-function create_if_block$9(ctx) {
+function create_if_block$b(ctx) {
   let div;
   let t;
   return {
@@ -9347,7 +9391,7 @@ function create_if_block$9(ctx) {
   };
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$o(ctx) {
   let div1;
   let t0;
   let div0;
@@ -9356,13 +9400,13 @@ function create_fragment$l(ctx) {
   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");
@@ -9409,7 +9453,7 @@ function create_fragment$l(ctx) {
         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);
         }
@@ -9424,7 +9468,7 @@ function create_fragment$l(ctx) {
         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);
         }
@@ -9439,7 +9483,7 @@ function create_fragment$l(ctx) {
         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);
         }
@@ -9484,7 +9528,7 @@ function create_fragment$l(ctx) {
   };
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -9540,7 +9584,7 @@ class FormItem extends SvelteElement {
       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,
@@ -9672,7 +9716,7 @@ class FormItem extends SvelteElement {
 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;
@@ -9740,7 +9784,7 @@ function create_fragment$k(ctx) {
   };
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9785,7 +9829,7 @@ class Grid extends SvelteElement {
       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,
@@ -9881,7 +9925,7 @@ class Grid extends SvelteElement {
 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;
@@ -9966,7 +10010,7 @@ function create_fragment$j(ctx) {
   };
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -9994,7 +10038,7 @@ class HeroBanner extends SvelteElement {
       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
@@ -10054,7 +10098,7 @@ class HeroBanner extends SvelteElement {
 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;
@@ -10226,7 +10270,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -10331,7 +10375,7 @@ class IconButton extends SvelteElement {
       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,
@@ -10499,7 +10543,60 @@ class IconButton extends SvelteElement {
 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 {
@@ -10545,21 +10642,66 @@ function create_if_block$8(ctx) {
     }
 
   };
-}
+} // (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",
@@ -10605,7 +10747,7 @@ function create_fragment$h(ctx) {
         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);
         }
@@ -10678,7 +10820,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   let isInverted;
 
   let _size;
@@ -10721,7 +10863,19 @@ function instance$f($$self, $$props, $$invalidate) {
   } = $$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);
@@ -10729,9 +10883,9 @@ function instance$f($$self, $$props, $$invalidate) {
     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);
@@ -10742,13 +10896,13 @@ function instance$f($$self, $$props, $$invalidate) {
   $$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",
@@ -10757,26 +10911,26 @@ function instance$f($$self, $$props, $$invalidate) {
     }
   };
 
-  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,
@@ -10856,7 +11010,7 @@ class Icon extends SvelteElement {
   }
 
   get size() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[14];
   }
 
   set size(size) {
@@ -10878,7 +11032,7 @@ class Icon extends SvelteElement {
   }
 
   get inverted() {
-    return this.$$.ctx[14];
+    return this.$$.ctx[15];
   }
 
   set inverted(inverted) {
@@ -10981,7 +11135,7 @@ function create_if_block_4(ctx) {
 } // (109:4) {#if leadingicon}
 
 
-function create_if_block_3$2(ctx) {
+function create_if_block_3$4(ctx) {
   let goa_icon;
   return {
     c() {
@@ -11015,7 +11169,7 @@ function create_if_block_3$2(ctx) {
 } // (139:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
-function create_if_block_2$3(ctx) {
+function create_if_block_2$4(ctx) {
   let goa_icon;
   return {
     c() {
@@ -11050,7 +11204,7 @@ function create_if_block_2$3(ctx) {
 } // (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;
@@ -11105,7 +11259,7 @@ function create_if_block_1$3(ctx) {
 } // (161:4) {#if suffix}
 
 
-function create_if_block$7(ctx) {
+function create_if_block$9(ctx) {
   let span;
   let t;
   return {
@@ -11137,7 +11291,7 @@ function create_if_block$7(ctx) {
   };
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$j(ctx) {
   let div3;
   let div2;
   let t0;
@@ -11162,20 +11316,20 @@ function create_fragment$g(ctx) {
   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");
@@ -11331,7 +11485,7 @@ function create_fragment$g(ctx) {
         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);
         }
@@ -11464,7 +11618,7 @@ function create_fragment$g(ctx) {
         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);
         }
@@ -11481,7 +11635,7 @@ function create_fragment$g(ctx) {
         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);
         }
@@ -11496,7 +11650,7 @@ function create_fragment$g(ctx) {
         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);
         }
@@ -11576,7 +11730,7 @@ function doClick() {
   }));
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -11796,7 +11950,7 @@ class Input extends SvelteElement {
       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,
@@ -12132,7 +12286,7 @@ class Input extends SvelteElement {
 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;
@@ -12164,7 +12318,7 @@ function create_if_block_3$1(ctx) {
 } // (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*/
@@ -12178,7 +12332,7 @@ function create_if_block_1$2(ctx) {
   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");
@@ -12231,7 +12385,7 @@ function create_if_block_1$2(ctx) {
         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);
         }
@@ -12252,7 +12406,7 @@ function create_if_block_1$2(ctx) {
 } // (50:6) {#if feedbackurl}
 
 
-function create_if_block_2$2(ctx) {
+function create_if_block_2$3(ctx) {
   let span;
   let t0;
   let a;
@@ -12294,7 +12448,7 @@ function create_if_block_2$2(ctx) {
 } // (56:2) {#if version}
 
 
-function create_if_block$6(ctx) {
+function create_if_block$8(ctx) {
   let div;
   let t;
   return {
@@ -12327,7 +12481,7 @@ function create_if_block$6(ctx) {
   };
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$i(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -12338,11 +12492,11 @@ function create_fragment$f(ctx) {
   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");
@@ -12374,7 +12528,7 @@ function create_fragment$f(ctx) {
       /*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);
         }
@@ -12393,7 +12547,7 @@ function create_fragment$f(ctx) {
         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);
         }
@@ -12408,7 +12562,7 @@ function create_fragment$f(ctx) {
         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);
         }
@@ -12436,7 +12590,7 @@ function capitalize(val) {
   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
@@ -12468,7 +12622,7 @@ class MicrositeHeader extends SvelteElement {
       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
@@ -12528,7 +12682,7 @@ class MicrositeHeader extends SvelteElement {
 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;
@@ -12555,20 +12709,20 @@ function create_if_block$5(ctx) {
   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");
@@ -12666,7 +12820,7 @@ function create_if_block$5(ctx) {
         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);
         }
@@ -12693,7 +12847,7 @@ function create_if_block$5(ctx) {
         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);
         }
@@ -12797,7 +12951,7 @@ function create_if_block$5(ctx) {
 } // (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;
@@ -12856,7 +13010,7 @@ function create_if_block_3(ctx) {
 } // (115:14) {:else}
 
 
-function create_else_block$2(ctx) {
+function create_else_block$3(ctx) {
   let slot;
   return {
     c() {
@@ -12878,7 +13032,7 @@ function create_else_block$2(ctx) {
 } // (113:14) {#if heading}
 
 
-function create_if_block_2$1(ctx) {
+function create_if_block_2$2(ctx) {
   let t;
   return {
     c() {
@@ -12907,7 +13061,7 @@ function create_if_block_2$1(ctx) {
 } // (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;
@@ -12945,12 +13099,12 @@ function create_if_block_1$1(ctx) {
   };
 }
 
-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();
@@ -12977,7 +13131,7 @@ function create_fragment$e(ctx) {
             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);
@@ -13010,7 +13164,7 @@ function create_fragment$e(ctx) {
   };
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let _isClosable;
 
   let _isOpen;
@@ -13161,7 +13315,7 @@ class Modal extends SvelteElement {
       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,
@@ -13257,7 +13411,7 @@ class Modal extends SvelteElement {
 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;
@@ -13381,12 +13535,12 @@ function create_if_block$4(ctx) {
   };
 }
 
-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();
@@ -13413,7 +13567,7 @@ function create_fragment$d(ctx) {
             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);
@@ -13446,7 +13600,7 @@ function create_fragment$d(ctx) {
   };
 }
 
-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 {
@@ -13488,7 +13642,7 @@ class Notification extends SvelteElement {
       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);
 
@@ -13530,7 +13684,7 @@ function isValidDimension(value) {
 /* 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;
@@ -13570,7 +13724,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -13611,7 +13765,7 @@ class PageBlock extends SvelteElement {
       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);
@@ -13659,7 +13813,7 @@ class PageBlock extends SvelteElement {
 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;
@@ -13757,7 +13911,7 @@ function create_if_block$3(ctx) {
   };
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$e(ctx) {
   let goa_block1;
   let div;
   let t0;
@@ -13773,7 +13927,7 @@ function create_fragment$b(ctx) {
   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");
@@ -13847,7 +14001,7 @@ function create_fragment$b(ctx) {
         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);
         }
@@ -13920,7 +14074,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
   let _pageCount;
 
   const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14045,7 +14199,7 @@ class Pagination extends SvelteElement {
       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,
@@ -14355,7 +14509,7 @@ function create_each_block$1(key_1, ctx) {
   };
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$d(ctx) {
   let div;
   let slot;
   let t;
@@ -14478,7 +14632,7 @@ function create_fragment$a(ctx) {
   };
 }
 
-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"]);
@@ -14621,7 +14775,7 @@ class RadioGroup extends SvelteElement {
       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,
@@ -14777,7 +14931,7 @@ class RadioGroup extends SvelteElement {
 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;
@@ -14862,7 +15016,7 @@ function create_fragment$9(ctx) {
   };
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -14928,7 +15082,7 @@ class Scrollable extends SvelteElement {
       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,
@@ -15028,10 +15182,10 @@ function get_each_context(ctx, list, i) {
   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 {
@@ -15072,10 +15226,131 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (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(
@@ -15168,10 +15443,10 @@ function create_if_block_2(ctx) {
     }
 
   };
-} // (41:31) 
+} // (54:31) 
 
 
-function create_if_block_1(ctx) {
+function create_if_block_1$1(ctx) {
   let div2;
   let div0;
   let skeleton0;
@@ -15290,10 +15565,10 @@ function create_if_block_1(ctx) {
     }
 
   };
-} // (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;
@@ -15427,7 +15702,7 @@ function create_if_block$2(ctx) {
     }
 
   };
-} // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
+} // (65:4) {#each Array(Number.parseInt(linecount+"")) as _item}
 
 
 function create_each_block(ctx) {
@@ -15487,13 +15762,13 @@ function create_each_block(ctx) {
   };
 }
 
-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) {
@@ -15506,7 +15781,10 @@ function create_fragment$8(ctx) {
     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);
@@ -15603,8 +15881,8 @@ function create_fragment$8(ctx) {
   };
 }
 
-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 = ""
@@ -15661,7 +15939,7 @@ class Skeleton extends SvelteElement {
       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,
@@ -15793,7 +16071,7 @@ class Skeleton extends SvelteElement {
 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() {
@@ -15822,7 +16100,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -15832,7 +16110,8 @@ function instance$5($$self, $$props, $$invalidate) {
   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})`
     });
   });
@@ -15859,7 +16138,7 @@ class Spacer extends SvelteElement {
       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);
@@ -16091,7 +16370,7 @@ function tweened(value, defaults = {}) {
 /* 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;
@@ -16281,11 +16560,11 @@ function create_if_block$1(ctx) {
   };
 }
 
-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();
@@ -16305,7 +16584,7 @@ function create_fragment$6(ctx) {
         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);
         }
@@ -16326,7 +16605,7 @@ function create_fragment$6(ctx) {
   };
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -16457,7 +16736,7 @@ class Spinner extends SvelteElement {
       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,
@@ -16529,7 +16808,7 @@ class Spinner extends SvelteElement {
 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;
@@ -16631,7 +16910,7 @@ function create_fragment$5(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let _stickyHeader;
 
   const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -16745,7 +17024,7 @@ class Table extends SvelteElement {
       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,
@@ -16853,7 +17132,7 @@ class Table extends SvelteElement {
 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 {
@@ -16898,7 +17177,7 @@ function create_else_block(ctx) {
 } // (55:2) {#if direction === "none"}
 
 
-function create_if_block(ctx) {
+function create_if_block$2(ctx) {
   let img;
   let img_src_value;
   return {
@@ -16921,7 +17200,7 @@ function create_if_block(ctx) {
   };
 }
 
-function create_fragment$4(ctx) {
+function create_fragment$7(ctx) {
   let button;
   let slot;
   let t;
@@ -16929,8 +17208,8 @@ function create_fragment$4(ctx) {
   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);
@@ -16976,7 +17255,7 @@ function create_fragment$4(ctx) {
   };
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let {
     direction = "none"
   } = $$props;
@@ -16996,7 +17275,7 @@ class TableSortHeader extends SvelteElement {
       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);
 
@@ -17032,7 +17311,7 @@ class TableSortHeader extends SvelteElement {
 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;
@@ -17213,7 +17492,7 @@ function create_fragment$3(ctx) {
   };
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let isError;
   let isDisabled;
   let isReadonly;
@@ -17330,7 +17609,7 @@ class TextArea extends SvelteElement {
       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,
@@ -17534,7 +17813,7 @@ class TextArea extends SvelteElement {
 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() {
@@ -17578,7 +17857,7 @@ class FullScreenNavbarLayout extends SvelteElement {
       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) {
@@ -17592,7 +17871,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 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() {
@@ -17629,7 +17908,7 @@ class OneColumnLayout extends SvelteElement {
       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) {
@@ -17643,7 +17922,7 @@ class OneColumnLayout extends SvelteElement {
 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;
@@ -17713,7 +17992,7 @@ function create_fragment(ctx) {
   };
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let {
     navcolumnwidth = ""
   } = $$props;
@@ -17737,7 +18016,7 @@ class TwoColumnLayout extends SvelteElement {
       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);
@@ -17783,38 +18062,1327 @@ class TwoColumnLayout extends SvelteElement {
 }
 
 customElements.define("goa-two-column-layout", TwoColumnLayout);
+/* libs/web-components/src/components/form-stepper/FormStepper.svelte generated by Svelte v3.51.0 */
 
-const GoAAccordion = ({
-  open,
-  heading,
-  headingSize,
-  secondaryText,
-  headingContent,
-  testid,
-  children,
-  mt,
-  mr,
-  mb,
-  ml
-}) => {
-  return jsxs("goa-accordion", Object.assign({
-    open: open,
-    headingSize: headingSize,
-    heading: heading,
-    secondaryText: secondaryText,
-    "data-testid": testid,
-    mt: mt,
-    mr: mr,
-    mb: mb,
-    ml: ml
-  }, {
-    children: [children, headingContent && jsx("div", Object.assign({
-      slot: "headingcontent"
-    }, {
-      children: headingContent
-    }), void 0)]
-  }), void 0);
-};
+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);
+    }
+
+  };
+}
+
+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(async () => {
+    await tick(); // 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(async () => {
+    await tick();
+    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);
+
+function GoAPages(props) {
+  return jsx("goa-pages", Object.assign({
+    current: props.current,
+    ml: props.ml,
+    mr: props.mr,
+    mt: props.mt,
+    mb: props.mb
+  }, {
+    children: props.children
+  }), void 0);
+}
+
+const GoAAccordion = ({
+  open,
+  heading,
+  headingSize,
+  secondaryText,
+  headingContent,
+  testid,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) => {
+  return jsxs("goa-accordion", Object.assign({
+    open: open,
+    headingSize: headingSize,
+    heading: heading,
+    secondaryText: secondaryText,
+    "data-testid": testid,
+    mt: mt,
+    mr: mr,
+    mb: mb,
+    ml: ml
+  }, {
+    children: [children, headingContent && jsx("div", Object.assign({
+      slot: "headingcontent"
+    }, {
+      children: headingContent
+    }), void 0)]
+  }), void 0);
+};
+
+function GoAFormStep(props) {
+  return jsx("goa-form-step", {
+    text: props.text,
+    status: props.status
+  }, void 0);
+}
+
+function GoAFormStepper({
+  testId,
+  step,
+  mt,
+  mb,
+  ml,
+  mr,
+  onChange,
+  children
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const current = ref.current;
+
+    const changeListener = e => {
+      const {
+        step
+      } = e.detail;
+      onChange === null || onChange === void 0 ? void 0 : onChange(step);
+    };
+
+    current.addEventListener("_change", changeListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+    };
+  }, [ref, onChange]);
+  return jsx("goa-form-stepper", Object.assign({
+    ref: ref,
+    "data-testid": testId,
+    step: step,
+    mt: mt,
+    mr: mr,
+    mb: mb,
+    ml: ml
+  }, {
+    children: children
+  }), void 0);
+}
 
 const GoAAppHeader = ({
   heading,
@@ -19190,4 +20758,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
+export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADetails, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAFormStep, GoAFormStepper, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPages, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };