@abgov/react-components 4.0.0-alpha.106 → 4.0.0-alpha.108

package/react-components.esm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { parseISO, format } from 'date-fns';
 
@@ -1024,6 +1024,476 @@ if (typeof HTMLElement === 'function') {
 
   };
 }
+
+function calculateMargin(mt, mr, mb, ml) {
+  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
+}
+
+function injectCss(el, rootSelector, css, media) {
+  const style = document.createElement("style");
+
+  const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" ");
+
+  if (media) {
+    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
+  } else {
+    style.innerHTML = `${rootSelector} {${_css}}`;
+  }
+
+  el.appendChild(style);
+}
+
+function toBoolean(value) {
+  if (value === "false") {
+    return false;
+  }
+
+  if (value === "") {
+    return true;
+  }
+
+  return !!value;
+}
+
+function fromBoolean(value) {
+  return value ? "true" : "false";
+}
+
+function validateRequired(componentName, props) {
+  Object.entries(props).forEach(prop => {
+    if (!prop[1]) {
+      console.warn(`${componentName}: ${prop[0]} is required`);
+    }
+  });
+}
+
+function typeValidator(message, values, required = false) {
+  const validator = value => {
+    if (!required && !value) {
+      return;
+    }
+
+    if (!values.includes(value)) {
+      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
+    }
+  };
+
+  return [values, validator];
+}
+/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
+
+
+function create_fragment$H(ctx) {
+  let div3;
+  let details;
+  let summary;
+  let goa_icon;
+  let goa_icon_fillcolor_value;
+  let t0;
+  let div1;
+  let span0;
+  let t1;
+  let span0_class_value;
+  let span0_data_testid_value;
+  let t2;
+  let span1;
+  let t3;
+  let t4;
+  let div0;
+  let summary_class_value;
+  let t5;
+  let div2;
+  let div3_style_value;
+  let mounted;
+  let dispose;
+  return {
+    c() {
+      div3 = element("div");
+      details = element("details");
+      summary = element("summary");
+      goa_icon = element("goa-icon");
+      t0 = space();
+      div1 = element("div");
+      span0 = element("span");
+      t1 = text(
+      /*heading*/
+      ctx[0]);
+      t2 = space();
+      span1 = element("span");
+      t3 = text(
+      /*secondarytext*/
+      ctx[1]);
+      t4 = space();
+      div0 = element("div");
+      div0.innerHTML = `<slot name="headingcontent"></slot>`;
+      t5 = space();
+      div2 = element("div");
+      div2.innerHTML = `<slot></slot>`;
+      this.c = noop;
+      set_custom_element_data(goa_icon, "type", "chevron-forward");
+      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
+      /*_hovering*/
+      ctx[8] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-interactive-default)");
+      attr(span0, "class", span0_class_value = "heading heading-" +
+      /*headingsize*/
+      ctx[2]);
+      attr(span0, "data-testid", span0_data_testid_value = `${
+      /*testid*/
+      ctx[3]}-heading`);
+      attr(span1, "class", "secondary-text");
+      attr(div0, "class", "heading-content");
+      attr(div1, "class", "title");
+      attr(summary, "class", summary_class_value = `container-${
+      /*headingsize*/
+      ctx[2]}`);
+      attr(div2, "class", "content");
+      details.open =
+      /*isOpen*/
+      ctx[9];
+      attr(div3, "style", div3_style_value = calculateMargin(
+      /*mt*/
+      ctx[4],
+      /*mr*/
+      ctx[5],
+      /*mb*/
+      ctx[6],
+      /*ml*/
+      ctx[7]));
+      attr(div3, "class", `
+    goa-accordion
+  `);
+      attr(div3, "data-testid",
+      /*testid*/
+      ctx[3]);
+    },
+
+    m(target, anchor) {
+      insert(target, div3, anchor);
+      append(div3, details);
+      append(details, summary);
+      append(summary, goa_icon);
+      append(summary, t0);
+      append(summary, div1);
+      append(div1, span0);
+      append(span0, t1);
+      append(div1, t2);
+      append(div1, span1);
+      append(span1, t3);
+      append(div1, t4);
+      append(div1, div0);
+      append(details, t5);
+      append(details, div2);
+
+      if (!mounted) {
+        dispose = [listen(summary, "mouseover",
+        /*mouseover_handler*/
+        ctx[11]), listen(summary, "mouseout",
+        /*mouseout_handler*/
+        ctx[12]), listen(summary, "focus",
+        /*focus_handler*/
+        ctx[13]), listen(summary, "blur",
+        /*blur_handler*/
+        ctx[14])];
+        mounted = true;
+      }
+    },
+
+    p(ctx, [dirty]) {
+      if (dirty &
+      /*_hovering*/
+      256 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+      /*_hovering*/
+      ctx[8] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-interactive-default)")) {
+        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
+      }
+
+      if (dirty &
+      /*heading*/
+      1) set_data(t1,
+      /*heading*/
+      ctx[0]);
+
+      if (dirty &
+      /*headingsize*/
+      4 && span0_class_value !== (span0_class_value = "heading heading-" +
+      /*headingsize*/
+      ctx[2])) {
+        attr(span0, "class", span0_class_value);
+      }
+
+      if (dirty &
+      /*testid*/
+      8 && span0_data_testid_value !== (span0_data_testid_value = `${
+      /*testid*/
+      ctx[3]}-heading`)) {
+        attr(span0, "data-testid", span0_data_testid_value);
+      }
+
+      if (dirty &
+      /*secondarytext*/
+      2) set_data(t3,
+      /*secondarytext*/
+      ctx[1]);
+
+      if (dirty &
+      /*headingsize*/
+      4 && summary_class_value !== (summary_class_value = `container-${
+      /*headingsize*/
+      ctx[2]}`)) {
+        attr(summary, "class", summary_class_value);
+      }
+
+      if (dirty &
+      /*isOpen*/
+      512) {
+        details.open =
+        /*isOpen*/
+        ctx[9];
+      }
+
+      if (dirty &
+      /*mt, mr, mb, ml*/
+      240 && div3_style_value !== (div3_style_value = calculateMargin(
+      /*mt*/
+      ctx[4],
+      /*mr*/
+      ctx[5],
+      /*mb*/
+      ctx[6],
+      /*ml*/
+      ctx[7]))) {
+        attr(div3, "style", div3_style_value);
+      }
+
+      if (dirty &
+      /*testid*/
+      8) {
+        attr(div3, "data-testid",
+        /*testid*/
+        ctx[3]);
+      }
+    },
+
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(div3);
+      mounted = false;
+      run_all(dispose);
+    }
+
+  };
+}
+
+function instance$B($$self, $$props, $$invalidate) {
+  let isOpen;
+  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
+  let {
+    open = "false"
+  } = $$props;
+  let {
+    heading = ""
+  } = $$props;
+  let {
+    secondarytext = ""
+  } = $$props;
+  let {
+    headingsize = "small"
+  } = $$props;
+  let {
+    testid = ""
+  } = $$props;
+  let {
+    mt = null
+  } = $$props;
+  let {
+    mr = null
+  } = $$props;
+  let {
+    mb = "xs"
+  } = $$props;
+  let {
+    ml = null
+  } = $$props;
+  let _hovering = false;
+  onMount(() => {
+    validateRequired("GoAAccordion", {
+      heading
+    });
+    validateHeadingSize(headingsize);
+  });
+
+  const mouseover_handler = () => $$invalidate(8, _hovering = true);
+
+  const mouseout_handler = () => $$invalidate(8, _hovering = false);
+
+  const focus_handler = () => $$invalidate(8, _hovering = false);
+
+  const blur_handler = () => $$invalidate(8, _hovering = false);
+
+  $$self.$$set = $$props => {
+    if ('open' in $$props) $$invalidate(10, open = $$props.open);
+    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
+    if ('secondarytext' in $$props) $$invalidate(1, secondarytext = $$props.secondarytext);
+    if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
+    if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
+    if ('mt' in $$props) $$invalidate(4, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(5, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(6, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(7, ml = $$props.ml);
+  };
+
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*open*/
+    1024) {
+      $$invalidate(9, isOpen = toBoolean(open));
+    }
+  };
+
+  return [heading, secondarytext, headingsize, testid, mt, mr, mb, ml, _hovering, isOpen, open, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+}
+
+class Accordion extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$B, create_fragment$H, safe_not_equal, {
+      open: 10,
+      heading: 0,
+      secondarytext: 1,
+      headingsize: 2,
+      testid: 3,
+      mt: 4,
+      mr: 5,
+      mb: 6,
+      ml: 7
+    }, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["open", "heading", "secondarytext", "headingsize", "testid", "mt", "mr", "mb", "ml"];
+  }
+
+  get open() {
+    return this.$$.ctx[10];
+  }
+
+  set open(open) {
+    this.$$set({
+      open
+    });
+    flush();
+  }
+
+  get heading() {
+    return this.$$.ctx[0];
+  }
+
+  set heading(heading) {
+    this.$$set({
+      heading
+    });
+    flush();
+  }
+
+  get secondarytext() {
+    return this.$$.ctx[1];
+  }
+
+  set secondarytext(secondarytext) {
+    this.$$set({
+      secondarytext
+    });
+    flush();
+  }
+
+  get headingsize() {
+    return this.$$.ctx[2];
+  }
+
+  set headingsize(headingsize) {
+    this.$$set({
+      headingsize
+    });
+    flush();
+  }
+
+  get testid() {
+    return this.$$.ctx[3];
+  }
+
+  set testid(testid) {
+    this.$$set({
+      testid
+    });
+    flush();
+  }
+
+  get mt() {
+    return this.$$.ctx[4];
+  }
+
+  set mt(mt) {
+    this.$$set({
+      mt
+    });
+    flush();
+  }
+
+  get mr() {
+    return this.$$.ctx[5];
+  }
+
+  set mr(mr) {
+    this.$$set({
+      mr
+    });
+    flush();
+  }
+
+  get mb() {
+    return this.$$.ctx[6];
+  }
+
+  set mb(mb) {
+    this.$$set({
+      mb
+    });
+    flush();
+  }
+
+  get ml() {
+    return this.$$.ctx[7];
+  }
+
+  set ml(ml) {
+    this.$$set({
+      ml
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-accordion", Accordion);
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$4(ctx) {
@@ -1336,65 +1806,8 @@ class AppHeader extends SvelteElement {
 }
 
 customElements.define("goa-app-header", AppHeader);
-
-function calculateMargin(mt, mr, mb, ml) {
-  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
-}
-
-function injectCss(el, rootSelector, css, media) {
-  const style = document.createElement("style");
-
-  const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" ");
-
-  if (media) {
-    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
-  } else {
-    style.innerHTML = `${rootSelector} {${_css}}`;
-  }
-
-  el.appendChild(style);
-}
-
-function toBoolean(value) {
-  if (value === "false") {
-    return false;
-  }
-
-  if (value === "") {
-    return true;
-  }
-
-  return !!value;
-}
-
-function fromBoolean(value) {
-  return value ? "true" : "false";
-}
-
-function validateRequired(componentName, props) {
-  Object.entries(props).forEach(prop => {
-    if (!prop[1]) {
-      console.warn(`${componentName}: ${prop[0]} is required`);
-    }
-  });
-}
-
-function typeValidator(message, values, required = false) {
-  const validator = value => {
-    if (!required && !value) {
-      return;
-    }
-
-    if (!values.includes(value)) {
-      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
-    }
-  };
-
-  return [values, validator];
-}
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-
 function create_else_block$3(ctx) {
   let div;
   return {
@@ -7738,8 +8151,6 @@ function create_if_block$a(ctx) {
 }
 
 function create_fragment$n(ctx) {
-  var _ctx$;
-
   let div5;
   let div4;
   let div0;
@@ -7755,11 +8166,11 @@ function create_fragment$n(ctx) {
   let div5_style_value;
   let if_block =
   /*navLinks*/
-  ((_ctx$ = ctx[2]) === null || _ctx$ === void 0 ? void 0 : _ctx$.length) && create_if_block$a();
+  ctx[2] &&
+  /*navLinks*/
+  ctx[2].length > 0 && create_if_block$a();
   return {
     c() {
-      var _ctx$2, _ctx$3;
-
       div5 = element("div");
       div4 = element("div");
       div0 = element("div");
@@ -7788,11 +8199,15 @@ function create_fragment$n(ctx) {
       attr(div2, "class", "abgov");
       toggle_class(div2, "with-meta-links",
       /*metaLinks*/
-      (_ctx$2 = ctx[3]) === null || _ctx$2 === void 0 ? void 0 : _ctx$2.length);
+      ctx[3] &&
+      /*metaLinks*/
+      ctx[3].length > 0);
       attr(div3, "class", "meta-section");
       toggle_class(div3, "with-meta-links",
       /*metaLinks*/
-      (_ctx$3 = ctx[3]) === null || _ctx$3 === void 0 ? void 0 : _ctx$3.length);
+      ctx[3] &&
+      /*metaLinks*/
+      ctx[3].length > 0);
       attr(div4, "class", "content");
       attr(div5, "class", "app-footer");
       attr(div5, "style", div5_style_value = `--max-content-width: ${
@@ -7820,11 +8235,11 @@ function create_fragment$n(ctx) {
     },
 
     p(ctx, [dirty]) {
-      var _ctx$4;
-
       if (
       /*navLinks*/
-      (_ctx$4 = ctx[2]) !== null && _ctx$4 !== void 0 && _ctx$4.length) {
+      ctx[2] &&
+      /*navLinks*/
+      ctx[2].length > 0) {
         if (if_block) ;else {
           if_block = create_if_block$a();
           if_block.c();
@@ -7838,21 +8253,21 @@ function create_fragment$n(ctx) {
       if (dirty &
       /*metaLinks*/
       8) {
-        var _ctx$5;
-
         toggle_class(div2, "with-meta-links",
         /*metaLinks*/
-        (_ctx$5 = ctx[3]) === null || _ctx$5 === void 0 ? void 0 : _ctx$5.length);
+        ctx[3] &&
+        /*metaLinks*/
+        ctx[3].length > 0);
       }
 
       if (dirty &
       /*metaLinks*/
       8) {
-        var _ctx$6;
-
         toggle_class(div3, "with-meta-links",
         /*metaLinks*/
-        (_ctx$6 = ctx[3]) === null || _ctx$6 === void 0 ? void 0 : _ctx$6.length);
+        ctx[3] &&
+        /*metaLinks*/
+        ctx[3].length > 0);
       }
 
       if (dirty &
@@ -11110,7 +11525,7 @@ function instance$d($$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;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--color-white)}.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-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}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(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-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(--goa-color-greyscale-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(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-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;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.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-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}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(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-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(--goa-color-greyscale-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(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-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,
@@ -16739,6 +17154,38 @@ class Pagination extends SvelteElement {
 
 customElements.define("goa-pagination", Pagination);
 
+const GoAAccordion = ({
+  open,
+  heading,
+  headingSize,
+  secondaryText,
+  headingContent,
+  testid,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) => {
+  return jsxs("goa-accordion", Object.assign({
+    open: open,
+    headingSize: headingSize,
+    heading: heading,
+    secondaryText: secondaryText,
+    "data-testid": testid,
+    mt: mt,
+    mr: mr,
+    mb: mb,
+    ml: ml
+  }, {
+    children: [children, headingContent && jsx("div", Object.assign({
+      slot: "headingcontent"
+    }, {
+      children: headingContent
+    }), void 0)]
+  }), void 0);
+};
+
 const GoAAppHeader = ({
   heading,
   url,
@@ -18013,4 +18460,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
+export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };