@abgov/react-components 4.0.0-alpha.127 → 4.0.0-alpha.129

package/react-components.esm.js

@@ -6725,16 +6725,16 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[49] = list[i];
-  child_ctx[53] = i;
+  child_ctx[48] = list[i];
+  child_ctx[52] = i;
   return child_ctx;
 }
 
 function get_each_context$4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[49] = list[i];
+  child_ctx[48] = list[i];
   return child_ctx;
-} // (256:2) {:else}
+} // (259:2) {:else}
 
 
 function create_else_block$5(ctx) {
@@ -6753,14 +6753,14 @@ function create_else_block$5(ctx) {
   let dispose;
   let if_block =
   /*_isMenuVisible*/
-  ctx[15] && create_if_block_1$7(ctx);
+  ctx[17] && create_if_block_1$7(ctx);
   let each_value_1 =
   /*_options*/
-  ctx[13];
+  ctx[12];
 
   const get_key = ctx =>
   /*index*/
-  ctx[53];
+  ctx[52];
 
   for (let i = 0; i < each_value_1.length; i += 1) {
     let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -6797,7 +6797,7 @@ function create_else_block$5(ctx) {
       set_custom_element_data(goa_input, "aria-controls", "menu");
       set_custom_element_data(goa_input, "aria-expanded",
       /*_isMenuVisible*/
-      ctx[15]);
+      ctx[17]);
       set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value =
       /*arialabel*/
       ctx[1] ||
@@ -6812,7 +6812,7 @@ function create_else_block$5(ctx) {
       set_custom_element_data(goa_input, "type", "text");
       set_custom_element_data(goa_input, "value",
       /*_selectedLabel*/
-      ctx[14]);
+      ctx[16]);
       set_custom_element_data(goa_input, "width", "100%");
       set_custom_element_data(goa_input, "name",
       /*name*/
@@ -6821,7 +6821,7 @@ function create_else_block$5(ctx) {
       attr(ul, "role", "listbox");
       attr(ul, "aria-activedescendant",
       /*_selectedLabel*/
-      ctx[14]);
+      ctx[16]);
       attr(ul, "data-testid", "dropdown-menu");
       attr(ul, "tabindex", "0");
       attr(ul, "class", "dropdown-list");
@@ -6830,7 +6830,7 @@ function create_else_block$5(ctx) {
       ctx[3]}`);
       toggle_class(ul, "dropdown-active",
       /*_isMenuVisible*/
-      ctx[15]);
+      ctx[17]);
     },
 
     m(target, anchor) {
@@ -6861,7 +6861,7 @@ function create_else_block$5(ctx) {
     p(ctx, dirty) {
       if (
       /*_isMenuVisible*/
-      ctx[15]) {
+      ctx[17]) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
@@ -6908,10 +6908,10 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_isMenuVisible*/
-      32768) {
+      131072) {
         set_custom_element_data(goa_input, "aria-expanded",
         /*_isMenuVisible*/
-        ctx[15]);
+        ctx[17]);
       }
 
       if (dirty[0] &
@@ -6934,10 +6934,10 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_selectedLabel*/
-      16384) {
+      65536) {
         set_custom_element_data(goa_input, "value",
         /*_selectedLabel*/
-        ctx[14]);
+        ctx[16]);
       }
 
       if (dirty[0] &
@@ -6950,19 +6950,19 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_options, _values, _highlightedIndex, onSelect*/
-      67186688) {
+      67407872) {
         each_value_1 =
         /*_options*/
-        ctx[13];
+        ctx[12];
         each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
       }
 
       if (dirty[0] &
       /*_selectedLabel*/
-      16384) {
+      65536) {
         attr(ul, "aria-activedescendant",
         /*_selectedLabel*/
-        ctx[14]);
+        ctx[16]);
       }
 
       if (dirty[0] &
@@ -6975,10 +6975,10 @@ function create_else_block$5(ctx) {
 
       if (dirty[0] &
       /*_isMenuVisible*/
-      32768) {
+      131072) {
         toggle_class(ul, "dropdown-active",
         /*_isMenuVisible*/
-        ctx[15]);
+        ctx[17]);
       }
     },
 
@@ -7003,7 +7003,7 @@ function create_else_block$5(ctx) {
     }
 
   };
-} // (237:2) {#if _native}
+} // (240:2) {#if _native}
 
 
 function create_if_block$f(ctx) {
@@ -7014,7 +7014,7 @@ function create_if_block$f(ctx) {
   let dispose;
   let each_value =
   /*_options*/
-  ctx[13];
+  ctx[12];
   let each_blocks = [];
 
   for (let i = 0; i < each_value.length; i += 1) {
@@ -7032,7 +7032,7 @@ function create_if_block$f(ctx) {
 
       select.disabled =
       /*_disabled*/
-      ctx[21];
+      ctx[22];
       attr(select, "aria-label", select_aria_label_value =
       /*arialabel*/
       ctx[1] ||
@@ -7066,10 +7066,10 @@ function create_if_block$f(ctx) {
     p(ctx, dirty) {
       if (dirty[0] &
       /*_options*/
-      8192) {
+      4096) {
         each_value =
         /*_options*/
-        ctx[13];
+        ctx[12];
         let i;
 
         for (i = 0; i < each_value.length; i += 1) {
@@ -7093,10 +7093,10 @@ function create_if_block$f(ctx) {
 
       if (dirty[0] &
       /*_disabled*/
-      2097152) {
+      4194304) {
         select.disabled =
         /*_disabled*/
-        ctx[21];
+        ctx[22];
       }
 
       if (dirty[0] &
@@ -7129,7 +7129,7 @@ function create_if_block$f(ctx) {
     }
 
   };
-} // (257:4) {#if _isMenuVisible}
+} // (260:4) {#if _isMenuVisible}
 
 
 function create_if_block_1$7(ctx) {
@@ -7174,16 +7174,16 @@ function create_if_block_1$7(ctx) {
     }
 
   };
-} // (300:6) {#each _options as option, index (index)}
+} // (303:6) {#each _options as option, index (index)}
 
 
 function create_each_block_1(key_1, ctx) {
   let li;
   let t0_value = (
   /*option*/
-  ctx[49].label ||
+  ctx[48].label ||
   /*option*/
-  ctx[49].value) + "";
+  ctx[48].value) + "";
   let t0;
   let t1;
   let li_id_value;
@@ -7201,7 +7201,7 @@ function create_each_block_1(key_1, ctx) {
       /*click_handler*/
       ctx[32](
       /*option*/
-      ctx[49])
+      ctx[48])
     );
   }
 
@@ -7215,40 +7215,40 @@ function create_each_block_1(key_1, ctx) {
       t1 = space();
       attr(li, "id", li_id_value =
       /*option*/
-      ctx[49].label);
+      ctx[48].label);
       attr(li, "role", "option");
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
-      ctx[49].label ||
+      ctx[48].label ||
       /*option*/
-      ctx[49].value);
+      ctx[48].value);
       attr(li, "aria-selected", li_aria_selected_value =
       /*_values*/
-      ctx[12].includes(
+      ctx[15].includes(
       /*option*/
-      ctx[49].value) ? "true" : "false");
+      ctx[48].value) ? "true" : "false");
       attr(li, "class", "dropdown-item");
       attr(li, "data-testid", li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[49].value}`);
+      ctx[48].value}`);
       attr(li, "data-index", li_data_index_value =
       /*index*/
-      ctx[53]);
+      ctx[52]);
       attr(li, "data-value", li_data_value_value =
       /*option*/
-      ctx[49].value);
+      ctx[48].value);
       attr(li, "style", li_style_value = `display: ${"block"}`);
       toggle_class(li, "dropdown-item--disabled", false);
       toggle_class(li, "dropdown-item--tabbed",
       /*index*/
-      ctx[53] ===
+      ctx[52] ===
       /*_highlightedIndex*/
-      ctx[16]);
+      ctx[18]);
       toggle_class(li, "dropdown-item--selected",
       /*_values*/
-      ctx[12].includes(
+      ctx[15].includes(
       /*option*/
-      ctx[49].value));
+      ctx[48].value));
       this.first = li;
     },
 
@@ -7267,82 +7267,82 @@ function create_each_block_1(key_1, ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*_options*/
-      8192 && t0_value !== (t0_value = (
+      4096 && t0_value !== (t0_value = (
       /*option*/
-      ctx[49].label ||
+      ctx[48].label ||
       /*option*/
-      ctx[49].value) + "")) set_data(t0, t0_value);
+      ctx[48].value) + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_id_value !== (li_id_value =
+      4096 && li_id_value !== (li_id_value =
       /*option*/
-      ctx[49].label)) {
+      ctx[48].label)) {
         attr(li, "id", li_id_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_aria_label_value !== (li_aria_label_value =
+      4096 && li_aria_label_value !== (li_aria_label_value =
       /*option*/
-      ctx[49].label ||
+      ctx[48].label ||
       /*option*/
-      ctx[49].value)) {
+      ctx[48].value)) {
         attr(li, "aria-label", li_aria_label_value);
       }
 
       if (dirty[0] &
       /*_values, _options*/
-      12288 && li_aria_selected_value !== (li_aria_selected_value =
+      36864 && li_aria_selected_value !== (li_aria_selected_value =
       /*_values*/
-      ctx[12].includes(
+      ctx[15].includes(
       /*option*/
-      ctx[49].value) ? "true" : "false")) {
+      ctx[48].value) ? "true" : "false")) {
         attr(li, "aria-selected", li_aria_selected_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
+      4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${
       /*option*/
-      ctx[49].value}`)) {
+      ctx[48].value}`)) {
         attr(li, "data-testid", li_data_testid_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_data_index_value !== (li_data_index_value =
+      4096 && li_data_index_value !== (li_data_index_value =
       /*index*/
-      ctx[53])) {
+      ctx[52])) {
         attr(li, "data-index", li_data_index_value);
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && li_data_value_value !== (li_data_value_value =
+      4096 && li_data_value_value !== (li_data_value_value =
       /*option*/
-      ctx[49].value)) {
+      ctx[48].value)) {
         attr(li, "data-value", li_data_value_value);
       }
 
       if (dirty[0] &
       /*_options, _highlightedIndex*/
-      73728) {
+      266240) {
         toggle_class(li, "dropdown-item--tabbed",
         /*index*/
-        ctx[53] ===
+        ctx[52] ===
         /*_highlightedIndex*/
-        ctx[16]);
+        ctx[18]);
       }
 
       if (dirty[0] &
       /*_values, _options*/
-      12288) {
+      36864) {
         toggle_class(li, "dropdown-item--selected",
         /*_values*/
-        ctx[12].includes(
+        ctx[15].includes(
         /*option*/
-        ctx[49].value));
+        ctx[48].value));
       }
     },
 
@@ -7353,14 +7353,14 @@ function create_each_block_1(key_1, ctx) {
     }
 
   };
-} // (246:6) {#each _options as option}
+} // (249:6) {#each _options as option}
 
 
 function create_each_block$4(ctx) {
   let option;
   let t0_value =
   /*option*/
-  ctx[49].label + "";
+  ctx[48].label + "";
   let t0;
   let t1;
   let option_selected_value;
@@ -7373,14 +7373,14 @@ function create_each_block$4(ctx) {
       t1 = space();
       option.selected = option_selected_value =
       /*option*/
-      ctx[49].selected;
+      ctx[48].selected;
       option.__value = option_value_value =
       /*option*/
-      ctx[49].value;
+      ctx[48].value;
       option.value = option.__value;
       attr(option, "aria-label", option_aria_label_value =
       /*option*/
-      ctx[49].label);
+      ctx[48].label);
     },
 
     m(target, anchor) {
@@ -7392,32 +7392,32 @@ function create_each_block$4(ctx) {
     p(ctx, dirty) {
       if (dirty[0] &
       /*_options*/
-      8192 && t0_value !== (t0_value =
+      4096 && t0_value !== (t0_value =
       /*option*/
-      ctx[49].label + "")) set_data(t0, t0_value);
+      ctx[48].label + "")) set_data(t0, t0_value);
 
       if (dirty[0] &
       /*_options*/
-      8192 && option_selected_value !== (option_selected_value =
+      4096 && option_selected_value !== (option_selected_value =
       /*option*/
-      ctx[49].selected)) {
+      ctx[48].selected)) {
         option.selected = option_selected_value;
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && option_value_value !== (option_value_value =
+      4096 && option_value_value !== (option_value_value =
       /*option*/
-      ctx[49].value)) {
+      ctx[48].value)) {
         option.__value = option_value_value;
         option.value = option.__value;
       }
 
       if (dirty[0] &
       /*_options*/
-      8192 && option_aria_label_value !== (option_aria_label_value =
+      4096 && option_aria_label_value !== (option_aria_label_value =
       /*option*/
-      ctx[49].label)) {
+      ctx[48].label)) {
         attr(option, "aria-label", option_aria_label_value);
       }
     },
@@ -7437,7 +7437,7 @@ function create_fragment$v(ctx) {
   function select_block_type(ctx, dirty) {
     if (
     /*_native*/
-    ctx[22]) return create_if_block$f;
+    ctx[14]) return create_if_block$f;
     return create_else_block$5;
   }
 
@@ -7466,11 +7466,11 @@ function create_fragment$v(ctx) {
       /*width*/
       ctx[5] ||
       /*_computedWidth*/
-      ctx[17]}
+      ctx[19]}
   `);
       toggle_class(div, "dropdown-native",
       /*_native*/
-      ctx[22]);
+      ctx[14]);
     },
 
     m(target, anchor) {
@@ -7504,7 +7504,7 @@ function create_fragment$v(ctx) {
 
       if (dirty[0] &
       /*mt, mr, mb, ml, width, _computedWidth*/
-      134944 && div_style_value !== (div_style_value = `
+      528160 && div_style_value !== (div_style_value = `
     ${calculateMargin(
       /*mt*/
       ctx[8],
@@ -7518,17 +7518,17 @@ function create_fragment$v(ctx) {
       /*width*/
       ctx[5] ||
       /*_computedWidth*/
-      ctx[17]}
+      ctx[19]}
   `)) {
         attr(div, "style", div_style_value);
       }
 
       if (dirty[0] &
       /*_native*/
-      4194304) {
+      16384) {
         toggle_class(div, "dropdown-native",
         /*_native*/
-        ctx[22]);
+        ctx[14]);
       }
     },
 
@@ -7546,6 +7546,20 @@ function create_fragment$v(ctx) {
   };
 }
 
+function parseValues(selectedValue) {
+  let rawValue;
+
+  try {
+    rawValue = JSON.parse(selectedValue || "[]");
+  } catch (e) {
+    rawValue = [selectedValue];
+  }
+
+  const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
+
+  return rawValues.map(val => `${val}`);
+}
+
 function instance$s($$self, $$props, $$invalidate) {
   let _disabled;
 
@@ -7616,23 +7630,13 @@ function instance$s($$self, $$props, $$invalidate) {
   let _selectEl;
 
   onMount(async () => {
-    await tick();
-    $$invalidate(12, _values = parseValues());
-    $$invalidate(13, _options = getOptions());
-
-    if (!_native) {
-      $$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
-      addKeyboardEventListeners();
-      setHighlightedIndexToSelected();
-    } // watch for DOM changes within the slot => dynamic binding
-
-
+    // watch for DOM changes within the slot => dynamic binding
     const slot = _el.querySelector("slot");
 
     slot === null || slot === void 0 ? void 0 : slot.addEventListener("slotchange", _e => {
-      $$invalidate(14, _selectedLabel = "");
-      $$invalidate(12, _values = parseValues());
-      $$invalidate(13, _options = getOptions());
+      $$invalidate(16, _selectedLabel = "");
+      $$invalidate(15, _values = parseValues(value));
+      $$invalidate(12, _options = getOptions());
     });
   });
   onDestroy(() => {
@@ -7665,8 +7669,8 @@ function instance$s($$self, $$props, $$invalidate) {
       const selected = _values.includes(value);
 
       if (selected) {
-        $$invalidate(14, _selectedLabel = label);
-        $$invalidate(12, _values = [value]);
+        $$invalidate(16, _selectedLabel = label);
+        $$invalidate(15, _values = [value]);
       }
 
       return {
@@ -7707,21 +7711,6 @@ function instance$s($$self, $$props, $$invalidate) {
     _el.removeEventListener("focus", onFocus, true);
 
     _el.removeEventListener("blur", onBlur, true);
-  } // parse and convert values to strings to avoid later type comparison issues
-
-
-  function parseValues() {
-    let rawValue;
-
-    try {
-      rawValue = JSON.parse(value || "[]");
-    } catch (e) {
-      rawValue = [value];
-    }
-
-    const rawValues = typeof rawValue === "object" ? rawValue : [rawValue]; // convert all values to strings to avoid later type comparison issues
-
-    return rawValues.map(val => `${val}`);
   }
 
   async function showMenu() {
@@ -7729,7 +7718,7 @@ function instance$s($$self, $$props, $$invalidate) {
       return;
     }
 
-    $$invalidate(15, _isMenuVisible = true);
+    $$invalidate(17, _isMenuVisible = true);
     await tick(); // hide menu on blur
 
     _menuEl.addEventListener("blur", closeMenu); // bind up/down arrows to navigate options
@@ -7744,11 +7733,11 @@ function instance$s($$self, $$props, $$invalidate) {
     _menuEl.removeEventListener("mouseover", onHighlight);
 
     setHighlightedIndexToSelected();
-    $$invalidate(15, _isMenuVisible = false);
+    $$invalidate(17, _isMenuVisible = false);
   }
 
   function setHighlightedIndexToSelected() {
-    $$invalidate(16, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
+    $$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
   } // Event handlers
 
   /**
@@ -7758,7 +7747,7 @@ function instance$s($$self, $$props, $$invalidate) {
 
   function onSelect(value, label, close) {
     if (_disabled) return;
-    $$invalidate(14, _selectedLabel = label);
+    $$invalidate(16, _selectedLabel = label);
     let detail;
 
     if (_multiselect) {
@@ -7769,7 +7758,7 @@ function instance$s($$self, $$props, $$invalidate) {
         values: _values
       };
     } else {
-      $$invalidate(12, _values = [value]);
+      $$invalidate(15, _values = [value]);
       detail = {
         name,
         value
@@ -7825,14 +7814,14 @@ function instance$s($$self, $$props, $$invalidate) {
 
   function _handleArrowDown() {
     if (_highlightedIndex < _options.length - 1) {
-      $$invalidate(16, _highlightedIndex++, _highlightedIndex);
+      $$invalidate(18, _highlightedIndex++, _highlightedIndex);
       onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
     }
   }
 
   function _handleArrowUp() {
     if (_highlightedIndex > 0) {
-      $$invalidate(16, _highlightedIndex--, _highlightedIndex);
+      $$invalidate(18, _highlightedIndex--, _highlightedIndex);
       onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
     }
   } // add required bindings to component
@@ -7848,7 +7837,7 @@ function instance$s($$self, $$props, $$invalidate) {
   }
 
   function onHighlight(e) {
-    $$invalidate(16, _highlightedIndex = Number(e.target.dataset.index));
+    $$invalidate(18, _highlightedIndex = Number(e.target.dataset.index));
   }
 
   function onNativeSelect(e) {
@@ -7860,8 +7849,8 @@ function instance$s($$self, $$props, $$invalidate) {
   function select_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _selectEl = $$value;
-      $$invalidate(20, _selectEl);
-      $$invalidate(13, _options);
+      $$invalidate(21, _selectEl);
+      ((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(28, value)), $$invalidate(14, _native)), $$invalidate(30, native);
     });
   }
 
@@ -7870,14 +7859,14 @@ function instance$s($$self, $$props, $$invalidate) {
   function ul_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _menuEl = $$value;
-      $$invalidate(19, _menuEl);
+      $$invalidate(20, _menuEl);
     });
   }
 
   function div_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _el = $$value;
-      $$invalidate(18, _el);
+      $$invalidate(13, _el);
     });
   }
 
@@ -7903,7 +7892,7 @@ function instance$s($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty[0] &
     /*disabled*/
     64) {
-      $$invalidate(21, _disabled = toBoolean(disabled));
+      $$invalidate(22, _disabled = toBoolean(disabled));
     }
 
     if ($$self.$$.dirty[0] &
@@ -7921,11 +7910,28 @@ function instance$s($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty[0] &
     /*native*/
     1073741824) {
-      $$invalidate(22, _native = toBoolean(native));
+      $$invalidate(14, _native = toBoolean(native));
+    }
+
+    if ($$self.$$.dirty[0] &
+    /*_el, value, _native, _options*/
+    268464128) {
+      {
+        if (_el) {
+          $$invalidate(15, _values = parseValues(value));
+          $$invalidate(12, _options = getOptions());
+
+          if (!_native) {
+            $$invalidate(19, _computedWidth = getCustomDropdownWidth(_options));
+            addKeyboardEventListeners();
+            setHighlightedIndexToSelected();
+          }
+        }
+      }
     }
   };
 
-  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _values, _options, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _el, _menuEl, _selectEl, _disabled, _native, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
+  return [name, arialabel, leadingicon, maxheight, placeholder, width, disabled, error, mt, mr, mb, ml, _options, _el, _native, _values, _selectedLabel, _isMenuVisible, _highlightedIndex, _computedWidth, _menuEl, _selectEl, _disabled, _error, showMenu, closeMenu, onSelect, onNativeSelect, value, multiselect, native, select_binding, click_handler, ul_binding, div_binding];
 }
 
 class Dropdown extends SvelteElement {
@@ -20104,6 +20110,7 @@ const GoACircularProgress = ({
 
 const GoAContainer = ({
   accent,
+  heading,
   title,
   padding,
   children,
@@ -20115,6 +20122,7 @@ const GoAContainer = ({
   ml,
   testId
 }) => {
+  const headingContent = heading || title;
   return jsxs("goa-container", Object.assign({
     type: type,
     padding: padding,
@@ -20125,15 +20133,15 @@ const GoAContainer = ({
     ml: ml,
     "data-testid": testId
   }, {
-    children: [title && jsx("div", Object.assign({
+    children: [headingContent && jsx("div", Object.assign({
       slot: "title"
     }, {
-      children: title
-    }), void 0), actions && jsx("div", Object.assign({
+      children: headingContent
+    }), void 0), children, actions && jsx("div", Object.assign({
       slot: "actions"
     }, {
       children: actions
-    }), void 0), children]
+    }), void 0)]
   }), void 0);
 };