@abgov/react-components 4.0.0-alpha.97 → 4.0.0-alpha.99

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

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 interface WCProps {
     heading: string;
     backgroundurl: string;
+    minheight?: string;
 }
 declare global {
     namespace JSX {
@@ -13,6 +14,7 @@ declare global {
 interface Props {
     heading: string;
     backgroundUrl: string;
+    minHeight?: string;
     children?: React.ReactNode;
 }
 export declare const GoAHeroBanner: FC<Props>;

package/lib/input/input.d.ts

@@ -54,6 +54,8 @@ interface BaseProps extends Margins {
     suffix?: string;
     testId?: string;
     ariaLabel?: string;
+    leadingContent?: React.ReactNode;
+    trailingContent?: React.ReactNode;
 }
 declare type OnChange = (name: string, value: string) => void;
 export interface InputProps extends BaseProps {

package/package.json

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

package/react-components.esm.js

@@ -9299,6 +9299,9 @@ function create_fragment$h(ctx) {
       set_style(div1, "background-size", "cover");
       set_style(div1, "background-position", "center");
       set_style(div1, "background-repeat", "no-repeat");
+      set_style(div1, "min-height",
+      /*minheight*/
+      ctx[2]);
     },
 
     m(target, anchor) {
@@ -9326,6 +9329,14 @@ function create_fragment$h(ctx) {
         /*backgroundurl*/
         ctx[1] + ")");
       }
+
+      if (dirty &
+      /*minheight*/
+      4) {
+        set_style(div1, "min-height",
+        /*minheight*/
+        ctx[2]);
+      }
     },
 
     i: noop,
@@ -9345,26 +9356,31 @@ function instance$f($$self, $$props, $$invalidate) {
   let {
     backgroundurl
   } = $$props;
+  let {
+    minheight = "600px"
+  } = $$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);
   };
 
-  return [heading, backgroundurl];
+  return [heading, backgroundurl, minheight];
 }
 
 class HeroBanner extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;min-height:600px;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$f, create_fragment$h, safe_not_equal, {
       heading: 0,
-      backgroundurl: 1
+      backgroundurl: 1,
+      minheight: 2
     }, null);
 
     if (options) {
@@ -9380,7 +9396,7 @@ class HeroBanner extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["heading", "backgroundurl"];
+    return ["heading", "backgroundurl", "minheight"];
   }
 
   get heading() {
@@ -9405,6 +9421,17 @@ class HeroBanner extends SvelteElement {
     flush();
   }
 
+  get minheight() {
+    return this.$$.ctx[2];
+  }
+
+  set minheight(minheight) {
+    this.$$set({
+      minheight
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-hero-banner", HeroBanner);
@@ -10330,7 +10357,7 @@ function create_if_block_4$1(ctx) {
     }
 
   };
-} // (86:4) {#if leadingicon}
+} // (95:4) {#if leadingicon}
 
 
 function create_if_block_3$2(ctx) {
@@ -10364,7 +10391,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (116:4) {#if trailingicon && !handlesTrailingIconClick}
+} // (125:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 function create_if_block_2$3(ctx) {
@@ -10399,7 +10426,7 @@ function create_if_block_2$3(ctx) {
     }
 
   };
-} // (126:4) {#if trailingicon && handlesTrailingIconClick}
+} // (135:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 function create_if_block_1$3(ctx) {
@@ -10454,7 +10481,7 @@ function create_if_block_1$3(ctx) {
     }
 
   };
-} // (138:4) {#if suffix}
+} // (147:4) {#if suffix}
 
 
 function create_if_block$5(ctx) {
@@ -10490,19 +10517,23 @@ function create_if_block$5(ctx) {
 }
 
 function create_fragment$e(ctx) {
-  let div1;
-  let div0;
+  let div3;
+  let div2;
   let t0;
+  let div0;
   let t1;
+  let t2;
   let input;
   let input_class_value;
   let input_style_value;
   let input_aria_label_value;
-  let t2;
   let t3;
   let t4;
-  let div0_class_value;
-  let div1_style_value;
+  let t5;
+  let t6;
+  let div1;
+  let div2_class_value;
+  let div3_style_value;
   let mounted;
   let dispose;
   let if_block0 =
@@ -10526,20 +10557,27 @@ function create_fragment$e(ctx) {
   ctx[15] && create_if_block$5(ctx);
   return {
     c() {
-      div1 = element("div");
-      div0 = element("div");
+      div3 = element("div");
+      div2 = element("div");
       if (if_block0) if_block0.c();
       t0 = space();
-      if (if_block1) if_block1.c();
+      div0 = element("div");
+      div0.innerHTML = `<slot name="leadingContent"></slot>`;
       t1 = space();
-      input = element("input");
+      if (if_block1) if_block1.c();
       t2 = space();
-      if (if_block2) if_block2.c();
+      input = element("input");
       t3 = space();
-      if (if_block3) if_block3.c();
+      if (if_block2) if_block2.c();
       t4 = space();
+      if (if_block3) if_block3.c();
+      t5 = space();
       if (if_block4) if_block4.c();
+      t6 = space();
+      div1 = element("div");
+      div1.innerHTML = `<slot name="trailingContent"></slot>`;
       this.c = noop;
+      attr(div0, "class", "leading-content");
       attr(input, "class", input_class_value = `input--${
       /*variant*/
       ctx[7]}`);
@@ -10585,7 +10623,8 @@ function create_fragment$e(ctx) {
       ctx[10] ||
       /*name*/
       ctx[2]);
-      attr(div0, "class", div0_class_value = `
+      attr(div1, "class", "trailing-content");
+      attr(div2, "class", div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10597,11 +10636,11 @@ function create_fragment$e(ctx) {
       /*type*/
       ctx[1]}
     `);
-      toggle_class(div0, "error",
+      toggle_class(div2, "error",
       /*isError*/
       ctx[22]);
-      attr(div1, "class", "container");
-      attr(div1, "style", div1_style_value = `
+      attr(div3, "class", "container");
+      attr(div3, "style", div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10618,22 +10657,26 @@ function create_fragment$e(ctx) {
     },
 
     m(target, anchor) {
-      insert(target, div1, anchor);
-      append(div1, div0);
-      if (if_block0) if_block0.m(div0, null);
-      append(div0, t0);
-      if (if_block1) if_block1.m(div0, null);
-      append(div0, t1);
-      append(div0, input);
+      insert(target, div3, anchor);
+      append(div3, div2);
+      if (if_block0) if_block0.m(div2, null);
+      append(div2, t0);
+      append(div2, div0);
+      append(div2, t1);
+      if (if_block1) if_block1.m(div2, null);
+      append(div2, t2);
+      append(div2, input);
       /*input_binding*/
 
       ctx[32](input);
-      append(div0, t2);
-      if (if_block2) if_block2.m(div0, null);
-      append(div0, t3);
-      if (if_block3) if_block3.m(div0, null);
-      append(div0, t4);
-      if (if_block4) if_block4.m(div0, null);
+      append(div2, t3);
+      if (if_block2) if_block2.m(div2, null);
+      append(div2, t4);
+      if (if_block3) if_block3.m(div2, null);
+      append(div2, t5);
+      if (if_block4) if_block4.m(div2, null);
+      append(div2, t6);
+      append(div2, div1);
 
       if (!mounted) {
         dispose = [listen(input, "keyup",
@@ -10654,7 +10697,7 @@ function create_fragment$e(ctx) {
         } else {
           if_block0 = create_if_block_4$1(ctx);
           if_block0.c();
-          if_block0.m(div0, t0);
+          if_block0.m(div2, t0);
         }
       } else if (if_block0) {
         if_block0.d(1);
@@ -10669,7 +10712,7 @@ function create_fragment$e(ctx) {
         } else {
           if_block1 = create_if_block_3$2(ctx);
           if_block1.c();
-          if_block1.m(div0, t1);
+          if_block1.m(div2, t2);
         }
       } else if (if_block1) {
         if_block1.d(1);
@@ -10802,7 +10845,7 @@ function create_fragment$e(ctx) {
         } else {
           if_block2 = create_if_block_2$3(ctx);
           if_block2.c();
-          if_block2.m(div0, t3);
+          if_block2.m(div2, t4);
         }
       } else if (if_block2) {
         if_block2.d(1);
@@ -10819,7 +10862,7 @@ function create_fragment$e(ctx) {
         } else {
           if_block3 = create_if_block_1$3(ctx);
           if_block3.c();
-          if_block3.m(div0, t4);
+          if_block3.m(div2, t5);
         }
       } else if (if_block3) {
         if_block3.d(1);
@@ -10834,7 +10877,7 @@ function create_fragment$e(ctx) {
         } else {
           if_block4 = create_if_block$5(ctx);
           if_block4.c();
-          if_block4.m(div0, null);
+          if_block4.m(div2, t6);
         }
       } else if (if_block4) {
         if_block4.d(1);
@@ -10843,7 +10886,7 @@ function create_fragment$e(ctx) {
 
       if (dirty[0] &
       /*isDisabled, variant, type*/
-      2097282 && div0_class_value !== (div0_class_value = `
+      2097282 && div2_class_value !== (div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10855,20 +10898,20 @@ function create_fragment$e(ctx) {
       /*type*/
       ctx[1]}
     `)) {
-        attr(div0, "class", div0_class_value);
+        attr(div2, "class", div2_class_value);
       }
 
       if (dirty[0] &
       /*isDisabled, variant, type, isError*/
       6291586) {
-        toggle_class(div0, "error",
+        toggle_class(div2, "error",
         /*isError*/
         ctx[22]);
       }
 
       if (dirty[0] &
       /*mt, mr, mb, ml, width*/
-      983552 && div1_style_value !== (div1_style_value = `
+      983552 && div3_style_value !== (div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10882,7 +10925,7 @@ function create_fragment$e(ctx) {
       /*width*/
       ctx[9]};
   `)) {
-        attr(div1, "style", div1_style_value);
+        attr(div3, "style", div3_style_value);
       }
     },
 
@@ -10890,7 +10933,7 @@ function create_fragment$e(ctx) {
     o: noop,
 
     d(detaching) {
-      if (detaching) detach(div1);
+      if (detaching) detach(div3);
       if (if_block0) if_block0.d();
       if (if_block1) if_block1.d();
       /*input_binding*/
@@ -11009,6 +11052,12 @@ function instance$c($$self, $$props, $$invalidate) {
     $$invalidate(0, value = ee.value);
   }
 
+  onMount(() => {
+    if (prefix != "" || suffix != "") {
+      console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
+    }
+  });
+
   function input_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       inputEl = $$value;
@@ -11102,7 +11151,7 @@ function instance$c($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix{border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix{border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
     init(this, {
       target: this.shadowRoot,
@@ -16489,11 +16538,13 @@ const GoAGrid = ({
 const GoAHeroBanner = ({
   heading,
   backgroundUrl,
+  minHeight,
   children
 }) => {
   return jsx("goa-hero-banner", Object.assign({
     heading: heading,
-    backgroundurl: backgroundUrl
+    backgroundurl: backgroundUrl,
+    minheight: minHeight
   }, {
     children: children
   }), void 0);
@@ -16632,6 +16683,8 @@ const GoAInput = ({
   mr,
   mb,
   ml,
+  leadingContent,
+  trailingContent,
   onTrailingIconClick,
   onChange
 }) => {
@@ -16662,7 +16715,7 @@ const GoAInput = ({
       current.removeEventListener("_trailingIconClick", clickListener);
     };
   }, [ref, onChange, onTrailingIconClick]);
-  return jsx("goa-input", {
+  return jsxs("goa-input", Object.assign({
     ref: ref,
     focused: focused,
     type: type,
@@ -16690,7 +16743,17 @@ const GoAInput = ({
     mb: mb,
     ml: ml,
     handletrailingiconclick: !!onTrailingIconClick
-  }, void 0);
+  }, {
+    children: [leadingContent && jsx("div", Object.assign({
+      slot: "leadingContent"
+    }, {
+      children: leadingContent
+    }), void 0), trailingContent && jsx("div", Object.assign({
+      slot: "trailingContent"
+    }, {
+      children: trailingContent
+    }), void 0)]
+  }), void 0);
 };
 
 const onDateChangeHandler = onChange => {

package/react-components.umd.js

@@ -9344,6 +9344,9 @@
 	      set_style(div1, "background-size", "cover");
 	      set_style(div1, "background-position", "center");
 	      set_style(div1, "background-repeat", "no-repeat");
+	      set_style(div1, "min-height",
+	      /*minheight*/
+	      ctx[2]);
 	    },
 
 	    m(target, anchor) {
@@ -9371,6 +9374,14 @@
 	        /*backgroundurl*/
 	        ctx[1] + ")");
 	      }
+
+	      if (dirty &
+	      /*minheight*/
+	      4) {
+	        set_style(div1, "min-height",
+	        /*minheight*/
+	        ctx[2]);
+	      }
 	    },
 
 	    i: noop,
@@ -9390,26 +9401,31 @@
 	  let {
 	    backgroundurl
 	  } = $$props;
+	  let {
+	    minheight = "600px"
+	  } = $$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);
 	  };
 
-	  return [heading, backgroundurl];
+	  return [heading, backgroundurl, minheight];
 	}
 
 	class HeroBanner extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;min-height:600px;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      heading: 0,
-	      backgroundurl: 1
+	      backgroundurl: 1,
+	      minheight: 2
 	    }, null);
 
 	    if (options) {
@@ -9425,7 +9441,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["heading", "backgroundurl"];
+	    return ["heading", "backgroundurl", "minheight"];
 	  }
 
 	  get heading() {
@@ -9450,6 +9466,17 @@
 	    flush();
 	  }
 
+	  get minheight() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set minheight(minheight) {
+	    this.$$set({
+	      minheight
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-hero-banner", HeroBanner);
@@ -10375,7 +10402,7 @@
 	    }
 
 	  };
-	} // (86:4) {#if leadingicon}
+	} // (95:4) {#if leadingicon}
 
 
 	function create_if_block_3$2(ctx) {
@@ -10409,7 +10436,7 @@
 	    }
 
 	  };
-	} // (116:4) {#if trailingicon && !handlesTrailingIconClick}
+	} // (125:4) {#if trailingicon && !handlesTrailingIconClick}
 
 
 	function create_if_block_2$3(ctx) {
@@ -10444,7 +10471,7 @@
 	    }
 
 	  };
-	} // (126:4) {#if trailingicon && handlesTrailingIconClick}
+	} // (135:4) {#if trailingicon && handlesTrailingIconClick}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10499,7 +10526,7 @@
 	    }
 
 	  };
-	} // (138:4) {#if suffix}
+	} // (147:4) {#if suffix}
 
 
 	function create_if_block$5(ctx) {
@@ -10535,19 +10562,23 @@
 	}
 
 	function create_fragment$e(ctx) {
-	  let div1;
-	  let div0;
+	  let div3;
+	  let div2;
 	  let t0;
+	  let div0;
 	  let t1;
+	  let t2;
 	  let input;
 	  let input_class_value;
 	  let input_style_value;
 	  let input_aria_label_value;
-	  let t2;
 	  let t3;
 	  let t4;
-	  let div0_class_value;
-	  let div1_style_value;
+	  let t5;
+	  let t6;
+	  let div1;
+	  let div2_class_value;
+	  let div3_style_value;
 	  let mounted;
 	  let dispose;
 	  let if_block0 =
@@ -10571,20 +10602,27 @@
 	  ctx[15] && create_if_block$5(ctx);
 	  return {
 	    c() {
-	      div1 = element("div");
-	      div0 = element("div");
+	      div3 = element("div");
+	      div2 = element("div");
 	      if (if_block0) if_block0.c();
 	      t0 = space();
-	      if (if_block1) if_block1.c();
+	      div0 = element("div");
+	      div0.innerHTML = `<slot name="leadingContent"></slot>`;
 	      t1 = space();
-	      input = element("input");
+	      if (if_block1) if_block1.c();
 	      t2 = space();
-	      if (if_block2) if_block2.c();
+	      input = element("input");
 	      t3 = space();
-	      if (if_block3) if_block3.c();
+	      if (if_block2) if_block2.c();
 	      t4 = space();
+	      if (if_block3) if_block3.c();
+	      t5 = space();
 	      if (if_block4) if_block4.c();
+	      t6 = space();
+	      div1 = element("div");
+	      div1.innerHTML = `<slot name="trailingContent"></slot>`;
 	      this.c = noop;
+	      attr(div0, "class", "leading-content");
 	      attr(input, "class", input_class_value = `input--${
       /*variant*/
       ctx[7]}`);
@@ -10630,7 +10668,8 @@
 	      ctx[10] ||
 	      /*name*/
 	      ctx[2]);
-	      attr(div0, "class", div0_class_value = `
+	      attr(div1, "class", "trailing-content");
+	      attr(div2, "class", div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10642,11 +10681,11 @@
       /*type*/
       ctx[1]}
     `);
-	      toggle_class(div0, "error",
+	      toggle_class(div2, "error",
 	      /*isError*/
 	      ctx[22]);
-	      attr(div1, "class", "container");
-	      attr(div1, "style", div1_style_value = `
+	      attr(div3, "class", "container");
+	      attr(div3, "style", div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10663,22 +10702,26 @@
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div1, anchor);
-	      append(div1, div0);
-	      if (if_block0) if_block0.m(div0, null);
-	      append(div0, t0);
-	      if (if_block1) if_block1.m(div0, null);
-	      append(div0, t1);
-	      append(div0, input);
+	      insert(target, div3, anchor);
+	      append(div3, div2);
+	      if (if_block0) if_block0.m(div2, null);
+	      append(div2, t0);
+	      append(div2, div0);
+	      append(div2, t1);
+	      if (if_block1) if_block1.m(div2, null);
+	      append(div2, t2);
+	      append(div2, input);
 	      /*input_binding*/
 
 	      ctx[32](input);
-	      append(div0, t2);
-	      if (if_block2) if_block2.m(div0, null);
-	      append(div0, t3);
-	      if (if_block3) if_block3.m(div0, null);
-	      append(div0, t4);
-	      if (if_block4) if_block4.m(div0, null);
+	      append(div2, t3);
+	      if (if_block2) if_block2.m(div2, null);
+	      append(div2, t4);
+	      if (if_block3) if_block3.m(div2, null);
+	      append(div2, t5);
+	      if (if_block4) if_block4.m(div2, null);
+	      append(div2, t6);
+	      append(div2, div1);
 
 	      if (!mounted) {
 	        dispose = [listen(input, "keyup",
@@ -10699,7 +10742,7 @@
 	        } else {
 	          if_block0 = create_if_block_4$1(ctx);
 	          if_block0.c();
-	          if_block0.m(div0, t0);
+	          if_block0.m(div2, t0);
 	        }
 	      } else if (if_block0) {
 	        if_block0.d(1);
@@ -10714,7 +10757,7 @@
 	        } else {
 	          if_block1 = create_if_block_3$2(ctx);
 	          if_block1.c();
-	          if_block1.m(div0, t1);
+	          if_block1.m(div2, t2);
 	        }
 	      } else if (if_block1) {
 	        if_block1.d(1);
@@ -10847,7 +10890,7 @@
 	        } else {
 	          if_block2 = create_if_block_2$3(ctx);
 	          if_block2.c();
-	          if_block2.m(div0, t3);
+	          if_block2.m(div2, t4);
 	        }
 	      } else if (if_block2) {
 	        if_block2.d(1);
@@ -10864,7 +10907,7 @@
 	        } else {
 	          if_block3 = create_if_block_1$3(ctx);
 	          if_block3.c();
-	          if_block3.m(div0, t4);
+	          if_block3.m(div2, t5);
 	        }
 	      } else if (if_block3) {
 	        if_block3.d(1);
@@ -10879,7 +10922,7 @@
 	        } else {
 	          if_block4 = create_if_block$5(ctx);
 	          if_block4.c();
-	          if_block4.m(div0, null);
+	          if_block4.m(div2, t6);
 	        }
 	      } else if (if_block4) {
 	        if_block4.d(1);
@@ -10888,7 +10931,7 @@
 
 	      if (dirty[0] &
 	      /*isDisabled, variant, type*/
-	      2097282 && div0_class_value !== (div0_class_value = `
+	      2097282 && div2_class_value !== (div2_class_value = `
       goa-input
       ${
       /*isDisabled*/
@@ -10900,20 +10943,20 @@
       /*type*/
       ctx[1]}
     `)) {
-	        attr(div0, "class", div0_class_value);
+	        attr(div2, "class", div2_class_value);
 	      }
 
 	      if (dirty[0] &
 	      /*isDisabled, variant, type, isError*/
 	      6291586) {
-	        toggle_class(div0, "error",
+	        toggle_class(div2, "error",
 	        /*isError*/
 	        ctx[22]);
 	      }
 
 	      if (dirty[0] &
 	      /*mt, mr, mb, ml, width*/
-	      983552 && div1_style_value !== (div1_style_value = `
+	      983552 && div3_style_value !== (div3_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[16],
@@ -10927,7 +10970,7 @@
       /*width*/
       ctx[9]};
   `)) {
-	        attr(div1, "style", div1_style_value);
+	        attr(div3, "style", div3_style_value);
 	      }
 	    },
 
@@ -10935,7 +10978,7 @@
 	    o: noop,
 
 	    d(detaching) {
-	      if (detaching) detach(div1);
+	      if (detaching) detach(div3);
 	      if (if_block0) if_block0.d();
 	      if (if_block1) if_block1.d();
 	      /*input_binding*/
@@ -11054,6 +11097,12 @@
 	    $$invalidate(0, value = ee.value);
 	  }
 
+	  onMount(() => {
+	    if (prefix != "" || suffix != "") {
+	      console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
+	    }
+	  });
+
 	  function input_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      inputEl = $$value;
@@ -11147,7 +11196,7 @@
 	class Input extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix{background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.prefix{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix{border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix{border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -16560,10 +16609,12 @@
 	var GoAHeroBanner = function GoAHeroBanner(_a) {
 	  var heading = _a.heading,
 	      backgroundUrl = _a.backgroundUrl,
+	      minHeight = _a.minHeight,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-hero-banner", __assign({
 	    heading: heading,
-	    backgroundurl: backgroundUrl
+	    backgroundurl: backgroundUrl,
+	    minheight: minHeight
 	  }, {
 	    children: children
 	  }), void 0);
@@ -16675,6 +16726,8 @@
 	      mr = _a.mr,
 	      mb = _a.mb,
 	      ml = _a.ml,
+	      leadingContent = _a.leadingContent,
+	      trailingContent = _a.trailingContent,
 	      onTrailingIconClick = _a.onTrailingIconClick,
 	      onChange = _a.onChange;
 	  var ref = react.useRef(null);
@@ -16703,7 +16756,7 @@
 	      current.removeEventListener("_trailingIconClick", clickListener);
 	    };
 	  }, [ref, onChange, onTrailingIconClick]);
-	  return jsxRuntime.jsx("goa-input", {
+	  return jsxRuntime.jsxs("goa-input", __assign({
 	    ref: ref,
 	    focused: focused,
 	    type: type,
@@ -16731,7 +16784,17 @@
 	    mb: mb,
 	    ml: ml,
 	    handletrailingiconclick: !!onTrailingIconClick
-	  }, void 0);
+	  }, {
+	    children: [leadingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "leadingContent"
+	    }, {
+	      children: leadingContent
+	    }), void 0), trailingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "trailingContent"
+	    }, {
+	      children: trailingContent
+	    }), void 0)]
+	  }), void 0);
 	};
 
 	var onDateChangeHandler = function onDateChangeHandler(onChange) {