@abgov/react-components 4.0.0-alpha.137 → 4.0.0-alpha.139

package/react-components.esm.js

@@ -210,50 +210,6 @@ 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 = {};
 
@@ -1149,10 +1105,29 @@ function typeValidator(message, values, required = false) {
 
   return [values, validator];
 }
+
+function getTimestamp(val) {
+  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  const now = val || new Date();
+  const hour24 = now.getHours();
+  const min0 = now.getMinutes();
+  const date = now.getDate();
+  const month = months[now.getMonth()];
+  const year = now.getFullYear();
+  const hour = hour24 === 0 && 12 || hour24 > 12 && hour24 - 12 || hour24;
+  const meridium = hour24 === 0 && "AM" || hour24 >= 12 && "PM" || "AM";
+  const min = min0 < 10 && `0${min0}` || min0;
+  const ordinal = date % 10 === 1 && date !== 11 && "st" || date % 10 === 2 && date !== 12 && "nd" || date % 10 === 3 && date !== 13 && "rd" || "th";
+  return `${month} ${date}${ordinal} ${year}, ${hour}:${min} ${meridium}`;
+}
+
+function cssVar(name, value) {
+  return value ? `${name}: ${value}` : "";
+}
 /* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
 
 
-function create_fragment$N(ctx) {
+function create_fragment$P(ctx) {
   let div3;
   let details;
   let summary;
@@ -1355,7 +1330,7 @@ function create_fragment$N(ctx) {
   };
 }
 
-function instance$H($$self, $$props, $$invalidate) {
+function instance$J($$self, $$props, $$invalidate) {
   let isOpen;
   const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
   let {
@@ -1433,7 +1408,7 @@ class Accordion extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$H, create_fragment$N, safe_not_equal, {
+    }, instance$J, create_fragment$P, safe_not_equal, {
       open: 10,
       heading: 0,
       secondarytext: 1,
@@ -1565,7 +1540,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$8(ctx) {
+function create_else_block$9(ctx) {
   let div;
   let img0;
   let img0_src_value;
@@ -1622,7 +1597,7 @@ function create_else_block$8(ctx) {
 } // (19:4) {#if url}
 
 
-function create_if_block$m(ctx) {
+function create_if_block$o(ctx) {
   let a;
   let img0;
   let img0_src_value;
@@ -1689,7 +1664,7 @@ function create_if_block$m(ctx) {
   };
 }
 
-function create_fragment$M(ctx) {
+function create_fragment$O(ctx) {
   let div2;
   let div1;
   let t;
@@ -1699,8 +1674,8 @@ function create_fragment$M(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*url*/
-    ctx[1]) return create_if_block$m;
-    return create_else_block$8;
+    ctx[1]) return create_if_block$o;
+    return create_else_block$9;
   }
 
   let current_block_type = select_block_type(ctx);
@@ -1773,7 +1748,7 @@ function create_fragment$M(ctx) {
   };
 }
 
-function instance$G($$self, $$props, $$invalidate) {
+function instance$I($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1805,7 +1780,7 @@ class AppHeader extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$G, create_fragment$M, safe_not_equal, {
+    }, instance$I, create_fragment$O, safe_not_equal, {
       heading: 0,
       url: 1,
       testid: 2,
@@ -1877,7 +1852,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$7(ctx) {
+function create_else_block$8(ctx) {
   let div;
   return {
     c() {
@@ -1900,7 +1875,7 @@ function create_else_block$7(ctx) {
 } // (45:2) {#if showIcon}
 
 
-function create_if_block_1$c(ctx) {
+function create_if_block_1$e(ctx) {
   let goa_icon;
   return {
     c() {
@@ -1933,7 +1908,7 @@ function create_if_block_1$c(ctx) {
 } // (50:2) {#if content}
 
 
-function create_if_block$l(ctx) {
+function create_if_block$n(ctx) {
   let div;
   let t;
   return {
@@ -1965,7 +1940,7 @@ function create_if_block$l(ctx) {
   };
 }
 
-function create_fragment$L(ctx) {
+function create_fragment$N(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1974,15 +1949,15 @@ function create_fragment$L(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*showIcon*/
-    ctx[7]) return create_if_block_1$c;
-    return create_else_block$7;
+    ctx[7]) return create_if_block_1$e;
+    return create_else_block$8;
   }
 
   let current_block_type = select_block_type(ctx);
   let if_block0 = current_block_type(ctx);
   let if_block1 =
   /*content*/
-  ctx[2] && create_if_block$l(ctx);
+  ctx[2] && create_if_block$n(ctx);
   return {
     c() {
       div = element("div");
@@ -2039,7 +2014,7 @@ function create_fragment$L(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block$l(ctx);
+          if_block1 = create_if_block$n(ctx);
           if_block1.c();
           if_block1.m(div, null);
         }
@@ -2101,7 +2076,7 @@ function create_fragment$L(ctx) {
   };
 }
 
-function instance$F($$self, $$props, $$invalidate) {
+function instance$H($$self, $$props, $$invalidate) {
   let showIcon;
   let iconType;
   const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -2181,7 +2156,7 @@ class Badge extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$F, create_fragment$L, safe_not_equal, {
+    }, instance$H, create_fragment$N, safe_not_equal, {
       type: 0,
       testid: 1,
       content: 2,
@@ -2301,7 +2276,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$K(ctx) {
+function create_fragment$M(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -2375,7 +2350,7 @@ function create_fragment$K(ctx) {
   };
 }
 
-function instance$E($$self, $$props, $$invalidate) {
+function instance$G($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -2419,7 +2394,7 @@ class Block extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$E, create_fragment$K, safe_not_equal, {
+    }, instance$G, create_fragment$M, safe_not_equal, {
       gap: 0,
       direction: 1,
       alignment: 2,
@@ -2527,17 +2502,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$6(ctx) {
+function create_else_block$7(ctx) {
   let t0;
   let span;
   let t1;
   let if_block1_anchor;
   let if_block0 =
   /*leadingicon*/
-  ctx[3] && create_if_block_2$7(ctx);
+  ctx[3] && create_if_block_2$9(ctx);
   let if_block1 =
   /*trailingicon*/
-  ctx[4] && create_if_block_1$b(ctx);
+  ctx[4] && create_if_block_1$d(ctx);
   return {
     c() {
       if (if_block0) if_block0.c();
@@ -2566,7 +2541,7 @@ function create_else_block$6(ctx) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_2$7(ctx);
+          if_block0 = create_if_block_2$9(ctx);
           if_block0.c();
           if_block0.m(t0.parentNode, t0);
         }
@@ -2581,7 +2556,7 @@ function create_else_block$6(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block_1$b(ctx);
+          if_block1 = create_if_block_1$d(ctx);
           if_block1.c();
           if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
         }
@@ -2604,7 +2579,7 @@ function create_else_block$6(ctx) {
 } // (46:2) {#if type === "start"}
 
 
-function create_if_block$k(ctx) {
+function create_if_block$m(ctx) {
   let span;
   let t;
   let goa_icon;
@@ -2638,7 +2613,7 @@ function create_if_block$k(ctx) {
 } // (52:4) {#if leadingicon}
 
 
-function create_if_block_2$7(ctx) {
+function create_if_block_2$9(ctx) {
   let goa_icon;
   return {
     c() {
@@ -2682,7 +2657,7 @@ function create_if_block_2$7(ctx) {
 } // (58:4) {#if trailingicon}
 
 
-function create_if_block_1$b(ctx) {
+function create_if_block_1$d(ctx) {
   let goa_icon;
   return {
     c() {
@@ -2725,7 +2700,7 @@ function create_if_block_1$b(ctx) {
   };
 }
 
-function create_fragment$J(ctx) {
+function create_fragment$L(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2735,8 +2710,8 @@ function create_fragment$J(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*type*/
-    ctx[0] === "start") return create_if_block$k;
-    return create_else_block$6;
+    ctx[0] === "start") return create_if_block$m;
+    return create_else_block$7;
   }
 
   let current_block_type = select_block_type(ctx);
@@ -2879,7 +2854,7 @@ function create_fragment$J(ctx) {
   };
 }
 
-function instance$D($$self, $$props, $$invalidate) {
+function instance$F($$self, $$props, $$invalidate) {
   let isDisabled;
   let isButtonDark;
   const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2969,12 +2944,12 @@ class Button extends SvelteElement {
   constructor(options) {
     super();
     this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$D, create_fragment$J, safe_not_equal, {
+    }, instance$F, create_fragment$L, safe_not_equal, {
       type: 0,
       size: 1,
       variant: 2,
@@ -3130,7 +3105,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$I(ctx) {
+function create_fragment$K(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -3200,7 +3175,7 @@ function create_fragment$I(ctx) {
   };
 }
 
-function instance$C($$self, $$props, $$invalidate) {
+function instance$E($$self, $$props, $$invalidate) {
   let _alignment;
 
   let {
@@ -3264,7 +3239,7 @@ class ButtonGroup extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$C, create_fragment$I, safe_not_equal, {
+    }, instance$E, create_fragment$K, safe_not_equal, {
       alignment: 7,
       gap: 0,
       testid: 1,
@@ -3372,7 +3347,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$j(ctx) {
+function create_if_block$l(ctx) {
   let h3;
   let t;
   return {
@@ -3403,7 +3378,7 @@ function create_if_block$j(ctx) {
   };
 }
 
-function create_fragment$H(ctx) {
+function create_fragment$J(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -3416,7 +3391,7 @@ function create_fragment$H(ctx) {
   let div_style_value;
   let if_block =
   /*heading*/
-  ctx[5] && create_if_block$j(ctx);
+  ctx[5] && create_if_block$l(ctx);
   return {
     c() {
       div = element("div");
@@ -3495,7 +3470,7 @@ function create_fragment$H(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$j(ctx);
+          if_block = create_if_block$l(ctx);
           if_block.c();
           if_block.m(span1, t1);
         }
@@ -3538,7 +3513,7 @@ function create_fragment$H(ctx) {
   };
 }
 
-function instance$B($$self, $$props, $$invalidate) {
+function instance$D($$self, $$props, $$invalidate) {
   let iconType;
   const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
   let {
@@ -3595,7 +3570,7 @@ class Callout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$B, create_fragment$H, safe_not_equal, {
+    }, instance$D, create_fragment$J, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -3703,7 +3678,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$G(ctx) {
+function create_fragment$I(ctx) {
   let goa_card_content;
   return {
     c() {
@@ -3734,7 +3709,7 @@ class CardActions extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$G, safe_not_equal, {}, null);
+    }, null, create_fragment$I, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -3748,7 +3723,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$F(ctx) {
+function create_fragment$H(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -3827,7 +3802,7 @@ function create_fragment$F(ctx) {
   };
 }
 
-function instance$A($$self, $$props, $$invalidate) {
+function instance$C($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3875,7 +3850,7 @@ class Card extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$A, create_fragment$F, safe_not_equal, {
+    }, instance$C, create_fragment$H, safe_not_equal, {
       elevation: 0,
       width: 1,
       height: 2,
@@ -3995,7 +3970,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$E(ctx) {
+function create_fragment$G(ctx) {
   let div;
   return {
     c() {
@@ -4028,7 +4003,7 @@ class CardContent extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$E, safe_not_equal, {}, null);
+    }, null, create_fragment$G, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -4042,7 +4017,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$D(ctx) {
+function create_fragment$F(ctx) {
   let div;
   return {
     c() {
@@ -4075,7 +4050,7 @@ class CardGroup extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$D, safe_not_equal, {}, null);
+    }, null, create_fragment$F, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -4089,7 +4064,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$C(ctx) {
+function create_fragment$E(ctx) {
   let div;
   return {
     c() {
@@ -4137,7 +4112,7 @@ function create_fragment$C(ctx) {
   };
 }
 
-function instance$z($$self, $$props, $$invalidate) {
+function instance$B($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -4161,7 +4136,7 @@ class CardImage extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$z, create_fragment$C, safe_not_equal, {
+    }, instance$B, create_fragment$E, safe_not_equal, {
       src: 0,
       height: 1
     }, null);
@@ -4209,7 +4184,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$a(ctx) {
+function create_if_block_1$c(ctx) {
   let svg;
   let path;
   return {
@@ -4236,7 +4211,7 @@ function create_if_block_1$a(ctx) {
 } // (68:4) {#if isIndeterminate}
 
 
-function create_if_block$i(ctx) {
+function create_if_block$k(ctx) {
   let svg;
   let rect;
   return {
@@ -4263,7 +4238,7 @@ function create_if_block$i(ctx) {
   };
 }
 
-function create_fragment$B(ctx) {
+function create_fragment$D(ctx) {
   let label;
   let div0;
   let input;
@@ -4281,10 +4256,10 @@ function create_fragment$B(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*isIndeterminate*/
-    ctx[10]) return create_if_block$i;
+    ctx[10]) return create_if_block$k;
     if (
     /*isChecked*/
-    ctx[9]) return create_if_block_1$a;
+    ctx[9]) return create_if_block_1$c;
   }
 
   let current_block_type = select_block_type(ctx);
@@ -4512,7 +4487,7 @@ function create_fragment$B(ctx) {
   };
 }
 
-function instance$y($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4627,7 +4602,7 @@ class Checkbox extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$y, create_fragment$B, safe_not_equal, {
+    }, instance$A, create_fragment$D, safe_not_equal, {
       name: 0,
       checked: 14,
       text: 1,
@@ -4795,7 +4770,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$9(ctx) {
+function create_if_block_1$b(ctx) {
   let goa_icon;
   return {
     c() {
@@ -4829,7 +4804,7 @@ function create_if_block_1$9(ctx) {
 } // (54:2) {#if _deletable}
 
 
-function create_if_block$h(ctx) {
+function create_if_block$j(ctx) {
   let goa_icon;
   let goa_icon_fillcolor_value;
   let goa_icon_opacity_value;
@@ -4885,7 +4860,7 @@ function create_if_block$h(ctx) {
   };
 }
 
-function create_fragment$A(ctx) {
+function create_fragment$C(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4896,10 +4871,10 @@ function create_fragment$A(ctx) {
   let dispose;
   let if_block0 =
   /*leadingicon*/
-  ctx[4] && create_if_block_1$9(ctx);
+  ctx[4] && create_if_block_1$b(ctx);
   let if_block1 =
   /*_deletable*/
-  ctx[11] && create_if_block$h(ctx);
+  ctx[11] && create_if_block$j(ctx);
   return {
     c() {
       div1 = element("div");
@@ -4973,7 +4948,7 @@ function create_fragment$A(ctx) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_1$9(ctx);
+          if_block0 = create_if_block_1$b(ctx);
           if_block0.c();
           if_block0.m(div1, t0);
         }
@@ -4994,7 +4969,7 @@ function create_fragment$A(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block$h(ctx);
+          if_block1 = create_if_block$j(ctx);
           if_block1.c();
           if_block1.m(div1, null);
         }
@@ -5067,7 +5042,7 @@ function create_fragment$A(ctx) {
   };
 }
 
-function instance$x($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -5168,7 +5143,7 @@ class Chip extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$x, create_fragment$A, safe_not_equal, {
+    }, instance$z, create_fragment$C, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -5422,12 +5397,12 @@ function noscroll(_node, opts) {
 /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
 
 
-function create_if_block$g(ctx) {
+function create_if_block$i(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_1$8, create_if_block_3$6];
+  const if_block_creators = [create_if_block_1$a, create_if_block_3$8];
   const if_blocks = [];
 
   function select_block_type(ctx, dirty) {
@@ -5517,14 +5492,14 @@ function create_if_block$g(ctx) {
 } // (43:19) 
 
 
-function create_if_block_3$6(ctx) {
+function create_if_block_3$8(ctx) {
   let div;
   let goa_spinner;
   let t;
   let div_class_value;
   let if_block =
   /*message*/
-  ctx[0] && create_if_block_4$1(ctx);
+  ctx[0] && create_if_block_4$3(ctx);
   return {
     c() {
       div = element("div");
@@ -5575,7 +5550,7 @@ function create_if_block_3$6(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block_4$1(ctx);
+          if_block = create_if_block_4$3(ctx);
           if_block.c();
           if_block.m(div, null);
         }
@@ -5613,7 +5588,7 @@ function create_if_block_3$6(ctx) {
 } // (32:2) {#if fullscreen}
 
 
-function create_if_block_1$8(ctx) {
+function create_if_block_1$a(ctx) {
   let div;
   let goa_spinner;
   let t;
@@ -5623,7 +5598,7 @@ function create_if_block_1$8(ctx) {
   let dispose;
   let if_block =
   /*message*/
-  ctx[0] && create_if_block_2$6(ctx);
+  ctx[0] && create_if_block_2$8(ctx);
   return {
     c() {
       div = element("div");
@@ -5679,7 +5654,7 @@ function create_if_block_1$8(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block_2$6(ctx);
+          if_block = create_if_block_2$8(ctx);
           if_block.c();
           if_block.m(div, null);
         }
@@ -5728,7 +5703,7 @@ function create_if_block_1$8(ctx) {
 } // (46:6) {#if message}
 
 
-function create_if_block_4$1(ctx) {
+function create_if_block_4$3(ctx) {
   let div;
   let t;
   return {
@@ -5761,7 +5736,7 @@ function create_if_block_4$1(ctx) {
 } // (39:6) {#if message}
 
 
-function create_if_block_2$6(ctx) {
+function create_if_block_2$8(ctx) {
   let div;
   let t;
   return {
@@ -5793,12 +5768,12 @@ function create_if_block_2$6(ctx) {
   };
 }
 
-function create_fragment$z(ctx) {
+function create_fragment$B(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
   /*isVisible*/
-  ctx[5] && create_if_block$g(ctx);
+  ctx[5] && create_if_block$i(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -5825,7 +5800,7 @@ function create_fragment$z(ctx) {
             transition_in(if_block, 1);
           }
         } else {
-          if_block = create_if_block$g(ctx);
+          if_block = create_if_block$i(ctx);
           if_block.c();
           transition_in(if_block, 1);
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5858,7 +5833,7 @@ function create_fragment$z(ctx) {
   };
 }
 
-function instance$w($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let isVisible;
   const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
   const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5915,7 +5890,7 @@ class CircularProgress extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$w, create_fragment$z, safe_not_equal, {
+    }, instance$y, create_fragment$B, safe_not_equal, {
       variant: 6,
       size: 7,
       message: 0,
@@ -5999,7 +5974,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$y(ctx) {
+function create_fragment$A(ctx) {
   let div3;
   let header;
   let div0;
@@ -6124,7 +6099,7 @@ function create_fragment$y(ctx) {
   };
 }
 
-function instance$v($$self, $$props, $$invalidate) {
+function instance$x($$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"]);
@@ -6180,7 +6155,7 @@ class Container extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$v, create_fragment$y, safe_not_equal, {
+    }, instance$x, create_fragment$A, safe_not_equal, {
       type: 0,
       accent: 1,
       padding: 2,
@@ -6300,7 +6275,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$x(ctx) {
+function create_fragment$z(ctx) {
   let details;
   let summary;
   let goa_icon;
@@ -6400,7 +6375,7 @@ function create_fragment$x(ctx) {
   };
 }
 
-function instance$u($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -6460,7 +6435,7 @@ class Details extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$u, create_fragment$x, safe_not_equal, {
+    }, instance$w, create_fragment$z, safe_not_equal, {
       heading: 0,
       mt: 1,
       mr: 2,
@@ -6544,7 +6519,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$w(ctx) {
+function create_fragment$y(ctx) {
   let hr;
   let hr_style_value;
   return {
@@ -6603,7 +6578,7 @@ function create_fragment$w(ctx) {
   };
 }
 
-function instance$t($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -6639,7 +6614,7 @@ class Divider extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$t, create_fragment$w, safe_not_equal, {
+    }, instance$v, create_fragment$y, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -6730,14 +6705,14 @@ function get_each_context_1(ctx, list, i) {
   return child_ctx;
 }
 
-function get_each_context$5(ctx, list, i) {
+function get_each_context$6(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[50] = list[i];
   return child_ctx;
 } // (270:2) {:else}
 
 
-function create_else_block$5(ctx) {
+function create_else_block$6(ctx) {
   let t0;
   let goa_input;
   let goa_input_arialabel_value;
@@ -6753,7 +6728,7 @@ function create_else_block$5(ctx) {
   let dispose;
   let if_block =
   /*_isMenuVisible*/
-  ctx[17] && create_if_block_1$7(ctx);
+  ctx[17] && create_if_block_1$9(ctx);
   let each_value_1 =
   /*_options*/
   ctx[12];
@@ -6871,7 +6846,7 @@ function create_else_block$5(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block_1$7(ctx);
+          if_block = create_if_block_1$9(ctx);
           if_block.c();
           if_block.m(t0.parentNode, t0);
         }
@@ -7018,7 +6993,7 @@ function create_else_block$5(ctx) {
 } // (251:2) {#if _native}
 
 
-function create_if_block$f(ctx) {
+function create_if_block$h(ctx) {
   let select;
   let slot;
   let select_aria_label_value;
@@ -7030,7 +7005,7 @@ function create_if_block$f(ctx) {
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
+    each_blocks[i] = create_each_block$6(get_each_context$6(ctx, each_value, i));
   }
 
   return {
@@ -7085,12 +7060,12 @@ function create_if_block$f(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$5(ctx, each_value, i);
+          const child_ctx = get_each_context$6(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$5(child_ctx);
+            each_blocks[i] = create_each_block$6(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(select, null);
           }
@@ -7144,7 +7119,7 @@ function create_if_block$f(ctx) {
 } // (271:4) {#if _isMenuVisible}
 
 
-function create_if_block_1$7(ctx) {
+function create_if_block_1$9(ctx) {
   let div;
   let div_data_testid_value;
   let noscroll_action;
@@ -7381,7 +7356,7 @@ function create_each_block_1(key_1, ctx) {
 } // (260:6) {#each _options as option}
 
 
-function create_each_block$5(ctx) {
+function create_each_block$6(ctx) {
   let option;
   let t0_value =
   /*option*/
@@ -7454,7 +7429,7 @@ function create_each_block$5(ctx) {
   };
 }
 
-function create_fragment$v(ctx) {
+function create_fragment$x(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -7462,8 +7437,8 @@ function create_fragment$v(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*_native*/
-    ctx[14]) return create_if_block$f;
-    return create_else_block$5;
+    ctx[14]) return create_if_block$h;
+    return create_else_block$6;
   }
 
   let current_block_type = select_block_type(ctx);
@@ -7585,7 +7560,7 @@ function parseValues(selectedValue) {
   return rawValues.map(val => `${val}`);
 }
 
-function instance$s($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let _disabled;
 
   let _error;
@@ -7982,7 +7957,7 @@ class Dropdown extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$s, create_fragment$v, safe_not_equal, {
+    }, instance$u, create_fragment$x, safe_not_equal, {
       name: 0,
       arialabel: 1,
       value: 29,
@@ -8186,7 +8161,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$u(ctx) {
+function create_fragment$w(ctx) {
   return {
     c() {
       this.c = noop;
@@ -8207,7 +8182,7 @@ class DropdownItem extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$u, safe_not_equal, {}, null);
+    }, null, create_fragment$w, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -8221,7 +8196,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$t(ctx) {
+function create_fragment$v(ctx) {
   let div;
   return {
     c() {
@@ -8281,7 +8256,7 @@ function isFocusable(element) {
   }
 }
 
-function instance$r($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -8450,7 +8425,7 @@ class FocusTrap extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$r, create_fragment$t, safe_not_equal, {
+    }, instance$t, create_fragment$v, safe_not_equal, {
       active: 1
     }, null);
 
@@ -8486,7 +8461,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$e(ctx) {
+function create_if_block$g(ctx) {
   let goa_divider;
   return {
     c() {
@@ -8505,7 +8480,7 @@ function create_if_block$e(ctx) {
   };
 }
 
-function create_fragment$s(ctx) {
+function create_fragment$u(ctx) {
   let div5;
   let div4;
   let div0;
@@ -8523,7 +8498,7 @@ function create_fragment$s(ctx) {
   /*navLinks*/
   ctx[2] &&
   /*navLinks*/
-  ctx[2].length > 0 && create_if_block$e();
+  ctx[2].length > 0 && create_if_block$g();
   return {
     c() {
       div5 = element("div");
@@ -8596,7 +8571,7 @@ function create_fragment$s(ctx) {
       /*navLinks*/
       ctx[2].length > 0) {
         if (if_block) ;else {
-          if_block = create_if_block$e();
+          if_block = create_if_block$g();
           if_block.c();
           if_block.m(div4, t1);
         }
@@ -8648,7 +8623,7 @@ function create_fragment$s(ctx) {
   };
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let {
     maxcontentwidth = ""
   } = $$props;
@@ -8686,7 +8661,7 @@ class Footer extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$q, create_fragment$s, safe_not_equal, {
+    }, instance$s, create_fragment$u, safe_not_equal, {
       maxcontentwidth: 0
     }, null);
 
@@ -8722,14 +8697,14 @@ class Footer extends SvelteElement {
 customElements.define("goa-app-footer", Footer);
 /* libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$4(ctx, list, i) {
+function get_each_context$5(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[3] = list[i];
   return child_ctx;
 } // (52:4) {#each children as child}
 
 
-function create_each_block$4(ctx) {
+function create_each_block$5(ctx) {
   let li;
   let a;
   let t_value =
@@ -8776,7 +8751,7 @@ function create_each_block$4(ctx) {
   };
 }
 
-function create_fragment$r(ctx) {
+function create_fragment$t(ctx) {
   let section;
   let div;
   let t;
@@ -8787,7 +8762,7 @@ function create_fragment$r(ctx) {
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
+    each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
   }
 
   return {
@@ -8831,12 +8806,12 @@ function create_fragment$r(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$4(ctx, each_value, i);
+          const child_ctx = get_each_context$5(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$4(child_ctx);
+            each_blocks[i] = create_each_block$5(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(ul, null);
           }
@@ -8864,7 +8839,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -8899,7 +8874,7 @@ class FooterMetaSection extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$p, create_fragment$r, safe_not_equal, {}, null);
+    }, instance$r, create_fragment$t, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -8913,14 +8888,14 @@ class FooterMetaSection extends SvelteElement {
 customElements.define("goa-app-footer-meta-section", FooterMetaSection);
 /* libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[5] = list[i];
   return child_ctx;
 } // (31:2) {#if heading}
 
 
-function create_if_block$d(ctx) {
+function create_if_block$f(ctx) {
   let div;
   let t0;
   let t1;
@@ -8962,7 +8937,7 @@ function create_if_block$d(ctx) {
 } // (49:4) {#each children as child}
 
 
-function create_each_block$3(ctx) {
+function create_each_block$4(ctx) {
   let li;
   let a;
   let t_value =
@@ -9009,7 +8984,7 @@ function create_each_block$3(ctx) {
   };
 }
 
-function create_fragment$q(ctx) {
+function create_fragment$s(ctx) {
   let section;
   let t0;
   let div;
@@ -9018,14 +8993,14 @@ function create_fragment$q(ctx) {
   let ul_style_value;
   let if_block =
   /*heading*/
-  ctx[0] && create_if_block$d(ctx);
+  ctx[0] && create_if_block$f(ctx);
   let each_value =
   /*children*/
   ctx[3];
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+    each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
   }
 
   return {
@@ -9085,7 +9060,7 @@ function create_fragment$q(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$d(ctx);
+          if_block = create_if_block$f(ctx);
           if_block.c();
           if_block.m(section, t0);
         }
@@ -9103,12 +9078,12 @@ function create_fragment$q(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$3(ctx, each_value, i);
+          const child_ctx = get_each_context$4(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$3(child_ctx);
+            each_blocks[i] = create_each_block$4(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(ul, null);
           }
@@ -9156,7 +9131,7 @@ function create_fragment$q(ctx) {
   };
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -9207,7 +9182,7 @@ class FooterNavSection extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$o, create_fragment$q, safe_not_equal, {
+    }, instance$q, create_fragment$s, safe_not_equal, {
       heading: 0,
       maxcolumncount: 1
     }, null);
@@ -9255,7 +9230,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$5(ctx) {
+function create_if_block_2$7(ctx) {
   let div;
   let t0;
   let t1;
@@ -9266,7 +9241,7 @@ function create_if_block_2$5(ctx) {
   ctx[9].includes(
   /*requirement*/
   ctx[8]);
-  let if_block = show_if && create_if_block_3$5(ctx);
+  let if_block = show_if && create_if_block_3$7(ctx);
   return {
     c() {
       div = element("div");
@@ -9305,7 +9280,7 @@ function create_if_block_2$5(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block_3$5(ctx);
+          if_block = create_if_block_3$7(ctx);
           if_block.c();
           if_block.m(div, null);
         }
@@ -9324,7 +9299,7 @@ function create_if_block_2$5(ctx) {
 } // (34:6) {#if requirement && REQUIREMENT_TYPES.includes(requirement)}
 
 
-function create_if_block_3$5(ctx) {
+function create_if_block_3$7(ctx) {
   let em;
   let t0;
   let t1;
@@ -9362,7 +9337,7 @@ function create_if_block_3$5(ctx) {
 } // (42:2) {#if error}
 
 
-function create_if_block_1$6(ctx) {
+function create_if_block_1$8(ctx) {
   let div;
   let goa_icon;
   let t0;
@@ -9405,7 +9380,7 @@ function create_if_block_1$6(ctx) {
 } // (48:2) {#if helptext}
 
 
-function create_if_block$c(ctx) {
+function create_if_block$e(ctx) {
   let div;
   let t;
   return {
@@ -9437,7 +9412,7 @@ function create_if_block$c(ctx) {
   };
 }
 
-function create_fragment$p(ctx) {
+function create_fragment$r(ctx) {
   let div1;
   let t0;
   let div0;
@@ -9446,13 +9421,13 @@ function create_fragment$p(ctx) {
   let div1_style_value;
   let if_block0 =
   /*label*/
-  ctx[5] && create_if_block_2$5(ctx);
+  ctx[5] && create_if_block_2$7(ctx);
   let if_block1 =
   /*error*/
-  ctx[7] && create_if_block_1$6(ctx);
+  ctx[7] && create_if_block_1$8(ctx);
   let if_block2 =
   /*helptext*/
-  ctx[6] && create_if_block$c(ctx);
+  ctx[6] && create_if_block$e(ctx);
   return {
     c() {
       div1 = element("div");
@@ -9499,7 +9474,7 @@ function create_fragment$p(ctx) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_2$5(ctx);
+          if_block0 = create_if_block_2$7(ctx);
           if_block0.c();
           if_block0.m(div1, t0);
         }
@@ -9514,7 +9489,7 @@ function create_fragment$p(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block_1$6(ctx);
+          if_block1 = create_if_block_1$8(ctx);
           if_block1.c();
           if_block1.m(div1, t2);
         }
@@ -9529,7 +9504,7 @@ function create_fragment$p(ctx) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
-          if_block2 = create_if_block$c(ctx);
+          if_block2 = create_if_block$e(ctx);
           if_block2.c();
           if_block2.m(div1, null);
         }
@@ -9574,7 +9549,7 @@ function create_fragment$p(ctx) {
   };
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -9630,7 +9605,7 @@ class FormItem extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$n, create_fragment$p, safe_not_equal, {
+    }, instance$p, create_fragment$r, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -9762,7 +9737,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$o(ctx) {
+function create_fragment$q(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -9830,7 +9805,7 @@ function create_fragment$o(ctx) {
   };
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9875,7 +9850,7 @@ class Grid extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$m, create_fragment$o, safe_not_equal, {
+    }, instance$o, create_fragment$q, safe_not_equal, {
       gap: 0,
       minchildwidth: 1,
       mt: 2,
@@ -9971,7 +9946,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$n(ctx) {
+function create_fragment$p(ctx) {
   let div1;
   let goa_page_block;
   let h1;
@@ -10056,7 +10031,7 @@ function create_fragment$n(ctx) {
   };
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -10084,7 +10059,7 @@ class HeroBanner extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$l, create_fragment$n, safe_not_equal, {
+    }, instance$n, create_fragment$p, safe_not_equal, {
       heading: 0,
       backgroundurl: 1,
       minheight: 2
@@ -10144,7 +10119,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$m(ctx) {
+function create_fragment$o(ctx) {
   let button;
   let goa_icon;
   let button_style_value;
@@ -10316,7 +10291,7 @@ function handleClick(e) {
   }));
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -10421,7 +10396,7 @@ class IconButton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$k, create_fragment$m, safe_not_equal, {
+    }, instance$m, create_fragment$o, safe_not_equal, {
       icon: 0,
       size: 1,
       theme: 2,
@@ -10589,7 +10564,7 @@ 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$b(ctx) {
+function create_if_block$d(ctx) {
   let show_if;
   let if_block_anchor;
 
@@ -10599,11 +10574,11 @@ function create_if_block$b(ctx) {
     16) show_if = null;
     if (show_if == null) show_if = !!Object.keys(
     /*_iconOverrides*/
-    ctx[12]).includes(
+    ctx[13]).includes(
     /*type*/
     ctx[4]);
-    if (show_if) return create_if_block_1$5;
-    return create_else_block$4;
+    if (show_if) return create_if_block_1$7;
+    return create_else_block$5;
   }
 
   let current_block_type = select_block_type(ctx, -1);
@@ -10639,10 +10614,10 @@ function create_if_block$b(ctx) {
     }
 
   };
-} // (60:4) {:else}
+} // (59:4) {:else}
 
 
-function create_else_block$4(ctx) {
+function create_else_block$5(ctx) {
   let ion_icon;
   let ion_icon_name_value;
   return {
@@ -10650,7 +10625,7 @@ function create_else_block$4(ctx) {
       ion_icon = element("ion-icon");
       set_custom_element_data(ion_icon, "name", ion_icon_name_value =
       /*theme*/
-      ctx[5] === "filled" ||
+      ctx[6] === "filled" ||
       /*type*/
       ctx[4].indexOf("logo") === 0 ?
       /*type*/
@@ -10658,7 +10633,7 @@ function create_else_block$4(ctx) {
       /*type*/
       ctx[4]}-${
       /*theme*/
-      ctx[5]}`);
+      ctx[6]}`);
     },
 
     m(target, anchor) {
@@ -10668,9 +10643,9 @@ function create_else_block$4(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*theme, type*/
-      48 && ion_icon_name_value !== (ion_icon_name_value =
+      80 && ion_icon_name_value !== (ion_icon_name_value =
       /*theme*/
-      ctx[5] === "filled" ||
+      ctx[6] === "filled" ||
       /*type*/
       ctx[4].indexOf("logo") === 0 ?
       /*type*/
@@ -10678,7 +10653,7 @@ function create_else_block$4(ctx) {
       /*type*/
       ctx[4]}-${
       /*theme*/
-      ctx[5]}`)) {
+      ctx[6]}`)) {
         set_custom_element_data(ion_icon, "name", ion_icon_name_value);
       }
     },
@@ -10691,31 +10666,22 @@ function create_else_block$4(ctx) {
 } // (55:4) {#if Object.keys(_iconOverrides).includes(type)}
 
 
-function create_if_block_1$5(ctx) {
+function create_if_block_1$7(ctx) {
   let div;
-  let html_tag;
   let raw_value =
   /*_iconOverrides*/
-  ctx[12][
+  ctx[13][
   /*type*/
   ctx[4]] + "";
-  let t;
-  let span;
   return {
     c() {
       div = element("div");
-      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);
+      div.innerHTML = raw_value;
     },
 
     p(ctx, dirty) {
@@ -10723,9 +10689,9 @@ function create_if_block_1$5(ctx) {
       /*type*/
       16 && raw_value !== (raw_value =
       /*_iconOverrides*/
-      ctx[12][
+      ctx[13][
       /*type*/
-      ctx[4]] + "")) html_tag.p(raw_value);
+      ctx[4]] + "")) div.innerHTML = raw_value;
     },
 
     d(detaching) {
@@ -10735,24 +10701,27 @@ function create_if_block_1$5(ctx) {
   };
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$n(ctx) {
   let div;
+  let div_class_value;
   let div_style_value;
   let if_block =
   /*type*/
-  ctx[4] && create_if_block$b(ctx);
+  ctx[4] && create_if_block$d(ctx);
   return {
     c() {
       div = element("div");
       if (if_block) if_block.c();
       this.c = noop;
-      attr(div, "class", "goa-icon");
+      attr(div, "class", div_class_value = `goa-icon goa-icon--${
+      /*size*/
+      ctx[5]}`);
       attr(div, "data-testid",
       /*testid*/
-      ctx[9]);
+      ctx[11]);
       attr(div, "title",
       /*title*/
-      ctx[8]);
+      ctx[10]);
       attr(div, "style", div_style_value = `
     ${calculateMargin(
       /*mt*/
@@ -10763,19 +10732,19 @@ function create_fragment$l(ctx) {
       ctx[2],
       /*ml*/
       ctx[3])}
-    --size: ${
-      /*_size*/
-      ctx[10]};
-    --fill-color: ${
+    ${cssVar("--fill-color",
       /*fillcolor*/
-      ctx[6]};
-    --opacity: ${
+      ctx[8])};
+    ${cssVar("--hover-color",
+      /*hovercolor*/
+      ctx[7])};
+    ${cssVar("--opacity",
       /*opacity*/
-      ctx[7]};
+      ctx[9])};
   `);
       toggle_class(div, "inverted",
       /*isInverted*/
-      ctx[11]);
+      ctx[12]);
     },
 
     m(target, anchor) {
@@ -10790,7 +10759,7 @@ function create_fragment$l(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$b(ctx);
+          if_block = create_if_block$d(ctx);
           if_block.c();
           if_block.m(div, null);
         }
@@ -10799,25 +10768,33 @@ function create_fragment$l(ctx) {
         if_block = null;
       }
 
+      if (dirty &
+      /*size*/
+      32 && div_class_value !== (div_class_value = `goa-icon goa-icon--${
+      /*size*/
+      ctx[5]}`)) {
+        attr(div, "class", div_class_value);
+      }
+
       if (dirty &
       /*testid*/
-      512) {
+      2048) {
         attr(div, "data-testid",
         /*testid*/
-        ctx[9]);
+        ctx[11]);
       }
 
       if (dirty &
       /*title*/
-      256) {
+      1024) {
         attr(div, "title",
         /*title*/
-        ctx[8]);
+        ctx[10]);
       }
 
       if (dirty &
-      /*mt, mr, mb, ml, _size, fillcolor, opacity*/
-      1231 && div_style_value !== (div_style_value = `
+      /*mt, mr, mb, ml, fillcolor, hovercolor, opacity*/
+      911 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[0],
@@ -10827,25 +10804,25 @@ function create_fragment$l(ctx) {
       ctx[2],
       /*ml*/
       ctx[3])}
-    --size: ${
-      /*_size*/
-      ctx[10]};
-    --fill-color: ${
+    ${cssVar("--fill-color",
       /*fillcolor*/
-      ctx[6]};
-    --opacity: ${
+      ctx[8])};
+    ${cssVar("--hover-color",
+      /*hovercolor*/
+      ctx[7])};
+    ${cssVar("--opacity",
       /*opacity*/
-      ctx[7]};
+      ctx[9])};
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty &
-      /*isInverted*/
-      2048) {
+      /*size, isInverted*/
+      4128) {
         toggle_class(div, "inverted",
         /*isInverted*/
-        ctx[11]);
+        ctx[12]);
       }
     },
 
@@ -10860,11 +10837,8 @@ function create_fragment$l(ctx) {
   };
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let isInverted;
-
-  let _size;
-
   let {
     mt = null
   } = $$props;
@@ -10889,6 +10863,9 @@ function instance$j($$self, $$props, $$invalidate) {
   let {
     inverted = "false"
   } = $$props;
+  let {
+    hovercolor = ""
+  } = $$props;
   let {
     fillcolor = ""
   } = $$props;
@@ -10903,15 +10880,19 @@ function instance$j($$self, $$props, $$invalidate) {
   } = $$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>`
+    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="currentcolor"/> </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="currentcolor"/> </svg>`,
+    "goa-file": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1357_108691)"> <path d="M38.741 14C38.541 13.07 38.081 12.22 37.401 11.54L36.861 11L27.861 2L27.321 1.46C26.641 0.78 25.781 0.32 24.861 0.12C24.511 0.04 24.151 0 23.791 0H5.86096C3.10096 0 0.860962 2.24 0.860962 5V43C0.860962 45.76 3.10096 48 5.86096 48H33.861C36.621 48 38.861 45.76 38.861 43V15.07C38.861 14.71 38.811 14.35 38.741 14ZM35.041 12H29.871C28.221 12 26.871 10.65 26.871 9V3.83L35.041 12ZM36.871 43C36.871 44.65 35.521 46 33.871 46H5.87097C4.22097 46 2.87097 44.65 2.87097 43V5C2.87097 3.35 4.22097 2 5.87097 2H23.801C24.171 2 24.531 2.07 24.871 2.2V9C24.871 11.76 27.111 14 29.871 14H36.671C36.801 14.34 36.871 14.7 36.871 15.07V43Z" fill="currentcolor"/> </g> <defs> <clipPath id="clip0_1357_108691"><rect width="38" height="48" fill="white" transform="translate(0.861328)"/></clipPath></defs></svg>`,
+    "goa-text": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.7953 14C38.5953 13.07 38.1353 12.22 37.4553 11.54L36.9153 11L27.9153 2L27.3753 1.46C26.6953 0.78 25.8353 0.32 24.9153 0.12C24.5653 0.04 24.2053 0 23.8453 0H5.91528C3.15528 0 0.915283 2.24 0.915283 5V43C0.915283 45.76 3.15528 48 5.91528 48H33.9153C36.6753 48 38.9153 45.76 38.9153 43V15.07C38.9153 14.71 38.8653 14.35 38.7953 14ZM35.0953 12H29.9253C28.2753 12 26.9253 10.65 26.9253 9V3.83L35.0953 12ZM36.9253 43C36.9253 44.65 35.5753 46 33.9253 46H5.91528C4.26528 46 2.91528 44.65 2.91528 43V5C2.91528 3.35 4.26528 2 5.91528 2H23.8453C24.2153 2 24.5753 2.07 24.9153 2.2V9C24.9153 11.76 27.1553 14 29.9153 14H36.7153C36.8453 14.34 36.9153 14.7 36.9153 15.07V43H36.9253Z" fill="currentcolor"/> <path d="M27.9153 34H11.9153C11.363 34 10.9153 34.4477 10.9153 35C10.9153 35.5523 11.363 36 11.9153 36H27.9153C28.4676 36 28.9153 35.5523 28.9153 35C28.9153 34.4477 28.4676 34 27.9153 34Z" fill="currentcolor"/> <path d="M27.9153 26H11.9153C11.363 26 10.9153 26.4477 10.9153 27C10.9153 27.5523 11.363 28 11.9153 28H27.9153C28.4676 28 28.9153 27.5523 28.9153 27C28.9153 26.4477 28.4676 26 27.9153 26Z" fill="currentcolor"/> </svg>`,
+    "goa-pdf": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M37.8861 14C37.6861 13.07 37.2261 12.22 36.5461 11.54L36.0061 11L27.0061 2L26.4661 1.46C25.7861 0.78 24.9261 0.32 24.0061 0.12C23.6561 0.04 23.2961 0 22.9361 0H5.0061C2.2461 0 0.00610352 2.24 0.00610352 5V43C0.00610352 45.76 2.2461 48 5.0061 48H33.0061C35.7661 48 38.0061 45.76 38.0061 43V15.07C38.0061 14.71 37.9561 14.35 37.8861 14ZM34.1861 12H29.0161C27.3661 12 26.0161 10.65 26.0161 9V3.83L34.1861 12ZM36.0161 43C36.0161 44.65 34.6661 46 33.0161 46H5.0061C3.3561 46 2.0061 44.65 2.0061 43V5C2.0061 3.35 3.3561 2 5.0061 2H22.9361C23.3061 2 23.6661 2.07 24.0061 2.2V9C24.0061 11.76 26.2461 14 29.0061 14H35.8061C35.9361 14.34 36.0061 14.7 36.0061 15.07V43H36.0161Z" fill="currentcolor"/> <path d="M5.02611 27C5.02611 26.45 5.47611 26 6.02611 26H9.05611C11.1161 26 12.9261 27.06 12.9261 29.28C12.9261 31.5 11.2461 32.74 8.85611 32.74H7.25611V35.85C7.25611 36.47 6.75611 36.97 6.13611 36.97C5.51611 36.97 5.01611 36.47 5.01611 35.85V27.01L5.02611 27ZM7.26611 30.96H8.73611C9.91611 30.96 10.6561 30.53 10.6561 29.31C10.6561 28.22 9.90611 27.77 8.79611 27.77H7.25611V30.96H7.26611Z" fill="currentcolor"/> <path d="M15.0361 27C15.0361 26.45 15.4861 26 16.0361 26H18.8461C22.1761 26 24.0161 28.03 24.0161 31.25C24.0161 34.82 22.0961 36.96 18.7661 36.96H16.0361C15.4861 36.96 15.0361 36.51 15.0361 35.96V27ZM17.2961 35.2H18.7361C20.6861 35.2 21.6961 33.74 21.6961 31.28C21.6961 29.25 20.7861 27.79 18.7461 27.79H17.2861V35.2H17.2961Z" fill="currentcolor"/> <path d="M25.9761 27C25.9761 26.45 26.4261 26 26.9761 26H32.0861C32.5961 26 33.0061 26.41 33.0061 26.92C33.0061 27.43 32.5961 27.84 32.0861 27.84H28.1761V30.63H31.8161C32.3161 30.63 32.7161 31.03 32.7161 31.53C32.7161 32.03 32.3161 32.43 31.8161 32.43H28.1761V35.86C28.1761 36.47 27.6861 36.96 27.0761 36.96C26.4661 36.96 25.9761 36.47 25.9761 35.86V26.99V27Z" fill="currentcolor"/> </svg> `,
+    "goa-doc": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.6134 14C38.4134 13.07 37.9534 12.22 37.2734 11.54L36.7334 11L27.7334 2L27.1934 1.46C26.5134 0.78 25.6534 0.32 24.7334 0.12C24.3834 0.04 24.0234 0 23.6634 0H5.7334C2.9734 0 0.733398 2.24 0.733398 5V43C0.733398 45.76 2.9734 48 5.7334 48H33.7334C36.4934 48 38.7334 45.76 38.7334 43V15.07C38.7334 14.71 38.6834 14.35 38.6134 14ZM34.9134 12H29.7434C28.0934 12 26.7434 10.65 26.7434 9V3.83L34.9134 12ZM36.7434 43C36.7434 44.65 35.3934 46 33.7434 46H5.7334C4.0834 46 2.7334 44.65 2.7334 43V5C2.7334 3.35 4.0834 2 5.7334 2H23.6634C24.0334 2 24.3934 2.07 24.7334 2.2V9C24.7334 11.76 26.9734 14 29.7334 14H36.5334C36.6634 14.34 36.7334 14.7 36.7334 15.07V43H36.7434Z" fill="currentcolor"/> <path d="M13.7834 36.6406L10.9034 24.5806C10.6934 23.7206 11.3534 22.8906 12.2334 22.8906C12.8734 22.8906 13.4334 23.3406 13.5734 23.9706C14.4934 28.2306 15.3434 32.5006 15.6434 34.9706H15.6634C16.0934 32.6806 17.3834 27.7106 18.2434 24.0806C18.4134 23.3806 19.0334 22.8906 19.7534 22.8906C20.4634 22.8906 21.0834 23.3706 21.2534 24.0606C22.0734 27.3606 23.3634 32.5806 23.7534 34.8406H23.7734C24.1834 32.0406 25.4534 26.8306 26.1134 23.8706C26.2434 23.3006 26.7434 22.8906 27.3334 22.8906C28.1534 22.8906 28.7434 23.6606 28.5434 24.4506L25.4134 36.6706C25.2134 37.4606 24.5034 38.0106 23.6934 38.0106C22.8634 38.0106 22.1534 37.4506 21.9634 36.6406C21.1734 33.2806 20.0434 28.8506 19.6434 26.6306H19.6234C19.1834 28.9106 18.0234 33.4506 17.2234 36.6606C17.0234 37.4506 16.3134 38.0006 15.5034 38.0006C14.6834 38.0006 13.9634 37.4406 13.7734 36.6406H13.7834Z" fill="currentcolor"/> </svg> `,
+    "goa-ppt": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.2498 14C38.0498 13.07 37.5898 12.22 36.9098 11.54L36.3698 11L27.3698 2L26.8298 1.46C26.1497 0.78 25.2898 0.32 24.3698 0.12C24.0198 0.04 23.6598 0 23.2998 0H5.36975C2.60975 0 0.369751 2.24 0.369751 5V43C0.369751 45.76 2.60975 48 5.36975 48H33.3698C36.1297 48 38.3698 45.76 38.3698 43V15.07C38.3698 14.71 38.3198 14.35 38.2498 14ZM34.5498 12H29.3798C27.7298 12 26.3798 10.65 26.3798 9V3.83L34.5498 12ZM36.3797 43C36.3797 44.65 35.0298 46 33.3797 46H5.36975C3.71975 46 2.36975 44.65 2.36975 43V5C2.36975 3.35 3.71975 2 5.36975 2H23.2998C23.6698 2 24.0298 2.07 24.3698 2.2V9C24.3698 11.76 26.6098 14 29.3698 14H36.1698C36.2998 14.34 36.3698 14.7 36.3698 15.07V43H36.3797Z" fill="currentcolor"/> <path d="M14.0798 24.8906C14.0798 23.7906 14.9798 22.8906 16.0798 22.8906H19.4698C22.3098 22.8906 24.6598 24.3406 24.6598 27.2906C24.6598 30.2406 22.4198 31.9306 19.2298 31.9306H16.7698V36.6606C16.7698 37.4006 16.1698 38.0006 15.4298 38.0006C14.6898 38.0006 14.0898 37.4006 14.0898 36.6606V24.8906H14.0798ZM16.7598 29.8206H19.0698C20.8098 29.8206 21.9498 29.1806 21.9498 27.3606C21.9498 25.7306 20.7798 25.0306 19.1298 25.0306H16.7498V29.8306L16.7598 29.8206Z" fill="currentcolor"/> </svg> `,
+    "goa-xls": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.3407 14C38.1407 13.07 37.6807 12.22 37.0007 11.54L36.4607 11L27.4607 2L26.9207 1.46C26.2407 0.78 25.3807 0.32 24.4607 0.12C24.1107 0.04 23.7507 0 23.3907 0H5.46069C2.70069 0 0.460693 2.24 0.460693 5V43C0.460693 45.76 2.70069 48 5.46069 48H33.4607C36.2207 48 38.4607 45.76 38.4607 43V15.07C38.4607 14.71 38.4107 14.35 38.3407 14ZM34.6407 12H29.4707C27.8207 12 26.4707 10.65 26.4707 9V3.83L34.6407 12ZM36.4707 43C36.4707 44.65 35.1207 46 33.4707 46H5.46069C3.81069 46 2.46069 44.65 2.46069 43V5C2.46069 3.35 3.81069 2 5.46069 2H23.3907C23.7607 2 24.1207 2.07 24.4607 2.2V9C24.4607 11.76 26.7007 14 29.4607 14H36.2607C36.3907 14.34 36.4607 14.7 36.4607 15.07V43H36.4707Z" fill="currentcolor"/> <path d="M23.4107 38.0006C22.9407 38.0006 22.5107 37.7506 22.2707 37.3406L19.3907 32.2806H19.3707L16.4607 37.3906C16.2507 37.7706 15.8407 38.0006 15.4107 38.0006C14.4707 38.0006 13.8907 36.9706 14.3807 36.1606L17.9207 30.3906L14.5807 24.8606C14.0607 23.9906 14.6807 22.8906 15.6907 22.8906C16.1607 22.8906 16.5907 23.1406 16.8207 23.5406L19.5307 28.2806L19.5507 28.2606L22.3507 23.4806C22.5607 23.1206 22.9507 22.8906 23.3807 22.8906C24.3107 22.8906 24.8807 23.9106 24.3907 24.7006L21.0307 30.1206L24.5407 36.0206C25.0607 36.8906 24.4307 38.0006 23.4207 38.0006H23.4107Z" fill="currentcolor"/> </svg> `,
+    "goa-zip": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.7043 14C38.5043 13.07 38.0443 12.22 37.3643 11.54L36.8243 11L27.8243 2L27.2843 1.46C26.6043 0.78 25.7443 0.32 24.8243 0.12C24.4743 0.04 24.1143 0 23.7543 0H5.82434C3.06434 0 0.824341 2.24 0.824341 5V43C0.824341 45.76 3.06434 48 5.82434 48H33.8243C36.5843 48 38.8243 45.76 38.8243 43V15.07C38.8243 14.71 38.7743 14.35 38.7043 14ZM35.0043 12H29.8343C28.1843 12 26.8343 10.65 26.8343 9V3.83L35.0043 12ZM36.8343 43C36.8343 44.65 35.4843 46 33.8343 46H5.82434C4.17434 46 2.82434 44.65 2.82434 43V5C2.82434 3.35 4.17434 2 5.82434 2H23.7543C24.1243 2 24.4843 2.07 24.8243 2.2V9C24.8243 11.76 27.0643 14 29.8243 14H36.6243C36.7543 14.34 36.8243 14.7 36.8243 15.07V43H36.8343Z" fill="currentcolor"/> <path d="M14.8243 20H12.8243V22H14.8243V20Z" fill="currentcolor"/> <path d="M12.8243 18H10.8243V20H12.8243V18Z" fill="currentcolor"/> <path d="M14.8243 16H12.8243V18H14.8243V16Z" fill="currentcolor"/> <path d="M12.8243 14H10.8243V16H12.8243V14Z" fill="currentcolor"/> <path d="M14.8243 12H12.8243V14H14.8243V12Z" fill="currentcolor"/> <path d="M12.8243 10H10.8243V12H12.8243V10Z" fill="currentcolor"/> <path d="M14.8243 8H12.8243V10H14.8243V8Z" fill="currentcolor"/> <path d="M12.8243 6H10.8243V8H12.8243V6Z" fill="currentcolor"/> <path d="M14.8243 4H12.8243V6H14.8243V4Z" fill="currentcolor"/> <path d="M12.8243 2H10.8243V4H12.8243V2Z" fill="currentcolor"/> <path d="M17.7244 32.14L15.4744 23.69C15.3644 23.29 15.0044 23 14.5844 23H11.0644C10.6444 23 10.2744 23.28 10.1744 23.69L7.92435 32.14C7.30435 35.17 9.62435 37.97 12.8244 38C16.0144 37.98 18.3444 35.18 17.7244 32.14ZM15.1944 34.89C14.6244 35.58 13.7644 35.98 12.8244 35.99C11.8844 35.98 11.0244 35.58 10.4544 34.89C9.92435 34.24 9.71435 33.42 9.87435 32.59L11.8944 25H13.7544L15.7744 32.59C15.9344 33.42 15.7244 34.24 15.1944 34.89Z" fill="currentcolor"/> <path d="M13.8243 32H11.8243C11.2721 32 10.8243 32.4477 10.8243 33C10.8243 33.5523 11.2721 34 11.8243 34H13.8243C14.3766 34 14.8243 33.5523 14.8243 33C14.8243 32.4477 14.3766 32 13.8243 32Z" fill="currentcolor"/> </svg> `,
+    "goa-video": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M37.977 14C37.777 13.07 37.317 12.22 36.637 11.54L36.097 11L27.097 2L26.557 1.46C25.877 0.78 25.017 0.32 24.097 0.12C23.747 0.04 23.387 0 23.027 0H5.09705C2.33705 0 0.0970459 2.24 0.0970459 5V43C0.0970459 45.76 2.33705 48 5.09705 48H33.097C35.857 48 38.097 45.76 38.097 43V15.07C38.097 14.71 38.047 14.35 37.977 14ZM34.277 12H29.107C27.457 12 26.107 10.65 26.107 9V3.83L34.277 12ZM36.107 43C36.107 44.65 34.757 46 33.107 46H5.09705C3.44705 46 2.09705 44.65 2.09705 43V5C2.09705 3.35 3.44705 2 5.09705 2H23.027C23.397 2 23.757 2.07 24.097 2.2V9C24.097 11.76 26.337 14 29.097 14H35.897C36.027 14.34 36.097 14.7 36.097 15.07V43H36.107Z" fill="currentcolor"/> <path d="M22.097 26.0002V29.0102C22.097 29.7802 22.927 30.2602 23.587 29.8802L25.077 29.0302L28.087 27.3202V34.6902L25.077 32.9802L23.587 32.1302C22.917 31.7502 22.097 32.2302 22.097 33.0002V35.9902H10.097V25.9902H22.097M22.097 23.9902H10.097C8.99705 23.9902 8.09705 24.8902 8.09705 25.9902V35.9902C8.09705 37.0902 8.99705 37.9902 10.097 37.9902H22.097C23.197 37.9902 24.097 37.0902 24.097 35.9902V34.7202L27.107 36.4302C27.427 36.6102 27.767 36.6902 28.087 36.6902C29.137 36.6902 30.087 35.8502 30.087 34.6902V27.3202C30.087 26.1502 29.127 25.3202 28.087 25.3202C27.757 25.3202 27.417 25.4002 27.107 25.5802L24.097 27.2902V25.9902C24.097 24.8902 23.197 23.9902 22.097 23.9902Z" fill="currentcolor"/> </svg> `,
+    "goa-audio": `<svg width="39" height="49" viewBox="0 0 39 49" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.0679 14.2305C37.8679 13.3005 37.4079 12.4505 36.7279 11.7705L36.1879 11.2305L27.1879 2.23047L26.6479 1.69047C25.9679 1.01047 25.1079 0.550469 24.1879 0.350469C23.8379 0.270469 23.4779 0.230469 23.1179 0.230469H5.18793C2.42793 0.230469 0.187927 2.47047 0.187927 5.23047V43.2305C0.187927 45.9905 2.42793 48.2305 5.18793 48.2305H33.1879C35.9479 48.2305 38.1879 45.9905 38.1879 43.2305V15.3005C38.1879 14.9405 38.1379 14.5805 38.0679 14.2305ZM34.3679 12.2305H29.1979C27.5479 12.2305 26.1979 10.8805 26.1979 9.23047V4.06047L34.3679 12.2305ZM36.1979 43.2305C36.1979 44.8805 34.8479 46.2305 33.1979 46.2305H5.19792C3.54792 46.2305 2.19792 44.8805 2.19792 43.2305V5.23047C2.19792 3.58047 3.54792 2.23047 5.19792 2.23047H23.1279C23.4979 2.23047 23.8579 2.30047 24.1979 2.43047V9.23047C24.1979 11.9905 26.4379 14.2305 29.1979 14.2305H35.9979C36.1279 14.5705 36.1979 14.9305 36.1979 15.3005V43.2305Z" fill="currentcolor"/> <path d="M20.1879 25.1189V37.3489L16.3479 34.6089L15.8279 34.2389H10.1879V28.2389H15.8279L16.3479 27.8689L20.1879 25.1289M20.1879 23.1289C19.7979 23.1289 19.3979 23.2489 19.0279 23.5089L15.1879 26.2489H10.1879C9.08793 26.2489 8.18793 27.1489 8.18793 28.2489V34.2489C8.18793 35.3489 9.08793 36.2489 10.1879 36.2489H15.1879L19.0279 38.9889C19.3879 39.2489 19.7879 39.3689 20.1879 39.3689C21.2279 39.3689 22.1979 38.5489 22.1979 37.3689V25.1389C22.1979 23.9589 21.2279 23.1389 20.1879 23.1389V23.1289Z" fill="currentcolor"/> <path d="M26.1381 23.707C26.6381 24.037 27.1081 24.417 27.5481 24.857C27.9881 25.297 28.3681 25.767 28.6981 26.267C29.0281 26.767 29.2981 27.287 29.5181 27.837C29.7381 28.387 29.8981 28.937 30.0081 29.507C30.1181 30.077 30.1681 30.647 30.1681 31.227C30.1681 31.807 30.1181 32.377 30.0081 32.947C29.8981 33.517 29.7381 34.077 29.5181 34.617C29.2981 35.157 29.0281 35.687 28.6981 36.187C28.3681 36.687 27.9881 37.157 27.5481 37.597C27.1081 38.037 26.6381 38.417 26.1381 38.747" stroke="currentcolor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/> </svg> `,
+    "goa-image": `<svg width="39" height="49" viewBox="0 0 39 49" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.1588 14.2305C37.9588 13.3005 37.4988 12.4505 36.8188 11.7705L36.2788 11.2305L27.2788 2.23047L26.7388 1.69047C26.0588 1.01047 25.1988 0.550469 24.2788 0.350469C23.9288 0.270469 23.5688 0.230469 23.2088 0.230469H5.27881C2.51881 0.230469 0.278809 2.47047 0.278809 5.23047V43.2305C0.278809 45.9905 2.51881 48.2305 5.27881 48.2305H33.2788C36.0388 48.2305 38.2788 45.9905 38.2788 43.2305V15.3005C38.2788 14.9405 38.2288 14.5805 38.1588 14.2305ZM34.4588 12.2305H29.2888C27.6388 12.2305 26.2888 10.8805 26.2888 9.23047V4.06047L34.4588 12.2305ZM36.2888 43.2305C36.2888 44.8805 34.9388 46.2305 33.2888 46.2305H5.2888C3.6388 46.2305 2.2888 44.8805 2.2888 43.2305V5.23047C2.2888 3.58047 3.6388 2.23047 5.2888 2.23047H23.2188C23.5888 2.23047 23.9488 2.30047 24.2888 2.43047V9.23047C24.2888 11.9905 26.5288 14.2305 29.2888 14.2305H36.0888C36.2188 14.5705 36.2888 14.9305 36.2888 15.3005V43.2305Z" fill="currentcolor"/> <path d="M20.9985 28.2305C21.3585 28.2305 21.6485 28.4405 21.7885 28.7305L27.1085 36.7305C27.3185 37.0205 27.3185 37.4405 27.1785 37.7305C27.0385 38.0905 26.6785 38.2305 26.3185 38.2305H12.2385C11.8785 38.2305 11.5885 38.0905 11.3785 37.7305C11.2385 37.4405 11.2385 37.0205 11.4485 36.7305L14.8285 31.7305C14.9685 31.4405 15.3285 31.2305 15.6185 31.2305C15.9785 31.2305 16.2685 31.4405 16.4785 31.7305L17.3385 32.9405L20.1385 28.7305C20.3585 28.4405 20.6385 28.2305 20.9985 28.2305ZM20.9985 26.2305C20.0485 26.2305 19.1685 26.6905 18.5385 27.5305L18.4985 27.5805L18.4685 27.6305L17.1185 29.6605C16.6585 29.3805 16.1485 29.2405 15.6085 29.2405C14.6085 29.2405 13.6185 29.8205 13.1085 30.6905L9.79851 35.5905C9.17851 36.4505 9.08851 37.6705 9.57851 38.6305L9.60851 38.7005L9.6485 38.7705C10.2085 39.7005 11.1485 40.2405 12.2285 40.2405H26.3085C27.5185 40.2405 28.5385 39.6005 28.9985 38.5605C29.4385 37.6105 29.3385 36.4405 28.7485 35.6005L23.5085 27.7105C22.9885 26.8005 22.0485 26.2405 21.0085 26.2405L20.9985 26.2305Z" fill="currentcolor"/> <path d="M12.7788 23.2305C13.6088 23.2305 14.2788 23.9005 14.2788 24.7305C14.2788 25.5605 13.6088 26.2305 12.7788 26.2305C11.9488 26.2305 11.2788 25.5605 11.2788 24.7305C11.2788 23.9005 11.9488 23.2305 12.7788 23.2305ZM12.7788 21.2305C10.8488 21.2305 9.27881 22.8005 9.27881 24.7305C9.27881 26.6605 10.8488 28.2305 12.7788 28.2305C14.7088 28.2305 16.2788 26.6605 16.2788 24.7305C16.2788 22.8005 14.7088 21.2305 12.7788 21.2305Z" fill="currentcolor"/> </svg> `
   };
 
   $$self.$$set = $$props => {
@@ -10920,57 +10901,49 @@ function instance$j($$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 ('theme' in $$props) $$invalidate(5, theme = $$props.theme);
+    if ('size' in $$props) $$invalidate(5, size = $$props.size);
+    if ('theme' in $$props) $$invalidate(6, theme = $$props.theme);
     if ('inverted' in $$props) $$invalidate(14, inverted = $$props.inverted);
-    if ('fillcolor' in $$props) $$invalidate(6, fillcolor = $$props.fillcolor);
-    if ('opacity' in $$props) $$invalidate(7, opacity = $$props.opacity);
-    if ('title' in $$props) $$invalidate(8, title = $$props.title);
-    if ('testid' in $$props) $$invalidate(9, testid = $$props.testid);
+    if ('hovercolor' in $$props) $$invalidate(7, hovercolor = $$props.hovercolor);
+    if ('fillcolor' in $$props) $$invalidate(8, fillcolor = $$props.fillcolor);
+    if ('opacity' in $$props) $$invalidate(9, opacity = $$props.opacity);
+    if ('title' in $$props) $$invalidate(10, title = $$props.title);
+    if ('testid' in $$props) $$invalidate(11, testid = $$props.testid);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*inverted*/
     16384) {
-      $$invalidate(11, isInverted = toBoolean(inverted));
-    }
-
-    if ($$self.$$.dirty &
-    /*size*/
-    8192) {
-      $$invalidate(10, _size = {
-        small: "1.25rem",
-        medium: "1.5rem",
-        large: "2rem"
-      }[size]);
+      $$invalidate(12, isInverted = toBoolean(inverted));
     }
   };
 
-  return [mt, mr, mb, ml, type, theme, fillcolor, opacity, title, testid, _size, isInverted, _iconOverrides, size, inverted];
+  return [mt, mr, mb, ml, type, size, theme, hovercolor, fillcolor, opacity, title, testid, isInverted, _iconOverrides, 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}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override *{fill:var(--goa-color-interactive-default)}.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{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)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, 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$j, create_fragment$l, safe_not_equal, {
+    }, instance$l, create_fragment$n, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
       ml: 3,
       type: 4,
-      size: 13,
-      theme: 5,
+      size: 5,
+      theme: 6,
       inverted: 14,
-      fillcolor: 6,
-      opacity: 7,
-      title: 8,
-      testid: 9
+      hovercolor: 7,
+      fillcolor: 8,
+      opacity: 9,
+      title: 10,
+      testid: 11
     }, null);
 
     if (options) {
@@ -10986,7 +10959,7 @@ class Icon extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "fillcolor", "opacity", "title", "testid"];
+    return ["mt", "mr", "mb", "ml", "type", "size", "theme", "inverted", "hovercolor", "fillcolor", "opacity", "title", "testid"];
   }
 
   get mt() {
@@ -11045,7 +11018,7 @@ class Icon extends SvelteElement {
   }
 
   get size() {
-    return this.$$.ctx[13];
+    return this.$$.ctx[5];
   }
 
   set size(size) {
@@ -11056,7 +11029,7 @@ class Icon extends SvelteElement {
   }
 
   get theme() {
-    return this.$$.ctx[5];
+    return this.$$.ctx[6];
   }
 
   set theme(theme) {
@@ -11077,8 +11050,19 @@ class Icon extends SvelteElement {
     flush();
   }
 
+  get hovercolor() {
+    return this.$$.ctx[7];
+  }
+
+  set hovercolor(hovercolor) {
+    this.$$set({
+      hovercolor
+    });
+    flush();
+  }
+
   get fillcolor() {
-    return this.$$.ctx[6];
+    return this.$$.ctx[8];
   }
 
   set fillcolor(fillcolor) {
@@ -11089,7 +11073,7 @@ class Icon extends SvelteElement {
   }
 
   get opacity() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[9];
   }
 
   set opacity(opacity) {
@@ -11100,7 +11084,7 @@ class Icon extends SvelteElement {
   }
 
   get title() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[10];
   }
 
   set title(title) {
@@ -11111,7 +11095,7 @@ class Icon extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[11];
   }
 
   set testid(testid) {
@@ -11126,7 +11110,7 @@ class Icon extends SvelteElement {
 customElements.define("goa-icon", Icon);
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_4(ctx) {
+function create_if_block_4$2(ctx) {
   let div;
   let t;
   return {
@@ -11159,7 +11143,7 @@ function create_if_block_4(ctx) {
 } // (123:4) {#if leadingicon}
 
 
-function create_if_block_3$4(ctx) {
+function create_if_block_3$6(ctx) {
   let goa_icon;
   return {
     c() {
@@ -11193,7 +11177,7 @@ function create_if_block_3$4(ctx) {
 } // (157:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
-function create_if_block_2$4(ctx) {
+function create_if_block_2$6(ctx) {
   let goa_icon;
   return {
     c() {
@@ -11228,7 +11212,7 @@ function create_if_block_2$4(ctx) {
 } // (167:4) {#if trailingicon && handlesTrailingIconClick}
 
 
-function create_if_block_1$4(ctx) {
+function create_if_block_1$6(ctx) {
   let goa_icon_button;
   let mounted;
   let dispose;
@@ -11283,7 +11267,7 @@ function create_if_block_1$4(ctx) {
 } // (179:4) {#if suffix}
 
 
-function create_if_block$a(ctx) {
+function create_if_block$c(ctx) {
   let span;
   let t;
   return {
@@ -11315,7 +11299,7 @@ function create_if_block$a(ctx) {
   };
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$m(ctx) {
   let div3;
   let div2;
   let t0;
@@ -11337,23 +11321,23 @@ function create_fragment$k(ctx) {
   let dispose;
   let if_block0 =
   /*prefix*/
-  ctx[14] && create_if_block_4(ctx);
+  ctx[14] && create_if_block_4$2(ctx);
   let if_block1 =
   /*leadingicon*/
-  ctx[5] && create_if_block_3$4(ctx);
+  ctx[5] && create_if_block_3$6(ctx);
   let if_block2 =
   /*trailingicon*/
   ctx[6] && !
   /*handlesTrailingIconClick*/
-  ctx[27] && create_if_block_2$4(ctx);
+  ctx[27] && create_if_block_2$6(ctx);
   let if_block3 =
   /*trailingicon*/
   ctx[6] &&
   /*handlesTrailingIconClick*/
-  ctx[27] && create_if_block_1$4(ctx);
+  ctx[27] && create_if_block_1$6(ctx);
   let if_block4 =
   /*suffix*/
-  ctx[15] && create_if_block$a(ctx);
+  ctx[15] && create_if_block$c(ctx);
   return {
     c() {
       div3 = element("div");
@@ -11515,7 +11499,7 @@ function create_fragment$k(ctx) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_4(ctx);
+          if_block0 = create_if_block_4$2(ctx);
           if_block0.c();
           if_block0.m(div2, t0);
         }
@@ -11530,7 +11514,7 @@ function create_fragment$k(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block_3$4(ctx);
+          if_block1 = create_if_block_3$6(ctx);
           if_block1.c();
           if_block1.m(div2, t2);
         }
@@ -11675,7 +11659,7 @@ function create_fragment$k(ctx) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
-          if_block2 = create_if_block_2$4(ctx);
+          if_block2 = create_if_block_2$6(ctx);
           if_block2.c();
           if_block2.m(div2, t4);
         }
@@ -11692,7 +11676,7 @@ function create_fragment$k(ctx) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
-          if_block3 = create_if_block_1$4(ctx);
+          if_block3 = create_if_block_1$6(ctx);
           if_block3.c();
           if_block3.m(div2, t5);
         }
@@ -11707,7 +11691,7 @@ function create_fragment$k(ctx) {
         if (if_block4) {
           if_block4.p(ctx, dirty);
         } else {
-          if_block4 = create_if_block$a(ctx);
+          if_block4 = create_if_block$c(ctx);
           if_block4.c();
           if_block4.m(div2, t6);
         }
@@ -11796,7 +11780,7 @@ function doClick() {
   }));
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -12040,7 +12024,7 @@ class Input extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$i, create_fragment$k, safe_not_equal, {
+    }, instance$k, create_fragment$m, safe_not_equal, {
       type: 1,
       name: 2,
       value: 0,
@@ -12376,7 +12360,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$3(ctx) {
+function create_if_block_3$5(ctx) {
   let div0;
   let t0;
   let div1;
@@ -12408,7 +12392,7 @@ function create_if_block_3$3(ctx) {
 } // (41:2) {#if ["alpha", "beta"].includes(type)}
 
 
-function create_if_block_1$3(ctx) {
+function create_if_block_1$5(ctx) {
   let div0;
   let t0_value = capitalize(
   /*type*/
@@ -12422,7 +12406,7 @@ function create_if_block_1$3(ctx) {
   let t4;
   let if_block =
   /*feedbackurl*/
-  ctx[2] && create_if_block_2$3(ctx);
+  ctx[2] && create_if_block_2$5(ctx);
   return {
     c() {
       div0 = element("div");
@@ -12475,7 +12459,7 @@ function create_if_block_1$3(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block_2$3(ctx);
+          if_block = create_if_block_2$5(ctx);
           if_block.c();
           if_block.m(div1, null);
         }
@@ -12496,7 +12480,7 @@ function create_if_block_1$3(ctx) {
 } // (50:6) {#if feedbackurl}
 
 
-function create_if_block_2$3(ctx) {
+function create_if_block_2$5(ctx) {
   let span;
   let t0;
   let a;
@@ -12538,7 +12522,7 @@ function create_if_block_2$3(ctx) {
 } // (56:2) {#if version}
 
 
-function create_if_block$9(ctx) {
+function create_if_block$b(ctx) {
   let div;
   let t;
   return {
@@ -12571,7 +12555,7 @@ function create_if_block$9(ctx) {
   };
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$l(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -12582,11 +12566,11 @@ function create_fragment$j(ctx) {
   let t2;
   let if_block0 =
   /*type*/
-  ctx[0] === "live" && create_if_block_3$3();
-  let if_block1 = show_if && create_if_block_1$3(ctx);
+  ctx[0] === "live" && create_if_block_3$5();
+  let if_block1 = show_if && create_if_block_1$5(ctx);
   let if_block2 =
   /*version*/
-  ctx[1] && create_if_block$9(ctx);
+  ctx[1] && create_if_block$b(ctx);
   return {
     c() {
       header = element("header");
@@ -12618,7 +12602,7 @@ function create_fragment$j(ctx) {
       /*type*/
       ctx[0] === "live") {
         if (if_block0) ;else {
-          if_block0 = create_if_block_3$3();
+          if_block0 = create_if_block_3$5();
           if_block0.c();
           if_block0.m(header, t0);
         }
@@ -12637,7 +12621,7 @@ function create_fragment$j(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block_1$3(ctx);
+          if_block1 = create_if_block_1$5(ctx);
           if_block1.c();
           if_block1.m(header, t1);
         }
@@ -12652,7 +12636,7 @@ function create_fragment$j(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(header, null);
         }
@@ -12680,7 +12664,7 @@ function capitalize(val) {
   return val[0].toUpperCase() + val.slice(1);
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
   let {
     type
@@ -12712,7 +12696,7 @@ class MicrositeHeader extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$h, create_fragment$j, safe_not_equal, {
+    }, instance$j, create_fragment$l, safe_not_equal, {
       type: 0,
       version: 1,
       feedbackurl: 2
@@ -12772,7 +12756,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$8(ctx) {
+function create_if_block$a(ctx) {
   let goa_focus_trap;
   let div6;
   let div0;
@@ -12799,20 +12783,20 @@ function create_if_block$8(ctx) {
   let dispose;
   let if_block0 =
   /*calloutvariant*/
-  ctx[3] !== null && create_if_block_3$2(ctx);
+  ctx[3] !== null && create_if_block_3$4(ctx);
 
   function select_block_type(ctx, dirty) {
     if (
     /*heading*/
-    ctx[0]) return create_if_block_2$2;
-    return create_else_block$3;
+    ctx[0]) return create_if_block_2$4;
+    return create_else_block$4;
   }
 
   let current_block_type = select_block_type(ctx);
   let if_block1 = current_block_type(ctx);
   let if_block2 =
   /*_isClosable*/
-  ctx[9] && create_if_block_1$2(ctx);
+  ctx[9] && create_if_block_1$4(ctx);
   return {
     c() {
       goa_focus_trap = element("goa-focus-trap");
@@ -12916,7 +12900,7 @@ function create_if_block$8(ctx) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_3$2(ctx);
+          if_block0 = create_if_block_3$4(ctx);
           if_block0.c();
           if_block0.m(div5, t1);
         }
@@ -12943,7 +12927,7 @@ function create_if_block$8(ctx) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
-          if_block2 = create_if_block_1$2(ctx);
+          if_block2 = create_if_block_1$4(ctx);
           if_block2.c();
           if_block2.m(header, null);
         }
@@ -13053,7 +13037,7 @@ function create_if_block$8(ctx) {
 } // (132:8) {#if calloutvariant !== null}
 
 
-function create_if_block_3$2(ctx) {
+function create_if_block_3$4(ctx) {
   let div;
   let goa_icon;
   let goa_icon_inverted_value;
@@ -13112,7 +13096,7 @@ function create_if_block_3$2(ctx) {
 } // (145:14) {:else}
 
 
-function create_else_block$3(ctx) {
+function create_else_block$4(ctx) {
   let slot;
   return {
     c() {
@@ -13134,7 +13118,7 @@ function create_else_block$3(ctx) {
 } // (143:14) {#if heading}
 
 
-function create_if_block_2$2(ctx) {
+function create_if_block_2$4(ctx) {
   let t;
   return {
     c() {
@@ -13163,7 +13147,7 @@ function create_if_block_2$2(ctx) {
 } // (149:12) {#if _isClosable}
 
 
-function create_if_block_1$2(ctx) {
+function create_if_block_1$4(ctx) {
   let div;
   let goa_icon_button;
   let mounted;
@@ -13201,12 +13185,12 @@ function create_if_block_1$2(ctx) {
   };
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$k(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
   /*_isOpen*/
-  ctx[7] && create_if_block$8(ctx);
+  ctx[7] && create_if_block$a(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -13233,7 +13217,7 @@ function create_fragment$i(ctx) {
             transition_in(if_block, 1);
           }
         } else {
-          if_block = create_if_block$8(ctx);
+          if_block = create_if_block$a(ctx);
           if_block.c();
           transition_in(if_block, 1);
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13266,7 +13250,7 @@ function create_fragment$i(ctx) {
   };
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   let _isClosable;
 
   let _isOpen;
@@ -13466,7 +13450,7 @@ class Modal extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$g, create_fragment$i, safe_not_equal, {
+    }, instance$i, create_fragment$k, safe_not_equal, {
       heading: 0,
       closable: 14,
       open: 1,
@@ -13562,7 +13546,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$7(ctx) {
+function create_if_block$9(ctx) {
   let div3;
   let div0;
   let goa_icon;
@@ -13686,12 +13670,12 @@ function create_if_block$7(ctx) {
   };
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$j(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
   /*show*/
-  ctx[1] && create_if_block$7(ctx);
+  ctx[1] && create_if_block$9(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -13718,7 +13702,7 @@ function create_fragment$h(ctx) {
             transition_in(if_block, 1);
           }
         } else {
-          if_block = create_if_block$7(ctx);
+          if_block = create_if_block$9(ctx);
           if_block.c();
           transition_in(if_block, 1);
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -13751,7 +13735,7 @@ function create_fragment$h(ctx) {
   };
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let iconType;
   const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
   let {
@@ -13793,7 +13777,7 @@ class Notification extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$f, create_fragment$h, safe_not_equal, {
+    }, instance$h, create_fragment$j, safe_not_equal, {
       type: 0
     }, null);
 
@@ -13835,7 +13819,7 @@ function isValidDimension(value) {
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
 
 
-function create_fragment$g(ctx) {
+function create_fragment$i(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -13875,7 +13859,7 @@ function create_fragment$g(ctx) {
   };
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -13916,7 +13900,7 @@ class PageBlock extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$e, create_fragment$g, safe_not_equal, {
+    }, instance$g, create_fragment$i, safe_not_equal, {
       width: 1,
       _width: 0
     }, null);
@@ -13964,7 +13948,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 get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[18] = list[i];
   child_ctx[20] = i;
@@ -13972,7 +13956,7 @@ function get_each_context$2(ctx, list, i) {
 } // (66:4) {#if variant === "all"}
 
 
-function create_if_block$6(ctx) {
+function create_if_block$8(ctx) {
   let goa_block;
   let span0;
   let t1;
@@ -13991,7 +13975,7 @@ function create_if_block$6(ctx) {
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+    each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
   }
 
   return {
@@ -14060,12 +14044,12 @@ function create_if_block$6(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context$2(ctx, each_value, i);
+          const child_ctx = get_each_context$3(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block$2(child_ctx);
+            each_blocks[i] = create_each_block$3(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(goa_dropdown, null);
           }
@@ -14108,7 +14092,7 @@ function create_if_block$6(ctx) {
 } // (71:10) {#each {length: _pageCount} as _, i}
 
 
-function create_each_block$2(ctx) {
+function create_each_block$3(ctx) {
   let goa_dropdown_item;
   return {
     c() {
@@ -14134,7 +14118,7 @@ function create_each_block$2(ctx) {
   };
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$h(ctx) {
   let goa_block1;
   let div;
   let t0;
@@ -14150,7 +14134,7 @@ function create_fragment$f(ctx) {
   let dispose;
   let if_block =
   /*variant*/
-  ctx[1] === "all" && create_if_block$6(ctx);
+  ctx[1] === "all" && create_if_block$8(ctx);
   return {
     c() {
       goa_block1 = element("goa-block");
@@ -14224,7 +14208,7 @@ function create_fragment$f(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$6(ctx);
+          if_block = create_if_block$8(ctx);
           if_block.c();
           if_block.m(div, t0);
         }
@@ -14297,7 +14281,7 @@ function create_fragment$f(ctx) {
   };
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let _pageCount;
 
   const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
@@ -14416,7 +14400,7 @@ class Pagination extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$d, create_fragment$f, safe_not_equal, {
+    }, instance$f, create_fragment$h, safe_not_equal, {
       pagenumber: 0,
       itemcount: 10,
       perpagecount: 11,
@@ -14536,7 +14520,7 @@ class Pagination extends SvelteElement {
 customElements.define("goa-pagination", Pagination);
 /* libs/web-components/src/components/popover/Popover.svelte generated by Svelte v3.51.0 */
 
-function create_if_block$5(ctx) {
+function create_if_block$7(ctx) {
   let goa_focus_trap;
   let div0;
   let t;
@@ -14620,7 +14604,7 @@ function create_if_block$5(ctx) {
   };
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$g(ctx) {
   let div1;
   let div0;
   let t;
@@ -14628,7 +14612,7 @@ function create_fragment$e(ctx) {
   let dispose;
   let if_block =
   /*_isContentVisible*/
-  ctx[2] && create_if_block$5(ctx);
+  ctx[2] && create_if_block$7(ctx);
   return {
     c() {
       div1 = element("div");
@@ -14669,7 +14653,7 @@ function create_fragment$e(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$5(ctx);
+          if_block = create_if_block$7(ctx);
           if_block.c();
           if_block.m(div1, null);
         }
@@ -14703,7 +14687,7 @@ function create_fragment$e(ctx) {
   };
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let paddedContent;
   let {
     testid = ""
@@ -14796,7 +14780,7 @@ class Popover extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$c, create_fragment$e, safe_not_equal, {
+    }, instance$e, create_fragment$g, safe_not_equal, {
       testid: 0,
       maxwidth: 1,
       padded: 7
@@ -14856,14 +14840,14 @@ class Popover extends SvelteElement {
 customElements.define("goa-popover", Popover);
 /* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.51.0 */
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[22] = list[i];
   return child_ctx;
 } // (80:2) {#each options as option (option.value)}
 
 
-function create_each_block$1(key_1, ctx) {
+function create_each_block$2(key_1, ctx) {
   let label;
   let input;
   let input_value_value;
@@ -15046,7 +15030,7 @@ function create_each_block$1(key_1, ctx) {
   };
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$f(ctx) {
   let div;
   let slot;
   let t;
@@ -15063,9 +15047,9 @@ function create_fragment$d(ctx) {
   ctx[22].value;
 
   for (let i = 0; i < each_value.length; i += 1) {
-    let child_ctx = get_each_context$1(ctx, each_value, i);
+    let child_ctx = get_each_context$2(ctx, each_value, i);
     let key = get_key(child_ctx);
-    each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
+    each_1_lookup.set(key, each_blocks[i] = create_each_block$2(key, child_ctx));
   }
 
   return {
@@ -15117,7 +15101,7 @@ function create_fragment$d(ctx) {
         each_value =
         /*options*/
         ctx[9];
-        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, destroy_block, create_each_block$1, null, get_each_context$1);
+        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, destroy_block, create_each_block$2, null, get_each_context$2);
       }
 
       if (dirty &
@@ -15169,7 +15153,7 @@ function create_fragment$d(ctx) {
   };
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -15312,7 +15296,7 @@ class RadioGroup extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$b, create_fragment$d, safe_not_equal, {
+    }, instance$d, create_fragment$f, safe_not_equal, {
       name: 1,
       value: 0,
       orientation: 2,
@@ -15468,7 +15452,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$c(ctx) {
+function create_fragment$e(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -15553,7 +15537,7 @@ function create_fragment$c(ctx) {
   };
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -15619,7 +15603,7 @@ class Scrollable extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$a, create_fragment$c, safe_not_equal, {
+    }, instance$c, create_fragment$e, safe_not_equal, {
       direction: 0,
       hpadding: 1,
       vpadding: 2,
@@ -15715,14 +15699,14 @@ class Scrollable extends SvelteElement {
 customElements.define("goa-scrollable", Scrollable);
 /* libs/web-components/src/components/skeleton/Skeleton.svelte generated by Svelte v3.51.0 */
 
-function get_each_context(ctx, list, i) {
+function get_each_context$1(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[13] = list[i];
   return child_ctx;
 } // (81:2) {:else}
 
 
-function create_else_block$2(ctx) {
+function create_else_block$3(ctx) {
   let div;
   let div_class_value;
   return {
@@ -15766,7 +15750,7 @@ function create_else_block$2(ctx) {
 } // (68:31) 
 
 
-function create_if_block_3$1(ctx) {
+function create_if_block_3$3(ctx) {
   let div3;
   let div2;
   let div0;
@@ -15887,7 +15871,7 @@ function create_if_block_3$1(ctx) {
 } // (64:29) 
 
 
-function create_if_block_2$1(ctx) {
+function create_if_block_2$3(ctx) {
   let each_1_anchor;
   let current;
   let each_value = Array(Number.parseInt(
@@ -15896,7 +15880,7 @@ function create_if_block_2$1(ctx) {
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
   }
 
   const out = i => transition_out(each_blocks[i], 1, 1, () => {
@@ -15931,13 +15915,13 @@ function create_if_block_2$1(ctx) {
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context(ctx, each_value, i);
+          const child_ctx = get_each_context$1(ctx, each_value, i);
 
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
             transition_in(each_blocks[i], 1);
           } else {
-            each_blocks[i] = create_each_block(child_ctx);
+            each_blocks[i] = create_each_block$1(child_ctx);
             each_blocks[i].c();
             transition_in(each_blocks[i], 1);
             each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
@@ -15983,7 +15967,7 @@ function create_if_block_2$1(ctx) {
 } // (54:31) 
 
 
-function create_if_block_1$1(ctx) {
+function create_if_block_1$3(ctx) {
   let div2;
   let div0;
   let skeleton0;
@@ -16105,7 +16089,7 @@ function create_if_block_1$1(ctx) {
 } // (43:2) {#if type === "card"}
 
 
-function create_if_block$4(ctx) {
+function create_if_block$6(ctx) {
   let div1;
   let skeleton0;
   let t0;
@@ -16242,7 +16226,7 @@ function create_if_block$4(ctx) {
 } // (65:4) {#each Array(Number.parseInt(linecount+"")) as _item}
 
 
-function create_each_block(ctx) {
+function create_each_block$1(ctx) {
   let skeleton;
   let current;
   skeleton = new Skeleton({
@@ -16299,13 +16283,13 @@ function create_each_block(ctx) {
   };
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$d(ctx) {
   let div;
   let current_block_type_index;
   let if_block;
   let div_style_value;
   let current;
-  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_block_creators = [create_if_block$6, create_if_block_1$3, create_if_block_2$3, create_if_block_3$3, create_else_block$3];
   const if_blocks = [];
 
   function select_block_type(ctx, dirty) {
@@ -16418,7 +16402,7 @@ function create_fragment$b(ctx) {
   };
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$b($$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 {
@@ -16476,7 +16460,7 @@ class Skeleton extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$9, create_fragment$b, safe_not_equal, {
+    }, instance$b, create_fragment$d, safe_not_equal, {
       maxwidth: 0,
       size: 1,
       linecount: 2,
@@ -16608,7 +16592,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$a(ctx) {
+function create_fragment$c(ctx) {
   let div;
   return {
     c() {
@@ -16637,7 +16621,7 @@ function create_fragment$a(ctx) {
   };
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -16675,7 +16659,7 @@ class Spacer extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$8, create_fragment$a, safe_not_equal, {
+    }, instance$a, create_fragment$c, safe_not_equal, {
       hspacing: 1,
       vspacing: 2
     }, null);
@@ -16907,7 +16891,7 @@ function tweened(value, defaults = {}) {
 /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
 
 
-function create_if_block$3(ctx) {
+function create_if_block$5(ctx) {
   let svg;
   let circle;
   let circle_stroke_value;
@@ -17097,11 +17081,11 @@ function create_if_block$3(ctx) {
   };
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$b(ctx) {
   let if_block_anchor;
   let if_block =
   /*ready*/
-  ctx[6] && create_if_block$3(ctx);
+  ctx[6] && create_if_block$5(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -17121,7 +17105,7 @@ function create_fragment$9(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(if_block_anchor.parentNode, if_block_anchor);
         }
@@ -17142,7 +17126,7 @@ function create_fragment$9(ctx) {
   };
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -17273,7 +17257,7 @@ class Spinner extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$7, create_fragment$9, safe_not_equal, {
+    }, instance$9, create_fragment$b, safe_not_equal, {
       size: 10,
       invert: 0,
       progress: 11,
@@ -17345,7 +17329,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$8(ctx) {
+function create_fragment$a(ctx) {
   let table;
   let slot;
   let t0;
@@ -17447,7 +17431,7 @@ function create_fragment$8(ctx) {
   };
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let _stickyHeader;
 
   const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -17561,7 +17545,7 @@ class Table extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$6, create_fragment$8, safe_not_equal, {
+    }, instance$8, create_fragment$a, safe_not_equal, {
       width: 0,
       stickyheader: 8,
       variant: 1,
@@ -17669,7 +17653,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$1(ctx) {
+function create_else_block$2(ctx) {
   let img;
   let img_src_value;
   return {
@@ -17714,7 +17698,7 @@ function create_else_block$1(ctx) {
 } // (55:2) {#if direction === "none"}
 
 
-function create_if_block$2(ctx) {
+function create_if_block$4(ctx) {
   let img;
   let img_src_value;
   return {
@@ -17737,7 +17721,7 @@ function create_if_block$2(ctx) {
   };
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$9(ctx) {
   let button;
   let slot;
   let t;
@@ -17745,8 +17729,8 @@ function create_fragment$7(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*direction*/
-    ctx[0] === "none") return create_if_block$2;
-    return create_else_block$1;
+    ctx[0] === "none") return create_if_block$4;
+    return create_else_block$2;
   }
 
   let current_block_type = select_block_type(ctx);
@@ -17792,7 +17776,7 @@ function create_fragment$7(ctx) {
   };
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let {
     direction = "none"
   } = $$props;
@@ -17812,7 +17796,7 @@ class TableSortHeader extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$5, create_fragment$7, safe_not_equal, {
+    }, instance$7, create_fragment$9, safe_not_equal, {
       direction: 0
     }, null);
 
@@ -17848,7 +17832,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$6(ctx) {
+function create_fragment$8(ctx) {
   let div;
   let textarea;
   let textarea_aria_label_value;
@@ -18029,7 +18013,7 @@ function create_fragment$6(ctx) {
   };
 }
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   let isError;
   let isDisabled;
   let isReadonly;
@@ -18146,7 +18130,7 @@ class TextArea extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$4, create_fragment$6, safe_not_equal, {
+    }, instance$6, create_fragment$8, safe_not_equal, {
       name: 0,
       value: 1,
       placeholder: 2,
@@ -18350,7 +18334,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$5(ctx) {
+function create_fragment$7(ctx) {
   let div;
   return {
     c() {
@@ -18394,7 +18378,7 @@ class FullScreenNavbarLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$5, safe_not_equal, {}, null);
+    }, null, create_fragment$7, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -18408,7 +18392,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$4(ctx) {
+function create_fragment$6(ctx) {
   let div;
   return {
     c() {
@@ -18445,7 +18429,7 @@ class OneColumnLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$4, safe_not_equal, {}, null);
+    }, null, create_fragment$6, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -18459,7 +18443,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$3(ctx) {
+function create_fragment$5(ctx) {
   let div;
   let header;
   let t0;
@@ -18529,7 +18513,7 @@ function create_fragment$3(ctx) {
   };
 }
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let {
     navcolumnwidth = ""
   } = $$props;
@@ -18553,7 +18537,7 @@ class TwoColumnLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$3, create_fragment$3, safe_not_equal, {
+    }, instance$5, create_fragment$5, safe_not_equal, {
       navcolumnwidth: 0,
       maxcontentwidth: 1
     }, null);
@@ -18601,7 +18585,7 @@ 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 */
 
-function create_if_block$1(ctx) {
+function create_if_block$3(ctx) {
   let progress0;
   let t;
   let progress1;
@@ -18655,7 +18639,7 @@ function create_if_block$1(ctx) {
   };
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$4(ctx) {
   let section;
   let div1;
   let t;
@@ -18665,7 +18649,7 @@ function create_fragment$2(ctx) {
   /*_steps*/
   ctx[4].length > 0 &&
   /*_showProgressBars*/
-  ctx[10] && create_if_block$1(ctx);
+  ctx[10] && create_if_block$3(ctx);
   return {
     c() {
       section = element("section");
@@ -18726,7 +18710,7 @@ function create_fragment$2(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(div1, t);
         }
@@ -18781,7 +18765,7 @@ function create_fragment$2(ctx) {
   };
 }
 
-function instance$2($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let _progress;
 
   let {
@@ -18961,16 +18945,16 @@ function instance$2($$self, $$props, $$invalidate) {
 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) 
+    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.5rem + (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)
+        calc((var(--height) - var(--step-height)) / 2 - 1.25rem - 1.5rem)
       )}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, {
+    }, instance$4, create_fragment$4, safe_not_equal, {
       step: 12,
       mt: 0,
       mr: 1,
@@ -19054,7 +19038,7 @@ class FormStepper extends SvelteElement {
 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) {
+function create_else_block$1(ctx) {
   let div;
   let t;
   return {
@@ -19088,7 +19072,7 @@ function create_else_block(ctx) {
 } // (152:38) 
 
 
-function create_if_block_3(ctx) {
+function create_if_block_3$2(ctx) {
   let goa_icon;
   return {
     c() {
@@ -19110,7 +19094,7 @@ function create_if_block_3(ctx) {
 } // (150:36) 
 
 
-function create_if_block_2(ctx) {
+function create_if_block_2$2(ctx) {
   let goa_icon;
   return {
     c() {
@@ -19133,7 +19117,7 @@ function create_if_block_2(ctx) {
 } // (148:4) {#if _isCurrent}
 
 
-function create_if_block_1(ctx) {
+function create_if_block_1$2(ctx) {
   let goa_icon;
   return {
     c() {
@@ -19155,7 +19139,7 @@ function create_if_block_1(ctx) {
 } // (160:4) {#if status === "incomplete"}
 
 
-function create_if_block(ctx) {
+function create_if_block$2(ctx) {
   let div;
   return {
     c() {
@@ -19176,7 +19160,7 @@ function create_if_block(ctx) {
   };
 }
 
-function create_fragment$1(ctx) {
+function create_fragment$3(ctx) {
   let label;
   let input;
   let input_disabled_value;
@@ -19194,21 +19178,21 @@ function create_fragment$1(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*_isCurrent*/
-    ctx[7]) return create_if_block_1;
+    ctx[7]) return create_if_block_1$2;
     if (
     /*status*/
-    ctx[3] === "complete") return create_if_block_2;
+    ctx[3] === "complete") return create_if_block_2$2;
     if (
     /*status*/
-    ctx[3] === "incomplete") return create_if_block_3;
-    return create_else_block;
+    ctx[3] === "incomplete") return create_if_block_3$2;
+    return create_else_block$1;
   }
 
   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();
+  ctx[3] === "incomplete" && create_if_block$2();
   return {
     c() {
       label = element("label");
@@ -19333,7 +19317,7 @@ function create_fragment$1(ctx) {
       /*status*/
       ctx[3] === "incomplete") {
         if (if_block1) ;else {
-          if_block1 = create_if_block();
+          if_block1 = create_if_block$2();
           if_block1.c();
           if_block1.m(div2, null);
         }
@@ -19413,7 +19397,7 @@ function create_fragment$1(ctx) {
   };
 }
 
-function instance$1($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let _isCurrent;
 
   let _isEnabled;
@@ -19504,7 +19488,7 @@ 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,[role="listitem"]:not([aria-disabled="true"]):focus,[role="listitem"]:not([aria-disabled="true"]):active{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] .status{background: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"]
@@ -19513,7 +19497,7 @@ class FormStep extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$1, create_fragment$1, safe_not_equal, {
+    }, instance$3, create_fragment$3, safe_not_equal, {
       text: 0,
       current: 8,
       enabled: 9,
@@ -19609,7 +19593,7 @@ class FormStep extends SvelteElement {
 customElements.define("goa-form-step", FormStep);
 /* libs/web-components/src/components/pages/Pages.svelte generated by Svelte v3.51.0 */
 
-function create_fragment(ctx) {
+function create_fragment$2(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -19667,7 +19651,7 @@ function create_fragment(ctx) {
   };
 }
 
-function instance($$self, $$props, $$invalidate) {
+function instance$2($$self, $$props, $$invalidate) {
   let {
     current = 1
   } = $$props;
@@ -19745,7 +19729,7 @@ class Pages extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance, create_fragment, safe_not_equal, {
+    }, instance$2, create_fragment$2, safe_not_equal, {
       current: 5,
       mt: 0,
       mr: 1,
@@ -19827,17 +19811,1593 @@ class Pages extends SvelteElement {
 }
 
 customElements.define("goa-pages", Pages);
+/* libs/web-components/src/components/file-upload-input/FileUploadInput.svelte generated by Svelte v3.51.0 */
 
-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);
+function get_each_context(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[21] = list[i];
+  return child_ctx;
+} // (126:0) {#if variant === "dragdrop"}
+
+
+function create_if_block_3$1(ctx) {
+  let div3;
+  let div2;
+  let t6;
+  let t7;
+  let input;
+  let div3_class_value;
+  let mounted;
+  let dispose;
+  let if_block =
+  /*maxfilesize*/
+  ctx[2] && create_if_block_4$1(ctx);
+  return {
+    c() {
+      div3 = element("div");
+      div2 = element("div");
+      div2.innerHTML = `<goa-icon type="cloud-upload" size="large"></goa-icon> 
+      <div>Drag and drop files here</div> 
+      <em>or</em> 
+      <div class="browse-files">Browse files</div>`;
+      t6 = space();
+      if (if_block) if_block.c();
+      t7 = space();
+      input = element("input");
+      attr(div2, "class", "instructions");
+      attr(input, "data-testid", "input");
+      attr(input, "tabindex", "0");
+      attr(input, "type", "file");
+      attr(input, "accept",
+      /*accept*/
+      ctx[1]);
+      input.multiple = true;
+      attr(div3, "data-testid", "dragdrop");
+      attr(div3, "class", div3_class_value = `dragdrop state-${
+      /*_state*/
+      ctx[5]}`);
+    },
+
+    m(target, anchor) {
+      insert(target, div3, anchor);
+      append(div3, div2);
+      append(div3, t6);
+      if (if_block) if_block.m(div3, null);
+      append(div3, t7);
+      append(div3, input);
+      /*input_binding*/
+
+      ctx[13](input);
+      /*div3_binding*/
+
+      ctx[14](div3);
+
+      if (!mounted) {
+        dispose = [listen(div3, "click",
+        /*openFilePicker*/
+        ctx[7]), listen(div3, "drop",
+        /*onDrop*/
+        ctx[8]), listen(div3, "mouseover",
+        /*onMouseOver*/
+        ctx[11]), listen(div3, "mouseout",
+        /*onMouseOut*/
+        ctx[12]), listen(div3, "dragenter",
+        /*onDragEnter*/
+        ctx[9]), listen(div3, "dragleave",
+        /*onDragLeave*/
+        ctx[10]), listen(div3, "dragover", onDrag)];
+        mounted = true;
+      }
+    },
+
+    p(ctx, dirty) {
+      if (
+      /*maxfilesize*/
+      ctx[2]) {
+        if (if_block) {
+          if_block.p(ctx, dirty);
+        } else {
+          if_block = create_if_block_4$1(ctx);
+          if_block.c();
+          if_block.m(div3, t7);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+
+      if (dirty &
+      /*accept*/
+      2) {
+        attr(input, "accept",
+        /*accept*/
+        ctx[1]);
+      }
+
+      if (dirty &
+      /*_state*/
+      32 && div3_class_value !== (div3_class_value = `dragdrop state-${
+      /*_state*/
+      ctx[5]}`)) {
+        attr(div3, "class", div3_class_value);
+      }
+    },
+
+    d(detaching) {
+      if (detaching) detach(div3);
+      if (if_block) if_block.d();
+      /*input_binding*/
+
+      ctx[13](null);
+      /*div3_binding*/
+
+      ctx[14](null);
+      mounted = false;
+      run_all(dispose);
+    }
+
+  };
+} // (146:4) {#if maxfilesize}
+
+
+function create_if_block_4$1(ctx) {
+  let em;
+  let t0;
+  let t1;
+  let t2;
+  return {
+    c() {
+      em = element("em");
+      t0 = text("Maximum file size is ");
+      t1 = text(
+      /*maxfilesize*/
+      ctx[2]);
+      t2 = text(".");
+      attr(em, "class", "max-file-size");
+      attr(em, "data-testid", "max-file-size");
+    },
+
+    m(target, anchor) {
+      insert(target, em, anchor);
+      append(em, t0);
+      append(em, t1);
+      append(em, t2);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*maxfilesize*/
+      4) set_data(t1,
+      /*maxfilesize*/
+      ctx[2]);
+    },
+
+    d(detaching) {
+      if (detaching) detach(em);
+    }
+
+  };
+} // (154:0) {#if variant === "button"}
+
+
+function create_if_block_1$1(ctx) {
+  let div;
+  let goa_button;
+  let t1;
+  let t2;
+  let input;
+  let mounted;
+  let dispose;
+  let if_block =
+  /*maxfilesize*/
+  ctx[2] && create_if_block_2$1(ctx);
+  return {
+    c() {
+      div = element("div");
+      goa_button = element("goa-button");
+      goa_button.textContent = "Choose file";
+      t1 = space();
+      if (if_block) if_block.c();
+      t2 = space();
+      input = element("input");
+      set_custom_element_data(goa_button, "type", "secondary");
+      attr(div, "class", "button");
+      attr(input, "data-testid", "input");
+      attr(input, "tabindex", "-1");
+      attr(input, "type", "file");
+      attr(input, "accept",
+      /*accept*/
+      ctx[1]);
+      input.multiple = true;
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+      append(div, goa_button);
+      append(div, t1);
+      if (if_block) if_block.m(div, null);
+      /*div_binding*/
+
+      ctx[15](div);
+      insert(target, t2, anchor);
+      insert(target, input, anchor);
+      /*input_binding_1*/
+
+      ctx[16](input);
+
+      if (!mounted) {
+        dispose = listen(goa_button, "click",
+        /*openFilePicker*/
+        ctx[7]);
+        mounted = true;
+      }
+    },
+
+    p(ctx, dirty) {
+      if (
+      /*maxfilesize*/
+      ctx[2]) {
+        if (if_block) {
+          if_block.p(ctx, dirty);
+        } else {
+          if_block = create_if_block_2$1(ctx);
+          if_block.c();
+          if_block.m(div, null);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+
+      if (dirty &
+      /*accept*/
+      2) {
+        attr(input, "accept",
+        /*accept*/
+        ctx[1]);
+      }
+    },
+
+    d(detaching) {
+      if (detaching) detach(div);
+      if (if_block) if_block.d();
+      /*div_binding*/
+
+      ctx[15](null);
+      if (detaching) detach(t2);
+      if (detaching) detach(input);
+      /*input_binding_1*/
+
+      ctx[16](null);
+      mounted = false;
+      dispose();
+    }
+
+  };
+} // (158:4) {#if maxfilesize}
+
+
+function create_if_block_2$1(ctx) {
+  let em;
+  let t0;
+  let t1;
+  let t2;
+  return {
+    c() {
+      em = element("em");
+      t0 = text("Maximum file size is ");
+      t1 = text(
+      /*maxfilesize*/
+      ctx[2]);
+      t2 = text(".");
+      attr(em, "class", "max-file-size");
+      attr(em, "data-testid", "max-file-size");
+    },
+
+    m(target, anchor) {
+      insert(target, em, anchor);
+      append(em, t0);
+      append(em, t1);
+      append(em, t2);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*maxfilesize*/
+      4) set_data(t1,
+      /*maxfilesize*/
+      ctx[2]);
+    },
+
+    d(detaching) {
+      if (detaching) detach(em);
+    }
+
+  };
+} // (166:0) {#if issues.length}
+
+
+function create_if_block$1(ctx) {
+  let div;
+  let each_value =
+  /*issues*/
+  ctx[6];
+  let each_blocks = [];
+
+  for (let i = 0; i < each_value.length; i += 1) {
+    each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+  }
+
+  return {
+    c() {
+      div = element("div");
+
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].c();
+      }
+
+      attr(div, "class", "issues");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].m(div, null);
+      }
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*issues*/
+      64) {
+        each_value =
+        /*issues*/
+        ctx[6];
+        let i;
+
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context(ctx, each_value, i);
+
+          if (each_blocks[i]) {
+            each_blocks[i].p(child_ctx, dirty);
+          } else {
+            each_blocks[i] = create_each_block(child_ctx);
+            each_blocks[i].c();
+            each_blocks[i].m(div, null);
+          }
+        }
+
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+
+        each_blocks.length = each_value.length;
+      }
+    },
+
+    d(detaching) {
+      if (detaching) detach(div);
+      destroy_each(each_blocks, detaching);
+    }
+
+  };
+} // (168:4) {#each issues as issue}
+
+
+function create_each_block(ctx) {
+  let div1;
+  let t0_value =
+  /*issue*/
+  ctx[21].filename + "";
+  let t0;
+  let t1;
+  let div0;
+  let goa_icon;
+  let t2;
+  let t3_value =
+  /*issue*/
+  ctx[21].error + "";
+  let t3;
+  let t4;
+  return {
+    c() {
+      div1 = element("div");
+      t0 = text(t0_value);
+      t1 = space();
+      div0 = element("div");
+      goa_icon = element("goa-icon");
+      t2 = space();
+      t3 = text(t3_value);
+      t4 = space();
+      set_custom_element_data(goa_icon, "type", "warning");
+      set_custom_element_data(goa_icon, "size", "small");
+      set_custom_element_data(goa_icon, "theme", "filled");
+      attr(div0, "class", "error");
+      attr(div0, "data-testid", "error");
+      attr(div1, "class", "issue");
+    },
+
+    m(target, anchor) {
+      insert(target, div1, anchor);
+      append(div1, t0);
+      append(div1, t1);
+      append(div1, div0);
+      append(div0, goa_icon);
+      append(div0, t2);
+      append(div0, t3);
+      append(div1, t4);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*issues*/
+      64 && t0_value !== (t0_value =
+      /*issue*/
+      ctx[21].filename + "")) set_data(t0, t0_value);
+      if (dirty &
+      /*issues*/
+      64 && t3_value !== (t3_value =
+      /*issue*/
+      ctx[21].error + "")) set_data(t3, t3_value);
+    },
+
+    d(detaching) {
+      if (detaching) detach(div1);
+    }
+
+  };
+}
+
+function create_fragment$1(ctx) {
+  let t0;
+  let t1;
+  let if_block2_anchor;
+  let if_block0 =
+  /*variant*/
+  ctx[0] === "dragdrop" && create_if_block_3$1(ctx);
+  let if_block1 =
+  /*variant*/
+  ctx[0] === "button" && create_if_block_1$1(ctx);
+  let if_block2 =
+  /*issues*/
+  ctx[6].length && create_if_block$1(ctx);
+  return {
+    c() {
+      if (if_block0) if_block0.c();
+      t0 = space();
+      if (if_block1) if_block1.c();
+      t1 = space();
+      if (if_block2) if_block2.c();
+      if_block2_anchor = empty();
+      this.c = noop;
+    },
+
+    m(target, anchor) {
+      if (if_block0) if_block0.m(target, anchor);
+      insert(target, t0, anchor);
+      if (if_block1) if_block1.m(target, anchor);
+      insert(target, t1, anchor);
+      if (if_block2) if_block2.m(target, anchor);
+      insert(target, if_block2_anchor, anchor);
+    },
+
+    p(ctx, [dirty]) {
+      if (
+      /*variant*/
+      ctx[0] === "dragdrop") {
+        if (if_block0) {
+          if_block0.p(ctx, dirty);
+        } else {
+          if_block0 = create_if_block_3$1(ctx);
+          if_block0.c();
+          if_block0.m(t0.parentNode, t0);
+        }
+      } else if (if_block0) {
+        if_block0.d(1);
+        if_block0 = null;
+      }
+
+      if (
+      /*variant*/
+      ctx[0] === "button") {
+        if (if_block1) {
+          if_block1.p(ctx, dirty);
+        } else {
+          if_block1 = create_if_block_1$1(ctx);
+          if_block1.c();
+          if_block1.m(t1.parentNode, t1);
+        }
+      } else if (if_block1) {
+        if_block1.d(1);
+        if_block1 = null;
+      }
+
+      if (
+      /*issues*/
+      ctx[6].length) {
+        if (if_block2) {
+          if_block2.p(ctx, dirty);
+        } else {
+          if_block2 = create_if_block$1(ctx);
+          if_block2.c();
+          if_block2.m(if_block2_anchor.parentNode, if_block2_anchor);
+        }
+      } else if (if_block2) {
+        if_block2.d(1);
+        if_block2 = null;
+      }
+    },
+
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (if_block0) if_block0.d(detaching);
+      if (detaching) detach(t0);
+      if (if_block1) if_block1.d(detaching);
+      if (detaching) detach(t1);
+      if (if_block2) if_block2.d(detaching);
+      if (detaching) detach(if_block2_anchor);
+    }
+
+  };
+}
+
+function onDrag(e) {
+  e.preventDefault();
+  return false;
+}
+
+function instance$1($$self, $$props, $$invalidate) {
+  let {
+    variant = "dragdrop"
+  } = $$props;
+  let {
+    accept = "*"
+  } = $$props;
+  let {
+    maxfilesize = "5MB"
+  } = $$props; // Private
+
+  let _el;
+
+  let _fileInput;
+
+  let _state = "default";
+  let issues = []; // Hooks
+
+  onMount(() => {
+    _fileInput.addEventListener("change", () => {
+      $$invalidate(6, issues = []); // reset on every new batch of files
+
+      [..._fileInput.files].forEach(file => {
+        const error = validate(file);
+
+        if (error) {
+          $$invalidate(6, issues = [{
+            filename: file.name,
+            error
+          }, ...issues]);
+          return;
+        }
+
+        dispatch(file);
+      });
+      $$invalidate(4, _fileInput.value = null, _fileInput);
+    }, true);
+  }); // Functions
+
+  function validate(file) {
+    if (!isValidFileType(file)) {
+      return "Invalid file type";
+    }
+
+    if (!isValidFileSize(file)) {
+      return `The file must be less than ${maxfilesize}`;
+    }
+  }
+
+  function isValidFileType(file) {
+    const typeMatchers = accept.split(",");
+
+    for (const matcher of typeMatchers) {
+      const matches = file.type.match(matcher.replace("*", ".*").replace("/", "\/")) || file.name.endsWith(accept);
+
+      if (matches) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  function isValidFileSize(file) {
+    const [_, size, units] = maxfilesize.match(/(\d*)(\w*$)/);
+    const factor = {
+      "B": 1,
+      "KB": 1024,
+      "MB": Math.pow(1024, 2),
+      "GB": Math.pow(1024, 3)
+    };
+
+    if (file.size / factor[units] > parseInt(size)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  function dispatch(file) {
+    _el.dispatchEvent(new CustomEvent("_selectFile", {
+      composed: true,
+      detail: {
+        file
+      }
+    }));
+  }
+
+  function openFilePicker() {
+    _fileInput.click();
+  }
+
+  function onDrop(e) {
+    e.preventDefault();
+    $$invalidate(6, issues = []); // reset on every new batch of files
+
+    if (e.dataTransfer.items) {
+      [...e.dataTransfer.items].forEach(item => {
+        if (item.kind === 'file') {
+          const file = item.getAsFile();
+          const error = validate(file);
+
+          if (error) {
+            $$invalidate(6, issues = [{
+              filename: file.name,
+              error
+            }, ...issues]);
+            return;
+          }
+
+          dispatch(item.getAsFile());
+        }
+      });
+    } else {
+      [...e.dataTransfer.files].forEach(file => {
+        const error = validate(file);
+
+        if (error) {
+          $$invalidate(6, issues = [{
+            filename: file.name,
+            error
+          }, ...issues]);
+          return;
+        }
+
+        dispatch(file);
+      });
+    }
+
+    $$invalidate(4, _fileInput.value = null, _fileInput);
+  }
+
+  function onDragEnter() {
+    $$invalidate(5, _state = "dragenter");
+  }
+
+  function onDragLeave(e) {
+    // hovering over child components will result in the dragleave event to be fired,
+    // so we must validate to whether the mouse pointer is within the bounds of the
+    // dropable area
+    const rect = _el.getBoundingClientRect();
+
+    const withinBounds = e.clientX > rect.x && e.clientX <= rect.x + rect.width && e.clientY > rect.y && e.clientY <= rect.y + rect.height;
+
+    if (!withinBounds) {
+      $$invalidate(5, _state = "default");
+    }
+  }
+
+  function onMouseOver() {
+    $$invalidate(5, _state = "hover");
+  }
+
+  function onMouseOut() {
+    $$invalidate(5, _state = "default");
+  }
+
+  function input_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _fileInput = $$value;
+      $$invalidate(4, _fileInput);
+    });
+  }
+
+  function div3_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _el = $$value;
+      $$invalidate(3, _el);
+    });
+  }
+
+  function div_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _el = $$value;
+      $$invalidate(3, _el);
+    });
+  }
+
+  function input_binding_1($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _fileInput = $$value;
+      $$invalidate(4, _fileInput);
+    });
+  }
+
+  $$self.$$set = $$props => {
+    if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
+    if ('accept' in $$props) $$invalidate(1, accept = $$props.accept);
+    if ('maxfilesize' in $$props) $$invalidate(2, maxfilesize = $$props.maxfilesize);
+  };
+
+  return [variant, accept, maxfilesize, _el, _fileInput, _state, issues, openFilePicker, onDrop, onDragEnter, onDragLeave, onMouseOver, onMouseOut, input_binding, div3_binding, div_binding, input_binding_1];
+}
+
+class FileUploadInput extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>.dragdrop{border-radius:var(--goa-border-radius-m);border:var(--goa-border-width-m) dashed var(--goa-color-interactive-default);display:flex;font:var(--goa-typography-body-m);flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;padding:3rem;color:var(--goa-color-interactive-default);text-align:center;cursor:pointer}.dragdrop:active,.dragdrop:focus-within{border-style:solid;outline:none}.dragdrop:hover div{color:var(--goa-color-interactive-hover)}.state-default{background:var(--goa-color-info-background)}.state-hover{background:var(--goa-color-greyscale-100);border-style:solid}.state-dragenter{background:var(--goa-color-info-background);border-style:solid}.instructions{display:flex;align-items:center;gap:0.5rem}@media(max-width: 640px){.instructions{flex-direction:column}}goa-icon{margin-top:4px}.browse-files{text-decoration:underline}em{font-style:normal;font:var(--goa-typography-body-s);color:var(--goa-color-greyscale-700)}.max-file-size{display:block;margin-top:0.5rem}input[type="file"]{position:absolute;left:-9999px}.issues{border-bottom:1px solid var(--goa-color-greyscale-200);margin:1rem 0}.issue{margin-bottom:1rem}.error{color:var(--goa-color-interactive-error);font-size:0.9em;display:flex;align-items:center;gap:0.5rem}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$1, create_fragment$1, safe_not_equal, {
+      variant: 0,
+      accept: 1,
+      maxfilesize: 2
+    }, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["variant", "accept", "maxfilesize"];
+  }
+
+  get variant() {
+    return this.$$.ctx[0];
+  }
+
+  set variant(variant) {
+    this.$$set({
+      variant
+    });
+    flush();
+  }
+
+  get accept() {
+    return this.$$.ctx[1];
+  }
+
+  set accept(accept) {
+    this.$$set({
+      accept
+    });
+    flush();
+  }
+
+  get maxfilesize() {
+    return this.$$.ctx[2];
+  }
+
+  set maxfilesize(maxfilesize) {
+    this.$$set({
+      maxfilesize
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-file-upload-input", FileUploadInput);
+/* libs/web-components/src/components/file-upload-card/FileUploadCard.svelte generated by Svelte v3.51.0 */
+
+function create_else_block(ctx) {
+  let goa_icon;
+  return {
+    c() {
+      goa_icon = element("goa-icon");
+      set_custom_element_data(goa_icon, "class", "fileicon");
+      set_custom_element_data(goa_icon, "data-testid", "icon");
+      set_custom_element_data(goa_icon, "type", "goa-file");
+      set_custom_element_data(goa_icon, "fillcolor", "#dcdcdc");
+      set_custom_element_data(goa_icon, "size", "xlarge");
+    },
+
+    m(target, anchor) {
+      insert(target, goa_icon, anchor);
+    },
+
+    p: noop,
+
+    d(detaching) {
+      if (detaching) detach(goa_icon);
+    }
+
+  };
+} // (71:4) {#if _status === "uploaded"}
+
+
+function create_if_block_7(ctx) {
+  let goa_icon;
+  return {
+    c() {
+      goa_icon = element("goa-icon");
+      set_custom_element_data(goa_icon, "class", "fileicon");
+      set_custom_element_data(goa_icon, "data-testid", "icon");
+      set_custom_element_data(goa_icon, "type",
+      /*_fileIcon*/
+      ctx[6]);
+      set_custom_element_data(goa_icon, "fillcolor", "#0070c4");
+      set_custom_element_data(goa_icon, "size", "xlarge");
+    },
+
+    m(target, anchor) {
+      insert(target, goa_icon, anchor);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*_fileIcon*/
+      64) {
+        set_custom_element_data(goa_icon, "type",
+        /*_fileIcon*/
+        ctx[6]);
+      }
+    },
+
+    d(detaching) {
+      if (detaching) detach(goa_icon);
+    }
+
+  };
+} // (78:6) {#if _status !== "error"}
+
+
+function create_if_block_6(ctx) {
+  let div;
+  let t_value = formatFileSize(
+  /*size*/
+  ctx[1]) + "";
+  let t;
+  return {
+    c() {
+      div = element("div");
+      t = text(t_value);
+      attr(div, "class", "filesize");
+      attr(div, "data-testid", "filesize");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+      append(div, t);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*size*/
+      2 && t_value !== (t_value = formatFileSize(
+      /*size*/
+      ctx[1]) + "")) set_data(t, t_value);
+    },
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+} // (89:36) 
+
+
+function create_if_block_5(ctx) {
+  let div;
+  let goa_icon;
+  let t0;
+  let t1;
+  return {
+    c() {
+      div = element("div");
+      goa_icon = element("goa-icon");
+      t0 = space();
+      t1 = text(
+      /*error*/
+      ctx[3]);
+      set_custom_element_data(goa_icon, "type", "warning");
+      set_custom_element_data(goa_icon, "size", "small");
+      set_custom_element_data(goa_icon, "theme", "filled");
+      attr(div, "class", "error-msg");
+      attr(div, "data-testid", "error");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+      append(div, goa_icon);
+      append(div, t0);
+      append(div, t1);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*error*/
+      8) set_data(t1,
+      /*error*/
+      ctx[3]);
+    },
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+} // (85:39) 
+
+
+function create_if_block_4(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      div.textContent = `Uploaded on ${getTimestamp()}`;
+      attr(div, "class", "timestamp");
+      attr(div, "data-testid", "timestamp");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+    },
+
+    p: noop,
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+} // (81:6) {#if _status === "uploading"}
+
+
+function create_if_block_3(ctx) {
+  let div;
+  let progress_1;
+  let t0;
+  let t1_value = Math.ceil(
+  /*progress*/
+  ctx[2]) + "";
+  let t1;
+  let t2;
+  return {
+    c() {
+      div = element("div");
+      progress_1 = element("progress");
+      t0 = space();
+      t1 = text(t1_value);
+      t2 = text("%");
+      progress_1.value =
+      /*progress*/
+      ctx[2];
+      attr(progress_1, "max", "100");
+      attr(div, "class", "progress");
+      attr(div, "data-testid", "progress");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+      append(div, progress_1);
+      append(div, t0);
+      append(div, t1);
+      append(div, t2);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*progress*/
+      4) {
+        progress_1.value =
+        /*progress*/
+        ctx[2];
+      }
+
+      if (dirty &
+      /*progress*/
+      4 && t1_value !== (t1_value = Math.ceil(
+      /*progress*/
+      ctx[2]) + "")) set_data(t1, t1_value);
+    },
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+} // (102:36) 
+
+
+function create_if_block_2(ctx) {
+  let goa_button;
+  let mounted;
+  let dispose;
+  return {
+    c() {
+      goa_button = element("goa-button");
+      goa_button.textContent = "Cancel";
+      set_custom_element_data(goa_button, "type", "tertiary");
+      set_custom_element_data(goa_button, "size", "compact");
+      set_custom_element_data(goa_button, "variant", "destructive");
+    },
+
+    m(target, anchor) {
+      insert(target, goa_button, anchor);
+
+      if (!mounted) {
+        dispose = listen(goa_button, "click",
+        /*click_handler_2*/
+        ctx[11]);
+        mounted = true;
+      }
+    },
+
+    p: noop,
+
+    d(detaching) {
+      if (detaching) detach(goa_button);
+      mounted = false;
+      dispose();
+    }
+
+  };
+} // (100:39) 
+
+
+function create_if_block_1(ctx) {
+  let goa_button;
+  let mounted;
+  let dispose;
+  return {
+    c() {
+      goa_button = element("goa-button");
+      goa_button.textContent = "Remove";
+      set_custom_element_data(goa_button, "type", "tertiary");
+      set_custom_element_data(goa_button, "size", "compact");
+      set_custom_element_data(goa_button, "leadingicon", "trash");
+    },
+
+    m(target, anchor) {
+      insert(target, goa_button, anchor);
+
+      if (!mounted) {
+        dispose = listen(goa_button, "click",
+        /*click_handler_1*/
+        ctx[10]);
+        mounted = true;
+      }
+    },
+
+    p: noop,
+
+    d(detaching) {
+      if (detaching) detach(goa_button);
+      mounted = false;
+      dispose();
+    }
+
+  };
+} // (98:6) {#if _status === "uploading"}
+
+
+function create_if_block(ctx) {
+  let goa_button;
+  let mounted;
+  let dispose;
+  return {
+    c() {
+      goa_button = element("goa-button");
+      goa_button.textContent = "Cancel";
+      set_custom_element_data(goa_button, "type", "tertiary");
+      set_custom_element_data(goa_button, "size", "compact");
+    },
+
+    m(target, anchor) {
+      insert(target, goa_button, anchor);
+
+      if (!mounted) {
+        dispose = listen(goa_button, "click",
+        /*click_handler*/
+        ctx[9]);
+        mounted = true;
+      }
+    },
+
+    p: noop,
+
+    d(detaching) {
+      if (detaching) detach(goa_button);
+      mounted = false;
+      dispose();
+    }
+
+  };
+}
+
+function create_fragment(ctx) {
+  let div3;
+  let t0;
+  let div1;
+  let div0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let div2;
+  let div3_class_value;
+
+  function select_block_type(ctx, dirty) {
+    if (
+    /*_status*/
+    ctx[4] === "uploaded") return create_if_block_7;
+    return create_else_block;
+  }
+
+  let current_block_type = select_block_type(ctx);
+  let if_block0 = current_block_type(ctx);
+  let if_block1 =
+  /*_status*/
+  ctx[4] !== "error" && create_if_block_6(ctx);
+
+  function select_block_type_1(ctx, dirty) {
+    if (
+    /*_status*/
+    ctx[4] === "uploading") return create_if_block_3;
+    if (
+    /*_status*/
+    ctx[4] === "uploaded") return create_if_block_4;
+    if (
+    /*_status*/
+    ctx[4] === "error") return create_if_block_5;
+  }
+
+  let current_block_type_1 = select_block_type_1(ctx);
+  let if_block2 = current_block_type_1 && current_block_type_1(ctx);
+
+  function select_block_type_2(ctx, dirty) {
+    if (
+    /*_status*/
+    ctx[4] === "uploading") return create_if_block;
+    if (
+    /*_status*/
+    ctx[4] === "uploaded") return create_if_block_1;
+    if (
+    /*_status*/
+    ctx[4] === "error") return create_if_block_2;
+  }
+
+  let current_block_type_2 = select_block_type_2(ctx);
+  let if_block3 = current_block_type_2 && current_block_type_2(ctx);
+  return {
+    c() {
+      div3 = element("div");
+      if_block0.c();
+      t0 = space();
+      div1 = element("div");
+      div0 = element("div");
+      t1 = text(
+      /*filename*/
+      ctx[0]);
+      t2 = space();
+      if (if_block1) if_block1.c();
+      t3 = space();
+      if (if_block2) if_block2.c();
+      t4 = space();
+      div2 = element("div");
+      if (if_block3) if_block3.c();
+      this.c = noop;
+      attr(div0, "class", "filename");
+      attr(div0, "data-testid", "filename");
+      attr(div1, "class", "details");
+      attr(div2, "class", "actions");
+      attr(div2, "data-testid", "actions");
+      attr(div3, "data-testid", "root");
+      attr(div3, "class", div3_class_value = `root ${
+      /*_status*/
+      ctx[4]}`);
+      toggle_class(div3, "error",
+      /*error*/
+      ctx[3]);
+    },
+
+    m(target, anchor) {
+      insert(target, div3, anchor);
+      if_block0.m(div3, null);
+      append(div3, t0);
+      append(div3, div1);
+      append(div1, div0);
+      append(div0, t1);
+      append(div1, t2);
+      if (if_block1) if_block1.m(div1, null);
+      append(div1, t3);
+      if (if_block2) if_block2.m(div1, null);
+      append(div3, t4);
+      append(div3, div2);
+      if (if_block3) if_block3.m(div2, null);
+      /*div3_binding*/
+
+      ctx[12](div3);
+    },
+
+    p(ctx, [dirty]) {
+      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(div3, t0);
+        }
+      }
+
+      if (dirty &
+      /*filename*/
+      1) set_data(t1,
+      /*filename*/
+      ctx[0]);
+
+      if (
+      /*_status*/
+      ctx[4] !== "error") {
+        if (if_block1) {
+          if_block1.p(ctx, dirty);
+        } else {
+          if_block1 = create_if_block_6(ctx);
+          if_block1.c();
+          if_block1.m(div1, t3);
+        }
+      } else if (if_block1) {
+        if_block1.d(1);
+        if_block1 = null;
+      }
+
+      if (current_block_type_1 === (current_block_type_1 = select_block_type_1(ctx)) && if_block2) {
+        if_block2.p(ctx, dirty);
+      } else {
+        if (if_block2) if_block2.d(1);
+        if_block2 = current_block_type_1 && current_block_type_1(ctx);
+
+        if (if_block2) {
+          if_block2.c();
+          if_block2.m(div1, null);
+        }
+      }
+
+      if (current_block_type_2 === (current_block_type_2 = select_block_type_2(ctx)) && if_block3) {
+        if_block3.p(ctx, dirty);
+      } else {
+        if (if_block3) if_block3.d(1);
+        if_block3 = current_block_type_2 && current_block_type_2(ctx);
+
+        if (if_block3) {
+          if_block3.c();
+          if_block3.m(div2, null);
+        }
+      }
+
+      if (dirty &
+      /*_status*/
+      16 && div3_class_value !== (div3_class_value = `root ${
+      /*_status*/
+      ctx[4]}`)) {
+        attr(div3, "class", div3_class_value);
+      }
+
+      if (dirty &
+      /*_status, error*/
+      24) {
+        toggle_class(div3, "error",
+        /*error*/
+        ctx[3]);
+      }
+    },
+
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(div3);
+      if_block0.d();
+      if (if_block1) if_block1.d();
+
+      if (if_block2) {
+        if_block2.d();
+      }
+
+      if (if_block3) {
+        if_block3.d();
+      }
+      /*div3_binding*/
+
+
+      ctx[12](null);
+    }
+
+  };
+}
+
+function getFiletypeIcon(filename, type) {
+  // file extensions 
+  const parts = filename.split(".");
+  const ext = parts[parts.length - 1];
+  const extTypeIcon = ext === "xlxs" && "goa-xls" || ext === "xls" && "goa-xls" || ext === "zip" && "goa-zip" || ext === "docx" && "goa-doc" || ext === "doc" && "goa-doc" || ext === "pptx" && "goa-ppt" || ext === "ppt" && "goa-ppt" || ext === "pdf" && "goa-pdf" || ext === "html" && "goa-html";
+  if (extTypeIcon) return extTypeIcon; // mimetype
+
+  const mimeTypeIcon = type === "application/vnd.ms-powerpoint" && "goa-ppt" || type.includes("presentationml") && "goa-ppt" || type.includes("wordprocessingml") && "goa-doc" || type.includes("spreadsheet") && "goa-xls" || type.startsWith("video") && "goa-video" || type.startsWith("audio") && "goa-audio" || type.startsWith("image") && "goa-image" || type === "application/msword" && "goa-doc" || "goa-file";
+  return mimeTypeIcon;
+}
+
+function formatFileSize(bytes) {
+  switch (true) {
+    case bytes < 1024:
+      return bytes + "B";
+
+    case bytes < 1024 * 1024:
+      return Math.round(bytes / 1024) + "KB";
+
+    case bytes < Math.pow(1024, 3):
+      return Math.round(bytes / Math.pow(1024, 2)) + "MB";
+  }
+}
+
+function instance($$self, $$props, $$invalidate) {
+  let {
+    filename
+  } = $$props;
+  let {
+    size
+  } = $$props;
+  let {
+    type = ""
+  } = $$props;
+  let {
+    progress = -1
+  } = $$props;
+  let {
+    error = ""
+  } = $$props; // Private
+
+  let _status = "uploading";
+
+  let _rootEl;
+
+  let _fileIcon = "goa-file";
+
+  function dispatch(action) {
+    _rootEl.dispatchEvent(new CustomEvent(action, {
+      composed: true
+    }));
+  }
+
+  const click_handler = () => dispatch("_cancel");
+
+  const click_handler_1 = () => dispatch("_delete");
+
+  const click_handler_2 = () => dispatch("_delete");
+
+  function div3_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _rootEl = $$value;
+      $$invalidate(5, _rootEl);
+    });
+  }
+
+  $$self.$$set = $$props => {
+    if ('filename' in $$props) $$invalidate(0, filename = $$props.filename);
+    if ('size' in $$props) $$invalidate(1, size = $$props.size);
+    if ('type' in $$props) $$invalidate(8, type = $$props.type);
+    if ('progress' in $$props) $$invalidate(2, progress = $$props.progress);
+    if ('error' in $$props) $$invalidate(3, error = $$props.error);
+  };
+
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*error, progress*/
+    12) {
+      // Reactive
+      $$invalidate(4, _status = error && "error" || progress >= 0 && progress < 100 && "uploading" || "uploaded");
+    }
+
+    if ($$self.$$.dirty &
+    /*filename, type*/
+    257) {
+      $$invalidate(6, _fileIcon = filename && type && getFiletypeIcon(filename, type));
+    }
+  };
+
+  return [filename, size, progress, error, _status, _rootEl, _fileIcon, dispatch, type, click_handler, click_handler_1, click_handler_2, div3_binding];
+}
+
+class FileUploadCard extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>.root{padding:var(--goa-space-l);border:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-radius:var(--goa-border-radius-m);margin:0.5rem 0;display:grid;grid-template-columns:38px auto;grid-template-rows:repeat(2, auto);grid-template-areas:"icon details"
+      "action action";gap:1rem;align-items:center}.root.error{border:var(--goa-border-width-m) solid var(--goa-color-interactive-error)}@media(min-width: 480px){.root{grid-template-columns:38px 1fr auto;grid-template-rows:auto;grid-template-areas:"icon details action"}.details{margin-left:0.5rem}}.fileicon{grid-area:icon;align-self:center}.actions{grid-area:action}.details{grid-area:details;display:flex;flex-direction:column;overflow-x:hidden}.filename{grid-area:filename;font-size:var(--goa-font-size-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.error-msg{display:flex;align-items:flex-start;margin-top:0.5rem;gap:var(--goa-space-2xs);color:var(--goa-color-interactive-error);font:var(--goa-typography-body-xs)}.timestamp,.filesize{color:var(--goa-color-greyscale-700);font:var(--goa-typography-body-s)}.progress{display:flex;align-items:center;font:var(--goa-typography-body-xs);gap:0.5rem}progress{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:4px;border:none;border-radius:var(--goa-border-radius-m);background:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-700)}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)}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance, create_fragment, safe_not_equal, {
+      filename: 0,
+      size: 1,
+      type: 8,
+      progress: 2,
+      error: 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 ["filename", "size", "type", "progress", "error"];
+  }
+
+  get filename() {
+    return this.$$.ctx[0];
+  }
+
+  set filename(filename) {
+    this.$$set({
+      filename
+    });
+    flush();
+  }
+
+  get size() {
+    return this.$$.ctx[1];
+  }
+
+  set size(size) {
+    this.$$set({
+      size
+    });
+    flush();
+  }
+
+  get type() {
+    return this.$$.ctx[8];
+  }
+
+  set type(type) {
+    this.$$set({
+      type
+    });
+    flush();
+  }
+
+  get progress() {
+    return this.$$.ctx[2];
+  }
+
+  set progress(progress) {
+    this.$$set({
+      progress
+    });
+    flush();
+  }
+
+  get error() {
+    return this.$$.ctx[3];
+  }
+
+  set error(error) {
+    this.$$set({
+      error
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-file-upload-card", FileUploadCard);
+
+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);
+}
+
+function GoAFileUploadCard({
+  filename,
+  size,
+  type,
+  progress,
+  error,
+  onDelete,
+  onCancel
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+
+    const deleteHandler = () => onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+
+    const cancelHandler = () => onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+
+    current.addEventListener("_delete", deleteHandler);
+    current.addEventListener("_cancel", cancelHandler);
+    return () => {
+      current.removeEventListener("_delete", deleteHandler);
+      current.removeEventListener("_cancel", cancelHandler);
+    };
+  }, [el, onDelete, onCancel]);
+  return jsx("goa-file-upload-card", {
+    ref: el,
+    filename: filename,
+    size: size,
+    type: type,
+    progress: progress,
+    error: error
+  }, void 0);
+}
+
+function GoAFileUploadInput({
+  variant,
+  accept,
+  maxFileSize,
+  onSelectFile
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+
+    const handler = e => {
+      onSelectFile(e.detail.file);
+    };
+
+    current.addEventListener("_selectFile", handler);
+    return () => {
+      current.removeEventListener("_selectFile", handler);
+    };
+  }, [el, onSelectFile]);
+  return jsx("goa-file-upload-input", {
+    ref: el,
+    variant: variant,
+    accept: accept,
+    maxfilesize: maxFileSize
+  }, void 0);
 }
 
 const GoAAccordion = ({
@@ -21319,4 +22879,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, 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, GoAPopover, 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, GoAFileUploadCard, GoAFileUploadInput, 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, GoAPopover, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };