@abgov/react-components 4.0.0-alpha.148 → 4.0.0-alpha.149

package/lib/hero-banner/hero-banner.d.ts

@@ -3,6 +3,7 @@ interface WCProps {
     heading: string;
     backgroundurl: string;
     minheight?: string;
+    maxcontentwidth?: string;
 }
 declare global {
     namespace JSX {
@@ -17,6 +18,7 @@ interface Props {
     minHeight?: string;
     testId?: string;
     children?: React.ReactNode;
+    maxContentWidth?: string;
 }
 export declare const GoAHeroBanner: FC<Props>;
 export default GoAHeroBanner;

package/lib/microsite-header/microsite-header.d.ts

@@ -11,12 +11,14 @@ interface WebComponentProps {
     type: ServiceLevel;
     version?: string;
     feedbackurl?: string;
+    maxcontentwidth?: string;
 }
 export interface HeaderProps {
     type: ServiceLevel;
     version?: string;
     feedbackUrl?: string;
     testId?: string;
+    maxContentWidth?: string;
 }
 export declare const GoAMicrositeHeader: FC<HeaderProps>;
 export default GoAMicrositeHeader;

package/lib/notification/notification.d.ts

@@ -3,6 +3,7 @@ export declare type NotificationType = "important" | "information" | "event" | "
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
     type: NotificationType;
+    maxcontentwidth?: string;
 }
 declare global {
     namespace JSX {
@@ -13,9 +14,10 @@ declare global {
 }
 interface Props {
     type?: NotificationType;
+    maxContentWidth?: string;
     children?: React.ReactNode;
     onDismiss?: () => void;
     testId?: string;
 }
-export declare const GoANotification: ({ type, children, testId, onDismiss, }: Props) => JSX.Element;
+export declare const GoANotification: ({ type, maxContentWidth, children, testId, onDismiss, }: Props) => JSX.Element;
 export default GoANotification;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.148",
+  "version": "4.0.0-alpha.149",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1775,7 +1775,7 @@ function instance$J($$self, $$props, $$invalidate) {
 class AppHeader extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    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);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){.app-header{padding:1.5rem 2rem}}@media(min-width: 1024px){.app-header{padding:1.5rem 4.5rem}}.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),
@@ -8737,7 +8737,7 @@ function instance$t($$self, $$props, $$invalidate) {
 class Footer extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    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 2rem}}@media(min-width: 1024px){.content{padding:2rem 4.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),
@@ -10036,6 +10036,7 @@ function create_fragment$q(ctx) {
   let div0;
   let t2;
   let slot1;
+  let goa_page_block_width_value;
   return {
     c() {
       div1 = element("div");
@@ -10053,7 +10054,9 @@ function create_fragment$q(ctx) {
       attr(div0, "class", "goa-hero-banner-content");
       attr(div0, "role", "note");
       attr(slot1, "name", "actions");
-      set_custom_element_data(goa_page_block, "width", "full");
+      set_custom_element_data(goa_page_block, "width", goa_page_block_width_value =
+      /*maxcontentwidth*/
+      ctx[3] || "full");
       attr(div1, "class", "goa-hero");
       attr(div1, "data-testid", "background");
       set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +
@@ -10085,6 +10088,14 @@ function create_fragment$q(ctx) {
       /*heading*/
       ctx[0]);
 
+      if (dirty &
+      /*maxcontentwidth*/
+      8 && goa_page_block_width_value !== (goa_page_block_width_value =
+      /*maxcontentwidth*/
+      ctx[3] || "full")) {
+        set_custom_element_data(goa_page_block, "width", goa_page_block_width_value);
+      }
+
       if (dirty &
       /*backgroundurl*/
       2) {
@@ -10122,14 +10133,18 @@ function instance$o($$self, $$props, $$invalidate) {
   let {
     minheight = "600px"
   } = $$props;
+  let {
+    maxcontentwidth = "100%"
+  } = $$props;
 
   $$self.$$set = $$props => {
     if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
     if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
     if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
+    if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
   };
 
-  return [heading, backgroundurl, minheight];
+  return [heading, backgroundurl, minheight, maxcontentwidth];
 }
 
 class HeroBanner extends SvelteElement {
@@ -10143,7 +10158,8 @@ class HeroBanner extends SvelteElement {
     }, instance$o, create_fragment$q, safe_not_equal, {
       heading: 0,
       backgroundurl: 1,
-      minheight: 2
+      minheight: 2,
+      maxcontentwidth: 3
     }, null);
 
     if (options) {
@@ -10159,7 +10175,7 @@ class HeroBanner extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["heading", "backgroundurl", "minheight"];
+    return ["heading", "backgroundurl", "minheight", "maxcontentwidth"];
   }
 
   get heading() {
@@ -10195,6 +10211,17 @@ class HeroBanner extends SvelteElement {
     flush();
   }
 
+  get maxcontentwidth() {
+    return this.$$.ctx[3];
+  }
+
+  set maxcontentwidth(maxcontentwidth) {
+    this.$$set({
+      maxcontentwidth
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-hero-banner", HeroBanner);
@@ -12460,7 +12487,7 @@ function create_if_block_3$5(ctx) {
     }
 
   };
-} // (29:2) {#if ["alpha", "beta"].includes(type)}
+} // (31:4) {#if ["alpha", "beta"].includes(type)}
 
 
 function create_if_block_1$5(ctx) {
@@ -12487,7 +12514,7 @@ function create_if_block_1$5(ctx) {
       t2 = text("This is a new ");
       a = element("a");
       a.textContent = "Alberta Government";
-      t4 = text(" service\n      ");
+      t4 = text(" service\n        ");
       if (if_block) if_block.c();
       attr(div0, "data-testid", "type");
       attr(div0, "class", div0_class_value = "service-type service-type--" +
@@ -12548,7 +12575,7 @@ function create_if_block_1$5(ctx) {
     }
 
   };
-} // (38:6) {#if feedbackurl}
+} // (40:8) {#if feedbackurl}
 
 
 function create_if_block_2$5(ctx) {
@@ -12590,7 +12617,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (44:2) {#if version}
+} // (46:4) {#if version}
 
 
 function create_if_block$b(ctx) {
@@ -12628,13 +12655,15 @@ function create_if_block$b(ctx) {
 
 function create_fragment$m(ctx) {
   let header;
+  let div1;
   let t0;
   let show_if = ["alpha", "beta"].includes(
   /*type*/
   ctx[0]);
   let t1;
-  let div;
+  let div0;
   let t2;
+  let header_style_value;
   let if_block0 =
   /*type*/
   ctx[0] === "live" && create_if_block_3$5();
@@ -12645,27 +12674,33 @@ function create_fragment$m(ctx) {
   return {
     c() {
       header = element("header");
+      div1 = element("div");
       if (if_block0) if_block0.c();
       t0 = space();
       if (if_block1) if_block1.c();
       t1 = space();
-      div = element("div");
+      div0 = element("div");
       t2 = space();
       if (if_block2) if_block2.c();
       this.c = noop;
-      attr(div, "class", "spacer");
+      attr(div0, "class", "spacer");
+      attr(div1, "class", "content-container");
       attr(header, "class", "goa-official-site-header");
+      attr(header, "style", header_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[3]}`);
     },
 
     m(target, anchor) {
       insert(target, header, anchor);
-      if (if_block0) if_block0.m(header, null);
-      append(header, t0);
-      if (if_block1) if_block1.m(header, null);
-      append(header, t1);
-      append(header, div);
-      append(header, t2);
-      if (if_block2) if_block2.m(header, null);
+      append(header, div1);
+      if (if_block0) if_block0.m(div1, null);
+      append(div1, t0);
+      if (if_block1) if_block1.m(div1, null);
+      append(div1, t1);
+      append(div1, div0);
+      append(div1, t2);
+      if (if_block2) if_block2.m(div1, null);
     },
 
     p(ctx, [dirty]) {
@@ -12675,7 +12710,7 @@ function create_fragment$m(ctx) {
         if (if_block0) ;else {
           if_block0 = create_if_block_3$5();
           if_block0.c();
-          if_block0.m(header, t0);
+          if_block0.m(div1, t0);
         }
       } else if (if_block0) {
         if_block0.d(1);
@@ -12694,7 +12729,7 @@ function create_fragment$m(ctx) {
         } else {
           if_block1 = create_if_block_1$5(ctx);
           if_block1.c();
-          if_block1.m(header, t1);
+          if_block1.m(div1, t1);
         }
       } else if (if_block1) {
         if_block1.d(1);
@@ -12709,12 +12744,20 @@ function create_fragment$m(ctx) {
         } else {
           if_block2 = create_if_block$b(ctx);
           if_block2.c();
-          if_block2.m(header, null);
+          if_block2.m(div1, null);
         }
       } else if (if_block2) {
         if_block2.d(1);
         if_block2 = null;
       }
+
+      if (dirty &
+      /*maxcontentwidth*/
+      8 && header_style_value !== (header_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[3]}`)) {
+        attr(header, "style", header_style_value);
+      }
     },
 
     i: noop,
@@ -12746,6 +12789,9 @@ function instance$k($$self, $$props, $$invalidate) {
   let {
     feedbackurl = ""
   } = $$props;
+  let {
+    maxcontentwidth = "100%"
+  } = $$props;
   onMount(() => {
     setTimeout(() => validateType(type), 1);
   });
@@ -12754,15 +12800,16 @@ function instance$k($$self, $$props, $$invalidate) {
     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);
+    if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
   };
 
-  return [type, version, feedbackurl];
+  return [type, version, feedbackurl, maxcontentwidth];
 }
 
 class MicrositeHeader extends SvelteElement {
   constructor(options) {
     super();
-    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)}.site-text{color:var(--goa-color-text-default);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{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media(min-width: 640px){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}@media(min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.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)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -12770,7 +12817,8 @@ class MicrositeHeader extends SvelteElement {
     }, instance$k, create_fragment$m, safe_not_equal, {
       type: 0,
       version: 1,
-      feedbackurl: 2
+      feedbackurl: 2,
+      maxcontentwidth: 3
     }, null);
 
     if (options) {
@@ -12786,7 +12834,7 @@ class MicrositeHeader extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type", "version", "feedbackurl"];
+    return ["type", "version", "feedbackurl", "maxcontentwidth"];
   }
 
   get type() {
@@ -12822,6 +12870,17 @@ class MicrositeHeader extends SvelteElement {
     flush();
   }
 
+  get maxcontentwidth() {
+    return this.$$.ctx[3];
+  }
+
+  set maxcontentwidth(maxcontentwidth) {
+    this.$$set({
+      maxcontentwidth
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-microsite-header", MicrositeHeader);
@@ -13621,6 +13680,7 @@ customElements.define("goa-modal", Modal);
 /* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
 function create_if_block$9(ctx) {
+  let div4;
   let div3;
   let div0;
   let goa_icon;
@@ -13631,13 +13691,15 @@ function create_if_block$9(ctx) {
   let div2;
   let goa_icon_button;
   let goa_icon_button_inverted_value;
-  let div3_class_value;
-  let div3_transition;
+  let div4_class_value;
+  let div4_style_value;
+  let div4_transition;
   let current;
   let mounted;
   let dispose;
   return {
     c() {
+      div4 = element("div");
       div3 = element("div");
       div0 = element("div");
       goa_icon = element("goa-icon");
@@ -13649,7 +13711,7 @@ function create_if_block$9(ctx) {
       goa_icon_button = element("goa-icon-button");
       set_custom_element_data(goa_icon, "type",
       /*iconType*/
-      ctx[2]);
+      ctx[3]);
       set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
       /*type*/
       ctx[0] === "important" ? "false" : "true");
@@ -13661,13 +13723,18 @@ function create_if_block$9(ctx) {
       /*type*/
       ctx[0] === "important" ? "false" : "true");
       attr(div2, "class", "close");
-      attr(div3, "class", div3_class_value = "notification " +
+      attr(div3, "class", "content-container");
+      attr(div4, "class", div4_class_value = "notification " +
       /*type*/
       ctx[0]);
+      attr(div4, "style", div4_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[1]}`);
     },
 
     m(target, anchor) {
-      insert(target, div3, anchor);
+      insert(target, div4, anchor);
+      append(div4, div3);
       append(div3, div0);
       append(div0, goa_icon);
       append(div3, t0);
@@ -13680,7 +13747,7 @@ function create_if_block$9(ctx) {
       if (!mounted) {
         dispose = listen(goa_icon_button, "click",
         /*close*/
-        ctx[3]);
+        ctx[4]);
         mounted = true;
       }
     },
@@ -13688,10 +13755,10 @@ function create_if_block$9(ctx) {
     p(ctx, dirty) {
       if (!current || dirty &
       /*iconType*/
-      4) {
+      8) {
         set_custom_element_data(goa_icon, "type",
         /*iconType*/
-        ctx[2]);
+        ctx[3]);
       }
 
       if (!current || dirty &
@@ -13712,31 +13779,39 @@ function create_if_block$9(ctx) {
 
       if (!current || dirty &
       /*type*/
-      1 && div3_class_value !== (div3_class_value = "notification " +
+      1 && div4_class_value !== (div4_class_value = "notification " +
       /*type*/
       ctx[0])) {
-        attr(div3, "class", div3_class_value);
+        attr(div4, "class", div4_class_value);
+      }
+
+      if (!current || dirty &
+      /*maxcontentwidth*/
+      2 && div4_style_value !== (div4_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[1]}`)) {
+        attr(div4, "style", div4_style_value);
       }
     },
 
     i(local) {
       if (current) return;
       add_render_callback(() => {
-        if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, true);
-        div3_transition.run(1);
+        if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, true);
+        div4_transition.run(1);
       });
       current = true;
     },
 
     o(local) {
-      if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, false);
-      div3_transition.run(0);
+      if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, false);
+      div4_transition.run(0);
       current = false;
     },
 
     d(detaching) {
-      if (detaching) detach(div3);
-      if (detaching && div3_transition) div3_transition.end();
+      if (detaching) detach(div4);
+      if (detaching && div4_transition) div4_transition.end();
       mounted = false;
       dispose();
     }
@@ -13749,7 +13824,7 @@ function create_fragment$k(ctx) {
   let current;
   let if_block =
   /*show*/
-  ctx[1] && create_if_block$9(ctx);
+  ctx[2] && create_if_block$9(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -13766,13 +13841,13 @@ function create_fragment$k(ctx) {
     p(ctx, [dirty]) {
       if (
       /*show*/
-      ctx[1]) {
+      ctx[2]) {
         if (if_block) {
           if_block.p(ctx, dirty);
 
           if (dirty &
           /*show*/
-          2) {
+          4) {
             transition_in(if_block, 1);
           }
         } else {
@@ -13815,13 +13890,16 @@ function instance$i($$self, $$props, $$invalidate) {
   let {
     type = ""
   } = $$props;
+  let {
+    maxcontentwidth = "100%"
+  } = $$props;
   let show = true;
   onMount(() => {
     setTimeout(() => validateType(type), 1);
   });
 
   function close(e) {
-    $$invalidate(1, show = false);
+    $$invalidate(2, show = false);
     e.target.dispatchEvent(new CustomEvent("_dismiss", {
       composed: true
     }));
@@ -13830,29 +13908,31 @@ function instance$i($$self, $$props, $$invalidate) {
 
   $$self.$$set = $$props => {
     if ('type' in $$props) $$invalidate(0, type = $$props.type);
+    if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*type*/
     1) {
-      $$invalidate(2, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
+      $$invalidate(3, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
     }
   };
 
-  return [type, show, iconType, close];
+  return [type, maxcontentwidth, show, iconType, close];
 }
 
 class Notification extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem 1rem;display:flex}@media(min-width: 640px){.notification{padding:1.5rem 2rem}}@media(min-width: 1024px){.notification{padding:1.5rem 4.5rem}}.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-container{display:flex;flex-direction:row;flex:1 1 auto;gap:1rem;margin:0 auto;max-width:min(var(--max-content-width), 100%)}.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$i, create_fragment$k, safe_not_equal, {
-      type: 0
+      type: 0,
+      maxcontentwidth: 1
     }, null);
 
     if (options) {
@@ -13868,7 +13948,7 @@ class Notification extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["type"];
+    return ["type", "maxcontentwidth"];
   }
 
   get type() {
@@ -13882,6 +13962,17 @@ class Notification extends SvelteElement {
     flush();
   }
 
+  get maxcontentwidth() {
+    return this.$$.ctx[1];
+  }
+
+  set maxcontentwidth(maxcontentwidth) {
+    this.$$set({
+      maxcontentwidth
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-notification", Notification);
@@ -13969,7 +14060,7 @@ function instance$h($$self, $$props, $$invalidate) {
 class PageBlock extends SvelteElement {
   constructor(options) {
     super();
-    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>`;
+    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 1rem}@media(min-width: 640px){.page-content{padding:0 2rem}}@media(min-width: 1024px){.page-content{padding:0 4.5rem}}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -22469,6 +22560,7 @@ const GoAHeroBanner = ({
   heading,
   backgroundUrl,
   minHeight,
+  maxContentWidth,
   children,
   testId
 }) => {
@@ -22476,6 +22568,7 @@ const GoAHeroBanner = ({
     heading: heading,
     backgroundurl: backgroundUrl,
     minheight: minHeight,
+    maxcontentwidth: maxContentWidth,
     "data-testid": testId
   }, {
     children: children
@@ -22853,13 +22946,15 @@ const GoAMicrositeHeader = ({
   type,
   version,
   feedbackUrl,
+  maxContentWidth,
   testId
 }) => {
   return jsx("goa-microsite-header", {
     type: type,
     version: version,
     feedbackurl: feedbackUrl,
-    "data-testid": testId
+    "data-testid": testId,
+    maxcontentwidth: maxContentWidth
   }, void 0);
 };
 
@@ -22921,6 +23016,7 @@ const GoAModal = ({
 
 const GoANotification = ({
   type: _type = "information",
+  maxContentWidth,
   children,
   testId,
   onDismiss
@@ -22945,7 +23041,8 @@ const GoANotification = ({
   return jsx("goa-notification", Object.assign({
     ref: el,
     type: _type,
-    "data-testid": testId
+    "data-testid": testId,
+    maxcontentwidth: maxContentWidth
   }, {
     children: children
   }), void 0);

package/react-components.umd.js

@@ -1816,7 +1816,7 @@
 	class AppHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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);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){.app-header{padding:1.5rem 2rem}}@media(min-width: 1024px){.app-header{padding:1.5rem 4.5rem}}.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),
@@ -8782,7 +8782,7 @@
 	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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 2rem}}@media(min-width: 1024px){.content{padding:2rem 4.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),
@@ -10082,6 +10082,7 @@
 	  let div0;
 	  let t2;
 	  let slot1;
+	  let goa_page_block_width_value;
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -10099,7 +10100,9 @@
 	      attr(div0, "class", "goa-hero-banner-content");
 	      attr(div0, "role", "note");
 	      attr(slot1, "name", "actions");
-	      set_custom_element_data(goa_page_block, "width", "full");
+	      set_custom_element_data(goa_page_block, "width", goa_page_block_width_value =
+	      /*maxcontentwidth*/
+	      ctx[3] || "full");
 	      attr(div1, "class", "goa-hero");
 	      attr(div1, "data-testid", "background");
 	      set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +
@@ -10131,6 +10134,14 @@
 	      /*heading*/
 	      ctx[0]);
 
+	      if (dirty &
+	      /*maxcontentwidth*/
+	      8 && goa_page_block_width_value !== (goa_page_block_width_value =
+	      /*maxcontentwidth*/
+	      ctx[3] || "full")) {
+	        set_custom_element_data(goa_page_block, "width", goa_page_block_width_value);
+	      }
+
 	      if (dirty &
 	      /*backgroundurl*/
 	      2) {
@@ -10168,14 +10179,18 @@
 	  let {
 	    minheight = "600px"
 	  } = $$props;
+	  let {
+	    maxcontentwidth = "100%"
+	  } = $$props;
 
 	  $$self.$$set = $$props => {
 	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
 	    if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
 	    if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
+	    if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
 	  };
 
-	  return [heading, backgroundurl, minheight];
+	  return [heading, backgroundurl, minheight, maxcontentwidth];
 	}
 
 	class HeroBanner extends SvelteElement {
@@ -10189,7 +10204,8 @@
 	    }, instance$o, create_fragment$q, safe_not_equal, {
 	      heading: 0,
 	      backgroundurl: 1,
-	      minheight: 2
+	      minheight: 2,
+	      maxcontentwidth: 3
 	    }, null);
 
 	    if (options) {
@@ -10205,7 +10221,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["heading", "backgroundurl", "minheight"];
+	    return ["heading", "backgroundurl", "minheight", "maxcontentwidth"];
 	  }
 
 	  get heading() {
@@ -10241,6 +10257,17 @@
 	    flush();
 	  }
 
+	  get maxcontentwidth() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set maxcontentwidth(maxcontentwidth) {
+	    this.$$set({
+	      maxcontentwidth
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-hero-banner", HeroBanner);
@@ -12506,7 +12533,7 @@
 	    }
 
 	  };
-	} // (29:2) {#if ["alpha", "beta"].includes(type)}
+	} // (31:4) {#if ["alpha", "beta"].includes(type)}
 
 
 	function create_if_block_1$5(ctx) {
@@ -12533,7 +12560,7 @@
 	      t2 = text("This is a new ");
 	      a = element("a");
 	      a.textContent = "Alberta Government";
-	      t4 = text(" service\n      ");
+	      t4 = text(" service\n        ");
 	      if (if_block) if_block.c();
 	      attr(div0, "data-testid", "type");
 	      attr(div0, "class", div0_class_value = "service-type service-type--" +
@@ -12594,7 +12621,7 @@
 	    }
 
 	  };
-	} // (38:6) {#if feedbackurl}
+	} // (40:8) {#if feedbackurl}
 
 
 	function create_if_block_2$5(ctx) {
@@ -12636,7 +12663,7 @@
 	    }
 
 	  };
-	} // (44:2) {#if version}
+	} // (46:4) {#if version}
 
 
 	function create_if_block$b(ctx) {
@@ -12674,13 +12701,15 @@
 
 	function create_fragment$m(ctx) {
 	  let header;
+	  let div1;
 	  let t0;
 	  let show_if = ["alpha", "beta"].includes(
 	  /*type*/
 	  ctx[0]);
 	  let t1;
-	  let div;
+	  let div0;
 	  let t2;
+	  let header_style_value;
 	  let if_block0 =
 	  /*type*/
 	  ctx[0] === "live" && create_if_block_3$5();
@@ -12691,27 +12720,33 @@
 	  return {
 	    c() {
 	      header = element("header");
+	      div1 = element("div");
 	      if (if_block0) if_block0.c();
 	      t0 = space();
 	      if (if_block1) if_block1.c();
 	      t1 = space();
-	      div = element("div");
+	      div0 = element("div");
 	      t2 = space();
 	      if (if_block2) if_block2.c();
 	      this.c = noop;
-	      attr(div, "class", "spacer");
+	      attr(div0, "class", "spacer");
+	      attr(div1, "class", "content-container");
 	      attr(header, "class", "goa-official-site-header");
+	      attr(header, "style", header_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[3]}`);
 	    },
 
 	    m(target, anchor) {
 	      insert(target, header, anchor);
-	      if (if_block0) if_block0.m(header, null);
-	      append(header, t0);
-	      if (if_block1) if_block1.m(header, null);
-	      append(header, t1);
-	      append(header, div);
-	      append(header, t2);
-	      if (if_block2) if_block2.m(header, null);
+	      append(header, div1);
+	      if (if_block0) if_block0.m(div1, null);
+	      append(div1, t0);
+	      if (if_block1) if_block1.m(div1, null);
+	      append(div1, t1);
+	      append(div1, div0);
+	      append(div1, t2);
+	      if (if_block2) if_block2.m(div1, null);
 	    },
 
 	    p(ctx, [dirty]) {
@@ -12721,7 +12756,7 @@
 	        if (if_block0) ;else {
 	          if_block0 = create_if_block_3$5();
 	          if_block0.c();
-	          if_block0.m(header, t0);
+	          if_block0.m(div1, t0);
 	        }
 	      } else if (if_block0) {
 	        if_block0.d(1);
@@ -12740,7 +12775,7 @@
 	        } else {
 	          if_block1 = create_if_block_1$5(ctx);
 	          if_block1.c();
-	          if_block1.m(header, t1);
+	          if_block1.m(div1, t1);
 	        }
 	      } else if (if_block1) {
 	        if_block1.d(1);
@@ -12755,12 +12790,20 @@
 	        } else {
 	          if_block2 = create_if_block$b(ctx);
 	          if_block2.c();
-	          if_block2.m(header, null);
+	          if_block2.m(div1, null);
 	        }
 	      } else if (if_block2) {
 	        if_block2.d(1);
 	        if_block2 = null;
 	      }
+
+	      if (dirty &
+	      /*maxcontentwidth*/
+	      8 && header_style_value !== (header_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[3]}`)) {
+	        attr(header, "style", header_style_value);
+	      }
 	    },
 
 	    i: noop,
@@ -12792,6 +12835,9 @@
 	  let {
 	    feedbackurl = ""
 	  } = $$props;
+	  let {
+	    maxcontentwidth = "100%"
+	  } = $$props;
 	  onMount(() => {
 	    setTimeout(() => validateType(type), 1);
 	  });
@@ -12800,15 +12846,16 @@
 	    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);
+	    if ('maxcontentwidth' in $$props) $$invalidate(3, maxcontentwidth = $$props.maxcontentwidth);
 	  };
 
-	  return [type, version, feedbackurl];
+	  return [type, version, feedbackurl, maxcontentwidth];
 	}
 
 	class MicrositeHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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)}.site-text{color:var(--goa-color-text-default);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{font-size:var(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);padding:0.5rem 1rem}.content-container{display:flex;align-items:start;justify-content:space-between;max-width:min(var(--max-content-width), 100%);margin:0 auto}@media(min-width: 640px){.goa-official-site-header{padding:0.25rem 2rem}.content-container{align-items:center}}@media(min-width: 1024px){.goa-official-site-header{padding:0.25rem 4.5rem}}.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)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -12816,7 +12863,8 @@
 	    }, instance$k, create_fragment$m, safe_not_equal, {
 	      type: 0,
 	      version: 1,
-	      feedbackurl: 2
+	      feedbackurl: 2,
+	      maxcontentwidth: 3
 	    }, null);
 
 	    if (options) {
@@ -12832,7 +12880,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type", "version", "feedbackurl"];
+	    return ["type", "version", "feedbackurl", "maxcontentwidth"];
 	  }
 
 	  get type() {
@@ -12868,6 +12916,17 @@
 	    flush();
 	  }
 
+	  get maxcontentwidth() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set maxcontentwidth(maxcontentwidth) {
+	    this.$$set({
+	      maxcontentwidth
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-microsite-header", MicrositeHeader);
@@ -13668,6 +13727,7 @@
 	/* libs/web-components/src/components/notification/Notification.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block$9(ctx) {
+	  let div4;
 	  let div3;
 	  let div0;
 	  let goa_icon;
@@ -13678,13 +13738,15 @@
 	  let div2;
 	  let goa_icon_button;
 	  let goa_icon_button_inverted_value;
-	  let div3_class_value;
-	  let div3_transition;
+	  let div4_class_value;
+	  let div4_style_value;
+	  let div4_transition;
 	  let current;
 	  let mounted;
 	  let dispose;
 	  return {
 	    c() {
+	      div4 = element("div");
 	      div3 = element("div");
 	      div0 = element("div");
 	      goa_icon = element("goa-icon");
@@ -13696,7 +13758,7 @@
 	      goa_icon_button = element("goa-icon-button");
 	      set_custom_element_data(goa_icon, "type",
 	      /*iconType*/
-	      ctx[2]);
+	      ctx[3]);
 	      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
 	      /*type*/
 	      ctx[0] === "important" ? "false" : "true");
@@ -13708,13 +13770,18 @@
 	      /*type*/
 	      ctx[0] === "important" ? "false" : "true");
 	      attr(div2, "class", "close");
-	      attr(div3, "class", div3_class_value = "notification " +
+	      attr(div3, "class", "content-container");
+	      attr(div4, "class", div4_class_value = "notification " +
 	      /*type*/
 	      ctx[0]);
+	      attr(div4, "style", div4_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[1]}`);
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div3, anchor);
+	      insert(target, div4, anchor);
+	      append(div4, div3);
 	      append(div3, div0);
 	      append(div0, goa_icon);
 	      append(div3, t0);
@@ -13727,7 +13794,7 @@
 	      if (!mounted) {
 	        dispose = listen(goa_icon_button, "click",
 	        /*close*/
-	        ctx[3]);
+	        ctx[4]);
 	        mounted = true;
 	      }
 	    },
@@ -13735,10 +13802,10 @@
 	    p(ctx, dirty) {
 	      if (!current || dirty &
 	      /*iconType*/
-	      4) {
+	      8) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*iconType*/
-	        ctx[2]);
+	        ctx[3]);
 	      }
 
 	      if (!current || dirty &
@@ -13759,31 +13826,39 @@
 
 	      if (!current || dirty &
 	      /*type*/
-	      1 && div3_class_value !== (div3_class_value = "notification " +
+	      1 && div4_class_value !== (div4_class_value = "notification " +
 	      /*type*/
 	      ctx[0])) {
-	        attr(div3, "class", div3_class_value);
+	        attr(div4, "class", div4_class_value);
+	      }
+
+	      if (!current || dirty &
+	      /*maxcontentwidth*/
+	      2 && div4_style_value !== (div4_style_value = `--max-content-width: ${
+      /*maxcontentwidth*/
+      ctx[1]}`)) {
+	        attr(div4, "style", div4_style_value);
 	      }
 	    },
 
 	    i(local) {
 	      if (current) return;
 	      add_render_callback(() => {
-	        if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, true);
-	        div3_transition.run(1);
+	        if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, true);
+	        div4_transition.run(1);
 	      });
 	      current = true;
 	    },
 
 	    o(local) {
-	      if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, {}, false);
-	      div3_transition.run(0);
+	      if (!div4_transition) div4_transition = create_bidirectional_transition(div4, fade, {}, false);
+	      div4_transition.run(0);
 	      current = false;
 	    },
 
 	    d(detaching) {
-	      if (detaching) detach(div3);
-	      if (detaching && div3_transition) div3_transition.end();
+	      if (detaching) detach(div4);
+	      if (detaching && div4_transition) div4_transition.end();
 	      mounted = false;
 	      dispose();
 	    }
@@ -13796,7 +13871,7 @@
 	  let current;
 	  let if_block =
 	  /*show*/
-	  ctx[1] && create_if_block$9(ctx);
+	  ctx[2] && create_if_block$9(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -13813,13 +13888,13 @@
 	    p(ctx, [dirty]) {
 	      if (
 	      /*show*/
-	      ctx[1]) {
+	      ctx[2]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
 	          /*show*/
-	          2) {
+	          4) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -13862,13 +13937,16 @@
 	  let {
 	    type = ""
 	  } = $$props;
+	  let {
+	    maxcontentwidth = "100%"
+	  } = $$props;
 	  let show = true;
 	  onMount(() => {
 	    setTimeout(() => validateType(type), 1);
 	  });
 
 	  function close(e) {
-	    $$invalidate(1, show = false);
+	    $$invalidate(2, show = false);
 	    e.target.dispatchEvent(new CustomEvent("_dismiss", {
 	      composed: true
 	    }));
@@ -13877,29 +13955,31 @@
 
 	  $$self.$$set = $$props => {
 	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
+	    if ('maxcontentwidth' in $$props) $$invalidate(1, maxcontentwidth = $$props.maxcontentwidth);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*type*/
 	    1) {
-	      $$invalidate(2, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
+	      $$invalidate(3, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "event" ? "calendar" : "");
 	    }
 	  };
 
-	  return [type, show, iconType, close];
+	  return [type, maxcontentwidth, show, iconType, close];
 	}
 
 	class Notification extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{padding:1.5rem 1rem;display:flex}@media(min-width: 640px){.notification{padding:1.5rem 2rem}}@media(min-width: 1024px){.notification{padding:1.5rem 4.5rem}}.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-container{display:flex;flex-direction:row;flex:1 1 auto;gap:1rem;margin:0 auto;max-width:min(var(--max-content-width), 100%)}.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$i, create_fragment$k, safe_not_equal, {
-	      type: 0
+	      type: 0,
+	      maxcontentwidth: 1
 	    }, null);
 
 	    if (options) {
@@ -13915,7 +13995,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["type"];
+	    return ["type", "maxcontentwidth"];
 	  }
 
 	  get type() {
@@ -13929,6 +14009,17 @@
 	    flush();
 	  }
 
+	  get maxcontentwidth() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set maxcontentwidth(maxcontentwidth) {
+	    this.$$set({
+	      maxcontentwidth
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-notification", Notification);
@@ -14016,7 +14107,7 @@
 	class PageBlock extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    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>`;
+	    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 1rem}@media(min-width: 640px){.page-content{padding:0 2rem}}@media(min-width: 1024px){.page-content{padding:0 4.5rem}}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -22546,12 +22637,14 @@
 	  var heading = _a.heading,
 	      backgroundUrl = _a.backgroundUrl,
 	      minHeight = _a.minHeight,
+	      maxContentWidth = _a.maxContentWidth,
 	      children = _a.children,
 	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-hero-banner", __assign({
 	    heading: heading,
 	    backgroundurl: backgroundUrl,
 	    minheight: minHeight,
+	    maxcontentwidth: maxContentWidth,
 	    "data-testid": testId
 	  }, {
 	    children: children
@@ -22902,12 +22995,14 @@
 	  var type = _a.type,
 	      version = _a.version,
 	      feedbackUrl = _a.feedbackUrl,
+	      maxContentWidth = _a.maxContentWidth,
 	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-microsite-header", {
 	    type: type,
 	    version: version,
 	    feedbackurl: feedbackUrl,
-	    "data-testid": testId
+	    "data-testid": testId,
+	    maxcontentwidth: maxContentWidth
 	  }, void 0);
 	};
 
@@ -22969,6 +23064,7 @@
 	var GoANotification = function GoANotification(_a) {
 	  var _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
+	      maxContentWidth = _a.maxContentWidth,
 	      children = _a.children,
 	      testId = _a.testId,
 	      onDismiss = _a.onDismiss;
@@ -22992,7 +23088,8 @@
 	  return jsxRuntime.jsx("goa-notification", __assign({
 	    ref: el,
 	    type: type,
-	    "data-testid": testId
+	    "data-testid": testId,
+	    maxcontentwidth: maxContentWidth
 	  }, {
 	    children: children
 	  }), void 0);