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

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.146",
+  "version": "4.0.0-alpha.148",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -2944,7 +2944,7 @@ class Button extends SvelteElement {
   constructor(options) {
     super();
     this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4);padding-left:var(--goa-space-xs);padding-right:var(--goa-space-xs)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -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];
   }
@@ -17681,7 +17762,7 @@ function instance$9($$self, $$props, $$invalidate) {
 class Table extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-600);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -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

@@ -2985,7 +2985,7 @@
 	  constructor(options) {
 	    super();
 	    this.shadowRoot.innerHTML = `<style>:host{--button-height:2.625rem;--button-height-compact:2rem;--button-height-tall:3.25rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive-default);box-sizing:border-box;cursor:pointer;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-5);font-weight:400;height:var(--button-height);letter-spacing:var(--goa-letter-spacing-button);line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix, 0)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--goa-font-size-4);padding-left:var(--goa-space-xs);padding-right:var(--goa-space-xs)}button.start{height:var(--button-height-tall);font-weight:var(--goa-font-weight-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-interactive-default);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive-focus);border-color:var(--goa-color-interactive-hover);background-color:var(--goa-color-interactive-hover);outline:none}button.secondary{border:2px solid var(--goa-color-interactive-default);background-color:var(--goa-color-greyscale-white);color:var(--goa-color-interactive-default)}button.secondary:hover{border-color:var(--goa-color-interactive-hover);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);background-color:var(--goa-color-greyscale-100);outline:none}button.tertiary{border:1px solid transparent;background-color:transparent;color:var(--goa-color-interactive-default);text-decoration:underline}button.tertiary:hover{border-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--goa-color-greyscale-100);background-color:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover);box-shadow:0 0 0 3px var(--goa-color-interactive-focus);outline:none}.submit.destructive,.primary.destructive{color:var(--goa-color-greyscale-white);background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default)}.submit.destructive:hover,.primary.destructive:hover{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background-color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark)}.secondary.destructive{color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:hover{border-color:var(--goa-color-emergency-dark);color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-emergency-dark);border-color:var(--goa-color-emergency-dark);background-color:var(--goa-color-greyscale-white)}.tertiary.destructive{color:var(--goa-color-emergency-default);border-color:transparent}.tertiary.destructive:hover{color:var(--goa-color-emergency-dark)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-emergency-dark)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -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];
 	  }
@@ -17732,7 +17813,7 @@
 	class Table extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-700);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{overflow-x:auto}table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{font:var(--goa-typography-body-m);padding:0.75rem 1rem;border-bottom:1px solid var(--goa-color-greyscale-200)}table .goa-table-number-column{font:var(--goa-typography-number-m);text-align:right}table.relaxed td{padding:1rem}th{background-color:var(--goa-color-greyscale-white);color:var(--goa-color-text-secondary);padding:1rem;text-align:left;border-bottom:2px solid var(--goa-color-greyscale-600);vertical-align:bottom}th:has(goa-table-sort-header){padding:0}tfoot td{background-color:var(--goa-color-greyscale-100)}tfoot tr:first-child td{border-top:2px solid var(--goa-color-greyscale-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -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,