@abgov/react-components 4.0.0-alpha.145 → 4.0.0-alpha.147

package/lib/callout/callout.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { Margins } from "../../common/styling";
 declare type CalloutType = "important" | "information" | "event" | "success" | "emergency";
+declare type CalloutSize = "medium" | "large";
 interface WCProps extends Margins {
     heading?: string;
     type?: CalloutType;
+    size?: CalloutSize;
 }
 declare global {
     namespace JSX {
@@ -15,8 +17,9 @@ declare global {
 export interface CalloutProps extends Margins {
     heading?: string;
     type?: CalloutType;
+    size?: CalloutSize;
     testId?: string;
     children?: React.ReactNode;
 }
-export declare const GoACallout: ({ heading, type, testId, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
+export declare const GoACallout: ({ heading, type, size, testId, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
 export default GoACallout;

package/package.json

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

package/react-components.esm.js

@@ -3356,6 +3356,9 @@ function create_if_block$l(ctx) {
       t = text(
       /*heading*/
       ctx[5]);
+      toggle_class(h3, "medium",
+      /*isMediumCallout*/
+      ctx[9]);
     },
 
     m(target, anchor) {
@@ -3369,6 +3372,14 @@ function create_if_block$l(ctx) {
       32) set_data(t,
       /*heading*/
       ctx[5]);
+
+      if (dirty &
+      /*isMediumCallout*/
+      512) {
+        toggle_class(h3, "medium",
+        /*isMediumCallout*/
+        ctx[9]);
+      }
     },
 
     d(detaching) {
@@ -3389,6 +3400,11 @@ function create_fragment$K(ctx) {
   let t1;
   let slot;
   let div_style_value;
+  let mounted;
+  let dispose;
+  add_render_callback(
+  /*onwindowresize*/
+  ctx[12]);
   let if_block =
   /*heading*/
   ctx[5] && create_if_block$l(ctx);
@@ -3405,7 +3421,10 @@ function create_fragment$K(ctx) {
       this.c = noop;
       set_custom_element_data(goa_icon, "type",
       /*iconType*/
-      ctx[7]);
+      ctx[10]);
+      set_custom_element_data(goa_icon, "size",
+      /*iconSize*/
+      ctx[8]);
       set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
       /*type*/
       ctx[4] === "important" ? "false" : "true");
@@ -3426,6 +3445,9 @@ function create_fragment$K(ctx) {
       attr(div, "data-testid",
       /*testid*/
       ctx[6]);
+      toggle_class(div, "medium",
+      /*isMediumCallout*/
+      ctx[9]);
     },
 
     m(target, anchor) {
@@ -3437,15 +3459,30 @@ function create_fragment$K(ctx) {
       if (if_block) if_block.m(span1, null);
       append(span1, t1);
       append(span1, slot);
+
+      if (!mounted) {
+        dispose = listen(window, "resize",
+        /*onwindowresize*/
+        ctx[12]);
+        mounted = true;
+      }
     },
 
     p(ctx, [dirty]) {
       if (dirty &
       /*iconType*/
-      128) {
+      1024) {
         set_custom_element_data(goa_icon, "type",
         /*iconType*/
-        ctx[7]);
+        ctx[10]);
+      }
+
+      if (dirty &
+      /*iconSize*/
+      256) {
+        set_custom_element_data(goa_icon, "size",
+        /*iconSize*/
+        ctx[8]);
       }
 
       if (dirty &
@@ -3500,6 +3537,14 @@ function create_fragment$K(ctx) {
         /*testid*/
         ctx[6]);
       }
+
+      if (dirty &
+      /*isMediumCallout*/
+      512) {
+        toggle_class(div, "medium",
+        /*isMediumCallout*/
+        ctx[9]);
+      }
     },
 
     i: noop,
@@ -3508,14 +3553,18 @@ function create_fragment$K(ctx) {
     d(detaching) {
       if (detaching) detach(div);
       if (if_block) if_block.d();
+      mounted = false;
+      dispose();
     }
 
   };
 }
 
 function instance$E($$self, $$props, $$invalidate) {
+  let isMediumCallout;
   let iconType;
   const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
+  const [CalloutSizes, validateCalloutSize] = typeValidator("Callout size", ["medium", "large"]);
   let {
     mt = null
   } = $$props;
@@ -3528,6 +3577,9 @@ function instance$E($$self, $$props, $$invalidate) {
   let {
     ml = null
   } = $$props;
+  let {
+    size = "large"
+  } = $$props;
   let {
     type
   } = $$props;
@@ -3537,35 +3589,52 @@ function instance$E($$self, $$props, $$invalidate) {
   let {
     testid = ""
   } = $$props;
+  let screenSize = 0;
+  let iconSize = "medium";
   onMount(() => {
-    setTimeout(() => validateType(type), 1);
+    validateCalloutSize(size);
+    setTimeout(() => {
+      validateType(type);
+      $$invalidate(8, iconSize = isMediumCallout ? "small" : "medium");
+    });
   });
 
+  function onwindowresize() {
+    $$invalidate(7, screenSize = window.innerWidth);
+  }
+
   $$self.$$set = $$props => {
     if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
     if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
     if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
     if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
+    if ('size' in $$props) $$invalidate(11, size = $$props.size);
     if ('type' in $$props) $$invalidate(4, type = $$props.type);
     if ('heading' in $$props) $$invalidate(5, heading = $$props.heading);
     if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
   };
 
   $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*screenSize, size*/
+    2176) {
+      $$invalidate(9, isMediumCallout = screenSize < 640 || size === "medium");
+    }
+
     if ($$self.$$.dirty &
     /*type*/
     16) {
-      $$invalidate(7, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
+      $$invalidate(10, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
     }
   };
 
-  return [mt, mr, mb, ml, type, heading, testid, iconType];
+  return [mt, mr, mb, ml, type, heading, testid, screenSize, iconSize, isMediumCallout, iconType, size, onwindowresize];
 }
 
 class Callout extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:0}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:1.75rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;overflow:hidden;font:var(--goa-typography-body-m)}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:var(--goa-space-none);margin-bottom:var(--goa-space-m)}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{text-align:center;padding-top:var(--goa-space-l);padding-left:var(--goa-space-s);padding-right:var(--goa-space-s)}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:var(--goa-space-l)}.notification.medium{font:var(--goa-typography-body-s);max-width:22rem}h3.medium{font:var(--goa-typography-heading-xs);margin-bottom:var(--goa-space-2xs)}.notification.medium .content{padding:var(--goa-space-s);margin-top:calc(-1 * var(--goa-space-3xs))}.notification.medium .icon{padding-top:var(--goa-space-s);padding-left:var(--goa-space-2xs);padding-right:var(--goa-space-2xs)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -3575,6 +3644,7 @@ class Callout extends SvelteElement {
       mr: 1,
       mb: 2,
       ml: 3,
+      size: 11,
       type: 4,
       heading: 5,
       testid: 6
@@ -3593,7 +3663,7 @@ class Callout extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["mt", "mr", "mb", "ml", "type", "heading", "testid"];
+    return ["mt", "mr", "mb", "ml", "size", "type", "heading", "testid"];
   }
 
   get mt() {
@@ -3640,6 +3710,17 @@ class Callout extends SvelteElement {
     flush();
   }
 
+  get size() {
+    return this.$$.ctx[11];
+  }
+
+  set size(size) {
+    this.$$set({
+      size
+    });
+    flush();
+  }
+
   get type() {
     return this.$$.ctx[4];
   }
@@ -10881,7 +10962,7 @@ function instance$m($$self, $$props, $$invalidate) {
 
   const _iconOverrides = {
     pencil: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1442 5.47956L12.5355 1.87088L13.7196 0.686776C14.0391 0.367257 14.4385 0.212197 14.9178 0.221594C15.3971 0.230992 15.7965 0.39545 16.116 0.714969L17.3283 1.92726C17.6478 2.24678 17.8076 2.64148 17.8076 3.11136C17.8076 3.58124 17.6478 3.97594 17.3283 4.29546L16.1442 5.47956ZM1.03951 17.8424C0.795173 17.8424 0.593125 17.7626 0.433365 17.6028C0.273605 17.443 0.193726 17.241 0.193726 16.9966V14.5721C0.193726 14.4593 0.212521 14.356 0.250112 14.262C0.287702 14.168 0.353485 14.074 0.447461 13.9801L11.4689 2.93435L15.0776 6.54303L4.05615 17.5887C3.96217 17.6827 3.8682 17.7485 3.77422 17.7861C3.68024 17.8236 3.57687 17.8424 3.4641 17.8424H1.03951Z" fill="currentcolor"/> </svg>`,
-    checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="#333333"/> </svg>`,
+    checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="currentcolor"/> </svg>`,
     remove: `<svg width="16" height="20" viewBox="0 0 16 1" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 -0.000244141C0.947715 -0.000244141 0.5 0.447471 0.5 0.999756C0.5 1.55204 0.947715 1.99976 1.5 1.99976H15C15.5523 1.99976 16 1.55204 16 0.999756C16 0.447471 15.5523 -0.000244141 15 -0.000244141H1.5Z" fill="currentcolor"/> </svg>`,
     "goa-file": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1357_108691)"> <path d="M38.741 14C38.541 13.07 38.081 12.22 37.401 11.54L36.861 11L27.861 2L27.321 1.46C26.641 0.78 25.781 0.32 24.861 0.12C24.511 0.04 24.151 0 23.791 0H5.86096C3.10096 0 0.860962 2.24 0.860962 5V43C0.860962 45.76 3.10096 48 5.86096 48H33.861C36.621 48 38.861 45.76 38.861 43V15.07C38.861 14.71 38.811 14.35 38.741 14ZM35.041 12H29.871C28.221 12 26.871 10.65 26.871 9V3.83L35.041 12ZM36.871 43C36.871 44.65 35.521 46 33.871 46H5.87097C4.22097 46 2.87097 44.65 2.87097 43V5C2.87097 3.35 4.22097 2 5.87097 2H23.801C24.171 2 24.531 2.07 24.871 2.2V9C24.871 11.76 27.111 14 29.871 14H36.671C36.801 14.34 36.871 14.7 36.871 15.07V43Z" fill="currentcolor"/> </g> <defs> <clipPath id="clip0_1357_108691"><rect width="38" height="48" fill="white" transform="translate(0.861328)"/></clipPath></defs></svg>`,
     "goa-text": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.7953 14C38.5953 13.07 38.1353 12.22 37.4553 11.54L36.9153 11L27.9153 2L27.3753 1.46C26.6953 0.78 25.8353 0.32 24.9153 0.12C24.5653 0.04 24.2053 0 23.8453 0H5.91528C3.15528 0 0.915283 2.24 0.915283 5V43C0.915283 45.76 3.15528 48 5.91528 48H33.9153C36.6753 48 38.9153 45.76 38.9153 43V15.07C38.9153 14.71 38.8653 14.35 38.7953 14ZM35.0953 12H29.9253C28.2753 12 26.9253 10.65 26.9253 9V3.83L35.0953 12ZM36.9253 43C36.9253 44.65 35.5753 46 33.9253 46H5.91528C4.26528 46 2.91528 44.65 2.91528 43V5C2.91528 3.35 4.26528 2 5.91528 2H23.8453C24.2153 2 24.5753 2.07 24.9153 2.2V9C24.9153 11.76 27.1553 14 29.9153 14H36.7153C36.8453 14.34 36.9153 14.7 36.9153 15.07V43H36.9253Z" fill="currentcolor"/> <path d="M27.9153 34H11.9153C11.363 34 10.9153 34.4477 10.9153 35C10.9153 35.5523 11.363 36 11.9153 36H27.9153C28.4676 36 28.9153 35.5523 28.9153 35C28.9153 34.4477 28.4676 34 27.9153 34Z" fill="currentcolor"/> <path d="M27.9153 26H11.9153C11.363 26 10.9153 26.4477 10.9153 27C10.9153 27.5523 11.363 28 11.9153 28H27.9153C28.4676 28 28.9153 27.5523 28.9153 27C28.9153 26.4477 28.4676 26 27.9153 26Z" fill="currentcolor"/> </svg>`,
@@ -10925,7 +11006,7 @@ function instance$m($$self, $$props, $$invalidate) {
 class Icon extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}.inverted *{color:#fff;fill:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -19376,7 +19457,7 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (153:38) 
+} // (158:38) 
 
 
 function create_if_block_3$2(ctx) {
@@ -19398,7 +19479,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (151:36) 
+} // (156:36) 
 
 
 function create_if_block_2$2(ctx) {
@@ -19421,7 +19502,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (149:4) {#if _isCurrent}
+} // (154:4) {#if _isCurrent}
 
 
 function create_if_block_1$2(ctx) {
@@ -19443,7 +19524,7 @@ function create_if_block_1$2(ctx) {
     }
 
   };
-} // (161:4) {#if status === "incomplete"}
+} // (166:4) {#if status === "incomplete"}
 
 
 function create_if_block$2(ctx) {
@@ -19794,7 +19875,7 @@ function instance$3($$self, $$props, $$invalidate) {
 class FormStep extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
+    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}.status>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
   }[data-status=complete] .status{background:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
     [data-status=complete],
     [data-status=incomplete],
@@ -22019,6 +22100,7 @@ const GoAButton = ({
 const GoACallout = ({
   heading,
   type: _type = "information",
+  size: _size = "large",
   testId,
   children,
   mt,
@@ -22029,6 +22111,7 @@ const GoACallout = ({
   return jsx("goa-callout", Object.assign({
     heading: heading,
     type: _type,
+    size: _size,
     mt: mt,
     mr: mr,
     mb: mb,

package/react-components.umd.js

@@ -3397,6 +3397,9 @@
 	      t = text(
 	      /*heading*/
 	      ctx[5]);
+	      toggle_class(h3, "medium",
+	      /*isMediumCallout*/
+	      ctx[9]);
 	    },
 
 	    m(target, anchor) {
@@ -3410,6 +3413,14 @@
 	      32) set_data(t,
 	      /*heading*/
 	      ctx[5]);
+
+	      if (dirty &
+	      /*isMediumCallout*/
+	      512) {
+	        toggle_class(h3, "medium",
+	        /*isMediumCallout*/
+	        ctx[9]);
+	      }
 	    },
 
 	    d(detaching) {
@@ -3430,6 +3441,11 @@
 	  let t1;
 	  let slot;
 	  let div_style_value;
+	  let mounted;
+	  let dispose;
+	  add_render_callback(
+	  /*onwindowresize*/
+	  ctx[12]);
 	  let if_block =
 	  /*heading*/
 	  ctx[5] && create_if_block$l(ctx);
@@ -3446,7 +3462,10 @@
 	      this.c = noop;
 	      set_custom_element_data(goa_icon, "type",
 	      /*iconType*/
-	      ctx[7]);
+	      ctx[10]);
+	      set_custom_element_data(goa_icon, "size",
+	      /*iconSize*/
+	      ctx[8]);
 	      set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value =
 	      /*type*/
 	      ctx[4] === "important" ? "false" : "true");
@@ -3467,6 +3486,9 @@
 	      attr(div, "data-testid",
 	      /*testid*/
 	      ctx[6]);
+	      toggle_class(div, "medium",
+	      /*isMediumCallout*/
+	      ctx[9]);
 	    },
 
 	    m(target, anchor) {
@@ -3478,15 +3500,30 @@
 	      if (if_block) if_block.m(span1, null);
 	      append(span1, t1);
 	      append(span1, slot);
+
+	      if (!mounted) {
+	        dispose = listen(window, "resize",
+	        /*onwindowresize*/
+	        ctx[12]);
+	        mounted = true;
+	      }
 	    },
 
 	    p(ctx, [dirty]) {
 	      if (dirty &
 	      /*iconType*/
-	      128) {
+	      1024) {
 	        set_custom_element_data(goa_icon, "type",
 	        /*iconType*/
-	        ctx[7]);
+	        ctx[10]);
+	      }
+
+	      if (dirty &
+	      /*iconSize*/
+	      256) {
+	        set_custom_element_data(goa_icon, "size",
+	        /*iconSize*/
+	        ctx[8]);
 	      }
 
 	      if (dirty &
@@ -3541,6 +3578,14 @@
 	        /*testid*/
 	        ctx[6]);
 	      }
+
+	      if (dirty &
+	      /*isMediumCallout*/
+	      512) {
+	        toggle_class(div, "medium",
+	        /*isMediumCallout*/
+	        ctx[9]);
+	      }
 	    },
 
 	    i: noop,
@@ -3549,14 +3594,18 @@
 	    d(detaching) {
 	      if (detaching) detach(div);
 	      if (if_block) if_block.d();
+	      mounted = false;
+	      dispose();
 	    }
 
 	  };
 	}
 
 	function instance$E($$self, $$props, $$invalidate) {
+	  let isMediumCallout;
 	  let iconType;
 	  const [Types, validateType] = typeValidator("Callout type", ["emergency", "important", "information", "event", "success"], true);
+	  const [CalloutSizes, validateCalloutSize] = typeValidator("Callout size", ["medium", "large"]);
 	  let {
 	    mt = null
 	  } = $$props;
@@ -3569,6 +3618,9 @@
 	  let {
 	    ml = null
 	  } = $$props;
+	  let {
+	    size = "large"
+	  } = $$props;
 	  let {
 	    type
 	  } = $$props;
@@ -3578,35 +3630,52 @@
 	  let {
 	    testid = ""
 	  } = $$props;
+	  let screenSize = 0;
+	  let iconSize = "medium";
 	  onMount(() => {
-	    setTimeout(() => validateType(type), 1);
+	    validateCalloutSize(size);
+	    setTimeout(() => {
+	      validateType(type);
+	      $$invalidate(8, iconSize = isMediumCallout ? "small" : "medium");
+	    });
 	  });
 
+	  function onwindowresize() {
+	    $$invalidate(7, screenSize = window.innerWidth);
+	  }
+
 	  $$self.$$set = $$props => {
 	    if ('mt' in $$props) $$invalidate(0, mt = $$props.mt);
 	    if ('mr' in $$props) $$invalidate(1, mr = $$props.mr);
 	    if ('mb' in $$props) $$invalidate(2, mb = $$props.mb);
 	    if ('ml' in $$props) $$invalidate(3, ml = $$props.ml);
+	    if ('size' in $$props) $$invalidate(11, size = $$props.size);
 	    if ('type' in $$props) $$invalidate(4, type = $$props.type);
 	    if ('heading' in $$props) $$invalidate(5, heading = $$props.heading);
 	    if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
 	  };
 
 	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*screenSize, size*/
+	    2176) {
+	      $$invalidate(9, isMediumCallout = screenSize < 640 || size === "medium");
+	    }
+
 	    if ($$self.$$.dirty &
 	    /*type*/
 	    16) {
-	      $$invalidate(7, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
+	      $$invalidate(10, iconType = type === "emergency" ? "warning" : type === "important" ? "alert-circle" : type === "information" ? "information-circle" : type === "success" ? "checkmark-circle" : type === "event" ? "calendar" : "");
 	    }
 	  };
 
-	  return [mt, mr, mb, ml, type, heading, testid, iconType];
+	  return [mt, mr, mb, ml, type, heading, testid, screenSize, iconSize, isMediumCallout, iconType, size, onwindowresize];
 	}
 
 	class Callout extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;border-radius:3px;overflow:hidden}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:0}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{flex:0 0 3rem;text-align:center;padding-top:1.75rem}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:1.75rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.notification{display:flex;align-items:stretch;overflow:hidden;font:var(--goa-typography-body-m)}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-regular);margin-top:var(--goa-space-none);margin-bottom:var(--goa-space-m)}.emergency{background-color:var(--goa-color-emergency-default)}.important{background-color:var(--goa-color-warning-default)}.information{background-color:var(--goa-color-info-default)}.event{background-color:var(--goa-color-info-default)}.success{background-color:var(--goa-color-success-default)}.icon{text-align:center;padding-top:var(--goa-space-l);padding-left:var(--goa-space-s);padding-right:var(--goa-space-s)}.content{flex:1 1 auto;background-color:var(--goa-color-greyscale-100);padding:var(--goa-space-l)}.notification.medium{font:var(--goa-typography-body-s);max-width:22rem}h3.medium{font:var(--goa-typography-heading-xs);margin-bottom:var(--goa-space-2xs)}.notification.medium .content{padding:var(--goa-space-s);margin-top:calc(-1 * var(--goa-space-3xs))}.notification.medium .icon{padding-top:var(--goa-space-s);padding-left:var(--goa-space-2xs);padding-right:var(--goa-space-2xs)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -3616,6 +3685,7 @@
 	      mr: 1,
 	      mb: 2,
 	      ml: 3,
+	      size: 11,
 	      type: 4,
 	      heading: 5,
 	      testid: 6
@@ -3634,7 +3704,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["mt", "mr", "mb", "ml", "type", "heading", "testid"];
+	    return ["mt", "mr", "mb", "ml", "size", "type", "heading", "testid"];
 	  }
 
 	  get mt() {
@@ -3681,6 +3751,17 @@
 	    flush();
 	  }
 
+	  get size() {
+	    return this.$$.ctx[11];
+	  }
+
+	  set size(size) {
+	    this.$$set({
+	      size
+	    });
+	    flush();
+	  }
+
 	  get type() {
 	    return this.$$.ctx[4];
 	  }
@@ -10927,7 +11008,7 @@
 
 	  const _iconOverrides = {
 	    pencil: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.1442 5.47956L12.5355 1.87088L13.7196 0.686776C14.0391 0.367257 14.4385 0.212197 14.9178 0.221594C15.3971 0.230992 15.7965 0.39545 16.116 0.714969L17.3283 1.92726C17.6478 2.24678 17.8076 2.64148 17.8076 3.11136C17.8076 3.58124 17.6478 3.97594 17.3283 4.29546L16.1442 5.47956ZM1.03951 17.8424C0.795173 17.8424 0.593125 17.7626 0.433365 17.6028C0.273605 17.443 0.193726 17.241 0.193726 16.9966V14.5721C0.193726 14.4593 0.212521 14.356 0.250112 14.262C0.287702 14.168 0.353485 14.074 0.447461 13.9801L11.4689 2.93435L15.0776 6.54303L4.05615 17.5887C3.96217 17.6827 3.8682 17.7485 3.77422 17.7861C3.68024 17.8236 3.57687 17.8424 3.4641 17.8424H1.03951Z" fill="currentcolor"/> </svg>`,
-	    checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="#333333"/> </svg>`,
+	    checkmark: `<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.20129 11.5368L15.9974 0.341265C16.3611 -0.0743717 16.9929 -0.116489 17.4085 0.247193C17.8241 0.610875 17.8663 1.24264 17.5026 1.65827L7.00258 13.6583C6.82032 13.8666 6.5599 13.99 6.28328 13.9992C6.00666 14.0084 5.7386 13.9026 5.54289 13.7069L1.04289 9.20688C0.652369 8.81635 0.652369 8.18319 1.04289 7.79266C1.43342 7.40214 2.06658 7.40214 2.45711 7.79266L6.20129 11.5368Z" fill="currentcolor"/> </svg>`,
 	    remove: `<svg width="16" height="20" viewBox="0 0 16 1" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 -0.000244141C0.947715 -0.000244141 0.5 0.447471 0.5 0.999756C0.5 1.55204 0.947715 1.99976 1.5 1.99976H15C15.5523 1.99976 16 1.55204 16 0.999756C16 0.447471 15.5523 -0.000244141 15 -0.000244141H1.5Z" fill="currentcolor"/> </svg>`,
 	    "goa-file": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1357_108691)"> <path d="M38.741 14C38.541 13.07 38.081 12.22 37.401 11.54L36.861 11L27.861 2L27.321 1.46C26.641 0.78 25.781 0.32 24.861 0.12C24.511 0.04 24.151 0 23.791 0H5.86096C3.10096 0 0.860962 2.24 0.860962 5V43C0.860962 45.76 3.10096 48 5.86096 48H33.861C36.621 48 38.861 45.76 38.861 43V15.07C38.861 14.71 38.811 14.35 38.741 14ZM35.041 12H29.871C28.221 12 26.871 10.65 26.871 9V3.83L35.041 12ZM36.871 43C36.871 44.65 35.521 46 33.871 46H5.87097C4.22097 46 2.87097 44.65 2.87097 43V5C2.87097 3.35 4.22097 2 5.87097 2H23.801C24.171 2 24.531 2.07 24.871 2.2V9C24.871 11.76 27.111 14 29.871 14H36.671C36.801 14.34 36.871 14.7 36.871 15.07V43Z" fill="currentcolor"/> </g> <defs> <clipPath id="clip0_1357_108691"><rect width="38" height="48" fill="white" transform="translate(0.861328)"/></clipPath></defs></svg>`,
 	    "goa-text": `<svg width="39" height="48" viewBox="0 0 39 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M38.7953 14C38.5953 13.07 38.1353 12.22 37.4553 11.54L36.9153 11L27.9153 2L27.3753 1.46C26.6953 0.78 25.8353 0.32 24.9153 0.12C24.5653 0.04 24.2053 0 23.8453 0H5.91528C3.15528 0 0.915283 2.24 0.915283 5V43C0.915283 45.76 3.15528 48 5.91528 48H33.9153C36.6753 48 38.9153 45.76 38.9153 43V15.07C38.9153 14.71 38.8653 14.35 38.7953 14ZM35.0953 12H29.9253C28.2753 12 26.9253 10.65 26.9253 9V3.83L35.0953 12ZM36.9253 43C36.9253 44.65 35.5753 46 33.9253 46H5.91528C4.26528 46 2.91528 44.65 2.91528 43V5C2.91528 3.35 4.26528 2 5.91528 2H23.8453C24.2153 2 24.5753 2.07 24.9153 2.2V9C24.9153 11.76 27.1553 14 29.9153 14H36.7153C36.8453 14.34 36.9153 14.7 36.9153 15.07V43H36.9253Z" fill="currentcolor"/> <path d="M27.9153 34H11.9153C11.363 34 10.9153 34.4477 10.9153 35C10.9153 35.5523 11.363 36 11.9153 36H27.9153C28.4676 36 28.9153 35.5523 28.9153 35C28.9153 34.4477 28.4676 34 27.9153 34Z" fill="currentcolor"/> <path d="M27.9153 26H11.9153C11.363 26 10.9153 26.4477 10.9153 27C10.9153 27.5523 11.363 28 11.9153 28H27.9153C28.4676 28 28.9153 27.5523 28.9153 27C28.9153 26.4477 28.4676 26 27.9153 26Z" fill="currentcolor"/> </svg>`,
@@ -10971,7 +11052,7 @@
 	class Icon extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.icon-override>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}.inverted *{color:#fff;fill:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center}ion-icon{pointer-events:none;width:100%;height:100%}.goa-icon{fill:var(--fill-color);color:var(--fill-color);opacity:var(--opacity);display:inline-flex;align-items:center;justify-content:center}.goa-icon:hover ion-icon{fill:var(--hover-color);color:var(--hover-color)}.goa-icon--small{width:1.25rem;height:1.25rem}.goa-icon--medium{width:1.5rem;height:1.5rem}.goa-icon--large{width:2rem;height:2rem}.goa-icon--xlarge{width:2.5rem;height:2.5rem}.goa-icon:has(.icon-override){height:fit-content}.icon-override{display:flex;flex-direction:column;align-items:center}.inverted *{color:#fff;fill:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -19428,7 +19509,7 @@
 	    }
 
 	  };
-	} // (153:38) 
+	} // (158:38) 
 
 
 	function create_if_block_3$2(ctx) {
@@ -19450,7 +19531,7 @@
 	    }
 
 	  };
-	} // (151:36) 
+	} // (156:36) 
 
 
 	function create_if_block_2$2(ctx) {
@@ -19473,7 +19554,7 @@
 	    }
 
 	  };
-	} // (149:4) {#if _isCurrent}
+	} // (154:4) {#if _isCurrent}
 
 
 	function create_if_block_1$2(ctx) {
@@ -19495,7 +19576,7 @@
 	    }
 
 	  };
-	} // (161:4) {#if status === "incomplete"}
+	} // (166:4) {#if status === "incomplete"}
 
 
 	function create_if_block$2(ctx) {
@@ -19846,7 +19927,7 @@
 	class FormStep extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
+	    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):focus,[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):not([aria-current="step"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}.status>*{fill:var(--fill-color, var(--goa-color-interactive-default));color:var(--fill-color, var(--goa-color-interactive-default))}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
   }[data-status=complete] .status{background:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
     [data-status=complete],
     [data-status=incomplete],
@@ -22103,6 +22184,8 @@
 	  var heading = _a.heading,
 	      _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
+	      _c = _a.size,
+	      size = _c === void 0 ? "large" : _c,
 	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
@@ -22112,6 +22195,7 @@
 	  return jsxRuntime.jsx("goa-callout", __assign({
 	    heading: heading,
 	    type: type,
+	    size: size,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,