@abgov/react-components 4.0.0-alpha.33 → 4.0.0-alpha.36

package/react-components.esm.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
+import { format } from 'date-fns';
 
 function noop() {}
 
@@ -1453,7 +1454,7 @@ function create_else_block$3(ctx) {
     }
 
   };
-} // (41:2) {#if showIcon}
+} // (40:2) {#if showIcon}
 
 
 function create_if_block_1$b(ctx) {
@@ -1486,7 +1487,7 @@ function create_if_block_1$b(ctx) {
     }
 
   };
-} // (46:2) {#if content}
+} // (45:2) {#if content}
 
 
 function create_if_block$i(ctx) {
@@ -1674,10 +1675,9 @@ function instance$x($$self, $$props, $$invalidate) {
     1) {
       $$invalidate(4, iconType = {
         success: "checkmark-circle",
-        warning: "alert-circle",
+        important: "alert-circle",
         information: "information-circle",
         emergency: "warning",
-        inactive: "information-circle",
         dark: "information-circle",
         midtone: "information-circle",
         light: "information-circle"
@@ -1691,7 +1691,7 @@ function instance$x($$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);margin:0.25rem}.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-warning{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)}.goa-badge.badge-inactive{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
+    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);margin:0.25rem}.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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -2116,7 +2116,7 @@ function instance$w($$self, $$props, $$invalidate) {
   let isButtonDark;
   const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
   const SIZES = ["", "compact"];
-  const VARIANTS = ["", "danger"]; // type check functions
+  const VARIANTS = ["", "destructive"]; // type check functions
 
   function isButtonType(value) {
     return BUTTON_TYPES.includes(value);
@@ -2200,7 +2200,7 @@ 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.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start: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:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background: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: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:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background: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:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      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.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start: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:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background: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: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:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background: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:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.destructive:focus,.primary.destructive:active{background: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:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background: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:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background: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:var(--color-white)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6433,7 +6433,7 @@ function instance$i($$self, $$props, $$invalidate) {
     /*variant, isInverted*/
     544) {
       // private
-      $$invalidate(8, css = `goa-icon-button goa-icon-button--${variant} ${isInverted ? "goa-icon-button--inverted" : ""}`);
+      $$invalidate(8, css = `${variant} ${isInverted ? "inverted" : ""}`);
     }
 
     if ($$self.$$.dirty &
@@ -6459,7 +6459,7 @@ function instance$i($$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)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
+    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;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -6615,7 +6615,7 @@ function create_if_block_5(ctx) {
     }
 
   };
-} // (96:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (102:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_4$1(ctx) {
@@ -6650,7 +6650,7 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (106:4) {#if trailingicon && handlesTrailingIconClick}
+} // (112:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_3$3(ctx) {
@@ -6660,10 +6660,9 @@ function create_if_block_3$3(ctx) {
   return {
     c() {
       goa_icon_button = element("goa-icon-button");
-      set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
       set_custom_element_data(goa_icon_button, "disabled",
       /*isDisabled*/
-      ctx[13]);
+      ctx[16]);
       set_custom_element_data(goa_icon_button, "variant", "nocolor");
       set_custom_element_data(goa_icon_button, "size", "medium");
       set_custom_element_data(goa_icon_button, "type",
@@ -6684,10 +6683,10 @@ function create_if_block_3$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*isDisabled*/
-      8192) {
+      65536) {
         set_custom_element_data(goa_icon_button, "disabled",
         /*isDisabled*/
-        ctx[13]);
+        ctx[16]);
       }
 
       if (dirty &
@@ -6706,7 +6705,7 @@ function create_if_block_3$3(ctx) {
     }
 
   };
-} // (120:2) {#if showCounter}
+} // (125:2) {#if showCounter}
 
 
 function create_if_block$a(ctx) {
@@ -6715,7 +6714,7 @@ function create_if_block$a(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*maxcharcount*/
-    ctx[10] > 0) return create_if_block_1$6;
+    ctx[13] > 0) return create_if_block_1$6;
     if (
     /*value*/
     ctx[0].length > 0) return create_if_block_2$5;
@@ -6757,7 +6756,7 @@ function create_if_block$a(ctx) {
     }
 
   };
-} // (125:31) 
+} // (130:31) 
 
 
 function create_if_block_2$5(ctx) {
@@ -6791,7 +6790,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (121:4) {#if maxcharcount > 0}
+} // (126:4) {#if maxcharcount > 0}
 
 
 function create_if_block_1$6(ctx) {
@@ -6802,7 +6801,7 @@ function create_if_block_1$6(ctx) {
   let t0;
   let t1_value = `/${
   /*maxcharcount*/
-  ctx[10]}` + "";
+  ctx[13]}` + "";
   let t1;
   return {
     c() {
@@ -6814,7 +6813,7 @@ function create_if_block_1$6(ctx) {
       /*value*/
       ctx[0].length >
       /*maxcharcount*/
-      ctx[10]);
+      ctx[13]);
     },
 
     m(target, anchor) {
@@ -6831,18 +6830,18 @@ function create_if_block_1$6(ctx) {
       ctx[0].length + "")) set_data(t0, t0_value);
       if (dirty &
       /*maxcharcount*/
-      1024 && t1_value !== (t1_value = `/${
+      8192 && t1_value !== (t1_value = `/${
       /*maxcharcount*/
-      ctx[10]}` + "")) set_data(t1, t1_value);
+      ctx[13]}` + "")) set_data(t1, t1_value);
 
       if (dirty &
       /*value, maxcharcount*/
-      1025) {
+      8193) {
         toggle_class(div, "counter-error",
         /*value*/
         ctx[0].length >
         /*maxcharcount*/
-        ctx[10]);
+        ctx[13]);
       }
     },
 
@@ -6875,15 +6874,15 @@ function create_fragment$j(ctx) {
   /*trailingicon*/
   ctx[5] && !
   /*handlesTrailingIconClick*/
-  ctx[16] && create_if_block_4$1(ctx);
+  ctx[19] && create_if_block_4$1(ctx);
   let if_block2 =
   /*trailingicon*/
   ctx[5] &&
   /*handlesTrailingIconClick*/
-  ctx[16] && create_if_block_3$3(ctx);
+  ctx[19] && create_if_block_3$3(ctx);
   let if_block3 =
   /*showCounter*/
-  ctx[12] && create_if_block$a(ctx);
+  ctx[15] && create_if_block$a(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6906,10 +6905,10 @@ function create_fragment$j(ctx) {
       ctx[5] ? "-0.5rem" : "0"}`);
       input.readOnly =
       /*isReadonly*/
-      ctx[15];
+      ctx[18];
       input.disabled =
       /*isDisabled*/
-      ctx[13];
+      ctx[16];
       attr(input, "data-testid",
       /*testid*/
       ctx[7]);
@@ -6925,6 +6924,15 @@ function create_fragment$j(ctx) {
       attr(input, "placeholder",
       /*placeholder*/
       ctx[3]);
+      attr(input, "min",
+      /*min*/
+      ctx[10]);
+      attr(input, "max",
+      /*max*/
+      ctx[11]);
+      attr(input, "step",
+      /*step*/
+      ctx[12]);
       attr(input, "role", "textbox");
       attr(input, "aria-label", input_aria_label_value =
       /*arialabel*/
@@ -6935,7 +6943,7 @@ function create_fragment$j(ctx) {
       goa-input
       ${
       /*isDisabled*/
-      ctx[13] ? "goa-input--disabled" : ""}
+      ctx[16] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -6945,7 +6953,7 @@ function create_fragment$j(ctx) {
     `);
       toggle_class(div0, "error",
       /*isError*/
-      ctx[14]);
+      ctx[17]);
       attr(div1, "class", "container");
       attr(div1, "style", div1_style_value = `
     --width: ${
@@ -6962,7 +6970,7 @@ function create_fragment$j(ctx) {
       append(div0, input);
       /*input_binding*/
 
-      ctx[25](input);
+      ctx[28](input);
       append(div0, t1);
       if (if_block1) if_block1.m(div0, null);
       append(div0, t2);
@@ -6973,9 +6981,9 @@ function create_fragment$j(ctx) {
       if (!mounted) {
         dispose = [listen(input, "keyup",
         /*onKeyUp*/
-        ctx[17]), listen(input, "change",
+        ctx[20]), listen(input, "change",
         /*onKeyUp*/
-        ctx[17])];
+        ctx[20])];
         mounted = true;
       }
     },
@@ -7014,18 +7022,18 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isReadonly*/
-      32768) {
+      262144) {
         input.readOnly =
         /*isReadonly*/
-        ctx[15];
+        ctx[18];
       }
 
       if (dirty &
       /*isDisabled*/
-      8192) {
+      65536) {
         input.disabled =
         /*isDisabled*/
-        ctx[13];
+        ctx[16];
       }
 
       if (dirty &
@@ -7070,6 +7078,30 @@ function create_fragment$j(ctx) {
         ctx[3]);
       }
 
+      if (dirty &
+      /*min*/
+      1024) {
+        attr(input, "min",
+        /*min*/
+        ctx[10]);
+      }
+
+      if (dirty &
+      /*max*/
+      2048) {
+        attr(input, "max",
+        /*max*/
+        ctx[11]);
+      }
+
+      if (dirty &
+      /*step*/
+      4096) {
+        attr(input, "step",
+        /*step*/
+        ctx[12]);
+      }
+
       if (dirty &
       /*arialabel, name*/
       516 && input_aria_label_value !== (input_aria_label_value =
@@ -7084,7 +7116,7 @@ function create_fragment$j(ctx) {
       /*trailingicon*/
       ctx[5] && !
       /*handlesTrailingIconClick*/
-      ctx[16]) {
+      ctx[19]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -7101,7 +7133,7 @@ function create_fragment$j(ctx) {
       /*trailingicon*/
       ctx[5] &&
       /*handlesTrailingIconClick*/
-      ctx[16]) {
+      ctx[19]) {
         if (if_block2) {
           if_block2.p(ctx, dirty);
         } else {
@@ -7116,11 +7148,11 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isDisabled, variant, type*/
-      8258 && div0_class_value !== (div0_class_value = `
+      65602 && div0_class_value !== (div0_class_value = `
       goa-input
       ${
       /*isDisabled*/
-      ctx[13] ? "goa-input--disabled" : ""}
+      ctx[16] ? "goa-input--disabled" : ""}
       variant--${
       /*variant*/
       ctx[6]}
@@ -7133,15 +7165,15 @@ function create_fragment$j(ctx) {
 
       if (dirty &
       /*isDisabled, variant, type, isError*/
-      24642) {
+      196674) {
         toggle_class(div0, "error",
         /*isError*/
-        ctx[14]);
+        ctx[17]);
       }
 
       if (
       /*showCounter*/
-      ctx[12]) {
+      ctx[15]) {
         if (if_block3) {
           if_block3.p(ctx, dirty);
         } else {
@@ -7173,7 +7205,7 @@ function create_fragment$j(ctx) {
       if (if_block0) if_block0.d();
       /*input_binding*/
 
-      ctx[25](null);
+      ctx[28](null);
       if (if_block1) if_block1.d();
       if (if_block2) if_block2.d();
       if (if_block3) if_block3.d();
@@ -7240,7 +7272,16 @@ function instance$h($$self, $$props, $$invalidate) {
     width = "30ch"
   } = $$props;
   let {
-    arialabel = ""
+    arialabel = null
+  } = $$props;
+  let {
+    min = null
+  } = $$props;
+  let {
+    max = null
+  } = $$props;
+  let {
+    step = null
   } = $$props;
   let {
     showcounter = "false"
@@ -7266,7 +7307,7 @@ function instance$h($$self, $$props, $$invalidate) {
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
-      $$invalidate(11, inputEl);
+      $$invalidate(14, inputEl);
     });
   }
 
@@ -7278,58 +7319,61 @@ function instance$h($$self, $$props, $$invalidate) {
     if ('leadingicon' in $$props) $$invalidate(4, leadingicon = $$props.leadingicon);
     if ('trailingicon' in $$props) $$invalidate(5, trailingicon = $$props.trailingicon);
     if ('variant' in $$props) $$invalidate(6, variant = $$props.variant);
-    if ('disabled' in $$props) $$invalidate(18, disabled = $$props.disabled);
-    if ('handletrailingiconclick' in $$props) $$invalidate(19, handletrailingiconclick = $$props.handletrailingiconclick);
-    if ('focused' in $$props) $$invalidate(20, focused = $$props.focused);
-    if ('readonly' in $$props) $$invalidate(21, readonly = $$props.readonly);
-    if ('error' in $$props) $$invalidate(22, error = $$props.error);
+    if ('disabled' in $$props) $$invalidate(21, disabled = $$props.disabled);
+    if ('handletrailingiconclick' in $$props) $$invalidate(22, handletrailingiconclick = $$props.handletrailingiconclick);
+    if ('focused' in $$props) $$invalidate(23, focused = $$props.focused);
+    if ('readonly' in $$props) $$invalidate(24, readonly = $$props.readonly);
+    if ('error' in $$props) $$invalidate(25, error = $$props.error);
     if ('testid' in $$props) $$invalidate(7, testid = $$props.testid);
     if ('width' in $$props) $$invalidate(8, width = $$props.width);
     if ('arialabel' in $$props) $$invalidate(9, arialabel = $$props.arialabel);
-    if ('showcounter' in $$props) $$invalidate(23, showcounter = $$props.showcounter);
-    if ('maxcharcount' in $$props) $$invalidate(10, maxcharcount = $$props.maxcharcount);
+    if ('min' in $$props) $$invalidate(10, min = $$props.min);
+    if ('max' in $$props) $$invalidate(11, max = $$props.max);
+    if ('step' in $$props) $$invalidate(12, step = $$props.step);
+    if ('showcounter' in $$props) $$invalidate(26, showcounter = $$props.showcounter);
+    if ('maxcharcount' in $$props) $$invalidate(13, maxcharcount = $$props.maxcharcount);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*handletrailingiconclick*/
-    524288) {
-      $$invalidate(16, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+    4194304) {
+      $$invalidate(19, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
     }
 
     if ($$self.$$.dirty &
     /*focused*/
-    1048576) {
-      $$invalidate(24, isFocused = toBoolean(focused));
+    8388608) {
+      $$invalidate(27, isFocused = toBoolean(focused));
     }
 
     if ($$self.$$.dirty &
     /*readonly*/
-    2097152) {
-      $$invalidate(15, isReadonly = toBoolean(readonly));
+    16777216) {
+      $$invalidate(18, isReadonly = toBoolean(readonly));
     }
 
     if ($$self.$$.dirty &
     /*error*/
-    4194304) {
-      $$invalidate(14, isError = toBoolean(error));
+    33554432) {
+      $$invalidate(17, isError = toBoolean(error));
     }
 
     if ($$self.$$.dirty &
     /*disabled*/
-    262144) {
-      $$invalidate(13, isDisabled = toBoolean(disabled));
+    2097152) {
+      $$invalidate(16, isDisabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty &
     /*showcounter*/
-    8388608) {
-      $$invalidate(12, showCounter = toBoolean(showcounter));
+    67108864) {
+      $$invalidate(15, showCounter = toBoolean(showcounter));
     }
 
     if ($$self.$$.dirty &
     /*isFocused, inputEl*/
-    16779264) {
+    134234112) {
       if (isFocused && inputEl) {
         setTimeout(() => inputEl.focus(), 1);
       }
@@ -7337,7 +7381,7 @@ function instance$h($$self, $$props, $$invalidate) {
 
     if ($$self.$$.dirty &
     /*inputEl, type*/
-    2050) {
+    16386) {
       if (inputEl && type === "search") {
         inputEl.addEventListener("search", e => {
           onKeyUp(e);
@@ -7346,13 +7390,13 @@ function instance$h($$self, $$props, $$invalidate) {
     }
   };
 
-  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
+  return [value, type, name, placeholder, leadingicon, trailingicon, variant, testid, width, arialabel, min, max, step, maxcharcount, inputEl, showCounter, isDisabled, isError, isReadonly, handlesTrailingIconClick, onKeyUp, disabled, handletrailingiconclick, focused, readonly, error, showcounter, isFocused, input_binding];
 }
 
 class Input 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{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);background:white;display:inline-flex;align-items:center;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{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{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[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}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}.counter{position:absolute;padding-top:0.25rem;right:0;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)}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;font-family:var(--font-family)}.container{position:relative;width:100%}@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);background:white;display:inline-flex;align-items:center;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=date],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}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}.counter{position:absolute;padding-top:0.25rem;right:0;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)}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,
@@ -7366,16 +7410,19 @@ class Input extends SvelteElement {
       leadingicon: 4,
       trailingicon: 5,
       variant: 6,
-      disabled: 18,
-      handletrailingiconclick: 19,
-      focused: 20,
-      readonly: 21,
-      error: 22,
+      disabled: 21,
+      handletrailingiconclick: 22,
+      focused: 23,
+      readonly: 24,
+      error: 25,
       testid: 7,
       width: 8,
       arialabel: 9,
-      showcounter: 23,
-      maxcharcount: 10
+      min: 10,
+      max: 11,
+      step: 12,
+      showcounter: 26,
+      maxcharcount: 13
     }, null);
 
     if (options) {
@@ -7391,7 +7438,7 @@ class Input extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "showcounter", "maxcharcount"];
+    return ["type", "name", "value", "placeholder", "leadingicon", "trailingicon", "variant", "disabled", "handletrailingiconclick", "focused", "readonly", "error", "testid", "width", "arialabel", "min", "max", "step", "showcounter", "maxcharcount"];
   }
 
   get type() {
@@ -7472,7 +7519,7 @@ class Input extends SvelteElement {
   }
 
   get disabled() {
-    return this.$$.ctx[18];
+    return this.$$.ctx[21];
   }
 
   set disabled(disabled) {
@@ -7483,7 +7530,7 @@ class Input extends SvelteElement {
   }
 
   get handletrailingiconclick() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[22];
   }
 
   set handletrailingiconclick(handletrailingiconclick) {
@@ -7494,7 +7541,7 @@ class Input extends SvelteElement {
   }
 
   get focused() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[23];
   }
 
   set focused(focused) {
@@ -7505,7 +7552,7 @@ class Input extends SvelteElement {
   }
 
   get readonly() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[24];
   }
 
   set readonly(readonly) {
@@ -7516,7 +7563,7 @@ class Input extends SvelteElement {
   }
 
   get error() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[25];
   }
 
   set error(error) {
@@ -7559,8 +7606,41 @@ class Input extends SvelteElement {
     flush();
   }
 
+  get min() {
+    return this.$$.ctx[10];
+  }
+
+  set min(min) {
+    this.$$set({
+      min
+    });
+    flush();
+  }
+
+  get max() {
+    return this.$$.ctx[11];
+  }
+
+  set max(max) {
+    this.$$set({
+      max
+    });
+    flush();
+  }
+
+  get step() {
+    return this.$$.ctx[12];
+  }
+
+  set step(step) {
+    this.$$set({
+      step
+    });
+    flush();
+  }
+
   get showcounter() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[26];
   }
 
   set showcounter(showcounter) {
@@ -7571,7 +7651,7 @@ class Input extends SvelteElement {
   }
 
   get maxcharcount() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[13];
   }
 
   set maxcharcount(maxcharcount) {
@@ -9877,7 +9957,7 @@ function create_if_block_3(ctx) {
       div1 = element("div");
       div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
       attr(div0, "class", "service-level service-level--live");
-      attr(div1, "data-testid", "level");
+      attr(div1, "data-testid", "type");
       attr(div1, "class", "site-text");
     },
 
@@ -9894,13 +9974,13 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (34:2) {#if ["alpha", "beta"].includes(level)}
+} // (34:2) {#if ["alpha", "beta"].includes(type)}
 
 
 function create_if_block_1$3(ctx) {
   let div0;
   let t0_value = capitalize(
-  /*level*/
+  /*type*/
   ctx[0]) + "";
   let t0;
   let div0_class_value;
@@ -9923,9 +10003,9 @@ function create_if_block_1$3(ctx) {
       a.textContent = "Alberta Government";
       t4 = text(" service\n      ");
       if (if_block) if_block.c();
-      attr(div0, "data-testid", "level");
+      attr(div0, "data-testid", "type");
       attr(div0, "class", div0_class_value = "service-level service-level--" +
-      /*level*/
+      /*type*/
       ctx[0].toLowerCase());
       attr(a, "href", "https://www.alberta.ca/index.aspx");
       attr(div1, "data-testid", "site-text");
@@ -9945,15 +10025,15 @@ function create_if_block_1$3(ctx) {
 
     p(ctx, dirty) {
       if (dirty &
-      /*level*/
+      /*type*/
       1 && t0_value !== (t0_value = capitalize(
-      /*level*/
+      /*type*/
       ctx[0]) + "")) set_data(t0, t0_value);
 
       if (dirty &
-      /*level*/
+      /*type*/
       1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
-      /*level*/
+      /*type*/
       ctx[0].toLowerCase())) {
         attr(div0, "class", div0_class_value);
       }
@@ -10064,13 +10144,13 @@ function create_fragment$c(ctx) {
   let header;
   let t0;
   let show_if = ["alpha", "beta"].includes(
-  /*level*/
+  /*type*/
   ctx[0]);
   let t1;
   let div;
   let t2;
   let if_block0 =
-  /*level*/
+  /*type*/
   ctx[0] === "live" && create_if_block_3();
   let if_block1 = show_if && create_if_block_1$3(ctx);
   let if_block2 =
@@ -10104,7 +10184,7 @@ function create_fragment$c(ctx) {
 
     p(ctx, [dirty]) {
       if (
-      /*level*/
+      /*type*/
       ctx[0] === "live") {
         if (if_block0) ;else {
           if_block0 = create_if_block_3();
@@ -10117,9 +10197,9 @@ function create_fragment$c(ctx) {
       }
 
       if (dirty &
-      /*level*/
+      /*type*/
       1) show_if = ["alpha", "beta"].includes(
-      /*level*/
+      /*type*/
       ctx[0]);
 
       if (show_if) {
@@ -10171,7 +10251,7 @@ function capitalize(val) {
 
 function instance$a($$self, $$props, $$invalidate) {
   let {
-    level
+    type
   } = $$props;
   let {
     version
@@ -10181,24 +10261,24 @@ function instance$a($$self, $$props, $$invalidate) {
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ('level' in $$props) $$invalidate(0, level = $$props.level);
+    if ('type' in $$props) $$invalidate(0, type = $$props.type);
     if ('version' in $$props) $$invalidate(1, version = $$props.version);
     if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
   };
 
-  return [level, version, feedbackurl];
+  return [type, version, feedbackurl];
 }
 
 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.5rem 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-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--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(--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.5rem 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.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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$a, create_fragment$c, safe_not_equal, {
-      level: 0,
+      type: 0,
       version: 1,
       feedbackurl: 2
     }, null);
@@ -10216,16 +10296,16 @@ class MicrositeHeader extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["level", "version", "feedbackurl"];
+    return ["type", "version", "feedbackurl"];
   }
 
-  get level() {
+  get type() {
     return this.$$.ctx[0];
   }
 
-  set level(level) {
+  set type(type) {
     this.$$set({
-      level
+      type
     });
     flush();
   }
@@ -13686,44 +13766,48 @@ const GoABadge = ({
 };
 const GoAInfoBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "information",
-    icon: "information-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
 const GoASuccessBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "success",
-    icon: "checkmark-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
-const GoAWarningBadge = ({
+const GoAImportantBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
-    type: "warning",
-    icon: "warning",
+    type: "important",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
 };
 const GoAEmergencyBadge = ({
   content,
-  testId
+  testId,
+  icon
 }) => {
   return jsx(GoABadge, {
     type: "emergency",
-    icon: "alert-circle",
+    icon: icon,
     content: content,
     testId: testId
   }, void 0);
@@ -13773,6 +13857,9 @@ const GoAInput = ({
   showCounter,
   maxCharCount,
   testId,
+  min,
+  max,
+  step,
   onTrailingIconClick,
   onChange
 }) => {
@@ -13819,6 +13906,9 @@ const GoAInput = ({
     "data-testid": testId,
     value: value,
     width: width,
+    min: min,
+    max: max,
+    step: step,
     showcounter: showCounter,
     maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
@@ -13834,18 +13924,55 @@ const GoAInputPassword = props => {
     type: "password"
   }), void 0);
 };
-const GoAInputDate = props => {
+const GoAInputDate = _a => {
+  var {
+    value,
+    min,
+    max
+  } = _a,
+      props = __rest(_a, ["value", "min", "max"]);
+
+  const _value = typeof value === "string" ? new Date(value) : value;
+
+  const _min = min ? format(new Date(min), "yyyy-MM-dd") : "";
+
+  const _max = max ? format(new Date(max), "yyyy-MM-dd") : "";
+
   return jsx(GoAInput, Object.assign({}, props, {
+    min: _min,
+    max: _max,
+    value: format(_value, "yyyy-MM-dd"),
     type: "date"
   }), void 0);
 };
-const GoAInputTime = props => {
-  return jsx(GoAInput, Object.assign({}, props, {
-    type: "time"
-  }), void 0);
+const GoAInputTime = _a => {
+  var {
+    value
+  } = _a,
+      props = __rest(_a, ["value"]);
+
+  try {
+    const d = typeof value === "string" ? new Date(value) : value;
+    return jsx(GoAInput, Object.assign({}, props, {
+      value: format(d, "hh:mm"),
+      type: "time"
+    }), void 0);
+  } catch (e) {
+    return jsx(GoAInput, Object.assign({}, props, {
+      value: value,
+      type: "time"
+    }), void 0);
+  }
 };
-const GoAInputDateTime = props => {
+const GoAInputDateTime = _a => {
+  var {
+    value
+  } = _a,
+      props = __rest(_a, ["value"]);
+
+  const d = typeof value === "string" ? new Date(value) : value;
   return jsx(GoAInput, Object.assign({}, props, {
+    value: format(d, "yyyy-MM-dd'T'hh:mm"),
     type: "datetime-local"
   }), void 0);
 };
@@ -13886,15 +14013,22 @@ const GoAInputMonth = props => {
     type: "month"
   }), void 0);
 };
-const GoAInputNumber = props => {
+const GoAInputNumber = _a => {
+  var {
+    min,
+    max,
+    value
+  } = _a,
+      props = __rest(_a, ["min", "max", "value"]);
+
   return jsx(GoAInput, Object.assign({}, props, {
-    value: props.value.toString(),
+    min: min === null || min === void 0 ? void 0 : min.toString(),
+    max: max === null || max === void 0 ? void 0 : max.toString(),
+    value: value.toString(),
     type: "number"
   }), void 0);
 };
-const GoAInputRange = _a => {
-  var props = __rest(_a, ["step"]);
-
+const GoAInputRange = props => {
   return jsx(GoAInput, Object.assign({}, props, {
     type: "range"
   }), void 0);
@@ -14285,12 +14419,12 @@ const GoAIconButton = ({
 };
 
 const GoAMicrositeHeader = ({
-  level,
+  type,
   version,
   feedbackUrl
 }) => {
   return jsx("goa-microsite-header", {
-    level: level,
+    type: type,
     version: version,
     feedbackurl: feedbackUrl
   }, void 0);
@@ -14555,4 +14689,4 @@ function GoADivider(props) {
   }, void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea };