@abgov/react-components 4.0.0 → 4.1.0

package/react-components.esm.js

@@ -1353,6 +1353,20 @@ function toBoolean(value) {
 function fromBoolean(value) {
   return value ? "true" : "false";
 }
+
+function typeValidator(message, values, required = false) {
+  const validator = value => {
+    if (!required && !value) {
+      return;
+    }
+
+    if (!values.includes(value)) {
+      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
+    }
+  };
+
+  return [values, validator];
+}
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
 
@@ -1697,12 +1711,12 @@ function create_fragment$D(ctx) {
       div = element("div");
       slot = element("slot");
       this.c = noop;
-      set_style(div, "--alignment", "flex-" +
-      /*alignment*/
+      set_style(div, "--alignment",
+      /*_alignment*/
       ctx[1]);
       set_style(div, "--gap-size",
       /*gap*/
-      ctx[0] === "small" ? "0.5rem" : "1.25rem");
+      ctx[0] === 'relaxed' ? '1rem' : '0.75rem');
     },
 
     m(target, anchor) {
@@ -1712,10 +1726,10 @@ function create_fragment$D(ctx) {
 
     p(ctx, [dirty]) {
       if (dirty &
-      /*alignment*/
+      /*_alignment*/
       2) {
-        set_style(div, "--alignment", "flex-" +
-        /*alignment*/
+        set_style(div, "--alignment",
+        /*_alignment*/
         ctx[1]);
       }
 
@@ -1724,7 +1738,7 @@ function create_fragment$D(ctx) {
       1) {
         set_style(div, "--gap-size",
         /*gap*/
-        ctx[0] === "small" ? "0.5rem" : "1.25rem");
+        ctx[0] === 'relaxed' ? '1rem' : '0.75rem');
       }
     },
 
@@ -1739,32 +1753,52 @@ function create_fragment$D(ctx) {
 }
 
 function instance$y($$self, $$props, $$invalidate) {
+  let _alignment;
+
   let {
-    gap = "medium"
+    alignment = "start"
   } = $$props;
   let {
-    alignment
+    gap = "relaxed"
   } = $$props;
+  const [BUTTON_ALIGNMENTS, validateAlignment] = typeValidator("alignment", ["start", "end", "center"]);
+  const [GAPS, validateGap] = typeValidator("gap", ["relaxed", "compact"]);
+  onMount(() => {
+    validateAlignment(alignment);
+    validateGap(gap);
+  });
 
   $$self.$$set = $$props => {
+    if ('alignment' in $$props) $$invalidate(2, alignment = $$props.alignment);
     if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
-    if ('alignment' in $$props) $$invalidate(1, alignment = $$props.alignment);
   };
 
-  return [gap, alignment];
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*alignment*/
+    4) {
+      $$invalidate(1, _alignment = {
+        start: "flex-start",
+        end: "flex-end",
+        center: "center"
+      }[alignment]);
+    }
+  };
+
+  return [gap, _alignment, alignment];
 }
 
 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);flex-wrap:wrap;gap:var(--gap-size);padding:3px 0}</style>`;
+    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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$y, create_fragment$D, safe_not_equal, {
-      gap: 0,
-      alignment: 1
+      alignment: 2,
+      gap: 0
     }, null);
 
     if (options) {
@@ -1780,27 +1814,27 @@ class ButtonGroup extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["gap", "alignment"];
+    return ["alignment", "gap"];
   }
 
-  get gap() {
-    return this.$$.ctx[0];
+  get alignment() {
+    return this.$$.ctx[2];
   }
 
-  set gap(gap) {
+  set alignment(alignment) {
     this.$$set({
-      gap
+      alignment
     });
     flush();
   }
 
-  get alignment() {
-    return this.$$.ctx[1];
+  get gap() {
+    return this.$$.ctx[0];
   }
 
-  set alignment(alignment) {
+  set gap(gap) {
     this.$$set({
-      alignment
+      gap
     });
     flush();
   }
@@ -1883,7 +1917,7 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (53:2) {#if type === "start"}
+} // (38:2) {#if type === "start"}
 
 
 function create_if_block$g(ctx) {
@@ -1916,7 +1950,7 @@ function create_if_block$g(ctx) {
     }
 
   };
-} // (57:4) {#if leadingicon}
+} // (42:4) {#if leadingicon}
 
 
 function create_if_block_2$6(ctx) {
@@ -1960,7 +1994,7 @@ function create_if_block_2$6(ctx) {
     }
 
   };
-} // (61:4) {#if trailingicon}
+} // (46:4) {#if trailingicon}
 
 
 function create_if_block_1$9(ctx) {
@@ -2143,22 +2177,9 @@ function clickHandler(e) {
 function instance$x($$self, $$props, $$invalidate) {
   let isDisabled;
   let isButtonDark;
-  const BUTTON_TYPES = ["primary", "submit", "secondary", "tertiary", "start"];
-  const SIZES = ["normal", "compact"];
-  const VARIANTS = ["normal", "destructive"]; // type check functions
-
-  function isButtonType(value) {
-    return BUTTON_TYPES.includes(value);
-  }
-
-  function isSize(value) {
-    return SIZES.includes(value);
-  }
-
-  function isVariant(value) {
-    return VARIANTS.includes(value);
-  }
-
+  const [Types, validateType] = typeValidator("Button type", ["primary", "submit", "secondary", "tertiary", "start"], true);
+  const [Sizes, validateSize] = typeValidator("Button size", ["normal", "compact"], true);
+  const [Variants, validateVariant] = typeValidator("Button variant", ["normal", "destructive"], true);
   let {
     type = "primary"
   } = $$props;
@@ -2181,17 +2202,9 @@ function instance$x($$self, $$props, $$invalidate) {
     testid = ""
   } = $$props;
   onMount(() => {
-    if (!isButtonType(type)) {
-      console.error("Invalid button type");
-    }
-
-    if (!isSize(size)) {
-      console.error("Invalid button size");
-    }
-
-    if (!isVariant(variant)) {
-      console.error("Invalid button variant");
-    }
+    validateType(type);
+    validateSize(size);
+    validateVariant(variant);
   });
 
   $$self.$$set = $$props => {
@@ -2225,7 +2238,9 @@ 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>`;
+      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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -4069,7 +4084,7 @@ function create_if_block_3$4(ctx) {
   let div_class_value;
   let if_block =
   /*message*/
-  ctx[0] && create_if_block_4$1(ctx);
+  ctx[0] && create_if_block_4$2(ctx);
   return {
     c() {
       div = element("div");
@@ -4120,7 +4135,7 @@ function create_if_block_3$4(ctx) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
-          if_block = create_if_block_4$1(ctx);
+          if_block = create_if_block_4$2(ctx);
           if_block.c();
           if_block.m(div, null);
         }
@@ -4273,7 +4288,7 @@ function create_if_block_1$6(ctx) {
 } // (41:6) {#if message}
 
 
-function create_if_block_4$1(ctx) {
+function create_if_block_4$2(ctx) {
   let div;
   let t;
   return {
@@ -7711,8 +7726,8 @@ function create_fragment$h(ctx) {
       set_custom_element_data(goa_icon, "inverted",
       /*isInverted*/
       ctx[5]);
-      set_style(button, "--size",
-      /*_size*/
+      set_style(button, "--pading-size",
+      /*_paddingSize*/
       ctx[6]);
       attr(button, "title",
       /*title*/
@@ -7780,10 +7795,10 @@ function create_fragment$h(ctx) {
       }
 
       if (dirty &
-      /*_size*/
+      /*_paddingSize*/
       64) {
-        set_style(button, "--size",
-        /*_size*/
+        set_style(button, "--pading-size",
+        /*_paddingSize*/
         ctx[6]);
       }
 
@@ -7846,7 +7861,7 @@ function instance$f($$self, $$props, $$invalidate) {
   let isDisabled;
   let isInverted;
 
-  let _size;
+  let _paddingSize;
 
   let {
     icon
@@ -7907,21 +7922,21 @@ function instance$f($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*size*/
     2) {
-      $$invalidate(6, _size = {
-        small: "1rem",
-        medium: "1rem",
-        large: "2rem"
+      $$invalidate(6, _paddingSize = {
+        small: "0.25rem",
+        medium: "0.25rem",
+        large: "0.5rem"
       }[size]);
     }
   };
 
-  return [icon, size, theme, title, testId, isInverted, _size, isDisabled, css, variant, disabled, inverted];
+  return [icon, size, theme, title, testId, isInverted, _paddingSize, isDisabled, css, variant, disabled, inverted];
 }
 
 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;padding:0 0.75rem}.color{border-radius:0.5rem;padding:calc(var(--size) / 4);color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.nocolor{border-radius:0.5rem;padding:calc(var(--size) / 4)}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}</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;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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -8398,7 +8413,7 @@ class Icon extends SvelteElement {
 customElements.define("goa-icon", Icon);
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_4(ctx) {
+function create_if_block_4$1(ctx) {
   let div;
   let t;
   return {
@@ -8605,7 +8620,7 @@ function create_fragment$f(ctx) {
   let dispose;
   let if_block0 =
   /*prefix*/
-  ctx[14] && create_if_block_4(ctx);
+  ctx[14] && create_if_block_4$1(ctx);
   let if_block1 =
   /*leadingicon*/
   ctx[5] && create_if_block_3$2(ctx);
@@ -8741,7 +8756,7 @@ function create_fragment$f(ctx) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_4(ctx);
+          if_block0 = create_if_block_4$1(ctx);
           if_block0.c();
           if_block0.m(div0, t0);
         }
@@ -9840,67 +9855,76 @@ customElements.define("goa-microsite-header", MicrositeHeader);
 
 function create_if_block$4(ctx) {
   let goa_focus_trap;
-  let div4;
+  let div5;
   let div0;
   let t0;
-  let div3;
+  let div4;
   let t1;
+  let div3;
   let t2;
-  let div1;
   let t3;
-  let slot0;
+  let div1;
   let t4;
+  let slot0;
+  let t5;
   let div2;
-  let div3_intro;
-  let div3_outro;
-  let div4_style_value;
-  let noscroll_action;
   let div4_intro;
   let div4_outro;
+  let div5_style_value;
+  let noscroll_action;
+  let div5_intro;
+  let div5_outro;
   let current;
   let mounted;
   let dispose;
   let if_block0 =
+  /*calloutvariant*/
+  ctx[3] !== null && create_if_block_4(ctx);
+  let if_block1 =
   /*heading*/
   ctx[0] && create_if_block_3(ctx);
-  let if_block1 =
+  let if_block2 =
   /*isClosable*/
-  ctx[3] && create_if_block_2$1(ctx);
+  ctx[4] && create_if_block_2$1(ctx);
 
   function select_block_type(ctx, dirty) {
     return create_if_block_1$2;
   }
 
   let current_block_type = select_block_type();
-  let if_block2 = current_block_type(ctx);
+  let if_block3 = current_block_type(ctx);
   return {
     c() {
       goa_focus_trap = element("goa-focus-trap");
-      div4 = element("div");
+      div5 = element("div");
       div0 = element("div");
       t0 = space();
-      div3 = element("div");
+      div4 = element("div");
       if (if_block0) if_block0.c();
       t1 = space();
+      div3 = element("div");
       if (if_block1) if_block1.c();
       t2 = space();
-      div1 = element("div");
-      if_block2.c();
+      if (if_block2) if_block2.c();
       t3 = space();
-      slot0 = element("slot");
+      div1 = element("div");
+      if_block3.c();
       t4 = space();
+      slot0 = element("slot");
+      t5 = space();
       div2 = element("div");
       div2.innerHTML = `<slot name="actions"></slot>`;
       attr(div0, "data-testid", "modal-overlay");
       attr(div0, "class", "modal-overlay");
       attr(div1, "data-testid", "modal-content");
       attr(div1, "class", "modal-content");
-      attr(div2, "data-testid", "modal-actions");
       attr(div2, "class", "modal-actions");
-      attr(div3, "class", "modal-pane");
-      attr(div4, "data-testid", "modal");
-      attr(div4, "class", "modal");
-      attr(div4, "style", div4_style_value = "" + ((
+      attr(div2, "data-testid", "modal-actions");
+      attr(div3, "class", "content");
+      attr(div4, "class", "modal-pane");
+      attr(div5, "data-testid", "modal");
+      attr(div5, "class", "modal");
+      attr(div5, "style", div5_style_value = "" + ((
       /*width*/
       ctx[2] && `--width: ${
       /*width*/
@@ -9912,29 +9936,32 @@ function create_if_block$4(ctx) {
 
     m(target, anchor) {
       insert(target, goa_focus_trap, anchor);
-      append(goa_focus_trap, div4);
-      append(div4, div0);
-      append(div4, t0);
+      append(goa_focus_trap, div5);
+      append(div5, div0);
+      append(div5, t0);
+      append(div5, div4);
+      if (if_block0) if_block0.m(div4, null);
+      append(div4, t1);
       append(div4, div3);
-      if (if_block0) if_block0.m(div3, null);
-      append(div3, t1);
       if (if_block1) if_block1.m(div3, null);
       append(div3, t2);
+      if (if_block2) if_block2.m(div3, null);
+      append(div3, t3);
       append(div3, div1);
-      if_block2.m(div1, null);
-      append(div1, t3);
+      if_block3.m(div1, null);
+      append(div1, t4);
       append(div1, slot0);
-      append(div3, t4);
+      append(div3, t5);
       append(div3, div2);
       current = true;
 
       if (!mounted) {
         dispose = [listen(div0, "click",
         /*close*/
-        ctx[6]), action_destroyer(noscroll_action = noscroll.call(null, div4, {
+        ctx[8]), action_destroyer(noscroll_action = noscroll.call(null, div5, {
           enable:
           /*isOpen*/
-          ctx[5]
+          ctx[7]
         }))];
         mounted = true;
       }
@@ -9944,14 +9971,14 @@ function create_if_block$4(ctx) {
       ctx = new_ctx;
 
       if (
-      /*heading*/
-      ctx[0]) {
+      /*calloutvariant*/
+      ctx[3] !== null) {
         if (if_block0) {
           if_block0.p(ctx, dirty);
         } else {
-          if_block0 = create_if_block_3(ctx);
+          if_block0 = create_if_block_4(ctx);
           if_block0.c();
-          if_block0.m(div3, t1);
+          if_block0.m(div4, t1);
         }
       } else if (if_block0) {
         if_block0.d(1);
@@ -9959,12 +9986,12 @@ function create_if_block$4(ctx) {
       }
 
       if (
-      /*isClosable*/
-      ctx[3]) {
+      /*heading*/
+      ctx[0]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
-          if_block1 = create_if_block_2$1(ctx);
+          if_block1 = create_if_block_3(ctx);
           if_block1.c();
           if_block1.m(div3, t2);
         }
@@ -9973,22 +10000,37 @@ function create_if_block$4(ctx) {
         if_block1 = null;
       }
 
+      if (
+      /*isClosable*/
+      ctx[4]) {
+        if (if_block2) {
+          if_block2.p(ctx, dirty);
+        } else {
+          if_block2 = create_if_block_2$1(ctx);
+          if_block2.c();
+          if_block2.m(div3, t3);
+        }
+      } else if (if_block2) {
+        if_block2.d(1);
+        if_block2 = null;
+      }
+
       if (!current || dirty &
       /*width*/
-      4 && div4_style_value !== (div4_style_value = "" + ((
+      4 && div5_style_value !== (div5_style_value = "" + ((
       /*width*/
       ctx[2] && `--width: ${
       /*width*/
       ctx[2]};`) + ";"))) {
-        attr(div4, "style", div4_style_value);
+        attr(div5, "style", div5_style_value);
       }
 
       if (noscroll_action && is_function(noscroll_action.update) && dirty &
       /*isOpen*/
-      32) noscroll_action.update.call(null, {
+      128) noscroll_action.update.call(null, {
         enable:
         /*isOpen*/
-        ctx[5]
+        ctx[7]
       });
 
       if (!current || dirty &
@@ -10003,46 +10045,46 @@ function create_if_block$4(ctx) {
     i(local) {
       if (current) return;
       add_render_callback(() => {
-        if (div3_outro) div3_outro.end(1);
-        div3_intro = create_in_transition(div3, fly, {
+        if (div4_outro) div4_outro.end(1);
+        div4_intro = create_in_transition(div4, fly, {
           duration:
           /*_transitionTime*/
-          ctx[4],
+          ctx[6],
           y: 200
         });
-        div3_intro.start();
+        div4_intro.start();
       });
       add_render_callback(() => {
-        if (div4_outro) div4_outro.end(1);
-        div4_intro = create_in_transition(div4, fade, {
+        if (div5_outro) div5_outro.end(1);
+        div5_intro = create_in_transition(div5, fade, {
           duration:
           /*_transitionTime*/
-          ctx[4]
+          ctx[6]
         });
-        div4_intro.start();
+        div5_intro.start();
       });
       current = true;
     },
 
     o(local) {
-      if (div3_intro) div3_intro.invalidate();
-      div3_outro = create_out_transition(div3, fly, {
+      if (div4_intro) div4_intro.invalidate();
+      div4_outro = create_out_transition(div4, fly, {
         delay:
         /*_transitionTime*/
-        ctx[4],
+        ctx[6],
         duration:
         /*_transitionTime*/
-        ctx[4],
+        ctx[6],
         y: -100
       });
-      if (div4_intro) div4_intro.invalidate();
-      div4_outro = create_out_transition(div4, fade, {
+      if (div5_intro) div5_intro.invalidate();
+      div5_outro = create_out_transition(div5, fade, {
         delay:
         /*_transitionTime*/
-        ctx[4],
+        ctx[6],
         duration:
         /*_transitionTime*/
-        ctx[4]
+        ctx[6]
       });
       current = false;
     },
@@ -10051,15 +10093,75 @@ function create_if_block$4(ctx) {
       if (detaching) detach(goa_focus_trap);
       if (if_block0) if_block0.d();
       if (if_block1) if_block1.d();
-      if_block2.d();
-      if (detaching && div3_outro) div3_outro.end();
+      if (if_block2) if_block2.d();
+      if_block3.d();
       if (detaching && div4_outro) div4_outro.end();
+      if (detaching && div5_outro) div5_outro.end();
       mounted = false;
       run_all(dispose);
     }
 
   };
-} // (53:8) {#if heading}
+} // (65:8) {#if calloutvariant !== null}
+
+
+function create_if_block_4(ctx) {
+  let div;
+  let goa_icon;
+  let goa_icon_inverted_value;
+  let div_class_value;
+  return {
+    c() {
+      div = element("div");
+      goa_icon = element("goa-icon");
+      set_custom_element_data(goa_icon, "type",
+      /*iconType*/
+      ctx[5]);
+      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
+      /*calloutvariant*/
+      ctx[3] === "important" ? "false" : "true");
+      attr(div, "class", div_class_value = "callout-bar " +
+      /*calloutvariant*/
+      ctx[3]);
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+      append(div, goa_icon);
+    },
+
+    p(ctx, dirty) {
+      if (dirty &
+      /*iconType*/
+      32) {
+        set_custom_element_data(goa_icon, "type",
+        /*iconType*/
+        ctx[5]);
+      }
+
+      if (dirty &
+      /*calloutvariant*/
+      8 && goa_icon_inverted_value !== (goa_icon_inverted_value =
+      /*calloutvariant*/
+      ctx[3] === "important" ? "false" : "true")) {
+        set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
+      }
+
+      if (dirty &
+      /*calloutvariant*/
+      8 && div_class_value !== (div_class_value = "callout-bar " +
+      /*calloutvariant*/
+      ctx[3])) {
+        attr(div, "class", div_class_value);
+      }
+    },
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+} // (74:10) {#if heading}
 
 
 function create_if_block_3(ctx) {
@@ -10093,7 +10195,7 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (56:8) {#if isClosable}
+} // (77:10) {#if isClosable}
 
 
 function create_if_block_2$1(ctx) {
@@ -10107,6 +10209,7 @@ function create_if_block_2$1(ctx) {
       goa_icon_button = element("goa-icon-button");
       set_custom_element_data(goa_icon_button, "data-testid", "modal-close-button");
       set_custom_element_data(goa_icon_button, "icon", "close");
+      set_custom_element_data(goa_icon_button, "variant", "nocolor");
       attr(div, "class", "modal-close");
     },
 
@@ -10117,7 +10220,7 @@ function create_if_block_2$1(ctx) {
       if (!mounted) {
         dispose = listen(goa_icon_button, "click",
         /*close*/
-        ctx[6]);
+        ctx[8]);
         mounted = true;
       }
     },
@@ -10131,7 +10234,7 @@ function create_if_block_2$1(ctx) {
     }
 
   };
-} // (67:10) {#if isScrollable}
+} // (89:12) {#if isScrollable}
 
 
 function create_if_block_1$2(ctx) {
@@ -10142,7 +10245,6 @@ function create_if_block_1$2(ctx) {
       goa_scrollable.innerHTML = `<slot></slot>`;
       set_custom_element_data(goa_scrollable, "direction", "vertical");
       set_custom_element_data(goa_scrollable, "height", "50");
-      set_custom_element_data(goa_scrollable, "hpadding", "1.75");
     },
 
     m(target, anchor) {
@@ -10161,7 +10263,7 @@ function create_fragment$d(ctx) {
   let current;
   let if_block =
   /*isOpen*/
-  ctx[5] && create_if_block$4(ctx);
+  ctx[7] && create_if_block$4(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -10178,13 +10280,13 @@ function create_fragment$d(ctx) {
     p(ctx, [dirty]) {
       if (
       /*isOpen*/
-      ctx[5]) {
+      ctx[7]) {
         if (if_block) {
           if_block.p(ctx, dirty);
 
           if (dirty &
           /*isOpen*/
-          32) {
+          128) {
             transition_in(if_block, 1);
           }
         } else {
@@ -10227,6 +10329,8 @@ function instance$b($$self, $$props, $$invalidate) {
 
   let _transitionTime;
 
+  let iconType;
+  const [CALLOUT_VARIANT, validateCalloutVariant] = typeValidator("Callout variant", ["emergency", "important", "information", "success", "event"]);
   let {
     heading = ""
   } = $$props;
@@ -10242,6 +10346,9 @@ function instance$b($$self, $$props, $$invalidate) {
   let {
     width = ""
   } = $$props;
+  let {
+    calloutvariant = null
+  } = $$props;
 
   function close(e) {
     if (!isClosable) {
@@ -10254,51 +10361,63 @@ function instance$b($$self, $$props, $$invalidate) {
     e.stopPropagation();
   }
 
+  onMount(() => {
+    validateCalloutVariant(calloutvariant);
+  });
+
   $$self.$$set = $$props => {
     if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-    if ('closable' in $$props) $$invalidate(7, closable = $$props.closable);
+    if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
     if ('open' in $$props) $$invalidate(1, open = $$props.open);
-    if ('transition' in $$props) $$invalidate(8, transition = $$props.transition);
+    if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
     if ('width' in $$props) $$invalidate(2, width = $$props.width);
+    if ('calloutvariant' in $$props) $$invalidate(3, calloutvariant = $$props.calloutvariant);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*closable*/
-    128) {
-      $$invalidate(3, isClosable = toBoolean(closable));
+    512) {
+      $$invalidate(4, isClosable = toBoolean(closable));
     }
 
     if ($$self.$$.dirty &
     /*open*/
     2) {
-      $$invalidate(5, isOpen = toBoolean(open));
+      $$invalidate(7, isOpen = toBoolean(open));
     }
 
     if ($$self.$$.dirty &
     /*transition*/
-    256) {
-      $$invalidate(4, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+    1024) {
+      $$invalidate(6, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+    }
+
+    if ($$self.$$.dirty &
+    /*calloutvariant*/
+    8) {
+      $$invalidate(5, iconType = calloutvariant === "emergency" ? "warning" : calloutvariant === "important" ? "alert-circle" : calloutvariant === "information" ? "information-circle" : calloutvariant === "success" ? "checkmark-circle" : calloutvariant === "event" ? "calendar" : "");
     }
   };
 
-  return [heading, open, width, isClosable, _transitionTime, isOpen, close, closable, transition];
+  return [heading, open, width, calloutvariant, isClosable, iconType, _transitionTime, isOpen, close, closable, transition];
 }
 
 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}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+    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-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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$b, create_fragment$d, safe_not_equal, {
       heading: 0,
-      closable: 7,
+      closable: 9,
       open: 1,
-      transition: 8,
-      width: 2
+      transition: 10,
+      width: 2,
+      calloutvariant: 3
     }, null);
 
     if (options) {
@@ -10314,7 +10433,7 @@ class Modal extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["heading", "closable", "open", "transition", "width"];
+    return ["heading", "closable", "open", "transition", "width", "calloutvariant"];
   }
 
   get heading() {
@@ -10329,7 +10448,7 @@ class Modal extends SvelteElement {
   }
 
   get closable() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[9];
   }
 
   set closable(closable) {
@@ -10351,7 +10470,7 @@ class Modal extends SvelteElement {
   }
 
   get transition() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[10];
   }
 
   set transition(transition) {
@@ -10372,6 +10491,17 @@ class Modal extends SvelteElement {
     flush();
   }
 
+  get calloutvariant() {
+    return this.$$.ctx[3];
+  }
+
+  set calloutvariant(calloutvariant) {
+    this.$$set({
+      calloutvariant
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-modal", Modal);
@@ -10381,11 +10511,13 @@ function create_if_block$3(ctx) {
   let div3;
   let div0;
   let goa_icon;
+  let goa_icon_inverted_value;
   let t0;
   let div1;
   let t1;
   let div2;
   let goa_icon_button;
+  let goa_icon_button_inverted_value;
   let div3_class_value;
   let div3_transition;
   let current;
@@ -10405,11 +10537,16 @@ function create_if_block$3(ctx) {
       set_custom_element_data(goa_icon, "type",
       /*iconType*/
       ctx[2]);
-      set_custom_element_data(goa_icon, "inverted", "");
+      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
+      /*type*/
+      ctx[0] === "important" ? "false" : "true");
       attr(div0, "class", "icon");
       attr(div1, "class", "content");
       set_custom_element_data(goa_icon_button, "icon", "close");
-      set_custom_element_data(goa_icon_button, "inverted", "");
+      set_custom_element_data(goa_icon_button, "variant", "dark");
+      set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value =
+      /*type*/
+      ctx[0] === "important" ? "false" : "true");
       attr(div2, "class", "close");
       attr(div3, "class", div3_class_value = "notification " +
       /*type*/
@@ -10444,6 +10581,22 @@ function create_if_block$3(ctx) {
         ctx[2]);
       }
 
+      if (!current || dirty &
+      /*type*/
+      1 && goa_icon_inverted_value !== (goa_icon_inverted_value =
+      /*type*/
+      ctx[0] === "important" ? "false" : "true")) {
+        set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
+      }
+
+      if (!current || dirty &
+      /*type*/
+      1 && goa_icon_button_inverted_value !== (goa_icon_button_inverted_value =
+      /*type*/
+      ctx[0] === "important" ? "false" : "true")) {
+        set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value);
+      }
+
       if (!current || dirty &
       /*type*/
       1 && div3_class_value !== (div3_class_value = "notification " +
@@ -10546,9 +10699,20 @@ function create_fragment$c(ctx) {
 function instance$a($$self, $$props, $$invalidate) {
   let iconType;
   let {
-    type
+    type = ""
   } = $$props;
+  const NOTIFICATION_TYPES = ["emergency", "important", "information", "event"]; // type check function
+
+  function isNotificationType(value) {
+    return NOTIFICATION_TYPES.includes(value);
+  }
+
   let show = true;
+  onMount(() => {
+    if (!isNotificationType(type)) {
+      console.error("Invalid notification type");
+    }
+  });
 
   function close() {
     $$invalidate(1, show = false);
@@ -10562,7 +10726,7 @@ function instance$a($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty &
     /*type*/
     1) {
-      $$invalidate(2, iconType = type === "emergency" ? "warning" : type === "caution" ? "alert-circle" : type === "information" ? "information-circle" : "calendar");
+      $$invalidate(2, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
     }
   };
 
@@ -10572,7 +10736,7 @@ function instance$a($$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;align-items:center;gap:1rem;border-radius:3px}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.caution{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;align-self:flex-start}.content{flex:1 1 auto}.close{flex:0 0 auto;align-self:flex-start}</style>`;
+    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>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -13915,10 +14079,12 @@ styleInject(css_248z$1);
 
 const GoAButtonGroup = ({
   alignment,
+  gap,
   children
 }) => {
   return jsx("goa-button-group", Object.assign({
-    alignment: alignment
+    alignment: alignment,
+    gap: gap
   }, {
     children: children
   }), void 0);
@@ -14590,9 +14756,16 @@ const GoAModal = ({
   width,
   actions,
   transition,
+  type,
+  calloutVariant,
   onClose
 }) => {
   const el = useRef(null);
+  useEffect(() => {
+    if (type) {
+      console.warn("GoAModal [type] is deprecated.");
+    }
+  }, [type]);
   useEffect(() => {
     if (!el.current) {
       return;
@@ -14616,7 +14789,8 @@ const GoAModal = ({
     closable: !!onClose,
     scrollable: true,
     width: width,
-    transition: transition
+    transition: transition,
+    calloutVariant: calloutVariant
   }, {
     children: [actions && jsx("div", Object.assign({
       slot: "actions"