npm - @abgov/react-components - Versions diffs - 4.3.0 → 4.5.0 - Mend

@abgov/react-components 4.3.0 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +3 -4
package/index.d.ts +1 -0
package/lib/input/input.d.ts +2 -0
package/lib/pagination/pagination.d.ts +25 -0
package/lib/table/table.d.ts +4 -1
package/package.json +1 -1
package/react-components.esm.js +1094 -451
package/react-components.umd.js +1119 -476

package/react-components.esm.js CHANGED Viewed

@@ -1026,7 +1026,6 @@ if (typeof HTMLElement === 'function') {
 }
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 function create_else_block$4(ctx) {
   let div;
   let img0;
@@ -1084,7 +1083,7 @@ function create_else_block$4(ctx) {
 } // (19:4) {#if url}
-function create_if_block$h(ctx) {
+function create_if_block$i(ctx) {
   let a;
   let img0;
   let img0_src_value;
@@ -1151,7 +1150,7 @@ function create_if_block$h(ctx) {
   };
 }
-function create_fragment$F(ctx) {
+function create_fragment$G(ctx) {
   let div2;
   let div1;
   let t;
@@ -1161,7 +1160,7 @@ function create_fragment$F(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*url*/
-    ctx[1]) return create_if_block$h;
+    ctx[1]) return create_if_block$i;
     return create_else_block$4;
   }
@@ -1235,7 +1234,7 @@ function create_fragment$F(ctx) {
   };
 }
-function instance$z($$self, $$props, $$invalidate) {
+function instance$A($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -1262,12 +1261,12 @@ function instance$z($$self, $$props, $$invalidate) {
 class AppHeader extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--font-family)}.app-header{margin:0 auto;background-color:var(--color-white);border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.app-header{margin:0 auto;background-color:var(--goa-color-greyscale-white);border-bottom:1px solid var(--goa-color-greyscale-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.content{margin:0 auto;width:min(var(--max-content-width), 100%);display:flex;align-items:center;justify-content:space-between}@media(min-width: 640px){.content{padding:1.5rem 1.125rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 640px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$z, create_fragment$F, safe_not_equal, {
+    }, instance$A, create_fragment$G, safe_not_equal, {
       heading: 0,
       url: 1,
       testid: 2,
@@ -1339,7 +1338,7 @@ class AppHeader extends SvelteElement {
 customElements.define("goa-app-header", AppHeader);
 function calculateMargin(mt, mr, mb, ml) {
-  return [mt && `margin-top:var(--goa-spacing-${mt});`, mr && `margin-right:var(--goa-spacing-${mr});`, mb && `margin-bottom:var(--goa-spacing-${mb});`, ml && `margin-left:var(--goa-spacing-${ml});`].join(" ");
+  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
 }
 function injectCss(el, rootSelector, css, media) {
@@ -1452,7 +1451,7 @@ function create_if_block_1$a(ctx) {
 } // (50:2) {#if content}
-function create_if_block$g(ctx) {
+function create_if_block$h(ctx) {
   let div;
   let t;
   return {
@@ -1484,7 +1483,7 @@ function create_if_block$g(ctx) {
   };
 }
-function create_fragment$E(ctx) {
+function create_fragment$F(ctx) {
   let div;
   let t;
   let div_style_value;
@@ -1501,7 +1500,7 @@ function create_fragment$E(ctx) {
   let if_block0 = current_block_type(ctx);
   let if_block1 =
   /*content*/
-  ctx[2] && create_if_block$g(ctx);
+  ctx[2] && create_if_block$h(ctx);
   return {
     c() {
       div = element("div");
@@ -1558,7 +1557,7 @@ function create_fragment$E(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block$g(ctx);
+          if_block1 = create_if_block$h(ctx);
           if_block1.c();
           if_block1.m(div, null);
         }
@@ -1620,7 +1619,7 @@ function create_fragment$E(ctx) {
   };
 }
-function instance$y($$self, $$props, $$invalidate) {
+function instance$z($$self, $$props, $$invalidate) {
   let showIcon;
   let iconType;
   const [Types, validateType] = typeValidator("Badge type", ["success", "important", "information", "emergency", "dark", "midtone", "light"], true);
@@ -1695,14 +1694,12 @@ function instance$y($$self, $$props, $$invalidate) {
 class Badge extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(
-      --font-valign-fix
-    )}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--goa-font-weight-regular)}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);padding-bottom:var(--font-valign-fix, 0)}.goa-badge.badge-information{background-color:var(--goa-color-greyscale-100);color:var(--goa-color-info-default)}.goa-badge.badge-success{background-color:var(--goa-color-success-default);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.goa-badge.badge-emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--goa-color-greyscale-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--goa-color-greyscale-700);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-default)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$y, create_fragment$E, safe_not_equal, {
+    }, instance$z, create_fragment$F, safe_not_equal, {
       type: 0,
       testid: 1,
       content: 2,
@@ -1822,7 +1819,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$D(ctx) {
+function create_fragment$E(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -1841,8 +1838,8 @@ function create_fragment$D(ctx) {
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
-    --gap: var(--goa-spacing-${
+      ctx[6])};
+    --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
     --alignment: ${
@@ -1871,8 +1868,8 @@ function create_fragment$D(ctx) {
       /*mb*/
       ctx[5],
       /*ml*/
-      ctx[6])}
-    --gap: var(--goa-spacing-${
+      ctx[6])};
+    --gap: var(--goa-space-${
       /*gap*/
       ctx[0]});
     --alignment: ${
@@ -1896,7 +1893,7 @@ function create_fragment$D(ctx) {
   };
 }
-function instance$x($$self, $$props, $$invalidate) {
+function instance$y($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -1940,7 +1937,7 @@ class Block extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$x, create_fragment$D, safe_not_equal, {
+    }, instance$y, create_fragment$E, safe_not_equal, {
       gap: 0,
       direction: 1,
       alignment: 2,
@@ -2050,7 +2047,7 @@ customElements.define("goa-block", Block);
 function create_else_block$2(ctx) {
   let t0;
-  let slot;
+  let span;
   let t1;
   let if_block1_anchor;
   let if_block0 =
@@ -2063,17 +2060,18 @@ function create_else_block$2(ctx) {
     c() {
       if (if_block0) if_block0.c();
       t0 = space();
-      slot = element("slot");
+      span = element("span");
+      span.innerHTML = `<slot></slot>`;
       t1 = space();
       if (if_block1) if_block1.c();
       if_block1_anchor = empty();
-      attr(slot, "class", "text");
+      attr(span, "class", "text");
     },
     m(target, anchor) {
       if (if_block0) if_block0.m(target, anchor);
       insert(target, t0, anchor);
-      insert(target, slot, anchor);
+      insert(target, span, anchor);
       insert(target, t1, anchor);
       if (if_block1) if_block1.m(target, anchor);
       insert(target, if_block1_anchor, anchor);
@@ -2114,33 +2112,34 @@ function create_else_block$2(ctx) {
     d(detaching) {
       if (if_block0) if_block0.d(detaching);
       if (detaching) detach(t0);
-      if (detaching) detach(slot);
+      if (detaching) detach(span);
       if (detaching) detach(t1);
       if (if_block1) if_block1.d(detaching);
       if (detaching) detach(if_block1_anchor);
     }
   };
-} // (45:2) {#if type === "start"}
+} // (46:2) {#if type === "start"}
-function create_if_block$f(ctx) {
-  let slot;
+function create_if_block$g(ctx) {
+  let span;
   let t;
   let goa_icon;
   return {
     c() {
-      slot = element("slot");
+      span = element("span");
+      span.innerHTML = `<slot></slot>`;
       t = space();
       goa_icon = element("goa-icon");
-      attr(slot, "class", "text");
+      attr(span, "class", "text");
       set_custom_element_data(goa_icon, "id", "trailing-icon");
       set_custom_element_data(goa_icon, "type", "arrow-forward");
       set_custom_element_data(goa_icon, "inverted", "true");
     },
     m(target, anchor) {
-      insert(target, slot, anchor);
+      insert(target, span, anchor);
       insert(target, t, anchor);
       insert(target, goa_icon, anchor);
     },
@@ -2148,13 +2147,13 @@ function create_if_block$f(ctx) {
     p: noop,
     d(detaching) {
-      if (detaching) detach(slot);
+      if (detaching) detach(span);
       if (detaching) detach(t);
       if (detaching) detach(goa_icon);
     }
   };
-} // (49:4) {#if leadingicon}
+} // (52:4) {#if leadingicon}
 function create_if_block_2$6(ctx) {
@@ -2168,7 +2167,7 @@ function create_if_block_2$6(ctx) {
       ctx[3]);
       set_custom_element_data(goa_icon, "inverted",
       /*isButtonDark*/
-      ctx[10]);
+      ctx[11]);
     },
     m(target, anchor) {
@@ -2186,10 +2185,10 @@ function create_if_block_2$6(ctx) {
       if (dirty &
       /*isButtonDark*/
-      1024) {
+      2048) {
         set_custom_element_data(goa_icon, "inverted",
         /*isButtonDark*/
-        ctx[10]);
+        ctx[11]);
       }
     },
@@ -2198,7 +2197,7 @@ function create_if_block_2$6(ctx) {
     }
   };
-} // (53:4) {#if trailingicon}
+} // (58:4) {#if trailingicon}
 function create_if_block_1$9(ctx) {
@@ -2212,7 +2211,7 @@ function create_if_block_1$9(ctx) {
       ctx[4]);
       set_custom_element_data(goa_icon, "inverted",
       /*isButtonDark*/
-      ctx[10]);
+      ctx[11]);
     },
     m(target, anchor) {
@@ -2230,10 +2229,10 @@ function create_if_block_1$9(ctx) {
       if (dirty &
       /*isButtonDark*/
-      1024) {
+      2048) {
         set_custom_element_data(goa_icon, "inverted",
         /*isButtonDark*/
-        ctx[10]);
+        ctx[11]);
       }
     },
@@ -2244,7 +2243,7 @@ function create_if_block_1$9(ctx) {
   };
 }
-function create_fragment$C(ctx) {
+function create_fragment$D(ctx) {
   let button;
   let button_class_value;
   let button_style_value;
@@ -2254,7 +2253,7 @@ function create_fragment$C(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*type*/
-    ctx[0] === "start") return create_if_block$f;
+    ctx[0] === "start") return create_if_block$g;
     return create_else_block$2;
   }
@@ -2283,7 +2282,7 @@ function create_fragment$C(ctx) {
       ctx[9]));
       button.disabled =
       /*isDisabled*/
-      ctx[11];
+      ctx[10];
       attr(button, "data-testid",
       /*testid*/
       ctx[5]);
@@ -2302,7 +2301,11 @@ function create_fragment$C(ctx) {
       if_block.m(button, null);
       if (!mounted) {
-        dispose = [listen(button, "click", clickHandler), listen(button, "click", clickHandler)];
+        dispose = [listen(button, "click",
+        /*clickHandler*/
+        ctx[12]), listen(button, "click",
+        /*clickHandler*/
+        ctx[12])];
         mounted = true;
       }
     },
@@ -2348,10 +2351,10 @@ function create_fragment$C(ctx) {
       if (dirty &
       /*isDisabled*/
-      2048) {
+      1024) {
         button.disabled =
         /*isDisabled*/
-        ctx[11];
+        ctx[10];
       }
       if (dirty &
@@ -2394,15 +2397,7 @@ function create_fragment$C(ctx) {
   };
 }
-function clickHandler(e) {
-  this.dispatchEvent(new CustomEvent("_click", {
-    composed: true,
-    bubbles: true
-  }));
-  e.stopPropagation();
-}
-function instance$w($$self, $$props, $$invalidate) {
+function instance$x($$self, $$props, $$invalidate) {
   let isDisabled;
   let isButtonDark;
   const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
@@ -2441,6 +2436,16 @@ function instance$w($$self, $$props, $$invalidate) {
   let {
     ml = null
   } = $$props;
+  function clickHandler(e) {
+    if (!isDisabled) {
+      this.dispatchEvent(new CustomEvent("_click", {
+        composed: true,
+        bubbles: true
+      }));
+    }
+  }
   onMount(() => {
     validateType(type);
     validateSize(size);
@@ -2451,7 +2456,7 @@ function instance$w($$self, $$props, $$invalidate) {
     if ('type' in $$props) $$invalidate(0, type = $$props.type);
     if ('size' in $$props) $$invalidate(1, size = $$props.size);
     if ('variant' in $$props) $$invalidate(2, variant = $$props.variant);
-    if ('disabled' in $$props) $$invalidate(12, disabled = $$props.disabled);
+    if ('disabled' in $$props) $$invalidate(13, disabled = $$props.disabled);
     if ('leadingicon' in $$props) $$invalidate(3, leadingicon = $$props.leadingicon);
     if ('trailingicon' in $$props) $$invalidate(4, trailingicon = $$props.trailingicon);
     if ('testid' in $$props) $$invalidate(5, testid = $$props.testid);
@@ -2464,36 +2469,34 @@ function instance$w($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*disabled*/
-    4096) {
-      $$invalidate(11, isDisabled = toBoolean(disabled));
+    8192) {
+      $$invalidate(10, isDisabled = toBoolean(disabled));
     }
     if ($$self.$$.dirty &
     /*type*/
     1) {
-      $$invalidate(10, isButtonDark = type === "primary" || type === "start");
+      $$invalidate(11, isButtonDark = type === "primary" || type === "start");
     }
   };
-  return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isButtonDark, isDisabled, disabled];
+  return [type, size, variant, leadingicon, trailingicon, testid, mt, mr, mb, ml, isDisabled, isButtonDark, clickHandler, disabled];
 }
 class Button extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@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);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;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
-    )}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background-color:var(--goa-color-interactive);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--active);background-color:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background-color:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background-color:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background-color:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background-color:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background-color:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background-color:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background-color:var(--color-white)}</style>`;
+    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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$w, create_fragment$C, safe_not_equal, {
+    }, instance$x, create_fragment$D, safe_not_equal, {
       type: 0,
       size: 1,
       variant: 2,
-      disabled: 12,
+      disabled: 13,
       leadingicon: 3,
       trailingicon: 4,
       testid: 5,
@@ -2553,7 +2556,7 @@ class Button extends SvelteElement {
   }
   get disabled() {
-    return this.$$.ctx[12];
+    return this.$$.ctx[13];
   }
   set disabled(disabled) {
@@ -2645,7 +2648,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$B(ctx) {
+function create_fragment$C(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -2715,7 +2718,7 @@ function create_fragment$B(ctx) {
   };
 }
-function instance$v($$self, $$props, $$invalidate) {
+function instance$w($$self, $$props, $$invalidate) {
   let _alignment;
   let {
@@ -2774,12 +2777,12 @@ function instance$v($$self, $$props, $$invalidate) {
 class ButtonGroup extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}div{display:flex;flex-direction:row;justify-content:var(--alignment);align-items:center;flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$v, create_fragment$B, safe_not_equal, {
+    }, instance$w, create_fragment$C, safe_not_equal, {
       alignment: 7,
       gap: 0,
       testid: 1,
@@ -2887,7 +2890,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$e(ctx) {
+function create_if_block$f(ctx) {
   let h3;
   let t;
   return {
@@ -2918,7 +2921,7 @@ function create_if_block$e(ctx) {
   };
 }
-function create_fragment$A(ctx) {
+function create_fragment$B(ctx) {
   let div;
   let span0;
   let goa_icon;
@@ -2931,7 +2934,7 @@ function create_fragment$A(ctx) {
   let div_style_value;
   let if_block =
   /*heading*/
-  ctx[5] && create_if_block$e(ctx);
+  ctx[5] && create_if_block$f(ctx);
   return {
     c() {
       div = element("div");
@@ -3010,7 +3013,7 @@ function create_fragment$A(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$e(ctx);
+          if_block = create_if_block$f(ctx);
           if_block.c();
           if_block.m(span1, t1);
         }
@@ -3053,7 +3056,7 @@ function create_fragment$A(ctx) {
   };
 }
-function instance$u($$self, $$props, $$invalidate) {
+function instance$v($$self, $$props, $$invalidate) {
   let iconType;
   const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
   let {
@@ -3105,12 +3108,12 @@ function instance$u($$self, $$props, $$invalidate) {
 class Callout extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--fs-xl);line-height:var(--lh-base);font-weight:var(--fw-regular);margin-top:0}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--color-gray-100);padding:1.75rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:0}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:1.75rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$u, create_fragment$A, safe_not_equal, {
+    }, instance$v, create_fragment$B, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -3218,7 +3221,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$z(ctx) {
+function create_fragment$A(ctx) {
   let goa_card_content;
   return {
     c() {
@@ -3249,7 +3252,7 @@ class CardActions extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$z, safe_not_equal, {}, null);
+    }, null, create_fragment$A, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -3263,7 +3266,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$y(ctx) {
+function create_fragment$z(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -3290,7 +3293,7 @@ function create_fragment$y(ctx) {
       /*ml*/
       ctx[6]) + " " + (
       /*elevation*/
-      ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
+      ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
       /*elevation*/
       ctx[0]});`) + "");
     },
@@ -3325,7 +3328,7 @@ function create_fragment$y(ctx) {
       /*ml*/
       ctx[6]) + " " + (
       /*elevation*/
-      ctx[0] === 0 ? `border: 1px solid var(--color-gray-200);` : `box-shadow: var(--shadow-${
+      ctx[0] === 0 ? `border: 1px solid var(--goa-color-greyscale-200);` : `box-shadow: var(--shadow-${
       /*elevation*/
       ctx[0]});`) + "")) {
         attr(div, "style", div_style_value);
@@ -3342,7 +3345,7 @@ function create_fragment$y(ctx) {
   };
 }
-function instance$t($$self, $$props, $$invalidate) {
+function instance$u($$self, $$props, $$invalidate) {
   let {
     elevation = 0
   } = $$props;
@@ -3385,12 +3388,12 @@ function instance$t($$self, $$props, $$invalidate) {
 class Card extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card{background-color:var(--color-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card{background-color:var(--goa-color-greyscale-white);border-radius:4px;overflow:hidden;height:var(--height)}@media(min-width: 320px){.card{margin:0 auto}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$t, create_fragment$y, safe_not_equal, {
+    }, instance$u, create_fragment$z, safe_not_equal, {
       elevation: 0,
       width: 1,
       height: 2,
@@ -3510,7 +3513,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$x(ctx) {
+function create_fragment$y(ctx) {
   let div;
   return {
     c() {
@@ -3538,12 +3541,12 @@ function create_fragment$x(ctx) {
 class CardContent extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-content{padding:1rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-content{padding:1rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$x, safe_not_equal, {}, null);
+    }, null, create_fragment$y, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -3557,7 +3560,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$w(ctx) {
+function create_fragment$x(ctx) {
   let div;
   return {
     c() {
@@ -3585,12 +3588,12 @@ function create_fragment$w(ctx) {
 class CardGroup extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.card-group{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;width:100%}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$w, safe_not_equal, {}, null);
+    }, null, create_fragment$x, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -3604,7 +3607,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$v(ctx) {
+function create_fragment$w(ctx) {
   let div;
   return {
     c() {
@@ -3652,7 +3655,7 @@ function create_fragment$v(ctx) {
   };
 }
-function instance$s($$self, $$props, $$invalidate) {
+function instance$t($$self, $$props, $$invalidate) {
   let {
     src
   } = $$props;
@@ -3671,12 +3674,12 @@ function instance$s($$self, $$props, $$invalidate) {
 class CardImage extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$s, create_fragment$v, safe_not_equal, {
+    }, instance$t, create_fragment$w, safe_not_equal, {
       src: 0,
       height: 1
     }, null);
@@ -3751,7 +3754,7 @@ function create_if_block_1$8(ctx) {
 } // (68:4) {#if isIndeterminate}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
   let svg;
   let rect;
   return {
@@ -3778,7 +3781,7 @@ function create_if_block$d(ctx) {
   };
 }
-function create_fragment$u(ctx) {
+function create_fragment$v(ctx) {
   let label;
   let div0;
   let input;
@@ -3796,7 +3799,7 @@ function create_fragment$u(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*isIndeterminate*/
-    ctx[10]) return create_if_block$d;
+    ctx[10]) return create_if_block$e;
     if (
     /*isChecked*/
     ctx[9]) return create_if_block_1$8;
@@ -4027,7 +4030,7 @@ function create_fragment$u(ctx) {
   };
 }
-function instance$r($$self, $$props, $$invalidate) {
+function instance$s($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   let isChecked;
@@ -4137,12 +4140,12 @@ function instance$r($$self, $$props, $$invalidate) {
 class Checkbox extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);display:block}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled{opacity:40%}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--color-gray-600);border-radius:2px;background-color:var(--color-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px;flex:0 0 auto}.goa-checkbox-container svg{fill:var(--color-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive--hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive--hover)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--fw-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--color-gray-400)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-status-emergency);box-shadow:inset 0 0 0 1px var(--goa-color-status-emergency);background-color:var(--color-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-status-emergency)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);display:block}.goa-checkbox{display:inline-flex;align-items:center;min-height:calc(3rem - 4px);cursor:pointer}.goa-checkbox input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer}.goa-checkbox--disabled .goa-checkbox-text{opacity:40%}.goa-checkbox--disabled:hover{cursor:default}.goa-checkbox-container{box-sizing:border-box;border:1px solid var(--goa-color-greyscale-700);border-radius:2px;background-color:var(--goa-color-greyscale-white);height:1.5rem;width:1.5rem;display:flex;justify-content:center;padding:3px;flex:0 0 auto}.goa-checkbox-container svg{fill:var(--goa-color-greyscale-white)}.goa-checkbox-container.goa-checkbox--selected{background-color:var(--goa-color-interactive-default)}.goa-checkbox-container.goa-checkbox--selected:hover{background-color:var(--goa-color-interactive-hover)}.goa-checkbox-container:hover{border:1px solid var(--goa-color-interactive-hover)}.goa-checkbox-container:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.goa-checkbox-text{padding-left:0.5rem;user-select:none;font-weight:var(--goa-font-weight-regular)}.goa-checkbox--disabled .goa-checkbox-container,.goa-checkbox--disabled .goa-checkbox-container:hover{border:1px solid var(--goa-color-greyscale-400)}.goa-checkbox--error .goa-checkbox-container,.goa-checkbox--error .goa-checkbox-container:hover{border:1px solid var(--goa-color-emergency-default);box-shadow:inset 0 0 0 1px var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.goa-checkbox--error .goa-checkbox-container svg{fill:var(--goa-color-emergency-default)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$r, create_fragment$u, safe_not_equal, {
+    }, instance$s, create_fragment$v, safe_not_equal, {
       name: 0,
       checked: 14,
       text: 1,
@@ -4344,7 +4347,7 @@ function create_if_block_1$7(ctx) {
 } // (54:2) {#if _deletable}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
   let goa_icon;
   let goa_icon_fillcolor_value;
   let goa_icon_opacity_value;
@@ -4357,9 +4360,9 @@ function create_if_block$c(ctx) {
       set_custom_element_data(goa_icon, "type", "close-circle");
       set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
       /*_error*/
-      ctx[10] ? "var(--goa-color-status-emergency)" :
+      ctx[10] ? "var(--goa-color-emergency-default)" :
       /*_hovering*/
-      ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)");
+      ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)");
       set_custom_element_data(goa_icon, "opacity", goa_icon_opacity_value =
       /*_error*/
       ctx[10] ?
@@ -4376,9 +4379,9 @@ function create_if_block$c(ctx) {
       /*_error, _hovering*/
       1536 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
       /*_error*/
-      ctx[10] ? "var(--goa-color-status-emergency)" :
+      ctx[10] ? "var(--goa-color-emergency-default)" :
       /*_hovering*/
-      ctx[9] ? "var(--goa-color-interactive--hover)" : "var(--color-gray-600)")) {
+      ctx[9] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-greyscale-700)")) {
         set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
       }
@@ -4400,7 +4403,7 @@ function create_if_block$c(ctx) {
   };
 }
-function create_fragment$t(ctx) {
+function create_fragment$u(ctx) {
   let div1;
   let t0;
   let div0;
@@ -4414,7 +4417,7 @@ function create_fragment$t(ctx) {
   ctx[4] && create_if_block_1$7(ctx);
   let if_block1 =
   /*_deletable*/
-  ctx[11] && create_if_block$c(ctx);
+  ctx[11] && create_if_block$d(ctx);
   return {
     c() {
       div1 = element("div");
@@ -4509,7 +4512,7 @@ function create_fragment$t(ctx) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block$c(ctx);
+          if_block1 = create_if_block$d(ctx);
           if_block1.c();
           if_block1.m(div1, null);
         }
@@ -4582,7 +4585,7 @@ function create_fragment$t(ctx) {
   };
 }
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
   let {
     mt = null
   } = $$props;
@@ -4678,12 +4681,12 @@ function instance$q($$self, $$props, $$invalidate) {
 class Chip extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
+    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--goa-color-greyscale-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text-default);display:inline-flex;flex-direction:row;font-size:var(--goa-font-size-3);font-weight:var(--goa-font-weight-regular);gap:0.25rem;height:2rem;justify-content:center;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix, 0)}.chip:focus{outline:2px solid var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-white)}.chip:hover{background-color:var(--goa-color-greyscale-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-emergency-light)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$q, create_fragment$t, safe_not_equal, {
+    }, instance$r, create_fragment$u, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -4940,7 +4943,7 @@ function noscroll(_node, opts) {
 /* libs/web-components/src/components/circular-progress/CircularProgress.svelte generated by Svelte v3.51.0 */
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -5311,12 +5314,12 @@ function create_if_block_2$5(ctx) {
   };
 }
-function create_fragment$s(ctx) {
+function create_fragment$t(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
   /*isVisible*/
-  ctx[5] && create_if_block$b(ctx);
+  ctx[5] && create_if_block$c(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -5343,7 +5346,7 @@ function create_fragment$s(ctx) {
             transition_in(if_block, 1);
           }
         } else {
-          if_block = create_if_block$b(ctx);
+          if_block = create_if_block$c(ctx);
           if_block.c();
           transition_in(if_block, 1);
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -5376,7 +5379,7 @@ function create_fragment$s(ctx) {
   };
 }
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
   let isVisible;
   const [Variants, validateVariant] = typeValidator("Circular progress variant", ["fullscreen", "inline"]);
   const [Sizes, validateSize] = typeValidator("Button size", ["small", "large"]);
@@ -5428,12 +5431,12 @@ function instance$p($$self, $$props, $$invalidate) {
 class CircularProgress extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:rgba(255, 255, 255, 0.9)}.inline{margin:3.5rem;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.spinner-large .message{margin-top:1.5rem;font-size:1.2rem}.spinner-xlarge .message{margin-top:2rem;font-size:1.5rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:rgba(255, 255, 255, 0.9)}.inline{margin:3.5rem;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.spinner-large .message{margin-top:1.5rem;font-size:1.2rem}.spinner-xlarge .message{margin-top:2rem;font-size:1.5rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$p, create_fragment$s, safe_not_equal, {
+    }, instance$q, create_fragment$t, safe_not_equal, {
       variant: 6,
       size: 7,
       message: 0,
@@ -5517,7 +5520,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$r(ctx) {
+function create_fragment$s(ctx) {
   let div3;
   let header;
   let div0;
@@ -5642,7 +5645,7 @@ function create_fragment$r(ctx) {
   };
 }
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$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"]);
@@ -5693,12 +5696,12 @@ function instance$o($$self, $$props, $$invalidate) {
 class Container extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$o, create_fragment$r, safe_not_equal, {
+    }, instance$p, create_fragment$s, safe_not_equal, {
       type: 0,
       accent: 1,
       padding: 2,
@@ -5818,7 +5821,7 @@ class Container extends SvelteElement {
 customElements.define("goa-container", Container);
 /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.51.0 */
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
   let hr;
   let hr_style_value;
   return {
@@ -5877,7 +5880,7 @@ function create_fragment$q(ctx) {
   };
 }
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
@@ -5908,12 +5911,12 @@ function instance$n($$self, $$props, $$invalidate) {
 class Divider extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--color-gray-200);border:none}</style>`;
+    this.shadowRoot.innerHTML = `<style>hr{padding:0;margin:0;height:1px;background-color:var(--goa-color-greyscale-200);border:none}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$n, create_fragment$q, safe_not_equal, {
+    }, instance$o, create_fragment$r, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -5999,25 +6002,25 @@ customElements.define("goa-divider", Divider);
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[48] = list[i];
-  child_ctx[52] = i;
+  child_ctx[49] = list[i];
+  child_ctx[53] = i;
   return child_ctx;
 }
 function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[48] = list[i];
+  child_ctx[49] = list[i];
   return child_ctx;
-} // (244:2) {:else}
+} // (256:2) {:else}
 function create_else_block$1(ctx) {
   let t0;
-  let slot;
-  let t1;
   let goa_input;
-  let goa_input_aria_label_value;
+  let goa_input_arialabel_value;
   let goa_input_data_testid_value;
+  let t1;
+  let slot;
   let t2;
   let ul;
   let each_blocks = [];
@@ -6034,7 +6037,7 @@ function create_else_block$1(ctx) {
   const get_key = ctx =>
   /*index*/
-  ctx[52];
+  ctx[53];
   for (let i = 0; i < each_value_1.length; i += 1) {
     let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6046,9 +6049,9 @@ function create_else_block$1(ctx) {
     c() {
       if (if_block) if_block.c();
       t0 = space();
-      slot = element("slot");
-      t1 = space();
       goa_input = element("goa-input");
+      t1 = space();
+      slot = element("slot");
       t2 = space();
       ul = element("ul");
@@ -6072,7 +6075,7 @@ function create_else_block$1(ctx) {
       set_custom_element_data(goa_input, "aria-expanded",
       /*_isMenuVisible*/
       ctx[15]);
-      set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
+      set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
       /*arialabel*/
       ctx[1] ||
       /*name*/
@@ -6088,6 +6091,9 @@ function create_else_block$1(ctx) {
       /*_selectedLabel*/
       ctx[14]);
       set_custom_element_data(goa_input, "width", "100%");
+      set_custom_element_data(goa_input, "name",
+      /*name*/
+      ctx[0]);
       attr(ul, "id", "menu");
       attr(ul, "role", "listbox");
       attr(ul, "aria-activedescendant",
@@ -6107,9 +6113,9 @@ function create_else_block$1(ctx) {
     m(target, anchor) {
       if (if_block) if_block.m(target, anchor);
       insert(target, t0, anchor);
-      insert(target, slot, anchor);
-      insert(target, t1, anchor);
       insert(target, goa_input, anchor);
+      insert(target, t1, anchor);
+      insert(target, slot, anchor);
       insert(target, t2, anchor);
       insert(target, ul, anchor);
@@ -6187,12 +6193,12 @@ function create_else_block$1(ctx) {
       if (dirty[0] &
       /*arialabel, name*/
-      3 && goa_input_aria_label_value !== (goa_input_aria_label_value =
+      3 && goa_input_arialabel_value !== (goa_input_arialabel_value =
       /*arialabel*/
       ctx[1] ||
       /*name*/
       ctx[0])) {
-        set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
+        set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value);
       }
       if (dirty[0] &
@@ -6211,6 +6217,14 @@ function create_else_block$1(ctx) {
         ctx[14]);
       }
+      if (dirty[0] &
+      /*name*/
+      1) {
+        set_custom_element_data(goa_input, "name",
+        /*name*/
+        ctx[0]);
+      }
       if (dirty[0] &
       /*_options, _values, _highlightedIndex, onSelect*/
       67186688) {
@@ -6248,9 +6262,9 @@ function create_else_block$1(ctx) {
     d(detaching) {
       if (if_block) if_block.d(detaching);
       if (detaching) detach(t0);
-      if (detaching) detach(slot);
-      if (detaching) detach(t1);
       if (detaching) detach(goa_input);
+      if (detaching) detach(t1);
+      if (detaching) detach(slot);
       if (detaching) detach(t2);
       if (detaching) detach(ul);
@@ -6266,10 +6280,10 @@ function create_else_block$1(ctx) {
     }
   };
-} // (225:2) {#if _native}
+} // (237:2) {#if _native}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
   let select;
   let slot;
   let select_aria_label_value;
@@ -6392,7 +6406,7 @@ function create_if_block$a(ctx) {
     }
   };
-} // (245:4) {#if _isMenuVisible}
+} // (257:4) {#if _isMenuVisible}
 function create_if_block_1$5(ctx) {
@@ -6437,16 +6451,16 @@ function create_if_block_1$5(ctx) {
     }
   };
-} // (287:6) {#each _options as option, index (index)}
+} // (300:6) {#each _options as option, index (index)}
 function create_each_block_1(key_1, ctx) {
   let li;
   let t0_value = (
   /*option*/
-  ctx[48].label ||
+  ctx[49].label ||
   /*option*/
-  ctx[48].value) + "";
+  ctx[49].value) + "";
   let t0;
   let t1;
   let li_id_value;
@@ -6464,7 +6478,7 @@ function create_each_block_1(key_1, ctx) {
       /*click_handler*/
       ctx[32](
       /*option*/
-      ctx[48])
+      ctx[49])
     );
   }
@@ -6478,40 +6492,40 @@ function create_each_block_1(key_1, ctx) {
       t1 = space();
       attr(li, "id", li_id_value =
       /*option*/
-      ctx[48].label);
+      ctx[49].label);
       attr(li, "role", "option");
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
-      ctx[48].label ||
+      ctx[49].label ||
       /*option*/
-      ctx[48].value);
+      ctx[49].value);
       attr(li, "aria-selected", li_aria_selected_value =
       /*_values*/
       ctx[12].includes(
       /*option*/
-      ctx[48].value) ? "true" : "false");
+      ctx[49].value) ? "true" : "false");
       attr(li, "class", "dropdown-item");
       attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`);
+      ctx[49].value}`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
-      ctx[52]);
+      ctx[53]);
       attr(li, "data-value", li_data_value_value =
       /*option*/
-      ctx[48].value);
+      ctx[49].value);
       attr(li, "style", li_style_value = `display: ${"block"}`);
       toggle_class(li, "dropdown-item--disabled", false);
       toggle_class(li, "dropdown-item--tabbed",
       /*index*/
-      ctx[52] ===
+      ctx[53] ===
       /*_highlightedIndex*/
       ctx[16]);
       toggle_class(li, "dropdown-item--selected",
       /*_values*/
       ctx[12].includes(
       /*option*/
-      ctx[48].value));
+      ctx[49].value));
       this.first = li;
     },
@@ -6532,15 +6546,15 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       8192 && t0_value !== (t0_value = (
       /*option*/
-      ctx[48].label ||
+      ctx[49].label ||
       /*option*/
-      ctx[48].value) + "")) set_data(t0, t0_value);
+      ctx[49].value) + "")) set_data(t0, t0_value);
       if (dirty[0] &
       /*_options*/
       8192 && li_id_value !== (li_id_value =
       /*option*/
-      ctx[48].label)) {
+      ctx[49].label)) {
         attr(li, "id", li_id_value);
       }
@@ -6548,9 +6562,9 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       8192 && li_aria_label_value !== (li_aria_label_value =
       /*option*/
-      ctx[48].label ||
+      ctx[49].label ||
       /*option*/
-      ctx[48].value)) {
+      ctx[49].value)) {
         attr(li, "aria-label", li_aria_label_value);
       }
@@ -6560,7 +6574,7 @@ function create_each_block_1(key_1, ctx) {
       /*_values*/
       ctx[12].includes(
       /*option*/
-      ctx[48].value) ? "true" : "false")) {
+      ctx[49].value) ? "true" : "false")) {
         attr(li, "aria-selected", li_aria_selected_value);
       }
@@ -6568,7 +6582,7 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[48].value}`)) {
+      ctx[49].value}`)) {
         attr(li, "data-testid", li_data_testid_value);
       }
@@ -6576,7 +6590,7 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       8192 && li_data_index_value !== (li_data_index_value =
       /*index*/
-      ctx[52])) {
+      ctx[53])) {
         attr(li, "data-index", li_data_index_value);
       }
@@ -6584,7 +6598,7 @@ function create_each_block_1(key_1, ctx) {
       /*_options*/
       8192 && li_data_value_value !== (li_data_value_value =
       /*option*/
-      ctx[48].value)) {
+      ctx[49].value)) {
         attr(li, "data-value", li_data_value_value);
       }
@@ -6593,7 +6607,7 @@ function create_each_block_1(key_1, ctx) {
       73728) {
         toggle_class(li, "dropdown-item--tabbed",
         /*index*/
-        ctx[52] ===
+        ctx[53] ===
         /*_highlightedIndex*/
         ctx[16]);
       }
@@ -6605,7 +6619,7 @@ function create_each_block_1(key_1, ctx) {
         /*_values*/
         ctx[12].includes(
         /*option*/
-        ctx[48].value));
+        ctx[49].value));
       }
     },
@@ -6616,14 +6630,14 @@ function create_each_block_1(key_1, ctx) {
     }
   };
-} // (234:6) {#each _options as option}
+} // (246:6) {#each _options as option}
 function create_each_block$4(ctx) {
   let option;
   let t0_value =
   /*option*/
-  ctx[48].label + "";
+  ctx[49].label + "";
   let t0;
   let t1;
   let option_selected_value;
@@ -6636,14 +6650,14 @@ function create_each_block$4(ctx) {
       t1 = space();
       option.selected = option_selected_value =
       /*option*/
-      ctx[48].selected;
+      ctx[49].selected;
       option.__value = option_value_value =
       /*option*/
-      ctx[48].value;
+      ctx[49].value;
       option.value = option.__value;
       attr(option, "aria-label", option_aria_label_value =
       /*option*/
-      ctx[48].label);
+      ctx[49].label);
     },
     m(target, anchor) {
@@ -6657,13 +6671,13 @@ function create_each_block$4(ctx) {
       /*_options*/
       8192 && t0_value !== (t0_value =
       /*option*/
-      ctx[48].label + "")) set_data(t0, t0_value);
+      ctx[49].label + "")) set_data(t0, t0_value);
       if (dirty[0] &
       /*_options*/
       8192 && option_selected_value !== (option_selected_value =
       /*option*/
-      ctx[48].selected)) {
+      ctx[49].selected)) {
         option.selected = option_selected_value;
       }
@@ -6671,7 +6685,7 @@ function create_each_block$4(ctx) {
       /*_options*/
       8192 && option_value_value !== (option_value_value =
       /*option*/
-      ctx[48].value)) {
+      ctx[49].value)) {
         option.__value = option_value_value;
         option.value = option.__value;
       }
@@ -6680,7 +6694,7 @@ function create_each_block$4(ctx) {
       /*_options*/
       8192 && option_aria_label_value !== (option_aria_label_value =
       /*option*/
-      ctx[48].label)) {
+      ctx[49].label)) {
         attr(option, "aria-label", option_aria_label_value);
       }
     },
@@ -6692,7 +6706,7 @@ function create_each_block$4(ctx) {
   };
 }
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
   let div;
   let div_data_testid_value;
   let div_style_value;
@@ -6700,7 +6714,7 @@ function create_fragment$p(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*_native*/
-    ctx[22]) return create_if_block$a;
+    ctx[22]) return create_if_block$b;
     return create_else_block$1;
   }
@@ -6809,21 +6823,7 @@ function create_fragment$p(ctx) {
   };
 }
-function getCustomDropdownWidth(options) {
-  let width;
-  let maxCount = 0;
-  options.forEach(option => {
-    const label = option.label || option.value || "";
-    if (!width && maxCount < label.length) {
-      maxCount = label.length;
-      width = `${Math.max(20, maxCount + 12)}ch`;
-    }
-  });
-  return width;
-}
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
   let _disabled;
   let _error;
@@ -6901,7 +6901,16 @@ function instance$m($$self, $$props, $$invalidate) {
       $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
       addKeyboardEventListeners();
       setHighlightedIndexToSelected();
-    }
+    } // watch for DOM changes within the slot => dynamic binding
+    const slot = _el.querySelector("slot");
+    slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
+      $$invalidate(14, _selectedLabel = "");
+      $$invalidate(12, _values = parseValues());
+      $$invalidate(13, _options = getOptions());
+    });
   });
   onDestroy(() => {
     removeKeyboardEventListeners();
@@ -6925,7 +6934,7 @@ function instance$m($$self, $$props, $$invalidate) {
   function getOptions() {
     const children = getChildren();
-    return children.map(el => {
+    return children.filter(child => child.tagName === "GOA-DROPDOWN-ITEM").map(el => {
       const option = el;
       const value = el.getAttribute("value") || option.value;
       const label = el.getAttribute("label") || option.label || value;
@@ -6943,6 +6952,26 @@ function instance$m($$self, $$props, $$invalidate) {
         label
       };
     });
+  } // compute the required width to enure all children fit
+  function getCustomDropdownWidth(options) {
+    let width;
+    let maxCount = 0;
+    if (options.length === 0 && placeholder !== "") {
+      return `${placeholder.length + 12}ch`;
+    }
+    options.forEach(option => {
+      const label = option.label || option.value || "";
+      if (!width && maxCount < label.length) {
+        maxCount = label.length;
+        width = `${Math.max(20, maxCount + 12)}ch`;
+      }
+    });
+    return width;
   }
   function addKeyboardEventListeners() {
@@ -7179,12 +7208,12 @@ function instance$m($$self, $$props, $$invalidate) {
 class Dropdown extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--color-gray-100);color:var(--goa-color-interactive--hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--color-gray-600)}.dropdown-item--selected{background:var(--goa-color-interactive);color:var(--color-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive--hover);color:var(--color-white)}.dropdown-native{border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background-color:var(--color-white)}.dropdown-native:has(select:disabled){background-color:var(--color-gray-100);border-color:var(--color-gray-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive--error)}select{border:none;background-color:transparent;color:var(--goa-color-text);font-size:var(--input-font-size);appearance:none;padding:calc(var(--input-padding) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{position:relative;cursor:pointer;display:inline-block;width:100%}@media(min-width: 640px){.dropdown{width:var(--width)}}.dropdown-background{cursor:default;position:fixed;z-index:98;inset:0}.dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99;scroll-behavior:smooth;scrollbar-width:thin;display:none}.dropdown-active{display:block}.dropdown-list::-webkit-scrollbar{width:6px}.dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.dropdown-list::-webkit-scrollbar-thumb{background:#888}.dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item--tabbed{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item--disabled{opacity:0.5;cursor:default}.dropdown-item--disabled:hover{cursor:default;color:var(--goa-color-greyscale-700)}.dropdown-item--selected{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item--tabbed.dropdown-item--selected,.dropdown-item--selected:hover{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white)}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}select{border:none;background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 2px);padding-left:0.5rem;padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$m, create_fragment$p, safe_not_equal, {
+    }, instance$n, create_fragment$q, safe_not_equal, {
       name: 0,
       arialabel: 1,
       value: 28,
@@ -7388,7 +7417,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$o(ctx) {
+function create_fragment$p(ctx) {
   return {
     c() {
       this.c = noop;
@@ -7409,7 +7438,7 @@ class DropdownItem extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$o, safe_not_equal, {}, null);
+    }, null, create_fragment$p, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -7423,7 +7452,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$n(ctx) {
+function create_fragment$o(ctx) {
   let div;
   return {
     c() {
@@ -7484,7 +7513,7 @@ function isFocusable(element) {
   }
 }
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
   let isActive;
   let {
     active
@@ -7653,7 +7682,7 @@ class FocusTrap extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$l, create_fragment$n, safe_not_equal, {
+    }, instance$m, create_fragment$o, safe_not_equal, {
       active: 1
     }, null);
@@ -7689,7 +7718,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$9(ctx) {
+function create_if_block$a(ctx) {
   let goa_divider;
   return {
     c() {
@@ -7708,9 +7737,7 @@ function create_if_block$9(ctx) {
   };
 }
-function create_fragment$m(ctx) {
-  var _ctx$;
+function create_fragment$n(ctx) {
   let div5;
   let div4;
   let div0;
@@ -7726,11 +7753,11 @@ function create_fragment$m(ctx) {
   let div5_style_value;
   let if_block =
   /*navLinks*/
-  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$9();
+  ctx[2] &&
+  /*navLinks*/
+  ctx[2].length > 0 && create_if_block$a();
   return {
     c() {
-      var _ctx$2, _ctx$3;
       div5 = element("div");
       div4 = element("div");
       div0 = element("div");
@@ -7759,11 +7786,15 @@ function create_fragment$m(ctx) {
       attr(div2, "class", "abgov");
       toggle_class(div2, "with-meta-links",
       /*metaLinks*/
-      (_ctx$2 = ctx[3]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
+      ctx[3] &&
+      /*metaLinks*/
+      ctx[3].length > 0);
       attr(div3, "class", "meta-section");
       toggle_class(div3, "with-meta-links",
       /*metaLinks*/
-      (_ctx$3 = ctx[3]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
+      ctx[3] &&
+      /*metaLinks*/
+      ctx[3].length > 0);
       attr(div4, "class", "content");
       attr(div5, "class", "app-footer");
       attr(div5, "style", div5_style_value = `--max-content-width: ${
@@ -7791,13 +7822,13 @@ function create_fragment$m(ctx) {
     },
     p(ctx, [dirty]) {
-      var _ctx$4;
       if (
       /*navLinks*/
-      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
+      ctx[2] &&
+      /*navLinks*/
+      ctx[2].length > 0) {
         if (if_block) ;else {
-          if_block = create_if_block$9();
+          if_block = create_if_block$a();
           if_block.c();
           if_block.m(div4, t1);
         }
@@ -7809,21 +7840,21 @@ function create_fragment$m(ctx) {
       if (dirty &
       /*metaLinks*/
       8) {
-        var _ctx$5;
         toggle_class(div2, "with-meta-links",
         /*metaLinks*/
-        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
+        ctx[3] &&
+        /*metaLinks*/
+        ctx[3].length > 0);
       }
       if (dirty &
       /*metaLinks*/
       8) {
-        var _ctx$6;
         toggle_class(div3, "with-meta-links",
         /*metaLinks*/
-        (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
+        ctx[3] &&
+        /*metaLinks*/
+        ctx[3].length > 0);
       }
       if (dirty &
@@ -7849,7 +7880,7 @@ function create_fragment$m(ctx) {
   };
 }
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
   let {
     maxcontentwidth = ""
   } = $$props;
@@ -7882,12 +7913,12 @@ function instance$k($$self, $$props, $$invalidate) {
 class Footer extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--goa-color-greyscale-100);border-top:2px solid var(--goa-color-greyscale-200);border-bottom:1rem solid var(--goa-color-brand-default)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$k, create_fragment$m, safe_not_equal, {
+    }, instance$l, create_fragment$n, safe_not_equal, {
       maxcontentwidth: 0
     }, null);
@@ -7977,7 +8008,7 @@ function create_each_block$3(ctx) {
   };
 }
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
   let section;
   let div;
   let t;
@@ -8065,7 +8096,7 @@ function create_fragment$l(ctx) {
   };
 }
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
   let rootEl;
   let children = [];
   onMount(async () => {
@@ -8095,12 +8126,12 @@ function instance$j($$self, $$props, $$invalidate) {
 class FooterMetaSection extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text);white-space:nowrap}</style>`;
+    this.shadowRoot.innerHTML = `<style>.hidden{display:none}ul{display:flex;flex-wrap:wrap;gap:1rem;padding-left:0}li{list-style-type:none}a{color:var(--goa-color-text-default);white-space:nowrap}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$j, create_fragment$l, safe_not_equal, {}, null);
+    }, instance$k, create_fragment$m, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -8121,7 +8152,7 @@ function get_each_context$2(ctx, list, i) {
 } // (31:2) {#if heading}
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
   let div;
   let t0;
   let t1;
@@ -8210,7 +8241,7 @@ function create_each_block$2(ctx) {
   };
 }
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
   let section;
   let t0;
   let div;
@@ -8219,7 +8250,7 @@ function create_fragment$k(ctx) {
   let ul_style_value;
   let if_block =
   /*heading*/
-  ctx[0] && create_if_block$8(ctx);
+  ctx[0] && create_if_block$9(ctx);
   let each_value =
   /*children*/
   ctx[3];
@@ -8286,7 +8317,7 @@ function create_fragment$k(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block$8(ctx);
+          if_block = create_if_block$9(ctx);
           if_block.c();
           if_block.m(section, t0);
         }
@@ -8357,7 +8388,7 @@ function create_fragment$k(ctx) {
   };
 }
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
   let {
     heading = ""
   } = $$props;
@@ -8403,12 +8434,12 @@ function instance$i($$self, $$props, $$invalidate) {
 class FooterNavSection extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--fs-xl);line-height:var(--lh-lg)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{flex:auto}.title{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4)}.hidden{display:none}.links{display:block;list-style-type:none;padding-left:0}@media(min-width: 720px){.links{display:var(--narrow-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--narrow-column-count)}}@media(min-width: 1024px){.links{display:var(--wide-display-type);list-style-type:none;padding-left:0;flex-direction:column;column-count:var(--wide-column-count)}}li{padding:0.75rem 0}a{color:var(--goa-color-text-default)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$i, create_fragment$k, safe_not_equal, {
+    }, instance$j, create_fragment$l, safe_not_equal, {
       heading: 0,
       maxcolumncount: 1
     }, null);
@@ -8606,7 +8637,7 @@ function create_if_block_1$4(ctx) {
 } // (48:2) {#if helptext}
-function create_if_block$7(ctx) {
+function create_if_block$8(ctx) {
   let div;
   let t;
   return {
@@ -8638,7 +8669,7 @@ function create_if_block$7(ctx) {
   };
 }
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
   let div1;
   let t0;
   let div0;
@@ -8653,7 +8684,7 @@ function create_fragment$j(ctx) {
   ctx[7] && create_if_block_1$4(ctx);
   let if_block2 =
   /*helptext*/
-  ctx[6] && create_if_block$7(ctx);
+  ctx[6] && create_if_block$8(ctx);
   return {
     c() {
       div1 = element("div");
@@ -8730,7 +8761,7 @@ function create_fragment$j(ctx) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
-          if_block2 = create_if_block$7(ctx);
+          if_block2 = create_if_block$8(ctx);
           if_block2.c();
           if_block2.m(div1, null);
         }
@@ -8775,7 +8806,7 @@ function create_fragment$j(ctx) {
   };
 }
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator("Requirement type", ["optional", "required"], false);
   let {
     testid = ""
@@ -8826,12 +8857,12 @@ function instance$h($$self, $$props, $$invalidate) {
 class FormItem extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}*{box-sizing:border-box}.label{display:block;font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:0.5rem 0}.label em{color:var(--goa-color-greyscale-700);font-weight:var(--goa-font-weight-regular);font-size:var(--goa-font-size-2);line-height:var(--goa-line-height-1);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--goa-font-size-2);color:var(--goa-color-text-default);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--goa-font-size-2);color:var(--goa-color-interactive-error);margin-bottom:0.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$h, create_fragment$j, safe_not_equal, {
+    }, instance$i, create_fragment$k, safe_not_equal, {
       testid: 0,
       mt: 1,
       mr: 2,
@@ -8963,7 +8994,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$i(ctx) {
+function create_fragment$j(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -8986,7 +9017,7 @@ function create_fragment$i(ctx) {
     --min-child-width: ${
       /*minchildwidth*/
       ctx[1] || 0};
-    gap: var(--goa-spacing-${
+    gap: var(--goa-space-${
       /*gap*/
       ctx[0]})
   `);
@@ -9013,7 +9044,7 @@ function create_fragment$i(ctx) {
     --min-child-width: ${
       /*minchildwidth*/
       ctx[1] || 0};
-    gap: var(--goa-spacing-${
+    gap: var(--goa-space-${
       /*gap*/
       ctx[0]})
   `)) {
@@ -9031,7 +9062,7 @@ function create_fragment$i(ctx) {
   };
 }
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
   let {
     gap = "m"
   } = $$props;
@@ -9071,12 +9102,12 @@ function instance$g($$self, $$props, $$invalidate) {
 class Grid extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-grid{display:flex;flex-direction:column;gap:var(--gap)}@media(min-width: 640px){.goa-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--min-child-width), 1fr))}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$g, create_fragment$i, safe_not_equal, {
+    }, instance$h, create_fragment$j, safe_not_equal, {
       gap: 0,
       minchildwidth: 1,
       mt: 2,
@@ -9172,7 +9203,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$h(ctx) {
+function create_fragment$i(ctx) {
   let div1;
   let goa_page_block;
   let h1;
@@ -9257,7 +9288,7 @@ function create_fragment$h(ctx) {
   };
 }
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
   let {
     heading
   } = $$props;
@@ -9280,12 +9311,12 @@ function instance$f($$self, $$props, $$invalidate) {
 class HeroBanner extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand-default);color:var(--goa-color-greyscale-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--goa-color-greyscale-white);font-size:var(--goa-font-size-10);line-height:var(--goa-line-height-7);font-weight:var(--goa-font-weight-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$f, create_fragment$h, safe_not_equal, {
+    }, instance$g, create_fragment$i, safe_not_equal, {
       heading: 0,
       backgroundurl: 1,
       minheight: 2
@@ -9345,7 +9376,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$g(ctx) {
+function create_fragment$h(ctx) {
   let button;
   let goa_icon;
   let button_style_value;
@@ -9517,7 +9548,7 @@ function handleClick(e) {
   }));
 }
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
   let css;
   let isDisabled;
   let isInverted;
@@ -9617,12 +9648,12 @@ function instance$e($$self, $$props, $$invalidate) {
 class IconButton extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--goa-font-family-sans)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive-default);fill:var(--goa-color-interactive-default);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);outline:none}button:focus,button:active{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-interactive-focus);color:var(--goa-color-interactive-focus);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-interactive-hover)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--goa-color-greyscale-white)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$e, create_fragment$g, safe_not_equal, {
+    }, instance$f, create_fragment$h, safe_not_equal, {
       icon: 0,
       size: 1,
       theme: 2,
@@ -9790,7 +9821,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$6(ctx) {
+function create_if_block$7(ctx) {
   let ion_icon;
   let ion_icon_name_value;
   return {
@@ -9838,12 +9869,12 @@ function create_if_block$6(ctx) {
   };
 }
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
   let div;
   let div_style_value;
   let if_block =
   /*type*/
-  ctx[4] && create_if_block$6(ctx);
+  ctx[4] && create_if_block$7(ctx);
   return {
     c() {
       div = element("div");
@@ -9896,7 +9927,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$7(ctx);
           if_block.c();
           if_block.m(div, null);
         }
@@ -9969,7 +10000,7 @@ function create_fragment$f(ctx) {
   };
 }
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
   let isInverted;
   let _size;
@@ -10059,7 +10090,7 @@ class Icon extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$d, create_fragment$f, safe_not_equal, {
+    }, instance$e, create_fragment$g, safe_not_equal, {
       mt: 0,
       mr: 1,
       mb: 2,
@@ -10269,7 +10300,7 @@ function create_if_block_4$1(ctx) {
     }
   };
-} // (100:4) {#if leadingicon}
+} // (109:4) {#if leadingicon}
 function create_if_block_3$2(ctx) {
@@ -10303,7 +10334,7 @@ function create_if_block_3$2(ctx) {
     }
   };
-} // (130:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (139:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$3(ctx) {
@@ -10338,7 +10369,7 @@ function create_if_block_2$3(ctx) {
     }
   };
-} // (140:4) {#if trailingicon && handlesTrailingIconClick}
+} // (149:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$3(ctx) {
@@ -10393,10 +10424,10 @@ function create_if_block_1$3(ctx) {
     }
   };
-} // (152:4) {#if suffix}
+} // (161:4) {#if suffix}
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
   let span;
   let t;
   return {
@@ -10428,7 +10459,7 @@ function create_if_block$5(ctx) {
   };
 }
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
   let div3;
   let div2;
   let t0;
@@ -10466,7 +10497,7 @@ function create_fragment$e(ctx) {
   ctx[24] && create_if_block_1$3(ctx);
   let if_block4 =
   /*suffix*/
-  ctx[15] && create_if_block$5(ctx);
+  ctx[15] && create_if_block$6(ctx);
   return {
     c() {
       div3 = element("div");
@@ -10580,7 +10611,7 @@ function create_fragment$e(ctx) {
       append(div2, input);
       /*input_binding*/
-      ctx[32](input);
+      ctx[33](input);
       append(div2, t3);
       if (if_block2) if_block2.m(div2, null);
       append(div2, t4);
@@ -10787,7 +10818,7 @@ function create_fragment$e(ctx) {
         if (if_block4) {
           if_block4.p(ctx, dirty);
         } else {
-          if_block4 = create_if_block$5(ctx);
+          if_block4 = create_if_block$6(ctx);
           if_block4.c();
           if_block4.m(div2, t6);
         }
@@ -10850,7 +10881,7 @@ function create_fragment$e(ctx) {
       if (if_block1) if_block1.d();
       /*input_binding*/
-      ctx[32](null);
+      ctx[33](null);
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
       if (if_block4) if_block4.d();
@@ -10867,7 +10898,7 @@ function doClick() {
   }));
 }
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
   let handlesTrailingIconClick;
   let isFocused;
   let isReadonly;
@@ -10924,13 +10955,13 @@ function instance$c($$self, $$props, $$invalidate) {
     arialabel = null
   } = $$props;
   let {
-    min = null
+    min = ""
   } = $$props;
   let {
-    max = null
+    max = ""
   } = $$props;
   let {
-    step = null
+    step = 1
   } = $$props;
   let {
     prefix = ""
@@ -10938,6 +10969,9 @@ function instance$c($$self, $$props, $$invalidate) {
   let {
     suffix = ""
   } = $$props;
+  let {
+    debounce = 0
+  } = $$props;
   let {
     mt = null
   } = $$props;
@@ -10951,19 +10985,28 @@ function instance$c($$self, $$props, $$invalidate) {
     ml = null
   } = $$props;
   let inputEl;
+  let _debounceId = null;
   function onKeyUp(e) {
-    const ee = e.target;
-    e.target.dispatchEvent(new CustomEvent("_change", {
-      composed: true,
-      bubbles: false,
-      cancelable: true,
-      detail: {
-        name,
-        value: ee.value
-      }
-    }));
-    $$invalidate(0, value = ee.value);
+    const input = e.target;
+    if (!input) return;
+    if (_debounceId != null) {
+      clearTimeout(_debounceId);
+    }
+    _debounceId = setTimeout(() => {
+      input.dispatchEvent(new CustomEvent("_change", {
+        composed: true,
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          name,
+          value: input.value
+        }
+      }));
+    }, debounce);
+    $$invalidate(0, value = input.value);
   }
   onMount(() => {
@@ -11004,6 +11047,7 @@ function instance$c($$self, $$props, $$invalidate) {
     if ('step' in $$props) $$invalidate(13, step = $$props.step);
     if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
     if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
+    if ('debounce' in $$props) $$invalidate(31, debounce = $$props.debounce);
     if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
     if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
     if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
@@ -11020,7 +11064,7 @@ function instance$c($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty[0] &
     /*focused*/
     268435456) {
-      $$invalidate(31, isFocused = toBoolean(focused));
+      $$invalidate(32, isFocused = toBoolean(focused));
     }
     if ($$self.$$.dirty[0] &
@@ -11045,7 +11089,7 @@ function instance$c($$self, $$props, $$invalidate) {
     /*inputEl*/
     1048576 | $$self.$$.dirty[1] &
     /*isFocused*/
-    1) {
+    2) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -11062,19 +11106,19 @@ function instance$c($$self, $$props, $$invalidate) {
     }
   };
-  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, isFocused, input_binding];
+  return [value, type, name, autocapitalize, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, prefix, suffix, mt, mr, mb, ml, inputEl, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, debounce, isFocused, input_binding];
 }
 class Input extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover{border-color:var(--goa-color-interactive-hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$c, create_fragment$e, safe_not_equal, {
+    }, instance$d, create_fragment$f, safe_not_equal, {
       type: 1,
       name: 2,
       value: 0,
@@ -11096,6 +11140,7 @@ class Input extends SvelteElement {
       step: 13,
       prefix: 14,
       suffix: 15,
+      debounce: 31,
       mt: 16,
       mr: 17,
       mb: 18,
@@ -11115,7 +11160,7 @@ class Input extends SvelteElement {
   }
   static get observedAttributes() {
-    return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "mt", "mr", "mb", "ml"];
+    return ["type", "name", "value", "autocapitalize", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "prefix", "suffix", "debounce", "mt", "mr", "mb", "ml"];
   }
   get type() {
@@ -11349,6 +11394,17 @@ class Input extends SvelteElement {
     flush();
   }
+  get debounce() {
+    return this.$$.ctx[31];
+  }
+  set debounce(debounce) {
+    this.$$set({
+      debounce
+    });
+    flush();
+  }
   get mt() {
     return this.$$.ctx[16];
   }
@@ -11560,7 +11616,7 @@ function create_if_block_2$2(ctx) {
 } // (56:2) {#if version}
-function create_if_block$4(ctx) {
+function create_if_block$5(ctx) {
   let div;
   let t;
   return {
@@ -11593,7 +11649,7 @@ function create_if_block$4(ctx) {
   };
 }
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
@@ -11608,7 +11664,7 @@ function create_fragment$d(ctx) {
   let if_block1 = show_if && create_if_block_1$2(ctx);
   let if_block2 =
   /*version*/
-  ctx[1] && create_if_block$4(ctx);
+  ctx[1] && create_if_block$5(ctx);
   return {
     c() {
       header = element("header");
@@ -11674,7 +11730,7 @@ function create_fragment$d(ctx) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
-          if_block2 = create_if_block$4(ctx);
+          if_block2 = create_if_block$5(ctx);
           if_block2.c();
           if_block2.m(header, null);
         }
@@ -11702,7 +11758,7 @@ function capitalize(val) {
   return val[0].toUpperCase() + val.slice(1);
 }
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
   const [Types, validateType] = typeValidator("Microsite header type", ["live", "alpha", "beta"], true);
   let {
     type
@@ -11729,12 +11785,12 @@ function instance$b($$self, $$props, $$invalidate) {
 class MicrositeHeader extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$b, create_fragment$d, safe_not_equal, {
+    }, instance$c, create_fragment$e, safe_not_equal, {
       type: 0,
       version: 1,
       feedbackurl: 2
@@ -11794,7 +11850,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$3(ctx) {
+function create_if_block$4(ctx) {
   let goa_focus_trap;
   let div5;
   let div0;
@@ -12199,12 +12255,12 @@ function create_if_block_1$1(ctx) {
   };
 }
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
   /*isOpen*/
-  ctx[7] && create_if_block$3(ctx);
+  ctx[7] && create_if_block$4(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -12231,7 +12287,7 @@ function create_fragment$c(ctx) {
             transition_in(if_block, 1);
           }
         } else {
-          if_block = create_if_block$3(ctx);
+          if_block = create_if_block$4(ctx);
           if_block.c();
           transition_in(if_block, 1);
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12264,7 +12320,7 @@ function create_fragment$c(ctx) {
   };
 }
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
   let isClosable;
   let isOpen;
@@ -12349,12 +12405,12 @@ function instance$a($$self, $$props, $$invalidate) {
 class Modal extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:6px 6px 6px rgba(0, 0, 0, 0.16);border-radius:4px;max-height:90%;border:1px solid var(--color-gray-600)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--fs-xl);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.modal{font-family:var(--goa-font-family-sans);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem;border-radius:4px 0px 0px 4px}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:var(--goa-shadow-modal);border-radius:4px;max-height:90%;border:1px solid var(--goa-color-greyscale-700)}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions ::slotted(div){margin:1.5rem 0 0}.modal-content ::slotted(:last-child){margin-bottom:0 !important}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--goa-font-size-7);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$a, create_fragment$c, safe_not_equal, {
+    }, instance$b, create_fragment$d, safe_not_equal, {
       heading: 0,
       closable: 9,
       open: 1,
@@ -12450,7 +12506,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$2(ctx) {
+function create_if_block$3(ctx) {
   let div3;
   let div0;
   let goa_icon;
@@ -12574,12 +12630,12 @@ function create_if_block$2(ctx) {
   };
 }
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
   let if_block_anchor;
   let current;
   let if_block =
   /*show*/
-  ctx[1] && create_if_block$2(ctx);
+  ctx[1] && create_if_block$3(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -12606,7 +12662,7 @@ function create_fragment$b(ctx) {
             transition_in(if_block, 1);
           }
         } else {
-          if_block = create_if_block$2(ctx);
+          if_block = create_if_block$3(ctx);
           if_block.c();
           transition_in(if_block, 1);
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -12639,7 +12695,7 @@ function create_fragment$b(ctx) {
   };
 }
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
   let iconType;
   const [Types, validateType] = typeValidator("Notification type", ["emergency", "important", "information", "event"], true);
   let {
@@ -12672,12 +12728,12 @@ function instance$9($$self, $$props, $$invalidate) {
 class Notification extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem;display:flex;gap:1rem}.emergency{background-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.event{background-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$9, create_fragment$b, safe_not_equal, {
+    }, instance$a, create_fragment$c, safe_not_equal, {
       type: 0
     }, null);
@@ -12719,7 +12775,7 @@ function isValidDimension(value) {
 /* libs/web-components/src/components/page-block/PageBlock.svelte generated by Svelte v3.51.0 */
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -12759,7 +12815,7 @@ function create_fragment$a(ctx) {
   };
 }
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
   const Sizes = {
     "full": "100%"
   };
@@ -12795,12 +12851,12 @@ function instance$8($$self, $$props, $$invalidate) {
 class PageBlock extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.page-content{max-width:var(--max-width);margin:0 auto;padding:0 1.75rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$8, create_fragment$a, safe_not_equal, {
+    }, instance$9, create_fragment$b, safe_not_equal, {
       width: 1,
       _width: 0
     }, null);
@@ -13038,7 +13094,7 @@ function create_each_block$1(key_1, ctx) {
   };
 }
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
   let div;
   let slot;
   let t;
@@ -13161,7 +13217,7 @@ function create_fragment$9(ctx) {
   };
 }
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
   let isDisabled;
   let isError;
   const [Orientations, validateOrientation] = typeValidator("Radio group orientation", ["vertical", "horizontal"]);
@@ -13298,14 +13354,14 @@ function instance$7($$self, $$props, $$invalidate) {
 class RadioGroup extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive--hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--fw-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive--focus)}.goa-radio--disabled{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
-      var(--goa-color-interactive--active)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--color-gray-600)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
-      var(--goa-color-interactive--active)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-status-emergency)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-status-emergency)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.goa-radio-group--horizontal{display:flex;flex-direction:row}.goa-radio-group--vertical{display:inline-block}label.goa-radio{--goa-radio-outline-width:3px;--goa-radio-diameter:1.5rem;--goa-radio-border-width:1px;--goa-radio-border-width--checked:7px;display:inline-block;box-sizing:border-box;display:flex;align-items:center;min-height:3rem}.goa-radio:hover{cursor:pointer}.goa-radio *,.goa-radio *:before,.goa-radio *:after{box-sizing:border-box}.goa-radio input[type="radio"]{width:0;height:0;margin:0;opacity:0}input[type="radio"]:hover~.goa-radio-icon{border-color:var(--goa-color-interactive-hover)}input[type="radio"]:focus~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio-label{padding:0.5rem;font-weight:var(--goa-font-weight-regular)}.goa-radio-icon{display:inline-block;height:var(--goa-radio-diameter);width:var(--goa-radio-diameter);border-radius:50%;background-color:#fff;transition:box-shadow 100ms ease-in-out;flex:0 0 auto}.goa-radio:focus>input:not(:disabled)~.goa-radio-icon{box-shadow:0 0 0 var(--goa-radio-outline-width) var(--goa-color-interactive-focus)}.goa-radio--disabled .goa-radio-label{opacity:0.4}.goa-radio--disabled:hover{cursor:default}input[type="radio"]:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
+      var(--goa-color-interactive-hover)}input[type="radio"]:not(:checked)~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:disabled~.goa-radio-icon{border:var(--goa-radio-border-width) solid var(--goa-color-greyscale-700)}input[type="radio"]:disabled:checked~.goa-radio-icon{border:var(--goa-radio-border-width--checked) solid
+      var(--goa-color-interactive-hover)}.goa-radio--error input[type="radio"]:checked~.goa-radio-icon{border:7px solid var(--goa-color-emergency-default)}.goa-radio--error input[type="radio"]:not(:checked)~.goa-radio-icon{border:2px solid var(--goa-color-emergency-default)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$7, create_fragment$9, safe_not_equal, {
+    }, instance$8, create_fragment$a, safe_not_equal, {
       name: 1,
       value: 0,
       orientation: 2,
@@ -13461,7 +13517,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$8(ctx) {
+function create_fragment$9(ctx) {
   let div;
   let slot;
   let div_style_value;
@@ -13529,7 +13585,7 @@ function create_fragment$8(ctx) {
   };
 }
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
   let {
     direction = "vertical"
   } = $$props;
@@ -13561,7 +13617,7 @@ class Scrollable extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$6, create_fragment$8, safe_not_equal, {
+    }, instance$7, create_fragment$9, safe_not_equal, {
       direction: 0,
       hpadding: 1,
       vpadding: 2,
@@ -13687,9 +13743,9 @@ function create_else_block(ctx) {
 function create_if_block_2(ctx) {
   let each_1_anchor;
   let current;
-  let each_value = Array(
+  let each_value = Array(Number.parseInt(
   /*linecount*/
-  ctx[2]);
+  ctx[2] + ""));
   let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
@@ -13722,9 +13778,9 @@ function create_if_block_2(ctx) {
       if (dirty &
       /*size, linecount*/
       6) {
-        each_value = Array(
+        each_value = Array(Number.parseInt(
         /*linecount*/
-        ctx[2]);
+        ctx[2] + ""));
         let i;
         for (i = 0; i < each_value.length; i += 1) {
@@ -13902,7 +13958,7 @@ function create_if_block_1(ctx) {
 } // (30:2) {#if type === "card"}
-function create_if_block$1(ctx) {
+function create_if_block$2(ctx) {
   let div1;
   let skeleton0;
   let t0;
@@ -13934,7 +13990,9 @@ function create_if_block$1(ctx) {
       size:
       /*size*/
       ctx[1],
-      linecount: 3
+      linecount:
+      /*linecount*/
+      ctx[2]
     }
   });
   return {
@@ -13987,6 +14045,11 @@ function create_if_block$1(ctx) {
       2) skeleton2_changes.size =
       /*size*/
       ctx[1];
+      if (dirty &
+      /*linecount*/
+      4) skeleton2_changes.linecount =
+      /*linecount*/
+      ctx[2];
       skeleton2.$set(skeleton2_changes);
       if (!current || dirty &
@@ -14029,7 +14092,7 @@ function create_if_block$1(ctx) {
     }
   };
-} // (52:4) {#each Array(linecount) as _item}
+} // (52:4) {#each Array(Number.parseInt(linecount+"")) as _item}
 function create_each_block(ctx) {
@@ -14089,13 +14152,13 @@ function create_each_block(ctx) {
   };
 }
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
   let div;
   let current_block_type_index;
   let if_block;
   let div_style_value;
   let current;
-  const if_block_creators = [create_if_block$1, create_if_block_1, create_if_block_2, create_else_block];
+  const if_block_creators = [create_if_block$2, create_if_block_1, create_if_block_2, create_else_block];
   const if_blocks = [];
   function select_block_type(ctx, dirty) {
@@ -14205,7 +14268,7 @@ function create_fragment$7(ctx) {
   };
 }
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
   const [Types, validateType] = typeValidator("Skeleton type", ["image", "text", "title", "text-small", "avatar", "header", "paragraph", "thumbnail", "card", "profile", "lines"], true);
   const [Sizes, validateSize] = typeValidator("Skeleton size", ["1", "2", "3", "4"]);
   let {
@@ -14258,12 +14321,12 @@ function instance$5($$self, $$props, $$invalidate) {
 class Skeleton extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--color-gray-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--color-gray-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--color-gray-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes pulse{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.skeleton{background-color:var(--goa-color-greyscale-100);animation:pulse 2s infinite ease-in-out;overflow:hidden;margin:10px 0}.image,.image-1{background-color:var(--goa-color-greyscale-100);flex:1 1 100px;height:100px;margin:0}.image-2{height:140px}.image-3{height:200px}.image-4{height:300px}.text,.text-1,.text-2,.text-3,.text-4{width:100%;height:.75rem;border-radius:0.25rem;margin:6px 0}.title,.title-1,.title-2{width:100%;height:.75rem;border-radius:0.25rem}.title-3{height:.8rem}.title-4{height:1rem}.text-small,.text-small-1{width:30%;height:6px;border-radius:2px}.text-small-2{width:40%;height:8px;border-radius:2px}.text-small-3{width:50%;height:10px;border-radius:3px}.text-small-4{width:70%;height:12px;border-radius:4px}.paragraph{width:100%;height:70px;border-radius:4px}.header,.header-1{width:50%;height:18px;margin:12px 0;border-radius:0.25rem}.header-2{width:60%;height:20px;margin:14px 0;border-radius:0.25rem}.header-3{width:70%;height:22px;margin:16px 0;border-radius:0.25rem}.header-4{width:80%;height:24px;margin:18px 0;border-radius:0.3rem}.avatar{display:inline-block}.avatar,.avatar-1{width:40px;height:40px;border-radius:50%}.avatar-2{width:60px;height:60px;border-radius:50%}.avatar-3{width:80px;height:80px;border-radius:50%}.avatar-4{width:120px;height:120px;border-radius:50%}.thumbnail{display:inline-block}.thumbnail,.thumbnail-1{width:40px;height:40px;border-radius:4px}.thumbnail-2{width:60px;height:60px;border-radius:4px}.thumbnail-3{width:80px;height:80px;border-radius:4px}.thumbnail-4{width:120px;height:120px;border-radius:4px}.card{display:inline-block}.card,.card-1,.card-2,.card-3,.card-4{border:1px solid var(--goa-color-greyscale-100);border-radius:4px}.card{width:100%}@media(min-width: 480px){.card{max-width:var(--max-width)}}.card-content{flex:1 1 auto;padding:1rem}.profile{display:flex;flex-direction:row;align-items:center}.profile-1{max-width:280px;gap:1rem}.profile-2{max-width:360px;gap:1rem}.profile-3{max-width:480px;gap:1rem}.profile-4{max-width:560px;gap:1rem}.profile .profile-avatar{flex-shrink:0}.profile .profile-name{flex:1 1 auto}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$5, create_fragment$7, safe_not_equal, {
+    }, instance$6, create_fragment$8, safe_not_equal, {
       maxwidth: 0,
       size: 1,
       linecount: 2,
@@ -14395,7 +14458,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$6(ctx) {
+function create_fragment$7(ctx) {
   let div;
   return {
     c() {
@@ -14424,7 +14487,7 @@ function create_fragment$6(ctx) {
   };
 }
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
   let {
     hspacing = "none"
   } = $$props;
@@ -14434,8 +14497,8 @@ function instance$4($$self, $$props, $$invalidate) {
   let rootEl;
   onMount(() => {
     injectCss(rootEl, ":host", {
-      width: `var(--goa-spacing-${hspacing})`,
-      height: `var(--goa-spacing-${vspacing})`
+      width: `var(--goa-space-${hspacing})`,
+      height: `var(--goa-space-${vspacing})`
     });
   });
@@ -14461,7 +14524,7 @@ class Spacer extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$4, create_fragment$6, safe_not_equal, {
+    }, instance$5, create_fragment$7, safe_not_equal, {
       hspacing: 1,
       vspacing: 2
     }, null);
@@ -14693,7 +14756,7 @@ function tweened(value, defaults = {}) {
 /* libs/web-components/src/components/spinner/Spinner.svelte generated by Svelte v3.51.0 */
-function create_if_block(ctx) {
+function create_if_block$1(ctx) {
   let svg;
   let circle;
   let circle_stroke_value;
@@ -14716,7 +14779,7 @@ function create_if_block(ctx) {
       ctx[3]);
       attr(circle, "stroke", circle_stroke_value =
       /*invert*/
-      ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)");
+      ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)");
       attr(circle, "stroke-width",
       /*strokewidth*/
       ctx[4]);
@@ -14735,7 +14798,7 @@ function create_if_block(ctx) {
       ctx[4]);
       attr(path, "stroke", path_stroke_value =
       /*invert*/
-      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)");
+      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)");
       attr(path, "stroke-linecap", "round");
       attr(svg, "class", svg_class_value = `spinner-${
       /*type*/
@@ -14785,7 +14848,7 @@ function create_if_block(ctx) {
       /*invert*/
       1 && circle_stroke_value !== (circle_stroke_value =
       /*invert*/
-      ctx[0] ? "var(--goa-color-primary-dark)" : "var(--goa-color-brand-light)")) {
+      ctx[0] ? "var(--goa-color-info-hover)" : "var(--goa-color-brand-light)")) {
         attr(circle, "stroke", circle_stroke_value);
       }
@@ -14829,7 +14892,7 @@ function create_if_block(ctx) {
       /*invert*/
       1 && path_stroke_value !== (path_stroke_value =
       /*invert*/
-      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-primary)")) {
+      ctx[0] ? "var(--goa-color-brand-light)" : "var(--goa-color-info-default)")) {
         attr(path, "stroke", path_stroke_value);
       }
@@ -14883,11 +14946,11 @@ function create_if_block(ctx) {
   };
 }
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
   let if_block_anchor;
   let if_block =
   /*ready*/
-  ctx[6] && create_if_block(ctx);
+  ctx[6] && create_if_block$1(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -14907,7 +14970,7 @@ function create_fragment$5(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block(ctx);
+          if_block = create_if_block$1(ctx);
           if_block.c();
           if_block.m(if_block_anchor.parentNode, if_block_anchor);
         }
@@ -14928,7 +14991,7 @@ function create_fragment$5(ctx) {
   };
 }
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
   let diameter;
   let strokewidth;
   let radius;
@@ -15054,12 +15117,12 @@ function instance$3($$self, $$props, $$invalidate) {
 class Spinner extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}@keyframes rotate{100%{transform:rotate(360deg)}}.spinner-infinite{animation:rotate 2s linear infinite}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$3, create_fragment$5, safe_not_equal, {
+    }, instance$4, create_fragment$6, safe_not_equal, {
       size: 10,
       invert: 0,
       progress: 11,
@@ -15131,7 +15194,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$4(ctx) {
+function create_fragment$5(ctx) {
   let table;
   let slot;
   let t0;
@@ -15147,23 +15210,28 @@ function create_fragment$4(ctx) {
     <tbody><tr><td></td></tr></tbody>
     <tfoot><tr><td></td></tr></tfoot>`;
       this.c = noop;
+      attr(table, "class",
+      /*variant*/
+      ctx[1]);
       attr(table, "style", table_style_value = `
-    width: ${
+    ${
+      /*width*/
+      ctx[0] ? `width: ${
       /*width*/
-      ctx[0]};
+      ctx[0]};` : ``}
     ${calculateMargin(
       /*mt*/
-      ctx[1],
-      /*mr*/
       ctx[2],
-      /*mb*/
+      /*mr*/
       ctx[3],
+      /*mb*/
+      ctx[4],
       /*ml*/
-      ctx[4])}
+      ctx[5])}
   `);
       toggle_class(table, "sticky",
       /*_stickyHeader*/
-      ctx[6]);
+      ctx[7]);
     },
     m(target, anchor) {
@@ -15173,35 +15241,45 @@ function create_fragment$4(ctx) {
       append(table, template);
       /*table_binding*/
-      ctx[8](table);
+      ctx[9](table);
     },
     p(ctx, [dirty]) {
+      if (dirty &
+      /*variant*/
+      2) {
+        attr(table, "class",
+        /*variant*/
+        ctx[1]);
+      }
       if (dirty &
       /*width, mt, mr, mb, ml*/
-      31 && table_style_value !== (table_style_value = `
-    width: ${
+      61 && table_style_value !== (table_style_value = `
+    ${
       /*width*/
-      ctx[0]};
+      ctx[0] ? `width: ${
+      /*width*/
+      ctx[0]};` : ``}
     ${calculateMargin(
       /*mt*/
-      ctx[1],
-      /*mr*/
       ctx[2],
-      /*mb*/
+      /*mr*/
       ctx[3],
+      /*mb*/
+      ctx[4],
       /*ml*/
-      ctx[4])}
+      ctx[5])}
   `)) {
         attr(table, "style", table_style_value);
       }
       if (dirty &
-      /*_stickyHeader*/
-      64) {
+      /*variant, _stickyHeader*/
+      130) {
         toggle_class(table, "sticky",
         /*_stickyHeader*/
-        ctx[6]);
+        ctx[7]);
       }
     },
@@ -15212,21 +15290,25 @@ function create_fragment$4(ctx) {
       if (detaching) detach(table);
       /*table_binding*/
-      ctx[8](null);
+      ctx[9](null);
     }
   };
 }
-function instance$2($$self, $$props, $$invalidate) {
+function instance$3($$self, $$props, $$invalidate) {
   let _stickyHeader;
+  const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
   let {
     width = ""
   } = $$props;
   let {
     stickyheader = "false"
   } = $$props;
+  let {
+    variant = "normal"
+  } = $$props;
   let {
     mt = null
   } = $$props;
@@ -15243,6 +15325,8 @@ function instance$2($$self, $$props, $$invalidate) {
   let _rootEl;
   onMount(() => {
+    validateVariant(variant);
     const slot = _rootEl.querySelector("slot");
     if (slot) {
@@ -15258,45 +15342,47 @@ function instance$2($$self, $$props, $$invalidate) {
   function table_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _rootEl = $$value;
-      $$invalidate(5, _rootEl);
+      $$invalidate(6, _rootEl);
     });
   }
   $$self.$$set = $$props => {
     if ('width' in $$props) $$invalidate(0, width = $$props.width);
-    if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
-    if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
-    if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
-    if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
-    if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
+    if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
+    if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
+    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*stickyheader*/
-    128) {
-      $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
+    256) {
+      $$invalidate(7, _stickyHeader = toBoolean(stickyheader));
     }
   };
-  return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
+  return [width, variant, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
 }
 class Table extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+    this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--goa-color-greyscale-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700)}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$2, create_fragment$4, safe_not_equal, {
+    }, instance$3, create_fragment$5, safe_not_equal, {
       width: 0,
-      stickyheader: 7,
-      mt: 1,
-      mr: 2,
-      mb: 3,
-      ml: 4
+      stickyheader: 8,
+      variant: 1,
+      mt: 2,
+      mr: 3,
+      mb: 4,
+      ml: 5
     }, null);
     if (options) {
@@ -15312,7 +15398,7 @@ class Table extends SvelteElement {
   }
   static get observedAttributes() {
-    return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
+    return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
   }
   get width() {
@@ -15327,7 +15413,7 @@ class Table extends SvelteElement {
   }
   get stickyheader() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[8];
   }
   set stickyheader(stickyheader) {
@@ -15337,10 +15423,21 @@ class Table extends SvelteElement {
     flush();
   }
-  get mt() {
+  get variant() {
     return this.$$.ctx[1];
   }
+  set variant(variant) {
+    this.$$set({
+      variant
+    });
+    flush();
+  }
+  get mt() {
+    return this.$$.ctx[2];
+  }
   set mt(mt) {
     this.$$set({
       mt
@@ -15349,7 +15446,7 @@ class Table extends SvelteElement {
   }
   get mr() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[3];
   }
   set mr(mr) {
@@ -15360,7 +15457,7 @@ class Table extends SvelteElement {
   }
   get mb() {
-    return this.$$.ctx[3];
+    return this.$$.ctx[4];
   }
   set mb(mb) {
@@ -15371,7 +15468,7 @@ class Table extends SvelteElement {
   }
   get ml() {
-    return this.$$.ctx[4];
+    return this.$$.ctx[5];
   }
   set ml(ml) {
@@ -15386,7 +15483,7 @@ class Table extends SvelteElement {
 customElements.define("goa-table", Table);
 /* libs/web-components/src/components/text-area/TextArea.svelte generated by Svelte v3.51.0 */
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
   let div;
   let textarea;
   let textarea_aria_label_value;
@@ -15567,7 +15664,7 @@ function create_fragment$3(ctx) {
   };
 }
-function instance$1($$self, $$props, $$invalidate) {
+function instance$2($$self, $$props, $$invalidate) {
   let isError;
   let isDisabled;
   let isReadonly;
@@ -15678,13 +15775,13 @@ function instance$1($$self, $$props, $$invalidate) {
 class TextArea extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;color:var(--color-black, #ccc);padding:var(--textarea-padding-vertical, 0.5rem) var(--textarea-padding-horizontal, 0.5rem);font-size:var(--input-font-size);font-family:var(--font-family);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive--hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)
-  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
+  }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$1, create_fragment$3, safe_not_equal, {
+    }, instance$2, create_fragment$4, safe_not_equal, {
       name: 0,
       value: 1,
       placeholder: 2,
@@ -15888,7 +15985,7 @@ class TextArea extends SvelteElement {
 customElements.define("goa-textarea", TextArea);
 /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.51.0 */
-function create_fragment$2(ctx) {
+function create_fragment$3(ctx) {
   let div;
   return {
     c() {
@@ -15922,17 +16019,17 @@ function create_fragment$2(ctx) {
 class FullScreenNavbarLayout extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
+    this.shadowRoot.innerHTML = `<style>.page{height:100vh;grid-template-columns:auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header"
       "content"
       "nav"
-      "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"
+      "footer";display:grid;place-content:stretch stretch;gap:0 0}@media(min-width: 640px){.page{grid-template-columns:300px auto;grid-template-rows:min-content auto min-content;grid-template-areas:"header header"
         "nav content"
-        "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--color-gray-100)}</style>`;
+        "footer footer"}}.header{grid-area:header}.footer{grid-area:footer}main{grid-area:content;justify-self:stretch;padding:1rem}.nav{grid-area:nav;padding:1rem;background-color:var(--goa-color-greyscale-100)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$2, safe_not_equal, {}, null);
+    }, null, create_fragment$3, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -15946,7 +16043,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 customElements.define("goa-layout-full-nav", FullScreenNavbarLayout);
 /* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.51.0 */
-function create_fragment$1(ctx) {
+function create_fragment$2(ctx) {
   let div;
   return {
     c() {
@@ -15983,7 +16080,7 @@ class OneColumnLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$1, safe_not_equal, {}, null);
+    }, null, create_fragment$2, safe_not_equal, {}, null);
     if (options) {
       if (options.target) {
@@ -15997,7 +16094,7 @@ class OneColumnLayout extends SvelteElement {
 customElements.define("goa-one-column-layout", OneColumnLayout);
 /* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.51.0 */
-function create_fragment(ctx) {
+function create_fragment$1(ctx) {
   let div;
   let header;
   let t0;
@@ -16029,7 +16126,7 @@ function create_fragment(ctx) {
       ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
-      ctx[0] || "var(--layout-nav-column-width)"};
+      ctx[0] || "256px"};
   `);
     },
@@ -16051,7 +16148,7 @@ function create_fragment(ctx) {
       ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
-      ctx[0] || "var(--layout-nav-column-width)"};
+      ctx[0] || "256px"};
   `)) {
         attr(div, "style", div_style_value);
       }
@@ -16067,7 +16164,7 @@ function create_fragment(ctx) {
   };
 }
-function instance($$self, $$props, $$invalidate) {
+function instance$1($$self, $$props, $$invalidate) {
   let {
     navcolumnwidth = ""
   } = $$props;
@@ -16086,12 +16183,12 @@ function instance($$self, $$props, $$invalidate) {
 class TwoColumnLayout extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--color-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
+    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.page{min-height:100vh;display:flex;flex-direction:column;position:relative}.content{flex:1 1 auto;position:relative;display:flex;flex-direction:column;gap:2rem}.header,.footer{flex:0 0 auto}main{flex:1 1 auto;padding:0 1rem}.nav{padding:0 1rem;transition:transform 200ms ease-in-out;background-color:var(--goa-color-greyscale-white)}.nav>*{display:block;padding:0.5rem 0}@media(min-width: 640px){.page{gap:2rem}.content{display:flex;flex-direction:row;justify-content:center;width:min(var(--max-content-width), 100vw);margin:0 auto}.nav{padding:0 2rem}main{padding-right:2rem}}@media(min-width: 1300px){main{padding-right:4.5rem}}@media(min-width: 640px){.nav{transform:translateX(0);flex:0 0 var(--nav-column-width)}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance, create_fragment, safe_not_equal, {
+    }, instance$1, create_fragment$1, safe_not_equal, {
       navcolumnwidth: 0,
       maxcontentwidth: 1
     }, null);
@@ -16137,32 +16234,538 @@ class TwoColumnLayout extends SvelteElement {
 }
 customElements.define("goa-two-column-layout", TwoColumnLayout);
+/* libs/web-components/src/components/pagination/Pagination.svelte generated by Svelte v3.51.0 */
-const GoAAppHeader = ({
-  heading,
-  url,
-  maxContentWidth,
-  children
-}) => {
-  return jsx("goa-app-header", Object.assign({
-    heading: heading,
-    url: url,
-    maxcontentwidth: maxContentWidth
-  }, {
-    children: children
-  }), void 0);
-};
+function create_if_block(ctx) {
+  let goa_block;
+  let span0;
+  let t1;
+  let input;
+  let t2;
+  let goa_input;
+  let t3;
+  let span1;
+  let t4;
+  let t5;
+  return {
+    c() {
+      goa_block = element("goa-block");
+      span0 = element("span");
+      span0.textContent = "Page";
+      t1 = space();
+      input = element("input");
+      t2 = space();
+      goa_input = element("goa-input");
+      t3 = space();
+      span1 = element("span");
+      t4 = text("of ");
+      t5 = text(
+      /*_pageCount*/
+      ctx[8]);
+      attr(input, "type", "hidden");
+      set_custom_element_data(goa_input, "type", "number");
+      set_custom_element_data(goa_input, "value",
+      /*pagenumber*/
+      ctx[0]);
+      set_custom_element_data(goa_input, "width", "8ch");
+      set_custom_element_data(goa_input, "debounce", "500");
+      set_custom_element_data(goa_input, "min", "1");
+      set_custom_element_data(goa_input, "max",
+      /*_pageCount*/
+      ctx[8]);
+      set_custom_element_data(goa_block, "data-testid", "page-selector");
+      set_custom_element_data(goa_block, "alignment", "center");
+      set_custom_element_data(goa_block, "gap", "s");
+    },
-const GoABadge = ({
-  type,
-  content,
-  icon,
-  testId,
-  mt,
-  mr,
-  mb,
-  ml
-}) => {
+    m(target, anchor) {
+      insert(target, goa_block, anchor);
+      append(goa_block, span0);
+      append(goa_block, t1);
+      append(goa_block, input);
+      /*input_binding*/
+      ctx[12](input);
+      append(goa_block, t2);
+      append(goa_block, goa_input);
+      /*goa_input_binding*/
+      ctx[13](goa_input);
+      append(goa_block, t3);
+      append(goa_block, span1);
+      append(span1, t4);
+      append(span1, t5);
+    },
+    p(ctx, dirty) {
+      if (dirty &
+      /*pagenumber*/
+      1) {
+        set_custom_element_data(goa_input, "value",
+        /*pagenumber*/
+        ctx[0]);
+      }
+      if (dirty &
+      /*_pageCount*/
+      256) {
+        set_custom_element_data(goa_input, "max",
+        /*_pageCount*/
+        ctx[8]);
+      }
+      if (dirty &
+      /*_pageCount*/
+      256) set_data(t5,
+      /*_pageCount*/
+      ctx[8]);
+    },
+    d(detaching) {
+      if (detaching) detach(goa_block);
+      /*input_binding*/
+      ctx[12](null);
+      /*goa_input_binding*/
+      ctx[13](null);
+    }
+  };
+}
+function create_fragment(ctx) {
+  let goa_block1;
+  let div;
+  let t0;
+  let goa_block0;
+  let goa_button0;
+  let t1;
+  let goa_button0_disabled_value;
+  let t2;
+  let goa_button1;
+  let t3;
+  let goa_button1_disabled_value;
+  let mounted;
+  let dispose;
+  let if_block =
+  /*variant*/
+  ctx[1] === "all" && create_if_block(ctx);
+  return {
+    c() {
+      goa_block1 = element("goa-block");
+      div = element("div");
+      if (if_block) if_block.c();
+      t0 = space();
+      goa_block0 = element("goa-block");
+      goa_button0 = element("goa-button");
+      t1 = text("Previous");
+      t2 = space();
+      goa_button1 = element("goa-button");
+      t3 = text("Next");
+      this.c = noop;
+      set_custom_element_data(goa_button0, "type", "tertiary");
+      set_custom_element_data(goa_button0, "leadingicon", "arrow-back");
+      set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value =
+      /*pagenumber*/
+      ctx[0] == 1 ? "true" : "false");
+      set_custom_element_data(goa_button1, "type", "tertiary");
+      set_custom_element_data(goa_button1, "trailingicon", "arrow-forward");
+      set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value =
+      /*pagenumber*/
+      ctx[0] ==
+      /*_pageCount*/
+      ctx[8] ? "true" : "false");
+      set_custom_element_data(goa_block0, "alignment", "center");
+      set_custom_element_data(goa_block0, "gap", "m");
+      set_custom_element_data(goa_block0, "data-testid", "page-links");
+      attr(div, "class", "controls");
+      set_custom_element_data(goa_block1, "id", "root");
+      set_custom_element_data(goa_block1, "ml",
+      /*ml*/
+      ctx[5]);
+      set_custom_element_data(goa_block1, "mr",
+      /*mr*/
+      ctx[3]);
+      set_custom_element_data(goa_block1, "mb",
+      /*mb*/
+      ctx[4]);
+      set_custom_element_data(goa_block1, "mt",
+      /*mt*/
+      ctx[2]);
+    },
+    m(target, anchor) {
+      insert(target, goa_block1, anchor);
+      append(goa_block1, div);
+      if (if_block) if_block.m(div, null);
+      append(div, t0);
+      append(div, goa_block0);
+      append(goa_block0, goa_button0);
+      append(goa_button0, t1);
+      append(goa_block0, t2);
+      append(goa_block0, goa_button1);
+      append(goa_button1, t3);
+      if (!mounted) {
+        dispose = [listen(goa_button0, "click",
+        /*click_handler*/
+        ctx[14]), listen(goa_button1, "click",
+        /*click_handler_1*/
+        ctx[15])];
+        mounted = true;
+      }
+    },
+    p(ctx, [dirty]) {
+      if (
+      /*variant*/
+      ctx[1] === "all") {
+        if (if_block) {
+          if_block.p(ctx, dirty);
+        } else {
+          if_block = create_if_block(ctx);
+          if_block.c();
+          if_block.m(div, t0);
+        }
+      } else if (if_block) {
+        if_block.d(1);
+        if_block = null;
+      }
+      if (dirty &
+      /*pagenumber*/
+      1 && goa_button0_disabled_value !== (goa_button0_disabled_value =
+      /*pagenumber*/
+      ctx[0] == 1 ? "true" : "false")) {
+        set_custom_element_data(goa_button0, "disabled", goa_button0_disabled_value);
+      }
+      if (dirty &
+      /*pagenumber, _pageCount*/
+      257 && goa_button1_disabled_value !== (goa_button1_disabled_value =
+      /*pagenumber*/
+      ctx[0] ==
+      /*_pageCount*/
+      ctx[8] ? "true" : "false")) {
+        set_custom_element_data(goa_button1, "disabled", goa_button1_disabled_value);
+      }
+      if (dirty &
+      /*ml*/
+      32) {
+        set_custom_element_data(goa_block1, "ml",
+        /*ml*/
+        ctx[5]);
+      }
+      if (dirty &
+      /*mr*/
+      8) {
+        set_custom_element_data(goa_block1, "mr",
+        /*mr*/
+        ctx[3]);
+      }
+      if (dirty &
+      /*mb*/
+      16) {
+        set_custom_element_data(goa_block1, "mb",
+        /*mb*/
+        ctx[4]);
+      }
+      if (dirty &
+      /*mt*/
+      4) {
+        set_custom_element_data(goa_block1, "mt",
+        /*mt*/
+        ctx[2]);
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching) detach(goa_block1);
+      if (if_block) if_block.d();
+      mounted = false;
+      run_all(dispose);
+    }
+  };
+}
+function instance($$self, $$props, $$invalidate) {
+  let _pageCount;
+  const [Variants, validateVariant] = typeValidator("Pagination variant", ["all", "links-only"]);
+  let {
+    pagenumber
+  } = $$props;
+  let {
+    itemcount
+  } = $$props;
+  let {
+    perpagecount = 10
+  } = $$props;
+  let {
+    variant = "all"
+  } = $$props;
+  let {
+    mt = null
+  } = $$props;
+  let {
+    mr = null
+  } = $$props;
+  let {
+    mb = "m"
+  } = $$props;
+  let {
+    ml = null
+  } = $$props; // private
+  let inputEl = null;
+  let hiddenEl = null; // needed to allow the inputEl's event to be cancelled
+  // hooks
+  onMount(async () => {
+    await tick();
+    validateRequired("GoAPagination", {
+      itemcount,
+      pagenumber
+    });
+    validateVariant(variant); // prevent event propagation if value is non-numeric
+    // (input[type=number] returns blank for non-numeric numbers)
+    inputEl && inputEl.addEventListener("_change", e => {
+      const page = Number.parseInt(e.detail.value);
+      e.stopPropagation();
+      if (isNaN(page)) {
+        return;
+      }
+      hiddenEl.dispatchEvent(new CustomEvent("_change", {
+        composed: true,
+        bubbles: true,
+        detail: {
+          page
+        }
+      }));
+    });
+  }); // functions
+  function goto(e, offset) {
+    const newPage = Number.parseInt(pagenumber + "") + offset;
+    if (newPage > 0 && newPage <= _pageCount) {
+      e.target.dispatchEvent(new CustomEvent("_change", {
+        composed: true,
+        bubbles: true,
+        detail: {
+          page: newPage
+        }
+      }));
+    }
+    e.preventDefault();
+  }
+  function input_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      hiddenEl = $$value;
+      $$invalidate(7, hiddenEl);
+    });
+  }
+  function goa_input_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      inputEl = $$value;
+      $$invalidate(6, inputEl);
+    });
+  }
+  const click_handler = e => goto(e, -1);
+  const click_handler_1 = e => goto(e, 1);
+  $$self.$$set = $$props => {
+    if ('pagenumber' in $$props) $$invalidate(0, pagenumber = $$props.pagenumber);
+    if ('itemcount' in $$props) $$invalidate(10, itemcount = $$props.itemcount);
+    if ('perpagecount' in $$props) $$invalidate(11, perpagecount = $$props.perpagecount);
+    if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
+    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*itemcount, perpagecount*/
+    3072) {
+      // reactive
+      $$invalidate(8, _pageCount = Math.ceil(itemcount / perpagecount));
+    }
+  };
+  return [pagenumber, variant, mt, mr, mb, ml, inputEl, hiddenEl, _pageCount, goto, itemcount, perpagecount, input_binding, goa_input_binding, click_handler, click_handler_1];
+}
+class Pagination extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>span{white-space:nowrap}.controls{display:flex;gap:1rem;flex-direction:column;align-items:center;width:100%}@media(min-width: 480px){.controls{flex-direction:row;justify-content:space-between}}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance, create_fragment, safe_not_equal, {
+      pagenumber: 0,
+      itemcount: 10,
+      perpagecount: 11,
+      variant: 1,
+      mt: 2,
+      mr: 3,
+      mb: 4,
+      ml: 5
+    }, null);
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+  static get observedAttributes() {
+    return ["pagenumber", "itemcount", "perpagecount", "variant", "mt", "mr", "mb", "ml"];
+  }
+  get pagenumber() {
+    return this.$$.ctx[0];
+  }
+  set pagenumber(pagenumber) {
+    this.$$set({
+      pagenumber
+    });
+    flush();
+  }
+  get itemcount() {
+    return this.$$.ctx[10];
+  }
+  set itemcount(itemcount) {
+    this.$$set({
+      itemcount
+    });
+    flush();
+  }
+  get perpagecount() {
+    return this.$$.ctx[11];
+  }
+  set perpagecount(perpagecount) {
+    this.$$set({
+      perpagecount
+    });
+    flush();
+  }
+  get variant() {
+    return this.$$.ctx[1];
+  }
+  set variant(variant) {
+    this.$$set({
+      variant
+    });
+    flush();
+  }
+  get mt() {
+    return this.$$.ctx[2];
+  }
+  set mt(mt) {
+    this.$$set({
+      mt
+    });
+    flush();
+  }
+  get mr() {
+    return this.$$.ctx[3];
+  }
+  set mr(mr) {
+    this.$$set({
+      mr
+    });
+    flush();
+  }
+  get mb() {
+    return this.$$.ctx[4];
+  }
+  set mb(mb) {
+    this.$$set({
+      mb
+    });
+    flush();
+  }
+  get ml() {
+    return this.$$.ctx[5];
+  }
+  set ml(ml) {
+    this.$$set({
+      ml
+    });
+    flush();
+  }
+}
+customElements.define("goa-pagination", Pagination);
+const GoAAppHeader = ({
+  heading,
+  url,
+  maxContentWidth,
+  children
+}) => {
+  return jsx("goa-app-header", Object.assign({
+    heading: heading,
+    url: url,
+    maxcontentwidth: maxContentWidth
+  }, {
+    children: children
+  }), void 0);
+};
+const GoABadge = ({
+  type,
+  content,
+  icon,
+  testId,
+  mt,
+  mr,
+  mb,
+  ml
+}) => {
   return jsx("goa-badge", {
     type: type,
     content: content,
@@ -16817,6 +17420,7 @@ function __rest(s, e) {
 const GoAInput = ({
   id,
+  debounce,
   name,
   type,
   autoCapitalize,
@@ -16875,6 +17479,7 @@ const GoAInput = ({
   }, [ref, onChange, onTrailingIconClick]);
   return jsxs("goa-input", Object.assign({
     ref: ref,
+    debounce: debounce,
     focused: focused,
     type: type,
     name: name,
@@ -17234,6 +17839,40 @@ const GoARadioGroup = ({
   }), void 0);
 };
+function GoAPagination(props) {
+  const ref = useRef();
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const changeListener = e => {
+      const {
+        page
+      } = e.detail;
+      props.onChange(page);
+    };
+    current.addEventListener("_change", changeListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+    };
+  }, [ref, props.onChange]);
+  return jsx("goa-pagination", {
+    ref: ref,
+    itemcount: props.itemCount,
+    perpagecount: props.perPageCount,
+    pagenumber: props.pageNumber,
+    variant: props.variant,
+    mt: props.mt,
+    mb: props.mb,
+    ml: props.ml,
+    mr: props.mr
+  }, void 0);
+}
 const GoASkeleton = ({
   maxWidth,
   size,
@@ -17282,7 +17921,11 @@ const GoASpinner = ({
 function GoATable(props) {
   return jsx("goa-table", Object.assign({
     width: props.width,
-    stickyheader: false
+    stickyheader: false,
+    mt: props.mt,
+    mb: props.mb,
+    ml: props.ml,
+    mr: props.mr
   }, {
     children: jsx("template", {
       children: jsx("table", {
@@ -17372,4 +18015,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };